/* =========================================================
   THEME: Natural White × Gold × Gray
   - Elegant spacing, thin gold accents, soft shadows
   - Typography: Shippori Mincho (titles), Zen Maru (body)
========================================================= */



:root{
  /* Core palette */
  --gold-1:#c7a770;  /* main gold */
  --gold-2:#e2c98f;  /* light gold */
  --gold-3:#a98b58;  /* deep line */
  --gray-1:#0f0f0f;  /* near-black text */
  --gray-2:#4a4a4a;  /* body text */
  --gray-3:#8f8f8f;  /* meta text */
  --gray-4:#dcdcdc;  /* hairline */
  --bg:#faf9f7;      /* natural white base */
  --paper:#ffffff;   /* surface */
  --accent:#dcae6b;  /* CTA gradient stop */

  /* Radius & shadows */
  --r-sm:10px;
  --r-md:14px;
  --r-lg:18px;
  --shadow: 0 8px 24px rgba(0,0,0,.06);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.08);

  /* Max width */
  --w:1200px;
}

/* Base */
html,body{margin:0;padding:0}
*{box-sizing:border-box}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0}
button{font:inherit}

body{
  font-family:"Zen Maru Gothic",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--gray-1);
  background:
    radial-gradient(1200px 600px at 10% -10%, #ffffff 0%, transparent 70%),
    radial-gradient(900px 500px at 90% 0%, #fffdf9 0%, transparent 70%),
    var(--bg);
  line-height:1.9;
}

.container{
  max-width:var(--w);
  margin-inline:auto;
  padding-inline:20px;
}

.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}


/* =========================================================
   Buttons
========================================================= */
/* ========== Buttons (base) ========== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  border-radius:999px;
  padding:.9em 1.6em;
  font-weight:700;
  letter-spacing:.02em;
  transition:transform .12s ease, box-shadow .2s ease, opacity .2s ease;
  will-change:transform;
}
.btn:hover{ transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }

.btn-primary{
  color:#1f1a14;
  background:linear-gradient(180deg,#f2e5c6,#e7d39b 60%,#dcc380);
  border:1px solid rgba(169,139,88,.45);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 6px 18px rgba(169,139,88,.25);
}
.btn-primary:hover{
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 10px 26px rgba(169,139,88,.3);
}
.btn-outline{
  background:#fff;
  border:1px solid var(--gray-4);
  color:var(--gray-1);
  box-shadow:var(--shadow);
}
.btn-lg{ padding:1.05em 1.8em; font-size:1.05rem }
.btn-sm{ padding:.6em 1.1em; font-size:.92rem }



/* =======================
   Header（最終FIX・完全版）
======================= */

/* ===== Header base ===== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--footer-bg, #2b2620);
  border-bottom: 1px solid var(--footer-border-on-dark, rgba(255,255,255,.12));
  backdrop-filter: none;
}

/* ヘッダーだけフル幅（中身は中央） */
.site-header .container{
  max-width: none;
  width: 100%;
  padding: 0;
}

/* ===== PC layout (default) ===== */
.header-inner{
  display: grid;
  grid-template-columns: auto 1fr auto; /* ロゴ / 連絡先 / LINE */
  align-items: center;
  gap: clamp(10px, 2vw, 18px);
  padding-block: clamp(8px, 1.4vw, 12px);
  padding-inline: clamp(14px, 2.4vw, 28px);

  /* PC時：ロゴ左に“やや余白” */
  padding-left: clamp(22px, 4vw, 56px);

  max-width: min(1280px, 94vw);
  margin-inline: auto;
  min-height: 88px;
  box-sizing: border-box;
}

/* ロゴ */
.brand{
  display: flex;
  align-items: center;
  height: 100%;
}
.brand-logo{
  height: clamp(56px, 7.2vw, 80px);
  width: auto;
  object-fit: contain;
  mix-blend-mode: normal;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.12));
}

/* CTAブロック（中央） */
.header-cta{
  display: flex;
  align-items: center;
  height: 100%;
  margin-left: auto;
}
.header-cta__row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.8vw, 20px);
  flex-wrap: nowrap;
  min-width: 0;
}

/* 電話ブロック */
.cta-left{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.25;
  min-width: 0;
}

/* コピー */
.header-cta__lead{
  font-weight: 900;
  font-size: clamp(12px, 1.2vw, 14px);
  letter-spacing: .06em;
  color: var(--header-fg-on-dark, rgba(255,255,255,.92));
}
.header-cta__lead--sp{ display:none; }

/* 電話 */
.cta-phone{
  margin-top: 2px;
  display: inline-flex;
  align-items: baseline;
  gap: .4em;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: clamp(15px, 1.55vw, 18px);
  color: var(--header-fg-on-dark, rgba(255,255,255,.92));
  white-space: nowrap;
}
.cta-hours{
  font-weight: 700;
  font-size: clamp(11px, 1.1vw, 12px);
  color: var(--header-fg-muted-on-dark, rgba(255,255,255,.75));
  padding-left: .8em;
  margin-left: .2em;
  border-left: 1px solid var(--header-divider-on-dark, rgba(255,255,255,.28));
  line-height: 1;
}

/* LINEボタン（右） */
.btn-line-entry{
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-weight: 800;
  font-size: clamp(12px, 1.25vw, 14px);
  color: #fff;
  text-decoration: none;
  background: #06c755;
  border: 1px solid #05b64d;
  padding: .6em 1.2em;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(6,199,85,.22);
  white-space: nowrap;
}
.btn-line-entry__ico{
  width:18px; height:18px; border-radius:4px; display:block; flex:0 0 auto;
}
.btn-line-entry__arr{
  width:18px; height:18px; opacity:.9; display:block; flex:0 0 auto;
}

/* ===== PC only: give the logo a little extra left space ===== */
.header-inner .brand{
  /* existing values... */
  padding-left: 10px;  /* ← was clamp(22px, 4vw, 56px) */
}

/* =================================================
   SP（<=640px）：ロゴ左 / LINE右を“必ず同じ高さ”で1行固定
================================================= */
@media (max-width: 640px){

  .header-inner{
    display:flex;
    align-items:center;              /* ← 行の縦中央 */
    justify-content:space-between;
    gap:10px;
    padding:8px 12px;
    min-height:64px;
    max-width:100%;
    width:100%;
    box-sizing:border-box;
    padding-left:12px;              /* 左余白リセット */
  }

  /* SPでは連絡系を全部消す */
  .cta-left,
  .header-cta__lead,
  .cta-phone,
  .cta-hours{
    display:none !important;
  }

  /* ===== ロゴ側：ズレの原因をSPで無効化 ===== */
  .brand{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    align-self:center;              /* ← 自分も縦中央に */
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    position:static !important;
  }

  .brand-logo{
    display:block;
    height:46px;                    /* 少しだけ抑えめ */
    width:auto;
    margin:0 !important;
    transform:none !important;
    position:static !important;
  }

  /* ===== ボタン側：ロゴと同じ縦中央に固定 ===== */
  .header-cta{
    flex:0 1 auto;
    width:auto;
    margin-left:auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    align-self:center;              /* ← 自分も縦中央 */
    min-width:0;
    transform:none !important;
    position:static !important;
  }

  .header-cta__row{
    width:auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:0;
    min-width:0;
  }

  .btn-line-entry{
    flex:0 1 auto;
    min-width:0;
    max-width:68vw;
    font-size:clamp(11px, 3.6vw, 13px);
    padding:0.55em 1.0em;
    line-height:1.15;              /* ← 文字の上下ズレ防止 */
    margin:0 !important;           /* ← 余計な上下マージン殺す */
    align-self:center;             /* ← 行の中央に */
    transform:none !important;
    position:static !important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .btn-line-entry__ico,
  .btn-line-entry__arr{
    width:16px;
    height:16px;
  }
}

/* さらに狭い端末（〜400px） */
@media (max-width: 400px){
  .brand-logo{ height:44px; }
  .btn-line-entry{
    max-width:64vw;
    font-size:11px;
    padding:0.5em 0.9em;
  }
}

/* =========================================================
   HERO（確定版）
========================================================= */
:root{
  --header-h: 84px;

  /* 右下スタック位置（スクロール不要にしたいので上げめ） */
  --stack-right: clamp(10px, 2.6vw, 28px);
  --stack-bottom: clamp(90px, 14vh, 190px); /* ←ここで上下調整 */

  /* スタック内の間隔 */
  --stack-gap: 14px;
}

.hero{
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - var(--header-h));
  padding-top: calc(var(--header-h) + 6px);
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.30)),
    url("img/hero-fabric.jpg") center / cover no-repeat;
}
@supports(height:100svh){
  .hero{ min-height: calc(100svh - var(--header-h)); }
}
.hero::before{ content:none !important; }

/* ★見出し幅を確保するため、hero-innerは1カラム */
.hero-inner{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  min-height: inherit;
  padding-block: clamp(28px, 7vh, 96px);
}

/* ===== 見出し：中央配置 ===== */
.hero-copy{
  justify-self: center;
  text-align: center;
  width: 100%;
  max-width: min(92vw, 980px); /* ←幅を広げて切れリスクを下げる */
  padding-inline: 16px;

  /* どこかで overflow:hidden が当たっても切れない保険 */
  overflow: visible !important;
}

.hero-ttl{
  margin: 0 0 .35em;
  font-family:"Shippori Mincho",serif;

  /* ★2行固定でも必ず収まるよう控えめに */
  font-size: clamp(20px, 3.0vw, 48px);
  line-height: 1.18;
  letter-spacing: .02em; /* ←字間も少し詰める */

  overflow: visible !important;
}

/* ★必ず2行固定（途中で折り返さない） */
.hero-ttl.luxe .jp{ display:inline-block; }
.hero-ttl.luxe .jp .l1,
.hero-ttl.luxe .jp .l2{
  display: block;
  white-space: nowrap;
  word-break: keep-all;
}

/* 文字の見え方（明るい金＋影） */
.hero-ttl.luxe .jp{
  background: linear-gradient(180deg,#fffef8 0%, #f5e9c5 55%, #dfc57f 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .7px rgba(32,28,24,.26);
  text-shadow: 0 2px 14px rgba(0,0,0,.38), 0 0 1px rgba(255,255,255,.30);
}

.hero-lead{
  margin: .45em 0 0;
  color: rgba(255,255,255,.94);
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.hero-lead strong{
  font-weight: 800;
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.7;
}

/* =========================================================
   右下スタック：benefits（上）→ award（下）
   → “必ずawardの上” を構造で保証
========================================================= */
.hero-right-stack{
  position: absolute;
  right: var(--stack-right);
  bottom: var(--stack-bottom);
  z-index: 5;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--stack-gap);

  pointer-events: none;
  user-select: none;
}

/* benefits */
.hero-benefits{
  pointer-events: none;
  margin: 0;
  padding: 14px 16px;
  list-style: none;
  width: min(360px, 34vw);

  border-radius: 16px;
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(6px);
  box-shadow: 0 14px 40px rgba(0,0,0,.20);

  display: grid;
  gap: 8px;
}
.hero-benefits li{
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .02em;
  color: #1f1a14;
}

/* award */
.hero-award-block{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.hero-award{
  width: clamp(120px, 10.5vw, 170px);
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.22));
}
.hero-award-label{
  margin: 0;
  width: 100%;
  text-align: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.38);
}

/* =========================================================
   SP：2行固定のまま、さらに小さくして絶対に切れないように
========================================================= */
@media (max-width: 780px){
  .hero-inner{
    align-items: start;
    padding-inline: 16px;
    padding-top: clamp(22px, 6vh, 54px);
    padding-bottom: clamp(22px, 6vh, 54px);
  }

  .hero-ttl{
    font-size: clamp(18px, 5.2vw, 32px);
    letter-spacing: .01em;
  }

  .hero-right-stack{
    left: 16px;
    right: 16px;
    align-items: stretch;
  }
  .hero-benefits{
    width: 100%;
  }

  .hero-award{
    width: clamp(110px, 32vw, 155px);
  }
  .hero-award-label{
    font-size: 11px;
  }
}

/* =========================================================
   HERO：テキストを“画面中央”に固定 + 色を統一
   ※Hero関連CSSの一番最後に置く
========================================================= */
:root{
  --header-h: 84px;

  /* テキスト色（統一色） */
  --hero-text: rgba(255, 255, 255, .92);

  /* 読みやすさ（統一） */
  --hero-shadow: 0 2px 14px rgba(0,0,0,.40);
}

/* 背景はそのまま使う（既存があるなら上書きされます） */
.hero{
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - var(--header-h));
  padding-top: calc(var(--header-h) + 6px);
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.30)),
    url("img/hero-fabric.png") center / cover no-repeat;
}
@supports(height:100svh){
  .hero{ min-height: calc(100svh - var(--header-h)); }
}
.hero::before{ content:none !important; }

/* ★ここが肝：コンテンツを画面中央に固定 */
.hero-inner{
  position: relative;
  z-index: 2;

  /* gridよりflexの方が“ど真ん中”が安定する */
  display: flex !important;
  align-items: center !important;    /* 縦中央 */
  justify-content: center !important;/* 横中央 */

  min-height: inherit;
  padding: 0 16px;                  /* 端の安全余白 */
}

/* テキストブロック：完全中央 */
.hero-copy{
  width: min(92vw, 980px);
  text-align: center;
}

/* ===== 見出し（2行固定のまま） ===== */
.hero-ttl{
  margin: 0 0 .35em;
  font-family:"Shippori Mincho",serif;

  /* 2行固定で切れにくいサイズ */
  font-size: clamp(20px, 3.0vw, 48px);
  line-height: 1.18;
  letter-spacing: .02em;

  color: var(--hero-text) !important;
  text-shadow: var(--hero-shadow) !important;
}

/* 2行固定 */
.hero-ttl .jp{ display:inline-block; }
.hero-ttl .jp .l1,
.hero-ttl .jp .l2{
  display: block;
  white-space: nowrap;
  word-break: keep-all;
}

/* ★色統一のため、見出しのグラデ/ストロークを無効化 */
.hero-ttl.luxe .jp{
  background: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  -webkit-text-fill-color: var(--hero-text) !important;
  -webkit-text-stroke: 0 !important;
  color: var(--hero-text) !important;
  text-shadow: var(--hero-shadow) !important;
}

/* ===== リード文（色統一） ===== */
.hero-lead{
  margin: .45em 0 0;
  color: var(--hero-text) !important;
  text-shadow: var(--hero-shadow) !important;
}
.hero-lead strong{
  font-weight: 800;
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.7;
  color: var(--hero-text) !important;
}

/* =========================================================
   右下スタック（benefits/award）は前のCSSのまま使う想定
   ※もし“中央寄せ優先で邪魔”なら、z-indexを下げる等で調整可
========================================================= */

/* SP：2行固定維持、サイズをさらに下げる */
@media (max-width: 780px){
  .hero-ttl{
    font-size: clamp(18px, 5.2vw, 32px);
    letter-spacing: .01em;
  }
}

/* =========================================================
   HERO：背景は触らず、文字だけを“見た目の中央”へ微調整
   ※Hero関連CSSの一番最後に置く
========================================================= */

/* まずはPC/タブレット：少し上へ（好みで数値だけ調整） */
.hero-copy{
  transform: translateY(-2.2vh);
}

/* 画面が狭いほどズレ量を弱める */
@media (max-width: 1120px){
  .hero-copy{ transform: translateY(-1.6vh); }
}
@media (max-width: 780px){
  .hero-copy{ transform: translateY(-1.0vh); }
}
@media (max-width: 430px){
  .hero-copy{ transform: translateY(-0.6vh); }
}

/* ===== HERO 背景：必ず表示（パス事故防止のため絶対パス） ===== */
.hero{
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.30)),
    url("/img/hero-fabric.png") center / cover no-repeat !important;
}

/* =========================================================
   HERO benefits：枠っぽさを消す（背景・枠・影なし）
========================================================= */
.hero-benefits{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;

  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  list-style: none;
  width: auto !important;   /* 固定幅を解除（必要なら残してOK） */
}

/* 文字を上品に：サイズ/余白を整え、軽い可読性だけ確保 */
.hero-benefits li{
  color: rgba(255,255,255,.92);           /* 背景が暗い想定なら白寄り */
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  line-height: 1.8;

  /* 影は“枠感”が出ない程度に最小限 */
  text-shadow: 0 2px 10px rgba(0,0,0,.28);
}

/* SP微調整 */
@media (max-width: 780px){
  .hero-benefits li{
    font-size: 13px;
    line-height: 1.7;
  }
}

/* =========================
   HERO (SP: awardを上げる + benefitsを上に)
========================= */
@media (max-width: 780px){

  /* ① メイン文字：少し上へ（被り回避） */
  .hero-inner{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height: calc(100svh - var(--header-h)) !important;
    padding-inline: 16px !important;

    /* 下のスタック領域ぶん、下側に余白を確保 */
    padding-bottom: 180px !important;  /* ←被りが残るなら 200〜240 に上げる */
  }
  .hero-copy{
    transform: translateY(-3vh) !important; /* ←上げ量。-2〜-5vhで微調整 */
    text-align:center !important;
    margin: 0 auto !important;
  }

  /* ② 右下スタック：縦積み（benefits → award）で右下固定 */
  .hero-right-stack{
    left: auto !important;
    right: 16px !important;

    /* 画面外に出ないように“少し上”へ */
    bottom: 26px !important;          /* ←ここを上げればさらに上に行く（例: 36px） */

    display:flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 10px !important;

    /* 既存のgrid化を確実に無効化 */
    grid-template-columns: initial !important;
    column-gap: initial !important;
    row-gap: initial !important;
  }

  /* benefits：awardの上（右寄せ） */
  .hero-benefits{
    width: auto !important;
    text-align: right !important;
  }
  .hero-benefits li{
    font-size: 13px !important;
    line-height: 1.7 !important;
  }

  /* award：右下、サイズも少し控えめにしてはみ出し防止 */
  .hero-award{
    width: clamp(92px, 24vw, 132px) !important;
  }
  .hero-award-label{
    font-size: 11px !important;
    white-space: nowrap;
  }

  /* ③ “絶対に画面外に出さない”保険（超小型端末向け） */
  @supports (bottom: max(0px)){
    .hero-right-stack{
      bottom: max(26px, env(safe-area-inset-bottom)) !important;
      right: max(16px, env(safe-area-inset-right)) !important;
    }
  }
}

/* =========================
   HERO (SP: awardをもっと上へ + benefits左揃え)
   ※CSSの一番最後に追記
========================= */
@media (max-width: 780px){

  /* 右下スタック：画面外に出ないように上げる */
  .hero-right-stack{
    left: auto !important;
    right: 16px !important;

    /* ★ここを上げる：まずは 60px 推奨（足りなければ 70/80） */
    bottom: 90px !important;

    display:flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 10px !important;
  }

  /* benefits：行頭を揃えるため左揃え（ブロックは右下に置く） */
  .hero-benefits{
    width: auto !important;
    text-align: left !important;   /* ★右寄せ→左寄せ */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 各行：①②③の開始位置を揃える */
  .hero-benefits li{
    font-size: 13px !important;
    line-height: 1.7 !important;
    letter-spacing: .02em;
    white-space: nowrap;           /* 変な折返しでズレないように */
  }

  /* award：サイズ少し控えめ（はみ出し防止） */
  .hero-award{
    width: clamp(92px, 24vw, 132px) !important;
  }

  /* 超小型端末の保険（セーフエリア対応） */
  @supports (bottom: max(0px)){
    .hero-right-stack{
      bottom: max(60px, env(safe-area-inset-bottom)) !important;
      right: max(16px, env(safe-area-inset-right)) !important;
    }
  }
}

/* =========================================
  HERO (PC): move main copy a bit upward
  Put at the VERY END of CSS
========================================= */
@media (min-width: 781px){
  .hero .hero-copy{
    margin-top: clamp(-56px, -4vh, -20px) !important;
  }
}

.hero{
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.30)),
    url("../img/hero-fabric.png") center / cover no-repeat !important;
}




/* =========================================================
   Section base
========================================================= */
.sec{padding:clamp(56px,8vw,96px) 0;background:transparent}
.sec + .sec{position:relative}
.sec + .sec::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.08),transparent)}
.sec-head{text-align:center;margin:0 0 clamp(18px,3vw,26px)}
.sec-idx{margin:0 0 .25em;color:var(--gold-3);font-family:"Shippori Mincho",serif;font-style:italic;letter-spacing:.03em}
.sec-ttl{margin:0;font-family:"Shippori Mincho",serif;font-size:clamp(22px,3.2vw,36px);line-height:1.7}

/* ★ sec-lead（余白を統一：下にしっかり間隔） */
.sec-lead{
  text-align:center;
  color:var(--gray-2);
  max-width:48em;
  margin:8px auto 22px;   /* ← 下の余白を確保 */
}

