@charset "UTF-8";

/*
==================================================

   トップページ

==================================================
*/



/*
==================================================
  メインビジュアル
==================================================
*/

/* ----- メインビジュアル ----- */
#mainvisual {
position: relative;
width: 100%;
height: calc(100vh - 150px);
background: var(--accent1-col);
overflow: hidden;
}

/* レイヤー（オープニング） */
#mainvisual div.layer::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(5, 56, 150, 1);
z-index: 15;
animation: scrollLayer 0.5s ease-out forwards;
animation-delay: 0.9s;
}
@keyframes scrollLayer {
  0% { width: 100%; }
  100% { width: 0; }
}

/* レイヤー（左斜め） */
#mainvisual::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 554px;
height: 900px;
background: rgba(5, 56, 150, 0.2);
clip-path: polygon(0 0, 100% 0, 0 100%, 0 100%);
z-index: 12;
}

/* レイヤー（明度調整） */
#mainvisual::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*
background: rgba(5, 56, 150, 0.2);
*/
z-index: 11;
}

/* 背景ビデオ */
#mainvisual video {
position: absolute;
object-fit: cover;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}

/* キャッチ */
#mainvisual p.catch {
position: absolute;
top: 25%;
left: 0;
font-size: 50px;
font-size: clamp(50px, 4.8vw, 70px);
font-weight: 900;
font-style: italic;
color: #ffffff;
z-index: 14;
}
#mainvisual p.catch span {
display: inline-block;
height: 130px;
padding: 1px 20px 1px 90px;
background: linear-gradient(to right, var(--accent1-col) 20%, transparent 90%);
clip-path: polygon(86px 0, 100% 0, 100% 100%, 0 100%);
line-height: 114px;
}
#mainvisual p.catch span:first-child {
margin: 0 0 0 30px;
border-bottom: 10px transparent solid;
border-image: linear-gradient(to right, #ffffff 50%, transparent 95%) 1;
}
#mainvisual p.catch span:last-child {
border-top: 10px transparent solid;
border-image: linear-gradient(to right, var(--accent2-col) 50%, transparent 95%) 1;
}
/* フェードイン */
#mainvisual p.catch {
opacity: 0;
animation: fadeInCatch 0.5s ease-out forwards;
animation-delay: 2.5s;
}
@keyframes fadeInCatch {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* スクロールテキスト */
div.scroll {
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
overflow: hidden;
white-space: nowrap;
z-index: 13;
}
/* フェードイン */
div.scroll {
opacity: 0;
animation: fadeInScroll 0.5s ease-out forwards;
animation-delay: 1.5s;
}
@keyframes fadeInScroll {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 0.7;
    transform: translateY(0);
  }
}
/* テキスト */
div.scroll p.en {
display: inline-block;
width: max-content;
font-size: 150px;
font-size: clamp(150px, 12.5vw, 180px);
font-weight: bold;
color: transparent;
-webkit-text-stroke: 2px #ffffff;
text-stroke: 2px #ffffff;
animation: scrollAnime 50s linear infinite;
animation-delay: 3.5s;
}
div.scroll p span {
display: inline-block;
}
@keyframes scrollAnime {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Full Video */
#mainvisual div.more {
position: absolute;
bottom: 10px;
right: 10px;
z-index: 14;
}
#mainvisual div.more a {
display: block;
padding: 8px 10px 6px 35px;
background: #ffffff url(../../image/design/video.png) no-repeat 7px;
border-radius: 15px;
font-size: 13px;
font-weight: bold;
color: currentColor;
text-decoration: none;
opacity: 0.6;
transition: 0.2s;
}
#mainvisual div.more a:hover {
opacity: 1;
}

/* ----- 認証マーク ----- */
#mainvisual ul.mark {
position: absolute;
top: 10px;
right: 10px;
display: flex;
align-items: center;
column-gap: 8px;
z-index: 14;
}
#mainvisual ul.mark li {
display: flex;
align-items: center;
width: 45px;
height: 50px;
padding: 0 3px;
background: #ffffff;
border-radius: 5px;
opacity: 0.8;
transition: 0.2s;
}
#mainvisual ul.mark li:hover {
opacity: 1;
}



/* ----- ★899 ----- */
@media screen and (max-width: 899px) {

/* ----- メインビジュアル ----- */
#mainvisual {
height: 450px;
max-height: calc(100vh - 60px);
}

