/**
 * @file        dh1-style.css
 * @description DH1製品ページ用スタイルシート。タイポグラフィ制御、
 *              レイアウト、画像背景（staticpage-assets/dh1配下）を定義する。
 * @version     1.1.0
 * @updated     2026-07-23
 *
 * @changelog
 *   1.1.0 2026-07-23  画像背景のurl()を環境依存の絶対パス(/gemzo/wp-content/...)から
 *                      CSSファイル自身の場所からの相対パスへ変更
 *   1.0.0              初版作成
 */

/* ============================================================
 タイポグラフィ制御システム
 ─ :root の --page-fs-base を変更するだけで
   ページ全体の文字サイズを一括調整できます
 ─ 本文基準 15px 0.9375rem
 ─ 本文基準 14px 0.8750rem
============================================================ */
:root {
--page-fs-base : 0.8750rem;                          /* 本文基準 ← ここを変更 */
--page-fs-xs   : calc(var(--page-fs-base) * 0.800);  /* ~12px：注釈・最小文字 */
--page-fs-sm   : calc(var(--page-fs-base) * 0.867);  /* ~13px：補足文、注釈   */
--page-fs-body : var(--page-fs-base);                 /*  15px：本文           */
--page-fs-h4   : calc(var(--page-fs-base) * 1.067);  /* ~16px：小見出し       */
--page-fs-h3   : calc(var(--page-fs-base) * 1.200);  /* ~18px：中見出し       */
--page-fs-h2   : calc(var(--page-fs-base) * 1.467);  /* ~22px：大見出し       */
--page-fs-h1   : calc(var(--page-fs-base) * 1.867);  /* ~28px：最大見出し     */
}
.page-fs-xs   { font-size: var(--page-fs-xs);   }
.page-fs-sm   { font-size: var(--page-fs-sm);   }
.page-fs-body { font-size: var(--page-fs-body); }
.page-fs-h4   { font-size: var(--page-fs-h4);   }
.page-fs-h3   { font-size: var(--page-fs-h3);   }
.page-fs-h2   { font-size: var(--page-fs-h2);   }
.page-fs-h1   { font-size: var(--page-fs-h1);   }

/* ============================================================
 Container
============================================================ */
@media (min-width: 1200px) {
.container {
max-width: 1000px;
}
}

/* ============================================================
 サブメニュー
============================================================ */
.main-menu-two__logo {
	font-size: 1.5rem;
}
.main-menu-two__logo strong {
	font-size: 1.5rem;
	font-weight: 900;
	border: 1px solid #333;
	padding: 0px 5px;
	margin-right: .5rem;
}


/* ============================================================
 ページ共通
============================================================ */
.page-wrapper { overflow: hidden; }
.nowrap { white-space: nowrap; }
.font-palt-1 { font-feature-settings: "palt" 1; }

/* お知らせバナー（青帯） */
#banner-blue {
display: flex;
justify-content: center;
background: #1133ee;
}
#banner-blue > div {
color: #fff;
font-size: calc(var(--page-fs-body) * 1.400);
font-weight: 700;
padding: 8px 0;
}

/* ============================================================
 製品セクション共通：暗色ヘッダー帯
============================================================ */
.section-header {
background: #222;
padding: 0.6rem 0;
}
.section-header .section-name {
color: #fff;
margin: 0;
font-weight: 300;
}

/* 国内ブランド枠テキスト */
.japanese-brand-label {
display: inline-block;
color: red;
border: 2px solid red;
font-weight: 700;
padding: 2px 0.6em 4px;
font-size: var(--page-fs-h4);
}