/* Gold underline */
.sec-head .sec-ttl{position:relative;padding-top:10px}
.sec-head .sec-ttl::before{
  content:"";position:absolute;left:50%;transform:translateX(-50%);top:0;
  width:min(600px,60vw);height:4px;border-radius:2px;
  background:linear-gradient(#c7a770,#c7a770) top/100% 1px no-repeat,
             linear-gradient(#e7d39b,#e7d39b) bottom/100% 1px no-repeat;
  opacity:.9;
}

/* =========================================================
   CTA：2ボタン（サロン見学 / LINE応募）
   - 背面 "Entry" は削除
========================================================= */

.hero-cta{
  background: transparent;
  border: none;
  padding-block: clamp(12px, 3vw, 24px);
}

.hero-cta__inner{
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: clamp(10px, 2vw, 18px);
  flex-wrap: wrap;
}

/* 共通ボタン */
.hero-cta__btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;

  min-width: clamp(220px, 22vw, 320px);
  padding: 1.05em 2.0em;
  border-radius: 999px;

  font-weight: 800;
  letter-spacing: .06em;
  text-decoration: none;

  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
  overflow: hidden;
}

/* 背面Entryは使わないので無効（保険） */
.hero-cta__btn::before{ content:none !important; }

.hero-cta__btn:hover{
  transform: translateY(-1px);
}

/* アイコン */
.hero-cta__icon{
  font-size: 1.05em;
  line-height: 1;
  display: inline-block;
  transform: translateY(1px);
}

/* ① サロン見学：白系（上品に） */
.hero-cta__btn--visit{
  color: #1f1a14;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    0 1px 0 rgba(255,255,255,.65) inset,
    0 14px 30px rgba(0,0,0,.14);
  backdrop-filter: blur(6px);
}
.hero-cta__btn--visit:hover{
  box-shadow:
    0 1px 0 rgba(255,255,255,.75) inset,
    0 18px 36px rgba(0,0,0,.18);
}

/* ② LINE応募：ゴールド系（少し色味差） */
.hero-cta__btn--line{
  color: #1f1a14;
  background: linear-gradient(180deg, #f3e7cc, #e6d09a 60%, #d9bf76);
  border: 1px solid rgba(169,139,88,.45);
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 16px 34px rgba(169,139,88,.22);
}
.hero-cta__btn--line:hover{
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 20px 40px rgba(169,139,88,.28);
}

/* LINEボタンだけ2行表示 */
.hero-cta__btntext{
  display: inline-grid;
  gap: .15em;
  text-align: left;
  letter-spacing: .04em;
}
.hero-cta__sub{
  font-size: 12px;
  font-weight: 800;
  opacity: .9;
}
.hero-cta__main{
  font-size: 15px;
  font-weight: 900;
}

/* SP：縦積みでフル幅寄り */
@media (max-width: 640px){
  .hero-cta__inner{
    flex-direction: column;
    align-items: center;
  }
  .hero-cta__btn{
    min-width: 86vw;
    padding: .95em 1.8em;
  }
  .hero-cta__btntext{ text-align: center; }
}

/* 共通ボタン：サイズを統一して横長に */
.hero-cta__btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* 中央寄せのため、内側は左アイコン + テキストの2カラム */
  gap: .75em;

  /* 横長 & 同サイズ */
  width: min(520px, 92%);
  min-height: 64px;                 /* 高さを固定寄りにして2つ揃える */
  padding: 0 2.2em;                  /* 高さはmin-heightで持つので上下paddingは不要 */

  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .06em;
  text-decoration: none;

  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
  overflow: hidden;
}

/* 背面Entryは無効（保険） */
.hero-cta__btn::before{ content:none !important; }

.hero-cta__btn:hover{ transform: translateY(-1px); }

/* アイコン枠：ここでサイズ統一 → 画像も文字もズレない */
.hero-cta__ico{
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 28px;
}

/* 画像を中央に固定 */
.hero-cta__ico img{
  display: block;
  width: 22px;          /* 好みで 20–24 */
  height: 22px;
  object-fit: contain;
}

/* 1行ボタン用（サロン見学） */
.hero-cta__label{
  display: inline-block;
  line-height: 1;
}

/* LINEボタンだけ2行表示：上下の中心も崩さない */
.hero-cta__btntext{
  display: inline-grid;
  gap: .18em;
  text-align: left;
  letter-spacing: .04em;
  line-height: 1.15;
}
.hero-cta__sub{
  font-size: 12px;
  font-weight: 800;
  opacity: .9;
}
.hero-cta__main{
  font-size: 16px;      /* 少し大きめ */
  font-weight: 900;
}

/* SP：縦積み + ほぼフル幅、同じ高さ維持 */
@media (max-width: 640px){
  .hero-cta__inner{
    flex-direction: column;
    align-items: center;
  }
  .hero-cta__btn{
    width: 86vw;
    min-height: 62px;
    padding: 0 1.8em;
  }
  .hero-cta__btntext{ text-align: center; }
}

/* ===== CTA矢印：画像の位置感に合わせる（矢印はabsolute） ===== */
.hero-cta__btn{
  position: relative;

  /* grid をやめて中央を“本当の中央”に */
  display: flex;
  align-items: center;
  justify-content: center;

  /* 右に矢印ぶんの余白を確保（中心ズレ防止） */
  padding-right: 72px;   /* ←矢印の領域。広めに確保 */
  padding-left: 2.2em;   /* ←左も少し余裕 */
}

/* ボタン内テキスト（1行/2行）を中央寄せ */
.hero-cta__label,
.hero-cta__btntext{
  text-align: center;
}

/* 右端の →：画像のように少し内側に固定 */
.hero-cta__btn::after{
  content: "→";
  position: absolute;
  right: 34px;           /* ←ここが“画像の位置感”。30〜40pxで調整 */
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  opacity: .95;
}

/* ホバーでちょい動き（任意） */
.hero-cta__btn::after{ transition: transform .12s ease; }
.hero-cta__btn:hover::after{
  transform: translateY(-50%) translateX(2px);
}

/* SPは少し内側量を減らす */
@media (max-width: 640px){
  .hero-cta__btn{ padding-right: 64px; }
  .hero-cta__btn::after{ right: 26px; }
}

/* =========================================
   CTA (SP確定版)：LINEを必ず2行 + 2ボタン同サイズ
   ※ style.css の一番最後に追記
========================================= */
@media (max-width: 640px){

  /* 2ボタンとも上のボタンと同じサイズ感に統一 */
  .hero-cta__btn{
    width: 86vw !important;
    min-height: 64px !important;
    padding: 14px 56px 14px 18px !important; /* 右は矢印分を確保 */
    border-radius: 999px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;

    position: relative !important;
    box-sizing: border-box !important;
  }

  /* 矢印（→）を右端に固定：中央ズレ防止 */
  .hero-cta__btn::after{
    content: "→" !important;
    position: absolute !important;
    right: 22px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    opacity: .95 !important;
  }

  /* 左アイコンは固定幅 */
  .hero-cta__ico{
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    display: grid !important;
    place-items: center !important;
  }
  .hero-cta__ico img{
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    object-fit: contain !important;
  }

  /* サロン見学（1行）は中央 */
  .hero-cta__label{
    text-align: center !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
  }

  /* LINEは「2行固定」：必ず縦積み */
  .hero-cta__btntext{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;

    text-align: center !important;
    line-height: 1.15 !important;
    min-width: 0 !important;
  }

  /* ★ここが肝：2行固定（折返し禁止） */
  .hero-cta__sub,
  .hero-cta__main{
    display: block !important;
    white-space: nowrap !important;
  }

  .hero-cta__sub{
    font-size: 12px !important;
    font-weight: 800 !important;
    opacity: .9 !important;
  }
  .hero-cta__main{
    font-size: 15px !important;
    font-weight: 900 !important;
  }
}

/* =========================================
   CTA：SPで2ボタンの“見た目(枠/影/ハイライト)”を完全統一
   ※ style.css の一番最後に置く
========================================= */
@media (max-width: 768px){

  /* ボタン自体を確実に中央寄せ */
  .hero-cta__inner{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* 2ボタン共通：サイズ・枠・影・ハイライトを同じにする */
  .hero-cta__btn{
    width: 86vw !important;
    min-height: 64px !important;
    padding: 14px 56px 14px 18px !important; /* 右は矢印領域 */
    box-sizing: border-box !important;

    border-radius: 999px !important;

    /* ★borderは使わない（サイズ差に見える原因） */
    border: 0 !important;

    /* ★枠線＋影を“同一のbox-shadow”に固定 */
    box-shadow:
      0 0 0 1px rgba(31,26,20,.12) inset,     /* 枠線 */
      0 1px 0 rgba(255,255,255,.72) inset,    /* 上の薄いハイライト */
      0 12px 26px rgba(0,0,0,.10) !important; /* 外側の影 */

    /* blurが残ると上だけリッチに見えるのでSPは切る */
    backdrop-filter: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;

    position: relative !important;
    overflow: hidden !important;
    margin-inline: auto !important;
  }

  /* 背面の何か（Entry等）を完全無効化 */
  .hero-cta__btn::before{
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    /* 2ボタンで同じ“面の艶”を足す（上だけ濃い問題を潰す） */
    background: linear-gradient(
      180deg,
      rgba(255,255,255,.35) 0%,
      rgba(255,255,255,.10) 45%,
      rgba(0,0,0,0) 100%
    ) !important;
    pointer-events: none !important;
  }

  /* 背景色だけ個別（効果は同一） */
  .hero-cta__btn--visit{
    background: rgba(255,255,255,.86) !important;
  }
  .hero-cta__btn--line{
    background: linear-gradient(180deg,#f3e7cc,#e6d09a 60%,#d9bf76) !important;
  }

  /* テキストは必ず前面 */
  .hero-cta__label,
  .hero-cta__btntext,
  .hero-cta__ico{
    position: relative !important;
    z-index: 1 !important;
  }

  /* 矢印：右端固定 */
  .hero-cta__btn::after{
    content: "→" !important;
    position: absolute !important;
    right: 22px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    opacity: .95 !important;
    z-index: 2 !important;
  }

  /* 上ボタン（1行）をLINEの主文と同じ見え方に */
  .hero-cta__label{
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  /* LINE：2行中央 */
  .hero-cta__btntext{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    text-align: center !important;
    line-height: 1.15 !important;
  }
  .hero-cta__sub,
  .hero-cta__main{
    display: block !important;
    white-space: nowrap !important;
  }
  .hero-cta__sub{ font-size: 12px !important; font-weight: 800 !important; opacity: .9 !important; }
  .hero-cta__main{ font-size: 15px !important; font-weight: 900 !important; }

  /* アイコン枠を固定 */
  .hero-cta__ico{
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    display: grid !important;
    place-items: center !important;
  }
  .hero-cta__ico img{
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    object-fit: contain !important;
  }
}




/* =========================================================
  Cards common
========================================================= */
.cards{list-style:none;display:grid;gap:clamp(14px,2vw,22px)}
.card{
  position:relative;background:var(--paper);
  border-radius:var(--r-md);
  box-shadow:var(--shadow);
  border:1px solid rgba(169,139,88,.25);
  padding:clamp(16px,2.4vw,22px);
}
.card-ttl{margin:0 0 .2em;font-family:"Shippori Mincho",serif;font-size:clamp(16px,2.1vw,20px)}
.card-txt{margin:0;color:var(--gray-2)}



/* =========================================================
  Points cards（同一サイズ・画像あり・中央寄せ）
========================================================= */

/* Grid */
.cards--points{grid-template-columns:repeat(3,minmax(220px,1fr))}
@media (max-width:980px){.cards--points{grid-template-columns:repeat(2,minmax(220px,1fr))}}
@media (max-width:600px){.cards--points{grid-template-columns:1fr}}

/* カード本体：同じ高さ＆中央寄せ */
.cards--points .card{
  display:flex;flex-direction:column;align-items:stretch;height:100%;
  text-align:center;
}

/* 番号バッジ */
.card--point .card-no{
  position:absolute;left:12px;top:12px;
  display:inline-grid;place-items:center;width:42px;height:42px;border-radius:10px;
  background:linear-gradient(180deg,#f2e5c6,#e7d39b);
  color:#3b2d14;font-weight:800;box-shadow:0 10px 22px rgba(169,139,88,.25);
  border:1px solid rgba(169,139,88,.55);
  z-index:2;
}

/* 画像：全カード同じ比率で揃える */
.card-fig{
  width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;
  margin:10px auto 12px;background:#f5f5f5;
}
.card-fig img{width:100%;height:100%;object-fit:cover;display:block}

/* タイトル：2行ぶん高さを固定 */
.card-ttl{
  margin:0 0 6px;line-height:1.6;min-height:calc(1.6em * 2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* 本文：3行ぶん高さを固定 */
.card-txt{
  margin:0;line-height:1.8;min-height:calc(1.8em * 3);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* ★ 以前の「番号用インデント」を解除（中央寄せがずれないように） */
.card--point .card-ttl,
.card--point .card-txt{padding-left:0}

/* タイトルを金色（強調はグラデ） */
.cards--points .card-ttl{ color: var(--gold-3); }
.cards--points .card-ttl strong{
  background: linear-gradient(180deg, var(--gold-2), var(--gold-3));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 説明文：100字前後を想定 → 行数を増やして高さも揃える */
.cards--points .card-txt{
  font-size: 0.98rem;
  line-height: 1.85;
  -webkit-line-clamp: 5;
  min-height: calc(1.85em * 5);
}

/* スマホは読みやすさ優先で1行増やす */
@media (max-width:640px){
  .cards--points .card-txt{
    -webkit-line-clamp: 6;
    min-height: calc(1.75em * 6);
    line-height: 1.75;
  }
}

/* Responsive line-height微調整 */
@media (max-width:640px){
  .card-ttl{line-height:1.5;min-height:calc(1.5em * 2)}
  .card-txt{line-height:1.7;min-height:calc(1.7em * 3)}
}

/* ===== Points: readable sizing on mobile ===== */
.cards--points .card-ttl{
  font-size: clamp(17px, 3.9vw, 20px);
  line-height: 1.6;
  min-height: calc(1.6em * 2);
}
.cards--points .card-txt{
  font-size: clamp(15px, 3.6vw, 16px);
  line-height: 1.8;
  -webkit-line-clamp: 5;
  min-height: calc(1.8em * 5);
}
@media (max-width: 640px){
  .cards--points .card-ttl{
    font-size: clamp(18px, 4.2vw, 20px);
    line-height: 1.55;
  }
  .cards--points .card-txt{
    font-size: clamp(15.5px, 3.9vw, 16.5px);
    line-height: 1.75;
    -webkit-line-clamp: 6;
    min-height: calc(1.75em * 6);
  }
}

/* ===== Points: モバイル時のタイプスケールをEducationと統一 ===== */
@media (max-width: 720px){
  .cards--points .card{ font-size: clamp(13.5px, 3.7vw, 15px); line-height: 1.75; }
  .cards--points .card-ttl{
    font-size: 1.06em; line-height: 1.55; min-height: calc(1.55em * 2);
  }
  .cards--points .card-ttl strong{ font-size: 1.02em; }
  .cards--points .card-txt{
    font-size: .98em; line-height: 1.72; -webkit-line-clamp: 6; min-height: calc(1.72em * 6);
  }
  .card--point .card-no{ transform: scale(.92); transform-origin: left top; }
}

/* カード全体をリンクとして扱う */
.card--point .card-wrap{
  display:block; color:inherit; text-decoration:none;
}
.card--point .card-wrap:focus-visible{
  outline:2px solid rgba(199,167,112,.6); outline-offset:4px;
}

/* ===== Pointsカード：ホバーでふわっと浮く演出 ===== */
.cards--points .card--point{
  position: relative; transition: transform .18s ease, box-shadow .18s ease;
}
.cards--points .card--point:hover,
.cards--points .card--point:focus-within{
  transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0,0,0,.16);
}

/* =========================================================
  Points（写真なしカード版の統一スタイル／FAQ風）
========================================================= */
:root{
  --gold-1:#c7a770;   /* main gold */
  --gold-2:#e2c98f;   /* light gold */
  --gold-3:#a98b58;   /* deep gold */
  --faq-head-h: 86px; /* 番号+タイトルブロックの高さ（下線位置固定） */
  --faq-btn-h: 44px;  /* ボタンの高さを統一 */
  --faq-btn-topgap: 10px; /* ボタン上に見せる余白 */
}

/* グリッド：各列のカードを同じ高さでストレッチ */
.cards--faq{
  display:grid;
  grid-template-columns:repeat(3,minmax(260px,1fr));
  gap:clamp(18px,2.8vw,28px);
  align-items:stretch;
}
@media (max-width: 980px){
  .cards--faq{ grid-template-columns:repeat(2,minmax(240px,1fr)); }
}
@media (max-width: 600px){
  .cards--faq{ grid-template-columns:1fr; }
}

/* 各カード内部はFlex縦並び＝高さ揃え＋ボタンを最下部へ */
.cards--faq .card{ height:100%; }
.cards--faq .card .card-wrap{
  height:100%;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap: var(--faq-btn-topgap);              /* ← ボタン上の余白を実レイアウトで確保 */
  padding:clamp(18px,2.2vw,22px);
  border-radius:14px; background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  border:1px solid rgba(169,139,88,.18);
}

/* 番号バッジ */
.cards--faq .card-no{
  display:inline-grid; place-items:center;
  width:46px; height:46px; border-radius:12px;
  background:linear-gradient(180deg,var(--gold-2),var(--gold-1));
  border:1px solid rgba(169,139,88,.55);
  color:#3b2d14; font-weight:800; margin-bottom:8px;
}

/* タイトル：金の下線を固定高さで表示 */
.cards--faq .card-ttl{
  position:relative; margin:0; padding-bottom:14px;
  display:flex; align-items:flex-end; justify-content:center;
  min-height:var(--faq-head-h);
  line-height:1.5; color:var(--gold-3); font-weight:800;
}
.cards--faq .card-ttl strong{
  background:linear-gradient(180deg,var(--gold-2),var(--gold-3));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.cards--faq .card-ttl::after{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:0; width:56%; height:2px;
  background:linear-gradient(90deg,var(--gold-2),var(--gold-3));
  border-radius:2px;
}

/* 本文：可変。余白は上側にのみ */
.cards--faq .card-txt{
  margin:12px 0 0; line-height:1.8; color:#555;
}

/* ボタン：高さを統一＆カード下端で揃える（重なり防止の確定版） */
.cards--faq .card-more{
  margin-top:auto;                                   /* 下寄せ */
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--faq-btn-h);                           /* 統一高さ */
  padding:0 30px;                                    /* 横長 */
  border:1px solid var(--gold-3); border-radius:999px;
  font-weight:700; color:#3b2d14; background:#fff;
  box-shadow:0 6px 14px rgba(169,139,88,.18);
}
.cards--faq .card-more::after{
  content:"›"; margin-left:10px; font-weight:900; color:var(--gold-3);
}

/* 既存の赤い下線や画像を消す（念のため） */
.cards--faq .card-fig{ display:none !important; }
.cards--faq .card-ttl{ border:0 !important; }

/* 端末が狭いときは余白を少し控えめに */
@media (max-width:600px){
  :root{ --faq-btn-topgap: 8px; }
}

/* ====== FAQカード：ボタンと本文の重なり対策（余白を増やす） ====== */

/* 余白量の基準を少し大きく */
:root{
  --faq-btn-topgap: 16px;   /* 旧: 10px → 16px に拡大 */
}

/* 本文の下側にも念のため余白を与える（長文カードのにじみ防止） */
.cards--faq .card-txt{
  margin-top: 14px;                 /* 旧: 12px */
  margin-bottom: var(--faq-btn-topgap);
}

/* ボタンは最下部固定 + 上に“確実な”間隔を追加 */
.cards--faq .card-more{
  margin-top: auto;                 /* 下寄せは維持 */
  /* 直上に最低限の間隔を確保（margin-bottom ではなく gap 非依存で担保） */
  /* ボタンの前に入る余白なので、視覚的に重なって見えない */
  --_btnTopSafe: 12px;
  position: relative;
  top: 0;                            /* 念のためのリセット */
}

/* 端末が狭い時は少し控えめに */
@media (max-width: 600px){
  :root{ --faq-btn-topgap: 12px; }
  .cards--faq .card-txt{ margin-top: 12px; }
}


/* 1) タイトル：高さ固定のまま縦中央揃え。下線用の余白は内側で確保 */
.cards--faq .card-ttl{
  display:flex !important;
  align-items:center !important;           /* 下揃え → 縦中央 */
  justify-content:center !important;
  height:var(--faq-head-h) !important;     /* 全カードで高さを必ず揃える */
  min-height:var(--faq-head-h) !important;
  box-sizing:border-box !important;        /* 内側に下線分の余白を収める */
  padding:0 8px 14px !important;           /* ← 下線のための下パディング（現状と揃える） */
  line-height:1.5 !important;
  text-align:center !important;
  overflow:hidden !important;              /* テキストが下線に重ならない保険 */
}

/* 2) 金色の下線：現状と同じ“下端位置・太さ”で固定（高さは全カード一致） */
.cards--faq .card-ttl::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important; transform:translateX(-50%) !important;
  bottom:0 !important;
  width:56% !important;
  height:2px !important;                   /* 現状の線の太さに合わせる */
  background:linear-gradient(90deg,var(--gold-2),var(--gold-3)) !important;
  border-radius:2px !important;
  pointer-events:none;
}

/* 3) バッジとタイトルの干渉を避ける（環境差で潰れる場合の安全マージン） */
.cards--faq .card-no{ margin-bottom:10px !important; }  /* 旧: 8px → 10px（わずかに増） */

/* =========================================================
   Points / FAQ cards：枠（箱）を完全に撤去 + セクション上padding追加
   ※CSSの一番最後に追記
========================================================= */

/* セクション上側に余白を追加 */
#olive-points{
  padding-top: clamp(56px, 8vw, 96px);
}

/* カードの“箱”を完全に消す（背景/影/角丸/枠線なし） */
.cards--faq .card .card-wrap{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  /* 見た目は箱なしでも、読みやすい余白は確保 */
  padding: clamp(14px, 2vw, 18px) 0 !important; /* 左右は0でスッキリ */
  gap: 0 !important;
}

/* カード間の余白はグリッドgapで作る（既存gapは生かす） */
.cards--faq{
  gap: clamp(22px, 3.4vw, 36px) !important;
}

/* 番号：余白を広げて詰まり解消（バッジの枠も消す） */
.cards--faq .card-no{
  margin-bottom: 14px !important;
  border: 0 !important;
  box-shadow: none !important;      /* バッジも“箱感”を消すなら */
}

/* タイトル下線は残しつつ、余白を整える */
.cards--faq .card-ttl{
  padding: 0 0 14px !important;
  margin: 0 !important;
}

/* 本文の上余白を少し増やす */
.cards--faq .card-txt{
  margin-top: 16px !important;
}

/* =========================================================
   FAQカード：要素間の余裕（縦リズム）をまとめて改善
   ※CSSの一番最後に追記
========================================================= */

/* セクション上＋リード下に余白 */
#olive-points{
  padding-top: clamp(64px, 9vw, 110px) !important;
}
#olive-points .sec-lead{
  margin-bottom: clamp(26px, 3.6vw, 46px) !important;
}

/* グリッド間隔（カード同士） */
.cards--faq{
  gap: clamp(28px, 4vw, 52px) !important;
}

/* 枠（箱）は無しのまま、カード内は余白だけ増やす */
.cards--faq .card .card-wrap{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  /* “カード内の上下余白”を増やして、呼吸を作る */
  padding: clamp(22px, 3vw, 32px) 0 !important;

  /* flex縦積み前提 */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

/* 番号→タイトル */
.cards--faq .card-no{
  margin: 0 0 clamp(16px, 2.3vw, 22px) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* タイトル周り：下線まで余白を増やす */
.cards--faq .card-ttl{
  margin: 0 !important;
  padding: 0 0 clamp(20px, 2.8vw, 30px) !important; /* ←下線まで余裕 */
  height: auto !important;
  min-height: 0 !important;
}

/* 下線は少し呼吸のある幅に */
.cards--faq .card-ttl::after{
  width: min(200px, 58%) !important;
}

/* 下線→説明（ここが詰まりやすい） */
.cards--faq .card-txt{
  margin: clamp(18px, 2.6vw, 28px) 0 0 !important;  /* ←上にしっかり余白 */
  line-height: 1.9 !important;
}

/* 説明→ボタン（もっと見る） */
.cards--faq .card-more{
  margin-top: clamp(22px, 3vw, 36px) !important;    /* ←ここで余裕を作る */
  margin-bottom: 0 !important;
}

/* 「もっと見る」をリンク風のまま、少し存在感を整える（任意） */
.cards--faq .card-more{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;

  text-decoration: underline;
  text-underline-offset: 5px;
}

/* =========================================================
   FAQカード：ボタンは“デザインそのまま” + 下揃え（最下部で揃える）
   ※CSSの一番最後に追記
========================================================= */

/* カード全体を同じ高さで揃える前提 */
.cards--faq .card{
  height: 100%;
}

/* card-wrap を縦flexにして、ボタンだけ最下部へ */
.cards--faq .card .card-wrap{
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
}

/* 本文とボタンが近く見えないよう、本文の下に少し余白 */
.cards--faq .card-txt{
  margin-bottom: clamp(18px, 2.6vw, 30px) !important;
}

/* ボタン：下揃え（下に押し付け） */
.cards--faq .card-more{
  margin-top: auto !important;              /* ←これで必ず最下部へ */
  align-self: center;                       /* 中央寄せ維持 */
}

/* もし以前の「リンク風」上書きが残っていて崩れる場合の保険：
   ボタンデザインを“元の見た目”に戻す（あなたが良いと言ってたデザイン） */
.cards--faq .card-more{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: var(--faq-btn-h) !important;
  padding: 0 30px !important;

  border: 1px solid var(--gold-3) !important;
  border-radius: 999px !important;
  background: #fff !important;

  box-shadow: 0 6px 14px rgba(169,139,88,.18) !important;

  text-decoration: none !important;         /* ←下線を消す */
}

/* =========================================================
   FAQカード：余白を“もう一段だけ”増やす（前回修正は維持）
   ※CSSの一番最後に追記
========================================================= */

/* セクションの上余白を少し増やす */
#olive-points{
  padding-top: clamp(72px, 10vw, 128px) !important;
}

/* リード文の下余白を少し増やす */
#olive-points .sec-lead{
  margin-bottom: clamp(34px, 4.2vw, 56px) !important;
}

/* カード同士の余白を少し増やす */
.cards--faq{
  gap: clamp(34px, 4.8vw, 60px) !important;
}

/* カード内（枠なしのまま）上下の余白を少し増やす */
.cards--faq .card .card-wrap{
  padding-top: clamp(26px, 3.4vw, 38px) !important;
  padding-bottom: clamp(26px, 3.4vw, 38px) !important;
}

/* 番号→タイトルの距離 */
.cards--faq .card-no{
  margin-bottom: clamp(18px, 2.6vw, 26px) !important;
}

/* タイトル下線までの余白（＝アンダーバー周りに呼吸） */
.cards--faq .card-ttl{
  padding-bottom: clamp(24px, 3.2vw, 38px) !important;
}

/* 下線→本文の余白 */
.cards--faq .card-txt{
  margin-top: clamp(22px, 3vw, 34px) !important;
  margin-bottom: clamp(22px, 3vw, 34px) !important; /* ボタンとの距離も確保 */
}

/* ボタンは下揃えのまま、上に“最低限の間隔”を足す（autoを壊さない） */
.cards--faq .card-more{
  padding-top: clamp(10px, 1.6vw, 16px) !important;
}

/* =========================================================
  #olive-points FAQ cards：リンク/ボタン無し版（幅UP・余白UP・タイトル1行）
  ※CSSの一番最後に追記
========================================================= */

/* セクション内コンテナを少しだけ広げる（カード横幅を確保） */
#olive-points .container{
  max-width: 1240px;
}

/* グリッド：カードを少し横長に */
#olive-points .cards--faq{
  display: grid;
  grid-template-columns: repeat(3, minmax(320px, 1fr));
  gap: clamp(22px, 3vw, 36px);
  align-items: stretch;
}

@media (max-width: 1100px){
  #olive-points .cards--faq{
    grid-template-columns: repeat(2, minmax(320px, 1fr));
  }
}
@media (max-width: 720px){
  #olive-points .cards--faq{
    grid-template-columns: 1fr;
  }
}

/* 外側liは“枠”として使わず、中の .card-wrap をカード本体にする */
#olive-points .cards--faq .card{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* カード本体（余白多め＆呼吸） */
#olive-points .cards--faq .card-wrap{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  background: #fff;
  border: 1px solid rgba(169,139,88,.18);
  border-radius: 18px;
  box-shadow: var(--shadow);

  /* カード内余白：上下を特に厚めに */
  padding: clamp(30px, 3.2vw, 44px) clamp(22px, 2.4vw, 30px);
}

/* 番号 */
#olive-points .cards--faq .card-no{
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  margin: 0 0 clamp(18px, 2.4vw, 26px);

  background: linear-gradient(180deg, var(--gold-2, #e2c98f), var(--gold-1, #c7a770));
  border: 1px solid rgba(169,139,88,.55);
  color: #3b2d14;
  font-weight: 800;
}

/* タイトル：1行固定（はみ出すなら…で省略） */
#olive-points .cards--faq .card-ttl{
  position: relative;
  margin: 0;
  padding: 0 10px clamp(18px, 2.2vw, 26px);
  font-family: "Shippori Mincho", serif;
  font-weight: 800;
  color: var(--gold-3, #a98b58);

  /* ★1行固定 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* 横長になった分に合わせて微調整 */
  font-size: clamp(16px, 1.45vw, 20px);
  letter-spacing: .02em;
  line-height: 1.35;
}

#olive-points .cards--faq .card-ttl::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  width: min(220px, 62%);
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--gold-2, #e2c98f), var(--gold-3, #a98b58));
}

/* 本文：上余白をしっかり */
#olive-points .cards--faq .card-txt{
  margin: clamp(18px, 2.4vw, 28px) 0 0;
  color: var(--gray-2, #666);
  line-height: 1.9;
  font-size: 0.98rem;
}

/* “もっと見る”が残ってたら強制的に非表示 */
#olive-points .cards--faq .card-more{
  display: none !important;
}

/* =========================================================
  #olive-points FAQ cards：余白を増やして“呼吸”を作る（最終上書き）
  - 目的：カード枠と文字の距離を広げる / 要素同士の間隔を確保
  - 影響範囲：#olive-points の cards--faq のみ
========================================================= */

/* セクション上下の余白（詰まり感の解消） */
#olive-points{
  padding-block: clamp(72px, 9vw, 120px) !important;
}

/* リード文の下にしっかり余白 */
#olive-points .sec-lead{
  margin: 0 auto clamp(30px, 4vw, 56px) !important;
  max-width: 72ch;
}

/* カード同士の余白（グリッドの“空気”） */
#olive-points .cards--faq{
  gap: clamp(22px, 3vw, 40px) !important;
}

/* 外側 li.card は“枠”にしない（枠/余白の二重取りを防止） */
#olive-points .cards--faq .card{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* カード本体＝.card-wrap に集約（ここで余白を作る） */
#olive-points .cards--faq .card-wrap{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  /* 枠 */
  background: #fff !important;
  border: 1px solid rgba(236,224,208,.95) !important;   /* ③の #ECE0D0 寄り */
  border-radius: 18px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.06) !important;

  /* ★ここが効く：カード内余白を増やす（上下を特に厚め） */
  padding: clamp(32px, 3.4vw, 46px) clamp(22px, 2.6vw, 32px) !important;

  /* 要素間の間隔（詰まり感の主因） */
  gap: clamp(14px, 1.6vw, 18px) !important;
}

/* 番号バッジ：下の余白を増やして“窮屈”を解消 */
#olive-points .cards--faq .card-no{
  margin: 0 0 clamp(10px, 1.4vw, 14px) !important;
}

/* タイトル：下線との距離を確保して、上下に余裕 */
#olive-points .cards--faq .card-ttl{
  margin: 0 !important;
  padding: 0 8px clamp(18px, 2.2vw, 26px) !important; /* 下線まで余白 */
  line-height: 1.45 !important;
}

/* 下線は少し下に“落として”余白感を出す */
#olive-points .cards--faq .card-ttl::after{
  bottom: 0 !important;
  width: min(220px, 62%) !important;
  opacity: .95;
}

/* 本文：行間と上余白を増やす（文字が詰まって見える対策） */
#olive-points .cards--faq .card-txt{
  margin: clamp(10px, 1.6vw, 16px) 0 0 !important;
  line-height: 1.95 !important;
  letter-spacing: .01em;
  color: var(--gray-2, #6f6760) !important;
}

/* スマホ：左右余白は保ちつつ少しだけ詰める */
@media (max-width: 640px){
  #olive-points .cards--faq .card-wrap{
    padding: 28px 18px !important;
    gap: 14px !important;
  }
  #olive-points .cards--faq .card-txt{
    line-height: 1.9 !important;
  }
}

/* =========================================================
  #olive-points：余白をさらに増やす（縦長OK版）
  ※CSSの一番最後に追記
========================================================= */

/* セクション上下も少し増やす（全体の呼吸） */
#olive-points{
  padding-block: clamp(84px, 10vw, 140px) !important;
}

/* カード同士の間隔も広げる */
#olive-points .cards--faq{
  gap: clamp(26px, 3.6vw, 52px) !important;
}

/* カード本体：上下paddingを増やして縦長に */
#olive-points .cards--faq .card-wrap{
  padding: clamp(42px, 4.4vw, 64px) clamp(24px, 2.8vw, 36px) !important;
  gap: clamp(18px, 2.1vw, 24px) !important; /* 要素間の余裕UP */
  min-height: clamp(420px, 34vw, 520px);    /* 縦長を安定させる */
}

/* 番号→タイトル：もう少し空ける */
#olive-points .cards--faq .card-no{
  margin-bottom: clamp(14px, 2vw, 20px) !important;
}

/* タイトル：下線までの余白を増やす（=タイトルと本文の距離も稼げる） */
#olive-points .cards--faq .card-ttl{
  padding-bottom: clamp(24px, 3vw, 38px) !important; /* ←ここが効く */
  line-height: 1.5 !important;
}

/* 本文：タイトル下線からの距離を増やす */
#olive-points .cards--faq .card-txt{
  margin-top: clamp(18px, 2.6vw, 30px) !important;  /* ←ここが効く */
  line-height: 2.0 !important;
}

/* スマホ：縦長になりすぎない程度に調整 */
@media (max-width: 640px){
  #olive-points .cards--faq .card-wrap{
    padding: 34px 20px !important;
    min-height: auto; /* スマホは自然な高さでOK */
  }
  #olive-points .cards--faq .card-ttl{
    padding-bottom: 24px !important;
  }
  #olive-points .cards--faq .card-txt{
    margin-top: 18px !important;
    line-height: 1.9 !important;
  }
}

/* =========================================================
  #olive-points：枠っぽさを消して “Rich” にする
  ※CSSの一番最後に追記
========================================================= */

#olive-points .cards--faq .card-wrap{
  /* 枠線は消す（もしくは限界まで薄く） */
  border: 0 !important;

  /* 背景は真っ白→ほんのり温かい白へ（配色③に馴染ませる） */
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,240,232,.85)) !important;

  /* 影はレイヤーで“奥行き”を作る（安っぽい外枠感を避ける） */
  box-shadow:
    0 28px 70px rgba(0,0,0,.10),
    0 10px 22px rgba(0,0,0,.06),
    0 1px 0 rgba(255,255,255,.75) inset !important;

  border-radius: 22px !important;
  position: relative;
  overflow: hidden; /* ハイライトを綺麗に */
}

/* 上からの柔らかいハイライト（高級感の“艶”） */
#olive-points .cards--faq .card-wrap::before{
  content:"";
  position:absolute;
  inset: 0;
  background:
    radial-gradient(1200px 300px at 50% 0%,
      rgba(255,255,255,.75),
      rgba(255,255,255,0) 60%);
  pointer-events:none;
  opacity: .65;
}

/* うっすら輪郭を“影”で作る（線じゃなく空気感） */
#olive-points .cards--faq .card-wrap::after{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: 21px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.55) inset;
  pointer-events:none;
  opacity: .55;
}

/* 番号バッジも枠を弱める（ゴツいと安く見えやすい） */
#olive-points .cards--faq .card-no{
  border: 0 !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,.10),
    0 1px 0 rgba(255,255,255,.65) inset !important;
}

/* ついで：タイトル下線も“線”を柔らかく（細く・短く） */
#olive-points .cards--faq .card-ttl::after{
  height: 2px !important;
  opacity: .85;
  width: min(180px, 56%) !important;
  filter: blur(.2px);
}

/* =========================================================
  #olive-points：スマホだけ「1枚表示」横スクロール + サイズ統一
  ※ style.css の一番最後に追記（既存デザインはPC側に影響なし）
========================================================= */
@media (max-width: 720px){

  /* 横スクロールの見た目は“1枚が必ずぴったり表示” */
  #olive-points .cards--faq{
    display: flex !important;
    flex-wrap: nowrap !important;

    gap: 0 !important;                  /* ← チラ見えの原因になるので0 */
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;
    scroll-padding: 0;

    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  /* 1カード＝ビューポート幅ぴったり */
  #olive-points .cards--faq > .card{
    flex: 0 0 100% !important;          /* ← 必ず1枚 */
    width: 100% !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;

    /* 左端が覗くのを防止（既存の余白/transformなどがあっても吸収） */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* “カードの大きさ”を統一：中身量で高さが変わらないようにする */
  #olive-points .cards--faq > .card .card-wrap{
    /* 既存のデザイン（背景/枠/影/余白）は触らない */
    box-sizing: border-box;

    /* 高さを統一（画面に対しての比率で安定） */
    min-height: 72vh;                   /* ← 好みで 68〜76vh あたり */
    height: 72vh;

    /* 中身が多いカードだけスクロールできるように（レイアウトは崩さない） */
    overflow: auto;

    /* 左右に同じ余白を付けたい場合（既存に合わせて調整OK） */
    padding-left: 18px;
    padding-right: 18px;
  }

  /* スクロールバーを消す（対応ブラウザのみ） */
  #olive-points .cards--faq{
    scrollbar-width: none;
  }
  #olive-points .cards--faq::-webkit-scrollbar{
    display: none;
  }
}

/* =========================================================
  #olive-points：スマホ 1枚表示 + 小さめ + 影なし（追記/上書き）
========================================================= */
@media (max-width: 720px){

  /* カード本体：高さを小さくして下の余白を減らす */
  #olive-points .cards--faq > .card .card-wrap{
    height: 62vh !important;        /* 旧: 72vh → 小さめ */
    min-height: 62vh !important;

    /* 下が空きすぎるなら、上下paddingも少し絞る */
    padding-top: 22px !important;
    padding-bottom: 22px !important;

    /* スマホは影を消す */
    box-shadow: none !important;
  }

  /* 影が疑似要素で出てる場合も消す（念のため） */
  #olive-points .cards--faq > .card .card-wrap::before,
  #olive-points .cards--faq > .card .card-wrap::after{
    content: none !important;
  }
}