/* レイヤー（左斜め） */
#mainvisual::before {
width: 200px;
height: 330px;
}

/* キャッチ */
#mainvisual p.catch {
top: 25%;
left: -10px;
font-size: 20px;
font-size: clamp(19px, 5.2vw, 40px);
}
#mainvisual p.catch span {
height: 80px;
padding: 1px 5px 1px 40px;
clip-path: polygon(49px 0, 100% 0, 100% 100%, 0 100%);
line-height: 70px;
}
#mainvisual p.catch span:first-child {
margin: 0 0 0 20px;
border-bottom: 7px transparent solid;
}
#mainvisual p.catch span:last-child {
border-top: 7px transparent solid;
}
/* スクロールテキスト */
div.scroll {
bottom: 20px;
}
/* テキスト */
div.scroll p.en {
font-size: 90px;
font-size: clamp(90px, 15vw, 110px);
}

/* Full Video */
#mainvisual div.more {
bottom: 5px;
right: 5px;
}

/* ----- 認証マーク ----- */
#mainvisual ul.mark {
top: 8px;
right: 8px;
column-gap: 5px;
}
#mainvisual ul.mark li {
width: 38px;
height: 44px;
padding: 0 2px;
opacity: 1;
}

}
/* ----- /899 ----- */



/*
==================================================
  コンテンツ
==================================================
*/

/* ----- コンテンツ ----- */
#contents {

}

/* ----- セクション共通 ----- */

/* リード文 */
#contents section p.lead {
margin: 0 0 20px;
font-size: 1.8rem;
font-weight: 900;
color: var(--accent1-col);
line-height: 1.6;
}

/* レイヤー（左上三角） */
#contents section.layer {
position: relative;
}
#contents section.layer::before {
content: '';
position: absolute;
top: 0;
left: 0;
border-width: 160px 100px 0 0;
border-width: clamp(160px, 13vw, 320px) clamp(100px, 8.125vw, 200px) 0 0;
border-style: solid;
border-color: var(--accent1-col) transparent transparent transparent;
}

/* ----- NEWS ----- */
#news {
padding: 17px 0;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08);
}
#news div.wrap {
display: flex;
align-items: center;
column-gap: 20px;
width: 100%;
}

#news dl {
flex: 1;
display: flex;
}
#news dl dt {
margin: 0 15px 0 0;
font-weight: bold;
color: var(--accent2-col);
line-height: 1.4;
white-space: nowrap;
}
#news dl dt::after {
content: '/';
margin: 0 0 0 15px;
}
#news dl dd {
line-height: 1.4;
}
#news dl dd span {
margin: 0 10px 0 0;
white-space: nowrap;
}
#news dl dd a {
font-weight: bold;
color: currentColor;
text-decoration: none;
}
#news dl dd a:hover {
color: var(--accent2-col);
}

#news div.btn {
width: 9rem;
background: var(--accent2-col);
}
#news div.btn::before {
background: #ffffff;
transition-duration: 0.2s;
}
#news div.btn a {
padding: 8px 10px 8px 15px;
border: 1px var(--accent2-col) solid;
font-size: 0.94rem;
font-weight: bold;
color: #ffffff;
transition: 0.2s;
}
#news div.btn a.arrow-ku-s::before {
right: 15px;
}
#news div.btn a:hover {
color: var(--accent2-col);
}

/* ----- HSグループについて ----- */
#about {
position: relative;
padding: 100px 0 80px;
background: url(../../image/home/back_about.jpg) no-repeat 50vw;
}
#about::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
border-width: 0 0 240px 150px;
border-width: 0 0 clamp(240px, 15vw, 320px) clamp(150px, 9.375vw, 200px);
border-style: solid;
border-color: transparent transparent var(--accent1-col) transparent;
}

#about div.wrap p {
width: 50%;
}

#about ul {
display: flex;
margin: 40px 0 0;
column-gap: 15px;
}
#about ul li div.btn a {
padding: 20px 10px;
border: 1px var(--accent1-col) solid;
font-size: 1.1rem;
font-weight: bold;
text-align: center;
transition: 0.2s;
}
#about ul li div.btn a.arrow-ku-s::before {
right: 20px;
}

#about ul li.company div.btn {
width: 16rem;
background: var(--accent1-col);
}
#about ul li.company div.btn::before {
background: #ffffff;
transition-duration: 0.2s;
}
#about ul li.company div.btn a {
color: #ffffff;
}
#about ul li.company div.btn a:hover {
color: var(--accent1-col);
}