/* ============================================================
 製品セクション：ヒーローエリア（背景画像＋テキスト）
============================================================ */
.hero-bg {
position: relative;
padding: 2.5rem 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.hero-bg-overlay {
background: rgba(255,255,255,0.85);
padding: 1.25rem 1.5rem;
border-radius: 4px;
}
.hero-bg-dvddrive { background-image: url(../../staticpage-assets/dh1/assets/images/product/dvd-drive_a.webp); }
.hero-bg-usbhub   { background-image: url(../../staticpage-assets/dh1/assets/images/product/usb-hub_a.webp); }
.hero-bg-zps      { background-image: url(../../staticpage-assets/dh1/assets/images/product/zp-header-bg.webp); background-position: center bottom; }
.hero-bg-crd      { background-image: url(../../staticpage-assets/dh1/assets/images/product/crd-header-bg.webp); background-position: center bottom; }

@media (min-width: 992px) {
.section-set h2 {
  font-size: 2em;
  font-weight: 900;
}
.section-set h3 {
  font-size: 1.5em;
  font-weight: 700;
}
.section-set .set-lead {
  font-size: 1.1em;
  font-weight: 600;
}
}


.section-header-copy {
  position: relative;
}




/* ============================================================
 セット案内：製品イメージ枠
============================================================ */
.item-wrap {
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 8px;
padding: 0.75rem 1.25rem;
margin-bottom: 0.75rem;
aspect-ratio: 705 / 519;
width: min(450px, 100%);
}
.item-wrap > img {
width: 100%;
}

/* ============================================================
 用途セクション：製品タグ
============================================================ */
@media (min-width: 992px) {
.section-purpose .page-fs-h1 {
  font-size: 2rem;
}
.section-purpose h3 {
  font-size: 1.3em;
}
}

.purpose-tag-wrap {
display: flex;
margin: 0.5rem 0 0.25rem;
}
.purpose-tag {
display: inline-block;
height: 18px;
margin-right: 4px;
margin-bottom: -.75rem;
background-size: contain;
background-repeat: no-repeat;
z-index: 1;
}
.purpose-tag-drive   { aspect-ratio: 130/22; background-image: url(../../staticpage-assets/dh1/assets/images/product/purpose-tag-drive.svg?v=202602031830); }
.purpose-tag-usbhub  { aspect-ratio: 101/22; background-image: url(../../staticpage-assets/dh1/assets/images/product/purpose-tag-usbhub.svg?v=202602031830); }
.purpose-tag-player  { aspect-ratio: 150/22; background-image: url(../../staticpage-assets/dh1/assets/images/product/purpose-tag-player.svg?v=202602031830); }
.purpose-tag-creator { aspect-ratio: 150/22; background-image: url(../../staticpage-assets/dh1/assets/images/product/purpose-tag-creator.svg?v=202602031830); }

/* 用途：画像エリア */
.purpose-image-wrap {
position: relative;
width: 100%;
aspect-ratio: 16/9;
background: #f0f0f0;
border-radius: 6px;
overflow: hidden;
margin-bottom: 0.75rem;
}
.purpose-image {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(1.5);
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.purpose-image-wrap:hover .purpose-image {
transform: translate(-50%, -50%) scale(1.4);
}
.purpose-image-sub-wrap {
position: absolute;
background: #eee;
border-radius: 6px;
overflow: hidden;
}
.purpose-image-sub-wrap.sub-01 {
right: 10px; bottom: 10px;
width: 28%; height: 45%;
}
.purpose-image-sub {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(1.6);
width: 100%; height: 100%;
object-fit: cover;
}
/* 画像上テキストオーバーレイ */
.text-on-image-wrap {
position: absolute;
bottom: 10px; left: 10px;
max-width: calc(100% - 20px);
line-height: 1.4;
}
.text-on-image {
display: inline;
font-size: var(--page-fs-sm);
font-weight: 500;
color: #333;
background: rgba(255,255,255,0.93);
padding: 1px 3px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.compati-wrap { text-align: right; padding-right: 5px; }
.compati-img  { width: 80px; aspect-ratio: 194/106; }
.ultra-light  { width: 130px; aspect-ratio: 144/83; }
.text-on-image-wrap.purpose-image-08 {
right: 8px;
left: auto;
}

/* ============================================================
 DVDドライブ：対応メディア仕切り線
============================================================ */
.support-media-row { padding: 0.6rem 2px; }
.support-media-row:not(:last-child) { border-bottom: 1px solid #ccc; }

 /* ヘッダーコピーエリア：背景画像（鮮明） */
  .section-product-dvddrive .section-header-copy .row {
    position: relative;
    height: 370px;
    padding: 30px 0 30px 20px;
    overflow: hidden;
  }
  .section-product-dvddrive .section-header-copy .row::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -65%) scale(2.34);
    width: 100%;
    height: 100%;
    background: url(../../staticpage-assets/dh1/assets/images/product/dvd-drive_a.webp);
    background-size: 100%;
    background-position: center;
    background-repeat: repeat-x;
    transition: transform 0.3s;
    z-index: -1;
  }
  /* キャッチコピーテキスト */
  .section-product-dvddrive .section-header-copy .section-name {
    position: relative;
    font-size: 1.8em;
    font-weight: 700;
    line-height: 1.3;
    color: #0848c0;
  }
  .section-product-dvddrive .section-header-copy .section-name .note-ex {
    font-size: 14px;
  }
  .section-product-dvddrive .section-header-copy .product-dvddrive-subcopy-wrap {
    display: flex;
    flex-direction: column;
  }
  .section-product-dvddrive .section-header-copy .product-dvddrive-subcopy-1 {
    font-size: 1em;
    font-weight: 700;
    line-height: 1.6;
    color: #0848c0;
    margin: 1em 0 .3em;
  }
  .section-product-dvddrive .section-header-copy .product-dvddrive-subcopy-2 {
    font-size: 1em;
    font-weight: 500;
    line-height: 1.6;
  }
  /* 国内ブランド・国内サポート 赤枠テキスト */
  .section-product-dvddrive .section-header-copy .product-dvddrive-japanese-brand {
    font-size: 1.1em;
    font-weight: 700;
    line-height: 1;
    color: red;
    margin: auto 0 0;
  }
  .section-product-dvddrive .section-header-copy .product-dvddrive-japanese-brand > div {
    display: inline-block;
    border: 2px solid red;
    padding: 3px .5em 5px;
  }
@media (max-width: 991.98px) {
  .section-product-dvddrive .section-header-copy .row {
    height: 260px;
    padding: 10px 0 10px 0;
  }
  .section-product-dvddrive .section-header-copy .row::before {
     transform: translate(-45%, -50%) scale(3.2);
  }
  .section-product-dvddrive .section-header-copy .section-name {
    font-size: 1.5em;
  }
  .section-product-dvddrive .section-header-copy .product-dvddrive-subcopy-1,
  .section-product-dvddrive .section-header-copy .product-dvddrive-subcopy-2 {
    font-size: .9em;
  }
  .section-product-dvddrive .section-header-copy .product-dvddrive-japanese-brand {
    font-size: .9em;
  }
}
@media (min-width: 992px) {
  .section-product-dvddrive .main-dvddrive h2 {
    font-size: 1.8em;
  }
}


/* ============================================================
 USBハブ：電源供給図
============================================================ */
.product-usbhub-image-06-wrap {
position: relative;
width: 100%;
aspect-ratio: 16/7;
background: #f0f0f0;
border-radius: 6px;
overflow: hidden;
}
.product-usbhub-image-06 {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(1.1);
width: 100%; height: 100%;
object-fit: cover;
}

/* ヘッダーコピーエリア：背景画像（鮮明） */
.section-product-usbhub .section-header-copy .row {
  position: relative;
  height: 370px;
  padding: 30px 0 30px 20px;
  overflow: hidden;
}
.section-product-usbhub .section-header-copy .row::before {
  content: '';
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.5);
  width: 100%;
  height: 100%;
  background: url(../../staticpage-assets/dh1/assets/images/product/usb-hub-c.webp);
  background-size: 100%;
  background-position: center;
  background-repeat: repeat-x;
  transition: transform 0.3s;
  z-index: -1;
}
/* キャッチコピーテキスト */
.section-product-usbhub .section-header-copy .section-name {
  position: relative;
  font-size: 1.8em;
  font-weight: 700;
  line-height: 1.3;
  color: #03ACB2;
}
.section-product-usbhub .section-header-copy .product-usbhub-subcopy-wrap {
  display: flex;
  flex-direction: column;
}
.section-product-usbhub .section-header-copy .product-usbhub-subcopy-1 {
  font-size: 1em;
  font-weight: 600;
  line-height: 1.6;
  color: #03ACB2;
  margin: 1em 0 .3em;
}
.section-product-usbhub .section-header-copy .product-usbhub-subcopy-2 {
  font-size: 1em;
  font-weight: 500;
  line-height: 1.6;
}
/* 国内ブランド・国内サポート 赤枠テキスト */
.section-product-usbhub .section-header-copy .product-usbhub-japanese-brand {
  font-size: 1.1em;
  font-weight: 700;
  line-height: 1;
  color: red;
  margin: auto 0 0;
}
.section-product-usbhub .section-header-copy .product-usbhub-japanese-brand > div {
  display: inline-block;
  border: 2px solid red;
  padding: 3px .5em 5px;
}
@media (max-width: 991.98px) {
  .section-product-usbhub .section-header-copy .row {
    height: 300px;
    padding: 10px 0 10px 0;
  }
  .section-product-usbhub .section-header-copy .row::before {
     transform: translate(-60%, -50%) scale(2.2);
  }
  .section-product-usbhub .section-header-copy .section-name {
    font-size: 1.5em;
  }
  .section-product-usbhub .section-header-copy .product-usbhub-subcopy-1,
  .section-product-usbhub .section-header-copy .product-usbhub-subcopy-2 {
    font-size: .9em;
  }
  .section-product-usbhub .section-header-copy .product-usbhub-japanese-brand {
    font-size: .9em;
  }
}

.section-product-usbhub .product-usbhub-image-02-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  background: rgba(240,240,240,1);
  border-radius: 6px;
  overflow: hidden;
  margin: 1rem 0 10px;
}
.section-product-usbhub .product-usbhub-image-02 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.3);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s;
}
.section-product-usbhub .product-usbhub-image-03-wrap {
  position: relative;
  padding: 10px;
}