/* =========================================================
  #olive-points：スマホだけ「影なし＋枠線くっきり」（PCは影響なし）
========================================================= */
@media (max-width: 720px){

  /* カード本体 */
  #olive-points .cards--faq > .card .card-wrap{
    height: 62vh !important;
    min-height: 62vh !important;

    padding: 22px 18px !important;
    border-radius: 22px !important;

    /* 影を消す */
    box-shadow: none !important;

    /* 背景はフラット寄り（カード感は残す） */
    background: #fbf7ef !important;

    /* 枠線をしっかり出す */
    border: 2px solid rgba(169,139,88,.35) !important;

    position: relative !important;
    overflow: hidden !important;
  }

  /* 高級感の“艶”は残す（ただし薄め） */
  #olive-points .cards--faq > .card .card-wrap::before{
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    background: radial-gradient(
      900px 260px at 50% 0%,
      rgba(255,255,255,.55),
      rgba(255,255,255,0) 62%
    ) !important;
    pointer-events: none !important;
    opacity: .45 !important;
  }

  /* 内側の白い細線（枠線が綺麗に見える） */
  #olive-points .cards--faq > .card .card-wrap::after{
    content: "" !important;
    position: absolute !important;
    inset: 2px !important; /* 外枠2pxに合わせる */
    border-radius: calc(22px - 2px) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.55) inset !important;
    pointer-events: none !important;
    opacity: .65 !important;
  }
}

/* =========================================================
  #olive-points：SPのみ カード同士の余白を少し開ける
  + 色/枠は“さっきの”状態を維持
  ※CSSの一番最後に追記
========================================================= */
@media (max-width: 720px){

  /* 余白量（ここだけ好みで微調整OK） */
  #olive-points{ --op-gap: 16px; }

  /* 横スクロール1枚表示は維持しつつ、カード同士の間隔だけ作る */
  #olive-points .cards--faq{
    gap: var(--op-gap) !important;                 /* ←カード同士の余白 */
    padding-inline: var(--op-gap) !important;      /* ←左右にも余白 */
    scroll-padding-left: var(--op-gap) !important;
    scroll-padding-right: var(--op-gap) !important;
  }

  /* 1枚表示を崩さない（左右padding分だけカードを小さくする） */
  #olive-points .cards--faq > .card{
    flex: 0 0 calc(100% - 32px) !important;        /* 16px*2 = 32px */
    width: calc(100% - 32px) !important;
  }

  /* “さっきの”カード色＆枠（SPのみ） */
  #olive-points .cards--faq > .card .card-wrap{
    background: #fbf7ef !important;
    border: 2px solid rgba(169,139,88,.35) !important;
    box-shadow: none !important;
  }
}



/* =========================================================
  Career diagram（全体表示＋背景色合わせ）
========================================================= */

/* 説明文の余白 */
.career .career-lead{
  margin-top: 10px;
  margin-bottom: 14px;
}

/* 図（画像）コンテナ */
.career-fig{
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(169,139,88,.18);
  box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.06));

  /* ★背景を白にしない：セクション背景に馴染ませる */
  background: transparent;      /* まず透過 */
  /* もしセクションの背景色が決まってるなら下で上書きOK */
  /* background: #f5f5f5; */   /* ←careerセクションの背景と同じ色に */

  position: relative;           /* プレースホルダー用 */
}

/* ★画像は縦横比を保ったまま全体表示 */
.career-fig img{
  width: 100%;
  height: auto;                /* これでトリミングが消える */
  display: block;
  object-fit: contain;         /* 念のため（height:autoなので効きにくいが安全） */
  background: transparent;     /*画像の周りも透過*/
  position: relative;
  z-index: 1;
}

/* 画像未設定時のプレースホルダー（画像の背面に敷く） */
.career-fig__ph{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #d9d9d9, #d0d0d0);
  z-index: 0;
}

/* 図を少し小さくして中央寄せ */
.career-fig{
  width: min(100%, 960px);  /* ← 最大幅を調整（例: 900〜1000pxくらい） */
  margin: 0 auto;           /* 中央寄せ */
}

/* さらに小さめにしたい場合はこっちでもOK */
@media (min-width: 768px){
  .career-fig{
    width: min(100%, 700px);  /* PC時だけもう少し小さく */
  }
}

/* =========================================================
  Career：各項目の余白を“ゆったり”させる（追記用）
  ※CSSの一番最後に置く
========================================================= */

/* セクション自体の上下余白（上も下も増やす） */
#career.sec.career{
  padding-top: clamp(72px, 10vw, 120px) !important;
  padding-bottom: clamp(72px, 10vw, 120px) !important;
}

/* 見出しブロック内の間隔を調整 */
#career .sec-head{
  margin-bottom: clamp(26px, 4.2vw, 56px) !important;
}

/* 「02.Steps」とタイトルの距離 */
#career .sec-idx{
  margin-bottom: clamp(12px, 1.8vw, 18px) !important;
}

/* タイトルと説明文の距離 */
#career .sec-ttl{
  margin-bottom: clamp(16px, 2.6vw, 26px) !important;
}

/* 説明文（career-lead）の上下余白を増やす */
.career .career-lead{
  margin-top: 0 !important;
  margin-bottom: clamp(28px, 4.2vw, 56px) !important;
  line-height: 1.9 !important;  /* 詰まり感を減らす */
}

/* 図（画像）コンテナ：上の余白＋中央寄せを維持 */
#career .career-fig{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  width: min(100%, 960px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 図の“枠線”が不要なら消す（安っぽさ回避） */
#career .career-fig{
  border: none !important;
  box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.06)) !important; /* 影は残す */
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* 画像の上下に呼吸を作りたい場合（必要なら） */
#career .career-fig img{
  display: block;
}

/* PCだけ少し小さめ（今の方針のまま） */
@media (min-width: 768px){
  #career .career-fig{
    width: min(100%, 760px) !important; /* 700だと小さすぎるなら760くらいが無難 */
  }
}


/* =========================================================
  Education system（メリハリ強めバージョン）
========================================================= */

/* 全体グリッド：1列だが、各行は左右2カラム */
.edu-grid--wide{
  display:grid;
  grid-template-columns:1fr;
  row-gap:clamp(28px,4vw,40px);
}

/* ---------- 行全体（画像＋テキスト） ---------- */
.edu-item--h{
  display:grid;
  grid-template-columns:minmax(260px,40%) 1fr; /* 左：画像 / 右：テキスト */
  column-gap:clamp(22px,3.4vw,34px);
  align-items:stretch;
}

/* 交互レイアウト（画像右） */
.edu-item--rev{
  grid-template-columns:1fr minmax(260px,40%);
}
.edu-item--rev .edu-media{ order:2; }
.edu-item--rev .edu-body { order:1; }

/* ---------- 画像側 ---------- */
.edu-media{
  align-self:stretch;
  border-radius:18px;
  overflow:hidden;
  background:#f5f3ee;
  box-shadow:0 18px 40px rgba(0,0,0,.10);
}
.edu-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:scale(1.02);
}

/* ---------- テキスト側 ---------- */
.edu-body{
  position:relative;
  align-self:stretch;
  background:#ffffff;
  border-radius:18px;
  padding:clamp(18px,2.6vw,24px) clamp(18px,3vw,28px);
  box-shadow:0 18px 40px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
  justify-content:center;
  row-gap:.4em;
}

/* 左端のゴールドライン（メリハリ用） */
.edu-body::before{
  content:"";
  position:absolute;
  left:0;
  top:16px;
  bottom:16px;
  width:4px;
  border-radius:999px;
  background:linear-gradient(180deg,#e7d39b,#c7a770);
}

/* ---------- STEP行 ---------- */
.edu-step{
  margin:0 0 .3em;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  column-gap:.55em;
  row-gap:.25em;
  font-weight:700;
  color:#2b2620;
}

/* “STEP 1”バッジ */
.step-badge{
  display:inline-grid;
  place-items:center;
  min-width:76px;
  height:28px;
  padding:0 .7em;
  border-radius:999px;
  background:linear-gradient(180deg,#f2e5c6,#e7d39b);
  border:1px solid rgba(169,139,88,.65);
  color:#3b2d14;
  font-size:.82rem;
  letter-spacing:.08em;
}

/* 期間コピー：見本の青見出しポジション → 金色系で強めに */
.step-time{
  font-family:"Shippori Mincho",serif;
  font-size:clamp(17px,2vw,19px);
  color:#a98b58;
  white-space:nowrap;
  word-break:keep-all;
}

/* 補足ノートがあれば少しだけ控えめに */
.step-note{
  font-size:.9rem;
  font-weight:600;
  color:#6b645a;
  white-space:nowrap;
}

/* ---------- 本文 ---------- */
.edu-txt{
  margin:.2em 0 0;
  color:var(--gray-2);
  line-height:1.9;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:5;          /* PCは5行までで揃える */
  overflow:hidden;
}

/* =========================================================
   Responsive
========================================================= */

/* タイプスケールを他セクションと揃えつつ、読みやすさ優先 */
@media (max-width:720px){

  /* 行レイアウト → 縦積み（画像 → テキスト） */
  .edu-item--h{
    grid-template-columns:1fr;
    row-gap:12px;
  }
  .edu-item--rev .edu-media{ order:1; }
  .edu-item--rev .edu-body { order:2; }

  /* モバイルでは画像カードとテキストカードの影を少し弱めに */
  .edu-media,
  .edu-body{
    box-shadow:0 14px 28px rgba(0,0,0,.08);
  }

  .edu-body{
    padding:clamp(16px,4vw,20px) clamp(16px,5vw,22px);
  }

  /* ベースフォント */
  .edu-item--h .edu-body{
    font-size:clamp(13.5px,3.7vw,15px);
    line-height:1.75;
  }

  /* STEP行 */
  .edu-step{
    font-size:.95em;
  }
  .step-badge{
    min-width:68px;
    height:26px;
    font-size:.78rem;
  }
  .step-time{
    font-size:1.06em;
  }
  .step-note{
    font-size:.93em;
  }

  /* 本文は全文表示（クリップ解除） */
  .edu-txt{
    display:block !important;
    -webkit-line-clamp:unset !important;
    overflow:visible !important;
    max-height:none !important;
    font-size:.95em;
    line-height:1.75;
  }
}

/* さらに大きいPCでは少しだけ余白を広げる */
@media (min-width:1040px){
  .edu-item--h{
    column-gap:40px;
  }
}/* ---------- STEP行 ---------- */
.edu-step{
  margin:0 0 .3em;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  column-gap:.55em;
  row-gap:.25em;
  font-weight:700;
  color:#2b2620;
}

/* “STEP 1 / 2 / 3” バッジ */
.step-badge{
  display:inline-grid;
  place-items:center;
  min-width:76px;
  height:28px;
  padding:0 .7em;
  border-radius:999px;
  background:linear-gradient(180deg,#f2e5c6,#e7d39b);
  border:1px solid rgba(169,139,88,.65);
  color:#3b2d14;
  font-size:.82rem;
  letter-spacing:.08em;
}

/* 期間コピー：金色 → 落ち着いたブルーに変更 */
.step-time{
  font-family: "Shippori Mincho", serif;
  font-size: clamp(17px, 2vw, 19px);
  color: #4b73b7;           /* 落ち着いた青 */
  font-weight: 800;         /* ★太文字に変更 */
  white-space: nowrap;
  word-break: keep-all;
}


/* 補足ノートがあれば少しだけ控えめに */
.step-note{
  font-size:.9rem;
  font-weight:600;
  color:#6b645a;
  white-space:nowrap;
}

/* ---------- テキスト側（カード） ---------- */
.edu-body{
  position:relative;
  align-self:stretch;
  background:#ffffff;
  border-radius:18px;
  padding:clamp(18px,2.6vw,24px) clamp(18px,3vw,28px);
  box-shadow:0 18px 40px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
  justify-content:center;
  row-gap:.4em;
}

/* 左端ゴールドバー（STEP1・3用） */
.edu-body::before{
  content:"";
  position:absolute;
  left:0;
  top:16px;
  bottom:16px;
  width:4px;
  border-radius:999px;
  background:linear-gradient(180deg,#e7d39b,#c7a770);
}

/* STEP2（左右反転カード）はバーを右側に配置 */
.edu-item--rev .edu-body::before{
  left:auto;
  right:0;
}

/* ---------- 本文 ---------- */
.edu-txt{
  margin:.2em 0 0;
  color:var(--gray-2);
  line-height:1.9;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:5;
  overflow:hidden;
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width:720px){
  /* 行レイアウト → 縦積み（画像 → テキスト） */
  .edu-item--h{
    grid-template-columns:1fr;
    row-gap:12px;
  }
  .edu-item--rev .edu-media{ order:1; }
  .edu-item--rev .edu-body { order:2; }

  .edu-media,
  .edu-body{
    box-shadow:0 14px 28px rgba(0,0,0,.08);
  }

  .edu-body{
    padding:clamp(16px,4vw,20px) clamp(16px,5vw,22px);
  }

  /* ★スマホではゴールドバーを全て非表示 */
  .edu-body::before{
    content:none !important;
  }

  /* ベースフォント */
  .edu-item--h .edu-body{
    font-size:clamp(13.5px,3.7vw,15px);
    line-height:1.75;
  }

  /* STEP行 */
  .edu-step{
    font-size:.95em;
  }
  .step-badge{
    min-width:68px;
    height:26px;
    font-size:.78rem;
  }
  .step-time{
    font-size:1.06em;
  }
  .step-note{
    font-size:.93em;
  }

  /* 本文は全文表示 */
  .edu-txt{
    display:block !important;
    -webkit-line-clamp:unset !important;
    overflow:visible !important;
    max-height:none !important;
    font-size:.95em;
    line-height:1.75;
  }
}

/* =========================================================
  EDUCATION SYSTEM：余白増し + 黒文字化 + 枠線撤去（Rich版）
  ※CSSの一番最後に追記
========================================================= */

/* セクション上下の余白をしっかり確保 */
#edu-system.sec.edu-system{
  padding-top: clamp(72px, 10vw, 128px) !important;
  padding-bottom: clamp(72px, 10vw, 128px) !important;
}

/* 見出しブロック（idx/ttl/lead）の間隔を広げる */
#edu-system .sec-head{
  margin-bottom: clamp(34px, 5vw, 72px) !important;
}
#edu-system .sec-idx{
  margin-bottom: clamp(12px, 1.8vw, 18px) !important;
}
#edu-system .sec-ttl{
  margin-bottom: clamp(16px, 2.6vw, 26px) !important;
}
#edu-system .sec-lead{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.9 !important;
}

/* 各STEPの縦間隔（行同士の余白） */
.edu-grid--wide{
  row-gap: clamp(40px, 5.6vw, 72px) !important;
}

/* 画像↔テキストの間隔 */
.edu-item--h{
  column-gap: clamp(28px, 4.4vw, 56px) !important;
}

/* ---------- 画像カード：枠線なし + 影を上品に ---------- */
.edu-media{
  border: none !important;                 /* 枠線を消す */
  background: #f6f3ec !important;          /* ほんのり暖色でリッチに */
  border-radius: 20px !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.10) !important;
}
.edu-media img{
  transform: none !important;              /* 拡大による雑さを消す（必要なら） */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- テキストカード：白ベタ→少し暖色 + 枠線なし ---------- */
.edu-body{
  border: none !important;                 /* 枠線を消す */
  background: rgba(255,255,255,.94) !important;
  border-radius: 20px !important;

  /* 余白を増やして“詰まり感”を消す */
  padding: clamp(24px, 3.2vw, 40px) clamp(22px, 3.4vw, 44px) !important;

  box-shadow: 0 22px 60px rgba(0,0,0,.08) !important;

  /* 要素間の呼吸を増やす */
  row-gap: .9em !important;
}

/* ゴールドラインは“安っぽく見える”場合があるので、より上品に細く＆薄く */
.edu-body::before{
  width: 3px !important;
  top: 18px !important;
  bottom: 18px !important;
  opacity: .75 !important;
}

/* STEP2（反転）のバー位置は維持 */
.edu-item--rev .edu-body::before{
  left: auto !important;
  right: 0 !important;
}

/* ---------- STEP行：余白をしっかり ---------- */
.edu-step{
  margin: 0 0 .6em !important;             /* STEP行の下に余白 */
  column-gap: .75em !important;
  row-gap: .45em !important;
}

/* STEPバッジ：枠線を消して上質に（薄い影で） */
.step-badge{
  border: none !important;
  box-shadow: 0 10px 22px rgba(169,139,88,.22) !important;
}

/* ★青文字を黒色へ（統一） */
.step-time{
  color: #1f1a14 !important;               /* 黒寄りの上品ブラウンブラック */
  font-weight: 800 !important;
}

/* 補足は控えめ */
.step-note{
  color: rgba(31,26,20,.62) !important;
}

/* 本文：色を少し濃くして高級感＆読みやすさ */
.edu-txt{
  color: rgba(31,26,20,.82) !important;
  line-height: 1.95 !important;
  margin-top: .25em !important;
}

/* =========================================================
  SP：余白は維持しつつ読みやすく
========================================================= */
@media (max-width: 720px){
  #edu-system .sec-head{
    margin-bottom: clamp(28px, 6vw, 44px) !important;
  }

  .edu-item--h{
    row-gap: 14px !important;
  }

  .edu-body{
    padding: clamp(18px, 5vw, 26px) !important;
    row-gap: .75em !important;
  }

  /* SPはバー無しの方が高級感出やすい（前の方針を維持） */
  .edu-body::before{
    content: none !important;
  }

  .edu-txt{
    line-height: 1.8 !important;
  }
}

/* =========================================================
  EDUCATION SYSTEM：枠っぽさ除去 + 背景同色カード + 文字全表示
  ※CSSの一番最後に追記
========================================================= */

/* 1) セクション背景色を変数化（必要ならここの色を合わせる） */
#edu-system{
  --edu-bg: var(--sec-bg, #f6f3ec); /* ←サイト側のセクション背景があるならそれに追従 */
  background: var(--edu-bg);
}

/* 2) 画像/テキストの“カード背景”をセクション背景と同色にして枠感を消す */
#edu-system .edu-media,
#edu-system .edu-body{
  background: var(--edu-bg) !important;
  border: none !important;
}

/* 3) 影で枠に見えるので、影をかなり薄く（または無し） */
#edu-system .edu-media,
#edu-system .edu-body{
  box-shadow: 0 18px 50px rgba(0,0,0,.06) !important; /* 薄め */
}

/* 4) “白の枠(に見える部分)”は廃止。
      代わりに「背景同色の太め余白」を外側に作ってリッチに見せる */
#edu-system .edu-item--h{
  column-gap: clamp(28px, 4.4vw, 56px) !important;
  row-gap: 18px;
}

#edu-system .edu-media,
#edu-system .edu-body{
  border-radius: 22px !important;
  padding: 0 !important;
}

/* 画像側：外側に“背景同色の余白”を足して大きく見せる */
#edu-system .edu-media{
  padding: clamp(12px, 1.6vw, 18px) !important; /* ←背景同色の太め余白 */
  overflow: hidden;
}

/* 画像自体は内側に表示（余白の中で角丸） */
#edu-system .edu-media img{
  border-radius: 18px;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform: none !important;
}

/* テキスト側：外側に“背景同色の余白”を足して大きく見せる */
#edu-system .edu-body{
  padding: clamp(22px, 3.2vw, 42px) !important;  /* ←大きめ */
  row-gap: 1em !important;
}

/* ゴールドバーが不要なら薄く（完全に消したいなら content:none でもOK） */
#edu-system .edu-body::before{
  opacity: .45 !important;
  width: 3px !important;
}

/* 5) 青文字を黒系で統一 */
#edu-system .step-time{
  color: #1f1a14 !important;
}

/* 6) 本文は“全表示”にする（clamp解除） */
#edu-system .edu-txt{
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  overflow: visible !important;
  max-height: none !important;
  color: rgba(31,26,20,.82) !important;
  line-height: 1.95 !important;
}

/* 7) SP：余白は維持しつつバーは消す（好み） */
@media (max-width:720px){
  #edu-system .edu-body::before{ content:none !important; }
  #edu-system .edu-media{ padding: 12px !important; }
  #edu-system .edu-body{ padding: 18px !important; }
}

/* =========================================================
  #edu-system：枠っぽさを消して “Rich” にする（最終上書き）
  ※CSSの一番最後に追記
========================================================= */

#edu-system{
  /* site palette ③に寄せた、暖色の面 */
  --edu-surface: rgba(245,240,232,.88);  /* #F5F0E8寄り */
  --edu-surface-2: rgba(236,224,208,.80);/* #ECE0D0寄り */
  --edu-ink: #1f1a14;
}

/* セクション余白（そのままOKなら不要） */
#edu-system.sec.edu-system{
  padding-top: clamp(76px, 10vw, 132px) !important;
  padding-bottom: clamp(76px, 10vw, 132px) !important;
}

/* カード感の原因：線をやめて“面＋光＋奥行き”で見せる */
#edu-system .edu-media,
#edu-system .edu-body{
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, var(--edu-surface), var(--edu-surface-2)) !important;
  position: relative;
  overflow: hidden;
}

/* ふんわりしたハイライト（高級感の“艶”） */
#edu-system .edu-media::before,
#edu-system .edu-body::before{
  content:"";
  position:absolute;
  inset: 0;
  background:
    radial-gradient(900px 260px at 50% 0%,
      rgba(255,255,255,.70),
      rgba(255,255,255,0) 60%);
  opacity: .55;
  pointer-events:none;
}

/* 影は“細い枠”ではなく、深さで見せる（安っぽさ除去） */
#edu-system .edu-media,
#edu-system .edu-body{
  box-shadow:
    0 26px 70px rgba(0,0,0,.08),
    0 10px 24px rgba(0,0,0,.05) !important;
}

/* 画像：外側に余白を作って“額装感”ではなく“余裕感”に */
#edu-system .edu-media{
  padding: clamp(12px, 1.7vw, 18px) !important;
}
#edu-system .edu-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;
  border-radius: 18px;
  transform: none !important;
}

/* テキスト：余白をしっかり。ここが詰まると一気に安っぽく見える */
#edu-system .edu-body{
  padding: clamp(28px, 3.6vw, 46px) clamp(26px, 3.8vw, 52px) !important;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 18px) !important; /* 要素間に呼吸 */
}

/* STEP行：もう少し余裕（タイトル⇄本文の間が詰まらないように） */
#edu-system .edu-step{
  margin: 0 0 clamp(10px, 1.4vw, 14px) !important;
  display: flex;
  flex-wrap: wrap;
  gap: .7em .9em !important;
  align-items: center;
}

/* バッジ：線を消して“面＋影”へ */
#edu-system .step-badge{
  border: 0 !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.7) inset !important;
}

/* 青っぽさを排除して、全体を上品な黒系に統一 */
#edu-system .step-time,
#edu-system .edu-txt{
  color: rgba(31,26,20,.88) !important;
}

/* clamp解除：本文は全部表示（必要なら） */
#edu-system .edu-txt.clamp-5{
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  overflow: visible !important;
}

/* もし “左のゴールド縦ライン” が枠っぽさの原因なら消す */
#edu-system .edu-body::after{
  content: none !important;
}

/* 画像↔テキスト間：ゆとり */
#edu-system .edu-item--h{
  column-gap: clamp(30px, 4.6vw, 62px) !important;
}

/* SP：余白は残しつつスッキリ */
@media (max-width: 720px){
  #edu-system .edu-media{ padding: 12px !important; }
  #edu-system .edu-body{ padding: 18px 18px !important; }
}

/* =========================================================
  EDUCATION SYSTEM：囲わないRich（カード感OFF）
  ※ add at the very end
========================================================= */

#edu-system{
  --edu-ink: #1f1a14;
  --edu-ink-soft: rgba(31,26,20,.76);
  --edu-hair: rgba(31,26,20,.10);
  --edu-glow: rgba(0,0,0,.07);
}

/* セクション余白（呼吸） */
#edu-system.sec.edu-system{
  padding-block: clamp(78px, 10vw, 140px) !important;
}
#edu-system .sec-head{
  margin-bottom: clamp(36px, 5vw, 74px) !important;
}

/* 行同士の間隔を広げる */
#edu-system .edu-grid--wide{
  row-gap: clamp(34px, 5vw, 78px) !important;
}

/* 行：囲わず、上質な区切りだけ（ヘアライン） */
#edu-system .edu-item--h{
  padding-top: clamp(22px, 3.2vw, 34px) !important;
  column-gap: clamp(30px, 4.6vw, 62px) !important;
  align-items: start !important;
}
#edu-system .edu-item--h:not(:first-child){
  border-top: 1px solid var(--edu-hair) !important; /* 囲わない区切り */
}

/* ▼▼ カード感の元（背景面/角丸/影/内側パディング）を完全OFF ▼▼ */
#edu-system .edu-media,
#edu-system .edu-body{
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 画像：上品に見せる（囲いではなく “画の質” で勝つ） */
#edu-system .edu-media{
  overflow: hidden;
  border-radius: 18px !important; /* 画像自体は整える（カードではない） */
  box-shadow: 0 22px 70px var(--edu-glow) !important; /* うっすら奥行き */
}
#edu-system .edu-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: none !important;
}

/* テキスト：箱にせず、余白だけでリッチに */
#edu-system .edu-body{
  padding: clamp(6px, 1.2vw, 10px) 0 !important;  /* “箱”のパディングをやめる */
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 18px) !important;
  position: relative;
}

/* 左のゴールドバーは “枠っぽさ” の原因なので消す */
#edu-system .edu-body::before{
  content: none !important;
}

/* STEP行：余白をしっかり */
#edu-system .edu-step{
  margin: 0 !important;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: .7em .9em !important;
  color: rgba(31,26,20,.92) !important;
}

/* STEPバッジ：枠線やベタ面感を減らし、控えめに上質化 */
#edu-system .step-badge{
  border: none !important;
  background: rgba(255,255,255,.55) !important;  /* “箱”ではなく薄いヴェール */
  box-shadow: 0 12px 26px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.65) inset !important;
  color: rgba(31,26,20,.88) !important;
}

/* 見出しコピー：青を残すなら“落ち着いた深め”に（派手青は安っぽく見えがち） */
#edu-system .step-time{
  color: rgba(75,115,183,.92) !important; /* 今の青を品よく */
  font-weight: 900 !important;
  letter-spacing: .01em;
}

/* 本文：濃度と行間で品を作る */
#edu-system .edu-txt{
  color: var(--edu-ink-soft) !important;
  line-height: 1.95 !important;
  margin: 0 !important;
}

/* clampはPCでも解除して “窮屈感” を消す（必要ならここをコメントアウト） */
#edu-system .edu-txt.clamp-5{
  display:block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  overflow: visible !important;
}

/* 交互レイアウトのバー制御なども無効化（枠感防止） */
#edu-system .edu-item--rev .edu-body::before{
  content:none !important;
}

/* =========================================================
  SP：縦積み + 区切りは維持（囲わない）
========================================================= */
@media (max-width:720px){
  #edu-system .edu-item--h{
    grid-template-columns: 1fr !important;
    row-gap: clamp(16px, 4vw, 26px) !important;
  }
  #edu-system .edu-item--rev .edu-media{ order:1 !important; }
  #edu-system .edu-item--rev .edu-body { order:2 !important; }

  #edu-system .edu-media{
    border-radius: 16px !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.08) !important;
  }

  #edu-system .edu-body{
    padding: 0 !important;
  }

  #edu-system .edu-txt{
    line-height: 1.85 !important;
  }
}

/* =========================================================
  EDUCATION SYSTEM：STEP文字を黒に統一（最終上書き）
  ※ add at the very end
========================================================= */

/* STEP行（全体の文字） */
#edu-system .edu-step{
  color: #1f1a14 !important;
}

/* 『3週間』『3ヶ月』『半年』のコピー（青→黒） */
#edu-system .step-time{
  color: #1f1a14 !important;
  font-weight: 900 !important;
}

/* 補足がある場合も黒寄り */
#edu-system .step-note{
  color: rgba(31,26,20,.70) !important;
}

/* 本文も黒寄りに（完全な黒が良ければ rgba を #1f1a14 に） */
#edu-system .edu-txt{
  color: rgba(31,26,20,.86) !important;
}


/* ===================
   給与例（Salary examples）
   ※ #salary-examples 内だけに作用
=================== */

.salary-examples{
  /* レイアウト用のローカル変数 */
  --salex-inner-pad: clamp(14px, 2vw, 20px);
  --salex-rows-pad : clamp(10px, 1.6vw, 18px);
  --salex-title-h  : 84px;   /* タイトル最小高さ */
  --salex-rows-h   : 100px;  /* 明細エリア最小高さ */
  --salex-total-h  : 72px;   /* 月給ブロック最小高さ（上下の空白を少なめに） */
  --salex-row-min  : 40px;
  --salex-row-gap  : 6px;
  --salex-dotted   : 1px dotted rgba(0,0,0,.12);
  --shadow         : 0 8px 24px rgba(0,0,0,.06);
  --gold-3         : #c7a770;
  --gold-deep      : #6a5430;
}

/* グリッド：中央寄せ＋3等分 */
.salary-examples .salex-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(280px,1fr));
  gap:clamp(18px, 3vw, 32px);
  justify-content:center;
  align-items:stretch;       /* 高さ揃え */
  max-width:1180px;
  margin-inline:auto;
}
@media (max-width:980px){
  .salary-examples .salex-grid{
    grid-template-columns:repeat(2, minmax(280px,1fr));
  }
}
@media (max-width:640px){
  .salary-examples .salex-grid{
    grid-template-columns:1fr;
  }
}

