/* ========================
   Aqua Clara Chiyoda - B2B
   Corporate Page CSS (最新版)
   ======================== */

/* ---- Design tokens ---- */
:root{
  --brand:#0b3a75;         /* 見出しなどの基調色（深い青） */
  --brand2:#0b63ce;        /* アクセント（ボタン/強調） */
  --ink:#1b2631;           /* 本文 */
  --muted:#40566f;         /* 補助文 */
  --line:#e6ecf2;          /* 枠線 */
  --bg:#f8fbff;            /* 淡い背景 */
  --card:#fff;             /* カード背景 */
  --shadow:0 6px 18px rgba(15,35,60,.06);
  --radius:14px;
}

/* ---- Base ---- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;
  line-height:1.7; color:var(--ink); background:#fff;
}
img{max-width:100%; display:block}
a{color:var(--brand2); text-decoration:none}
.container{width:min(1100px,92%); margin:auto}

/* ---- Header ---- */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.92); border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.header-inner{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:20px; padding:12px 0;
}
.logo{font-weight:800; color:var(--brand)}
.nav{display:flex; gap:18px; flex-wrap:wrap}
.nav a{color:var(--ink); font-weight:600}

/* ---- Buttons ---- */
.btn{
  display:inline-block; padding:10px 16px; border-radius:10px;
  border:1px solid var(--brand2); font-weight:700; transition:.2s;
}
.btn.primary{background:var(--brand2); color:#fff}
.btn.primary:hover{filter:brightness(1.05); text-decoration:none}
.btn.ghost{background:transparent; color:var(--brand2)}
.btn.lg{padding:14px 22px; font-size:1.05rem}

/* ---- Hero ---- */
.hero{
  background:linear-gradient(180deg,#f7fbff,#fff);
  padding:88px 0 64px; text-align:center;
}
.hero h1{
  font-size:clamp(28px,4.6vw,40px);
  color:var(--brand); margin:0 0 16px;
}
.lead{font-size:clamp(15px,2vw,18px); color:var(--muted); margin-bottom:22px}

/* ---- Sections ---- */
.section{padding:64px 0}
.section.alt{background:var(--bg)}
.sec-title{
  text-align:center;
  font-size:clamp(22px,3.6vw,28px);
  margin-bottom:22px; color:var(--brand);
}
.sec-sub{color:var(--muted); text-align:center; margin:6px 0 24px}
.section, .cta, .hero{scroll-margin-top:84px}

/* ---- Cards : 選ばれる理由 ---- */
.cards{list-style:none; padding:0; display:grid; gap:18px}
.cards.four{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px;
  box-shadow:var(--shadow); transition:.2s;
}
.card:hover{transform:translateY(-3px); box-shadow:0 10px 28px rgba(15,35,60,.1)}
.card h3{
  font-size:18px; color:var(--brand);
  margin:10px 0 8px; border-left:4px solid var(--brand2); padding-left:8px;
}
.card p{font-size:15px; color:var(--ink); line-height:1.7}

/* ---- Scene images on cards（メリット用の写真） ---- */
.ic.scene{
  position:relative; width:100%;
  /* 画像に文字が含まれる場合は高さauto推奨。比率キープでハミ出し防止 */
  height:auto; margin-bottom:14px; border-radius:12px; overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.ic.scene img{width:100%; height:auto; display:block; border-radius:12px}
.scene-caption{
  position:absolute; inset:auto 0 0 0; /* 下部帯 */
  background:rgba(11,58,117,.72); color:#fff; text-align:center;
  font-weight:700; font-size:15px; padding:8px 0; letter-spacing:.05em;
}
.card:hover .ic.scene img{transform:translateZ(0) scale(1.02); transition:.3s}

/* ---- Product lineup ---- */
.grid.three{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.prod{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px; box-shadow:var(--shadow);
}
.prod-img{height:160px; border-radius:10px; overflow:hidden; margin-bottom:12px}
.prod-img img{width:100%; height:100%; object-fit:cover}
.price{font-weight:700; color:var(--brand)}
.bullets{padding-left:18px}
/* ---- 商品ラインナップ 見出し ---- */
.lineup-heading{
  font-size: 20px;
  font-weight: 700;
  color: var(--brand);
  margin: 18px 0 16px;
  text-align: left;
  border-left: 4px solid var(--brand2);
  padding-left: 10px;
}

/* ---- 2列（上段） ---- */
.grid.two{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 18px;
}
/* ===== ボトル画像専用のスタイル（上下が切れないようにする） ===== */

/* ボトルカードの画像枠 */
.prod-img.bottle {
  height: 260px;                  /* ← サーバーより少し縦長にする */
  background: #f4f8ff;            /* ← ボトルが映える淡い背景 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  padding: 10px;                  /* ← 画像がくっつかないように */
}

/* ボトル画像本体（全体が見える・歪まない・中央揃え） */
.prod-img.bottle img {
  height: 100%;
  width: auto;                     /* ← contain で正しく収まる */
  object-fit: contain;
  object-position: center center;
  display: block;
  margin: 0 auto;
}

/* ---- 共通カード ---- */
.prod{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  box-shadow:var(--shadow);
}
.prod-img{
  height:180px;
  border-radius:10px;
  overflow:hidden;
  margin-bottom:12px;
}
.prod-img img{
  width:100%; height:100%;
  object-fit:cover;
}

/* ---- FAQ ---- */
.qa{border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:10px 0; background:#fff}
.qa summary{cursor:pointer; font-weight:700; color:var(--brand)}
.qa .answer{margin-top:8px}

/* ---- CTA band ---- */
.cta{
  background:linear-gradient(180deg,var(--brand2),var(--brand));
  color:#fff; padding:56px 0; text-align:center;
}
.cta-actions{display:flex; gap:16px; justify-content:center; align-items:center; flex-wrap:wrap}

/* ---- Footer ---- */
.site-footer{background:var(--brand); color:#cfe2ff}
.footer-inner{padding:16px 0; display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.link{color:#cfe2ff}
.sep{opacity:.5}

/* 料金プラン比較セクション */
.plan-compare{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}
.plan-box{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 18px 20px;
}
.plan-box.highlight{
  border: 2px solid var(--brand2);
  background: linear-gradient(180deg, #f8fbff, #ffffff);
}
.plan-title{
  font-size: 18px;
  margin: 0 0 8px;
  color: var(--brand);
  text-align: center;
  font-weight: 700;
}
.plan-price{
  text-align: center;
  font-size: 15px;
  margin-bottom: 14px;
  color: var(--ink);
  line-height: 1.6;
}
.plan-list{
  list-style: none;
  padding: 0;
  margin: 0;
}
.plan-list li{
  padding-left: 18px;
  margin: 6px 0;
  position: relative;
  color: #2b3a4d;
}
.plan-list li::before{
  content: "✔";
  color: var(--brand2);
  position: absolute;
  left: 0;
  top: 0;
}
@media (max-width: 720px){
  .plan-compare{
    grid-template-columns: 1fr;
  }
}
/* =========================
   price
   ========================= */
.pricing-subtitle{
  margin: 32px 0 10px;
  font-size: 18px;
  color: var(--brand);
}

/* 料金表 */
.price-table{
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 4px;
  font-size: 14px;
}
.price-table th,
.price-table td{
  border: 1px solid var(--line);
  padding: 10px 12px;
}
.price-table thead th{
  background:#f5f9ff;
  text-align:left;
}
.price-table tbody tr:nth-child(even){
  background:#fafbfd;
}

/* =========================
   SDGs / Sustainability
   ========================= */
.sdgs-badges{
  display:flex; gap:10px; flex-wrap:wrap;
  margin:10px 0 22px; padding:0; list-style:none;
}
.sdgs-badges .goal{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line); background:#fff; padding:8px 10px; border-radius:999px;
  font-weight:700; color:var(--ink); box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.sdgs-badges .goal span{
  display:inline-grid; place-items:center; width:26px; height:26px;
  border-radius:6px; color:#fff; font-weight:800;
}
.goal.g6 span{background:#00b0f0}
.goal.g12 span{background:#bf8f00}
.goal.g13 span{background:#4db248}

/* KPI cards */
.kpi-grid .kpi-card{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:16px; box-shadow:var(--shadow);
}
.kpi-card h3{margin:0 0 6px; color:var(--brand); font-size:16px}
.kpi-num{margin:6px 0 10px; font-size:14px; color:var(--muted)}
.kpi-num b{font-size:22px; color:var(--brand)}
.bar{width:100%; height:8px; background:#eef4fb; border-radius:999px; overflow:hidden}
.bar span{display:block; height:100%; background:linear-gradient(90deg,var(--brand2),var(--brand))}

/* Items (badge + text). 2列でゆとり、狭ければ自動1列 */
#sdgs .feature-grid{
  display:grid; grid-template-columns:repeat(2, minmax(500px,1fr));
  gap:24px;
}
#sdgs .sdgs-item{
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}
/* タイトルも説明文も「右列」に固定 */
#sdgs .sdgs-item h4 { grid-column: 2 / -1; }
#sdgs .sdgs-item p  { grid-column: 2 / -1; }
#sdgs .sdgs-thumb{
  width:120px; height:120px; border-radius:16px;
  display:grid; place-items:center;
  background:#f6fbff; border:1px solid var(--line);
}
.thumb-fallback{width:100%; height:100%; display:grid; place-items:center; font-weight:800; color:#fff; font-size:28px}
.thumb-fallback.g6{background:#00b0f0}
.thumb-fallback.g12{background:#bf8f00}
.thumb-fallback.g13{background:#4db248}

/* ---- Responsive ---- */
@media (max-width:1080px){
  #sdgs .feature-grid{grid-template-columns:1fr}
  #sdgs .sdgs-item{grid-template-columns:100px minmax(0,1fr)}
  #sdgs .sdgs-thumb{width:100px; height:100px}
}
@media (max-width:960px){
  .cards.four{grid-template-columns:repeat(2,1fr)}
  .grid.three{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .cards.four, .grid.three{grid-template-columns:1fr}
    #sdgs .sdgs-item{
    grid-template-columns: 1fr;
  }
    #sdgs .sdgs-item h4,
    #sdgs .sdgs-item p{
    grid-column: 1 / -1;   /* 1列に戻す */
  }
  #sdgs .sdgs-thumb{margin:0 auto 8px}
}
/* ===== Flow (画像付きステップ) ===== */
.flow-steps{
  --gap: 20px;
  --arrow: linear-gradient(90deg, var(--brand2), var(--brand));
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap);
  counter-reset: flow;
}
.step{
  position: relative; background: #fff; border:1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow); overflow: hidden;
  display: grid; grid-template-rows: 160px auto;
}
.step + .step::before{
  /* カード間の矢印（PC・タブレット） */
  content: ""; position: absolute; top: 50%; left: calc(-.5 * var(--gap));
  transform: translate(-50%,-50%); width: 28px; height: 4px; border-radius: 4px;
  background: var(--arrow);
}
.step-visual img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.step-body{ padding: 14px 14px 16px; }
.step-title{
  margin: 0 0 6px; font-size: 16px; color: var(--brand); display: flex; align-items: center; gap: 8px; text-align: center;
}
.step-title .num{
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--brand2); color: #fff; font-weight: 800;
}
.step-text{ margin: 0; color: #2b3a4d; line-height: 1.7; }

.flow-cta{
  margin-top: 18px; display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap;
}

/* レスポンシブ：2列→1列。矢印は縦向きに */
@media (max-width: 1080px){
  .flow-steps{ grid-template-columns: repeat(2, 1fr); }
  .step + .step::before{
    left: 50%; top: calc(-.5 * var(--gap)); transform: translate(-50%,-50%) rotate(90deg);
    width: 28px; height: 4px;
  }
}
@media (max-width: 640px){
  .flow-steps{ grid-template-columns: 1fr; }
  .step{ grid-template-rows: 180px auto; }
}
/* --- Flow: 画像はみ出し防止・バランス調整 --- */
.step {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;   /* ← グリッド→フレックスに変更して高さを可変に */
}

.step-visual {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 1.4 / 1;    /* ← 画像比率を固定（横長） */
  background: #f9fbff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.step-visual img {
  width: 90%;                /* ← イラストの余白を保つ */
  height: auto;
  object-fit: contain;       /* ← 画像の端が切れないようにする */
  display: block;
}

.step-body {
  flex: 1;
  padding: 16px 14px 18px;
  text-align: left;
}

/* カード全体の高さを均等に見せる（小画面では自動解除） */
@media (min-width: 961px) {
  .flow-steps {
    align-items: stretch;
  }
}
/* --- Flow: 画像サイズ微調整（拡大しすぎ防止） --- */
.step-visual {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 1.4 / 1;     /* 横長比率をキープ */
  background: #f9fbff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 12px;              /* ← 枠内に余白を追加（画像が大きすぎるのを防ぐ） */
}

.step-visual img {
  width: 80%;                 /* ← 90% → 80% に縮小して余白を増やす */
  height: auto;
  object-fit: contain;        /* ← 端が切れないようにする */
  display: block;
  transition: transform .3s ease;
}

.step-visual img:hover {
  transform: scale(1.03);     /* ← ほんの少しの動きで質感アップ（任意） */
}
/* --- Flow: イラストを中央に配置（左右の寄り防止） --- */
.step-visual {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 1.4 / 1;
  background: #f9fbff;
  display: flex;
  align-items: center;
  justify-content: center;   /* ← 中央揃え（横方向） */
  overflow: hidden;
  padding: 12px;
}

.step-visual img {
  max-width: 80%;            /* ← 幅を制限 */
  max-height: 100%;          /* ← 高さ超え防止 */
  height: auto;
  margin: 0 auto;            /* ← 水平方向中央寄せ */
  object-fit: contain;
  display: block;
}
/* --- Flow: 共通枠（はみ出し防止＆均一な余白） --- */
.step-visual{
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 1.4 / 1;         /* 横長比率で統一 */
  background: #f9fbff;
  display: grid;                  /* 中央揃えを確実に */
  place-items: center;
  overflow: hidden;
  padding: 10px;                  /* 枠内の共通余白 */
  border-bottom: 1px solid var(--line);
}
.step-visual img{
  max-width: 88%;                 /* 画像は枠の 88% まで */
  max-height: 88%;
  height: auto;
  object-fit: contain;            /* 切れない・歪まない */
  object-position: center center; /* 描画の基準は中央 */
  display: block;
  margin: 0 auto;
  transition: transform .25s ease;
}
@media (prefers-reduced-motion: reduce){
  .step-visual img{ transition: none; }
}

/* --- 画像ごとの“見た目中心”微調整（1～5%で十分） --- */
/* 1) お問い合わせ（左の吹き出しが大きい → ほんの少し右へ） */
.step-visual img[src*="flow_contact"]{
  transform: translateX(2%);      /* +右へ2% */
}

/* 2) ヒアリング（ほぼ中央…微調整なしでもOK） */
.step-visual img[src*="flow_hearing"]{
  transform: translateX(0%);
}

/* 3) 日程調整（カレンダーはほぼ中央…必要に応じて微調整） */
.step-visual img[src*="flow_schedule"]{
  transform: translateX(0%);
}

/* 4) 設置・ご利用開始（トラックの車体が左寄り → 少し左へ） */
.step-visual img[src*="flow_install"]{
  transform: translateX(-4%);     /* −左へ4% */
}
/* 矢印バーが視覚バランスを乱す可能性があるため一旦非表示 */
.flow-steps .step + .step::before { display: none !important; }
/* --- Flow: 完全リセットして中央揃え --- */
.step{
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: grid;
  grid-template-rows: 180px auto; /* 上:画像枠 / 下:本文 */
}

/* 薄い青の背景を“枠いっぱい”に、左右対称に */
.step-visual{
  background: #f5f9ff;          /* 薄い青 */
  margin: 0;                     /* 余白リセット */
  padding: 0;                    /* 余白リセット */
  display: flex;
  align-items: center;
  justify-content: center;       /* 中央揃え（左右・上下） */
  width: 100%;
  height: 100%;
}

/* 画像は常に枠内センター＆等倍率で収まる */
.step-visual img{
  max-width: 84%;                /* 余白を確保（大きすぎ防止） */
  max-height: 84%;
  width: auto;
  height: auto;
  object-fit: contain;           /* 切れない・歪まない */
  object-position: center center;
  display: block;
  margin: 0 auto;                /* ブロック中央 */
}

/* 以前の個別位置調整は全て無効化（右寄り・左寄りの原因を排除） */
.step-visual img[src*="flow_contact"],
.step-visual img[src*="flow_hearing"],
.step-visual img[src*="flow_schedule"],
.step-visual img[src*="flow_install"]{
  transform: none !important;
}
/* ---- ヘッダー基本レイアウト ---- */
.site-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* ---- ロゴ小さく ---- */
.site-header .logo img {
  width: 150px;      /* ← これで小さくなる（好みで 120〜180px） */
  height: auto;
}

/* ---- ナビ ---- */
.site-header .nav {
  display: flex;
  gap: 18px;
  font-weight: 550;
}

.site-header .nav a {
  text-decoration: none;
  color: #1a1a1a;
  white-space: nowrap;
}

/* ---- ボタン2つ ---- */
.header-buttons {
  display: flex;
  gap: 12px;
}

/* 「お問い合わせ」＝青: primary */
.btn.primary {
  background: #2b61e3;
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
}

/* 「お申込」＝白背景: secondary */
.btn.secondary {
  background: #fff;
  color: #2b61e3;
  border: 2px solid #2b61e3;
  padding: 8px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
}

/* ボタンホバー */
.btn.primary:hover {
  background: #1f4cc0;
}
.btn.secondary:hover {
  background: #e9f0ff;
}
/* =========================================================
   オフィスにおすすめの便利アイテム（カードリスト）
   ========================================================= */
.office-items {
  padding: 60px 0;
  background: #fff;
}

.office-items__title {
  margin: 0 0 40px;
  font-size: 24px;
  font-weight: 700;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}

.office-items__title-line {
  width: 60px;
  height: 1px;
  background: #3cb371; /* 緑のライン */
}

/* カードグリッド */
.office-items__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.office-item__inner {
  height: 100%;
  border: 1px solid #eee;
  background: #fff;
  padding: 24px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  text-align: left;
}

/* 画像 */
.office-item__image {
  margin: 0 0 16px;
  text-align: center;
}
.office-item__image img {
  max-width: 100%;
  height: auto;
}

/* タイトル・本文 */
.office-item__name {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  line-height: 1.5;
  text-align: center;
}

.office-item__text {
  margin: 0;
  font-size: 14px;
  color: #555;
  line-height: 1.7;
}

/* レスポンシブ */
@media (max-width: 1024px) {
  .office-items__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .office-items {
    padding: 40px 0;
  }
  .office-items__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .office-items__grid {
    grid-template-columns: 1fr;
  }
}
.benefit-note {
  background: #e8f3ff;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  color: #0a3a80;
  margin-top: 16px;
  line-height: 1.6;
  border-left: 4px solid #2b61e3;
}

.benefit-note strong {
  font-weight: 700;
  color: #0849b7;
}
.web-limited-offer {
  background: linear-gradient(135deg, #2b61e3 0%, #1b4bb5 100%);
  color: #fff;
  padding: 20px 24px;
  border-radius: 12px;
  text-align: center;
  margin: 32px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.offer-title {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 6px;
}

.offer-sub {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
}

.offer-sub strong {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
}
@media (max-width: 768px) {
  .price-list,
  .product-list,
  .office-items__grid {
    grid-template-columns: 1fr !important;
  }
}
/* ========== ヘッダー共通 ========== */
.site-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* ========== PC表示 ========== */
@media (min-width: 769px) {
  .site-header .nav {
    display: flex;
    gap: 24px;
  }

  .nav-overlay {
    display: none;
  }
}

/* メニューオープン時にbodyスクロール禁止＆オーバーレイ表示 */
html.nav-open,
html.nav-open body {
  overflow: hidden;
}

html.nav-open .nav-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* ---- ボトル・商品カードのスマホ1列化 ---- */
@media (max-width: 768px) {

  /* 価格リスト（12L・7Lボトルなど） */
  .price-list {
    display: block !important;
  }
  .price-list > * {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 16px !important;
  }

  /* 商品ラインナップ（サーバー等）がgridの場合も縦1列に */
  .product-list,
  .office-items__grid {
    display: block !important;
  }
  .product-list > *,
  .office-items__grid > * {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 16px !important;
  }
}
/* =========================
   ヘッダー（PC＋SP共通）
   ========================= */
.site-header {
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.site-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 8px 0;
}

/* 三本線ボタンの基本形 */
.nav-toggle {
  display: none; /* PCでは非表示 */
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #333;
  border-radius: 999px;
}
.nav-toggle__bar + .nav-toggle__bar {
  margin-top: 5px;
}

/* PC時のナビ：ロゴ＋メニュー＋ボタン横並び */
@media (min-width: 769px) {
  .site-header .nav {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: auto;
  }

  .site-header .nav a {
    text-decoration: none;
    color: #222;
    font-weight: 600;
    white-space: nowrap;
  }

  .site-header .header-buttons {
    display: flex;
    gap: 12px;
  }
}

/* ===============================
   スマホ時：ボトルを縦1列に強制
   =============================== */
@media (max-width: 768px) {

  /* 2列指定を上書き（grid → ブロック） */
  .grid.two.lineup-grid {
    display: block !important;
  }

  /* 各ボトルカードを全幅にする */
  .grid.two.lineup-grid > .prod {
    width: 100% !important;
    max-width: none !important;
    margin-bottom: 20px !important;
    box-sizing: border-box;
  }

  /* 画像も中央寄せで幅調整 */
  .grid.two.lineup-grid .prod-img img {
    display: block;
    margin: 0 auto;
    max-width: 160px; /* スマホで見やすいサイズ */
    height: auto;
  }
}
/* =========================================
   スマホヘッダー：ロゴ＋三本線 → 下にメニュー展開
   ========================================= */
@media (max-width: 768px) {

  /* ヘッダー本体 */
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
  }

  .site-header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 16px;
  }

  /* 三本線ボタンを表示 */
/* ハンバーガー（三本線）スタイルを明示的に指定 */
@media (max-width: 768px) {
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin-left: auto;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .nav-toggle__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #333;           /* 線の色（必要なら濃く／薄く調整） */
    border-radius: 999px;
  }

  .nav-toggle__bar + .nav-toggle__bar {
    margin-top: 4px;
  }
}

  /* メニューはヘッダーの「下に絶対配置」してドロップダウン */
  .site-header .nav {
    position: absolute;
    top: 100%;           /* ヘッダーの真下からスタート */
    left: 0;
    right: 0;
    background: #fff;
    padding: 12px 16px 16px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
    display: none;       /* 初期は非表示 */
    flex-direction: column;
    gap: 12px;
  }

  .site-header .nav a {
    display: block;
    padding: 4px 0;
    text-decoration: none;
    color: #222;
    font-size: 16px;
    font-weight: 600;
  }

  /* ボタンもメニューの一部として縦に並べる */
  .site-header .header-buttons {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
  }

  .site-header .header-buttons .btn {
    flex: 1 1 auto;
    text-align: center;
  }

  /* 開いているとき：html に nav-open クラスが付く想定 */
  html.nav-open .site-header .nav {
    display: flex;
  }
}
@media (max-width: 768px) {
  body {
    padding-top: 72px;  /* ヘッダーの高さに合わせて調整（60〜80の間ならOK） */
  }
}
/* ================================
   スマホヘッダー（ロゴ＋申込＋三本線）
   ================================ */
@media (max-width: 768px) {

  .site-header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
  }

  /* SP用お申込ボタン */
  .sp-apply-btn {
    display: inline-block;
    background: #2b61e3;
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }
  
  /* メニュー内のボタン配置を縦並び＆全幅に */
  .site-header .nav .header-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
  }

  .site-header .nav .header-buttons .btn {
    width: 100%;
    text-align: center;
  }

  /* メニュー内のお申込ボタン（secondary）はSPでは隠す */
  .site-header .nav .header-buttons .btn.secondary {
    display: none;
  }

  /* PCでは非表示 */
  @media (min-width: 769px) {
    .sp-apply-btn {
      display: none;
    }
  }

  /* 三本線ボタン */
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
  }

  .nav-toggle__bar {
    width: 22px;
    height: 2px;
    background: #333;
    border-radius: 999px;
    transition: all 0.25s ease;
  }

  .nav-toggle__bar + .nav-toggle__bar {
    margin-top: 4px;
  }

  /* ==========================
     三本線 → × アニメーション
     html.nav-open がONのとき
     ========================== */

  html.nav-open .nav-toggle__bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  html.nav-open .nav-toggle__bar:nth-child(2) {
    opacity: 0;
  }

  html.nav-open .nav-toggle__bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
}