/* ============================================================
 ZPS
============================================================ */

/* ヘッダーコピーエリア：背景画像（鮮明） */
.section-product-zps .section-header-copy {
  margin-bottom: 0px;
}
.section-product-zps .section-header-copy .row-back {
  position: relative;
  height: 350px;
  padding: 40px 0 30px 20px;
}
.section-product-zps .section-header-copy .row-back::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 140px;
  background: url(../../staticpage-assets/dh1/assets/images/product/zp-header-bg.webp);
  background-size: 150%;
  background-position: center bottom;
  background-repeat: repeat-x;
  transition: transform 0.3s;
  z-index: -1;
}

/* ZPS ロゴ配置 */
/* .product-zps-logo { max-width: 100%; width: 480px; } */
.product-zps-logo-wrap {
  position: relative;
  top: -30px;
  text-align: center;
}
.product-zps-logo {
  aspect-ratio: 800 / 522;
  width: 480px;
}
.product-zps-info-wrap {
  position: relative;
  top: -50px;
  text-align: center;
}
.product-zps-info {
  aspect-ratio: 1 / 1;
  width: 320px;
}

/* ZPS セクション内タイトルのフォントオーバーライド（共通より大きめ） */
.section-product-zps .section-main .section-main-title-lead {
  font-size: 1.2em;
  font-weight: 700;
  font-feature-settings: "palt" 1;
  line-height: 1.4;
  text-align: center;
  margin: 2rem 0 .5rem;
}
.section-product-zps .section-main .section-main-title {
  font-size: 2em;
  font-weight: 700;
  font-feature-settings: "palt" 1;
  line-height: 1.4;
  text-align: center;
  margin: 0 0 2rem;
}