/* カード：3段構成（タイトル / 明細 / 月給） */
.salary-examples .salex-card{
  height:100%;
  box-sizing:border-box;
  padding:var(--salex-inner-pad);
  background:var(--paper);
  border:1px solid rgba(169,139,88,.28);
  border-radius:18px;
  box-shadow:var(--shadow);
  text-align:center;

  display:grid;
  grid-template-rows:
    minmax(var(--salex-title-h), auto)
    minmax(var(--salex-rows-h),  auto)
    minmax(var(--salex-total-h), auto);
  align-items:stretch;
}

/* タイトル（入社◯年目コース） */
.salary-examples .salex-h3{
  margin:12px auto 10px !important;
  padding-inline: calc(var(--salex-inner-pad) * .5);
  background:none !important;
  border:none !important;
  box-shadow:none !important;

  width:auto !important;
  height:auto !important;

  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.15em;
  line-height:1.15;
  text-align:center;
}

/* 金色グラデ文字 */
.salary-examples .salex-h3 .major,
.salary-examples .salex-h3 .minor{
  margin:0;
  font-weight:800;
  letter-spacing:.02em;
  background:linear-gradient(180deg, var(--gold-deep) 0%, var(--gold-deep) 55%, var(--gold-3) 100%);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.35), 0 12px 22px rgba(0,0,0,.10);
}
.salary-examples .salex-h3 .major{ white-space:nowrap; }
.salary-examples .salex-h3 .minor{
  display:block;
  line-height:1.2;
  font-weight:700;
  font-size:clamp(12px, 1.1vw, 14px);
}

/* ===== 月給（支給総額） ===== */
.salary-examples .salex-total{
  min-height:var(--salex-total-h);
  height:auto;
  display:grid;
  place-items:center;
  margin-block:12px 8px;
  padding-inline: calc(var(--salex-inner-pad) * .5);
  color:#2d2a26;
}
.salary-examples .salex-total .cap{ display:none; }

.salary-examples .salex-total .money{
  display:inline-flex;
  align-items:baseline;
  gap:.2em;
  padding:0;
  background:none;
  border:0;
  box-shadow:none;
}
.salary-examples .salex-total .money em{
  font-style:normal;
  font-family:"Shippori Mincho",serif;
  font-weight:900;
  font-size:clamp(28px, 4.6vw, 40px);
  letter-spacing:.02em;
  background:linear-gradient(180deg, var(--gold-deep) 0%, var(--gold-deep) 55%, var(--gold-3) 100%);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.35), 0 12px 22px rgba(0,0,0,.10);
}
@media (max-width:780px){
  .salary-examples .salex-total .money em{
    font-size:clamp(24px, 8vw, 34px);
  }
}
.salary-examples .salex-total .money small{
  font-size:.55em;
  color:#2d2a26;
}

/* ===== 明細（①基本給 / ②美容手当 / ③売上歩合 / ④指名手当 …） ===== */
.salary-examples .salex-rows{
  order:3;
  width:100%;
  list-style:none;
  margin:0;
  padding-inline:var(--salex-rows-pad);
  text-align:left;

  min-height:var(--salex-rows-h);
  height:auto;
  display:flex;
  flex-direction:column;
  gap:var(--salex-row-gap);
}
.salary-examples .salex-rows .row{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  column-gap:14px;
  min-height:var(--salex-row-min);
  padding:6px 0;
  border-bottom:var(--salex-dotted);
}
.salary-examples .salex-rows .row:last-child{
  border-bottom:none;
}
.salary-examples .salex-rows .lbl{
  color:var(--gray-2, #666);
  white-space:nowrap;
  justify-self:start;
  text-align:left;
}
.salary-examples .salex-rows .val{
  justify-self:end;
  display:inline-flex;
  align-items:baseline;
  gap:.12em;
  font-variant-numeric:tabular-nums;
  text-align:right;
}

/* ② 美容手当：基本給に含まれている注釈を追加 */
.salary-examples .salex-rows .lbl--beauty{
  font-weight:700;
}
.salary-examples .salex-rows .lbl--beauty::after{
  content:"（基本給に含）";
  font-weight:400;
  font-size:.85em;
  color:var(--gray-2,#777);
  margin-left:.2em;
}

/* ===== レスポンシブ調整 ===== */
@media (max-width:640px){
  .salary-examples .salex-card{
    padding:clamp(10px, 3.2vw, 14px);
  }
}

/* 見出しサイズ（SP時） */
@media (max-width:720px){
  .salary-examples .salex-card{
    font-size:clamp(13.5px, 3.7vw, 15px);
    line-height:1.75;
  }
  .salary-examples .salex-h3{
    margin:10px auto 8px !important;
  }
  .salary-examples .salex-h3 .major{
    font-size:clamp(14px, 3.6vw, 16px);
  }
  .salary-examples .salex-h3 .minor{
    font-size:clamp(11px, 3.2vw, 13px);
  }
}

/* PC側の数字サイズ（微調整したい時用） */
@media (min-width:781px){
  .salary-examples .salex-total .money em{
    font-size:clamp(28px, 4.6vw, 40px);
  }
}

/* ===== スマホで text-scale ラッパーが入る環境向け：中央揃えだけ維持 ===== */
@media (max-width:780px){
  #salary-examples .salex-card :is(.text-scale-wrap.ts--ttl, .text-scale){
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    transform-origin:center center !important;
  }
}


/* ▼ 基本給に含まれる行（= 美容手当）を“内訳”風にインデント */
#salary-examples .salex-rows .row:has(.lbl--beauty) .lbl{
  padding-left: 16px;                  /* ラベルだけを右に寄せる */
  position: relative;
}
#salary-examples .salex-rows .row:has(.lbl--beauty) .lbl::before{
  content: "↳";                        /* 矢印（好みで "└" などでも） */
  position: absolute;
  left: 0; top: 0.1em;
  color: var(--gold-3, #c7a770);
  font-weight: 800;
  line-height: 1;
  opacity: .95;
}
/* 値（右側）は位置を変えない＝桁が揃ったまま */

/* ===== 強めのカード造形 ===== */
.cards--faq .card .card-wrap{
  border: 2px solid rgba(35, 31, 28, .14);     /* 枠線を太めに */
  border-radius: 22px;                         /* 角丸をやや強調 */
  box-shadow: 0 10px 28px rgba(0,0,0,.08);     /* 影を少し強めに */
  background: #fff;
  position: relative;                          /* タグ配置用 */
  padding-top: clamp(28px, 4.2vw, 34px);       /* タグ分の上余白を少し増やす */
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cards--faq .card--point:hover .card-wrap,
.cards--faq .card:hover .card-wrap{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  border-color: rgba(35,31,28,.22);
}

/* タイトルをクッキリ（字面はそのまま） */
.cards--faq .card-ttl{
  font-weight: 900;
  letter-spacing: .01em;
  color: #2d2a26;                              /* ベースは黒寄り */
}
.cards--faq .card-ttl strong{
  background: linear-gradient(180deg, var(--gold-2), var(--gold-3));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===== 上部ピル型タグ（任意） ===== */
.cards--faq .card-tag{
  position: absolute;
  top: clamp(10px, 1.6vw, 14px);
  left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 16px;
  border-radius: 999px;
  font-weight: 800; font-size: .95rem;
  letter-spacing: .02em; white-space: nowrap;
  background: #fff; color: #2d2a26;
  border: 2px solid #2d2a26;                   /* 画像の“白地＋黒枠”風 */
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

/* 強調版（オレンジ系） */
.cards--faq .card-tag.is-accent{
  background: #ef6c3e;                         /* お好みでブランド色に */
  border-color: #ef6c3e;
  color: #fff;
}

/* さらに薄い枠だけの版（必要なら） */
.cards--faq .card-tag.is-outline{
  background: #fff; color:#2d2a26;
  border-color: rgba(35,31,28,.45);
}

/* スマホは少しコンパクトに */
@media (max-width:600px){
  .cards--faq .card .card-wrap{ padding-top: 28px; }
  .cards--faq .card-tag{ height: 30px; padding: 0 12px; font-size: .9rem; }
}

/* SP: 店舗名・役職名 ＆ 名前をやや大きめに */
@media (max-width: 640px){
  #interviews .voice-meta{
    font-size: clamp(1４px, 4.4vw, 18.5px);
    line-height: 1.6;
  }
  #interviews .voice-sub{
    font-size: clamp(20px, 5.4vw, 24px);  /* 名前を強めに */
    line-height: 1.5;
    margin-bottom: .55em;                 /* 既存の余白を維持 */
  }
}

/* =========================================================
   Salary examples：余白増・枠線削除・支給総額を最強に
   ※CSSの一番最後に追記
========================================================= */

/* セクション上下の余白（見出し～カードまで“呼吸”を作る） */
#salary-examples{
  padding-top: clamp(72px, 9vw, 128px);
  padding-bottom: clamp(72px, 9vw, 128px);
}
#salary-examples .sec-lead{
  margin-bottom: clamp(34px, 4.2vw, 56px) !important;
}

/* グリッド間隔を広げる */
#salary-examples .salex-grid{
  gap: clamp(26px, 3.6vw, 44px) !important;
}

/* カード：枠線は完全削除、余白は増やす（リッチ寄り） */
#salary-examples .salex-card{
  border: none !important;                /* ←枠線削除 */
  background: transparent !important;     /* 変な枠感を消す */
  box-shadow: 0 18px 50px rgba(0,0,0,.06) !important;
  padding: clamp(18px, 2.6vw, 28px) !important;
  border-radius: 22px !important;
}

/* タイトル：年数（入社◯年目）とコース差を作る */
#salary-examples .salex-h3{
  margin: 4px auto clamp(18px, 2.4vw, 26px) !important;
  gap: .55em !important;
}
#salary-examples .salex-h3 .major{
  white-space: normal !important;       /* ←nowrap解除（詰まり防止） */
  line-height: 1.22 !important;
  letter-spacing: .02em !important;
  font-size: clamp(15px, 1.5vw, 18px);
}

/* 1行目の「入社◯年目」だけ強弱を作る（見た目の差） */
#salary-examples .salex-h3 .major br{
  display: block;
  margin-top: .25em;
}

/* 明細：行間・左右の距離を広げる（数字とテキストの“詰まり”解消） */
#salary-examples .salex-rows{
  padding-inline: clamp(8px, 1.4vw, 16px) !important;
  gap: clamp(10px, 1.2vw, 14px) !important;
}
#salary-examples .salex-rows .row{
  min-height: clamp(46px, 5.2vw, 56px) !important;
  padding: clamp(10px, 1.2vw, 14px) 0 !important;
  column-gap: clamp(18px, 2.2vw, 28px) !important; /* ←ラベルと数字を離す */
  border-bottom: 1px dotted rgba(0,0,0,.10) !important;
}

/* ラベル：余裕と視認性 */
#salary-examples .salex-rows .lbl{
  letter-spacing: .02em;
  color: rgba(31,26,20,.70) !important;
}

/* 値：数字と単位の間隔を少し広げ、桁を見やすく */
#salary-examples .salex-rows .val{
  gap: .18em !important;
}
#salary-examples .salex-rows .val b{
  font-weight: 850;
  letter-spacing: .01em;
}

/* 美容手当：太字は作らない（ラベルも値も通常に） */
#salary-examples .salex-rows .lbl--beauty{
  font-weight: 400 !important; /* ←太字を削除 */
}
#salary-examples .salex-rows .lbl--beauty::after{
  font-size: .86em;
  opacity: .9;
}

/* “↳”の内訳矢印は弱める（目立たせない） */
#salary-examples .salex-rows .row:has(.lbl--beauty) .lbl{
  padding-left: 12px !important;
}
#salary-examples .salex-rows .row:has(.lbl--beauty) .lbl::before{
  opacity: .35 !important;
  font-weight: 700 !important;
}

/* 支給総額：セクション内で最も目立たせる（大きく・間隔も確保） */
#salary-examples .salex-total{
  margin-top: clamp(18px, 2.6vw, 30px) !important;
  margin-bottom: 0 !important;
  padding-top: clamp(10px, 1.6vw, 16px) !important;
}

/* 「月給」～金額：強調を最大に */
#salary-examples .salex-total .money{
  gap: .35em !important;
}
#salary-examples .salex-total .money em{
  font-size: clamp(32px, 5.2vw, 48px) !important; /* ←一番強く */
  letter-spacing: .02em;
}
#salary-examples .salex-total .money{
  color: rgba(31,26,20,.92);
}

/* SP：カード内の余白も確保 */
@media (max-width: 640px){
  #salary-examples .salex-card{
    padding: 18px !important;
  }
  #salary-examples .salex-rows .row{
    min-height: 50px !important;
    column-gap: 18px !important;
  }
  #salary-examples .salex-total .money em{
    font-size: clamp(30px, 9vw, 42px) !important;
  }
}



/* =========================================================
   Salary examples：見出しの折り返し崩れ防止 + 支給総額の高さ/位置を完全に揃える
   ※CSSの一番最後に追記
========================================================= */

#salary-examples{
  --salex-title-fixed: 120px; /* 見出し行の高さ（全カード同じ） */
  --salex-total-fixed: 150px; /* 支給総額行の高さ（全カード同じ） */
}

/* カード内を 3段固定（見出し / 支給総額 / 明細） */
#salary-examples .salex-card{
  display: grid !important;
  grid-template-rows: var(--salex-title-fixed) var(--salex-total-fixed) 1fr !important;
  row-gap: clamp(14px, 2.2vw, 22px) !important;
}

/* それぞれを段に固定（orderの影響を排除） */
#salary-examples .salex-h3{ grid-row: 1 !important; }
#salary-examples .salex-total{ grid-row: 2 !important; }
#salary-examples .salex-rows{ grid-row: 3 !important; }

/* 見出し：中央に安定配置（行高固定の中でセンタリング） */
#salary-examples .salex-h3{
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-content: center !important;
  gap: 10px !important;
  text-align: center !important;
}

/* 入社◯年目（小さめ・ラベル感） */
#salary-examples .salex-year{
  font-weight: 800;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: .14em;
  opacity: .85;
  line-height: 1.1;
}

/* コース名（主役） */
#salary-examples .salex-course{
  font-weight: 900;
  font-size: clamp(17px, 1.45vw, 20px);
  letter-spacing: .03em;
  line-height: 1.25;
}

/* ★各行は折り返させない（1文字改行を根絶） */
#salary-examples .salex-course .line{
  display: inline-block;
  white-space: nowrap;
}

/* 支給総額：高さ固定の中で中央に揃える（ズレを根絶） */
#salary-examples .salex-total{
  min-height: var(--salex-total-fixed) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-content: center !important;
  justify-items: center !important;
  row-gap: 8px !important;
}

/* 「支給総額」ラベルを表示（統一） */
#salary-examples .salex-total .cap{
  display: block !important;
  font-weight: 800;
  letter-spacing: .08em;
  opacity: .85;
}

/* 明細の上を少し空ける（詰まり見え防止） */
#salary-examples .salex-rows{
  padding-top: 6px !important;
}

/* スマホは高さを少し詰める */
@media (max-width: 720px){
  #salary-examples{
    --salex-title-fixed: 108px;
    --salex-total-fixed: 138px;
  }
}


/* =========================================================
   Salary heading: force line break after 年目 + richer typography
   ※ add at the very end
========================================================= */

#salary-examples .salex-h3{
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-content: center !important;
  gap: 10px !important;
  text-align: center !important;
}

/* ✅ Always line-break after "入社◯年目/半年後" */
#salary-examples .salex-year{
  display: block !important;                 /* ← this forces the break */
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.1;
  color: rgba(45,42,38,.85);
}

/* Rich main title */
#salary-examples .salex-course{
  display: block;
  font-family: "Shippori Mincho", serif;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.25;

  /* subtle “rich” gold tone (not too flashy) */
  background: linear-gradient(180deg, #3a2f22 0%, #3a2f22 60%, #c7a770 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow: 0 1px 0 rgba(255,255,255,.35), 0 14px 26px rgba(0,0,0,.10);
}

/* Prevent “1 char per line” wrapping */
#salary-examples .salex-course .line{
  display: inline-block;
  white-space: nowrap;
}

/* hairline under course for a more premium feel */
#salary-examples .salex-course::after{
  content:"";
  display:block;
  width: clamp(64px, 24%, 110px);
  height: 1px;
  margin: 12px auto 0;
  background: linear-gradient(90deg, rgba(199,167,112,0), rgba(199,167,112,.75), rgba(199,167,112,0));
  opacity: .9;
}

/* =========================================================
  Salary examples：SPだけ「横スクロール + スクロールバー非表示」
  + 影なし枠線くっきり + 見出しは「年/半年後で改行」
========================================================= */
@media (max-width: 720px){

  /* 横スクロール本体 */
  #salary-examples .salex-grid{
    display: flex !important;
    flex-wrap: nowrap !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;

    /* 1枚ずつ止める */
    scroll-snap-type: x mandatory;
    scroll-padding-left: 14px;
    scroll-padding-right: 14px;

    /* “チラ見え”防止 */
    gap: 14px !important;
    padding-inline: 14px !important;
    margin-inline: 0 !important;

    /* 既存grid無効化 */
    grid-template-columns: none !important;
    max-width: none !important;

    /* 横スワイプを優先 */
    touch-action: pan-x;

    /* 端で変な挙動になりにくくする */
    overscroll-behavior-x: contain;

    /* ===== スクロールバー非表示（見た目だけ） ===== */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge(old) */
  }
  #salary-examples .salex-grid::-webkit-scrollbar{ display: none; } /* Chrome/Safari */

  /* カード：必ず1枚サイズ＆3枚ぜんぶ到達できるように */
  #salary-examples .salex-card{
    flex: 0 0 100% !important;
    scroll-snap-align: start;

    /* サイズ統一 */
    height: clamp(520px, 74vh, 620px) !important;
    min-height: clamp(520px, 74vh, 620px) !important;

    /* SPのみ：影なし + 枠線くっきり */
    box-shadow: none !important;
    border: 2px solid rgba(35, 31, 28, .20) !important;
    border-radius: 22px !important;
    background: var(--paper, #fbf7ef) !important;

    /* 余白ちょい締め */
    padding: 16px 14px !important;

    /* スナップ位置の微調整（左に吸い付きやすく） */
    scroll-margin-left: 14px;
    scroll-margin-right: 14px;
  }

  /* =========================
     タイトル：年(半年後/◯年目)の後は必ず改行
     ========================= */
  #salary-examples .salex-h3{
    display: grid !important;
    place-content: center !important;
    justify-items: center !important;
    gap: 10px !important;

    margin: 6px auto 10px !important;
    padding: 0 !important;

    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
  }

  /* 1行目：入社半年後 / 入社4年目 など */
  #salary-examples .salex-year{
    display: block !important;                /* ←これで必ず改行 */
    white-space: nowrap !important;

    font-weight: 800 !important;
    letter-spacing: .10em !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    color: rgba(45,42,38,.78) !important;
  }

  /* 2行目以降：コース名（長い場合は2行までOK） */
  #salary-examples .salex-course{
    display: grid !important;
    justify-items: center !important;
    gap: 4px !important;

    font-weight: 900 !important;
    letter-spacing: .02em !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    color: rgba(45,42,38,.88) !important;

    /* 1文字改行の防止 */
    word-break: keep-all;
    overflow-wrap: normal;
  }

  /* HTML内の .line を行として扱う（brがあっても崩れない） */
  #salary-examples .salex-course .line{
    display: block !important;
    white-space: nowrap !important;  /* 1文字改行を根絶 */
  }

  /* 明細：詰まりを少し緩和 */
  #salary-examples .salex-rows{
    padding-inline: 6px !important;
    gap: 10px !important;
  }
  #salary-examples .salex-rows .row{
    min-height: 46px !important;
    padding: 10px 0 !important;
  }

  /* 支給総額：下が間延びしやすいので少し締める */
  #salary-examples .salex-total{
    margin-block: 10px 6px !important;
    min-height: 64px !important;
  }
}

/* =========================================================
  Salary examples：SP fixes
  - title: "入社◯年目" -> NEW LINE -> "プロフェッショナルアイリストコース"
  - horizontal scroll: ensure the 1st card is reachable
========================================================= */
@media (max-width: 720px){

  /* ✅ IMPORTANT: do NOT center the flex line (1st card can disappear) */
  #salary-examples .salex-grid{
    justify-content: flex-start !important;
  }

  /* ===== Title: enforce order + line break ===== */
  #salary-examples .salex-h3{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* 1st line */
  #salary-examples .salex-year{
    order: 1 !important;
    display: block !important;
    white-space: nowrap !important;
  }

  /* 2nd line (join into ONE line on SP) */
  #salary-examples .salex-course{
    order: 2 !important;

    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    gap: 0 !important;

    white-space: nowrap !important;

    /* remove the "space flex item" between spans */
    font-size: 0 !important;
  }
  #salary-examples .salex-course br{
    display: none !important;
  }
  #salary-examples .salex-course .line{
    display: inline !important;
    white-space: nowrap !important;

    /* restore font-size (since parent is 0) */
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    letter-spacing: .02em !important;
  }
}

/* =========================================================
  Salary examples：SP title break + typography + balance
  ※ CSSの一番最後に追記（SPのみ）
========================================================= */
@media (max-width: 720px){

  /* 横スクロール（バーは見せない） */
  #salary-examples .salex-grid{
    display: flex !important;
    gap: 14px !important;

    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;
    padding: 0 16px 6px !important; /* 下の余白は最小限（影/枠の欠け防止） */

    justify-content: flex-start !important; /* 1枚目が消えるのを防止 */
  }
  #salary-examples .salex-grid::-webkit-scrollbar{ display:none; }
  #salary-examples .salex-grid{ scrollbar-width:none; -ms-overflow-style:none; }

  /* 1枚の幅（好みで 84%→88% などOK） */
  #salary-examples .salex-card{
    flex: 0 0 86% !important;
    max-width: 360px !important;
    scroll-snap-align: start;

    /* SPはカード感：影なし + 枠線くっきり（あなたの要望） */
    box-shadow: none !important;
    border: 2px solid rgba(35, 31, 28, .22) !important;
    border-radius: 18px !important;
    background: #fff !important;

    /* 余白と高さのバランス調整（下の余白がデカい問題を解消） */
    padding: 18px 16px 16px !important;
    grid-template-rows: auto auto 1fr !important; /* 変な固定高さをやめる */
    row-gap: 14px !important;
  }

  /* =========================
     タイトル：必ず「年→改行→コース」
     文字を大きくして見栄えを整える
  ========================= */
  #salary-examples .salex-h3{
    margin: 2px 0 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;

    gap: 8px !important;
  }

  /* ★ここで「改行」確定：block化 */
  #salary-examples .salex-year{
    display: block !important;
    width: 100%;
    text-align: center;

    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1.15;

    /* 文字を大きく */
    font-size: clamp(14px, 4.0vw, 16px) !important;
    color: rgba(45,42,38,.82);
    white-space: nowrap;
  }

  #salary-examples .salex-course{
    display: block !important;  /* ★年の次の行に落とす */
    width: 100%;
    text-align: center;

    font-family: "Shippori Mincho", serif;
    font-weight: 900;
    line-height: 1.25;

    /* 文字を大きく */
    font-size: clamp(16px, 4.8vw, 19px) !important;
    letter-spacing: .02em;

    /* 2行目は「プロフェッショナルアイリストコース」を1行で */
    white-space: nowrap;
  }

  /* HTMLに <br> が残っていてもSPでは出さない（2行目を1行にする） */
  #salary-examples .salex-course br{ display:none !important; }

  /* line span が変に割れないように（環境依存の1文字改行対策） */
  #salary-examples .salex-course .line{
    display: inline !important;
    white-space: nowrap !important;
  }

  /* タイトル下の細い線：位置と余白を整える */
  #salary-examples .salex-course::after{
    content:"";
    display:block;
    width: min(140px, 52%);
    height: 1px;
    margin: 10px auto 0;
    background: rgba(199,167,112,.55);
    opacity: .9;
  }

  /* =========================
     支給総額：詰めすぎず、下余白を減らしてバランス改善
  ========================= */
  #salary-examples .salex-total{
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;

    display: grid !important;
    place-content: center !important;
    row-gap: 8px !important;
  }
  #salary-examples .salex-total .cap{
    display: block !important;
    font-weight: 800;
    letter-spacing: .08em;
    font-size: 12px;
    opacity: .85;
  }
  #salary-examples .salex-total .money em{
    font-size: clamp(30px, 9vw, 38px) !important;
  }

  /* =========================
     明細：行の高さを少し締めて“下がスカスカ”を解消
  ========================= */
  #salary-examples .salex-rows{
    padding-inline: 8px !important;
    gap: 10px !important;
  }
  #salary-examples .salex-rows .row{
    min-height: 44px !important;
    padding: 10px 0 !important;
    column-gap: 16px !important;
  }
}

/* =========================================================
  Salary examples (SP): force break after year + same font size
  ※ put at the VERY END
========================================================= */
@media (max-width: 720px){

  /* 1) Force line break: year on its own line, course on next line */
  #salary-examples .salex-card .salex-h3{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 10px !important;
  }

  /* 2) These two must be same font-size */
  #salary-examples .salex-card .salex-h3 > .salex-year,
  #salary-examples .salex-card .salex-h3 > .salex-course{
    display: block !important;              /* ← hard break */
    width: 100% !important;
    text-align: center !important;

    font-size: clamp(15px, 4.2vw, 17px) !important;  /* ← SAME size */
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .10em !important;
    color: rgba(45,42,38,.86) !important;

    white-space: nowrap !important;         /* keep each line as one line */
  }

  /* 3) If .salex-course contains .line spans, don’t let them break weirdly */
  #salary-examples .salex-card .salex-course .line{
    display: inline !important;
    white-space: nowrap !important;
  }

  /* 4) If your HTML still has <br> inside course, hide it on SP */
  #salary-examples .salex-card .salex-course br{
    display: none !important;
  }
}

/* =========================================================
  Salary examples (SP): ALWAYS break after year + same size
  Paste at the VERY END of CSS
========================================================= */
@media (max-width: 720px){

  /* If there is any wrapper (text-scale etc.), force it to allow wrapping */
  #salary-examples .salex-h3,
  #salary-examples .salex-h3 :is(.text-scale-wrap, .text-scale, .ts--ttl){
    display: flex !important;
    flex-wrap: wrap !important;          /* ← key */
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    row-gap: 10px !important;            /* vertical spacing */
    column-gap: 12px !important;         /* harmless */
    width: 100% !important;
  }

  /* Year MUST occupy full row (forces next item to next line) */
  #salary-examples .salex-h3 .salex-year{
    flex: 0 0 100% !important;           /* ← key */
    width: 100% !important;
    display: block !important;
    text-align: center !important;

    /* SAME size as course */
    font-size: clamp(15px, 4.2vw, 17px) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: .10em !important;
    color: rgba(45,42,38,.86) !important;
    white-space: nowrap !important;
  }

  /* Course MUST be the next full row */
  #salary-examples .salex-h3 .salex-course{
    flex: 0 0 100% !important;           /* ← key */
    width: 100% !important;
    display: block !important;
    text-align: center !important;

    /* SAME size as year */
    font-size: clamp(15px, 4.2vw, 17px) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: .10em !important;
    color: rgba(45,42,38,.86) !important;

    /* Prevent "1 char per line" */
    white-space: normal !important;
  }

  /* If course has .line spans, keep each line as a block (and centered) */
  #salary-examples .salex-h3 .salex-course .line{
    display: inline-block !important;
    white-space: nowrap !important;
  }

  /* If <br> exists inside course, don’t force extra breaks on SP */
  #salary-examples .salex-h3 .salex-course br{
    display: none !important;
  }
}


/* =========================================
   Salary examples：カード内タイトルの“雰囲気”を統一
   ※ style.css の一番最後に追記
========================================= */
#salary-examples .salex-h3{
  font-family: "Shippori Mincho", serif !important;
  letter-spacing: .04em !important;
  color: #2b2620 !important;
}

/* 「入社半年後 / 入社◯年目」 */
#salary-examples .salex-year{
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: clamp(14px, 1.7vw, 16px) !important;
  opacity: .85 !important;
}

/* 「一般スタッフ / プロフェッショナル…」 */
#salary-examples .salex-course{
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: clamp(18px, 2.2vw, 22px) !important;
  letter-spacing: .04em !important;

  /* 変なグラデ文字・強い影が残ってたら消す */
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}


/* =========================================
  Salary examples：入社半年後 と 一般スタッフ を同サイズに
  ※ style.css の一番最後に追記
========================================= */
#salary-examples .salex-h3 .salex-year,
#salary-examples .salex-h3 .salex-course{
  font-size: clamp(15px, 4.2vw, 17px) !important; /* ←同じ */
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: .10em !important;
}

/* コース側の中身（.line）が小さくされてる対策 */
#salary-examples .salex-h3 .salex-course .line{
  font-size: inherit !important;
  font-weight: inherit !important;
}



/* =========================================================
  Interviews
========================================================= */

.voice{
  display: grid;
  gap: clamp(20px, 3vw, 36px);
}

/* 1行を2カラムで。PCは横並び、スマホは縦積み */
.voice-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.6vw, 28px);
  align-items: start;
}

/* スマホ：必ず「写真 → テキスト」の順に固定 */
@media (max-width: 820px){
  .voice-row{ grid-template-columns: 1fr; }
  .voice-row .voice-fig{ order: 1; }
  .voice-row .voice-body{ order: 2; }
}

/* 交互配置：PC幅でのみ左右反転（スマホは上の order 指定が優先される） */
@media (min-width: 821px){
  .voice-row.is-reverse{
    grid-template-columns: 1fr 1fr;
  }
  .voice-row.is-reverse .voice-fig{ order: 2; }
  .voice-row.is-reverse .voice-body{ order: 1; }
}

/* 画像（1:1・角丸・影／未設定時はグレー） */
.voice-fig{
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #eee;
  box-shadow: var(--shadow-lg, 0 16px 40px rgba(0,0,0,.08));
}
.voice-fig img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* テキストブロック */
.voice-body{
  padding: clamp(4px, .7vw, 8px) 2px;
}

