@charset "utf-8";
/* 空欄の検査表 — swiss-grid (No.075) × catalog × letters-fall
   赤1色 / 太い罫線のグリッド / 左寄せ・左揃え。中央揃えと装飾は禁止。 */

:root{
  --gold:#a8842c; --gold-l:#d9b25a; --gold-bg:#fdfaf1;
  --bg:#fff; --bg2:#f2f2f2; --card:#fff;
  --ink:#000; --body:#222; --muted:#777; --line:#000;
  --accent:#e30613;
  --line-thin:#d8d8d8;
  --gut:24px;
  --serif:"Inter Tight","Noto Sans JP",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{overflow-x:clip}
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:"Noto Sans JP","Inter",system-ui,sans-serif;
  font-size:16px; line-height:1.9;
  -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased;
  font-feature-settings:"palt" 1;
}
img{max-width:100%; height:auto; display:block}
em{font-style:normal; font-weight:700; color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- グリッド（左寄せ・12列） ---------- */
.grid{
  width:min(1180px,100% - calc(var(--gut) * 2));
  margin-inline:auto;
  display:grid; grid-template-columns:repeat(12,1fr); column-gap:20px;
}

/* ---------- 00 OPENING（写真の上に見出し） ---------- */
.open{position:relative; padding:0 0 clamp(28px,5vw,56px); isolation:isolate}

/* 背景の写真。白地に溶かすため上下を白へフェード */
.open__bg{position:absolute; inset:0 0 auto; height:clamp(420px,68vh,760px); z-index:-1; overflow:hidden}
.open__bg img{width:100%; height:100%; object-fit:cover; object-position:60% 45%;
  animation:kb 22s ease-in-out infinite alternate}
.open__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.84) 52%,rgba(255,255,255,.52) 78%,rgba(255,255,255,.14) 100%),
    linear-gradient(to bottom,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,0) 66%,#fff 100%);
}

/* 写真の上に乗る部分 */
.open__over{position:relative; padding-top:var(--gut);
  padding-bottom:clamp(18px,3vw,36px); align-content:start}
.open .open__eye{
  grid-column:1 / -1; justify-self:start;
  margin:0 0 clamp(18px,3.4vw,30px); padding:7px 15px;
  font-size:clamp(11.5px,1.05vw,13px); font-weight:700; letter-spacing:.1em;
  line-height:1.5;
  color:#fff; background:var(--ink); border:0; box-shadow:3px 3px 0 var(--accent);
  text-transform:none;
}
.open__h{
  grid-column:1 / -1; margin:0 0 clamp(22px,3vw,34px);
  font-size:clamp(36px,7.4vw,92px); line-height:1.08;
  font-weight:700; letter-spacing:-.03em; color:var(--ink);
}
.open .open__list{
  grid-column:1 / -1; margin:0;
  font-size:clamp(15px,1.6vw,19px); line-height:2.2; font-weight:500; color:var(--ink);
}

/* 写真の下、本文にあたる部分 */
.open__rest{margin-top:clamp(14px,2.2vw,28px)}
.open__flow{grid-column:1 / -1}
.open .open__mid{margin:0 0 16px; font-size:clamp(15px,1.55vw,18px); line-height:1.9; color:var(--body)}
.open .open__hit{
  margin:0; font-size:clamp(26px,3.6vw,44px); line-height:1.4;
  font-weight:700; letter-spacing:-.01em; color:var(--ink);
  padding-top:18px; border-top:3px solid var(--line);
}
.open .open__p{margin:0 0 16px; font-size:clamp(14.5px,1.45vw,16.5px); line-height:2; color:var(--body)}
.open .open__say{
  margin:0 0 16px; padding:14px 18px;
  font-size:clamp(15px,1.6vw,18px); font-weight:700; line-height:1.8; color:var(--ink);
  background:var(--bg2); border-left:3px solid var(--accent);
}
.open__rule{height:1px; background:var(--line-thin); margin-top:clamp(24px,4vw,44px)}

