/* =====================================================================
   /lp/_css/cust.css  —  健康で集客イベント（cust）専用
   ---------------------------------------------------------------------
   brand.css のあとに読み込まれる。共通部品（.wu-*）はそちらにある。
   ここは cust のトップと下層でしか使わない部品だけを置く。

   【注意】brand.css に `.wu-b-cust a{color:var(--wu-accent)}` 相当の
   ルールがある。詳細度 0,1,1。ボタンのように a 自身へ色を指定する部品は
   必ず `.wu-b-cust` を前置して勝たせること。付け忘れると濃い背景に
   濃い茶色の文字が乗って読めなくなる（path で実際にやらかした）。
   ===================================================================== */

.wu-b-cust{
  --cu-ink:#241a13;
  --cu-sub:#6b5d53;
  --cu-line:#e6ded6;
  --cu-bg:#faf7f4;
  --cu-accent:#8a3b12;     /* 白地に 7.73:1（AAA） */
  --cu-accent-l:#c2622a;   /* 装飾用。文字には使わない */
  --cu-amber:#f0b429;
}

/* ---------------------------------------------------------- ヒーロー */
.cu-hero{
  background:var(--cu-accent);
  background-image:radial-gradient(1100px 460px at 85% -10%, rgba(255,255,255,.12), transparent 60%);
  color:#fff; margin:0 0 4px;
}
.cu-hero__in{
  max-width:1160px; margin:0 auto; padding:54px 20px 46px;
  display:grid; grid-template-columns:1.12fr .88fr; gap:40px; align-items:center;
}
.cu-hero__label{
  font-size:12px; font-weight:800; letter-spacing:.18em;
  color:rgba(255,255,255,.72); margin:0 0 14px;
}
.cu-hero h1{
  font-size:38px; font-weight:900; line-height:1.36; letter-spacing:-.005em;
  color:#fff; margin:0 0 18px;
}
/* 濃い地に半透明の帯を敷くと濁るので、色と下線だけで強調する */
.cu-hero h1 em{
  font-style:normal; color:var(--cu-amber);
  border-bottom:4px solid rgba(240,180,41,.45); padding-bottom:2px;
}
.cu-hero__lead{ font-size:16px; line-height:1.95; color:rgba(255,255,255,.94); margin:0 0 12px; }
.cu-hero__lead strong{ color:#fff; border-bottom:2px solid rgba(240,180,41,.55); }
.cu-hero__sub{ font-size:14px; line-height:1.9; color:rgba(255,255,255,.76); margin:0 0 26px; }
.cu-hero__btns{ display:flex; gap:12px; flex-wrap:wrap; }
.wu-b-cust .cu-hero__cta{
  display:inline-block; background:var(--cu-amber); color:#241a13 !important;
  font-weight:800; font-size:16px; text-decoration:none;
  border-radius:8px; padding:16px 32px;
}
.wu-b-cust .cu-hero__cta:hover{ background:#ffc94d; }
.wu-b-cust .cu-hero__ghost{
  display:inline-block; background:transparent; color:#fff !important;
  border:2px solid rgba(255,255,255,.5); font-weight:700; font-size:15px;
  text-decoration:none; border-radius:8px; padding:14px 26px;
}
.wu-b-cust .cu-hero__ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.cu-hero__media img{ display:block; width:100%; height:auto; border-radius:12px; }

/* 数字ストリップ */
.cu-stats{ background:rgba(0,0,0,.18); }
/* 背景は画面いっぱい、中身はヘッダー・本文と同じ 1160px に収める */
.cu-stats__in{
  max-width:1160px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
}
.cu-stat{ padding:20px 24px; text-align:left; }
.cu-stat b{ display:block; font-size:30px; font-weight:900; color:#fff; line-height:1.2; }
.cu-stat b i{ font-style:normal; font-size:14px; font-weight:700; margin-left:3px; }
.cu-stat span{ display:block; font-size:12.5px; color:rgba(255,255,255,.74); margin-top:5px; line-height:1.6; }

/* ------------------------------------------------------------ 見出し */
/* 【重要】layout:full のページは .wu-wrap--full（max-width:none / padding:0）の中に
   直接入る。セクション側で横幅と左右の余白を持たないと、文字が画面端で切れる。
   数値はヘッダー（.wu-head__inner）と同じ 1160px / 左右20px にそろえてある。 */
.cu-sec{ max-width:1160px; margin:64px auto 0; padding:0 20px; }
.cu-sec__label{
  font-size:11.5px; font-weight:800; letter-spacing:.16em;
  color:var(--cu-accent); margin:0 0 8px;
}
.cu-sec h2{
  font-size:28px; font-weight:900; line-height:1.5; color:var(--cu-ink);
  margin:0 0 10px; padding:0; border:0;
}
.cu-sec__lead{ font-size:15.5px; line-height:1.95; color:var(--cu-sub); margin:0 0 28px; }

/* -------------------------------------------------------- 費用カード */
.cu-cost{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:0 0 20px; }
.cu-cost__c{
  border:1px solid var(--cu-line); border-radius:12px; padding:22px 24px; background:#fff;
}
.cu-cost__c--hi{ border-color:var(--cu-accent); border-width:2px; }
.cu-cost__t{ font-size:14px; font-weight:800; color:var(--cu-accent); margin:0 0 10px; }
.cu-cost__n{ font-size:32px; font-weight:900; color:var(--cu-ink); line-height:1.15; margin:0 0 4px; }
.cu-cost__n i{ font-style:normal; font-size:15px; font-weight:700; margin-left:2px; }
.cu-cost__u{ font-size:13px; color:var(--cu-sub); margin:0 0 12px; }
.cu-cost__d{ font-size:13.5px; line-height:1.85; color:var(--cu-sub); margin:0; }
.cu-cost__d b{ color:var(--cu-ink); }

.cu-flip{
  background:var(--cu-accent); color:#fff; border-radius:12px;
  padding:26px 30px; margin:0 0 14px;
  display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center;
}
.cu-flip__n{ font-size:46px; font-weight:900; line-height:1; white-space:nowrap; }
.cu-flip__n i{ font-style:normal; font-size:17px; font-weight:700; margin-left:3px; }
.cu-flip__t{ font-size:15px; line-height:1.9; color:rgba(255,255,255,.94); }
.cu-flip__t b{ color:var(--cu-amber); }
.cu-flip__t small{ display:block; font-size:12.5px; color:rgba(255,255,255,.7); margin-top:8px; line-height:1.75; }

/* ------------------------------------------------------------ タイル */
.cu-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.cu-grid--2{ grid-template-columns:repeat(2,1fr); }
.wu-b-cust .cu-tile{
  display:block; border:1px solid var(--cu-line); border-radius:12px;
  padding:20px 22px; background:#fff; text-decoration:none; color:var(--cu-ink) !important;
}
.wu-b-cust .cu-tile:hover{ border-color:var(--cu-accent); background:var(--cu-bg); }
.cu-tile__n{ display:block; font-size:11.5px; font-weight:800; letter-spacing:.1em; color:var(--cu-accent); margin:0 0 7px; }
.cu-tile__t{ display:block; font-size:17px; font-weight:800; line-height:1.5; margin:0 0 6px; }
.cu-tile__d{ display:block; font-size:13.5px; line-height:1.85; color:var(--cu-sub); }

/* ------------------------------------------------------------ 実績 */
.cu-case{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.cu-case__c{ border:1px solid var(--cu-line); border-radius:12px; overflow:hidden; background:#fff; }
.cu-case__h{ background:var(--cu-bg); padding:18px 24px; border-bottom:1px solid var(--cu-line); }
.cu-case__n{ font-size:11.5px; font-weight:800; letter-spacing:.1em; color:var(--cu-accent); margin:0 0 5px; }
.cu-case__t{ font-size:19px; font-weight:800; color:var(--cu-ink); margin:0; line-height:1.5; }
.cu-case__b{ padding:20px 24px; }
.cu-case__b dl{ display:grid; grid-template-columns:auto 1fr; gap:8px 16px; margin:0; font-size:14px; }
.cu-case__b dt{ font-weight:700; color:var(--cu-sub); white-space:nowrap; }
.cu-case__b dd{ margin:0; color:var(--cu-ink); line-height:1.8; }

/* ------------------------------------------------------------ 手順 */
.cu-step{ counter-reset:cu; display:grid; gap:2px; }
.cu-step__i{
  display:grid; grid-template-columns:52px 1fr; gap:18px; align-items:start;
  padding:18px 22px; background:var(--cu-bg); border-radius:10px;
}
.cu-step__n{
  width:38px; height:38px; border-radius:50%; background:var(--cu-accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px;
}
.cu-step__t{ font-size:16px; font-weight:800; color:var(--cu-ink); margin:0 0 4px; }
.cu-step__d{ font-size:14px; line-height:1.85; color:var(--cu-sub); margin:0; }

/* ------------------------------------------------------------ 調整 */
/* 上の a ルールに負けて accent 色になるので、フッター内は明示的に戻す */
.wu-b-cust .wu-foot a{ color:#c9c6c2; }
/* イベントの検討は長い。記事を読んでいる最中に追従バーを被せない */
.wu-b-cust .wu-ctabar{ display:none !important; }

@media(max-width:900px){
  .cu-hero__in{ grid-template-columns:1fr; gap:26px; padding:36px 20px 32px; }
  .cu-hero h1{ font-size:27px; }
  .cu-stats__in{ grid-template-columns:repeat(2,1fr); }
  .cu-sec{ margin:46px auto 0; }
  .cu-sec h2{ font-size:22px; }
  .cu-cost, .cu-grid, .cu-grid--2, .cu-case{ grid-template-columns:1fr; }
  .cu-flip{ grid-template-columns:1fr; gap:14px; padding:22px 20px; }
  .cu-flip__n{ font-size:38px; }
  .cu-step__i{ grid-template-columns:44px 1fr; gap:14px; padding:16px 16px; }
}

@media(max-width:599px){
  /* 【注意】brand.css の @media(max-width:599px) にある .wu-wrap{padding:18px 16px 48px}
     が、あとから .wu-wrap--full{padding:0} を上書きしてしまう（詳細度は同じ 0,1,0 で
     記述順が後のため）。そのままだとヒーローの帯が画面端まで届かないので打ち消す。 */
  body.wu-b-cust .wu-wrap--full{ padding:0; }
  /* 左右20pxはヘッダー（.wu-head__inner）と同じ。全幅で左端をそろえる */
  .cu-hero__in{ padding:32px 20px 28px; }
}

/* ------------------------------------------------- ヘッダーの折り返し対策 */
/* ナビ5項目＋長いタグラインで .wu-head__inner（1160px）を超え、2行に折り返していた。
   タグラインとラベルを短くしたうえで、念のため折り返し自体を止めておく。
   1199px 以下はタグラインを隠す（1023px 以下はナビが消えるので影響なし）。 */
.wu-b-cust .wu-head__tag{ white-space:nowrap; }
.wu-b-cust .wu-head__nav{ flex-wrap:nowrap; }
.wu-b-cust .wu-head__nav a{ white-space:nowrap; }
@media(max-width:1199px){
  .wu-b-cust .wu-head__tag{ display:none; }
}