/* 名前：金のグラデ文字で上品に */
.voice-sub{
  margin: 0 0 .35em;
  font-family: "Shippori Mincho", serif;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.5;
  background: linear-gradient(180deg, #6a5430 0%, #6a5430 55%, var(--gold-3, #c7a770) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.35), 0 14px 30px rgba(0,0,0,.12);
}

/* アイリスト歴：読みやすい金色（単色） */
.voice-meta{
  margin: 0 0 .6em;
  font-weight: 800;
  color: var(--gold-3, #c7a770);
  line-height: 1.6;
}

/* 本文 */
.voice-txt{
  margin: 0;
  color: var(--gray-2, #666);
  line-height: 1.9;
}

/* オプション：本文を4〜6行で揃えたいとき */
.voice-txt.clamp-6{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}

/* 役職・店名を上、名前をその下に見せる */
.voice-meta{
  margin: 0 0 .35em;
  font-weight: 800;
  color: var(--gold-3, #c7a770);
  line-height: 1.5;
}

/* 名前（既存の金グラデ）はそのまま強調 */
.voice-sub{ margin: 0 0 .55em; }

/* Q&A 体裁 */
.voice-qa{
  margin: 0;
  display: grid;
  gap: .6em 0;
}
.voice-qa dt{
  margin: 0;
  font-weight: 800;
  color: #2b2620;
}
.voice-qa dd{
  margin: 0 0 .6em 0;
  color: var(--gray-2, #666);
  line-height: 1.9;
}

/* スマホで読みやすく */
@media (max-width: 640px){
  .voice-qa{ gap: .5em; }
  .voice-qa dd{ line-height: 1.85; }
}

/* ====== 枠線なし・高さ維持でメリハリだけ強化 ====== */

/* 既存の高さコントロールはそのまま */
#salary-examples .salex-h3{
  min-height: var(--salex-title-h) !important;
  height: auto !important;
  margin: 12px auto 10px !important;
  padding: 0 8px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  background: none !important;
  border: none !important;
  box-shadow: none !important; /* ← 枠・影は使わない */
}

/* コース名：文字だけでコントラストを上げる（高さは不変） */
#salary-examples .salex-h3 .major{
  font-family: "Shippori Mincho", serif;
  font-weight: 900;
  font-size: clamp(20px, 2.4vw, 26px); /* 既存レンジ内 → 高さ不変 */
  letter-spacing: .01em;
  /* 文字色だけでメリハリ（深いグラデ＋軽いグロー） */
  background: linear-gradient(180deg, #1e1a14 0%, #1e1a14 55%, var(--gold-3, #c7a770) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.35), 0 10px 22px rgba(0,0,0,.10);
}

/* サブ行を使う場合も控えめに（高さ暴れ防止） */
#salary-examples .salex-h3 .minor{
  color:#433b2f;
  font-weight:700;
  font-size: clamp(12px, 1.1vw, 14px);
  line-height:1.2;
  background:none; -webkit-text-fill-color:initial;
}

/* 月給エリア：レイアウトは既存のまま。装飾は文字だけ */
#salary-examples .salex-total{
  min-height: var(--salex-total-h) !important;
  height: auto !important;
  display: grid;
  place-items: center;
  margin: 12px 0 8px;
  padding: 0 8px;
}

/* 「支給総額」ラベルは非表示のままでもOK。出すなら文字のみで軽く */
#salary-examples .salex-total .cap{
  display: inline-block;
  margin-bottom: 4px;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
  color: #6a5430;
}

/* 金額：数字のみ強調。単位は通常色のまま（消さない） */
#salary-examples .salex-total .money{
  display: inline-flex;
  align-items: baseline;
  gap: .22em;
  padding: 0;               /* 枠・背景なし */
  background: none;
  border: 0;
  box-shadow: none;
  line-height: 1;
}
#salary-examples .salex-total .money em{
  font-style: normal;
  font-family: "Shippori Mincho", serif;
  font-weight: 900;
  font-size: clamp(28px, 4.6vw, 40px); /* 既存レンジ → 高さ不変 */
  letter-spacing: .005em;
  /* 文字だけを強く（オレンジ系 or お好みのブランド色に） */
  background: linear-gradient(180deg, #f0642d 0%, #e65324 60%, #b43c14 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.35), 0 10px 22px rgba(240,100,45,.18);
}
#salary-examples .salex-total .money small{
  font-size: .60em;   /* 単位は控えめにして残す */
  color: #2d2a26;
}

/* SP微調整（高さは変えない） */
@media (max-width:720px){
  #salary-examples .salex-h3 .major{
    font-size: clamp(18px, 4.2vw, 24px);
  }
}

/* === 月収ブロック：中央に縦並び（ラベル → 金額） === */
#salary-examples .salex-total{
  min-height: var(--salex-total-h) !important;
  height: auto !important;
  display: flex;                 /* ← gridから変更 */
  flex-direction: column;        /* ラベルが上、金額が下 */
  align-items: center;
  justify-content: center;
  gap: 6px;                      /* ラベルと金額の間隔 */
  margin: 12px 0 8px;
  padding: 0 8px;
  text-align: center;
}

/* 「支給総額」を表示＆中央寄せ */
#salary-examples .salex-total .cap{
  display: block;                /* ← 非表示を解除 */
  order: 1;
  font-weight: 800;
  font-size: .86rem;
  letter-spacing: .04em;
  color: #6a5430;                /* 目立ちすぎない金系カラー */
  line-height: 1.1;
}

/* 金額本体はラベルの下に */
#salary-examples .salex-total .money{
  order: 2;
  display: inline-flex;
  align-items: baseline;
  gap: .22em;
  background: none;
  border: 0;
  box-shadow: none;
  line-height: 1;
}

/* 数字強調（既存のまま） */
#salary-examples .salex-total .money em{
  font-style: normal;
  font-family: "Shippori Mincho", serif;
  font-weight: 900;
  font-size: clamp(28px, 4.6vw, 40px);
  letter-spacing: .005em;
  background: linear-gradient(180deg, #f0642d 0%, #e65324 60%, #b43c14 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.35), 0 10px 22px rgba(240,100,45,.18);
}

/* 単位は読みやすく控えめに */
#salary-examples .salex-total .money small{
  font-size: .60em;
  color: #2d2a26;
}

/* SPでも中央寄せ・高さ維持 */
@media (max-width:720px){
  #salary-examples .salex-total{ gap: 5px; }
}

/* 共通：ラベル→金額の縦並び＆中央寄せ */
#salary-examples .salex-total{
  min-height: var(--salex-total-h) !important;
  display:flex !important;
  flex-direction:column !important;   /* ← 上：支給総額 / 下：金額 */
  align-items:center !important;
  justify-content:center !important;
  gap:6px;
  text-align:center;
}

/* ラベルは常に表示（PC/SP共通） */
#salary-examples .salex-total .cap{
  display:block !important;           /* 以前の display:none を打ち消し */
  order:1;
  font-weight:800;
  font-size:.86rem;
  letter-spacing:.04em;
  color:#6a5430;
  line-height:1.1;
}

/* 金額はラベルの下 */
#salary-examples .salex-total .money{
  order:2;
  display:inline-flex;
  align-items:baseline;
  gap:.22em;
  line-height:1;
}

/* 端末が狭い環境で自動ラッパーが入っても縦並びを維持 */
@media (max-width: 780px){
  #salary-examples .salex-total,
  #salary-examples .salex-total .text-scale-wrap,
  #salary-examples .salex-total .text-scale{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }
}

/* SP：タイトルと支給総額の間隔をさらに詰める */
@media (max-width: 780px){
  #salary-examples .salex-h3{
    margin-bottom: 4px !important;   /* 旧: 8〜10px → 4px */
  }
  #salary-examples .salex-total{
    margin-top: 2px !important;      /* 旧: 12px 前後 → 2px */
    gap: 4px !important;             /* 「支給総額」ラベルと金額の間も少しだけ詰める */
  }
}

/* --- Staff Interviews: 写真を丸く --- */
.voice-fig{
  position: relative;
  aspect-ratio: 1 / 1;          /* 正円を維持 */
  border-radius: 50%;           /* ← 丸くする */
  overflow: hidden;             /* はみ出しを隠す */
  background: #dfe9dd;          /* 背景色（サンプルの淡いグリーン） */
  border: 10px solid #eef4ec;   /* やわらかいリング */
  box-shadow: 0 12px 28px rgba(0,0,0,.10); /* ほんのり影 */
}

/* 画像は円にフィット */
.voice-fig img{
  width: 100%;
  height: 100%;
  object-fit: cover;            /* 顔が中心に来るように */
  display: block;
}

/* 交互配置やSPの並びは既存のまま（上書き不要） */

/* =========================================================
  Interviews: 余白をしっかり確保（セクション / リード下 / 各row / QA内）
  ※ CSSの一番最後に追記
========================================================= */

/* セクション自体：上下にしっかり */
#interviews{
  padding-block: clamp(72px, 10vw, 128px) !important;
}

/* 見出しブロックの下（リード文の下） */
#interviews .sec-head{
  margin-bottom: clamp(34px, 4.2vw, 56px) !important;
}

/* インタビュアー項目同士の間隔 */
#interviews .voice{
  gap: clamp(34px, 5vw, 72px) !important;
}

/* 1人分（row）内：写真↔テキストの間隔 */
#interviews .voice-row{
  gap: clamp(22px, 3.6vw, 44px) !important;
  align-items: start;
}

/* SP：縦並び時の写真→テキストの間隔も広げる */
@media (max-width: 820px){
  #interviews .voice-row{
    row-gap: clamp(18px, 4.4vw, 30px) !important;
  }
}

/* テキスト側：内側に余白（今ほぼ無い） */
#interviews .voice-body{
  padding: clamp(10px, 1.6vw, 18px) !important;
}

/* 役職→名前の間、名前→QAの間 */
#interviews .voice-meta{
  margin: 0 0 clamp(10px, 1.6vw, 16px) !important;
}
#interviews .voice-sub{
  margin: 0 0 clamp(18px, 2.6vw, 28px) !important;
}

/* QA全体の行間（Qブロック同士） */
#interviews .voice-qa{
  gap: clamp(14px, 2.1vw, 22px) 0 !important;
}

/* QとAの間隔、Aの下（次Qまで）の間隔 */
#interviews .voice-qa dt{
  margin: 0 !important;
  padding-top: clamp(6px, 1vw, 10px);           /* Qの上に少し空気 */
}
#interviews .voice-qa dd{
  margin: clamp(10px, 1.6vw, 14px) 0 0 0 !important;
  padding-bottom: clamp(10px, 1.6vw, 16px) !important;  /* Aの下に余白 */
}

/* Qごとの“仕切り”を薄く（余裕がある見え方に） */
#interviews .voice-qa dt:not(:first-child){
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: clamp(16px, 2.2vw, 24px);
}

/* 写真側も少し余白を持たせて、詰まり感を減らす */
#interviews .voice-fig{
  border-radius: 22px; /* 既存維持 */
  box-shadow: var(--shadow-lg, 0 16px 40px rgba(0,0,0,.08));
}

/* SPの読みやすさ微調整 */
@media (max-width: 640px){
  #interviews .voice-qa dd{
    line-height: 1.85;
  }
}

/* =========================================================
  STAFF INTERVIEWS：囲わないRich（カード感OFF）
  ※ add at the very end
========================================================= */

#interviews{
  --iv-ink: #1f1a14;
  --iv-ink-soft: rgba(31,26,20,.72);
  --iv-hair: rgba(31,26,20,.10);
  --iv-glow: rgba(0,0,0,.08);
}

/* セクション余白 */
#interviews{
  padding-block: clamp(78px, 10vw, 140px) !important;
}
#interviews .sec-head{
  margin-bottom: clamp(36px, 5vw, 70px) !important;
}
#interviews .voice{
  gap: clamp(36px, 5.4vw, 84px) !important;
}

/* ▼▼ ここが肝：囲い（背景面/角丸/影）を完全OFF ▼▼ */
#interviews .voice-row{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  position: relative;
}

/* “カードのハイライト”も消す */
#interviews .voice-row::before{
  content: none !important;
}

/* 代わりに：超薄いヘアラインで“上質な区切り”だけ付ける（囲わない） */
#interviews .voice-row{
  padding-top: clamp(22px, 3.2vw, 34px) !important;
}
#interviews .voice-row:not(:first-child){
  border-top: 1px solid var(--iv-hair) !important;
}

/* 画像↔テキスト間の距離 */
#interviews .voice-row{
  gap: clamp(22px, 3.6vw, 44px) !important;
  align-items: start;
}

/* テキスト側の内側余白（呼吸） */
#interviews .voice-body{
  padding: clamp(6px, 1.2vw, 12px) 0 !important;
}

/* ===== 丸写真：リングで上質に（でも囲い感は出さない） ===== */
#interviews .voice-fig{
  aspect-ratio: 1 / 1;
  border-radius: 50% !important;
  overflow: hidden;
  background: #eee;

  /* “枠線”じゃなくて、柔らかい光のリング */
  box-shadow:
    0 22px 70px var(--iv-glow),
    0 0 0 10px rgba(255,255,255,.60) inset,
    0 0 0 1px rgba(31,26,20,.06) inset;
}
#interviews .voice-fig img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 役職・店名（落ち着いた金） */
#interviews .voice-meta{
  margin: 0 0 clamp(10px, 1.6vw, 16px) !important;
  font-weight: 800;
  color: rgba(199,167,112,.92) !important; /* gold */
  line-height: 1.55;
}

/* 名前：強すぎない上品グラデ */
#interviews .voice-sub{
  margin: 0 0 clamp(18px, 2.6vw, 28px) !important;
  font-family: "Shippori Mincho", serif;
  letter-spacing: .02em;
  line-height: 1.35;
  background: linear-gradient(180deg, #2a241c 0%, #2a241c 60%, rgba(199,167,112,.95) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.30), 0 16px 34px rgba(0,0,0,.10);
}

/* Q/A：箱にせず “行間と線” で整える */
#interviews .voice-qa{
  margin: 0;
  display: grid;
  gap: clamp(14px, 2.1vw, 22px) 0 !important;
}
#interviews .voice-qa dt{
  margin: 0;
  font-weight: 900;
  color: rgba(31,26,20,.92);
  letter-spacing: .01em;
  padding-top: clamp(6px, 1vw, 10px);
}
#interviews .voice-qa dd{
  margin: clamp(10px, 1.6vw, 14px) 0 0 0 !important;
  padding-bottom: clamp(10px, 1.6vw, 16px) !important;
  color: rgba(31,26,20,.78);
  line-height: 1.9;
}

/* Qごとの区切りも “薄いヘアライン” */
#interviews .voice-qa dt:not(:first-child){
  border-top: 1px solid rgba(31,26,20,.08);
  padding-top: clamp(16px, 2.2vw, 24px);
}

/* ===== スマホ：写真→テキストの順は維持 ===== */
@media (max-width: 820px){
  #interviews .voice-row{ grid-template-columns: 1fr; }
  #interviews .voice-row .voice-fig{ order: 1; }
  #interviews .voice-row .voice-body{ order: 2; }
  #interviews .voice-row{ row-gap: clamp(18px, 4.4vw, 30px) !important; }
}

/* =========================================================
  Mobile Q/A accordion：囲わずにトグル（ピルも使わない版）
========================================================= */
@media (max-width: 640px){

  /* Q：タップできる“行”として見せる（背景なし） */
  #interviews .voice-qa dt{
    cursor: pointer;
    position: relative;
    padding-right: 44px;
  }

  /* 右端に小さなchevronだけ（箱は作らない） */
  #interviews .voice-qa dt::after{
    content:"";
    position:absolute;
    right: 6px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(31,26,20,.45);
    border-bottom: 2px solid rgba(31,26,20,.45);
    transform: translateY(-55%) rotate(45deg);
    transition: transform .18s ease;
  }
  #interviews .voice-qa dt.is-open::after{
    transform: translateY(-40%) rotate(-135deg);
  }

  /* A：トグル（開閉）。背景面は作らず、余白だけで上質に */
  #interviews .voice-qa dd{
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    transition: max-height .22s ease, opacity .18s ease, margin .18s ease;
  }
  #interviews .voice-qa dd.is-open{
    max-height: 520px;
    opacity: 1;
    margin-top: 10px !important;
    padding-bottom: 16px !important;
  }
}



/* ============================
  Staff's Day
============================ */

/* --- カードの見た目（既存をスコープ化） --- */
#dayflow .day-card{
  display:grid;
  grid-template-rows:auto auto 1fr; /* ヘッダ / 画像 / 本文 */
  gap:10px;
  background:#fff;
  border:1px solid rgba(169,139,88,.22);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding: clamp(14px, 2vw, 18px);
  min-height:360px;
  min-width:0;              /* ← コンテンツが横に広がって押し広げない */
  box-sizing:border-box;    /* ← gap計算とズレないように */
}
#dayflow .day-head{ text-align:center; padding-top:6px; }
#dayflow .day-time{
  margin:0; font-weight:800;
  font-size:clamp(18px, 2.2vw, 22px);
  letter-spacing:.02em;
}
#dayflow .day-meta{
  margin:.2em 0 0; color:var(--gray-2);
  line-height:1.6; font-size:.95rem;
}
#dayflow .day-fig{
  margin:4px 0 0; border-radius:22px; overflow:hidden;
  background:#eee; aspect-ratio:1/1; display:block;
}
#dayflow .day-fig img{ width:100%; height:100%; object-fit:cover; display:block; }
#dayflow .day-body{ display:flex; align-items:flex-start; }
#dayflow .day-txt{ margin:.4em 0 0; color:var(--gray-2); line-height:1.9; }
#dayflow .clamp-4{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden;
}

/* --- スライダーフレーム --- */
#dayflow .day-slider{
  --perView: 3;                           /* PCは3枚 */
  --gap: clamp(14px, 2.4vw, 22px);
  position:relative;
}
#dayflow .day-viewport{
  position:relative;
  overflow:hidden;                        /* はみ出しを隠す */
  width:100%;
}

/* 横並びトラック（wrap禁止で横一列に並べる） */
#dayflow .day-track{
  display:flex;
  flex-wrap:nowrap;
  gap:var(--gap);
  position:relative;
}

/* ★ここが肝：1カードの幅 = 1/--perView（古い指定を確実に上書き） */
#dayflow .day-track > .day-card{
  flex:0 0 calc((100% - (var(--gap) * (var(--perView) - 1))) / var(--perView)) !important;
  max-width:calc((100% - (var(--gap) * (var(--perView) - 1))) / var(--perView));
}

/* --- ナビ（左右） --- */
#dayflow .day-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff; border:1px solid rgba(169,139,88,.35);
  box-shadow:var(--shadow); color:#3b2d14; font-size:20px; font-weight:700;
}
#dayflow .day-prev{ left:-10px; }
#dayflow .day-next{ right:-10px; }
@media (max-width:640px){
  #dayflow .day-prev{ left:0; } 
  #dayflow .day-next{ right:0; }
}

/* --- ドット --- */
#dayflow .day-dots{
  display:flex; gap:8px; justify-content:center; margin-top:12px;
}
#dayflow .day-dots button{
  width:8px; height:8px; border-radius:999px; border:0;
  background:#d9d3c6; opacity:.8; cursor:pointer;
}
#dayflow .day-dots button.is-active{ background:#a98b58; opacity:1; }

/* --- レスポンシブ切替：2枚/1枚 --- */
@media (max-width:980px){ #dayflow .day-slider{ --perView: 2; } }
@media (max-width:640px){ #dayflow .day-slider{ --perView: 1; } }

/* --- 非JSフォールバック（任意）：JSが効かない場合はグリッド表示 --- */
#dayflow .day-cards{
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(3, minmax(240px,1fr));
}
@media (max-width:980px){
  #dayflow .day-cards{ grid-template-columns:repeat(2, minmax(240px,1fr)); }
}
@media (max-width:640px){
  #dayflow .day-cards{ grid-template-columns:1fr; }
}

/* ===== Dayflow: gold text & centered body ===== */

/* 金色グラデ（時間） */
#dayflow .day-time{
  background: linear-gradient(180deg,#6a5430 0%, #6a5430 55%, var(--gold-3, #c7a770) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.35), 0 10px 18px rgba(0,0,0,.08);
}

#dayflow .day-meta{
  color: #6a5430;
}
#dayflow .day-meta .day-name,
#dayflow .day-meta b{
  background: linear-gradient(180deg,#6a5430 0%, #6a5430 55%, var(--gold-3, #c7a770) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 説明テキストをカード中央に */
#dayflow .day-body{
  display: flex;
  align-items: center;       /* 縦中央 */
  justify-content: center;   /* 横中央 */
  text-align: center;        /* 文字中央 */
  min-height: 72px;          /* 多少の高さを確保（任意） */
}
#dayflow .day-txt{
  margin: 0;                 /* 余白を詰めて中央感を強化 */
  line-height: 1.9;
}

/* ==== Staff's Day CTA ボタンサイズ調整 ==== */
#dayflow .day-cta{
  margin-top: 24px;          /* 余白はそのまま or 少し広めにしたいなら微調整 */
  text-align: center;
}

#dayflow .day-cta .btn.btn-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* ヒーロー下ボタンくらいの横幅＆高さ */
  min-width: min(320px, 88vw);
  padding: 0.95em 2.6em;
  font-size: clamp(15px, 1.7vw, 17px);
}

/* ==== Staff's Day CTA：②のゴールドPillに統一 ==== */
#dayflow .day-cta{
  margin-top: 24px;
  text-align: center;
}

/* 既存 .btn/.btn-primary を上書き（HTMLはそのままでOK） */
#dayflow .day-cta .btn.btn-primary{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;

  min-width: min(320px, 88vw);
  padding: 1.05em 2.2em;
  border-radius: 999px;

  font-weight: 800;
  letter-spacing: .08em;
  color: #1f1a14;
  text-decoration: none;

  /* ②と同じゴールドグラデ／フチ／影 */
  background: linear-gradient(180deg, #f2e5c6, #e7d39b 60%, #dcc380);
  border: 1px solid rgba(169,139,88,.45);
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 12px 26px rgba(169,139,88,.22);

  transition: transform .12s ease, box-shadow .2s ease;
  overflow: hidden;
  isolation: isolate;           /* 背面スクリプトを背面に固定 */
}

/* 背面のスクリプト文字（②と同仕様） */
#dayflow .day-cta .btn.btn-primary::before{
  content: "Entry";             /* 好みで "Visit" などに変更可 */
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  white-space: nowrap;
  font-family: "Dancing Script","Allura","Great Vibes",cursive;
  font-size: clamp(48px, 10vw, 120px);
  line-height: 1;
  letter-spacing: .02em;
  color: rgba(169,139,88,.18);
  pointer-events: none;
  z-index: 0;
  transform: translateY(2px);
}

/* テキストは前面に */
#dayflow .day-cta .btn.btn-primary > span,
#dayflow .day-cta .btn.btn-primary > strong,
#dayflow .day-cta .btn.btn-primary > em{
  position: relative;
  z-index: 1;
}

/* ホバーも②と同じ */
#dayflow .day-cta .btn.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 18px 34px rgba(169,139,88,.28);
}

/* モバイル微調整 */
@media (max-width:560px){
  #dayflow .day-cta .btn.btn-primary{
    padding: .95em 1.8em;
  }
  #dayflow .day-cta .btn.btn-primary::before{
    font-size: clamp(40px, 16vw, 88px);
  }
}


/* ============================
   #dayflow 専用オーバーライド
============================ */

/* 枚数と隙間（画面幅で切替） */
#dayflow .day-slider{
  --perView: 3;                              /* PC: 3枚 */
  --gap: clamp(14px, 2.4vw, 22px);           /* 既存のカード間隔に合わせる */
  position: relative;
}
@media (max-width:980px){ #dayflow .day-slider{ --perView: 2; } }
@media (max-width:640px){ #dayflow .day-slider{ --perView: 1; } }

/* ビューポート：横スクロール＋スナップ */
#dayflow .day-viewport{
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

/* トラック：横一列・折返し無し */
#dayflow .day-track{
  display: flex;
  flex-wrap: nowrap;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ★カード幅＝1/--perView を強制（古い 100% 指定を上書き） */
#dayflow .day-track > .day-card{
  --_w: calc((100% - (var(--gap) * (var(--perView) - 1))) / var(--perView));
  flex: 0 0 var(--_w) !important;
  width: var(--_w) !important;
  min-width: var(--_w) !important;
  max-width: var(--_w) !important;
  scroll-snap-align: start;
  box-sizing: border-box;
  min-height: 360px; /* 既存見た目:必要なら調整可 */
}

/* 念のため、どこかに残っている 1枚100% 指定を潰す */
.day-track > .day-card{
  flex-basis: auto !important;
  width: auto !important;
  min-width: 0 !important;
}

/* 矢印 */
#dayflow .day-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff; border:1px solid rgba(169,139,88,.35);
  box-shadow:var(--shadow); color:#3b2d14; font-size:20px; font-weight:700;
  z-index: 2;
}
#dayflow .day-prev{ left:-10px; }
#dayflow .day-next{ right:-10px; }
@media (max-width:640px){
  #dayflow .day-prev{ left:0; } 
  #dayflow .day-next{ right:0; }
}

/* ドット */
#dayflow .day-dots{
  display:flex; gap:8px; justify-content:center; margin-top:12px;
}
#dayflow .day-dots button{
  width:8px; height:8px; border-radius:999px; border:0;
  background:#d9d3c6; opacity:.8; cursor:pointer;
}
#dayflow .day-dots button.is-active{ background:#a98b58; opacity:1; }

/* ▼ スクロールバーを消す（全ブラウザ） */
#dayflow .day-viewport{
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE/Edge レガシー */
}
#dayflow .day-viewport::-webkit-scrollbar{ display: none; } /* Chrome/Safari */

/* ▼ “ふわっ”演出用（入ってくる先頭カードに適用） */
#dayflow .day-card{
  transition: opacity .55s ease, transform .55s ease;
}
#dayflow .day-card.is-enter{
  opacity: .25;
  transform: translateY(10px) scale(.985);
}

/* ▼ 矢印を一番上に固定（中央寄せ解除） */
#dayflow .day-nav{
  top: 0;
  transform: none;
  margin-top: -6px; /* 見た目で微調整。-8〜0pxで好み調整OK */
}

/* ▼ day-slider をグリッド化： [←] [viewport] [→] の3列 */
#dayflow .day-slider{
  display: grid;
  grid-template-columns: 40px 1fr 40px; /* 矢印=40px, 中央=ビューポート */
  grid-auto-rows: auto;
  align-items: center;                   /* ← 矢印を“行の中央”に縦揃え */
  column-gap: 0;
  position: relative;
}

/* 要素の配置（HTML順のままで配置） */
#dayflow .day-prev   { grid-column: 1; grid-row: 1; }
#dayflow .day-viewport{ grid-column: 2; grid-row: 1; }
#dayflow .day-next   { grid-column: 3; grid-row: 1; }
#dayflow .day-dots   { grid-column: 1 / -1; grid-row: 2; }

/* 矢印は“端に固定”しつつボタン見た目は維持（positionはstaticでOK） */
#dayflow .day-nav{
  position: static;                    /* ← ここがポイント：absoluteやtop指定をやめる */
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff; border:1px solid rgba(169,139,88,.35);
  box-shadow:var(--shadow); color:#3b2d14; font-size:20px; font-weight:700;
}
/* モバイルの左右余白を少し詰めたい場合だけ（任意） */
@media (max-width:640px){
  #dayflow .day-slider{ grid-template-columns: 36px 1fr 36px; }
}

/* 既存の absolute 配置用スタイルを無効化（あれば削除 or 上書き） */
#dayflow .day-prev{ left:auto; }
#dayflow .day-next{ right:auto; }

/* #dayflow CTAボタンを中央配置 */
#dayflow .day-cta{
  display: grid;            /* 中央寄せを確実に */
  place-items: center;      /* 水平・垂直とも中央 */
  margin-top: clamp(16px, 3vw, 26px);
}

/* 念のための保険（古いfloatやflex影響を無視） */
#dayflow .day-cta .btn{
  margin: 0 auto;           /* ブロック化されても中央に来る */
  display: inline-flex;     /* 既存のボタン見た目を維持 */
}

#dayflow .day-activity{
  margin:.2em 0 0;
  font-weight:700;
  font-size:clamp(13px, 1.6vw, 15px);
  color:var(--gray-2);
  letter-spacing:.06em;
}

/* =========================================================
  Staff's One Day (#dayflow) 余白増 + 枠線なし + Rich表現 + CTAのEntry背景除去
  ※ CSSの一番最後に追記
========================================================= */

/* セクション外側（上下） */
#dayflow{
  padding-block: clamp(72px, 10vw, 128px) !important;
}

/* 見出しブロックの下（リード→スライダーの距離） */
#dayflow .sec-head{
  margin-bottom: clamp(34px, 4.2vw, 56px) !important;
}

/* スライダー下（ドット/CTAとの間） */
#dayflow .day-slider{
  margin-bottom: clamp(18px, 3vw, 32px) !important;
}
#dayflow .day-dots{
  margin-top: clamp(14px, 2.4vw, 22px) !important;
}

/* カード：枠線を消して、内側余白と呼吸を増やす */
#dayflow .day-card{
  /* 余白増 */
  padding: clamp(22px, 3.2vw, 32px) !important;
  gap: clamp(14px, 2.2vw, 22px) !important;

  /* “枠線感”をなくす（cheap対策） */
  border: 0 !important;

  /* 背景は「白カード」感を弱めて馴染ませる */
  background: rgba(255,255,255,.35) !important;

  /* 影だけでリッチに（薄め） */
  box-shadow: 0 18px 40px rgba(0,0,0,.06) !important;

  border-radius: 22px !important;
}

