/* 無料の訴求とアプリを開くボタンの強調（2026-11-06）。
   色は既存の紺・青・白だけを使い、大きさで目立たせる（kk指示：色を変えると雰囲気が変わる）。
   トップ・機能ページ・案内ページの共通部品。この1ファイルを外せば以前の見た目に戻る。 */

/* トップ冒頭：「完全無料」の札とボタンを大きく */
.free-badge{display:inline-block;margin-bottom:clamp(8px,1.4cqw,16px);padding:4px 14px;border-radius:999px;background:var(--color-accent);color:var(--color-white);font-size:clamp(17px,2.6cqw,28px);font-weight:800;letter-spacing:.08em;line-height:1.5}
.hero .cta{min-height:clamp(56px,7cqw,76px);padding:10px clamp(14px,2.2cqw,26px);gap:clamp(10px,1.6cqw,18px);box-shadow:0 8px 22px var(--color-shadow)}
.hero .cta>span{font-size:clamp(19px,3cqw,30px)}
.hero .cta small{font-size:clamp(10px,1.3cqw,14px);font-weight:700}
.hero .cta img{width:clamp(28px,4cqw,42px);height:clamp(28px,4cqw,42px)}
@media(max-width:600px){
 .hero .cta{padding:8px 12px;gap:8px;min-height:56px}.hero .cta>span{font-size:19px}.hero .cta small{font-size:10px}
 .hero .cta img{width:28px;height:28px}.hero .cta svg{display:none}.free-badge{font-size:17px}
}
@media(max-width:359px){.hero .cta>span{font-size:16px}.free-badge{font-size:15px}}

/* 無料の帯：淡い地に大きな「完全無料」と大きなボタン */
.free-band{background:var(--color-mist);color:var(--color-ink);text-align:center;padding:48px 20px 48px;border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line)}
.opening+.free-band{padding-top:64px}
.free-band-title{line-height:1.15;font-weight:800}
.free-band-title span{display:block;font-size:clamp(18px,4.6vw,26px);letter-spacing:.08em}
.free-band-title em{display:block;margin-top:6px;font-style:normal;font-size:clamp(56px,17vw,112px);letter-spacing:.06em;color:var(--color-accent)}
.free-points{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin:20px auto 0;padding:0;list-style:none;font-size:clamp(17px,4.4vw,22px);font-weight:800}
.free-points li:before{content:'✓';margin-right:6px;color:var(--color-accent)}
.app-cta{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;max-width:520px;min-height:80px;margin:30px auto 0;padding:12px 22px;border-radius:14px;background:var(--color-ink);color:var(--color-white);font-size:clamp(22px,6.4vw,30px);font-weight:800;letter-spacing:.04em;text-decoration:none;box-shadow:0 10px 26px var(--color-shadow)}
.app-cta img{width:44px;height:44px;border-radius:10px}
.app-cta>span{white-space:nowrap;display:flex;flex-direction:column;align-items:flex-start;line-height:1.3}
.app-cta small{font-size:13px;font-weight:700}
.app-cta svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.4;margin-left:auto}
@media(hover:hover){.app-cta:hover{background:var(--color-accent)}}
.app-cta:focus-visible,.app-bar a:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
.free-why{display:inline-block;margin-top:20px;color:var(--color-accent);font-size:16px;font-weight:700;text-decoration:underline;text-underline-offset:4px}
@media(min-width:960px){.opening+.free-band{padding-top:110px}}

/* 機能・案内ページの本文末尾に置く版 */
.f-main .free-band{margin-top:40px;padding:36px 16px 32px;border:1px solid var(--color-line);border-radius:16px}
.f-main .free-band-title em{font-size:clamp(48px,15vw,88px)}
.f-main .app-cta{font-size:clamp(20px,5.6vw,26px);padding-inline:14px}

/* スマホで画面下に常に出すボタン。冒頭や帯のボタンが見えている間は隠す */
.app-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--color-glass);box-shadow:0 -4px 16px var(--color-shadow);transform:translateY(110%);transition:transform .25s ease}
.app-bar.is-shown{transform:none}
.app-bar a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:60px;border-radius:12px;background:var(--color-ink);color:var(--color-white);font-size:21px;font-weight:800;text-decoration:none}
.app-bar img{width:32px;height:32px;border-radius:7px}
.app-bar small{padding:2px 8px;border-radius:999px;background:var(--color-accent);font-size:13px;font-weight:800}
@media(max-width:899px){body:has(.app-bar) .footer{padding-bottom:96px}}
@media(min-width:900px){.app-bar{display:none}}
@media(prefers-reduced-motion:reduce){.app-bar{transition:none}}