#about ul li.pmvv div.btn {
width: 18rem;
background: #ffffff;
}
#about ul li.pmvv div.btn::before {
background: var(--accent1-col);
transition-duration: 0.2s;
}
#about ul li.pmvv div.btn a {
color: var(--accent1-col);
}
#about ul li.pmvv div.btn a:hover {
color: #ffffff;
}

/* ----- 事業内容 ----- */
#business {
padding: 100px 0 80px;
background: var(--light-bgcol);
}

#business div.wrap {
display: flex;
column-gap: 20px;
margin: 50px 0 0;
}

#business div.wrap a {
display: block;
width: 50%;
padding: 15px;
background: #ffffff;
border: 1px transparent solid;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
color: currentColor;
text-decoration: none;
transition: 0.2s;
}
#business div.wrap a:hover {
border: 1px var(--accent2-col) solid;
}
#business div.wrap a dl {
position: relative;
height: 100%;
overflow: hidden;
}
#business div.wrap a dl::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 240px;
height: 100%;
z-index: 1;
}
#business div.wrap a dl::after {
content: '';
position: absolute;
top: -2px;
right: 22%;
width: 300px;
height: 300px;
background: #ffffff;
clip-path: polygon(0 0, 100% 0, 110px 100%, 0 100%);
z-index: 2;
}
#business div.wrap a dl dt {
position: relative;
height: 60px;
margin: 0 0 15px;
padding: 3px 0 0 75px;
font-size: 1.4rem;
font-weight: bold;
color: var(--accent1-col);
line-height: 1.1;
transition: 0.2s;
z-index: 3;
}
#business div.wrap a dl dt span {
font-size: 1rem;
}
#business div.wrap a:hover dl dt {
color: var(--accent2-col);
}
#business div.wrap a dl dd {
position: relative;
padding: 0 45% 5px 0;
line-height: 1.8;
z-index: 3;
}

#business div.wrap a dl.transport::before {
background: url(../../image/home/back_transport.jpg) no-repeat right / 240px;
transition: 0.2s;
}
#business div.wrap a:hover dl.transport::before {
opacity: 0.8;
transform: scale(1.1);
}
#business div.wrap a dl.transport dt {
background: url(../../image/home/icon_transport.png) no-repeat;
}

#business div.wrap a dl.logistics::before {
background: url(../../image/home/back_logistics.jpg) no-repeat right top / 240px;
transition: 0.2s;
}
#business div.wrap a:hover dl.logistics::before {
opacity: 0.8;
transform: scale(1.1);
}
#business div.wrap a dl.logistics dt {
background: url(../../image/home/icon_logistics.png) no-repeat;
}

/* ----- 採用情報 ----- */
#recruit {
position: relative;
margin: 0 0 40px;
padding: 90px 0 80px;
background: var(--accent1-col) url(../../image/home/back_recruit.jpg) no-repeat calc(50vw - 220px);
color: #ffffff;
overflow: hidden;
}
#recruit::before {
content: '';
position: absolute;
top: 0;
right: 35%;
width: 800px;
height: 800px;
background: var(--accent1-col);
clip-path: polygon(0 0, 100% 0, 300px 100%, 0 100%);
}
#recruit::after {
content: 'RECRUITMENT';
position: absolute;
bottom: -20px;
left: 4%;
font-family: 'Oswald', sans-serif;
font-size: 140px;
font-weight: bold;
color: transparent;
-webkit-text-stroke: 2px #ffffff;
text-stroke: 2px #ffffff;
opacity: 0.6;
white-space: nowrap;
}

#contents #recruit p.lead {
display: inline-block;
position: relative;
padding: 3px 10px 3px 15px;
background: #ffffff;
color: var(--accent1-col);
}

#recruit div.wrap {
position: relative;
width: 43%;
}

#contents #recruit div.wrap p {
color: #ffffff;
}

#recruit div.btn {
width: 18rem;
margin: 40px 0 0;
background: var(--accent2-col);
z-index: 2;
}
#recruit div.btn::before {
background: #ffffff;
transition-duration: 0.2s;
}
#recruit div.btn a {
padding: 20px 10px;
border: 1px var(--accent2-col) solid;
font-size: 1.1rem;
font-weight: bold;
color: #ffffff;
text-align: center;
transition: 0.2s;
}
#recruit div.btn a:hover {
color: var(--accent2-col);
}
#recruit div.btn a.arrow-ku-s::before {
right: 20px;
}