/* ヘッダー（時間＋内容）に余白 */
#dayflow .day-head{
  text-align: center;
  padding-top: 0 !important;
  padding-bottom: clamp(6px, 1.2vw, 12px);
  display: grid;
  gap: clamp(8px, 1.4vw, 12px);
}

/* 時間：給与例の“支給金額”系の上品さに寄せる */
#dayflow .day-time{
  margin: 0 !important;
  font-family: "Shippori Mincho", serif;
  font-weight: 900 !important;
  font-size: clamp(22px, 2.8vw, 30px) !important;
  line-height: 1.05;
  letter-spacing: .02em;

  background: linear-gradient(180deg, #1e1a14 0%, #1e1a14 55%, var(--gold-3, #c7a770) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.35), 0 14px 30px rgba(0,0,0,.10);
}

/* 内容（営業開始など）：見出しとして扱う（改行を必ず成立させる） */
#dayflow .day-activity{
  margin: 0 !important;
  font-weight: 900;
  font-size: clamp(15px, 1.9vw, 18px);
  line-height: 1.2;
  letter-spacing: .08em;
  color: #2b2620;

  /* “リッチさ”のために薄い下線（余白も確保） */
  display: inline-block;
  padding-bottom: clamp(10px, 1.6vw, 14px);
  position: relative;
}
#dayflow .day-activity::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(220px, 70%);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(199,167,112,.0), rgba(199,167,112,.9), rgba(199,167,112,.0));
  opacity: .9;
}

/* 画像：上下の詰まりを解消 */
#dayflow .day-fig{
  margin: 0 !important;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 1/1;
  box-shadow: 0 14px 30px rgba(0,0,0,.06);
}

/* 説明文：カード内がギチギチに見えないよう余白 */
#dayflow .day-body{
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: clamp(6px, 1.2vw, 12px);
  padding-bottom: clamp(6px, 1.2vw, 12px);
  min-height: clamp(84px, 10vw, 120px) !important;
}
#dayflow .day-txt{
  margin: 0 !important;
  line-height: 1.9;
  color: var(--gray-2, #666);
}

/* CTA：ボタンサイズは維持、筆記体 “Entry” 背景だけ削除 */
#dayflow .day-cta{
  margin-top: clamp(18px, 3vw, 30px) !important;
  display: grid;
  place-items: center;
}
#dayflow .day-cta .btn.btn-primary{
  /* 以前のCTAサイズを維持 */
  min-width: min(320px, 88vw);
  padding: 1.05em 2.2em;
  font-size: clamp(15px, 1.7vw, 17px);
}
/* “Entry” 背景をオフ */
#dayflow .day-cta .btn.btn-primary::before{
  content: none !important;
}

/* =========================================================
  #dayflow CTA：既存HTMLのまま hero-cta 風に寄せる（1ボタン版）
========================================================= */

#dayflow .day-cta{
  padding-block: clamp(14px, 3vw, 26px) !important;
  display: flex;
  justify-content: center;
}

#dayflow .day-cta .btn.btn-primary{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;

  min-width: clamp(220px, 22vw, 320px);
  padding: 1.05em 2.0em;
  border-radius: 999px;

  font-weight: 800;
  letter-spacing: .06em;
  text-decoration: none;

  /* ① visit と同じ */
  color: #1f1a14;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    0 1px 0 rgba(255,255,255,.65) inset,
    0 14px 30px rgba(0,0,0,.14);
  backdrop-filter: blur(6px);

  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
#dayflow .day-cta .btn.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.75) inset,
    0 18px 36px rgba(0,0,0,.18);
}

/* Entry 背景は確実に消す */
#dayflow .day-cta .btn.btn-primary::before{ content:none !important; }


/* =========================================================
  #dayflow CTA：hero-cta と同サイズ / 金寄り
========================================================= */

#dayflow .day-cta{
  padding-block: clamp(12px, 3vw, 24px) !important; /* hero-ctaと同じ */
  display:flex;
  justify-content:center;
  background: transparent !important;
  border: none !important;
}

/* 既存HTML(.btn.btn-primary)を hero-cta__btn と同寸法へ */
#dayflow .day-cta .btn.btn-primary{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;

  /* hero-cta__btn と同じ */
  min-width: clamp(220px, 22vw, 320px) !important;
  padding: 1.05em 2.0em !important;
  border-radius: 999px !important;

  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-decoration: none !important;

  /* 金寄り（hero-cta__btn--line 相当） */
  color: #1f1a14 !important;
  background: linear-gradient(180deg, #f3e7cc, #e6d09a 60%, #d9bf76) !important;
  border: 1px solid rgba(169,139,88,.45) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 16px 34px rgba(169,139,88,.22) !important;

  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}

/* Entry背景は完全に無効 */
#dayflow .day-cta .btn.btn-primary::before{ content:none !important; }

#dayflow .day-cta .btn.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 20px 40px rgba(169,139,88,.28) !important;
}

/* SPも hero-cta と同じ挙動（幅寄り） */
@media (max-width: 640px){
  #dayflow .day-cta .btn.btn-primary{
    min-width: 86vw !important;
    padding: .95em 1.8em !important;
  }
}

/* =========================================================
  #dayflow 見出し：時間を小さく / 内容も時間と同じ表現
========================================================= */

#dayflow .day-head{
  display:grid;
  gap: clamp(8px, 1.4vw, 12px);
  text-align:center;
  padding-top: 6px;
  padding-bottom: clamp(10px, 1.8vw, 16px);
}

/* 時間：さらに小さく */
#dayflow .day-time{
  margin: 0 !important;
  font-family: "Shippori Mincho", serif;
  font-weight: 900 !important;
  font-size: clamp(14px, 1.6vw, 18px) !important; /* ← さらに小さめ */
  line-height: 1.05;
  letter-spacing: .08em;

  /* Rich（時間の色） */
  background: linear-gradient(180deg, #1e1a14 0%, #1e1a14 55%, var(--gold-3, #c7a770) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.35), 0 10px 22px rgba(0,0,0,.10);
}

/* 内容：時間と「同じ色/同じ表現」にする（サイズだけ少し大きく） */
#dayflow .day-activity{
  margin: 0 !important;
  font-family: "Shippori Mincho", serif;
  font-weight: 900 !important;
  font-size: clamp(18px, 2.3vw, 24px) !important;
  line-height: 1.15;
  letter-spacing: .08em;

  /* ★時間と同じ見た目（色も同じ） */
  background: linear-gradient(180deg, #1e1a14 0%, #1e1a14 55%, var(--gold-3, #c7a770) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.35), 0 10px 22px rgba(0,0,0,.10);
}

/* =========================================
  #dayflow CTA（hero-ctaボタンを少し横長＆縦厚に）
  ※CSSの一番最後に追記
========================================= */

/* dayflow内のCTAコンテナ（今あなたが使ってる .container.hero-cta__inner） */
#dayflow .hero-cta__inner{
  justify-content: center;
  padding-block: clamp(14px, 3vw, 26px);
}

/* ここが本体：ボタンを横長＋縦厚に */
#dayflow .hero-cta__btn{
  /* 横：少し広げる（元: clamp(220px, 22vw, 320px)） */
  min-width: clamp(260px, 28vw, 380px) !important;

  /* 縦：少し厚く（上下padding増） */
  padding: 1.20em 2.35em !important;

  /* 文字が増えても窮屈にならないように */
  gap: .7em !important;
}

/* テキスト全体の見え方（縦厚にした分、詰まり防止） */
#dayflow .hero-cta__btntext{
  gap: .18em;
}

/* メイン文字をほんの少しだけ大きくして“厚み”に負けないように（不要なら削除OK） */
#dayflow .hero-cta__main{
  font-size: 16px;
}

/* SPは幅は既存の「ほぼフル幅」を維持しつつ、縦厚だけ反映 */
@media (max-width: 640px){
  #dayflow .hero-cta__btn{
    min-width: 86vw !important;
    padding: 1.10em 2.10em !important;
  }
}


/* =========================
   hero CTA button: center fix
   - keep same look
   - center icon + text perfectly
   - slightly bigger
========================= */

/* ボタン本体（見た目は既存のまま、レイアウトだけ上書き） */
.hero-cta__btn.hero-cta__btn--line{
  display: flex;
  align-items: center;
  justify-content: center;                 /* ← 中身をど真ん中 */
  gap: 12px;

  /* ほんの少し大きく（不要なら数値だけ戻してOK） */
  min-width: clamp(260px, 28vw, 380px);
  padding: 1.15em 2.3em;
}

/* アイコン（▶︎）の幅が原因でズレるのを防ぐ */
.hero-cta__icon{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* テキスト側も中央寄せを明示 */
.hero-cta__btntext{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 中の main もズレ防止 */
.hero-cta__main{
  display: inline-block;
  text-align: center;
}

/* SPは幅広め＋押しやすく */
@media (max-width: 640px){
  .hero-cta__btn.hero-cta__btn--line{
    min-width: 86vw;
    padding: 1.05em 2.1em;
  }
}

.hero-cta__btn.hero-cta__btn--line{
  min-width: clamp(320px, 34vw, 460px);
  padding: 1.15em 2.6em;
}

/* =========================================
  #dayflow CTA：スマホだけ“本当に中央”に固定
  - min-width + padding で横幅オーバーしてズレるのを潰す
========================================= */
@media (max-width: 640px){

  /* CTAの親：幅100%で中央寄せの土台を作る */
  #dayflow .hero-cta__inner{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* ボタン本体：幅をvwで決めて overflow を起こさない */
  #dayflow .hero-cta__btn.hero-cta__btn--line{
    box-sizing: border-box !important;   /* ←これが重要（padding込みで幅計算） */
    width: 86vw !important;
    max-width: 420px !important;

    /* 既存の min-width を完全に無効化 */
    min-width: 0 !important;

    margin: 0 auto !important;
  }
}


/* =========================================================
  BENEFITS（チェック必ず出す / 背景完全透明 / カード感ゼロ / PC:3列）
  ※ style.css の一番最後に追記（最終上書き）
========================================================= */

#benefits{
  --bf-ink: #111111;                 /* 別の黒 */
  --bf-line: rgba(17,17,17,.12);     /* 仕切りの極薄ライン */
  --bf-check1: #f3e7cc;
  --bf-check2: #d9bf76;
}

/* 見出し下余白 */
#benefits .sec-head{
  margin-bottom: clamp(18px, 3vw, 32px) !important;
}

/* 親に残るパネル/背景/影を完全排除 */
#benefits .container,
#benefits .benefits-grid,
#benefits .benefits-left,
#benefits .benefits-list,
#benefits .benefits-list > li{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* PC:3列 */
#benefits .benefits-list{
  list-style: none !important;
  margin: 0 auto !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1.6vw, 16px) !important;

  max-width: 1040px;
}

/* 旧grid固定を潰す */
#benefits .benefits-list > li{
  grid-column: auto !important;
  grid-row: auto !important;
}

/* ===== “行”デザイン（カードにしない） ===== */
#benefits .benefits-list > li{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;

  padding: clamp(10px, 1.6vw, 14px) 0 !important;  /* 背景差が出ないよう横padding薄め */

  color: var(--bf-ink) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;

  /* 下だけ薄い仕切り。枠ではない */
  border-bottom: 1px solid var(--bf-line) !important;
}


/* 旧 ::after（点線など）が残ってても殺す */
#benefits .benefits-list > li::after{
  content: none !important;
}

/* ===== チェック（必ず出す） =====
   既存CSSの counter / absolute を全部潰して上書き */
#benefits .benefits-list > li::before{
  content: "" !important;                 /* ←ここが無いと出ない */
  display: inline-block !important;
  flex: 0 0 auto !important;

  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;

  /* 既存の absolute 指定があっても無効化 */
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;

  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23111111' d='M9.2 16.6 4.9 12.3l1.4-1.4 2.9 2.9 8.5-8.5 1.4 1.4z'/%3E%3C/svg%3E") center/14px 14px no-repeat,
    linear-gradient(180deg, var(--bf-check1), var(--bf-check2));

  /* “カード影”じゃなく、艶だけ */
  box-shadow: 0 1px 0 rgba(255,255,255,.75) inset !important;
}

/* Auto Text Scaler が ul に wrap を入れても崩れないように */
#benefits .benefits-list .text-scale-wrap,
#benefits .benefits-list .text-scale{
  color: inherit !important;
  background: transparent !important;
}

/* レスポンシブ */
@media (max-width: 980px){
  #benefits .benefits-list{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #benefits .benefits-list > li:nth-last-child(-n + 2){
    border-bottom-color: transparent !important;
  }
}
@media (max-width: 640px){
  #benefits .benefits-list{
    grid-template-columns: 1fr !important;
  }
  #benefits .benefits-list > li:last-child{
    border-bottom-color: transparent !important;
  }
}

/* =========================================================
  BENEFITS：余白をしっかり（説明文下 / リスト上下 / 各項目の行間）
  ※ #benefits にだけ効く上書き
========================================================= */

/* 説明文（sec-lead）の下に余白をしっかり */
#benefits .sec-head .sec-lead{
  margin-bottom: clamp(22px, 3.4vw, 40px) !important;
  line-height: 1.85 !important;
}

/* 見出しブロック全体と、リストの間も少し確保（保険） */
#benefits .sec-head{
  margin-bottom: clamp(20px, 3vw, 34px) !important;
}

/* リスト全体：上下に余白（セクション内で詰まらないように） */
#benefits .benefits-list{
  margin-top: clamp(10px, 2vw, 18px) !important;
  margin-bottom: clamp(10px, 2.6vw, 26px) !important;
}

/* 各項目：上下余白を増やす + 行の高さに余裕 */
#benefits .benefits-list > li{
  padding-top: clamp(14px, 2.2vw, 18px) !important;
  padding-bottom: clamp(14px, 2.2vw, 18px) !important;
  gap: 14px !important;
  line-height: 1.45 !important;
}

/* チェックと文字が縦にズレやすい場合の微調整 */
#benefits .benefits-list > li::before{
  margin-top: 1px !important;
}


/* =========================================================
  BENEFITS：スマホ(1列)では最後の1つ以外は下線を出す（最終上書き）
========================================================= */
@media (max-width: 640px){
  /* いったん全て下線ありに戻す */
  #benefits .benefits-list > li{
    border-bottom-color: var(--bf-line) !important;
  }
  /* 最後の1つだけ下線なし */
  #benefits .benefits-list > li:last-child{
    border-bottom-color: transparent !important;
  }
}

/* BENEFITS: always show dividers (including the last row / last item) */
#benefits .benefits-list > li{
  border-bottom: 1px solid var(--bf-line) !important;
}

/* kill “hide last row” rules (3-col / 2-col / 1-col) */
#benefits .benefits-list > li:nth-last-child(-n + 3),
#benefits .benefits-list > li:nth-last-child(-n + 2),
#benefits .benefits-list > li:last-child{
  border-bottom: 1px solid var(--bf-line) !important;
}





/* =========================================================
  Stores
========================================================= */

/* Stores：1カード中央寄せ */
.stores-wrap{
  display:flex;
  justify-content:center;
}

@media (max-width:900px){
  .stores-wrap{ display:block; }
}

.stores-block{
  background:#fff;
  border:1px solid rgba(169,139,88,.25);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:clamp(14px, 2.2vw, 18px);
  width:100%;
  max-width:960px;
  margin-inline:auto;
}

/* 見出し（エリア別店舗） */
.stores-block__head{
  margin:0 0 8px;
  font-family:"Shippori Mincho",serif;
  /* 金色のグラデ文字（既存意図を維持） */
  background: linear-gradient(180deg, #6a5430 0%, #6a5430 55%, #c7a770 100%);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.35), 0 14px 30px rgba(0,0,0,.12);
}

/* area(=エリアのトグル) */
.area{
  border-top:1px dashed #eee3c9;
  padding-top:10px;
  margin-top:10px;
}
.area:first-of-type{
  border-top:0;
  padding-top:0;
  margin-top:0;
}

/* summary 部分を横並び（左：名前／右：開閉ボタン） */
.area__summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
}
.area__summary::-webkit-details-marker{ display:none; }
.area__name{
  font-weight:700;
  color:#3b2d14;
}

/* 擬似ボタン（回転で開閉表現） */
.area__toggle{
  border:1px solid var(--gray-4);
  background:#fff;
  border-radius:8px;
  padding:.25em .6em;
  font-size:.9rem;
  transform:rotate(0);
  transition:transform .2s ease;
}
.area[open] .area__toggle{ transform:rotate(180deg); }

/* リスト本体 */
.shop-list{
  list-style:none;
  margin:8px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.shop-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:center;
  padding:14px 12px;
  border:1px solid #eee;
  border-radius:12px;
  background:#fff;
  position:relative;
  overflow:hidden;
}

.shop-main{ min-width:0; }
.shop-name{ display:block; }

/* 住所：手入力の改行も、JSが入れる改行も両方効かせる */
.shop-addr{
  display:block;
  color:var(--gray-2);
  white-space:pre-line;
  line-height:1.8;
  font-feature-settings:"pnum","tnum";
}

/* 飾り罫（ゴールドの薄いグラデ罫） */
.shop-main::after{
  content:"";
  display:block;
  height:1px;
  margin-top:10px;
  background:linear-gradient(90deg, transparent, rgba(169,139,88,.5), transparent);
  opacity:.7;
}

/* 不要になった旧“—”は非表示 */
.shop-note{ display:none; }


/* =========================================================
  ★ サブボタン化（CTA感を消す）
========================================================= */
.store-btn{
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  /* サイズ控えめ */
  padding:.45em .9em;
  font-size:.85rem;

  /* 目立たせない色味 */
  color:#3b2d14;                          /* 文字色はショップ名と同系 */
  background:#fff;                        /* 金グラデやめる */
  border:1px solid rgba(0,0,0,.12);       /* 薄い枠 */
  border-radius:999px;

  /* 強い影・浮きなし */
  box-shadow:none;
  font-weight:600;
  letter-spacing:.02em;
  transition:background .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
  opacity:.9;
}

.store-btn:hover,
.store-btn:focus-visible{
  background:#f7f7f7;                     /* うっすら反応する程度 */
  border-color:rgba(169,139,88,.38);      /* テーマに寄せた薄金 */
  color:#2f2413;
  opacity:1;
  outline:none;
}

/* =========================================================
  モーダル内URLリンクのホバー（既存）
========================================================= */
.store-modal a,
#storeModal a,
.modal-store a{
  display:inline-flex;
  align-items:center;
  gap:.35em;
  text-decoration: underline;
  text-decoration-color: rgba(199,167,112,.65);
  text-underline-offset: .15em;
  transition: transform .18s ease, box-shadow .18s ease, color .18s ease, text-decoration-color .18s ease;
  will-change: transform;
}

.store-modal a:hover,
.store-modal a:focus-visible,
#storeModal a:hover,
#storeModal a:focus-visible,
.modal-store a:hover,
.modal-store a:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  color: #8a6a34;
  text-decoration-color: rgba(199,167,112,.95);
  outline: none;
}

.store-modal a svg,
#storeModal a svg,
.modal-store a svg{
  width:16px;
  height:16px;
  flex:0 0 auto;
}


/* =========================================================
  Openings
========================================================= */
/* ===== Openings (Area slider) ===== */
#pickup-news .sec-head{ text-align:center; }
#pickup-news .sec-ttl{ margin:0; }

.openings{
  background:#fff;
  border-radius:16px;
  padding:18px clamp(16px, 2.4vw, 26px) 26px;
  border:6px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,#c7a770,#e2c98f,#f0e6cf) border-box;
  box-shadow: 0 24px 60px rgba(0,0,0,.07);
}
.openings-lead{
  margin:4px 0 14px;
  text-align:center;
  font-weight:600;
  font-size:clamp(.95rem, 1vw, 1.05rem);
}

/* 枚数切替（CSSカスタムプロパティ） */
#openingsSlider{ --perView: 5; --gap: clamp(12px, 2vw, 18px); position:relative; }
@media (max-width:1200px){ #openingsSlider{ --perView: 4; } }
@media (max-width:980px) { #openingsSlider{ --perView: 3; } }
@media (max-width:640px) { #openingsSlider{ --perView: 2; } }

.openings-viewport{
  overflow:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.openings-viewport::-webkit-scrollbar{ display:none; }

.openings-track{
  display:flex; gap:var(--gap); list-style:none; margin:0; padding:4px 0 0;
}

.open-card{
  flex:0 0 calc((100% - (var(--gap) * (var(--perView) - 1))) / var(--perView));
  max-width:calc((100% - (var(--gap) * (var(--perView) - 1))) / var(--perView));
  background:#fff;
  border:1px solid #eee3c9;
  border-radius:14px;
  padding:12px 12px 10px;
  box-shadow: var(--shadow);
}

.open-area{
  margin:0 0 8px;
  text-align:center;
  font-weight:700;
  color:#2b2620;
}

/* 画像（プレースホルダーつき） */
.open-fig{
  margin:0; width:100%; aspect-ratio:4/3;
  border-radius:10px; overflow:hidden; background:#9e9e9e33;
  display:block;
}
.open-fig img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ドット */
.openings-dots{ display:flex; gap:8px; justify-content:center; margin-top:14px; }
.openings-dots button{
  width:8px; height:8px; border-radius:999px; border:0; cursor:pointer;
  background:#d9d3c6; opacity:.85;
}
.openings-dots button.is-active{ background:#a98b58; opacity:1; }

/* =========================================
   PICKUP NEWS section spacing（上/下 + 説明文下だけ）
========================================= */

/* セクション全体の上下余白 */
#pickup-news.sec{
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(56px, 8vw, 96px);
}

/* 説明文（sec-lead）の下だけ余白 */
#pickup-news .sec-head .sec-lead{
  margin-bottom: clamp(18px, 3vw, 32px);
  line-height: 1.8; /* 読みやすさだけ */
}

/* =========================================================
  Openings：枠色が浮くので、"縁"ではなく "面＋余白＋奥行き" でリッチに
  ※ CSSの一番最後に追記（上書き）
========================================================= */

/* 外枠の金グラデをやめる（周囲と馴染ませる） */
#pickup-news .openings{
  /* 周囲の面に溶け込む、ほんのり暖色のサーフェス */
  background: linear-gradient(180deg,
      rgba(255,255,255,.92) 0%,
      rgba(248,244,236,.92) 100%) !important;

  /* “枠線”はほぼ無くす：髪の毛くらいの薄さに */
  border: 1px solid rgba(31,26,20,.06) !important;

  /* 角丸はそのまま、影を上品に（枠っぽさ減） */
  border-radius: 18px !important;
  box-shadow:
    0 22px 60px rgba(0,0,0,.06),
    0 1px 0 rgba(255,255,255,.65) inset !important;
}

/* ついでにカード側の境界も同系統に寄せる（浮きを防ぐ） */
#pickup-news .open-card{
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(31,26,20,.08) !important; /* #eee3c9 より馴染む */
  box-shadow: 0 14px 34px rgba(0,0,0,.06) !important;
}

/* ドットの色も “金”強め → ちょい落ち着かせる */
#pickup-news .openings-dots button{
  background: rgba(31,26,20,.18) !important;
  opacity: .55 !important;
}
#pickup-news .openings-dots button.is-active{
  background: rgba(31,26,20,.45) !important;
  opacity: 1 !important;
}

/* =========================
   Pickup News (SP)
   - 外側の白カードは消す
   - 横スクロール(スワイプ)は維持
   - 端に“余白(ガター)”を作る
========================= */
@media (max-width: 640px){

  /* 外側カードを無効化（白背景/枠/影） */
  #pickup-news .openings{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }

  /* 横スクロールは viewport 側で有効化（ここが重要） */
  #pickup-news .openings-viewport{
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;

    /* 端との余白（ガター） */
    padding-inline: 16px !important;

    /* スクロール開始位置もガターに合わせる（地味に効く） */
    scroll-padding-inline: 16px;
  }

  /* トラック側は余計なpaddingを持たない（viewportのpaddingに任せる） */
  #pickup-news .openings-track{
    padding: 4px 0 0 !important;  /* 上だけ軽く */
    margin: 0 !important;
    list-style: none;
  }

  /* スクロールバー非表示は維持 */
  #pickup-news .openings-viewport{
    scrollbar-width: none;         /* Firefox */
    -ms-overflow-style: none;      /* IE/Edge legacy */
  }
  #pickup-news .openings-viewport::-webkit-scrollbar{ display:none; }

  /* あると気持ち良い：スナップ（任意だけどおすすめ） */
  #pickup-news .openings-viewport{ scroll-snap-type: x mandatory; }
  #pickup-news .open-card{ scroll-snap-align: start; }
}


/* =========================
  Recruit / 募集要項
========================= */
.job-specs .specs-card{
  background:#fff;
  border:1px solid rgba(169,139,88,.22);
  border-radius:16px;
  box-shadow:var(--shadow);
  max-width:980px;
  margin:0 auto;
}

/* 中身の横幅を絞りつつ中央に */
.job-specs .specs-inner{
  max-width:760px;
  margin:0 auto;
  padding:clamp(16px, 2.4vw, 24px);
}

/* 2カラム表（左揃えに変更） */
.job-specs .specs-dl{
  display:grid;
  gap:10px;
  margin:0;
}
.job-specs .specs-dl > div{
  display:grid;
  grid-template-columns:10em 1fr;
  align-items:start;          /* ← center から start に */
  justify-items:start;        /* ← center から start に */
  column-gap:16px;
  padding:12px 0;
  border-bottom:1px dashed #e8dbc0;
}
.job-specs .specs-dl > div:last-child{ border-bottom:0; }

.job-specs .specs-dl dt,
.job-specs .specs-dl dd{
  margin:0;
  text-align:left;            /* ← center から left に */
  color:var(--gray-2);
}
.job-specs .specs-dl dt{
  font-weight:700;
  color:#2b2620;
  white-space:nowrap;
}

/* スマホ：1カラムでも左揃え維持 */
@media (max-width:640px){
  .job-specs .specs-inner{ max-width:600px; }
  .job-specs .specs-dl > div{
    grid-template-columns:1fr;
    row-gap:6px;
    justify-items:start;      /* 念のため */
  }
  .job-specs .specs-dl dt,
  .job-specs .specs-dl dd{
    text-align:left;          /* 念のため */
  }
}


/* ===== CTA（ボタン一式） ===== */
.job-specs .specs-cta{
  margin-top:24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
}

/* 上のコピー：\3分ですぐにエントリー/ */
.job-specs .specs-cta__lead{
  font-weight:900;
  font-size:clamp(13px, 1.4vw, 15px);
  letter-spacing:.06em;
  color:#2b2620;
}

/* ボタン本体：
   高さ・横幅・グラデーションなどは .entry-btn に完全お任せ。
   ここでは中身のレイアウトだけを調整します。 */
.job-specs .specs-cta__btn{
  /* entry-btn の display 等はそのまま使う */
  display:inline-flex;
  align-items:center;
  justify-content:space-between; /* 左丸／中央／右ダミーでバランス */
  gap:0;
  box-sizing:border-box;
}

/* 左端の白丸バッジ「完全無料」：ボタンから半分だけはみ出す */
.job-specs .specs-cta__badge{
  flex:0 0 52px;
  width:52px;
  height:52px;
  border-radius:999px;
  background:#fff;
  display:grid;
  place-items:center;
  margin-left:-26px;              /* 半径ぶん左にはみ出させる */
  margin-right:14px;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  border:1px solid rgba(169,139,88,.35);
}
.job-specs .specs-cta__badge-text{
  font-size:11px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.08em;
  color:#6a5430;
}

/* 真ん中の “LINEで応募する” グループ。
   flex:1 にしてボタンのセンターでアイコン+テキストを中央揃え */
.job-specs .specs-cta__main{
  flex:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
}

/* 右側の見えないダミー：左の丸と同じ幅にすることで
   中央グループが物理的に“ど真ん中”に来る */
.job-specs .specs-cta__ghost{
  flex:0 0 52px;
}

/* LINEアイコン & テキスト */
.job-specs .specs-cta__line-ico{
  width:20px;
  height:20px;
  border-radius:4px;
  display:block;
  object-fit:cover;
}
.job-specs .specs-cta__label{
  font-weight:800;
  white-space:nowrap;
}

/* スマホでもバランス維持（entry-btn の高さはそのまま） */
@media (max-width:480px){
  .job-specs .specs-cta__btn{
    width:100%;
    max-width:min(360px, 100%);
  }
}

/* 右側：矢印。左の丸と同じ幅にしてセンターを維持 */
.job-specs .specs-cta__right{
  flex:0 0 52px;                      /* 左バッジと同じ幅 */
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-right:12px;                 /* ボタン端から少し内側に */
  box-sizing:border-box;
}

.job-specs .specs-cta__arrow{
  font-size:18px;
  font-weight:700;
  color:#1f1a14;
  line-height:1;
}

/* =========================================
   RECRUIT / 募集要項：余白（上/下 + 説明文下だけ）
========================================= */
#recruit-specs.sec{
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(56px, 8vw, 96px);
}
#recruit-specs .sec-head .sec-lead{
  margin-bottom: clamp(18px, 3vw, 32px);
  line-height: 1.8;
}

/* 「完全無料」バッジを非表示 */
#recruit-specs .specs-cta__badge{
  display: none;
}

/* バッジが消える分、左のマイナス余白をリセット */
#recruit-specs .specs-cta__btn{
  padding-left: 0; /* entry-btn側でpaddingがあるなら不要だが保険 */
}

/* 背景の "Entry" を消す */
.sm-cta::before{
  content: none !important;
}

.entry-btn::before{
  content: none !important;
}

/* =========================
   Recruit CTA button fix
   - center icon + text
   - keep arrow on the right
   - make button bigger
========================= */
#recruit-specs .specs-cta__btn{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;                 /* ← center the main content */
  width: min(560px, 92%);                  /* ← bigger button */
  min-height: 72px;                        /* ← taller */
  padding: 18px 84px;                      /* ← more breathing room (right space for arrow) */
  font-size: clamp(15px, 1.3vw, 18px);     /* ← slightly bigger text */
}