/* ---------- HERO ---------- */
.hero{padding:clamp(48px,8vw,104px) 0 0; position:relative}
.eyebrow{
  grid-column:1 / -1;
  font-family:var(--serif); font-size:12px; font-weight:500;
  letter-spacing:.22em; color:var(--ink); text-transform:uppercase;
  margin:0 0 clamp(18px,4vw,34px); padding-bottom:10px;
  border-bottom:3px solid var(--line);
}
.hero__h1{
  grid-column:1 / -1;
  margin:0 0 clamp(20px,3vw,30px);
  font-size:clamp(38px,8.4vw,104px); line-height:1.06;
  letter-spacing:-.02em; font-weight:700; color:var(--ink);
  text-wrap:balance;
}
.hero__body{grid-column:1 / span 7}
.hero__lead{margin:0 0 14px; font-size:clamp(15px,1.55vw,18px); line-height:1.95; color:var(--body)}
.hero__note{margin:0; font-family:var(--serif); font-size:12px; letter-spacing:.08em; color:var(--muted)}
.hero__rule{height:3px; background:var(--line); margin-top:clamp(26px,5vw,54px)}

/* ---------- セクション共通 ---------- */
.sec{padding:clamp(48px,8vw,104px) 0 0}
.sec__no{
  grid-column:1 / -1;
  margin:0 0 14px; font-family:var(--serif); font-size:12px;
  font-weight:700; letter-spacing:.2em; color:var(--accent);
}
.sec__title{
  grid-column:1 / span 11;
  margin:0 0 clamp(22px,3vw,36px);
  font-size:clamp(23px,3.5vw,44px); line-height:1.35;
  font-weight:700; letter-spacing:-.01em; color:var(--ink);
  text-wrap:balance; padding-bottom:16px; border-bottom:3px solid var(--line);
}
.sec__body{grid-column:1 / span 8}
.p{margin:0 0 18px; font-size:clamp(15px,1.5vw,17px); line-height:2}
.p--lead{font-size:clamp(17px,2vw,22px); font-weight:700; color:var(--ink); line-height:1.75}
.p--after{grid-column:1 / span 8; margin-top:30px}
.cap{margin:0 0 16px; font-size:14px; color:var(--muted)}
.note{
  margin:26px 0 0; padding:18px 20px; font-size:14.5px; line-height:1.95;
  color:var(--body); background:var(--bg2); border-left:3px solid var(--line);
}

/* ---------- 凡例 ---------- */
.legend{margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 22px}
.lg{display:flex; align-items:center; gap:8px}
.lg__t{margin:0; font-size:13.5px; line-height:1.6; color:var(--body)}
.mk{width:11px; height:11px; flex:none; display:inline-block}
.mk--in{background:var(--ink)}
.mk--mid{background:transparent; border:2px solid var(--ink)}
.mk--out{background:var(--accent)}

/* ---------- 01 2つのスタンス（①②を主役に） ---------- */
.stance{
  position:relative; display:grid; grid-template-columns:104px 1fr; gap:0 24px;
  padding:30px 26px 30px 0; background:#fff;
  border:3px solid var(--line); border-left-width:0;
}
.stance::before{
  content:""; position:absolute; left:0; top:-3px; bottom:-3px; width:10px;
  background:var(--accent);
}
.stance + .stance{margin-top:26px}
.stance__num{
  margin:0; justify-self:center; align-self:start;
  font-family:var(--serif); font-size:clamp(54px,7vw,92px); line-height:.9;
  font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums;
}
.stance__in{min-width:0; padding-right:4px}
.stance__tag{
  display:inline-block; margin:0 0 14px; padding:6px 14px;
  font-size:12.5px; font-weight:700; line-height:1.6; letter-spacing:.02em;
  color:#fff; background:var(--ink); border:0;
}
.stance__h{
  margin:0 0 16px; font-size:clamp(21px,2.8vw,34px); line-height:1.45;
  font-weight:700; letter-spacing:-.02em; color:var(--ink);
}
.sec .stance__p{margin:0 0 14px; font-size:clamp(14.5px,1.45vw,16px); line-height:1.95}

/* 01 は 00 の直後なので上の余白を詰める */
.sec--first{padding-top:clamp(38px,6vw,76px)}

