/* 静止した各画面を基本にし、PCの追従表示だけ段階的に有効化する。 */
.benefits .section-heading{margin-bottom:40px}
.benefits .eyebrow{margin-bottom:16px}
.benefits h2{font-size:clamp(25px,5.8vw,42px)}
.benefits-lead{max-width:720px;margin-top:24px;font-size:16px;line-height:2}
.benefits-steps{min-width:0}
.benefits-step{display:grid;gap:30px;padding-block:28px 56px;min-width:0}
.benefits-figure{margin:0;min-width:0;text-align:center}
.benefits-phone{width:min(72vw,300px);margin-inline:auto;position:relative;padding:7px;border:1px solid #484943;border-radius:36px;background:#242622;box-shadow:0 22px 48px #25352f20}
.benefits-screen{position:relative;aspect-ratio:1/2;overflow:hidden;border-radius:28px;background:#f5f1e8;container-type:inline-size}
.benefits-island{position:absolute;top:15px;left:50%;transform:translateX(-50%);width:27%;height:16px;border-radius:20px;background:#171915;pointer-events:none}
.benefits-page{position:absolute;top:0;left:0;width:100%;max-width:none;height:auto;transform:translateY(calc(var(--offset) * -100cqw / 390));transition:none}
.benefits-bar{position:absolute;bottom:0;left:0;width:100%;height:auto}
.benefits-highlight{position:absolute;left:calc(var(--x) * 100cqw / 390);top:calc(var(--top) * 100cqw / 390);width:calc(var(--w) * 100cqw / 390);height:calc(var(--h) * 100cqw / 390);border:2px solid #f2c14e;border-radius:calc(10 * 100cqw / 390);box-shadow:0 0 14px #f2c14e99,inset 0 0 7px #f2c14e40;pointer-events:none}
.benefits-figure figcaption{margin-top:18px;font-size:12px;color:#4a4a4a}
.benefits-copy{max-width:560px;margin-inline:auto;width:100%}
.benefits-tag{display:flex;align-items:baseline;gap:5px;font-size:13px;color:#8a3524;margin-bottom:16px}
.benefits-tag em{font:italic 24px Georgia,serif}
.benefits-copy h3{font-family:var(--serif);font-weight:500;font-size:clamp(23px,3vw,30px);line-height:1.65;margin-bottom:20px}
.benefits-copy>p:last-child{font-size:16px;line-height:2}
.benefits-chat{padding:calc(55 * 100cqw / 390) calc(20 * 100cqw / 390);text-align:left;color:var(--ink)}
.benefits-chat-label{text-align:center;font-size:calc(15 * 100cqw / 390);margin-bottom:calc(42 * 100cqw / 390)}
.benefits-message{width:87%;padding:calc(18 * 100cqw / 390);border-radius:16px;font-size:calc(18 * 100cqw / 390);line-height:1.85}
.benefits-message-shop{margin-left:auto;background:#e8ddd0;border-bottom-right-radius:3px}
.benefits-message-studio{margin-top:calc(34 * 100cqw / 390);background:#fff;border:1px solid #dbe1da;border-bottom-left-radius:3px}
.benefits-message small{display:block;color:#8a3524;font-size:calc(15 * 100cqw / 390);margin-bottom:8px}
.benefits-thumbnail{width:100%;aspect-ratio:350/240;overflow:hidden;position:relative;margin-top:14px;border-radius:8px}
.benefits-thumbnail img{position:absolute;width:calc(390 / 350 * 100%);max-width:none;left:calc(-20 / 350 * 100%);top:0;transform:translateY(calc(-1858 / 3657 * 100%))}
.benefits-stage{display:none}
/* SVG の偶奇塗りで複数の穴を同時に抜く。枠と同じ390×780座標。 */
.benefits-focus,.benefits-spotlight{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.benefits-spotlight{fill:rgba(10,8,6,.62)}
.benefits-highlight::after{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;background:conic-gradient(from var(--benefits-angle),transparent 0deg 230deg,#fff8b5 285deg,#f2c14e 320deg,transparent 360deg);mask:linear-gradient(#fff 0 0) content-box exclude,linear-gradient(#fff 0 0);animation:none}
.benefits.is-scrubbing .benefits-highlight::after{animation:benefits-orbit 3.6s linear infinite}
@property --benefits-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes benefits-orbit{to{--benefits-angle:360deg}}
@media(min-width:1024px){
 .benefits-step{grid-template-columns:360px minmax(0,1fr);gap:64px;align-items:center;padding-block:40px 70px}
 .benefits-phone{width:320px}
 .benefits-copy{margin-inline:0}
 .benefits.is-enhanced .benefits-layout{display:grid;grid-template-columns:400px minmax(0,1fr);gap:64px;align-items:start}
 .benefits.is-enhanced .benefits-stage{display:block;position:sticky;top:100px;padding-block:24px}
 .benefits-stage .benefits-figure{transition:none}
 .benefits-stage .benefits-chat-figure{position:absolute;inset:24px 0 auto;opacity:0}
 .benefits.is-enhanced .benefits-step{display:flex;min-height:70vh;min-height:70svh;padding-block:64px}
 .benefits.is-enhanced .benefits-step>.benefits-figure{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .benefits.is-enhanced .benefits-copy{opacity:.35;transition:none}
 .benefits.is-enhanced .is-current .benefits-copy{opacity:1}
}
@media(prefers-reduced-motion:reduce){
 .benefits.is-scrubbing .benefits-highlight::after{animation:none}
}
/* 起き上がる軸はスマホの下の端。足元の影は起き上がるほど濃く・小さく締まる */
.benefits.is-scrubbing:not(.is-enhanced) .benefits-phone{transform-origin:50% 100%}
.benefits.is-scrubbing:not(.is-enhanced) .benefits-figure{position:relative}
.benefits.is-scrubbing:not(.is-enhanced) .benefits-figure::before{content:'';position:absolute;left:50%;top:calc(min(72vw,300px) * 2 - 27px);width:min(72vw,300px);height:26px;transform:translateX(-50%) scaleX(calc(1.25 - .35 * var(--rise,1)));border-radius:50%;background:radial-gradient(closest-side,rgba(20,14,8,.42),transparent);opacity:calc(.15 + .85 * var(--rise,1));filter:blur(4px);pointer-events:none;z-index:0}
.benefits.is-scrubbing:not(.is-enhanced) .benefits-phone{position:relative;z-index:1}
/* ── やりとりの画面：LINEのトーク画面に寄せる（ロゴは使わない） ── */
.benefits-chat{--u:calc(100cqw / 390);position:absolute;inset:0;display:flex;flex-direction:column;padding:0!important;background:#93a8d3;color:#111;font-family:'Hiragino Sans','Zen Kaku Gothic New',sans-serif}
.benefits-chat-head{display:flex;align-items:center;gap:calc(14 * var(--u));padding:calc(58 * var(--u)) calc(18 * var(--u)) calc(14 * var(--u));background:#8aa0cc;color:#111;font-size:calc(17 * var(--u))}
.benefits-chat-head span{font-size:calc(30 * var(--u));line-height:1;margin-top:calc(-4 * var(--u))}
.benefits-chat-body{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:calc(14 * var(--u));padding:calc(16 * var(--u)) calc(14 * var(--u)) calc(18 * var(--u))}
.benefits .benefits-message{width:auto!important;max-width:none;margin:0!important;padding:0!important;border:0!important;background:none!important;border-radius:0!important;display:flex;align-items:flex-end;gap:calc(8 * var(--u));font-size:calc(17 * var(--u));line-height:1.55}
.benefits .benefits-message p{margin:0;padding:calc(11 * var(--u)) calc(15 * var(--u));border-radius:calc(20 * var(--u));max-width:calc(268 * var(--u));position:relative}
.benefits .benefits-message-shop{justify-content:flex-end}
.benefits .benefits-message-shop p{background:#8de08a}
.benefits .benefits-message-shop p::after{content:'';position:absolute;right:calc(-5 * var(--u));top:calc(8 * var(--u));border:calc(7 * var(--u)) solid transparent;border-left-color:#8de08a;border-right:0}
.benefits .benefits-message-studio p{background:#fff}
.benefits .benefits-message-studio p::before{content:'';position:absolute;left:calc(-5 * var(--u));top:calc(8 * var(--u));border:calc(7 * var(--u)) solid transparent;border-right-color:#fff;border-left:0}
.benefits .benefits-message-studio{align-items:flex-start}
.benefits .benefits-message-studio .benefits-meta{align-self:flex-end}
.benefits-meta{flex:none;font-size:calc(11 * var(--u));line-height:1.35;color:#4b5a78;text-align:right}
.benefits-message-studio .benefits-meta{text-align:left}
.benefits-avatar{flex:none;display:grid;place-items:center;width:calc(38 * var(--u));height:calc(38 * var(--u));border-radius:50%;background:#fbf7ee;color:#b5452f;font-family:var(--serif);font-weight:600;font-size:calc(19 * var(--u));box-shadow:inset 0 0 0 calc(5 * var(--u)) #fbf7ee,inset 0 0 0 calc(6.5 * var(--u)) #b5452f}
.benefits .benefits-message.is-photo .benefits-thumbnail{width:calc(230 * var(--u));margin:0;border-radius:calc(16 * var(--u));aspect-ratio:350/240}
.benefits-chat-input{display:flex;align-items:center;gap:calc(14 * var(--u));padding:calc(10 * var(--u)) calc(14 * var(--u)) calc(26 * var(--u));background:#fff;color:#333}
.benefits-chat-input svg{width:calc(24 * var(--u));height:calc(24 * var(--u));flex:none}
.benefits-chat-field{flex:1;padding:calc(7 * var(--u)) calc(14 * var(--u));border-radius:calc(18 * var(--u));background:#f1f1f2;color:#aaa;font-size:calc(15 * var(--u))}
.benefits-chat-label{display:none}
/* スマホでは画面の中に全体が収まる大きさにし、その場で起き上がる（下にずらさない） */
@media(max-width:1023px){
  .benefits .benefits-phone{width:min(62vw,250px)}
  .benefits.is-scrubbing:not(.is-enhanced) .benefits-phone{transform-origin:50% 62%}
  .benefits.is-scrubbing:not(.is-enhanced) .benefits-figure::before{top:calc(min(62vw,250px) * 2 - 27px);width:min(62vw,250px)}
}
/* スマホ：見出し（悩み0Xへの答え＋タイトル）を先に出して画面の上に止め、その下でスマホが起き上がる。
   次の項目に来ると、前の見出しが押し出されて次の見出しに入れ替わる（stickyは項目の中だけで効く） */
@media(max-width:1023px){
  .benefits .benefits-step{display:flex;flex-direction:column;gap:22px;padding-top:0}
  .benefits .benefits-copy{display:contents}
  .benefits .benefits-title{order:-1;position:sticky;top:60px;z-index:5;margin:0 -20px;padding:14px 20px 12px;background:linear-gradient(#fdfdf9 82%,rgba(253,253,249,0))}
  .benefits .benefits-title h3{margin:4px 0 0}
  .benefits .benefits-figure{order:0}
  .benefits .benefits-copy>p{order:1;margin:0}
}
/* スマホ：止めるのは「悩み0Xへの答え」の札だけ。見出しはスマホの下へ（スマホが隠れないように） */
@media(max-width:1023px){
  .benefits .benefits-title{display:contents}
  .benefits .benefits-tag{order:-1;position:sticky;top:60px;z-index:5;margin:0 -20px;padding:12px 20px 14px;background:linear-gradient(#fdfdf9 75%,rgba(253,253,249,0))}
  .benefits .benefits-title h3{order:1;margin:0}
  .benefits .benefits-copy>p{order:2}
}