@media (max-width: 575.98px) {
  /* DVD再生ソフト：ヘッダーコピーエリアを縮小 */
  .section-product-zps .section-header-copy {
    margin-bottom: 0;
    height: 300px;
  }
  .section-product-zps .section-header-copy::before {
    display: none;
  }
  .section-product-zps .section-header-copy .row-back {
    height: 200px;
  }
  .section-product-zps .section-header-copy .row-back::before {
    height: 200px;
    background-size: 500%;
  }
  .product-zps-logo-wrap {
    top: 0px;
  }
  .product-zps-logo {
    position: relative;
    left: -5%;
    width: 110%;
  }
  .product-zps-info-wrap {
    display: none;
  }
  .section-product-zps .section-main .section-main-title-lead {
    font-size: 20px;
  }
  .section-product-zps .section-main .section-main-title {
    font-size: 38px;
  }
}
@media (min-width: 992px) {
  .section-product-zps .main-zps h2 {
    font-size: 1.8em;
  }
}


/* ============================================================
 CRD
============================================================ */
/* .crd-disc-wrap { text-align: right; }
.crd-disc-wrap img { max-width: 200px; } */

/* ヘッダーコピーエリア：背景画像（鮮明） */
.section-product-crd .section-header-copy {
margin-bottom: 40px;
}
.section-product-crd .section-header-copy .row-back {
position: relative;
height: 350px;
padding: 10px 0 30px 20px;
}
.section-product-crd .section-header-copy .row-back::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 350px;
background: url(../../staticpage-assets/dh1/assets/images/product/crd-header-bg.webp);
background-size: cover;
background-position: center bottom;
background-repeat: repeat-x;
-webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 95%);
mask-image: linear-gradient(to bottom, black 80%, transparent 95%);
transition: transform 0.3s;
z-index: -1;
}
/* CRD サブコピーエリア内パーツ */
.product-crd-subcopy-wrap {
position: relative;
}