/* ---------- 表（中心） ---------- */
.tblwrap{
  width:min(1180px,100% - calc(var(--gut) * 2));
  margin:clamp(26px,4vw,40px) auto 0;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
/* 3列なので表は左半分に収める。右に伸ばすと間延びする */
.tbl{max-width:620px}
.tbl{border-collapse:collapse; width:100%; min-width:0; font-variant-numeric:tabular-nums}
.tbl thead th{
  font-family:var(--serif); font-size:11.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
  text-align:left; padding:0 14px 10px; border-bottom:3px solid var(--line);
  white-space:nowrap;
}
.tbl td{padding:15px 14px; border-bottom:1px solid var(--line-thin); vertical-align:middle; text-align:left}
.c-no{font-family:var(--serif); font-size:13px; color:var(--muted); width:72px}
.c-nm{font-size:16px; font-weight:700; color:var(--ink)}
.c-mk{width:72px; text-align:right}
.c-tx{font-size:14.5px; color:var(--body)}
.row--out .c-nm{color:var(--accent)}
.row{opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease}
.row.is-in{opacity:1; transform:none}

/* ---------- 数直線 ---------- */
.scale{margin:0 0 28px; padding:26px 24px; border:3px solid var(--line)}
.scale svg{width:100%; max-width:640px; height:auto; display:block}
.scale figcaption{margin-top:12px; font-size:13px; color:var(--muted); line-height:1.8}

/* ---------- 中身4点 ---------- */
.items{margin:0; padding:0}
.item{display:grid; grid-template-columns:132px 1fr; gap:20px; align-items:baseline;
  padding:20px 0; border-bottom:1px solid var(--line-thin)}
.item:first-child{border-top:1px solid var(--line-thin)}
.item dt{
  font-family:var(--serif); font-size:clamp(26px,3.6vw,42px); font-weight:700;
  line-height:1; letter-spacing:-.02em; color:var(--ink);
}
.item dd{margin:0; font-size:15px; line-height:1.9; color:var(--body)}

/* ---------- CTA ---------- */
.sec--cta{padding-bottom:clamp(48px,8vw,96px)}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  margin:10px 0 12px; padding:19px 34px;
  background:#06C755; color:#fff; text-decoration:none;
  font-size:16.5px; font-weight:700; line-height:1.3;
  border:0; transition:filter .18s ease, transform .18s ease;
}
.btn:hover,.btn:focus-visible{filter:brightness(.93); transform:translateY(-2px)}
.cta__note{margin:0; font-size:13.5px; color:var(--muted)}

/* ---------- フッター ---------- */
.foot{margin-top:clamp(40px,6vw,72px); border-top:3px solid var(--line); padding:32px 0 56px}
.foot__body{grid-column:1 / span 9}
.disc{list-style:none; margin:0 0 22px; padding:0}
.disc li{position:relative; padding-left:16px; margin-bottom:7px; font-size:13px; line-height:1.85; color:var(--muted)}
.disc li::before{content:""; position:absolute; left:0; top:.82em; width:6px; height:1px; background:var(--muted)}
.foot__sig{margin:0 0 4px; font-size:14px; font-weight:700; color:var(--ink); letter-spacing:.04em}
.foot__c{margin:0; font-family:var(--serif); font-size:11.5px; letter-spacing:.1em; color:var(--muted)}

/* ---------- 登場 ---------- */
.in{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.in.is-in{opacity:1; transform:none}

/* ---------- SP ---------- */
@media (max-width:900px){
  :root{--gut:18px}
  .grid{column-gap:12px}
  .hero__body,.sec__body,.sec__title,.p--after,.foot__body{grid-column:1 / -1}
  .stance{grid-template-columns:68px 1fr; gap:0 14px; padding:24px 18px 24px 0}
  .open .open__body,.open .open__turn,.open .open__turn{margin-top:30px}
  .item{grid-template-columns:92px 1fr; gap:14px}
}
@media (max-width:520px){
  .item{grid-template-columns:1fr; gap:4px}
  .item dt{font-size:30px}
}

/* ---------- モーション配慮 ---------- */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important}
  .in,.row{opacity:1!important; transform:none!important}
  .hero__note{display:none}
}
/* GSAP が読めない時の保険 */
.no-js .in,.no-js .row{opacity:1; transform:none}


/* ============================================================
   表現の強化（2026-09-14）白地・赤1色は維持したまま密度を上げる
   ============================================================ */