#recruit div.certification {
position: absolute;
bottom: 10px;
right: 60px;
padding: 0 7px 5px;
background: #ffffff;
border-radius: 7px;
text-align: center;
}
#recruit div.certification img {
width: 50px;
margin: 0 0 -4px;
}
#contents #recruit div.certification p {
font-size: 0.8rem;
color: var(--text-col);
line-height: 1.4;
}

/* ----- 地域社会への取り組み ----- */
#outreach {
padding: 100px 0 60px;
}

#outreach ul {
display: flex;
column-gap: 20px;
margin: 50px 0 40px;
}
#outreach ul li {
flex: 1;
}

#outreach ul dl dt {
padding: 15px 0 10px;
font-size: 1.2rem;
font-weight: bold;
color: var(--accent1-col);
line-height: 1.4;
}
#outreach ul dl dd {
line-height: 1.8;
}

#outreach div.btn {
width: 18rem;
margin: 50px auto 0;
background: var(--accent2-col);
}
#outreach div.btn::before {
background: #ffffff;
transition-duration: 0.2s;
}
#outreach div.btn a {
padding: 20px 10px;
border: 1px var(--accent2-col) solid;
font-size: 1.1rem;
font-weight: bold;
color: #ffffff;
text-align: center;
transition: 0.2s;
}
#outreach div.btn a:hover {
color: var(--accent2-col);
}
#outreach div.btn a.arrow-ku-s::before {
right: 20px;
}

#outreach div.certification {
display: flex;
justify-content: center;
align-items: center;
column-gap: 10px;
margin: 30px 0 0;
}
#outreach div.certification img {
width: 70px;
}
#outreach div.certification p {
line-height: 1.6;
}

/* ----- ブログ ----- */
#blog {
padding: 100px 0 80px;
background: var(--accent1-col);
color: #ffffff;
}
#contents #blog.layer::before {
border-color: #ffffff transparent transparent transparent;
}

#blog ul {
display: flex;
column-gap: 20px;
margin: 50px 0 50px;
}
#blog ul li {
width: calc(33.3% - 13.33px);
}

#blog ul a {
display: block;
height: 100%;
background: #ffffff;
border: 1px #ffffff solid;
color: var(--text-col);
text-decoration: none;
transition: 0.2s;
overflow: hidden;
}
#blog ul a:hover {
border: 1px var(--accent2-col) solid;
}

#blog ul a div.img {
display: flex;
align-items: center;
height: 170px;
transition: 0.2s;
}
#blog ul a:hover div.img {
opacity: 0.8;
transform: scale(1.1);
}
#blog ul a div.img img {
width: 100%;
height: 100%;
object-fit: cover;
}

#blog ul a div.meta {
display: flex;
justify-content: space-between;
position: relative;
padding: 10px 10px 0;
background: #ffffff;
}
#blog ul a div.meta span.date {
font-size: 0.94rem;
}
#blog ul a div.meta span.cate {
padding: 3px 10px;
background: var(--accent1-col);
border-radius: 5px;
font-size: 0.84rem;
color: #ffffff;
}

#blog ul dl {
position: relative;
background: #ffffff;
}
#blog ul dl dt {
padding: 15px 10px 10px;
font-size: 1.2rem;
font-weight: bold;
color: var(--accent1-col);
line-height: 1.4;
transition: 0.2s;
}
#blog ul a:hover dl dt {
color: var(--accent2-col);
}
#blog ul dl dd {
padding: 0 10px 20px;
font-size: 0.94rem;
line-height: 1.6;
}

#blog div.btn {
width: 18rem;
margin: 30px auto 0;
background: #ffffff;
}
#blog div.btn::before {
background: var(--accent2-col);
transition-duration: 0.2s;
}
#blog div.btn a {
padding: 20px 10px;
border: 1px var(--accent2-col) solid;
font-size: 1.1rem;
font-weight: bold;
color: var(--accent2-col);
text-align: center;
transition: 0.2s;
}
#blog div.btn a:hover {
color: #ffffff;
}
#blog div.btn a.arrow-ku-s::before {
right: 20px;
}

/* ----- SNS ----- */
#sns {
padding: 100px 0 80px;
background: var(--light-bgcol);
}