.product-crd-title-wrap {
}
.product-crd-title {
aspect-ratio: 586 / 304;
width: 470px;
}
.product-crd-disc-wrap {
position: relative;
}
.product-crd-disc {
position: absolute;
top: -50px;
left: 70px;
aspect-ratio: 600 / 700;
width: 400px;
}
/* OS対応ロゴ */
.product-crd-os {
position: absolute;
top: 10px;
right: 10px;
width: 140px;
aspect-ratio: 194 / 80;
}

@media (max-width: 575.98px) {
  .section-product-crd .section-header-copy {
    margin-bottom: 20px;
  }
  .section-product-crd .section-header-copy::before {
    display: none;
  }
  .section-product-crd .section-header-copy .row-back {
    padding: 10px 0 5px 5px;
    height: 300px;
  }
  .section-product-crd .section-header-copy .row-back::before {
    height: 270px;
  }
  .product-crd-title {
    width: 95%;
    aspect-ratio: 586 / 304;
  }
  .product-crd-os {
    width: 120px;
    aspect-ratio: 194 / 106;
  }
  .product-crd-disc-wrap {
    right: -140px;
    top: -270px;
    z-index: -1;
  }
  .product-crd-disc {
    top: 20px;
    left: 40px;
    width: 300px;
    aspect-ratio: 600 / 700;
  }
  .product-crd-lead {
    font-size: 18px;
  }
  .product-crd-feature-title {
    font-size: 26px;
  }
  .product-crd-01-pop {
    right: 0px;
    bottom: -20px;
    width: 100px;
  }
}



/* ============================================================
 環境情報画像
============================================================ */
img.environmental-info { max-width: 100%; width: 550px; }

/* ============================================================
 購入ボタン
============================================================ */
.btn-amazon { display: inline-block; margin-top: 0.625rem; }
.btn-amazon img { max-width: 180px; }

/* ============================================================
 ブランドサポートバー
============================================================ */
.brand-support-wrap {
position: relative;
text-align: center;
padding: 0 20px;
}
.brand-support-wrap::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 90%;
height: 2px;
background: rgba(255,0,0,.4);
margin: 0 5%;
z-index: -1;
}
.brand-support {
aspect-ratio: 803 / 75;
  width: min(500px, 90%);
}

/* ============================================================
 インラインボタン
============================================================ */
.btn-inline {
display: inline-block;
color: #111;
border: 1px solid rgba(90,90,90,.4);
padding: 0 1.2em .1em .7em;
margin-right: .6em;
border-radius: 4px;
font-size: var(--page-fs-sm);
}
.btn-inline > i { margin-right: .4em; }

#ptTimeSelectCntr {
display: none;
}




/* ============================================================
   アコーディオンセクション — base
============================================================ */
:root {
  --panel-bg-1: #fcfcfc;
  --panel-bg-2: #f9f9f9;
  --panel-bg-3: #fcfcfc;
  --panel-bg-4: #f9f9f9;
  --accent: #1949e6;
  --text-light: #f0e6d3;
  --transition-speed: 0.55s;
  --transition-ease: cubic-bezier(0.77, 0, 0.175, 1);

  /* アコーディオン全体の基準幅 (.accordion-container の max-width と合わせる) */
  --accordion-max-width: 1000px;
  /* inner は常に9/12カラム分の固定幅を保持 — overflow:hidden が窓として機能 */
  --inner-width: calc(var(--accordion-max-width) * 9 / 12);
}