/* ---------- 紙の質感（白地に薄いノイズ） ---------- */
.grain{
  position:fixed; inset:-50%; z-index:2; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)} 60%{transform:translate(-3%,-2%)}
  80%{transform:translate(4%,2%)} 100%{transform:translate(0,0)}
}

/* ---------- 読了プログレス（上端の赤い線） ---------- */
.prog{position:fixed; top:0; left:0; right:0; height:3px; z-index:80; pointer-events:none}
.prog i{display:block; height:100%; width:0%; background:var(--accent); transition:width .1s linear}

/* ---------- セクションラベル（章番号＋英字） ---------- */
.sec__no{display:flex; align-items:center; gap:14px}
.sec__no b{font-weight:700; color:var(--accent)}
.sec__lbl{
  position:relative; padding-left:16px;
  font-family:var(--serif); font-size:11px; font-weight:500;
  letter-spacing:.22em; color:var(--muted);
}
.sec__lbl::before{
  content:""; position:absolute; left:0; top:50%;
  width:10px; height:1px; background:var(--muted);
}

/* 見出しの下線をスクロールで伸ばす */
.sec__title{position:relative; border-bottom:0; padding-bottom:18px}
.sec__title::after{
  content:""; position:absolute; left:0; bottom:0; height:3px; width:0;
  background:var(--line); transition:width 1.1s cubic-bezier(.22,1,.36,1);
}
.sec__title.is-in::after{width:100%}

/* ---------- 数字の帯 ---------- */
.stats{
  grid-column:1 / -1; margin:0 0 clamp(20px,3vw,32px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line-thin); border:1px solid var(--line-thin);
}
.stat{background:#fff; padding:22px 18px}
.stat__n{
  display:block; font-family:var(--serif);
  font-size:clamp(34px,5vw,64px); font-weight:700; line-height:1;
  letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums;
}
.stat--red .stat__n{color:var(--accent)}
.stat__t{display:block; margin-top:10px; font-size:12.5px; letter-spacing:.04em; color:var(--muted)}

/* ---------- 写真：Ken Burns ＋ 枠 ---------- */
@keyframes kb{0%{transform:scale(1.04)}100%{transform:scale(1.12)}}
/* ---------- 表：行のホバーと赤い行の強調 ---------- */
.tbl tbody tr{transition:background .2s ease}
.tbl tbody tr:hover{background:#fafafa}
.row--out .c-nm{position:relative}
.row--out .c-nm::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.row--out.is-in .c-nm::after{transform:scaleX(1)}
.mk{transition:transform .3s ease}
.tbl tbody tr:hover .mk{transform:scale(1.35)}

/* ---------- ①② の番号 ---------- */
.stance{position:relative}
.stance__num{
  font-family:var(--serif); color:var(--accent);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
.stance.is-in .stance__num{animation:pop .6s cubic-bezier(.34,1.56,.64,1) both}
@keyframes pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}

/* ---------- 中身3点：数字を大きく、線を引く ---------- */
.item{position:relative; overflow:hidden}
.item::before{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--ink); transition:width .9s cubic-bezier(.22,1,.36,1) .1s;
}
.item.is-in::before{width:100%}
.item dt{color:var(--accent); transition:transform .4s ease}
.item:hover dt{transform:translateX(4px)}

/* ---------- 「でも、授からない。」を強調 ---------- */
.open .open__hit{position:relative}
.open .open__hit::before{
  content:""; position:absolute; left:0; top:-3px; height:3px; width:0;
  background:var(--accent); transition:width 1s cubic-bezier(.22,1,.36,1) .3s;
}
.open.is-lit .open__hit::before{width:64px}

/* ---------- 医師の言葉：吹き出しの点滅カーソル ---------- */
.open .open__say{position:relative}
.open .open__say::after{
  content:""; display:inline-block; width:2px; height:1em; margin-left:4px;
  background:var(--ink); vertical-align:-.15em; animation:blink 1.1s steps(2) infinite;
}
@keyframes blink{50%{opacity:0}}

/* ---------- CTA：光が走る ---------- */
.btn{position:relative; overflow:hidden}
.btn::after{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg); animation:sheen 3.6s ease-in-out infinite;
}
@keyframes sheen{0%,60%{left:-60%}100%{left:120%}}
.btn:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(6,199,85,.28)}