/* icon + label block stays truly centered */
#recruit-specs .specs-cta__main{
  flex: 0 1 auto;                          /* ← don’t stretch */
  margin: 0 auto;                          /* ← center */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* arrow pinned to the right without affecting centering */
#recruit-specs .specs-cta__right{
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  flex: none;
  padding-right: 0;
}

/* icon size tweak (optional but helps visual balance) */
#recruit-specs .specs-cta__line-ico{
  width: 22px;
  height: 22px;
}

/* =========================================================
  Recruit / 募集要項：表とボタンの間に余白（このセクションだけ）
  ※ CSSの一番最後に追記
========================================================= */

/* 表（募集要項）の下に余白 */
#recruit-specs .specs-card{
  margin-bottom: clamp(18px, 3vw, 32px);
}

/* ボタンブロック自体の上下余白（セクション内だけ） */
#recruit-specs .hero-cta__inner{
  margin-top: clamp(10px, 2vw, 18px);
  margin-bottom: clamp(8px, 2.5vw, 22px);
}

/* ボタンの“外側”に余白（他ボタンへ影響なし） */
#recruit-specs .hero-cta__btn{
  margin-top: clamp(6px, 1.4vw, 12px);
}

/* SPで詰まりやすいので少しだけ増やす（好みで） */
@media (max-width: 640px){
  #recruit-specs .specs-card{
    margin-bottom: 20px;
  }
  #recruit-specs .hero-cta__inner{
    margin-top: 12px;
    margin-bottom: 20px;
  }
}





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

/* 画像：左 ／ テキスト：右 の2カラム */
.business--v2 .business-layout{
  display: grid;
  grid-template-columns: minmax(260px, 1.05fr) minmax(280px, 1.25fr);
  gap: clamp(24px, 4vw, 40px);
  align-items: start;
  margin-top: clamp(24px, 4vw, 36px);
}

/* 左側の画像ボックス */
.business--v2 .business-hero{
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #f3f0e8;
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
}
.business--v2 .business-hero img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 右側のテキストブロック */
.business--v2 .business-desc{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.business--v2 .business-desc__ttl{
  margin: 0;
  font-family: "Shippori Mincho", serif;
  font-size: clamp(18px, 2.2vw, 22px);
  letter-spacing: .04em;
  color: #2b2620;
}

.business--v2 .business-desc__lead{
  margin: 0 0 4px;
  color: var(--gray-2, #666);
  line-height: 1.8;
}

/* 3つの事業リスト */
.business--v2 .business-list{
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.business--v2 .business-list > div{
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(169,139,88,.18);
}
.business--v2 .business-list dt{
  margin: 0 0 4px;
  font-weight: 700;
  color: #2b2620;
}
.business--v2 .business-list dd{
  margin: 0;
  color: var(--gray-2, #666);
  line-height: 1.8;
  font-size: .95rem;
}

/* スマホでは縦並び（画像 → テキスト） */
@media (max-width: 840px){
  .business--v2 .business-layout{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
  Business：セクション上下 + 説明文（sec-lead）下だけ余白追加
  ※CSSの一番最後に追記
========================================================= */

/* ① セクション自体の上下余白 */
#business{
  padding-block: clamp(72px, 10vw, 128px) !important;
}

/* ② 説明文（sec-lead）の下余白 */
#business .sec-head{
  margin-bottom: clamp(34px, 4.2vw, 56px) !important;
}


/* =========================================================
  Entry CTA section （ご応募はこちら / エントリーボタン）
========================================================= */

:root{
  --gold-1:#c7a770;   /* main gold */
  --gold-2:#e2c98f;   /* light gold */
  --gold-3:#a98b58;   /* deep line */
  --paper:#ffffff;
  --text:#0f0f0f;
}

/* セクション全体 */
.cta-entry{
  padding: clamp(48px, 10vw, 92px) 0;
  background: linear-gradient(180deg, #fff, #fbf7ef);
  text-align: center;
}

/* 見出しと説明は黒・中央 */
.cta-entry .entry-ttl{
  margin: 0 0 .35em;
  color: var(--text);
  font-family: "Shippori Mincho", serif;
  font-size: clamp(24px, 3.2vw, 36px);
  letter-spacing: .02em;
  line-height: 1.6;
}
.cta-entry .entry-lead{
  margin: 0 0 14px;
  color: var(--text);
  opacity: .8;
  letter-spacing: .02em;
}

.entry-btnbox{
  display: grid;
  place-items: center;
  margin-top: 10px;
}

.entry-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 1.05em 2.2em;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .08em;
  color: #1f1a14;
  background:
    linear-gradient(180deg, #f2e5c6, #e7d39b 60%, #dcc380);
  border: 1px solid rgba(169,139,88,.45);
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 12px 26px rgba(169,139,88,.22);
  transition: transform .12s ease, box-shadow .2s ease;
  overflow: hidden;           
  isolation: isolate;         
  text-decoration: none;
}

.entry-btn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 18px 34px rgba(169,139,88,.28);
}

.entry-btn::before{
  content: "Entry";
  position: absolute;
  inset: 0;                      /* ボタン全体を覆う */
  display: grid;
  place-items: center;
  white-space: nowrap;
  font-family: "Dancing Script", "Allura", "Great Vibes", cursive;
  font-size: clamp(48px, 10vw, 120px); /* 画面幅に応じて大きく */
  line-height: 1;
  letter-spacing: .02em;
  color: rgba(169,139,88,.18);   /* かなり薄く */
  pointer-events: none;          /* クリックは前面テキストに通す */
  z-index: 0;                    /* 前面テキストより背面 */
  transform: translateY(2px);    /* わずかに下げて自然に */
}

/* 表示テキストは前面 */
.entry-btn > span{
  position: relative;
  z-index: 1;
}



/* スマホ向け微調整 */
@media (max-width:560px){
  .entry-btn{
    padding: .95em 1.8em;
  }
  .entry-btn::before{
    font-size: clamp(40px, 16vw, 88px);
  }
}


/* LINE応募ボタンのアイコン配置 */
.btn-line{
  display:inline-flex;                /* アイコンと文字を横並びに */
  align-items:center;
  gap:.5em;                           /* アイコンと文字の間隔 */
}
.btn-line__ico{
  width:20px; height:20px;            /* 小さめに固定 */
  object-fit:cover; display:block;
  border-radius:4px;                  /* 角を少し丸く（任意） */
}


/* =========================================
  募集要項下のCTAだけ：SPでズレない中央寄せ（vw禁止）
  ※ style.css の一番最後に追記
========================================= */
@media (max-width: 640px){

  /* 親：左右対称の余白 + センター固定 */
  .hero-cta__inner{
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;

    display: flex !important;
    justify-content: center !important;
  }

  /* 子：86vw をやめて「親幅基準」にする */
  .hero-cta__inner .hero-cta__btn{
    width: 100% !important;                 /* 親の内側幅ぴったり */
    max-width: 520px !important;            /* 上のボタンと揃えたいなら */
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}



/* =========================
   Footer + 会社概要（ロゴ＋整列調整）
========================= */

.site-footer{
  background:#222;
  color:#f5f5f5;
  font-size:13px;
  padding:40px 0 16px;
}

/* 上段：会社概要 + ナビ */
.footer-inner{
  max-width:min(1180px, 94vw);
  margin:0 auto;
  display:grid;
  grid-template-columns: minmax(320px,1.4fr) minmax(220px,1fr);
  gap:clamp(28px,4vw,56px);
  align-items:flex-start;
  padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.14);
}

/* 左カラムを縦積みで綺麗に */
.footer-company{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

/* ===== Footer ロゴ ===== */
.footer-logo{
  margin: 0 0 14px;     /* ロゴ下の余白（会社概要との間） */
  width: 86px;          /* ロゴ表示サイズ（小さめ） */
  max-width: 86px;
}
.footer-logo img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  background: transparent;  /* フッター背景と同じ扱い */
  padding:0;
  border-radius:0;
}

/* 見出し */
.footer-ttl{
  margin:0 0 12px;
  font-size:15px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* 会社概要DL */
.footer-company-dl{
  margin:0;
  padding:0;
  display:grid;
  row-gap:8px;
}
.footer-company-dl > div{
  display:grid;
  grid-template-columns:7.5em 1fr; /* ラベル幅固定で左揃え感UP */
  column-gap:12px;
  align-items:start;
}
.footer-company-dl dt,
.footer-company-dl dd{ margin:0; }
.footer-company-dl dt{
  font-weight:700;
  color:#fff;
  white-space:nowrap;
  text-align:left;
}
.footer-company-dl dd{
  color:rgba(255,255,255,.82);
  line-height:1.7;
  text-align:left;
}
.footer-company-dl a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.4);
}
.footer-company-dl a:hover{ border-bottom-color:#fff; }

/* 右側ナビ：左の会社概要と“上揃え” */
.footer-nav{
  padding-top: calc(86px + 14px); /* ロゴサイズ＋余白と合わせる */
}
.footer-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  row-gap:10px;
}
.footer-nav a{
  color:rgba(255,255,255,.78);
  text-decoration:none;
  font-weight:600;
  letter-spacing:.08em;
  font-size:12px;
  display:inline-block;
}
.footer-nav a:hover{ color:#fff; }

/* 下段：コピーライト＋TOP */
.footer-bottom{ margin-top:12px; }
.footer-bottom-inner{
  max-width:min(1180px, 94vw);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-inline: 0; /* PCは既存通り */
}
.footer-bottom small{
  color:rgba(255,255,255,.7);
}

/* PAGE TOP ボタン */
.to-top{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
  text-decoration:none;
  white-space:nowrap;           /* 1行キープ */
}
.to-top:hover{ color:#fff; }

/* =========================
   SPレイアウト
========================= */
@media (max-width:768px){
  .footer-inner{
    grid-template-columns:1fr;
  }

  .footer-logo{
    width:72px;
    max-width:72px;
    margin-bottom:12px;
  }

  .footer-nav{
    padding-top:0;
    margin-top:18px;
  }

  .footer-company-dl > div{
    grid-template-columns:6.5em 1fr;
  }

  /* ★ ここが重要：
     SPでも下段は“横並びのまま右配置”
     かつ画面からはみ出さないように制御 */
  .footer-bottom-inner{
    flex-direction:row;          /* 縦積みをやめる */
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding-inline: 12px;        /* 端の安全余白 */
    flex-wrap:nowrap;
  }

  .to-top{
    font-size:10px;
    letter-spacing:.12em;        /* SPは詰めて幅を確保 */
    max-width:48vw;              /* 右側の最大幅を制限 */
    overflow:hidden;
    text-overflow:ellipsis;      /* さらに狭い時の保険 */
  }
}

/* さらに狭い端末向けの保険 */
@media (max-width:420px){
  .to-top{
    max-width:44vw;
    font-size:9.5px;
    letter-spacing:.1em;
  }
}



/* =========================================================
  店舗モーダル
========================================================= */

/* ラッパー */
.store-modal{
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;                    /* 初期は非表示 */
}
.store-modal.is-open{
  display: grid;                    /* 中央寄せ */
  place-items: center;
}

/* 背面オーバーレイ */
.store-modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
}

/* ダイアログ：画面内に収めて本文だけスクロール */
.store-modal__dialog{
  position: relative;
  z-index: 1;
  width: min(980px, 92vw);
  max-height: min(90vh, 1000px);    /* 画面外にはみ出さない */
  margin: 0;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  overflow: hidden;

  display: flex;                    /* 上: 画像 / 下: 本文 */
  flex-direction: column;

  animation: modalIn .22s ease-out;
}
@keyframes modalIn{
  from { transform: translateY(6px); opacity: 0; }
  to   { transform: none;            opacity: 1; }
}

/* 閉じるボタン */
.store-modal__close{
  position: absolute;
  top: 10px; right: 10px;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 6px 18px rgba(0,0,0,.07);
  font-size: 22px; line-height: 1;
  cursor: pointer;
}

/* ヒーロー画像（グレーはプレースホルダー） */
.store-modal__hero{
  width: 100%;
  height: clamp(180px, 34vh, 360px);
  background: #ddd;
  margin: 0;
  flex: 0 0 auto;
}
.store-modal__hero img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* 本文：中スクロール＋下余白厚めで押しやすく */
.store-modal__inner{
  flex: 1 1 auto;
  overflow: auto;                                  /* 中身だけスクロール */
  padding: clamp(18px, 2.8vw, 28px);
  padding-bottom: max(28px, env(safe-area-inset-bottom) + 28px);
}

/* 見出し中央 */
.store-modal__title{
  margin: 0 0 .8em;
  font-family: "Shippori Mincho", serif;
  font-size: clamp(22px, 3vw, 32px);
  text-align: center;
}


/* ===== 行レイアウト（DL） =====*/
.store-modal__dl{
  margin: 0 0 16px;
  border-top: 1px dashed #e8dbc0;
}
.store-modal__dl > div{
  display: grid;
  grid-template-columns: minmax(7.5em, max-content) 1fr;
  column-gap: 16px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px dashed #e8dbc0;
}
.store-modal__dl > div:last-child{ border-bottom: 0; }

.store-modal__dl dt{
  white-space: nowrap;              
  overflow: visible;                 
  text-overflow: clip;
  min-width: 0;
  font-weight: 700;
  color: #444;
}
.store-modal__dl dd{
  margin: 0;
  min-width: 0;
  color: #111;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.store-modal__dl dd a{
  text-decoration: none;           
  border-bottom: none;
}

/* アクション：中央寄せ＋押しやすい sticky フッター */
.store-modal__actions{
  position: sticky;
  bottom: 0; z-index: 1;
  display: grid;
  justify-items: center;            
  gap: 10px;
  padding: 16px;
  background: linear-gradient(180deg, transparent, #fff 40%, #fff);
}
.store-modal__back{
  color: #222;
  text-decoration: none;
}

/* 画面スクロール抑止（背面） */
body.modal-open{ overflow: hidden; }

/* モバイルは縦積みで詰まらないように */
@media (max-width: 640px){
  .store-modal__dl > div{
    grid-template-columns: 1fr;      /* ラベル→値 の縦並び */
    row-gap: 6px;
  }
}


/* ===== モバイルのモーダルを画面内に完全フィット ===== */
@media (max-width: 640px){
  /* 余白なし全画面表示に */
  .store-modal.is-open{
    place-items: stretch;                  /* 中央寄せ → 全面フィット */
  }
  .store-modal__dialog{
    width: 100vw;                          /* 横は画面幅いっぱい */
    max-width: 100vw;
    height: 100dvh;                        /* 高さはデバイス表示域 */
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;                      /* 端が切れないよう角丸オフ */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;                      /* 本文のみスクロール */
  }
  /* 上部の画像はやや低めに */
  .store-modal__hero{
    height: min(34vh, 240px);
    flex: 0 0 auto;
  }
  /* 本文スクロール＋セーフエリア対応 */
  .store-modal__inner{
    flex: 1 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
    overscroll-behavior: contain;          /* 背面へのスクロール伝播防止 */
  }
  /* 固定フッターのボタンが画面内に収まるよう余白調整 */
  .store-modal__actions{
    position: sticky;
    bottom: 0;
    padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
    background: linear-gradient(180deg, transparent, #fff 40%, #fff);
  }
  /* 閉じるボタンのはみ出し防止（ノッチ対応） */
  .store-modal__close{
    top: max(8px, env(safe-area-inset-top) + 8px);
    right: max(8px, env(safe-area-inset-right) + 8px);
  }
}

/* ===== SPの横はみ出し対策（右寄り解消） ===== */
@media (max-width: 640px){
  .store-modal{ overflow: hidden; } /* 画面外に出さない保険 */

  .store-modal.is-open{
    place-items: stretch;           /* 全面フィット */
  }

  .store-modal__dialog{
    width: 100% !important;         /* 100vw → 100% に変更 */
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0;
    box-sizing: border-box;
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }

  /* 中身の左右パディングは通常通り（はみ出し回避） */
  .store-modal__inner{
    padding-left: clamp(14px, 4vw, 20px);
    padding-right: clamp(14px, 4vw, 20px);
    -webkit-overflow-scrolling: touch;
  }

  /* 閉じるボタンもセーフエリアを考慮して内側に */
  .store-modal__close{
    right: max(8px, env(safe-area-inset-right) + 8px);
    left: auto;
  }
}

/* ===== モーダル表示時はページ横スクロールを禁止 ===== */
html.modal-open,
body.modal-open{
  overflow: hidden;          /* 縦横ともにスクロール無効 */
  position: fixed;           /* 背面のズレ防止（iOS対策） */
  inset: 0;
  width: 100%;
}

/* ===== SPの横はみ出しを完全に解消 ===== */
@media (max-width: 640px){
  .store-modal{ overflow: hidden; }        /* 保険 */

  .store-modal.is-open{
    place-items: stretch;                  /* 全面フィット */
  }

  .store-modal__dialog{
    /* 100vw だとスクロールバー/セーフエリア分ではみ出す端末があるため、
       “表示中のビューポート幅(100dvw)” から左右のセーフエリアを差し引いた幅に */
    width: calc(100dvw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 auto !important;            /* 中央に固定 */
    border-radius: 0;
    box-sizing: border-box;
    transform: none; translate: none;
  }

  /* 中身は通常パディングでOK（横はみ出ししない） */
  .store-modal__inner{
    padding-left: clamp(14px, 4vw, 20px);
    padding-right: clamp(14px, 4vw, 20px);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* 閉じるボタンをセーフエリア内に */
  .store-modal__close{
    right: max(8px, env(safe-area-inset-right) + 8px);
    top:   max(8px, env(safe-area-inset-top) + 8px);
  }
}

/* ============ 店舗モーダル：PCは左右2カラムで“見切れなし” ============ */

/* 既存 .store-modal は流用。ダイアログを2カラム化 */
.store-modal__dialog{
  width: min(1100px, 94vw);
  max-height: min(88vh, 980px);
  display: grid;
  grid-template-columns: 48% 52%;
  grid-template-rows: auto;
  gap: 0;
  overflow: hidden;          /* PCは内側スクロールさせない */
}

/* 閉じるボタンを上に被せる位置調整 */
.store-modal__close{ z-index: 3; }

/* 左：画像を全面フィット */
.store-modal__hero{
  grid-column: 1/2;
  height: auto;
  min-height: 100%;
}
.store-modal__hero img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* 右：本文は上下に収まるパディングだけ */
.store-modal__inner{
  grid-column: 2/3;
  padding: clamp(18px, 2.4vw, 28px);
  display: grid;
  grid-template-rows: auto 1fr auto;  /* タイトル / 明細 / CTA */
  row-gap: clamp(10px, 1.6vw, 16px);
  overflow: hidden;                    /* PCは非スクロール */
}

.store-modal__title{
  margin: 0;
  text-align: left;
  font-family:"Shippori Mincho",serif;
  font-size: clamp(22px, 2.2vw, 30px);
}

/* 明細（DL）を内側スクロール可にして、全体としては画面内に収める */
.store-modal__dl{
  margin: 4px 0 0;
  padding-right: 6px;                  /* スクロールバー分の視覚調整 */
  overflow: auto;                      /* 量が多いときのみ単独でスクロール */
  border-top: 1px dashed #e8dbc0;
}
.store-modal__dl > div{
  display: grid;
  grid-template-columns: minmax(7.5em, max-content) 1fr;
  column-gap: 14px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px dashed #e8dbc0;
}
.store-modal__dl > div:last-child{ border-bottom: 0; }
.store-modal__dl dt{ font-weight:700; color:#444; white-space:nowrap; }
.store-modal__dl dd{ margin:0; color:#111; }
.store-modal__dl dd a{ text-decoration:none; border-bottom: none; }

.muted{ color:#666; margin-left:.6em; }

/* 連絡先アイコン */
.sm-links{ display:flex; gap:12px; align-items:center; }
.sm-ico{
  --size: 42px;
  width: var(--size); height: var(--size);
  display:grid; place-items:center;
  border-radius: 10px;
  background:#f5efe2;
  border:1px solid rgba(169,139,88,.35);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.sm-ico:hover{ transform: translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.12); filter:brightness(1.03); }

/* 簡易アイコン（SVG代替のフォント絵文字） */
.sm-ico--tel::before{ content:"📞"; font-size:20px; }
.sm-ico--ig::before{  content:"📷"; font-size:20px; }
.sm-ico--hpb::before{ content:"🏷"; font-size:20px; }

/* CTAを“②ゴールドPill”で大きく */
.sm-cta{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: min(420px, 90%);
  padding: 1.05em 2.2em;
  border-radius: 999px;
  font-weight: 800; letter-spacing: .08em; color: #1f1a14; text-decoration: none;
  background: linear-gradient(180deg, #f2e5c6, #e7d39b 60%, #dcc380);
  border: 1px solid rgba(169,139,88,.45);
  box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 12px 26px rgba(169,139,88,.22);
  transition: transform .12s ease, box-shadow .2s ease;
  position: relative; overflow: hidden; isolation: isolate;
}
.sm-cta::before{
  content:"Entry"; position:absolute; inset:0; display:grid; place-items:center;
  font-family:"Dancing Script","Allura","Great Vibes",cursive;
  font-size: clamp(48px, 6vw, 92px); line-height:1; color:rgba(169,139,88,.18);
  pointer-events:none; z-index:0; transform:translateY(2px);
}
.sm-cta > span{ position:relative; z-index:1; }
.sm-cta:hover{ transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 34px rgba(169,139,88,.28); }

.store-modal__actions{
  position: static;         /* PCは固定しない（全体表示） */
  display:grid; justify-items:start; gap:10px; padding-top:8px;
  background: none;
}

/* スマホ：従来どおり縦積み＆本文スクロール */
@media (max-width: 780px){
  .store-modal__dialog{
    grid-template-columns: 1fr;
    max-height: 100dvh;
  }
  .store-modal__actions{ justify-items:center; background: linear-gradient(180deg, transparent, #fff 40%, #fff); position: sticky; bottom: 0; }
  .sm-cta{ min-width: 86vw; }
}

/* 連絡先アイコン（白いスクエア） */
.sm-links{ display:flex; gap:12px; align-items:center; }
.sm-ico{
  --size: 48px;
  width: var(--size); height: var(--size);
  display:grid; place-items:center;
  border-radius: 12px;
  background:#fff;                         /* 白 */
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.sm-ico:hover{ transform: translateY(-1px); box-shadow:0 12px 28px rgba(0,0,0,.12); filter:brightness(1.02); }
.sm-ico--img img{ display:block; width:24px; height:24px; object-fit:contain; }

/* HPBだけ若干大きめでも崩れないように */
.sm-ico--img img[alt*="Hot Pepper"]{ width:28px; height:28px; }

/* CTA（②のゴールドpill）余白と幅 */
.store-modal__actions{ padding-top:10px; }
.sm-cta{ min-width:min(420px, 92%); }

/* PC2カラムの調整（あなたの既存PCレイアウトを踏襲） */
@media (max-width: 780px){
  .sm-cta{ min-width:86vw; }
}

/* 画像リンクを横並び・折返し */
.sm-links{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

/* 画像そのものがクリック対象（ボタン化しない） */
.sm-link{
  display:inline-block;
  text-decoration:none;          /* 既定の下線は消す */
  position:relative;
  line-height:0;                 /* 画像だけの高さに */
}

/* 金アンダーバー（画像の下に細く） */
.sm-link::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:2px;
  background:#c7a770;
  transform-origin:left center;
  transform:scaleX(1);           /* 常時表示（薄く）にしたい場合は opacity を下げて調整 */
  opacity:.95;
  transition:opacity .15s ease, height .15s ease;
}
.sm-link:hover::after{ height:3px; }

/* ロゴ画像（好きな高さに微調整） */
.sm-link > img{
  display:block;
  height:28px;                   /* 24–32pxで調整可 */
  width:auto;
  pointer-events:auto;           /* 念のため */
}

/* 旧ボックス系スタイルを打ち消し（あれば） */
.sm-ico, .sm-ico--tel, .sm-ico--ig, .sm-ico--hpb{ all:unset; }

/* 連絡先ロゴの並びとタッチ領域（48px以上） */
.sm-links{
  display: flex;
  gap: clamp(12px, 2vw, 18px);
  align-items: center;
  flex-wrap: wrap;
}

/* 画像そのものを押すUI：十分な当たり判定 */
.sm-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 最低タッチサイズ 52px 四方（iOS/Android推奨48px以上） */
  min-width: 52px;
  min-height: 52px;
  padding: 6px;                 /* 画像の周囲に余白を追加して押しやすく */
  border-radius: 12px;          /* 角丸（枠は無し） */
  text-decoration: none;
  /* うっすらハイライト（下線風の金色は不要とのことなので枠なし） */
  transition: transform .12s ease, filter .15s ease;
}
.sm-link:focus-visible{
  outline: 2px solid rgba(199,167,112,.6); /* アクセシビリティ用フォーカス */
  outline-offset: 2px;
}
.sm-link:hover{ transform: translateY(-1px); filter: brightness(1.04); }

/* 画像は大きめ＆比率維持 */
.sm-link img{
  display: block;
  width: clamp(42px, 6vw, 64px);   /* 画面に応じて拡縮（PC大きめ） */
  height: auto;
}

/* スマホはさらに押しやすく */
@media (max-width: 640px){
  .sm-link{
    min-width: 56px;
    min-height: 56px;
    padding: 8px;
  }
  .sm-link img{
    width: clamp(48px, 14vw, 64px);
  }
}

/* ========== VOICE subtext 強制表示 ========== */
/* 他のグラデ文字スタイルに負けないように !important で明示 */
.voice-sub{
  color: var(--gray-2, #333) !important;         /* お好みの色に変更可 */
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  text-shadow: none !important;
}

/* 万一、親に .gold-text などの装飾クラスが付いている場合を想定して保険をかける */
.gold-text .voice-sub,
.gradient-text .voice-sub{
  color: var(--gray-2, #333) !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
}


/* ===== store modal: mobile hard override ===== */
@media (max-width: 640px){
  #storeModal.store-modal{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;                 /* is-openで表示 */
    align-items: center;
    justify-content: center;
    padding: 12px;                 /* 画面端からの逃げ */
    overscroll-behavior: contain;  /* 画面外スクロール抑止 */
  }
  #storeModal.store-modal.is-open{ display: flex; }

  #storeModal .store-modal__overlay{
    position: absolute; inset: 0;
    background: rgba(0,0,0,.45);
  }

  /* ← ここが肝：JSのtop/left/transform/height等を無効化 */
  #storeModal .store-modal__dialog{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;

    width: min(92vw, 520px);
    max-height: calc(100dvh - 24px);   /* dvh/svhで端末UIに強い */
    overflow: auto;
    -webkit-overflow-scrolling: touch;

    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
  }

  /* 画像が未設定でも暴れないよう保険 */
  #storeModal .store-modal__hero{ margin:0; background:#f4f4f4; }
  #storeModal .store-modal__hero img{
    display:block; width:100%;
    height:auto; aspect-ratio:16/9; object-fit:cover;
  }

  #storeModal .store-modal__inner{ padding:16px 14px; }

  /* 小さめタイポ（他セクションと同等） */
  #storeModal .store-modal__title{ font-size:clamp(16px,5vw,18px); margin:0 0 10px; }
  #storeModal .store-modal__dl dt,
  #storeModal .store-modal__dl dd{ font-size:clamp(13px,3.8vw,15px); line-height:1.6; }

  /* 閉じるボタン可読＆タップしやすく */
  #storeModal .store-modal__close{
    position:absolute; top:8px; right:8px;
    width:36px; height:36px; display:grid; place-items:center;
    background:#f6f6f6; border:1px solid rgba(0,0,0,.06); border-radius:999px;
    font-size:20px; z-index:1;
  }

  body.modal-open{ overflow:hidden; }
}

/* =========================================
   STORES section spacing (上/下 + 説明文下だけ)
========================================= */

/* セクション全体の上下余白 */
#stores.sec{
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(56px, 8vw, 96px);
}

/* 説明文（sec-lead）の下だけ余白 */
#stores .sec-head .sec-lead{
  margin-bottom: clamp(18px, 3vw, 32px);
  line-height: 1.8; /* 読みやすさだけ少し */
}



/* =========================================================
  エフェクト
========================================================= */

.reveal{
  opacity:0;
  transform: translateY(18px) scale(.985);
  filter: blur(4px);
  transition:
    opacity .7s ease,
    transform .7s ease,
    filter .7s ease;
  will-change: opacity, transform, filter;
}
.reveal.is-visible{
  opacity:1;
  transform: none;
  filter: blur(0);
}

/* 方向指定（任意：data-reveal="left|right|up|down"） */
.reveal[data-reveal="left"]  { transform: translateX(-24px); }
.reveal[data-reveal="right"] { transform: translateX( 24px); }
.reveal[data-reveal="up"]    { transform: translateY( 24px); }
.reveal[data-reveal="down"]  { transform: translateY(-24px); }

/* ステッガー（親に .reveal-stagger を付けると子が順番に出る） */
.reveal.reveal-stagger > *{
  opacity:0; transform: translateY(12px); filter: blur(3px);
  transition: opacity .6s ease, transform .6s ease, filter .6s ease;
}
.reveal.is-visible.reveal-stagger > *{
  opacity:1; transform:none; filter: blur(0);
}
/* 遅延（最大12要素分。必要なら増やしてOK） */
.reveal.is-visible.reveal-stagger > *:nth-child(1)  { transition-delay:.03s; }
.reveal.is-visible.reveal-stagger > *:nth-child(2)  { transition-delay:.09s; }
.reveal.is-visible.reveal-stagger > *:nth-child(3)  { transition-delay:.15s; }
.reveal.is-visible.reveal-stagger > *:nth-child(4)  { transition-delay:.21s; }
.reveal.is-visible.reveal-stagger > *:nth-child(5)  { transition-delay:.27s; }
.reveal.is-visible.reveal-stagger > *:nth-child(6)  { transition-delay:.33s; }
.reveal.is-visible.reveal-stagger > *:nth-child(7)  { transition-delay:.39s; }
.reveal.is-visible.reveal-stagger > *:nth-child(8)  { transition-delay:.45s; }
.reveal.is-visible.reveal-stagger > *:nth-child(9)  { transition-delay:.51s; }
.reveal.is-visible.reveal-stagger > *:nth-child(10) { transition-delay:.57s; }
.reveal.is-visible.reveal-stagger > *:nth-child(11) { transition-delay:.63s; }
.reveal.is-visible.reveal-stagger > *:nth-child(12) { transition-delay:.69s; }

/* 動きが苦手な人向け配慮 */
@media (prefers-reduced-motion: reduce){
  .reveal,
  .reveal.reveal-stagger > *{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ==== Text Scaler (keep line breaks, scale only the visual size) ==== */
/* 外側が幅を 1/scale に拡げ、内側で scale 縮小。見かけ幅は元のままで改行位置は不変 */
.text-scale-wrap{
  --s: 1;                 /* デフォは等倍。下のブレークポイントで上書き */
  display: block;
  width: calc(100% / var(--s));
  max-width: calc(100% / var(--s));
  overflow: hidden;       /* はみ出しガード */
  contain: layout paint;  /* レイアウト境界を切って副作用を抑える */
}
.text-scale{ 
  display: block;
  transform: scale(var(--s));
  transform-origin: top left;
}

/* 役割別プリセット（JSが付与するクラス） */
.ts--h1   { --s: 1; }
.ts--ttl  { --s: 1; }
.ts--lead { --s: 1; }
.ts--body { --s: 1; }
.ts--note { --s: 1; }

/* 画面幅ごとに相対縮小率を調整（大きい文字＝小さくしつつも周囲より相対的に大きく） */
@media (max-width: 980px){
  .ts--h1   { --s: 0.96; }
  .ts--ttl  { --s: 0.95; }
  .ts--lead { --s: 0.94; }
  .ts--body { --s: 0.96; }
  .ts--note { --s: 0.92; }
}
@media (max-width: 768px){
  .ts--h1   { --s: 0.94; }
  .ts--ttl  { --s: 0.93; }
  .ts--lead { --s: 0.91; }
  .ts--body { --s: 0.94; }
  .ts--note { --s: 0.90; }
}
@media (max-width: 480px){
  .ts--h1   { --s: 0.92; }
  .ts--ttl  { --s: 0.90; }
  .ts--lead { --s: 0.90; }
  .ts--body { --s: 0.92; }
  .ts--note { --s: 0.88; }
}

/* 補助（h1/h2 の上下マージン微調整：縮小時に詰まって見えないように） */
.text-scale-wrap + .text-scale-wrap { margin-top: .2em; }

/* Points セクション内は Text Scaler を無効化して二重縮小を防ぐ */
#olive-points .text-scale-wrap { --s: 1 !important; }

@media (max-width: 640px){
  .cards--points .card { padding-top: 24px; }
  .card--point .card-no { left: 10px; top: 10px; width: 38px; height: 38px; }
}

/* ===== Smartphone only (<=640px) ===== */
@media (max-width: 640px){

  /* ---------- BUSINESS / 事業 ---------- */
  #business .sec-head .sec-idx{
    font-size: clamp(11px, 3.2vw, 12.5px);
    letter-spacing: .04em;
  }
  #business .sec-head .sec-ttl{
    font-size: clamp(18px, 5.4vw, 22px);
    line-height: 1.2;
    margin-bottom: 6px;
  }
  #business .sec-head .sec-lead{
    font-size: clamp(12px, 3.6vw, 14px);
    line-height: 1.7;
  }

  /* 画像キャプションなど周辺の余白微調整（任意） */
  .business-hero{
    margin-block: 10px 14px;
  }

  /* ---------- COMPANY / 会社概要 ---------- */
  #company .sec-head .sec-idx{
    font-size: clamp(11px, 3.2vw, 12.5px);
  }
  #company .sec-head .sec-ttl{
    font-size: clamp(18px, 5.4vw, 22px);
    line-height: 1.2;
    margin-bottom: 6px;
  }
  #company .sec-head .sec-lead{
    font-size: clamp(12px, 3.6vw, 14px);
    line-height: 1.7;
  }

  /* カード見出し */
  .company-only .company-h3{
    font-size: clamp(14px, 4.2vw, 16px);
    line-height: 1.3;
    margin-bottom: 8px;
  }

  /* 会社概要テーブルの文字サイズ */
  .company-only .company-dl > div{
    grid-template-columns: 1fr;   /* SPは1カラム */
    row-gap: 4px;
    padding: 8px 0;
  }
  .company-only .company-dl dt{
    font-size: clamp(12px, 3.4vw, 14px);
    font-weight: 700;
  }
  .company-only .company-dl dd{
    font-size: clamp(12px, 3.6vw, 14px);
    line-height: 1.65;
  }

  /* 住所や連絡先リンクの文字サイズも合わせる */
  .company-only .company-dl dd a{
    font-size: inherit;
  }

  /* ---------- FOOTER ---------- */
  .site-footer .footer-inner small{
    font-size: clamp(10.5px, 3.2vw, 12px);
  }
  .site-footer .to-top{
    font-size: clamp(12px, 4vw, 14px);
    width: 36px; height: 36px;    /* 押しやすい最小タップ領域 */
    line-height: 36px;
  }
}





/* ===== SP：Pointsカードの下余白をなくす（高さ揃えを解除） ===== */
@media (max-width: 640px){
  .cards--points .card-txt{
    display: block;           /* -webkit-box を解除 */
    -webkit-line-clamp: unset;
    min-height: 0;            /* 固定高さを外す */
    overflow: visible;        /* 余白なしで自然に伸び縮み */
  }
}


/* ===== 給与例：スマホ時の見出し＆金額を少し大きく ===== */
@media (max-width: 640px){
  /* 役職名（コース名）を拡大 */
  #salary-examples .salex-h3 .major{
    /* 旧: clamp(14px, 3.6vw, 16px) */
    font-size: clamp(18px, 5.2vw, 22px);
  }
  /* （使っていれば）サブ行も少しだけ拡大 */
  #salary-examples .salex-h3 .minor{
    /* 旧: clamp(11px, 3.2vw, 13px) */
    font-size: clamp(13px, 4vw, 15px);
  }

  /* 支給総額ブロック：ラベル＋金額を拡大＆中央寄せ維持 */
  #salary-examples .salex-total{
    gap: 4px;
  }
  #salary-examples .salex-total .cap{
    display: block !important;                 /* ラベルを必ず表示 */
    font-weight: 800;
    /* 旧: .82rem 相当 → 少し拡大 */
    font-size: clamp(13.5px, 3.9vw, 15.5px);
    letter-spacing: .04em;
  }
  #salary-examples .salex-total .money em{
    /* 旧: clamp(24px, 8vw, 34px) → ひと回り大きく */
    font-size: clamp(30px, 9.6vw, 38px);
  }
  #salary-examples .salex-total .money small{
    /* 単位も読みやすく少しだけ底上げ */
    font-size: .64em;
  }
}

