/* ===================================================
共通・汎用
 =================================================== */

/* フォント関連 */
section.service h2, section.service p, section.company h2, section.company p, section.safety p, section.recruit h2, section.recruit p { font-weight:700; }

/* 見出し */
section.service h2, section.company h2 { color:var(--bl); font-size:24px; margin-bottom:16px; }

/* テキスト */
section.service p, section.company p, section.safety p, section.recruit p { font-size:16px; line-height:32px; }

 /* ボタン */
section.safety p a.hover-button, section.recruit p a.hover-button, section.company p a.hover-button { margin-top:24px; height:42px; width:124px; }
section.safety p a.hover-button, section.company p a.hover-button { background-image:url(../img/button/button-blue.svg); }
section.safety p a.hover-button:hover, section.company p a.hover-button:hover { background-image:url(../img/button/button-blue-ov.svg); }

/* ===================================================
ファーストビュー
 =================================================== */

/* ファーストビュー */
div.first-view { aspect-ratio:375/473; background-image:linear-gradient(101deg, #46AEEB 16.42%, #386ECD 46.61%, #2B32B2 95.3%); position:relative; height:auto; width:100%; z-index:1; }
div.first-view::after { background-color:var(--wh); content:''; clip-path:ellipse(100% 45% at 100% 100%); display:block; position:absolute; bottom:0; right:0; height:280px; width:100%; z-index:1; }
div.first-view::before { background:linear-gradient(315deg, rgba(37, 118, 183, 0.00) 20.84%, rgba(70, 174, 235, 0.50) 96.25%); content:''; display:block; position:absolute; top:0; left:0; height:100%; width:100%; z-index:1; }
div.movie-area { aspect-ratio:376.56/373; clip-path:circle(83.9% at 15% 10%); position:absolute; top:0; left:0;  height:auto; width:100%; }
.first-view-bg { object-fit:cover; object-position:bottom center; padding:0 0 10px 0; height:100%; width:100%; }
div.first-view h2.first-view-title { aspect-ratio:375/473; position:relative; z-index:1; }
div.first-view h2.first-view-title span img { display:inline-block; position:absolute; left:20px; z-index:5; height:48px; width:200px; z-index:1; }
div.first-view h2.first-view-title span.top02 img { bottom:22.5vh; }
div.first-view h2.first-view-title span.top01 img { bottom:30vh; }

/* 在庫閲覧システムログインボタン */
a.system-login { position:absolute; right:12px; bottom:90px; z-index:3; }
a.system-login img { height:120px; width:120px; }

@container( min-width:960px ) { /* PC版 */

/* ファーストビュー */
div.first-view, div.movie-area { aspect-ratio:1448/970; }
div.first-view { background-image:linear-gradient(-90deg, #46AEEB 14.89%, #386ECD 45.76%, #2B32B2 95.54%); }
div.movie-area { clip-path:ellipse(87% 80% at 11% 6%); }
div.first-view::after { clip-path:ellipse(100% 100% at 100% 100%); height:150px; }
div.first-view h2.first-view-title { aspect-ratio:1448/970; }
div.first-view h2.first-view-title span { aspect-ratio:420/101; opacity:0; transform:translateX(300%); transition:transform 1.2s ease, opacity 1.2s ease; position:absolute; right:100vw; max-width:420px; width:min(420px, 40vw); will-change:transform, opacity; }
div.first-view h2.first-view-title span img { aspect-ratio:420/101; left:0; height:auto; max-width:420px; width:auto; }
div.first-view h2.first-view-title span.top02 { bottom:12.5vh; transform:translateY(30%); }
div.first-view h2.first-view-title span.top01 { bottom:15vh; }

/* アニメーション */
.first-view.animate span { right:auto; left:10vw; }
.first-view.animate .top01 { transform:translateX(0); transition-delay:0s; opacity:1; }
.first-view.animate .top02 { transform:translateY(0); transition-delay:1.5s; transition-duration:1.2s; opacity:1; }


/* 在庫閲覧システムログインボタン */
a.system-login { right:12.5vw; bottom:200px; }
a.system-login img { height:180px; width:180px; }

}

/* ===================================================
事業内容
 =================================================== */

/* ベース */
section.service { padding:0 19px; margin-bottom:70px; }

/* リスト */
section.service ul { align-items:center; gap:16px; flex-wrap:wrap; justify-content:flex-start; margin-top:16px; }
section.service ul li { width:calc( 50% - 8px ); }
section.service ul li a { aspect-ratio:1/1; height:auto; width:100%; }

/* ボタン */
section.service::after { 
background:url(../img/top/service/list-01.png) no-repeat,
url(../img/top/service/list-02.png) no-repeat,
url(../img/top/service/list-03.png) no-repeat,
url(../img/top/service/list-04.png) no-repeat,
url(../img/top/service/list-05.png) no-repeat;
content:'';
content:'';display:none;
 }
section.service ul li a.hover-button { background-size:contain; background-image:url(../img/top/service/list-01.png); height:100%; width:100%; }
section.service ul li a.hover-button:hover { background-image:url(../img/top/service/list-01.png); }
section.service ul li:nth-child(2) a.hover-button { background-image:url(../img/top/service/list-02.png); }
section.service ul li:nth-child(2) a.hover-button:hover { background-image:url(../img/top/service/list-02.png); }
section.service ul li:nth-child(3) a.hover-button { background-image:url(../img/top/service/list-03.png); }
section.service ul li:nth-child(3) a.hover-button:hover { background-image:url(../img/top/service/list-03.png); }
section.service ul li:nth-child(4) a.hover-button { background-image:url(../img/top/service/list-04.png); }
section.service ul li:nth-child(4) a.hover-button:hover { background-image:url(../img/top/service/list-04.png); }
section.service ul li:nth-child(5) a.hover-button { background-image:url(../img/top/service/list-05.png); }
section.service ul li:nth-child(5) a.hover-button:hover { background-image:url(../img/top/service/list-05.png); }

@container( min-width:960px ) {

/* ベース */
section.service h2, section.service p { transform:translateY(46px); margin:auto; max-width:1200px; }
section.service h2 { font-size:36px; font-weight:700; margin-bottom:24px; }
section.service h2 img { height:auto; width:273px; }
section.service p { font-size:20px; font-weight:600; line-height:34px; }
section.service ul { flex-wrap:nowrap; justify-content:center; gap:0px; padding:0; margin:auto; margin-bottom:260px; max-width:1500px; }
section.service ul li { aspect-ratio:297/334; flex:1 1 0; width:auto; }
section.service ul li:first-child { transform:translateX(57.5%) translateY(30%); }
section.service ul li:nth-child(2) { transform:translateX(32.5%) translateY(30%); }
section.service ul li:nth-child(3) { transform:translateX(15%); }
section.service ul li:nth-child(4) { transform:translateX(-10%); }
section.service ul li:nth-child(5) { transform:translateX(-34%); }

/* ボタン */
section.service::after {
background:url(../img/services/pc-nav-01shipping-ov.svg) no-repeat,
url(../img/services/pc-nav-03processing-ov.svg) no-repeat,
url(../img/services/pc-nav-04inventory-ov.svg) no-repeat,
url(../img/services/pc-nav-05cleanup-ov.svg) no-repeat,
url(../img/services/pc-nav-02transportation-ov.svg) no-repeat;
content:'';
display:none; }
section.service ul li a.hover-button { background-size:contain; background-image:url(../img/services/pc-nav-01shipping.svg); clip-path:polygon(20% 0%, 100% 0%, 77.5% 100%, 0% 100%); overflow:hidden; text-indent:-9999px; height:100%; width:100%; }
section.service ul li a.hover-button:hover { background-image:url(../img/services/pc-nav-01shipping-ov.svg); }
section.service ul li:nth-child(2) a.hover-button { background-image:url(../img/services/pc-nav-02transportation.svg); }
section.service ul li:nth-child(2) a.hover-button:hover { background-image:url(../img/services/pc-nav-02transportation-ov.svg); }
section.service ul li:nth-child(3) a.hover-button { background-image:url(../img/services/pc-nav-03processing.svg); }
section.service ul li:nth-child(3) a.hover-button:hover { background-image:url(../img/services/pc-nav-03processing-ov.svg); }
section.service ul li:nth-child(4) a.hover-button { background-image:url(../img/services/pc-nav-04inventory.svg); height:100%; width:100%; }
section.service ul li:nth-child(4) a.hover-button:hover { background-image:url(../img/services/pc-nav-04inventory-ov.svg); }
section.service ul li:nth-child(5) a.hover-button { background-image:url(../img/services/pc-nav-05cleanup.svg); height:100%; width:100%; }
section.service ul li:nth-child(5) a.hover-button:hover { background-image:url(../img/services/pc-nav-05cleanup-ov.svg); }


}

/* ===================================================
会社案内
 =================================================== */

/* 配置 */
section.company div.flex { flex-direction:column; gap:8px; }
section.company div.flex div.image-box { margin:auto; max-width:374px; }
section.company div.flex div.image-box img { margin:auto; height:auto; max-width:100%; }

/* ベース */
section.company { background-size:cover; background-repeat:no-repeat; background-position:bottom center; background-image:linear-gradient(to bottom, rgba(255,255,255, 0.75), rgba(255,255,255, 0.25)), url(../img/top/company/sp-company-bg.jpg); padding:12px 0 23px 0; margin-bottom:100px; }

/* 見出し */
section.company h2 { margin:0 19px 16px 19px; }

/* テキスト */
section.company p { margin:0 19px; }

@container(min-width:960px) { 

/* 配置 */
section.company div.flex { flex-direction:row; gap:12px; margin:auto; max-width:1200px; }
section.company div.flex div.image-box { max-width:580px; }
section.company div.flex div.image-box img { aspect-ratio:614/666; }
section.company div.content-box { max-width:calc( 100% - 600px ) }

/* ベース */
section.company { padding:120px 0 66px 0; margin-bottom:106px; }

/* 見出し */
section.company h2 { font-size:36px; line-height:normal; margin:0 0 24px 0; }
section.company h2 img { height:auto; width:303px; }

}

/* ===================================================
安全への取り組み
 =================================================== */

/* 配置用 */
section.safety div.flex { flex-direction:column; }
section.safety div.image-box { display:none; }

/* ベース */
section.safety { margin-bottom:64px; }

/* 見出し */
div.title-deco { aspect-ratio:358.5/282; background-size:contain; background-position:left top; background-repeat:no-repeat; background-image:url(../img/top/safety/sp-title-bg.png); position:relative; height:auto; width:100%; z-index:1; }
section.safety h2 { color:var(--wh); font-size:24px; font-weight:700; position:absolute; bottom:36px; left:5vw; z-index:1; }

/* テキスト */
section.safety p { letter-spacing:-0.16px; margin:0 19px; }


@container( min-width:360px ) {

/* テキスト */
section.safety p { font-size:15px; }

}

@container(min-width:960px) {

/* 配置用 */
section.safety div.flex { align-items:center; flex-direction:row; max-width:1440px; }
section.safety div.image-box { aspect-ratio:442/634; display:block; max-height:678px; width:auto; }
section.safety div.image-box img { aspect-ratio:442/634; height:auto; width:100%; }
section.safety div.content-box { padding:0 20px; max-width:808px; }

/* ベース */
section.safety { margin-bottom:248px; }

/* 見出し */
div.title-deco { aspect-ratio:auto; background-image:none; position:static; width:auto; }
section.safety h2 { color:var(--bl); font-size:36px; font-weight:700; position:static; margin-bottom:24px; }

/* テキスト */
div.content-box p { font-size:20px; line-height:170%; margin:0; margin-bottom:32px; }

}

/* ===================================================
採用情報
 =================================================== */

/* ベース */
section.recruit { background-image:url(../img/top/recruit/recruit-bg.jpg); background-size:cover; background-repeat:no-repeat; background-position:center center; padding:15px 20px; position:relative; margin-bottom:157px; z-index:1; }
section.recruit::before { background-image:linear-gradient(90deg,#3EE36D,#3FDD6C8F,#40D56A00); content:''; display:block; position:absolute; top:0; left:0; height:100%; width:100%; z-index:-1; }

/* 見出し */
section.recruit h2 { color:var(--wh); font-size:24px; margin-bottom:24px; }

/* テキスト */
section.recruit p { text-shadow:0 0 8px rgba(0,0,0,5); }
section.recruit p.recruit-text span { color:var(--wh); }

/* ボタン */
section.recruit::after { background:url(../img/button/button-wh-ov.svg) no-repeat; content:''; display:none; }
section.recruit p a.hover-button { background-image:url(../img/button/button-wh.svg); }
section.recruit p a.hover-button:hover { background-image:url(../img/button/button-wh-ov.svg); }

@container( min-width:960px ) {

/* 配置 */
section.recruit h2, section.recruit p { margin-left:auto; margin-right:auto; max-width:1000px; }

/* ベース */
section.recruit { padding:43.24px 0 64.64px 0; margin-bottom:calc( 160px + 250px ); }
section.recruit::before { width:70%; }

/* 見出し */
section.recruit h2 { font-size:36px; margin-bottom:61px; }
section.recruit h2 img { height:100px; width:auto; }

/* テキスト */
section.recruit p.recruit-text { font-size:20px; font-weight:600; line-height:170%; margin-bottom:32px; }
section.recruit p.recruit-text span { display:block; margin-left:0; max-width:485px; }

}