/* ============================================================
   アコーディオンセクション — はみ出し制御の境界
============================================================ */
.accordion-section {
  overflow-x: hidden; /* パネルはみ出し分の横スクロールをここで吸収 */
  background: linear-gradient(135deg,#f0f8ff 60%,#fff8f0);
  padding: 80px 0;
}

/* ============================================================
   コンテナ — .container { max-width: 1000px } 相当
============================================================ */
.accordion-container {
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  /* overflow: hidden を解除 — フォーカス時の左右はみ出しを許可 */
  overflow: visible;
}

/* ============================================================
   ACCORDION WRAPPER — md以上で有効
============================================================ */
.accordion-panels {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  position: relative;
  overflow: visible;
  transition: transform var(--transition-speed) var(--transition-ease);
}

/* ============================================================
   各パネル（通常: 3カラム = 25%）
============================================================ */
.acc-panel {
  flex: 0 0 25%;
  max-width: 25%;
  position: relative;
  cursor: pointer;
  transition:
    flex-basis var(--transition-speed) var(--transition-ease),
    max-width  var(--transition-speed) var(--transition-ease);
  overflow: hidden;
  box-shadow: -2px 0px 3px 0px rgba(0, 0, 0, 0.1);
  border: 1px solid #d9d9d9;
  /* border-radius: 10px; */
}
.acc-panel:not(:last-child) {
  border-right: 0px none;
}

/* フォーカス時の各パネル幅は JS側で flex-basis / max-width を直接セット */

/* ============================================================
   パネル背景
============================================================ */
.acc-panel:nth-child(1) { background: var(--panel-bg-1); }
.acc-panel:nth-child(2) { background: var(--panel-bg-2); }
.acc-panel:nth-child(3) { background: var(--panel-bg-3); }
.acc-panel:nth-child(4) { background: var(--panel-bg-4); }

/* ============================================================
   パネル内コンテンツ
   ・width は常に9カラム固定 (--inner-width = 750px)
   ・パネル側の overflow:hidden が「窓」として機能
     通常(3col): 左250px分が見える
     非アクティブ(2col): 3col → 2col に縮小
     アクティブ(9col): 750px フル表示
============================================================ */
.acc-panel-inner {
  width: var(--inner-width);
  flex-shrink: 0;
  padding: 2rem 3rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  box-sizing: border-box;
}

/* ============================================================
   ラベル番号
============================================================ */
.panel-number {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: rgba(240, 230, 211, 0.4);
  margin-bottom: 0.5rem;
}

/* ============================================================
   見出し
============================================================ */
.panel-heading {
  font-family: 'Shippori Mincho', serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-light);
}

/* ============================================================
   画像
============================================================ */
.panel-image {
  width: calc(var(--inner-width) - 4rem);
  object-fit: cover;
  border-radius: 4px;
  opacity: 0.7;
  transition: opacity var(--transition-speed) ease;
  display: block;
}

.accordion-panels.has-hover .acc-panel.active .panel-image {
  opacity: 1;
}

/* ============================================================
   テキスト — 常時表示
============================================================ */
.panel-text {
  font-size: 0.85rem;
  line-height: 1.75;
  color: rgba(240, 230, 211, 0.75);
}

/* ============================================================
   タグ
============================================================ */
.panel-tag {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 2px;
  padding: 3px 8px;
  color: rgba(0,0,0,0.2);
}

/* ============================================================
   アクセントライン（中央から上下へ伸びる）
============================================================ */
.acc-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--transition-speed) var(--transition-ease);
  z-index: 5;
}

.accordion-panels.has-hover .acc-panel.active::before {
  transform: scaleY(1);
}

/* ============================================================
   ◀ ▶ ナビゲーションボタン
============================================================ */
.panel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: rgba(10, 10, 15, 0.75);
  border: 1px solid rgba(240, 230, 211, 0.25);
  color: var(--text-light);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, background 0.2s ease;
  backdrop-filter: blur(4px);
}

.panel-nav:hover {
  background: rgba(233, 69, 96, 0.6);
}

.panel-nav.prev { left: 1rem; }
.panel-nav.next { right: 1rem; }

.accordion-panels.has-hover .acc-panel.active .panel-nav {
  opacity: 1;
  pointer-events: auto;
}

.acc-panel[data-index="0"] .panel-nav.prev,
.acc-panel[data-index="3"] .panel-nav.next {
  display: none;
}

/* ============================================================
   縦区切りライン
============================================================ */
.acc-panel + .acc-panel::after {
  content: '';
  position: absolute;
  top: 10%; left: 0;
  width: 1px;
  height: 80%;
  background: rgba(240,230,211,0.1);
}

/* ============================================================
   sm以下: 通常の縦並びに戻す
============================================================ */
@media (max-width: 767.98px) {
  .accordion-container {
    overflow: visible;
  }

  .accordion-panels {
    flex-wrap: wrap;
  }

  .acc-panel,
  .accordion-panels.has-hover .acc-panel,
  .accordion-panels.has-hover .acc-panel.active,
  .accordion-panels.has-hover .acc-panel:not(.active) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .acc-panel-inner {
    /* スマホ: パネルが100%幅になるため inner / image も100%に戻す */
    width: 100% !important;
    padding: 2rem 1.5rem !important;
  }

  .panel-image {
    width: calc(100% - 3rem) !important; /* スマホpadding 1.5rem×2 */
  }

  .panel-nav { display: none !important; }
  .acc-panel::before { transform: scaleY(1); }
}


@media (min-width: 768px) {
  .acc-panel .page-fs-h2 {
    font-size: 1.7rem;
    font-weight: 900;
  }
  .acc-panel .page-fs-h4 {
    font-size: 1.1rem;
  }
}