/* iOS等でtext-scaleラッパーが入る環境でも中央配置を維持 */
@media (max-width: 640px){
  #salary-examples .salex-total,
  #salary-examples .salex-total .text-scale-wrap,
  #salary-examples .salex-total .text-scale{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }
}



/* --- Mapリンクは素のテキスト（下線/金線なし） --- */
.store-modal__dl a.map-link{
  text-decoration: none;
  border: 0;
  color: #223; /* 既存本文色に合わせて可 */
}
.store-modal__dl a.map-link:hover{ opacity: .9; }

/* --- 問い合わせロゴの大きさを統一（タップしやすい） --- */
.sm-links{ display: flex; gap: 14px; align-items: center; }
.sm-links a{ display: inline-grid; place-items: center; }
.sm-links a img{
  height: clamp(36px, 5vw, 44px); /* 全ロゴ高さを揃える */
  width: auto;
  display: block;
}

/* --- スマホは「写真上/本文下」の1カラム固定 & 余白最適化 --- */
@media (max-width: 780px){
  .store-modal__dialog{
    display: flex; flex-direction: column;
    width: 100%; max-width: 100%;
    height: 100dvh; max-height: 100dvh;
  }
  .store-modal__hero{
    width: 100%; height: auto; aspect-ratio: 16 / 11;
  }
  .store-modal__inner{
    flex: 1 1 auto; overflow: auto;
    padding: 16px 18px;
  }
  .store-modal__title{ text-align: center; }
  .sm-cta{ min-width: 92vw; font-size: clamp(16px, 4.5vw, 18px); }
}

/* =========================================================
   Store modal — mobile final override (no horizontal scroll)
   画像 1/3 + 内容 2/3、横スクロール無しで全部読める
   ※必ず CSS の一番最後に置く
========================================================= */
@media (max-width: 780px){

  /* ---- wrapper ---- */
  .store-modal{
    overflow: hidden !important;           /* 外側の横はみ出し保険 */
  }
  .store-modal.is-open{
    place-items: stretch !important;
  }

  /* ---- dialog (full screen, no X overflow) ---- */
  .store-modal__dialog{
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    overflow-x: hidden !important;         /* 横スクロール殺す */
    overflow-y: hidden !important;         /* 縦は inner 側に任せる */
    box-sizing: border-box !important;
  }

  /* ---- hero top 1/3 ---- */
  .store-modal__hero{
    flex: 0 0 33.333% !important;
    min-height: 33.333% !important;
    height: auto !important;
    background: #ddd;
    overflow: hidden !important;
  }
  .store-modal__hero img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ---- content bottom 2/3 ---- */
  .store-modal__inner{
    flex: 1 1 66.667% !important;
    overflow-y: auto !important;           /* 縦はここだけスクロール */
    overflow-x: hidden !important;         /* 横スクロール禁止 */
    -webkit-overflow-scrolling: touch;
    padding: 16px 16px 22px !important;
    box-sizing: border-box !important;
  }

  /* ---- dl rows: wrap everything ---- */
  .store-modal__dl > div{
    grid-template-columns: 1fr !important; /* ラベル→値 縦並び */
    row-gap: 6px !important;
  }
  .store-modal__dl dt,
  .store-modal__dl dd{
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  /* Googleマップリンクも折り返し＆はみ出し防止 */
  .store-modal__dl dd .map-link{
    display: inline-block;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-decoration: none; /* 金アンダーバーも消したい場合 */
    border-bottom: none;
  }

  /* ---- contact logos row: never overflow ---- */
  .sm-links{
    display: flex;
    gap: 12px;
    flex-wrap: wrap;                       /* 収まらなければ改行 */
    align-items: center;
  }
  .sm-logo{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 30vw;                       /* 横幅に応じて縮む */
  }
  .sm-logo img{
    width: clamp(54px, 18vw, 72px);
    height: auto;
    display: block;
  }

  /* ---- CTA bottom sticky ---- */
  .store-modal__actions{
    position: sticky !important;
    bottom: 0 !important;
    background: linear-gradient(180deg, transparent, #fff 45%, #fff) !important;
    padding: 14px 12px calc(env(safe-area-inset-bottom) + 12px) !important;
    overflow: hidden !important;
  }
  .sm-cta{
    min-width: 92% !important;
    font-size: clamp(15px, 4.2vw, 18px);
    padding: 1.15em 1.8em !important;
  }
}

/* =========================================================
   Store modal — PC CTA center alignment
   ※CSSの一番最後に置く
========================================================= */
@media (min-width: 781px){
  /* actions area in the right column */
  .store-modal__actions{
    justify-items: center !important;  /* was start */
    align-items: center !important;
    text-align: center;
  }

  /* CTA button itself */
  .store-modal__actions .sm-cta{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Store modal CTA: reuse main LINE CTA style but keep it clean */
#storeModal #mApply.hero-cta__btn{
  width: min(520px, 100%);
  min-width: 0;
}

/* If your main CTA assumes icon/subtext, hide them safely */
#storeModal #mApply .hero-cta__ico,
#storeModal #mApply .hero-cta__sub{
  display: none !important;
}





/* =======================
   Header
======================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--footer-bg, #2b2620);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

/* ヘッダーだけフル幅（中身は中央） */
.site-header .container{
  max-width: none;
  width: 100%;
  padding: 0;
}

/* PC: 3カラム維持 */
.header-inner{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(10px, 2vw, 18px);
  padding-block: clamp(8px, 1.4vw, 12px);
  padding-inline: clamp(14px, 2.4vw, 28px);
  max-width: min(1280px, 94vw);
  margin-inline: auto;
}

/* ロゴ */
.brand-logo{
  height: clamp(56px, 7.2vw, 80px);
  width: auto;
  object-fit: contain;
  mix-blend-mode: normal;
}

/* ==== Header CTA ==== */
.header-cta__row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.8vw, 20px);
  flex-wrap: nowrap;
}

/* 電話ブロック */
.cta-left{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.25;
  min-width: 0;
}

/* コピー */
.header-cta__lead{
  font-weight: 900;
  font-size: clamp(12px, 1.2vw, 14px);
  letter-spacing: .06em;
  color: rgba(255,255,255,.92);
}
.header-cta__lead--sp{ display:none; }

/* 電話 */
.cta-phone{
  margin-top: 2px;
  display: inline-flex;
  align-items: baseline;
  gap: .4em;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: clamp(15px, 1.55vw, 18px);
  color: rgba(255,255,255,.92);
  white-space: nowrap;
}
.cta-hours{
  font-weight: 700;
  font-size: clamp(11px, 1.1vw, 12px);
  color: rgba(255,255,255,.75);
  padding-left: .8em;
  margin-left: .2em;
  border-left: 1px solid rgba(255,255,255,.28);
  line-height: 1;
}

/* LINEボタン */
.btn-line-entry{
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-weight: 800;
  font-size: clamp(12px, 1.25vw, 14px);
  color: #fff;
  text-decoration: none;
  background: #06c755;
  border: 1px solid #05b64d;
  padding: .6em 1.2em;
  border-radius: 999px;
  white-space: nowrap;
}
.btn-line-entry__ico{
  width: 18px;
  height: 18px;
  border-radius: 4px;
}
.btn-line-entry__arr{
  width: 18px;
  height: 18px;
  opacity: .9;
}

/* ===== スマホ：2段レイアウトへ切替 ===== */
@media (max-width: 640px){

  /* 2行グリッドに変更 */
  .header-inner{
    grid-template-columns: 1fr auto;   /* 1段目：ロゴ/LINE */
    grid-template-rows: auto auto;     /* 2段目：電話 */
    row-gap: 6px;
    column-gap: 10px;
    padding-inline: 12px;
    padding-block: 8px;
  }

  /* ロゴは左上に */
  .brand{
    grid-column: 1/2;
    grid-row: 1/2;
    justify-self: start;
  }
  .brand-logo{
    height: 52px; /* SPでもちゃんと主役サイズ */
  }

  /* LINEボタンは右上に */
  .btn-line-entry{
    grid-column: 2/3;
    grid-row: 1/2;
    justify-self: end;
    padding: .5em 1em;
    font-size: 12px;
  }
  .btn-line-entry__ico,
  .btn-line-entry__arr{
    width: 16px;
    height: 16px;
  }

  /* CTA（コピー＋電話）は2段目で全幅中央 */
  .header-cta{
    grid-column: 1/3;
    grid-row: 2/3;
    justify-self: center;
    width: 100%;
  }
  .header-cta__row{
    justify-content: center;
    gap: 4px;
  }

  /* コピーはSP版だけ出す */
  .header-cta__lead--pc{ display:none; }
  .header-cta__lead--sp{
    display:block;
    font-size: 11px;
    letter-spacing:.06em;
    margin-bottom: 2px;
  }

  .cta-phone{
    font-size: 14px;
    white-space: normal; /* 狭い端末で自然に折り返す */
  }
  .cta-hours{
    font-size: 10px;
    padding-left: .5em;
    margin-left: .2em;
  }
}

/* =================================================
   Header SP 最終FIX（必ず最後に置く）
   - ロゴとLINEボタンを同じ高さ/同じ縦位置
   - PCのmin-height等を強制リセット
================================================= */
@media (max-width: 640px){

  /* まずPCの高さ影響を完全に殺す */
  .site-header .header-inner{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    height:64px !important;       /* ← ここで1行の高さを固定 */
    min-height:0 !important;      /* PCの88pxを無効化 */
    padding:8px 12px !important;
    gap:10px !important;
  }

  /* ロゴ側：高さをheaderにフィットさせて中央揃え */
  .site-header .brand{
    display:flex !important;
    align-items:center !important;
    height:100% !important;
    flex:0 0 auto;
  }
  .site-header .brand-logo{
    height:42px !important;       /* ← ボタンに合わせて少し小さめ */
    width:auto !important;
    display:block;
  }

  /* CTA側：中身をheader高に合わせて中央揃え */
  .site-header .header-cta,
  .site-header .header-cta__row{
    display:flex !important;
    align-items:center !important;
    height:100% !important;
    margin:0 !important;
  }

  /* ボタン自体の“実高さ”をロゴと同じにする */
  .site-header .btn-line-entry{
    height:42px !important;       /* ← brand-logo と同じ */
    padding:0 14px !important;    /* 高さは固定なので上下paddingは0 */
    font-size:12px !important;
    line-height:1 !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:8px;
    max-width:68vw;
    white-space:nowrap;
  }

  .site-header .btn-line-entry__ico,
  .site-header .btn-line-entry__arr{
    width:16px !important;
    height:16px !important;
  }

  /* SPでは電話・コピーは完全非表示のまま */
  .site-header .cta-left,
  .site-header .header-cta__lead,
  .site-header .cta-phone,
  .site-header .cta-hours{
    display:none !important;
  }
}




/* =========================================
   SPのみ：ポイントカード「…」省略解除 + 右余白(横はみ出し)解消
========================================= */
@media (max-width: 780px){

  /* --- ① カード内の本文が「…」で切れるのを完全解除 --- */
  /* clamp系・line-clamp系・nowrap系をスマホだけ無効化 */
  #olive-points .clamp-2,
  #olive-points .clamp-3,
  #olive-points .clamp-4,
  #olive-points .point-txt,
  #olive-points .points-txt,
  #olive-points p,
  .sec.points .clamp-2,
  .sec.points .clamp-3,
  .sec.points .clamp-4,
  .sec.points p{
    display: block !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;

    /* line-clamp解除 */
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
  }

  /* カード自体も高さ自動にして伸びを許可 */
  #olive-points .point-card,
  #olive-points .points-card,
  .sec.points .point-card,
  .sec.points .points-card{
    height: auto !important;
    min-height: unset !important;
  }


  /* --- ② スマホ時だけ右側に出る謎の余白（横はみ出し）を潰す --- */
  html, body{
    overflow-x: hidden; /* まず横スクロール自体を禁止 */
  }

  /* 100vw 起因のはみ出し防止（padding込みで溢れるのを抑止） */
  .sec, .container, .points-wrap, .points-grid{
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  /* translateX / 絶対配置のはみ出しをこのセクション内でクリップ */
  #olive-points,
  .sec.points{
    overflow-x: clip;   /* hiddenより自然、対応ブラウザは増えてます */
  }

  /* 画像・装飾のはみ出し保険 */
  img, svg{
    max-width: 100%;
    height: auto;
  }
}

/* ===== store modal SP 最終FIX（必ず一番下に置く） ===== */
@media (max-width: 780px){

  /* PCのgridレイアウトを無効化して縦積みに戻す */
  .store-modal__dialog{
    display: flex !important;
    flex-direction: column !important;
    width: 100dvw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;   /* 外側は切ってOK、スクロールはinnerへ */
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* 画像は固定高さ、下を必ず残す */
  .store-modal__hero{
    flex: 0 0 auto !important;
    height: min(34vh, 240px) !important;
  }

  /* ★ここが肝：innerをスクロール領域に戻す（visible禁止） */
  .store-modal__inner{
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(env(safe-area-inset-bottom) + 72px) !important; 
    /* actions分の“逃げ”を必ず確保 */
  }

  /* CTAは常に画面内の下に見える */
  .store-modal__actions{
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 12px) !important;
    background: linear-gradient(180deg, transparent, #fff 40%, #fff) !important;
  }
}

}

/* =========================================================
   Store Modal：SP最終FIX（余白/ボタン位置/影）
   ※必ず CSS の一番最後
========================================================= */
@media (max-width: 780px){

  /* 画像下の謎余白＝imgがheight:autoで伸びてないのが原因なので強制fill */
  #storeModal .store-modal__dialog{
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;                /* 変な隙間を作らない */
    overflow: hidden !important;

    /* 影が不自然ならSPは消す（必要ならここで薄く） */
    box-shadow: none !important;
  }

  #storeModal .store-modal__hero{
    margin: 0 !important;
    flex: 0 0 33.333% !important;
    min-height: 33.333% !important;
    height: auto !important;
    overflow: hidden !important;
    background: #eee;                 /* 画像未設定時の保険 */
  }

  #storeModal .store-modal__hero img{
    width: 100% !important;
    height: 100% !important;          /* ←これが肝：枠いっぱいに伸ばす */
    object-fit: cover !important;
    display: block !important;
    aspect-ratio: auto !important;    /* どこかのaspect-ratio指定を無効化 */
  }

  #storeModal .store-modal__inner{
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding: 16px 16px 0 !important;  /* 下はactions側で確保 */
  }

  /* CTA：中央寄せ＆右寄り解消、影も統一 */
  #storeModal .store-modal__actions{
    position: sticky !important;
    bottom: 0 !important;
    display: flex !important;
    justify-content: center !important;
    padding: 14px 16px calc(env(safe-area-inset-bottom) + 12px) !important;
    background: linear-gradient(180deg, transparent, #fff 45%, #fff) !important;
  }

  /* modal内の応募ボタン（hero-cta系の癖をSPで矯正） */
  #storeModal .store-modal__actions .hero-cta__btn{
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;

    justify-content: center !important;  /* space-between を潰して中央寄せ */
    text-align: center !important;

    /* 影が不自然ならここで“自然な1段”に */
    box-shadow: 0 10px 24px rgba(0,0,0,.10) !important;
  }

  /* もし hero-cta__btn が疑似要素で右側に矢印等を出してるなら、ズレ防止 */
  #storeModal .store-modal__actions .hero-cta__btn::after{
    position: absolute !important;
    right: 18px !important;
  }
}

/* =========================================================
   Store Modal SP fix：画像下のグレー帯除去 + CTA中央/欠け防止
   ※必ず CSS の一番最後
========================================================= */
@media (max-width: 780px){

  /* モーダル全体 */
  #storeModal .store-modal__dialog{
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;        /* 外側は隠す（中はinnerでスクロール） */
  }

  /* ===== 画像下の“グレー空白”対策：imgを絶対配置で完全フィット ===== */
  #storeModal .store-modal__hero{
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;

    flex: 0 0 33.333% !important;
    height: 33.333% !important;         /* flexだけだとズレる端末があるので固定 */
    min-height: 220px;                  /* 小さすぎ保険（不要なら削除OK） */

    position: relative !important;
    overflow: hidden !important;
    background: transparent !important; /* グレーを見せない */
  }

  #storeModal #storeModalImg{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;

    /* どこかの汎用img指定（height:auto / aspect-ratio）を潰す */
    aspect-ratio: auto !important;
    max-width: none !important;
  }

  /* 本文 */
  #storeModal .store-modal__inner{
    overflow-x: hidden !important;
  }

  /* ===== CTA：中央寄せ＆右端が切れないように ===== */
  #storeModal .store-modal__actions{
    display: flex !important;
    justify-content: center !important;
    padding: 14px 16px calc(env(safe-area-inset-bottom) + 12px) !important;

    /* ここで切れてることがあるので visible に */
    overflow: visible !important;
  }

  /* モーダル内の応募ボタン（mApply）を確実に中央＆欠けない幅に */
  #storeModal #mApply{
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;

    /* hero-cta側の min-width があると欠けるので殺す */
    min-width: 0 !important;

    /* 右の矢印や装飾が切れないように */
    overflow: visible !important;
  }

  /* もし ::after で矢印を出してる場合の“切れ”保険 */
  #storeModal #mApply::after{
    right: 18px !important;
  }
}




/* =========================================================
  Site palette unify (③): add at the very end of CSS
  Header/Footerは触らない前提
========================================================= */
:root{
  /* ③ palette */
  --bg-0: #F5F0E8;   /* base background */
  --bg-1: #ECE0D0;   /* soft border / subtle surface */
  --accent: #DF866C; /* accent */

  /* typography */
  --text-0: #2b2620;
  --text-1: #6f6760;

  /* common */
  --paper: #ffffff;                 /* card surface */
  --border: rgba(236,224,208,.85);  /* #ECE0D0寄り */
  --border-acc: rgba(223,134,108,.35);

  /* 既存サイトの変数に“寄せる”（ここが効く） */
  --gray-2: var(--text-1);

  /* gold系を③で置き換え（既存CSSを大きく直さないための互換） */
  --gold-1: var(--bg-1);
  --gold-2: var(--bg-0);
  --gold-3: var(--accent);
}

/* ベース背景・文字色 */
body{
  background: var(--bg-0);
  color: var(--text-0);
}

/* セクション背景の色分けをやめる（=色が増える原因を止める） */
.sec{
  background: transparent !important;
  border: 0 !important;
}

/* カード系：色を統一 */
.card,
.cards--faq .card-wrap,
.cards--points .card{
  background: var(--paper) !important;
  border: 1px solid var(--border) !important;
}

/* 見出しや区切り線：アクセントを #DF866C に */
.card-ttl,
.cards--faq .card-ttl{
  color: var(--text-0) !important; /* タイトル自体は黒寄りで読みやすく */
}
.cards--faq .card-ttl::after{
  background: linear-gradient(90deg, rgba(223,134,108,.2), var(--accent), rgba(223,134,108,.2)) !important;
}

/* バッジ：ゴールド→③の“淡い+アクセント” */
.card-no,
.cards--faq .card-no{
  background: linear-gradient(180deg, #ffffff, var(--bg-1)) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-0) !important;
  box-shadow: 0 10px 22px rgba(223,134,108,.10) !important;
}

/* CTAのベース（白/ベージュで統一） */
.hero-cta__btn{
  background: linear-gradient(180deg, #ffffff, var(--bg-1)) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-0) !important;
}

/* LINEはアクセントを少しだけ強く（色数は増やさず） */
.hero-cta__btn--line{
  border-color: var(--border-acc) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 16px 34px rgba(223,134,108,.14) !important;
}

/* =========================
   #dayflow CTA: SPで必ずど真ん中に固定
   - containerのpadding/max-widthの影響を無効化
   - ボタン幅は画面に収まるように決め打ち
========================= */
@media (max-width: 640px){

  /* ここがズレの主因：.container の左右padding/max-width を潰す */
  #dayflow .container.hero-cta__inner{
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ボタン本体：幅を固定し、min-width由来のはみ出しを完全に止める */
  #dayflow .hero-cta__btn.hero-cta__btn--line{
    box-sizing: border-box !important;
    width: min(86vw, 420px) !important;  /* ← ここが“見た目のセンター”を作る */
    min-width: 0 !important;             /* 既存min-widthを無効化 */
    max-width: 86vw !important;

    margin: 0 auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;          /* hover用のtransformが残ってズレるのを防ぐ */
  }

  /* 中身（アイコン＋文字）もセンターに */
  #dayflow .hero-cta__btn.hero-cta__btn--line{
    justify-content: center !important;
  }
  #dayflow .hero-cta__btntext{
    justify-content: center !important;
    text-align: center !important;
  }
}


/* =========================================================
   GLOBAL TONE (header/footer untouched, inner component colors untouched)
   Palette:
   - #F5F0E8 (base)
   - #ECE0D0 (soft border)
   - #DF866C (accent)
   ========================================================= */

/* 1) Define palette vars */
:root{
  --tone-1: #F5F0E8;
  --tone-2: #ECE0D0;
  --tone-accent: #DF866C;
}

/* 2) Page background only (do NOT touch header/footer) */
body{
  background: var(--tone-1);
}

/* If you have wrappers that were forcing white backgrounds, keep them transparent */
main,
.site-main,
.page,
.wrap{
  background: transparent;
}

/* 3) Sections: no filled bands, just clean spacing */
.sec,
.sec-head{
  background: transparent !important;
}

/* 4) Remove the “thin pink fill” band (likely sec-idx or pseudo-elements) */
.sec-idx{
  background: transparent !important;
  box-shadow: none !important;
}
.sec-head::before,
.sec-head::after,
.sec-idx::before,
.sec-idx::after{
  content: none !important;
}


/* 6) Add a small accent underline under section titles (doesn’t change text color) */
.sec-ttl{
  position: relative;
}
.sec-ttl::after{
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  margin: 14px auto 0;
  background: var(--tone-accent);
  opacity: .75;
  border-radius: 999px;
}

/* 7) Generic divider lines (if you use them) */
hr,
.divider,
.sec-line{
  border-color: var(--tone-2) !important;
  background: var(--tone-2) !important;
}

/* =========================================================
   セクション最上部に出てる“薄いグレー線”を消す（全体）
   ※CSS一番最後に追記
========================================================= */

/* 1) border系で線が出ているケース */
.sec{
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* 2) 疑似要素で線を引いているケース */
.sec::before,
.sec::after{
  content: none !important;
  display: none !important;
}

/* 3) inset shadow が “線” に見えているケース */
.sec{
  box-shadow: none !important;
}

/* 4) hrタグが入っているケース（念のため） */
.sec hr{
  display: none !important;
}


/* 1) まず html/body を確実にベージュへ */
html, body {
  background-color: var(--tone-1) !important; /* #F5F0E8 */
}

/* 2) WordPress側が白を塗りがちな“全面ラッパー”を透明化 */
#page,
.site,
.site-content,
.wp-site-blocks,
main,
.site-main,
.content-area,
.entry-content {
  background-color: transparent !important;
}