/* nae:cell：承認した見本の画像を土台に、文字だけ HTML で重ねる。
   .page の幅を基準にした cqw（列の幅の1%）で、見本（幅1024px）の位置と大きさをそのまま保つ。
   絵は作り直していない（文字の所だけ、まわりの色で埋めてある）。 */
:root{--teal:#11424A;--gray:#4A5F5E;--coral:#FD6947;--mint:#BFE9DD;--pale:#CFE3DF;--white:#F3F7F6;
  --jp:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --en:"Jost","Hiragino Sans","Noto Sans JP",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:#E9F1EF;color:var(--teal);font-family:var(--jp);font-weight:300;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
h1,h2,h3,p{font-weight:300;font-size:inherit}
.page{width:min(100%,560px);margin:0 auto;background:var(--white);container-type:inline-size;position:relative;overflow:hidden;box-shadow:0 0 60px rgba(14,63,62,.10)}
.sec{position:relative;display:block;overflow:hidden}
.sec__bg{width:100%;height:auto}
/* まとまりを示すだけの入れ物（見出し・段落・リスト）は箱を作らず、中の文字だけを見本の位置に置く */
.sec h1:not(.t),.sec h2:not(.t),.sec h3:not(.t),.sec p:not(.t):not(.logo),.sec .grp{display:contents}
.t{position:absolute;white-space:nowrap;line-height:1;color:var(--teal);font-weight:300;font-feature-settings:"palt";font-kerning:normal}
.t.num{font-family:var(--jp);font-weight:200;font-feature-settings:"palt","pnum"}
.t.coral{color:var(--coral)} .t.gray{color:var(--gray)} .t.white{color:#fff} .t.mint{color:var(--mint)} .t.pale{color:var(--pale)} .t.age{color:#4F7775}
/* 見本の枠に置く部品（押せる範囲・カードの列・目印・ロゴ）。位置と大きさは HTML に書き込んである */
.sec [data-rect]{position:absolute}
.logo img{width:100%;height:100%;object-fit:contain}
/* 文字の位置と大きさは、HTML に書き込んである（JS が動かなくても見本の位置に出る） */

/* 押せる範囲：ボタンの板は見本の画像のまま。文字だけ HTML。押したときは、板ごと少し沈んで見える */
.hit{display:block;border-radius:2.6cqw;-webkit-tap-highlight-color:transparent;transition:transform .2s var(--ease), background-color .2s, backdrop-filter .2s}
.hit:hover{background:rgba(255,255,255,.07)}
.hit:active{background:rgba(120,30,10,.08)}
.hit:active .t{transform:translateY(.25cqw)}
.hit:focus-visible,.btn:focus-visible,button:focus-visible,summary:focus-visible,.scroller:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
#apply .hit:focus-visible{outline-color:#fff}

/* FV：レンズの1枚が、あとからコーラルに灯る（灯ったあとは、見本の画像そのもの） */
.tile{display:block;pointer-events:none}
.tile img{width:100%;height:100%}
.js .tile{opacity:1}
.js #fv.is-in .tile{opacity:0;transition:opacity 1.4s ease 1.5s}
html:not(.js) .tile{display:none}

/* 02 悩み：横に送れるカード（1枚目は見本の画像から切り出したもの） */
.scroller{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab;touch-action:pan-x pan-y}
.scroller.is-drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.scroller.is-drag *{pointer-events:none;user-select:none}
.pcard img{-webkit-user-drag:none;user-select:none}
.scroller::-webkit-scrollbar{display:none}
.cards{display:flex;gap:2.34cqw;padding:1.95cqw 4.1cqw 0;width:max-content}
.pcard{position:relative;flex:0 0 76.27cqw;height:30.18cqw;scroll-snap-align:start;scroll-margin-left:4.1cqw;filter:drop-shadow(0 1cqw 2cqw rgba(14,63,62,.07))}
.pcard__bg{position:absolute;inset:0;width:100%;height:100%}
.pcard__ph{position:absolute;left:3.13cqw;top:3.13cqw;width:24.41cqw;height:24.41cqw;border-radius:50%;object-fit:cover}
.pcard p{display:contents}
.dots{display:flex;align-items:center;gap:2.93cqw}
/* 目印は押せるボタン。見た目は小さいまま、押せる範囲だけ広げる */
.dots button{position:relative;flex:none;appearance:none;border:0;padding:0;width:2.05cqw;height:2.05cqw;border-radius:50%;background:#90CCBA;cursor:pointer;transition:width .35s var(--ease), background-color .35s}
.dots button::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,36px);height:44px;transform:translate(-50%,-50%)}
.dots button.on{width:5.96cqw;height:2.05cqw;border-radius:1.03cqw;background:#06423F}
.dots button:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* よくある質問（見本に無い追加の部分。同じ世界の、細い罫線だけで組む） */
.faq{background:var(--white);padding:9cqw 6cqw 11cqw;position:relative}
.faq__h{font-size:7.2cqw;line-height:1.4;letter-spacing:.02em;margin-bottom:5cqw}
.faq details{border-top:1px solid rgba(17,66,74,.28)}
.faq details:last-child{border-bottom:1px solid rgba(17,66,74,.28)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:3cqw;padding:4.2cqw 0;font-size:max(16px,4.3cqw);line-height:1.5;min-height:48px}
.faq summary::-webkit-details-marker{display:none}
/* 開く・閉じるの印は、矢印ではなく「＋」と「−」（細い線2本） */
.faq summary::after{content:"";flex:none;width:3.4cqw;height:3.4cqw;margin-right:.6cqw;
  background:linear-gradient(var(--teal),var(--teal)) center/100% 1px no-repeat, linear-gradient(var(--teal),var(--teal)) center/1px 100% no-repeat;transition:transform .3s var(--ease)}
.faq details[open] summary::after{background:linear-gradient(var(--teal),var(--teal)) center/100% 1px no-repeat}
.faq details p{font-size:max(15px,3.7cqw);line-height:1.85;padding:0 0 4.6cqw}
.faq details:not([open])>p{display:none}
.faq details small{display:block;font-size:max(13px,3.1cqw);color:var(--gray);margin-top:1.2cqw}

/* 最後の注記 */
.foot{background:#0C3A39;color:var(--pale);padding:5cqw 6cqw 5cqw;font-size:max(13px,3.3cqw);line-height:1.8}
.foot p+p{margin-top:.4em}
@media (max-width:599px){.foot{padding-bottom:calc(5cqw + 84px)}}

/* 追従ボタン（スマホ）：色ガラスの厚い板。mato-button-depth の部品で組む
   土台＝コーラルのグラデ／厚み＝下にずらした濃い面／内側の線／ガラスの層（上端の明部・上3分の1の光沢・右下の反射光）
   影＝黒やグレーを使わず主色を濃くした色。接地影と、床の光だまりを分ける。光は上から。矢印は付けない。 */
.btn{--c1:#FF8D6E;--c2:#FF6B4A;--c3:#F25638;--deep:#C9472C;--sh:190,66,40;--u:min(1vw,5.6px);
  position:relative;display:grid;place-items:center;min-height:52px;border-radius:calc(2.8*var(--u));
  color:#fff;font-weight:400;font-size:clamp(15px,calc(4.6*var(--u)),22px);letter-spacing:.08em;line-height:1.2;
  text-shadow:0 1px 3px rgba(var(--sh),.6);
  background:linear-gradient(to bottom,rgba(255,255,255,.36),rgba(255,255,255,0) 36%),linear-gradient(102deg,var(--c1),var(--c2) 46%,var(--c3));
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.82), inset -2px -4px 8px rgba(255,255,255,.36), inset 0 0 0 1px rgba(255,255,255,.38),
    0 4px 0 var(--deep), 0 8px 7px rgba(var(--sh),.24), 0 20px 24px -8px rgba(255,107,74,.44)}
.btn::before{content:"";position:absolute;inset:5px;border-radius:calc(1.9*var(--u));border:1px solid rgba(255,255,255,.58);pointer-events:none}
/* スマホだけ。すりガラスの帯を画面の下に敷き、その上にボタンを置く（文字の上に、ボタンだけが浮いて重ならないように） */
.stick{display:none}
@media (max-width:599px){
  .stick{display:block;position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px 6vw calc(12px + env(safe-area-inset-bottom));
    background:rgba(243,247,246,.88);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
    border-top:1px solid rgba(255,255,255,.95);box-shadow:0 -6px 20px rgba(14,63,62,.08);
    transform:translateY(115%);transition:transform .5s var(--ease)}
  .stick.is-on{transform:none}
  .stick .btn{min-height:50px;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.82), inset -2px -4px 8px rgba(255,255,255,.36), inset 0 0 0 1px rgba(255,255,255,.38), 0 3px 0 var(--deep), 0 6px 8px rgba(var(--sh),.22)}
  .stick .btn:active{transform:translateY(2px)}
}

/* デモの案内 */
.demo{position:fixed;inset:0;display:grid;place-items:center;background:rgba(14,63,62,.45);z-index:40;padding:24px}
.demo[hidden]{display:none}
.demo__box{max-width:360px;border-radius:18px;padding:28px 24px 22px;text-align:center;background:rgba(255,255,255,.95);border:1px solid #fff;box-shadow:0 12px 40px rgba(14,63,62,.25)}
.demo__box p{font-size:17px;line-height:1.6}
.demo__box .d{font-size:14px;margin-top:8px}
.demo__box button{margin-top:18px;min-width:140px;min-height:44px;border:1px solid var(--teal);border-radius:8px;background:#fff;color:var(--teal);font:inherit;font-size:15px;cursor:pointer}

/* 動き：文字だけが、セクションが見えたときに1回、静かに現れる（絵は動かさない） */
.js .rv{opacity:0;translate:0 1.6cqw;transition:opacity .9s ease var(--d,0s), translate 1.1s var(--ease) var(--d,0s)}
.js .is-in .rv{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;translate:none;transition:none}
  .js .tile{display:none}
  .stick,.hit,.dots button{transition:none}
}
@media (min-width:900px){
  body{background:linear-gradient(90deg,#DDEFEA 0,#EEF5F3 30%,#EEF5F3 70%,#DDEFEA 100%)}
}