@charset "UTF-8";

/* =========================================
   製品詳細ページ共通スタイル
========================================= */


/* ══════════════════════════════
   ① ヒーロー
══════════════════════════════ */
.detail-hero {
  position: relative;
  background: #294257 url('../../assets/images/products/unit/bg-unit.jpg') no-repeat left center / cover;
  padding: 60px 20px 80px;
  overflow: hidden;
}

.detail-category-badge {
  display: inline-block;
  background: #0D518C;
  color: #fff;
  font-size: 12px;
  font-weight: 550;
  padding: 4px 14px;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
}

.detail-hero-title {
  font-family: 'Inria Sans', sans-serif;
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: #fff;
  margin-bottom: 12px;
}

.detail-hero-subtitle {
  font-size: 18px;
  font-weight: 400;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.05em;
}

/* 商品説明ボックス：PC時はcontent下に配置（absolute不要、flex順で対応） */
.detail-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0 40px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

.detail-hero-content {
  grid-column: 1;
  grid-row: 1;
}

.detail-hero-visual {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}
.detail-hero-visual img {
  max-height: 500px; /* THSK-MADLⅡ等のhero画像をデザインに合わせ拡大 */
  width: auto;
  object-fit: contain;
}

/* THSK：施設写真（PCのみ） */
.detail-hero-photo {
  width: 100%;
  margin-top: 20px;
  overflow: hidden;
}
.detail-hero-photo img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* 商品説明ボックス */
.detail-hero-desc {
  grid-column: 1;
  grid-row: 2;
  margin-top: 20px;
  background: rgba(255, 255, 255, 0.30);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 18px 20px;
}

.detail-hero-desc-title {
  font-size: 13px;
  font-weight: 550;
  color: #fff;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.4);
}
.detail-hero-desc p:last-child {
  font-size: 13px;
  color: #fff;
  line-height: 1.7;
  margin: 0;
}


/* ══════════════════════════════
   セクション共通：グレー背景 ＋ 白ボックス
══════════════════════════════ */
.detail-section {
  background: #F0F2F4;
  padding: 60px 20px;
}

.detail-inner {
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
  padding: 40px;
}

/* 上線：特徴セクションのみ */
.detail-section--spec .detail-inner {
  border-top: 2px solid #0D518C;
}

.detail-section-title {
  font-family: 'Inria Sans', 'Noto Sans JP', sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: #294257;
  padding-bottom: 5px;
  border-bottom: 1px solid #294257;
  margin-bottom: 40px;
  display: inline-block;
}


/* ══════════════════════════════
   ② 商品詳細（diagram）
══════════════════════════════ */
/* ダイアグラムコンテナ：オーバーレイの基準 */
.detail-diagram {
  position: relative;
  display: block;
  max-width: 1150px;
  margin: 0 auto;
}

/* ── ホットスポット共通ラッパー ── */
.diagram-hotspot-pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 透明オーバーレイボタン（画像内の「詳細を見る」ボックス上に重ねる） */
.diagram-area-btn {
  position: absolute;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  pointer-events: all;
  -webkit-tap-highlight-color: transparent;
}
/* hover・activeは視覚変化なし（画像内のデザインを損なわないため） */
.diagram-area-btn:hover,
.diagram-area-btn:active,
.diagram-area-btn:focus,
.diagram-area-btn:focus-visible {
  background: transparent;
  outline: none;
}