#sns div.wrap {
display: flex;
flex-wrap: wrap;
gap: 40px 30px;
max-width: 940px;
margin: 60px auto 0;
}

#sns section {
position: relative;
width: calc(50% - 15px);
background: #ffffff;
border: 1px solid;
}
#sns section h3 {
padding: 15px 5px;
font-size: 1.1rem;
color: #ffffff;
text-align: center;
}
#sns section.ig h3 {
background: #f98738 url(../../image/home/insta_back.png) no-repeat center;
}
#sns section.tk h3 {
background: #000000 url(../../image/home/tiktok_back.png) no-repeat center;
}
#sns section.x h3 {
background: #0f1419;
}

#sns section div.embed {
margin: 0 0 80px;
}

#sns div.btn {
position: absolute;
bottom: 15px;
width: 100%;
background: #ffffff;
}
#sns div.btn a {
margin: 0 15px;
padding: 15px 10px;
background: #ffffff;
border: 1px var(--accent1-col) solid;
font-size: 1rem;
font-weight: bold;
color: var(--accent1-col);
text-align: center;
transition: 0.2s;
}
#sns div.btn a:hover {
background: var(--accent1-col);
color: #ffffff;
}
#sns div.btn a.arrow-ku-s::before {
right: 20px;
}



/* ----- ★1700 ----- */
@media screen and (min-width: 1700px) {

/* ----- 採用情報 ----- */
#recruit {
background: var(--accent1-col) url(../../image/home/back_recruit.jpg) no-repeat calc(50vw - 100px);
}

}
/* ----- /1700 ----- */



/* ----- ★1054 ----- */
@media screen and (max-width: 1054px) {

/* ----- 事業内容 ----- */
#business div.wrap a dl::after {
right: 15%;
}

/* ----- 採用情報 ----- */
#recruit {
background: var(--accent1-col) url(../../image/home/back_recruit.jpg) no-repeat calc(50vw - 300px);
}
#recruit::after {
font-size: 120px;
}

#contents #recruit div.wrap p {
padding: 5px;
background: rgba(5, 56, 150, 0.9);
border-radius: 8px;
}

#contents #recruit div.certification p {
background: #ffffff;
}

}
/* ----- /1054 ----- */



/* ----- ★899 ----- */
@media screen and (max-width: 899px) {

/* ----- セクション共通 ----- */

/* リード文 */
#contents section p.lead {
margin: 0 0 15px;
font-size: 1.1rem;
line-height: 1.7;
}

/* レイヤー（左上三角） */
#contents section.layer::before {
border-width: 64px 40px 0 0;
}

/* ----- NEWS ----- */
#news {
padding: 10px 0 10px;
}
#news div.wrap {
display: block;
}

#news dl {
display: block;
margin: 0 0 10px;
}
#news dl dt {
margin: 0 15px 5px 0;
}
#news dl dt::after {
margin: 0 0 0 10px;
}
#news dl dd {
line-height: 1.5;
}

#news div.btn {
width: 9rem;
margin: 0 auto;
margin: 0 0 0 auto;
}
#news div.btn a:hover {
color: #ffffff;;
}

/* ----- HSグループについて ----- */
#about {
padding: 50px 0 40px;
background: url(../../image/home/back_about.jpg) no-repeat 53vw 10px / 100%;
}
#about::after {
border-width: 0 0 64px 40px;
}

#about div.wrap p.lead {
width: 55%;
}
#about div.wrap p.text {
width: auto;
max-width: 400px;
padding: 5px;
background: rgba(255, 255, 255, 0.9);
border-radius: 8px;
}

#about ul {
display: block;
margin: 30px 0 0;
}
#about ul li:first-child {
margin: 0 0 15px;
}
#about ul li div.btn {
margin: 0 auto;
}
#about ul li div.btn a {
padding: 13px 5px;
font-size: 1rem;
}

#about ul li.company div.btn a:hover {
color: #ffffff;
}

#about ul li.pmvv div.btn {
width: 16rem;
}
#about ul li.pmvv div.btn a:hover {
color: var(--accent1-col);
}

/* ----- 事業内容 ----- */
#business {
padding: 50px 0 40px;
}

#business div.wrap {
display: block;
max-width: 500px;
margin: 30px auto 0;
}