/* ---------- 追従CTA（下端のドック） ---------- */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px clamp(16px,4vw,40px);
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border-top:3px solid var(--line);
  transform:translateY(110%); transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.dock.is-on{transform:none}
.dock__t{font-size:14px; font-weight:700; color:var(--ink); letter-spacing:.02em}
.dock__b{
  flex:none; padding:12px 26px; background:#06C755; color:#fff;
  text-decoration:none; font-size:14.5px; font-weight:700;
}
.dock__b:hover{filter:brightness(.93)}

/* ---------- 数直線：線が伸びる ---------- */
.scale{position:relative; overflow:hidden}
.scale::before{
  content:""; position:absolute; left:0; top:0; width:0; height:3px;
  background:var(--accent); transition:width 1.2s cubic-bezier(.22,1,.36,1)
}
.scale.is-in::before{width:100%}

/* ---------- 登場をリッチに ---------- */
.in{opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1)}
.in.is-in{opacity:1; transform:none}
.row{transform:translateY(14px)}

/* ---------- SP ---------- */
@media (max-width:900px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .dock__t{display:none}
  .dock{justify-content:stretch}
  .dock__b{flex:1; text-align:center}
}

/* ---------- モーション配慮（追加分も止める） ---------- */
@media (prefers-reduced-motion:reduce){
  .grain,.open__bg img,.btn::after,.open .open__say::after{animation:none!important}
  .sec__title::after,.item::before,.scale::before,.row--out .c-nm::after{transition:none!important}
  .sec__title::after{width:100%}
  .dock{transform:none}
}


/* ============================================================
   2026-09-14 その3（miho指示）
   ============================================================ */

/* ---------- 02 から続く表セクション（章番号なし） ---------- */
.sec--cont{padding-top:clamp(26px,4vw,54px)}
.sec--cont .sec__title{margin-top:0}

/* ---------- 区分の説明（表の直前） ---------- */
.lg__h{
  grid-column:1 / -1; margin:0 0 12px;
  font-size:12px; font-weight:700; letter-spacing:.16em; color:var(--muted);
}
.legend{grid-column:1 / -1; margin:0 0 6px}
.lg{padding:8px 14px; background:var(--bg2); border-left:3px solid var(--ink)}
.lg:nth-child(2){border-left-color:var(--muted)}
.lg:nth-child(3){border-left-color:var(--accent)}

/* ---------- 数直線：目盛を強調 ---------- */
.scale{padding:26px 22px}
.scale .tick-lo{font-weight:700}

/* ---------- 06〜08：文字だけの区間に表情をつける ---------- */
/* 段落の頭を大きく、以降を落ち着かせる */
.sec--voice .sec__body > .p:first-of-type{
  font-size:clamp(18px,2.2vw,26px); font-weight:700; line-height:1.7; color:var(--ink);
}
/* 引用のような強調行 */
.sec--voice .p em,.open .open__p em{
  display:inline; padding:0 2px;
  background-image:linear-gradient(transparent 62%,rgba(227,6,19,.20) 62%);
  background-repeat:no-repeat;
  background-size:0% 100%;
  transition:background-size 1.5s cubic-bezier(.25,.8,.3,1);
}
.sec--voice .p em.is-drawn,.open .open__p em.is-drawn{background-size:100% 100%}
/* セクション間の区切りに細い装飾罫 */
.sec--voice{position:relative}
.sec--voice::before{
  content:""; position:absolute; left:var(--gut); top:0;
  width:0; height:1px; background:var(--line-thin);
  transition:width 1.4s cubic-bezier(.22,1,.36,1);
}
.sec--voice.is-seen::before{width:calc(100% - var(--gut) * 2)}


