/* ===================================================
ページ内ナビゲーション
 =================================================== */

/* ベース */
nav.page-nav { margin-bottom:40px; }
nav.page-nav ul { flex-wrap:wrap; gap:8px; padding:0 19px; }

/* ボタン */
nav.page-nav ul li a.hover-button { background-image:url(../img/services/01shipping.svg); height:34px; width:98px; }
nav.page-nav ul li a.hover-button:hover { background-image:url(../img/services/01shipping.svg); }
nav.page-nav ul li:nth-child(2) a.hover-button { background-image:url(../img/services/02transportation.svg); }
nav.page-nav ul li:nth-child(2) a.hover-button:hover { background-image:url(../img/services/02transportation.svg); }
nav.page-nav ul li:nth-child(3) a.hover-button { background-image:url(../img/services/03processing.svg); }
nav.page-nav ul li:nth-child(3) a.hover-button:hover { background-image:url(../img/services/03processing.svg); }
nav.page-nav ul li:nth-child(4) a.hover-button { background-image:url(../img/services/04inventory.svg); width:168px; }
nav.page-nav ul li:nth-child(4) a.hover-button:hover { background-image:url(../img/services/04inventory.svg); }
nav.page-nav ul li:nth-child(5) a.hover-button { background-image:url(../img/services/05cleanup.svg); width:168px; }
nav.page-nav ul li:nth-child(5) a.hover-button:hover { background-image:url(../img/services/05cleanup.svg); }

@container( min-width:960px ) {

/* ベース */
nav.page-nav ul { flex-wrap:nowrap; justify-content:center; gap:0px; padding:0; margin:auto; margin-bottom:260px; max-width:1500px; }
nav.page-nav ul li { aspect-ratio:297/334; flex:1 1 0; }
nav.page-nav ul li:first-child { transform:translateX(57.5%) translateY(30%); }
nav.page-nav ul li:nth-child(2) { transform:translateX(32.5%) translateY(30%); }
nav.page-nav ul li:nth-child(3) { transform:translateX(15%); }
nav.page-nav ul li:nth-child(4) { transform:translateX(-10%); }
nav.page-nav ul li:nth-child(5) { transform:translateX(-34%); }

/* ボタン */
nav.page-nav 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; height:100%; width:100%; }
nav.page-nav ul li a.hover-button:hover { background-image:url(../img/services/pc-nav-01shipping-ov.svg); }
nav.page-nav ul li:nth-child(2) a.hover-button { background-image:url(../img/services/pc-nav-02transportation.svg); }
nav.page-nav ul li:nth-child(2) a.hover-button:hover { background-image:url(../img/services/pc-nav-02transportation-ov.svg); }
nav.page-nav ul li:nth-child(3) a.hover-button { background-image:url(../img/services/pc-nav-03processing.svg); }
nav.page-nav ul li:nth-child(3) a.hover-button:hover { background-image:url(../img/services/pc-nav-03processing-ov.svg); }
nav.page-nav ul li:nth-child(4) a.hover-button { background-image:url(../img/services/pc-nav-04inventory.svg); height:100%; width:100%; }
nav.page-nav ul li:nth-child(4) a.hover-button:hover { background-image:url(../img/services/pc-nav-04inventory-ov.svg); }
nav.page-nav ul li:nth-child(5) a.hover-button { background-image:url(../img/services/pc-nav-05cleanup.svg); height:100%; width:100%; }
nav.page-nav ul li:nth-child(5) a.hover-button:hover { background-image:url(../img/services/pc-nav-05cleanup-ov.svg); }

}

/* ===================================================
コンテンツ（汎用・共通）
 =================================================== */

/* ページタイトル */
div.title-image.services-title { background-image:url(../img/services/main-image.jpg); }

/* ベース */
section.services-content { margin-bottom:80px; }

/* 配置 */
section.services-content div.flex { flex-direction:column; gap:24px; }

/* 見出し */
section.services-content h2, section.services-content h3 { margin-bottom:16px; }
section.services-content h3 { color:var(--lb); font-size:20px; font-weight:700; text-align:center; line-height:160%; }

/* テキスト */
div.text-block { padding:0 20px; }

/* 画像 */
div.image-block, div.image-block img { aspect-ratio:375/268; }
div.image-block { overflow:hidden; height:auto; max-width:100%; width:100%; }
div.image-block img { object-fit:cover; width:100%; }

@container( max-width:360px ) {

/* 見出し */
section.services-content h3 { font-size:15px; }

}

@container ( min-width:360px ) and ( max-width:380px ) {

/* 見出し */
section.services-content h3 { font-size:18px; }

}

@container( min-width:960px ) {

/* ベース */
section.services-content { margin:auto; margin-bottom:160px; max-width:1200px; }

/* 配置 */
section.services-content div.flex { flex-direction:row; gap:40px; }

/* 見出し */
section.services-content h2 { margin-bottom:40px; }
section.services-content h3 { text-align:left; margin-bottom:24px; }
section.services-content h3 br { display:none; }

/* 画像 */
div.image-block, div.image-block img { aspect-ratio:42/30; }
div.image-block { max-width:420px; }

}