#business div.wrap a {
width: auto;
padding: 10px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
#business div.wrap a:first-child {
margin: 0 0 30px;
}
#business div.wrap a:hover {
border: 1px transparent solid;
}
#business div.wrap a dl::after {
right: 18%;
}
#business div.wrap a dl dt {
height: 40px;
margin: 0 0 10px;
padding: 0 0 0 50px;
font-size: 1.1rem;
}
#business div.wrap a dl dt span {
font-size: 0.9rem;
}
#business div.wrap a:hover dl dt {
color: var(--accent1-col);
}
#business div.wrap a dl dd {
margin: 0 25% 7px 0;
padding: 5px;
background: rgba(255, 255, 255, 0.9);
border-radius: 8px;
}

#business div.wrap a:hover dl.transport::before {
opacity: 1;
transform: scale(1);
}
#business div.wrap a dl.transport dt {
background: url(../../image/home/icon_transport.png) no-repeat left / 40px;
}

#business div.wrap a:hover dl.logistics::before  {
opacity: 1;
transform: scale(1);
}
#business div.wrap a dl.logistics dt {
background: url(../../image/home/icon_logistics.png) no-repeat left / 40px;
}

/* ----- 採用情報 ----- */
#recruit {
margin: 0 0 40px;
padding: 50px 0 40px;
background: var(--accent1-col) url(../../image/home/back_recruit.jpg) no-repeat calc(55vw - 250px) top / 720px;
}
#recruit::after {
left: 10px;
font-size: 90px;
}

#contents #recruit p.lead {
margin: 0 0 130px;
padding: 3px 5px 3px 10px;
}

#recruit div.wrap {
width: 100%;
padding: 0 70px 0 0;
}

#recruit div.btn {
margin: 30px auto 0;
width: 16rem;
}
#recruit div.btn a {
padding: 13px 5px;
font-size: 1rem;
}
#recruit div.btn a:hover {
color: #ffffff;
}

#recruit div.certification {
top: 350px;
bottom: auto;
right: 10px;
padding: 0 5px 5px;
border-radius: 5px;
}
#recruit div.certification img {
width: 40px;
margin: 0 0 -2px;
}
#contents #recruit div.certification p {
font-size: 0.7rem;
}

/* ----- 地域社会への取り組み ----- */
#outreach {
padding: 50px 0 40px;
}

#outreach ul {
display: block;
max-width: 500px;
margin: 40px auto;
}
#outreach ul li {
margin: 0 0 35px;
}
#outreach ul li:last-child {
margin: 0;
}

#outreach ul dl dt {
font-size: 1.1rem;
}

#outreach div.btn {
width: 16rem;
margin: 30px auto 0;
}
#outreach div.btn a {
padding: 13px 5px;
font-size: 1rem;
}
#outreach div.btn a:hover {
color: #ffffff;
}

#outreach div.certification img {
width: 50px;
}
#outreach div.certification p {
font-size: 0.9rem;
line-height: 1.6;
}

/* ----- ブログ ----- */
#blog {
padding: 50px 0 40px;
}

#blog ul {
display: block;
max-width: 500px;
margin: 40px auto 40px;
}
#blog ul li {
width: auto;
margin: 0 0 30px;
}
#blog ul li:last-child {
margin: 0;
}

#blog ul a {
display: block;
padding: 10px;
}
#blog ul a:hover {
border: 1px #ffffff solid;
}

#blog ul a div.img {
display: block;
height: 200px;
}
#blog ul a:hover div.img {
opacity: 1;
transform: scale(1);
}

#blog ul a div.meta {
padding: 10px 0 0;
}

#blog ul dl dt {
padding: 15px 0 10px;
font-size: 1.1rem;
}
#blog ul a:hover dl dt {
color: var(--accent1-col);
}
#blog ul dl dd {
padding: 0 0 15px;
}

#blog div.btn {
width: 16rem;
}
#blog div.btn a {
padding: 13px 5px;
font-size: 1rem;
}
#blog div.btn a:hover {
color: var(--accent2-col);
}

/* ----- SNS ----- */
#sns {
padding: 50px 0 40px;
}

#sns div.wrap {
display: block;
max-width: 500px;
margin: 40px auto 0;
}

#sns section {
width: auto;
margin: 0 0 40px;
}
#sns section:last-child {
margin: 0;
}

#sns section div.embed {
margin: 0 0 70px;
}

#sns div.btn a {
margin: 0 10px;
padding: 13px 5px;
}
#sns div.btn a:hover {
background: #ffffff;
color: var(--accent1-col);
}

}
/* ----- /899 ----- */