/* 丸ピンボタン（旧SP用、必要に応じて残す） */
.diagram-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #0D518C;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  text-align: center;
  border: 2px solid rgba(255,255,255,0.85);
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
  cursor: pointer;
  pointer-events: all;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, background 0.15s;
}
.diagram-pin:active {
  transform: translate(-50%, -50%) scale(0.9);
  background: #083d6e;
}
.diagram-pin--panel { background: #368ABF; }
.diagram-pin--panel:active { background: #2870a0; }

/* サーモスタット SP カード */
.diagram-thermo-note {
  margin: 12px 0 0;
  background: #fff;
}
.diagram-thermo-header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  background: #0D518C;
  color: #fff;
  font-size: 14px;
  font-family: 'Inria Sans', sans-serif;
  font-weight: 700;
  letter-spacing: 0.07em;
}
.diagram-thermo-body {
  outline: 2px solid #0D518C;
  outline-offset: -2px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.diagram-thermo-item {
  width: 258px;
  font-size: 12px;
  font-family: 'Inria Sans', sans-serif;
  color: #4B5B64;
  letter-spacing: 0.02em;
  line-height: 1.6;
}

/* PC/SP共通：単一画像の場合 */
.detail-diagram-img {
  width: 100%;
  height: auto;
  display: block;
}

/* PC用：デフォルト表示 */
.detail-diagram-img--pc {
  width: 100%;
  max-width: 1150px;
  height: auto;
  display: block;
  margin: 0 auto;
}
/* SP用：PCで非表示 */
.detail-diagram-img--sp {
  display: none;
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .detail-diagram-img--pc { display: none; }
  .detail-diagram-img--sp { display: block; }
}


/* ══════════════════════════════
   ③ 特徴・仕様（2カラム）
══════════════════════════════ */
.detail-spec-wrap {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

.detail-spec-left {
  flex: 1;
  width: 100%;
}

.detail-spec-right {
  flex: 0 0 340px;
  display: flex;
  flex-direction: column;
}

/* 特徴リスト */
.detail-features {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
}

.detail-features li {
  font-size: 14px;
  line-height: 0.8;
  color: #3B4E59;
  padding: 10px 0 10px 22px;
  border-bottom: 1px solid #E1E7EC;
  position: relative;
}

.detail-features li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: url('../images/common/icon-list.svg') no-repeat center / contain;
  position: absolute;
  left: 5px;
  top: 14.5px;
}

.detail-features li.is-highlight {
  font-weight: 550;
  color: #294257;
}
.detail-features li.is-highlight::before {
  background-image: url('../images/common/icon-list-star.svg');
  width: 12px;
  height: 12px;
  top: 11px;
  left: 3px;
}

/* 仕様テーブル */
.detail-table {
  border-collapse: collapse;
  font-size: 13px;
  width: 100%;
}

.detail-table th,
.detail-table td {
  border: 1px solid #D0D8DF;
  padding: 10px 14px;
  vertical-align: middle;
  text-align: left;
}

.detail-table th {
  background: #0D518C;
  color: #fff;
  font-weight: 550;
  white-space: nowrap;
  width: 40%;
}

/* 寸法図：PC・SP共通で横並び・下端揃え（P14：適切なサイズ感） */
.detail-drawing-wrap {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .detail-drawing-wrap { gap: 10px; max-width: 100%; }
}

.detail-drawing-item {
  position: relative;
  flex: 1;
}

.detail-drawing {
  width: 100%;
  height: auto;
  display: block;
}
.tp55-spec .detail-drawing {
  width: 30%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ズームボタン共通スタイル */
.detail-drawing-zoom {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.9);
  border: 1px solid #D0D8DF;
  border-radius: 2px;
  cursor: pointer;
  display: none; /* デフォルト非表示（SPのみ表示） */
  align-items: center;
  justify-content: center;
  padding: 6px;
  transition: background 0.2s;
}
.detail-drawing-zoom:hover { background: #fff; }
.detail-drawing-zoom img { width: 18px; height: 18px; }

/* 正面図：PC・SP両方で表示 */
.detail-drawing-zoom--front {
  display: flex;
}

/* SP：全ズームボタン表示 */
@media (max-width: 768px) {
  .detail-drawing-zoom { display: flex; }
}

/* 製品概要：シンプルな枠線ボックス */
.detail-overview {
  border: 1px solid #D0D8DF;
  padding: 14px 16px;
  margin-top: 16px;
  font-size: 12px;
  line-height: 2;
  color: #3B4E59;
}
.detail-overview p { margin: 0; }


/* ══════════════════════════════
   SP：設置事例ボタン
══════════════════════════════ */
.detail-example-btn {
  background: linear-gradient(rgba(60,110,160,0.68), rgba(60,110,160,0.68)),
              url('../../assets/images/top/topics-example.jpg') no-repeat center / cover;
  border-bottom: 4px solid #368ABF;
  padding: 20px;
}
.detail-example-btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  height: 60px;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  font-size: 14px;
  font-weight: 550;
  text-decoration: none;
  transition: opacity 0.2s;
}
.detail-example-btn a:hover { opacity: 0.8; }


/* ══════════════════════════════
   寸法図モーダル
══════════════════════════════ */
.drawing-modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.drawing-modal.is-open { display: flex; }

.drawing-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
}
.drawing-modal-content {
  position: relative;
  z-index: 1;
  background: #fff;
  padding: 40px 20px 20px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
}
.drawing-modal-content img {
  display: block;
  max-width: 90%;
  height: auto;
  margin: 0 auto;
}
.drawing-modal--tp55 .drawing-modal-content img {
  max-width: 50%;
}
.drawing-modal-close {
  position: absolute;
  top: 8px; right: 12px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #294257;
  padding: 4px 8px;
}
.drawing-modal-close:hover { opacity: 0.7; }


/* ══════════════════════════════
   レスポンシブ（SP：768px以下）
══════════════════════════════ */
@media (max-width: 768px) {

  /* ─ ヒーロー ─ */
  .detail-hero {
    padding: 0;
    background-position: center center;
  }

  /* SP：ユニットタイプのみ暗いオーバーレイ（80%） */
  .detail-hero:not(.detail-hero--panel):not(.detail-hero--water)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(11, 22, 31, 0.80);
    z-index: 0;
  }

  /* SP：grid → flex縦積みに変更 */
  .detail-hero-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    align-items: stretch;
    position: relative;
    z-index: 1; /* オーバーレイより前面 */
  }

  /* テキスト：上（order:1）バッジ（34px）の下にくるようtop paddingを確保 */
  .detail-hero-content {
    order: 1;
    padding: 44px 20px 12px;
    position: static;
  }

  .detail-hero-title {
    font-size: 24px;
    margin-bottom: 6px;
  }

  .detail-hero-subtitle {
    font-size: 14px;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.9);
  }

  /* バッジ：右上固定（top:0） */
  .detail-category-badge {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    padding: 8px 14px;
    z-index: 3;
    order: 0;
  }

  /* 製品画像 */
  .detail-hero-visual {
    order: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 20px;
    min-height: auto;
  }
  .detail-hero-visual img {
    max-height: 360px;
    width: auto;
  }
  /* 水販売機シリーズ：縦長製品のためSPでさらに小さく */
  .detail-hero--water .detail-hero-visual img { max-height: 220px; }

  /* 商品説明 */
  .detail-hero-desc {
    order: 3;
    grid-column: unset;
    grid-row: unset;
    width: 100%;
    margin: 0 0 24px;
    padding: 0 20px 24px;
    background: none;
    border: none;
    text-align: center;
  }

  .detail-hero-desc-title {
    font-size: 16px;
    font-weight: 400;
    color: #F5F5F5;
    border-bottom: 1px solid #F5F5F5;
    padding: 5px 20px 8px;
    margin-bottom: 12px;
    display: inline-block;
  }
  .desc-title-model { font-size: 20px; }
  .desc-title-text  { font-size: 18px; }
  .detail-hero-desc p:last-child {
    font-size: 12px;
    color: rgba(255,255,255,0.9);
    line-height: 1.6;
    letter-spacing: 0.1em;
    margin: 0;
    text-align: left;
  }

  /* SP：パネルタイプ・水販売機の商品説明テキスト色補正（ボックス除去） */
  .detail-hero--panel .detail-hero-desc,
  .detail-hero--water .detail-hero-desc {
    background: none;
    border: none;
  }
  .detail-hero--panel .detail-hero-desc-title {
    color: #4B5B64;
    border-bottom-color: #4B5B64;
  }
  .detail-hero--panel .detail-hero-desc p:last-child { color: #4B5B64; }
  .detail-hero--water .detail-hero-desc-title {
    color: #294257;
    border-bottom-color: #294257;
  }
  .detail-hero--water .detail-hero-desc p:last-child { color: #294257; }

  .detail-hero-photo { display: none; }

  /* SP：ヒーロー外の施設写真（.detail-hero-photo-spクラス） */
  .detail-hero-photo-sp {
    width: 100%;
    border-bottom: 1px solid #CECECE;
    line-height: 0;
  }
  .detail-hero-photo-sp img {
    width: 100%;
    height: 226px;
    object-fit: cover;
    display: block;
  }

  /* ─ セクション ─ */
  /* SP：PCのグレーカード（グレー背景＋白インナー＋ガター）を持ち込まず、
     フラットな白背景にする。グレーはオプション等、意図した箇所のみ */
  .detail-section {
    padding: 30px 0;
    background: #fff;
  }

  /* オプションセクション：グレー背景 */
  .detail-option-section {
    background: #F0F2F4;
  }
  .detail-option-section .detail-inner {
    background: transparent;
  }

  /* 特徴セクション：上下ボーダー */
  .detail-section--spec .detail-inner {
    border-top: 3px solid #0D518C;
    border-bottom: 3px solid #0D518C;
  }

  /* セクション間の区切り */
  .detail-section + .detail-section {
    border-top: 8px solid #ffffff;
  }

  .detail-inner {
    padding: 24px 20px;
    margin: 0;
  }

  .detail-section-title {
    font-size: 17px;
    margin-bottom: 20px;
  }

  /* ─ 特徴：1カラム縦積み ─ */
  .detail-spec-wrap {
    flex-direction: column;
    gap: 32px;
  }

  .detail-spec-right {
    flex: none;
    width: 100%;
  }

  .detail-features li { font-size: 13px; }

  .detail-table th { width: 35%; font-size: 12px; }
  .detail-table td { font-size: 12px; }

  /* ─ その他商品情報 SP ─ */
  .other-products-section {
    padding: 0;
    margin: 0;
    max-width: 100%;
  }
  .other-products-card {
    padding: 24px 20px;
    border-radius: 0;
    text-align: left;
  }
  .other-products-card .section-title-lined {
    border-bottom: none;
    padding-bottom: 0;
  }
  .other-products-flex {
    flex-direction: column;
    gap: 0;
  }
  .other-mini-card {
    width: 100%;
    padding: 14px 38px 14px 14px; /* 右側の青帯分余白を確保 */
    border: 1px solid #368ABF;
    border-bottom: 1px solid #368ABF;
    background: #fff;
    margin-bottom: 16px;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
  }
  .other-mini-card:last-child {
    border-bottom: 1px solid #368ABF;
    margin-bottom: 0;
  }
  .other-mini-thumb img {
    height: 110px;
    object-fit: contain;
    display: block;
  }
  /* カテゴリ別枠色 */
  .other-mini-card--unit  { border-color: #0D518C; }
  .other-mini-card--panel { border-color: #368ABF; }
  .other-mini-card--water { border-color: #88C9F2; }

  .other-mini-body {
    text-align: left;
  }
  /* 右側の濃青帯＋白矢印 */
  .other-mini-arrow {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 24px;
    background: #0D518C;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
  }
  .other-mini-card--unit  .other-mini-arrow { background: #0D518C; }
  .other-mini-card--panel .other-mini-arrow { background: #368ABF; }
  .other-mini-card--water .other-mini-arrow { background: #88C9F2; }
  .other-mini-arrow {
    font-size: 0;
    color: #fff;
    font-family: serif;
  }
}


/* ══════════════════════════════
   パネルタイプ：ヒーロー背景
══════════════════════════════ */
.detail-hero--panel {
  background-image: url('../../assets/images/products/panel/bg-panel.jpg');
}


/* ══════════════════════════════
   オプションセクション
══════════════════════════════ */
.detail-option {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid #E1E7EC;
}

.detail-option-title {
  font-size: 16px;
  font-weight: 550;
  color: #294257;
  margin-bottom: 20px;
}

.detail-option-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.detail-option-item img {
  width: 180px;
  height: auto;
  display: block;
}

.detail-option-item p {
  font-size: 13px;
  color: #3B4E59;
  text-align: center;
}

@media (max-width: 768px) {
  .detail-option {
    margin-top: 28px;
    padding-top: 24px;
  }
  .detail-option-item img {
    width: 140px;
  }
}


/* ══════════════════════════════
   パネルタイプ専用スタイル
══════════════════════════════ */

/* ヒーロー：テキストをダーク化 */
.detail-hero--panel .detail-category-badge {
  background: #368ABF;
}
.detail-hero--panel .detail-hero-title {
  color: #4B5B64;
}
.detail-hero--panel .detail-hero-subtitle {
  color: #4B5B64;
}
.detail-hero--panel .detail-hero-desc {
  background: transparent;
  border-color: transparent;
}
.detail-hero--panel .detail-hero-desc-title {
  color: #294257;
  border-bottom-color: rgba(41,66,87,0.2);
}
.detail-hero--panel .detail-hero-desc p:last-child {
  color: #3B4E59;
}

/* パネルカラー：テーブルth */
.detail-table--panel th {
  background: #368ABF;
}

/* パネルカラー：特徴セクション上線 */
.detail-section--panel.detail-section--spec .detail-inner {
  border-top-color: #368ABF;
}

/* 商品詳細：PC左オプション＋右図の2カラム */
.detail-diagram-area {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.detail-diagram-side {
  flex: 0 0 200px;
}

.detail-diagram-area .detail-diagram {
  flex: 1;
}

/* 製品概要ラベル */
.detail-overview-label {
  font-size: 13px;
  font-weight: 550;
  color: #294257;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #D0D8DF;
}

/* SP：オプションセクション */
.detail-option-sp {
  background: #fff;
}
.detail-option-sp .detail-inner {
  background: #fff;
  border-top: none;
  padding: 24px 20px;
}

@media (max-width: 768px) {
  .detail-diagram-area {
    flex-direction: column;
    gap: 0;
  }
  /* SP：左サイドバー（MADLタイプ説明）は非表示 — オプションはSP専用セクションで表示 */
  .detail-diagram-side {
    display: none;
  }
}


/* ══════════════════════════════
   商品詳細：PCサイドバー（MADLタイプ説明）
══════════════════════════════ */
.diagram-type-section {
  margin-bottom: 20px;
}

.diagram-type-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 550;
  color: #368ABF;
  border: 1px solid #368ABF;
  padding: 3px 14px;
  margin-bottom: 14px;
  letter-spacing: 0.05em;
}

.diagram-callout-box {
  border: 1px solid #368ABF;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.diagram-callout-box-title {
  font-size: 12px;
  font-weight: 550;
  color: #294257;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(54, 138, 191, 0.3);
}

.diagram-callout-box-desc {
  font-size: 11px;
  color: #3B4E59;
  line-height: 1.7;
  margin: 0;
}

.diagram-coin-label {
  font-size: 12px;
  font-weight: 550;
  color: #368ABF;
  text-align: center;
  padding: 6px 0 0;
  margin: 0;
}


/* ══════════════════════════════
   商品詳細：SPアコーディオン（コールアウト）
══════════════════════════════ */
.diagram-sp-callouts {
  margin-top: 16px;
  border-top: 1px solid #D0D8DF;
}

.diagram-callout-row {
  border-bottom: 1px solid #D0D8DF;
}

.diagram-callout-static {
  font-size: 13px;
  font-weight: 550;
  color: #294257;
  padding: 12px 16px;
  margin: 0;
  display: block;
}

.diagram-callout-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 550;
  color: #294257;
  cursor: pointer;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
}

.diagram-callout-cta {
  font-size: 12px;
  color: #368ABF;
  white-space: nowrap;
  margin-left: 8px;
  flex-shrink: 0;
}

.diagram-callout-body {
  padding: 0 16px 14px;
  font-size: 12px;
  color: #3B4E59;
  line-height: 1.7;
}
.diagram-callout-body p {
  margin: 0 0 5px;
}
.diagram-callout-body p:last-child {
  margin: 0;
}


/* ══════════════════════════════
   パンくず：カテゴリバッジあり（PC）
══════════════════════════════ */
.breadcrumb-area--has-badge .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.breadcrumb-area--has-badge .breadcrumb {
  background: transparent;
}

.detail-breadcrumb-badge {
  display: inline-block;
  color: #fff;
  font-size: 12px;
  font-weight: 550;
  padding: 5px 18px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 20px;
}
.detail-breadcrumb-badge--panel { background: #368ABF; }
.detail-breadcrumb-badge--unit  { background: #0D518C; }
.detail-breadcrumb-badge--water { background: #0D518C; }

@media (max-width: 768px) {
  .breadcrumb-area--has-badge .inner {
    display: block;
  }
  .detail-breadcrumb-badge {
    display: none;
  }
}


/* ══════════════════════════════
   TP-55シリーズ 固有スタイル
══════════════════════════════ */

/* バリアントラベル（TP-94・TP-55共用） */
.detail-hero-visual--variants {
  flex-direction: column;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
  padding-top: 20px;
}
.detail-hero-visual--variants img {
  max-height: 460px;
  width: auto;
  display: block;
}

/* TP-55 / TP-55H ラベル：中央配置・縦区切り */
.detail-hero-variants-label {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
}
.detail-hero-variants-label .variants-col {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.detail-hero-variants-label .variants-col--wide {
  min-width: 129px;
}
.detail-hero-variants-label .variants-sub {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #4B5B64;
  letter-spacing: 0.02em;
  text-align: center;
}
.detail-hero-variants-label .variants-names {
  font-family: 'Inter', sans-serif;
  font-size: clamp(12px, 1.5vw, 24px);
  font-weight: 500;
  color: #4B5B64;
  letter-spacing: 0.05em;
  text-align: center;
  display: block;
  min-width: 80px;
}
.detail-hero-variants-label .variants-divider {
  display: inline-block;
  width: 1px;
  height: 35px;
  background: #4B5B64;
  flex-shrink: 0;
  margin: 0 4px;
}

/* パネルタイプ：商品詳細見出しの下線を水色に */
.detail-section-title--panel {
  border-bottom-color: #368ABF;
}

/* ①「使用用途に合わせて 4 つのタイプが選べる」 */
.tp55-type-heading {
  font-family: 'Inria Sans', sans-serif;
  font-weight: 300;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  color: #294257;
  margin-bottom: 32px;
}
.tp55-type-heading strong {
  font-family: 'Inria Sans', sans-serif;
  font-weight: 550;
  font-size: 48px;
  color: #368ABF;
}

/* ② タイプカード横並び */
.tp55-type-row-wrap {
  margin-bottom: 40px;
}
.tp55-type-row {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  padding: 4px 2px;
}
.tp55-type-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 283px;
  flex-shrink: 0;
}
.tp55-type-photo {
  width: 283px;
  height: 272px;
  border: 2px solid #368ABF;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.tp55-type-photo img {
  width: 80%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.tp55-type-label {
  padding: 2px 10px;
  background: #fff;
  border-left: 2px solid #368ABF;
  border-right: 2px solid #368ABF;
  font-family: 'Inria Sans', sans-serif;
  font-size: clamp(10px, 1.5vw, 18px);
  font-weight: 400;
  color: #3B4E59;
  letter-spacing: 0.02em;
  text-align: center;
  margin-bottom: -14px;
  white-space: nowrap;
  align-self: center;
  z-index: 1;
}
.tp55-type-desc {
  font-family: 'Inria Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #4B5B64;
  line-height: 20px;
  letter-spacing: 0.1em;
  text-align: left;
  padding: 8px 0 0;
  width: 100%;
}

/* ③ 比較表 */
.tp55-compare-wrap {
  margin-top: 0;
  margin-bottom: 40px;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tp55-compare-table {
  border-collapse: separate;
  border-spacing: 1px;
  background: #368ABF;
  font-family: 'Inria Sans', sans-serif;
  font-size: 14px;
  table-layout: fixed;
  width: 675px;
}
.tp55-th-empty {
  background: #368ABF !important;
  width: 135px;
}
.tp55-compare-table th,
.tp55-compare-table td {
  width: 135px;
  height: 42px;
  padding: 0 8px;
  text-align: center;
  vertical-align: middle;
  background: #fff;
}
.tp55-compare-table thead th {
  background: #368ABF;
  color: #F5F5F5;
  font-family: 'Inria Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  height: 32px;
  letter-spacing: 0.02em;
}
.tp55-compare-label {
  text-align: center !important;
  background: #fff;
  color: #3B4E59;
  font-family: 'Inria Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  white-space: nowrap;
}
/* ○× インジケーター */
.tp55-compare-table .is-circle { color: #F64343; font-size: 18px; font-weight: 700; }
.tp55-compare-table .is-cross  { color: #3B4E59; font-size: 18px; font-weight: 700; }
.tp55-compare-table .is-note { position: relative; }
/* ※ を右上に絶対配置 → ○ はセル中央に揃う（他の○と整列） */
.tp55-note-mark {
  position: absolute;
  top: 5px;
  right: 7px;
  font-size: 11px;
  color: #4B5B64;
  margin-left: 0;
}
.tp55-compare-note {
  font-family: 'Inria Sans', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: #4B5B64;
  letter-spacing: 0.02em;
  text-align: right;
  margin-top: 6px;
  padding: 5px 0;
}

/* ④ Before/After + コールアウトセクション */
.tp55-ba-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background: #fff;
  padding: 37px 50px;
  margin-bottom: 0;
  box-sizing: border-box;
  width: 100%;
}
.tp55-before-after {
  width: 100%;
  max-width: 962px;
}
.tp55-before-after img { width: 100%; height: auto; display: block; }
.tp55-ba-text {
  font-family: 'Inria Sans', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #4B5B64;
  letter-spacing: 0.14em;
  text-align: center;
  line-height: 1.6;
  margin: 0;
}
/* ブランドテキスト＋アイコン横並び */
.tp55-brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.tp55-brand-text {
  font-family: 'Inria Sans', sans-serif;
  font-weight: 400;
  text-align: center;
  line-height: 47px;
  margin: 0;
}
.tp55-brand-name  { color: #368ABF; font-size: 32px; letter-spacing: 0.15em; }
.tp55-brand-series { color: #368ABF; font-size: 24px; letter-spacing: 0.15em; }
.tp55-brand-dark  { color: #3B4E59; font-size: 24px; letter-spacing: 0.15em; }
.tp55-brand-hl    { color: #368ABF; font-size: 28px; letter-spacing: 0.15em; }
.tp55-callout-icon { width: 130px; flex-shrink: 0; }
.tp55-callout-box {
  width: 100%;
  max-width: 815px;
  min-height: 164px;
  border-radius: 8px;
  border: 2px solid #368ABF;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 40px;
}

/* ⑤ TP-55特徴リスト：is-highlightでも太字なし */
.tp55-features li.is-highlight { font-weight: 400; }

/* TP-55セクション：白背景 */
.detail-section.tp55-section { background: #fff; }

/* SP（768px以下） */
@media (max-width: 768px) {
  .detail-hero-visual--variants img { max-height: 220px; width: auto; }
  .detail-hero-variants-label .variants-sub { font-size: 8px; }
  .detail-hero-variants-label .variants-names { font-size: 16px; }
  .detail-hero-variants-label .variants-divider { height: 35px; }

  .tp55-type-heading { font-size: 16px; margin-bottom: 20px; }
  .tp55-type-heading strong { font-size: 24px; }

  /* SP: 2列flex-wrapに変更（150px固定幅） */
  .tp55-type-row-wrap { overflow-x: unset; margin-bottom: 0; }
  .tp55-type-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 27px;
  }
  .tp55-type-entry { width: 150px; }
  .tp55-type-photo { width: 150px; height: 196px; border-width: 2px; }
  .tp55-type-label { font-size: 12px; padding: 2px 5px; }
  .tp55-type-desc { font-size: 10px; line-height: 16px; letter-spacing: 0.02em; }

  /* SP: 比較表コンパクト（画面幅に収める） */
  .tp55-compare-wrap { overflow-x: visible; display: block; margin-bottom: 24px; }
  .tp55-compare-table { width: 100%; max-width: 358px; margin: 0 auto; }
  .tp55-compare-table th,
  .tp55-compare-table td { width: auto; height: 28px; font-size: 11px; padding: 2px; }
  .tp55-compare-table .tp55-th-empty { width: 92px; }
  .tp55-compare-table thead th {
    font-size: 9px;
    height: auto;
    padding: 4px 2px;
    white-space: normal;
    line-height: 1.25;
    letter-spacing: 0;
  }
  .tp55-compare-table td.tp55-compare-label { font-size: 9px; white-space: nowrap; letter-spacing: -0.01em; }
  .tp55-compare-table .tp55-note-mark { top: 1px; right: 2px; font-size: 8px; }
  .tp55-compare-table .is-circle,
  .tp55-compare-table .is-cross { font-size: 13px; }
  .tp55-compare-note { font-size: 8px; text-align: left; white-space: nowrap; }

  /* SP: ba-section */
  .tp55-ba-section { padding: 0; gap: 0; }
  .tp55-before-after {
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
  }
  .tp55-ba-text { font-size: 14px; letter-spacing: 0.05em; padding-top: 16px; }
  .tp55-brand-row { flex-direction: column; gap: 8px; align-items: center; border-radius: 8px; border: 1.5px solid #368ABF; padding: 8px; }
  .tp55-brand-text { line-height: 1.6; }
  .tp55-brand-name  { font-size: 20px; }
  .tp55-brand-series, .tp55-brand-dark { font-size: 16px; }
  .tp55-brand-hl    { font-size: 18px; }
  .tp55-callout-icon { width: 100px; }
  .tp55-callout-box { min-height: auto; padding: 10px; margin-top: 36px; border: none; border-radius: 0; }

  /* SP: セクション順序 */
  .tp55-section .detail-inner {
    display: flex;
    flex-direction: column;
  }
  .tp55-section .detail-inner > h2               { order: 1; }
  .tp55-section .detail-inner > .tp55-ba-section { order: 2; }
  .tp55-section .detail-inner > .tp55-type-heading  { order: 3; margin-top: 36px; }
  .tp55-section .detail-inner > .tp55-type-row-wrap { order: 4; }
  .tp55-section .detail-inner > .tp55-compare-wrap  { order: 5; }
}


/* ══════════════════════════════
   水販売機 固有スタイル
══════════════════════════════ */

/* ヒーロー背景：#88C9F2 */
.detail-hero--water {
  background-color: #88C9F2;
  background-image: url('../../assets/images/products/water/bg-water.jpg');
  background-position: center;
  background-size: cover;
}
.detail-hero--water .detail-category-badge { background: #88C9F2; }
.detail-hero--water .detail-hero-title { color: #294257; }
.detail-hero--water .detail-hero-subtitle { color: #294257; }
.detail-hero--water .detail-hero-desc {
  border-color: rgba(255,255,255,0.6);
}
.detail-hero--water .detail-hero-desc-title {
  color: #294257;
  border-bottom-color: rgba(41,66,87,0.2);
}
.detail-hero--water .detail-hero-desc p:last-child { color: #3B4E59; }

/* 商品詳細セクション：中央寄せ */
.water-spec-section {
  background: #fff;
  border-top: 4px solid #88C9F2;
  border-bottom: 4px solid #88C9F2;
}
.water-spec-section .detail-inner {
  text-align: center;
  border-top: none;
}

/* PC/SP タイトル切替 */
.water-spec-title-pc {
  font-family: 'Inria Sans', 'Noto Sans JP', sans-serif;
  font-size: 26px;
  font-weight: 400;
  color: #294257;
  margin-bottom: 32px;
  display: block;
  text-align: center;
}
.water-spec-title-sp {
  display: none;
  font-size: 17px;
  font-weight: 550;
  color: #294257;
  margin-bottom: 20px;
  text-align: left;
}

/* 仕様表：中央寄せ・上下余白 */
.water-spec-table {
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
}
.detail-table--water th {
  background: #EBF7FF;
  color: #3B4E59;
  font-weight: 400;
  width: 45%;
}
.detail-table--water th,
.detail-table--water td {
  border-color: #88C9F2;
}

/* 注意書き：余白を確保 */
.water-spec-note {
  font-size: 11px;
  color: #6B7B84;
  margin: 16px auto 0;
  max-width: 560px;
  text-align: left;
}

/* 製品概要ボックス：上余白・中央寄せ */
.water-overview {
  max-width: 480px;
  margin: 32px auto 0;
  border: 1px solid #D0D8DF;
  padding: 14px 16px;
  text-align: left;
  font-size: 12px;
  line-height: 2;
  color: #3B4E59;
}
.water-overview p:first-child {
  font-weight: 550;
  color: #294257;
  border-bottom: 1px solid #D0D8DF;
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.water-overview p { margin: 0; }

/* その他関連製品：3カラム（ボーダーなし） */
.other-products-flex--3col {
  gap: 0;
}

/* SP */
@media (max-width: 768px) {
  .water-spec-section .detail-inner { text-align: left; }
  .water-spec-table { max-width: 100%; }
  .water-spec-note { max-width: 100%; }
  .water-overview { max-width: 100%; margin-top: 20px; }
}


/* ══════════════════════════════
   寸法図 PC/SP 表示切替
   （sp-only/pc-only に頼らず product-detail.css 内で制御）
══════════════════════════════ */
.detail-drawing--pc {
  display: block; /* PCで表示 */
}
.detail-drawing--sp {
  display: none; /* PCで非表示 */
}
@media (max-width: 768px) {
  .detail-drawing--pc { display: none; }
  .detail-drawing--sp { display: block; }
}


/* SP縦長寸法図：高さ制限＋左右の高さを揃えて中央寄せ（大きすぎ防止） */
@media (max-width: 768px) {
  .detail-drawing-wrap { align-items: center; }
  .detail-drawing-item { display: flex; align-items: center; justify-content: center; }
  .detail-drawing-item .detail-drawing {
    max-height: 240px;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
  }
  .detail-drawing--sp {
    max-height: 240px;
    width: auto;
    margin: 0 auto;
  }
}


/* ══════════════════════════════
   スイッチ詳細ポップアップ（THSK-MADLⅡ / THS-MADLⅡ）
══════════════════════════════ */
.switch-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 32px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .switch-detail-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 0;
  }
}

.switch-detail-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 20px;
  background: #0D518C;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  font-family: 'Noto Sans JP', sans-serif;
  text-align: center;
}
.switch-detail-btn:hover { background: #1a6cae; }

.switch-detail-name {
  font-size: 15px;
  font-weight: 550;
  letter-spacing: 0.03em;
  line-height: 1.4;
}
@media (max-width: 768px) {
  .switch-detail-name { font-size: 13px; }
}

.switch-detail-cta {
  font-size: 12px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0.9;
}
.switch-detail-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border: 1px solid #fff;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
}


/* ── モーダル本体 ── */
.switch-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.switch-modal[hidden] { display: none; }

.switch-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(41, 66, 87, 0.72);
  cursor: pointer;
}

.switch-modal-content {
  position: relative;
  background: #fff;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 6px 30px rgba(0,0,0,0.2);
  border: 1px solid #0D518C;
}

.switch-modal-header {
  background: #0D518C;
  color: #fff;
  padding: 14px 50px 14px 20px;
}
.switch-modal-title {
  font-size: 16px;
  font-weight: 550;
  margin: 0;
  letter-spacing: 0.03em;
}

.switch-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px; height: 32px;
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.switch-modal-close:hover { background: rgba(255,255,255,0.15); }

.switch-modal-body {
  padding: 20px 24px 24px;
  font-size: 14px;
  line-height: 1.8;
  color: #3B4E59;
}
.switch-modal-body h4 {
  font-size: 15px;
  color: #294257;
  font-weight: 550;
  margin: 12px 0 6px;
}
.switch-modal-body h4:first-child { margin-top: 0; }
.switch-modal-body p { margin: 0 0 12px; }
.switch-modal-body p:last-child { margin-bottom: 0; }
.switch-modal-body strong { color: #CB0000; font-weight: 550; }
.switch-modal-body ul { padding-left: 20px; margin: 0; }
.switch-modal-body ul li { margin-bottom: 6px; list-style: disc; }



/* ══════════════════════════════════════════════════════════════
   PC レイアウト（769px 以上）
══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {

  /* ════════════════════════
     ① ヒーロー
  ════════════════════════ */
  .detail-hero {
    padding: 0;
    background-position: center center;
    min-height: 640px;
    overflow: hidden;
  }

  /* ユニット：暗いオーバーレイ */
  .detail-hero:not(.detail-hero--panel):not(.detail-hero--water)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(11, 22, 31, 0.65);
    z-index: 0;
  }

  /* カテゴリバッジ：左上固定 */
  .detail-category-badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    font-size: 20px;
    font-weight: 700;
    padding: 10px 40px;
    margin: 0;
    display: block;
    letter-spacing: 0;
  }

  .detail-hero-inner {
    display: block;
    min-height: 640px;
    max-width: 1200px;
    margin: 0 auto;
    padding-right: 40%;
    position: relative;
    z-index: 1;
  }

  .detail-hero-content {
    padding: 80px 40px 0 0;
    position: static;
    order: unset;
    flex: unset;
    grid-column: unset;
    grid-row: unset;
  }

  .detail-hero-title {
    font-size: 60px;
    letter-spacing: 3px;
    color: #F5F5F5;
    margin-bottom: 12px;
    position: static;
    line-height: 1.1;
  }

  .detail-hero-subtitle {
    font-size: 20px;
    letter-spacing: 1px;
    color: #F5F5F5;
    margin-bottom: 24px;
    position: static;
  }

  /* 施設写真（THSKのみ） */
  .detail-hero-photo {
    display: block !important;
    padding: 0;
    position: static;
    width: auto;
    margin: 0 0 20px;
    grid-column: unset;
    grid-row: unset;
  }
  .detail-hero-photo img {
    width: 100%;
    max-width: 400px;
    height: 220px;
    object-fit: cover;
    display: block;
  }

  .detail-hero-desc {
    padding: 20px 24px 28px;
    margin-top: 0;
    margin-bottom: 30px;
    position: static;
    order: unset;
    grid-column: unset;
    grid-row: unset;
    background: rgba(255, 255, 255, 0.28);
    border: none;
    width: auto;
    max-width: 480px;
  }

  .detail-hero-desc-title {
    font-size: 18px;
    font-weight: 400;
    color: #F5F5F5;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    padding-bottom: 8px;
    margin-bottom: 8px;
    display: flex;
    align-items: baseline;
    gap: 4px;
  }
  .desc-title-model {
    font-family: 'Inria Sans', sans-serif;
    font-size: 22px;
    color: #F5F5F5;
  }
  .desc-title-text {
    font-size: 18px;
    color: #F5F5F5;
  }
  .detail-hero-desc p:last-child {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    margin: 0;
    letter-spacing: 0.05em;
  }

  /* 製品画像：右側に絶対配置・ヒーロー全高 */
  .detail-hero-visual {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 40%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0;
    order: unset;
    grid-column: unset;
    grid-row: unset;
    z-index: 2;
  }
  .detail-hero-visual img {
    max-width: 100%;
    max-height: 510px;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* 施設写真なし（THS）：コンテンツを縦方向に中央寄りに調整 */
  .detail-hero--no-photo .detail-hero-inner {
    padding-top: 60px;
  }
  .detail-hero--no-photo .detail-hero-content {
    padding-top: 60px;
  }

  /* パネルタイプ：テキスト色調整（既存ルール維持、ここでも明示） */
  .detail-hero--panel .detail-hero-title   { color: #4B5B64; }
  .detail-hero--panel .detail-hero-subtitle { color: #4B5B64; }
  .detail-hero--panel .detail-hero-desc    { background: rgba(255, 255, 255, 0.75); }
  .detail-hero--panel .detail-hero-desc-title { color: #294257; }
  .detail-hero--panel .detail-hero-desc p:last-child { color: #3B4E59; }
  .detail-hero--panel .desc-title-model,
  .detail-hero--panel .desc-title-text    { color: #294257; }

  /* 水販売機：テキスト色調整 */
  .detail-hero--water .detail-hero-title   { color: #294257; }
  .detail-hero--water .detail-hero-subtitle { color: #294257; }
  .detail-hero--water .detail-hero-desc    { background: rgba(255, 255, 255, 0.80); }
  .detail-hero--water .detail-hero-desc-title { color: #294257; }
  .detail-hero--water .detail-hero-desc p:last-child { color: #3B4E59; }
  .detail-hero--water .desc-title-model,
  .detail-hero--water .desc-title-text    { color: #294257; }
  /* 水販売機：製品画像は自然なサイズで表示 */
  .detail-hero--water .detail-hero-visual img { width: auto; }

  /* TP-55/TP-55H バリアント：画像センタリング */
  .detail-hero-visual--variants {
    align-items: center;
    justify-content: center;
    padding-top: 0;
    gap: 0;
  }

  /* TP-55 タイプカード：コンテンツ幅に収まるようflex配分 */
  .tp55-type-entry { flex: 1; width: auto; }
  .tp55-type-photo { width: 100%; }


  /* ════════════════════════
     セクション共通
  ════════════════════════ */
  .detail-section {
    background: #F0F2F4;
    padding: 30px 0;
  }

  .detail-inner {
    max-width: 1200px;
    margin: 0 auto;
    background: #fff;
    padding: 50px 20px;
  }

  /* 特徴セクション：上下青ボーダー */
  .detail-section--spec .detail-inner {
    border-top: 4px solid #0D518C;
    border-bottom: 4px solid #0D518C;
    padding: 30px 5% 40px;
  }

  .detail-section--panel.detail-section--spec .detail-inner {
    border-top-color: #368ABF;
    border-bottom-color: #368ABF;
  }


  /* ════════════════════════
     セクションタイトル
  ════════════════════════ */
  .detail-section-title {
    font-size: 26px;
    margin-bottom: 10px;
  }

  .detail-section-title--centered {
    display: block;
    text-align: center;
  }

  .detail-section-title--left {
    display: inline-block;
    text-align: left;
  }

  .detail-title-model {
    font-family: 'Inria Sans', sans-serif;
    font-size: inherit;
    font-weight: 400;
    color: #294257;
    letter-spacing: 0.05em;
  }

  .detail-title-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: inherit;
    font-weight: 400;
    color: #294257;
  }


  /* ════════════════════════
     ② 商品詳細（ダイアグラム）
  ════════════════════════ */
  .detail-diagram-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
  }

  /* サーモスタットノート：SP専用なのでPC完全非表示 */
  .diagram-thermo-note {
    display: none !important;
  }

  .detail-diagram-img--pc {
    max-width: 1150px;
    width: 100%;
    height: auto;
    margin: 0 auto 30px;
  }

  /* スイッチボタン：ヘッダー＋ボディ構造 */
  .switch-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 280px);
    gap: 16px;
    margin-top: 24px;
    margin-left: auto;
    margin-right: auto;
  }

  .switch-detail-btn {
    width: 280px;
    height: 70px;
    background: #fff;
    border: 1px solid #0D518C;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: opacity 0.2s;
    text-align: left;
  }
  .switch-detail-btn:hover { opacity: 0.85; }

  .switch-detail-header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    flex-shrink: 0;
    background: #0D518C;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .switch-detail-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 14px;
    flex: 1;
  }

  .switch-detail-cta {
    font-size: 13px;
    font-weight: 700;
    color: #4B5B64;
    display: inline;
    gap: 0;
  }

  .switch-detail-plus {
    font-size: 20px;
    color: #4B5B64;
    border: none;
    width: auto;
    height: auto;
    border-radius: 0;
    line-height: 1;
  }


  /* ════════════════════════
     ③ 特徴・仕様
  ════════════════════════ */
  .detail-spec-wrap {
    display: flex;
    gap: 5%;
    align-items: flex-end;
  }

  .detail-spec-left {
    flex: 1;
    min-width: 440px;
  }

  .detail-spec-right {
    flex: auto;
    max-width: 450px;
  }

  .detail-features li {
    font-size: 16px;
    letter-spacing: 0.08em;
  }

  .detail-features li.is-highlight {
    font-size: 18px;
    color: #294257;
    font-weight: 500;
  }

  .detail-table th { font-size: 14px; }
  .detail-table td { font-size: 14px; }

  .detail-drawing-wrap {
    max-width: none;
    margin: 0;
    width: 100%;
  }

  .detail-overview {
    border: 1px solid #4B5B64;
    padding: 5px 5%;
    font-size: 12px;
    line-height: 1.9;
    margin-top: 20px;
  }


  /* ════════════════════════
     ④ CONTACT（詳細ページ調整）
  ════════════════════════ */
  .contact-section .contact-h2 { font-size: 18px; }
  .contact-section .contact-col-label { font-size: 18px; }
  .contact-section .contact-btn { height: 52px; }
  .contact-section .tel-section { max-width: 660px; }


  /* ════════════════════════
     ⑤ その他関連製品
  ════════════════════════ */
  .other-products-section {
    padding: 30px 0;
    background: #F0F2F4;
    max-width: none;
    margin: 0;
  }

  .other-products-card {
    max-width: 1200px;
    margin: 0 auto;
    background: #fff;
    padding: 40px 20px;
    border-radius: 0;
    display: block;
    text-align: left;
    gap: unset;
  }

  .other-products-card .section-title-lined {
    font-family: 'Inria Sans', sans-serif;
    font-size: 28px;
    font-weight: 400;
    color: #294257;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
    padding: 0;
    border: none;
    display: block;
  }
  .other-products-card .section-title-lined::before,
  .other-products-card .section-title-lined::after {
    display: none;
  }

  .other-products-separator {
    width: 100%;
    height: 1.5px;
    background: #3B4E59;
    margin-bottom: 24px;
    display: block;
  }

  .other-products-flex {
    flex-direction: row;
    justify-content: flex-start;
    gap: 20px;
    width: 100%;
    flex-wrap: wrap;
  }

  .other-mini-card {
    flex: 0 0 auto;
    width: 330px;
    height: 130px;
    padding: 14px 34px 14px 16px;
    margin-bottom: 0;
    border: 1px solid #0D518C;
    display: flex;
    align-items: center;
    gap: 14px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
  }

  .other-mini-arrow {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: 0;
  }
  .other-mini-arrow {
    font-size: 0;
    color: #fff;
    font-family: serif;
  }

  .other-mini-card--unit  { border-color: #0D518C; }
  .other-mini-card--panel { border-color: #368ABF; }
  .other-mini-card--water { border-color: #88C9F2; }
  .other-mini-card--unit  .other-mini-arrow { background: #0D518C; }
  .other-mini-card--panel .other-mini-arrow { background: #368ABF; }
  .other-mini-card--water .other-mini-arrow { background: #88C9F2; }

  .other-mini-thumb img {
    height: 110px;
    object-fit: contain;
    display: block;
  }

  .other-mini-body {
    flex: 1;
    text-align: left;
    padding: 0;
  }

  .other-mini-title {
    font-family: 'Inria Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #294257;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
    border-bottom: 1.5px solid #0D518C;
    padding-bottom: 4px;
    display: inline-block;
    text-decoration: none;
  }
  .other-mini-card--panel .other-mini-title { border-bottom-color: #368ABF; }
  .other-mini-card--water .other-mini-title { border-bottom-color: #88C9F2; }

  .other-mini-desc {
    font-size: 12px;
    color: #4B5B64;
    margin: 4px 0 0;
  }


  /* ════════════════════════
     ⑥ TOPICS
  ════════════════════════ */
  .top-topics-section {
    padding: 30px 0;
  }

  .topics-card {
    max-width: 1200px;
    margin: 0 auto;
    background: #fff;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .topics-card .section-title-lined {
    font-family: 'Inria Sans', sans-serif;
    font-size: 26px;
    font-weight: 400;
    color: #294257;
    border-bottom: 1.5px solid #3B4E59;
    padding-bottom: 10px;
    width: 100%;
    margin-bottom: 0;
  }
  .topics-card .section-title-lined::before,
  .topics-card .section-title-lined::after {
    display: none;
  }

  .topics-banners {
    display: flex;
    gap: 20px;
    width: 100%;
  }

  .topic-banner {
    flex: 1;
    height: 260px;
  }

  /* オプションセクション */
  .detail-option-section .detail-inner {
    padding: 40px 20px;
  }
  .option-grid {
    gap: 24px;
  }
  .option-card {
    width: 220px;
  }
  /* MADLタイプ側カラム */
  .detail-diagram-side {
    flex: 0 0 220px;
    max-width: 220px;
  }

} /* end @media (min-width: 769px) */


/* ══════════════════════════════
   詳細モーダル（diagram callout）
══════════════════════════════ */
/* ── 詳細モーダル ── */
.detail-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.detail-modal.is-open {
  display: flex;
}
.detail-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  cursor: pointer;
}
.detail-modal-content {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 0;              /* シャープコーナー */
  width: min(480px, 90vw);
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* ヘッダーバー（ネイビー・30px高） */
.detail-modal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  background: #0D518C;
  color: #fff;
  font-size: 14px;
  font-family: 'Inria Sans', sans-serif;
  font-weight: 700;
  letter-spacing: 0.07em;
  padding: 0 36px;
  flex-shrink: 0;
}
.detail-modal-header--panel { background: #368ABF; }

/* 閉じるボタン：ヘッダー右上の灰色正方形ボタン */
.detail-modal-close {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 23px;
  height: 23px;
  background: #fff;
  border: 1px solid #828282;
  border-radius: 2px;
  color: #828282;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0;
}
.detail-modal-close:hover { background: #f5f5f5; }

/* ボディ：青アウトライン枠 */
.detail-modal-body {
  outline: 2px solid #0D518C;
  outline-offset: -2px;
  padding: 15px 20px;
}
.detail-modal--panel .detail-modal-body {
  outline-color: #368ABF;
}
.detail-modal-body--with-image {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 15px 30px;
}
.detail-modal-body--image-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 15px;
}

.detail-modal-image {
  flex: 0 0 auto;
}
.detail-modal-image img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}
.detail-modal-image--side img {
  width: 88px;
  height: auto;
}
.detail-modal-image--top {
  width: 100%;
  text-align: center;
}
.detail-modal-image--top img {
  max-width: 230px;
  height: auto;
  margin: 0 auto;
}

.detail-modal-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.detail-modal-text-full {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-modal-sub {
  font-size: 13px;
  font-family: 'Inria Sans', sans-serif;
  font-weight: 400;
  color: #3B4E59;
  letter-spacing: 0.1em;
  margin: 0 0 6px;
}
.detail-modal-divider {
  border: none;
  border-top: 0.5px solid #CECECE;
  margin: 0;
  align-self: stretch;
}
.detail-modal-body p,
.detail-modal-text p {
  font-size: 15px;
  font-family: 'Inria Sans', sans-serif;
  color: #4B5B64;
  line-height: 1.7;
  margin: 0;
  letter-spacing: 0.02em;
}

/* テキスト強調（赤） */
strong.highlight,
span.highlight {
  color: #CB0000;
  font-weight: 400;
}

/* サーモスタット用箇条書き */
.detail-modal-thermo-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.detail-modal-thermo-list p {
  width: 330px;
  text-align: left;
  font-size: 15px;
  font-family: 'Inria Sans', sans-serif;
  color: #4B5B64;
  letter-spacing: 0.02em;
  margin: 0;
}

/* MADLタイプボックス（PC） */
.madl-type-box {
  border: 2px solid #0D518C;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 24px;
}
.madl-type-header {
  background: #fff;
  color: #0D518C;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  border-bottom: 1px solid #0D518C;
  letter-spacing: 0.05em;
}
.madl-type-body {
  padding: 12px 14px;
  font-size: 12px;
  color: #3B4E59;
}
.madl-type-sub {
  font-size: 12px;
  margin: 0 0 4px;
}
.madl-type-body p {
  font-size: 12px;
  line-height: 1.6;
  margin: 0 0 10px;
  color: #3B4E59;
}
.madl-type-image {
  text-align: center;
  margin-top: 8px;
}
.madl-type-image img {
  max-width: 100%;
  height: auto;
}
.madl-type-image-label {
  display: block;
  font-size: 11px;
  color: #4B5B64;
  margin-top: 4px;
}
/* オプションボックス（PC） */
.option-box {
  margin-top: 16px;
}
.option-label {
  font-size: 13px;
  font-weight: 700;
  color: #294257;
  margin-bottom: 8px;
}
.option-item {
  text-align: center;
}
.option-item img {
  max-width: 100%;
  height: auto;
}
.option-item-name {
  font-size: 12px;
  color: #4B5B64;
  text-align: center;
  margin-top: 6px;
}

/* オプションセクション */
.detail-option-section {
  background: #F0F2F4;
}
.option-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.option-card {
  background: #fff;
  border: 1px solid #CECECE;
  border-radius: 4px;
  padding: 10px;
  width: 250px;
  text-align: center;
}
.option-card-image img {
  max-width: 100%;
  height: auto;
}
.option-card-name {
  font-size: 13px;
  color: #4B5B64;
  margin-top: 8px;
}


/* ─────────────────────────────────
   ダイアグラムSPコールアウトカード
   （@media max-width:768px 内で有効）
───────────────────────────────── */
@media (max-width: 768px) {
  /* ─ ダイアグラム：画像上の透明タップ領域（コールアウト） ─ */
  .detail-diagram {
    position: relative;
  }
  .diagram-sp-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  .diagram-overlay-btn {
    position: absolute;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: rgba(13, 81, 140, 0.15);
  }
  /* ─ ダイアグラムSPコールアウトカード ─ */
  .diagram-sp-callouts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
    padding: 0 16px;
    border-top: none;
  }
  .diagram-callout-row {
    width: 100%;
    border-bottom: none;
  }
  .diagram-callout-toggle {
    width: 100%;
    background: #fff;
    border: 1px solid #0D518C;
    border-radius: 4px;
    overflow: hidden;
    text-align: left;
    cursor: pointer;
    padding: 0;
    display: block;
  }
  .diagram-callout-toggle.diagram-callout-header--panel,
  .diagram-callout-toggle:has(.diagram-callout-header--panel) {
    border-color: #368ABF;
  }
  .diagram-callout-header {
    display: block;
    background: #0D518C;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    letter-spacing: 0.05em;
  }
  .diagram-callout-header--panel {
    background: #368ABF;
  }
  .diagram-callout-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
  }
  .diagram-callout-cta-text {
    font-size: 11px;
    font-weight: 700;
    color: #294257;
    letter-spacing: 0.05em;
  }
  .diagram-callout-plus {
    font-size: 14px;
    color: #294257;
  }
  /* 静的ラベル（IC基板収納部など） */
  .diagram-callout-static-label {
    display: block;
    font-size: 12px;
    color: #4B5B64;
    padding: 4px 0;
    border-bottom: 1px solid #CECECE;
  }
  /* 静的展開カード（サーモスタット式など） */
  .diagram-callout-static-card {
    background: #fff;
    border: 1px solid #0D518C;
    border-radius: 4px;
    overflow: hidden;
  }
  .diagram-callout-static-header {
    background: #0D518C;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
  }
  .diagram-callout-static-body {
    padding: 10px 14px;
    margin: 0;
    list-style: disc;
    list-style-position: inside;
  }
  .diagram-callout-static-body li {
    font-size: 12px;
    color: #3B4E59;
    line-height: 1.6;
    margin-bottom: 4px;
  }

  /* ─ SP：詳細モーダル幅 ─ */
  .detail-modal-content {
    width: calc(100vw - 20px);
    max-width: 373px;
  }
  .detail-modal-body--with-image {
    padding: 15px 20px;
  }
}


/* =========================================
   項目6: その他関連製品ボタンを設置事例ボタンと統一
   矢印を「細い帯＋白シェブロン」に（PC/SP共通）
========================================= */
.other-mini-arrow::after {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid #F5F5F5;
  border-right: 1.5px solid #F5F5F5;
  transform: rotate(45deg);
  margin: 0 auto;
}