/* ---------- 05 お渡しするもの：金で特別扱い ---------- */
:root{--gold:#a8842c; --gold-l:#d9b25a; --gold-bg:#fdfaf1}
.sec--gift .sec__title{
  background:linear-gradient(transparent 64%,rgba(168,132,44,.18) 64%);
  display:inline-block; padding-right:.3em;
}
.sec--gift .item{border-bottom-color:rgba(168,132,44,.35)}
.sec--gift .item:first-child{border-top-color:rgba(168,132,44,.35)}
.sec--gift .item dt{
  color:var(--gold);
  -webkit-text-fill-color:var(--gold);   /* clip:text に頼らない。確実に出す */
  background:none;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.sec--gift .item::before{background:var(--gold)}
.sec--gift .note{
  background:var(--gold-bg); border-left-color:var(--gold);
  border-top:1px solid rgba(168,132,44,.3); border-right:1px solid rgba(168,132,44,.3);
  border-bottom:1px solid rgba(168,132,44,.3);
}
.sec--gift .note::before{
  content:"特典"; display:inline-block; margin-right:10px; padding:2px 10px;
  font-size:11px; font-weight:700; letter-spacing:.12em; color:#fff; background:var(--gold);
}

/* ---------- SP ---------- */
@media (max-width:900px){
  .lg{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .sec--voice::before{transition:none!important; width:calc(100% - var(--gut) * 2)}
}


/* ---------- 07：測ったあと。写真を背景に敷く ---------- */
.sec--after{position:relative; isolation:isolate; overflow:hidden}
.after__bg{position:absolute; inset:0; z-index:-1; overflow:hidden}
.after__bg img{width:100%; height:100%; object-fit:cover; object-position:50% 42%}
.after__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.9) 46%,rgba(255,255,255,.62) 76%,rgba(255,255,255,.3) 100%),
    linear-gradient(to bottom,#fff 0%,rgba(255,255,255,.2) 18%,rgba(255,255,255,.2) 78%,#fff 100%);
}
.sec--after .sec__body .p{color:#1b1b1b}

/* ---------- 06：流産ちゃんを背景に敷き、文章を上に載せる ---------- */
.sec--who{position:relative; isolation:isolate; overflow:hidden}
.who__bg{
  position:absolute; z-index:-1; pointer-events:none;
  right:max(2vw,calc((100vw - 1180px) / 2)); top:50%;
  width:clamp(300px,38vw,520px); transform:translateY(-50%);
  opacity:.16;
}
.who__bg img{
  width:100%; height:auto; display:block;
  animation:floaty 7s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* 文章側は本文幅を保ちつつ、背景に負けないよう少しだけ濃く */
.sec--who .sec__body{position:relative}
.sec--who .sec__body .p{color:#1b1b1b}

@media (max-width:900px){
  .who__bg{right:-8%; width:clamp(240px,58vw,340px); opacity:.12}
}
@media (prefers-reduced-motion:reduce){
  .who__bg img{animation:none!important}
}


/* ---------- 見出しの中でカウントする数字 ---------- */
.ttl--count .cn{
  display:inline-block; min-width:1.6em; text-align:center;
  font-family:var(--serif); font-size:1.55em; font-weight:700;
  line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  vertical-align:-.06em;
}
.ttl--count .cn--red{color:var(--accent)}

/* ---------- 05 ゴールドのきらめき ---------- */
.sec--gift .item dt{position:relative; overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .sec--voice .p em,.open .open__p em{background-size:100% 100%!important; transition:none!important}
}


/* ---------- 02 見出し（演出なし） ---------- */
/* ---------- 05 ゴールドを5秒に1回光らせる ---------- */
.sec--gift .item dt{position:relative; overflow:hidden}
.sec--gift.is-live .item dt::after{
  content:""; position:absolute; top:0; left:-140%;
  width:60%; height:100%;
  background:linear-gradient(100deg,
    transparent 0%,
    rgba(255,255,255,.15) 35%,
    rgba(255,255,255,.9) 50%,
    rgba(255,255,255,.15) 65%,
    transparent 100%);
  transform:skewX(-18deg);
  animation:shine 3s linear infinite;
}
.sec--gift.is-live .item:nth-child(2) dt::after{animation-delay:.35s}
.sec--gift.is-live .item:nth-child(3) dt::after{animation-delay:.7s}
@keyframes shine{
  0%{left:-140%}
  27%{left:160%}
  100%{left:160%}
}

@media (prefers-reduced-motion:reduce){
  .sec--gift.is-live .item dt::after{animation:none!important; display:none}
}