/* マイチャペ公式サイトの CSS。docs/site-src/css/(lp_base.css・manga.css・page-top.css・site-parts.css)から、tools/build_site.mjs が作る。直接は、編集しない */

/* マイチャペ LP 共通(2026-10-20)。デザインのトーンは「Downloads\マイチャぺ-guide2.png」(ブランドガイド)。
   - 背景: 左の青(#a0d1e4 前後)→ 右のミント(#acfae9 前後)のグラデーション。下に向かって白へ抜ける
   - 線と文字: グレー #5a5a5a(ロゴの輪郭と同じ色)。輪郭は太く、角は丸い
   - 形: 色のブロックで区切った、ステンドグラスのアーチ窓
   - 色: ピンク #ffa8a5 / 青 #a0d1e4 / ミント #acfae9 / 黄 #faf9b0 前後 / 紫 #c19ebc 前後(ガイドの画像から目で読んだ値。厳密な値は、画像の見本の文字が崩れていて確かめられていない)
   骨組み(構成)だけは、参考にした各 LP から取り、色と形はここだけから読む。 */
:root {
  --ink: #5A5A5A; --muted: #767676; --line: #D9E6EA; --white: #FFFFFF;
  --blue: #A0D1E4; --blue-l: #BCDCEB; --pink: #FFA8A5; --mint: #ACFAE9; --yellow: #FAF9B0; --purple: #C19EBC;
  --grad: linear-gradient(90deg, #9CC8E3 0%, #A9FBE3 100%);
  --f: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  --bd: 3px solid var(--ink);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--f); font-size: 16px; line-height: 1.85; -webkit-text-size-adjust: 100%; }
h1, h2, h3, p, ul, ol { margin: 0; }
.w { max-width: 980px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.sec { padding-block: 56px; }
h1 { font-weight: 900; font-size: clamp(1.9rem, 7.4vw, 3.1rem); line-height: 1.4; text-wrap: balance; }
h2 { font-weight: 900; font-size: clamp(1.4rem, 5vw, 2rem); line-height: 1.55; text-wrap: balance; }
h3 { font-weight: 700; font-size: 1.08rem; line-height: 1.6; }
.muted { color: var(--muted); }
.small { font-size: .82rem; color: var(--muted); }
.c { text-align: center; }
a { color: var(--ink); }
a:focus-visible, summary:focus-visible, input:focus-visible, .btn:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

/* 背景: 青 → ミントのグラデーション。下は白に抜ける */
.gradbg { background: linear-gradient(180deg, rgba(255,255,255,0) 62%, #fff 100%), linear-gradient(90deg, #9CC8E3 0%, #A9FBE3 100%); }
.gradflat { background: linear-gradient(90deg, #A9D3E6 0%, #B4F7E6 100%); }
.top { display: flex; justify-content: space-between; align-items: center; padding-block: 16px; font-size: .86rem; }
.logo { font-weight: 900; font-size: 1.25rem; letter-spacing: .02em; }
.logo i { display: inline-block; width: .5em; height: .5em; background: var(--yellow); clip-path: polygon(0 0, 50% 50%, 0 100%, 100% 0, 50% 50%, 100% 100%); margin-right: 3px; }

/* ボタン: 太い輪郭 */
.btn { display: inline-block; padding: 15px 32px; border-radius: 999px; background: var(--yellow); color: var(--ink); border: var(--bd); font-weight: 900; text-decoration: none; box-shadow: 0 5px 0 var(--ink); transition: transform .12s, box-shadow .12s; }
.btn:hover { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.cta { display: grid; gap: 10px; justify-items: start; }
.cta.c { justify-items: center; }
.stores { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.qr { width: 84px; height: 84px; background: #fff; border: var(--bd); border-radius: 14px; display: grid; place-items: center; font-size: .6rem; text-align: center; line-height: 1.3; color: var(--muted); }

/* ステンドグラスの窓(アーチ)。中身は差し替え */
.arch { border: 5px solid var(--ink); border-radius: 999px 999px 14px 14px; overflow: hidden; background: #fff; position: relative; }
.arch.phone { width: min(230px, 60vw); aspect-ratio: 9 / 17; display: grid; place-items: end center; padding: 0 12px 16px; text-align: center; font-size: .76rem; color: var(--muted); box-shadow: 0 10px 0 rgba(90,90,90,.14); }
.arch.phone::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 44%; background:
  linear-gradient(115deg, var(--pink) 0 30%, transparent 30%), linear-gradient(245deg, var(--purple) 0 32%, transparent 32%), linear-gradient(180deg, var(--blue-l), var(--yellow)); opacity: .9; }
.arch.phone span { position: relative; background: rgba(255,255,255,.92); border-radius: 12px; padding: 6px 10px; }
.glass { width: 74px; aspect-ratio: 5 / 6; background: center / contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'><defs><clipPath id='a'><path d='M4 116V46A46 46 0 0 1 96 46V116Z'/></clipPath></defs><g clip-path='url(%23a)' stroke='%235A5A5A' stroke-width='3.5' stroke-linejoin='round'><polygon points='0,0 50,0 44,36 0,44' fill='%23FFA8A5'/><polygon points='50,0 100,0 100,30 60,40 44,36' fill='%23C19EBC'/><polygon points='100,30 100,66 64,68 60,40' fill='%23FAF9B0'/><polygon points='0,44 36,42 36,84 0,84' fill='%23BCDCEB'/><polygon points='0,84 36,84 30,120 0,120' fill='%23FAF9B0'/><polygon points='100,66 100,120 66,120 64,68' fill='%23FFA8A5'/><polygon points='30,120 36,84 64,68 66,120' fill='%23BCDCEB'/><path d='M34 90V52a16 16 0 0 1 32 0V90Z' fill='%23fff'/></g><path d='M4 116V46A46 46 0 0 1 96 46V116Z' fill='none' stroke='%235A5A5A' stroke-width='5'/></svg>"); }
.tag { display: inline-block; font-size: .7rem; padding: 2px 10px; border-radius: 999px; background: #fff; border: 2px solid var(--ink); font-weight: 700; }

/* 結果の見本(円グラフ。色は内訳の5色) */
.card { background: #fff; border: var(--bd); border-radius: 26px; padding: 20px; }
.pie { width: 112px; aspect-ratio: 1; flex: none; border-radius: 50%; border: 3px solid var(--ink); position: relative; background: conic-gradient(var(--pink) 0 32%, var(--blue) 0 60%, var(--purple) 0 74%, var(--yellow) 0 90%, var(--mint) 0 100%); }
.pie::after { content: ""; position: absolute; inset: 26%; background: #fff; border: 3px solid var(--ink); border-radius: 50%; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .84rem; }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; border: 2px solid var(--ink); margin-right: 8px; vertical-align: -1px; }
.res { display: grid; gap: 12px; }
.res-h { display: flex; justify-content: space-between; align-items: center; font-size: .84rem; color: var(--muted); }
.total { font-size: 2rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pie-row { display: flex; gap: 16px; align-items: center; }
.burden { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 2px dashed var(--blue); font-size: .9rem; }

/* 数字バッジ・帯・波 */
.num { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: var(--bd); background: var(--yellow); font-weight: 900; }
.wave { display: block; width: 100%; height: 48px; }
.tbl { overflow-x: auto; margin-top: 22px; }
table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .94rem; }
th, td { padding: 13px 12px; text-align: left; vertical-align: top; border-bottom: 2px solid var(--line); }
thead th { border-bottom: var(--bd); font-weight: 900; }
tbody th { color: var(--muted); font-weight: 500; width: 22%; }
td.me { font-weight: 700; background: #EAF7F5; }
details { border: var(--bd); border-radius: 18px; padding: 12px 18px; margin-top: 12px; background: #fff; }
summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "＋"; flex: none; }
details[open] summary::after { content: "－"; }
details p { margin-top: 8px; color: var(--muted); font-size: .94rem; }
footer { padding-block: 26px 40px; font-size: .84rem; color: var(--muted); border-top: 2px solid var(--line); }
footer p + p { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }


/* 縦に読む4コマ漫画のコマ。公式サイトのトップで使う(古い見本 docs/lp/archive/v3_5案とマンガ見本/lp_manga.html とも共通だった)(2026-10-21 に、静止画の版へ)。
   絵(img/manga1〜4.jpg)は白背景。コマの枠・せりふ・効果音・動きは、ここと manga.js で足す。 */
.manga { width: min(440px, 100%); margin: 0 auto; padding: 8px max(14px, env(safe-area-inset-left, 0px)) 40px; display: grid; gap: 26px; }
.panel { position: relative; border: 4px solid var(--ink); border-radius: 6px; background: #fff; overflow: hidden; }
.panel .art { position: relative; aspect-ratio: 896 / 1200; background: #fff; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.panel .art:focus-visible { outline: 3px solid var(--pink); outline-offset: -6px; }
.panel .art img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: translateY(18px) scale(.97); }
.panel.in .art img { opacity: 1; transform: none; transition: opacity .5s ease .08s, transform .6s cubic-bezier(.2, .9, .3, 1) .08s; }
.panel .art.bump img { animation: bump .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.045) rotate(-.6deg); } 100% { transform: none; } }
.panel .sfx { position: absolute; z-index: 2; left: 14px; top: 12px; font-weight: 900; font-size: 1.9rem; letter-spacing: .06em; color: var(--blue); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; transform: scale(0) rotate(var(--r, -6deg)); pointer-events: none; }
.panel.in .sfx { animation: sfxpop .5s cubic-bezier(.3, 1.6, .5, 1) 0s forwards; }
.panel .art.bump .sfx { animation: sfxpop .5s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes sfxpop { 0% { transform: scale(0) rotate(var(--r, -6deg)); } 100% { transform: scale(1) rotate(var(--r, -6deg)); } }
.panel .say { margin: 0; border-top: 4px solid var(--ink); padding: 14px 16px 16px; text-align: center; font-weight: 900; font-size: clamp(1.15rem, 4.6vw, 1.4rem); line-height: 1.7; letter-spacing: .06em; background: #fff; opacity: 0; transform: translateY(10px); text-wrap: balance; }
.panel .say.show { animation: sayin .4s ease .25s forwards; }
.panel .say.skip { animation: none !important; opacity: 1; transform: none; }
@keyframes sayin { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .panel .art img { opacity: 1; transform: none; transition: none; }
  .panel .sfx { transform: rotate(var(--r, -6deg)); animation: none !important; }
  .panel .say { opacity: 1; transform: none; animation: none !important; }
  .panel .art.bump img { animation: none; }
}


/* 構成(2026-10-21 持ち主の指示で改訂): ファーストビュー(スマホだけ)→ 波 → お悩み(数字と出典 → 4コマ漫画 → 「解決できます」の札)→ できること3つ → 使い方 → 見学との違い → FAQ → 締め
   トーンはブランドガイド(lp_base.css)。出典つきの数字は、一次資料(報告書のページ)で確かめたものだけ。 */
.hero { padding-bottom: 0; }
.wv { padding-bottom: 0 !important; }
.wv > .w { padding-bottom: 44px; }
.wave { display: block; width: 100%; height: 48px; }
.hero-grid { display: grid; gap: 28px; padding-block: 24px 22px; align-items: center; }
.hero h1 { letter-spacing: .08em; line-height: 1.6; font-size: clamp(1.35rem, 3.7vw, 2.3rem); }
.hero .lead { margin-top: 18px; font-weight: 500; max-width: 34em; letter-spacing: .04em; }
.ul { background: linear-gradient(transparent 62%, var(--yellow) 62%); padding: 0 .1em; }
.hero .cta { margin-top: 26px; }
.stage { position: relative; display: grid; place-items: center; min-height: 380px; }
.sp { position: relative; width: 218px; aspect-ratio: 9 / 18.5; background: #fff; border: 7px solid var(--ink); border-radius: 38px; transform: rotate(3deg); overflow: hidden; box-shadow: 0 10px 0 rgba(90,90,90,.14); }
.sp { display: grid; place-items: center; padding-top: 18px; }
.sp img { display: block; width: 70%; height: auto; }
.sp::before { content: ""; position: absolute; top: 8px; left: 50%; width: 62px; height: 16px; border-radius: 99px; background: var(--ink); transform: translateX(-50%); z-index: 2; }
.stage .tag { position: absolute; right: 8%; top: 70px; transform: rotate(8deg); background: var(--yellow); z-index: 2; }

/* お悩み */
.worry .q, .worry .sub2 { text-align: center; font-weight: 900; font-size: clamp(1.3rem, 5vw, 1.9rem); line-height: 1.7; text-wrap: balance; letter-spacing: .06em; }
.stats { display: grid; gap: 16px; margin-top: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.stat { background: #fff; border: var(--bd); border-radius: 26px; padding: 20px; display: grid; gap: 6px; align-content: start; }
.stat .n { font-weight: 900; font-size: 2.8rem; line-height: 1.1; letter-spacing: .02em; }
.stat .n small { font-size: 1rem; margin-left: 2px; }
.stat .n span { background: linear-gradient(transparent 62%, var(--yellow) 62%); }
.stat p { font-weight: 700; }
.stat .src { font-size: .74rem; color: var(--muted); font-weight: 400; line-height: 1.6; }
.stat .src a { color: var(--ink); }
.worry .sub2 { margin-top: 48px; }
.manga { margin-top: 8px; }
.chape-say { max-width: 600px; margin: 22px auto 0; display: grid; justify-items: center; }
.chape { width: 150px; height: auto; display: block; position: relative; z-index: 1; }
.callout { position: relative; margin: 20px auto 0; width: 100%; background: var(--yellow); border: var(--bd); border-radius: 30px; padding: 24px 20px 22px; box-shadow: 0 8px 0 var(--ink); text-align: center; transform-origin: 50% 0; }
.callout::before { content: ""; position: absolute; top: -15px; left: calc(50% - 13px); width: 24px; height: 24px; background: var(--yellow); border-top: var(--bd); border-left: var(--bd); transform: rotate(45deg); border-top-left-radius: 6px; }
.ans { font-size: clamp(.95rem, 4.9vw, 2rem); font-weight: 900; line-height: 1.6; letter-spacing: .03em; position: relative; }
.ans span { display: block; white-space: nowrap; }
.ans em { font-style: normal; display: inline-block; padding: 0 .12em; background: linear-gradient(#fff, #fff) 0 88% / 100% 56% no-repeat; }
.js .ans em { background-size: 0 56%; }
.js .chape-say.go .ans em { background-size: 100% 56%; transition: background-size .7s ease .55s; }
.js .chape-say .chape, .js .chape-say .callout { opacity: 0; }
.js .chape-say.go .chape { opacity: 1; animation: chapepop .45s cubic-bezier(.3, 1.5, .5, 1) both; }
.js .chape-say.go .callout { opacity: 1; animation: zoomback 1s cubic-bezier(.3, 1.3, .5, 1) .35s both; }
@keyframes chapepop { 0% { transform: translateY(24px) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes zoomback { 0% { transform: scale(.55); opacity: 0; } 42% { transform: scale(1.32); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .js .chape-say .chape, .js .chape-say .callout, .js .chape-say.go .chape, .js .chape-say.go .callout { transform: none; opacity: 1; transition: none; animation: none; } .js .ans em, .js .chape-say.go .ans em { background-size: 100% 56%; transition: none; } }

/* 以下は、下書きの CSS から抜けていたものを戻した(2026-10-21) */
.sub { text-align: center; letter-spacing: .04em; }
.band-pale { background: #EEF9FB; }
.mid-cta { text-align: center; margin-top: 34px; }

/* できること: 1つずつ枠で囲む。左は文、右は絵 */
.feat { display: grid; gap: 22px; margin-top: 30px; }
.fe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 10px; align-items: center; background: #EEF9FB; border: var(--bd); border-radius: 30px; padding: 22px 14px 22px 18px; }
.fe .n { font-weight: 900; font-size: 2.6rem; line-height: 1; color: var(--blue); -webkit-text-stroke: 2px var(--ink); }
.fe h3 { font-size: 1.35rem; margin: 4px 0 10px; line-height: 1.5; }
.fe p { color: var(--muted); font-size: 1.08rem; line-height: 1.8; }
.fe .shot .sp2 { width: 100%; max-width: 250px; border-width: 5px 5px 0 5px; border-radius: 26px 26px 0 0; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); box-shadow: none; }

/* 使い方 */
.steps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.steps li { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; background: #fff; border: var(--bd); border-radius: 24px; padding: 16px 18px; }
.steps b { display: block; }

@media (min-width: 760px) {
  .hero-grid { grid-template-columns: 1.1fr .9fr; }
  .fe { grid-template-columns: 1fr 1fr; padding: 28px 34px; }
  .fe h3 { font-size: 1.6rem; }
  .fe p { font-size: 1.15rem; }
  .fe .shot .sp2 { max-width: 290px; }
}

.fe .note { font-size: .86rem; margin-top: 10px; line-height: 1.7; }
/* ファーストビューのボタンの右に、PC のときだけQRコード(スマホで見ている人には、ボタンがあるので出さない) */
.hero .cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.qr { display: none; width: auto; height: auto; background: none; border: 0; border-radius: 0; }
@media (min-width: 760px) {
  .qr { display: flex; flex: none; align-items: center; gap: 10px; white-space: nowrap; font-size: .8rem; font-weight: 700; line-height: 1.5; }
  .qr img { width: 88px; height: 88px; background: #fff; border-radius: 12px; padding: 4px; border: 2px solid var(--line); }
}

/* スマホ幅(760px 未満)の整え方(2026-10-21 持ち主の指示。PC はそのまま) */
@media (max-width: 759px) {
  /* ① 一番上のスマホ画像は出さない。文字は中央 */
  .hero .stage { display: none; }
  .hero-grid { text-align: center; justify-items: center; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .hero .cta { justify-content: center; }
  /* ② 数字の箱の中身を中央に */
  .stat { text-align: center; justify-items: center; }
  /* ③ できること: 枠をなくし、画面の絵を中央に大きく置き、その下に番号と文 */
  .fe, .fe.fe-text { grid-template-columns: 1fr; background: transparent; border: 0; border-radius: 0; padding: 0; gap: 14px; text-align: center; justify-items: center; }
  .fe .shot { order: -1; width: 100%; }
  .fe .shot .sp2 { width: min(86%, 300px); max-width: none; margin: 0 auto; }
  .fe h3 { font-size: 1.3rem; }
  .fe p { font-size: 1.02rem; }
  .feat { gap: 52px; }
}

/* 幅が狭いスマホ(360px 未満)では、一番上の見出しが、変なところで折れないように */
@media (max-width: 359px) { .hero h1 { font-size: 1.15rem; letter-spacing: .03em; } }


/* 全ページ共通の部品(ヘッダー・フッター)と、文書ページ・サポートの見た目。色と形は lp_base.css(ブランドガイド)から */
.skip { position: absolute; left: -999px; top: 0; background: #fff; padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }

/* ヘッダー */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); }
.sh-in { max-width: 980px; margin: 0 auto; padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); display: flex; align-items: center; gap: 14px; }
.sh-logo { display: block; flex: none; line-height: 0; }
.sh-logo img { height: 26px; width: auto; }
.sh-nav { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.sh-nav a { text-decoration: none; font-weight: 500; font-size: .9rem; padding: 8px 10px; color: var(--ink); }
.sh-nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.sh-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.sh-dl { flex: none; text-decoration: none; font-weight: 500; font-size: .85rem; padding: 7px 14px; border-radius: 999px; background: var(--ink); color: #fff; white-space: nowrap; }
.sh-dl:hover { opacity: .8; }
.sh-toggle { display: none; flex: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 0; cursor: pointer; position: relative; margin-left: auto; }
.sh-toggle span, .sh-toggle span::before, .sh-toggle span::after { position: absolute; left: 8px; right: 8px; height: 3px; background: var(--ink); border-radius: 2px; content: ""; }
.sh-toggle span { top: 15px; } .sh-toggle span::before { top: -8px; left: 0; right: 0; } .sh-toggle span::after { top: 8px; left: 0; right: 0; }
.sh-toggle:focus-visible, .sh-dl:focus-visible, .sh-nav a:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
@media (max-width: 640px) {
  .menu-js .sh-toggle { display: block; }
  .menu-js .sh-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 2px solid var(--line); padding: 8px 16px 14px; }
  .menu-js .sh-nav.open { display: flex; }
  .menu-js .sh-nav a { padding: 14px 8px; border-radius: 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .menu-js .sh-dl { margin-left: 0; }
  .sh-in { gap: 10px; }
  .sh-nav { flex-wrap: wrap; }
}

/* フッター */
.site-footer { border-top: 2px solid var(--line); padding: 30px 0 40px; background: #fff; }
.site-footer .sf-in { max-width: 980px; margin: 0 auto; padding: 0 max(20px, env(safe-area-inset-left, 0px)); display: grid; gap: 16px; }
.site-footer img { height: 24px; width: auto; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .9rem; }
.site-footer nav a { color: var(--ink); }
.site-footer small { color: var(--muted); }

/* 文書ページ(プライバシーポリシー・利用規約)。文面は、元のまま */
.doc { max-width: 760px; margin: 0 auto; padding: 36px max(20px, env(safe-area-inset-left, 0px)) 70px; }
.doc h1 { font-size: clamp(1.5rem, 5vw, 2rem); letter-spacing: .06em; margin-bottom: 22px; }
.doc .innerS { line-height: 2; font-size: .96rem; overflow-wrap: anywhere; }
.doc .innerS p { margin: 0 0 1em; }
.doc strong { font-weight: 900; }
.doc a { color: var(--ink); }
.doc hr { border: 0; border-top: 2px solid var(--line); margin: 26px 0; }

/* サポート */
.support { max-width: 760px; margin: 0 auto; padding: 36px max(20px, env(safe-area-inset-left, 0px)) 70px; display: grid; gap: 34px; }
.support h1 { font-size: clamp(1.5rem, 5vw, 2rem); letter-spacing: .06em; }
.support h2 { font-size: 1.25rem; margin-bottom: 10px; letter-spacing: .04em; }
.support .box { background: #EAF9F5; border: var(--bd); border-radius: 26px; padding: 22px; display: grid; gap: 14px; justify-items: start; }
.support .links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.support .links a { color: var(--ink); }

/* できること: 実際の画面(あれば)。ないときは、文だけのカードにする */
.shot { display: grid; place-items: center; }
.shot .sp2 { width: min(210px, 62vw); border: 7px solid var(--ink); border-radius: 34px; overflow: hidden; background: #fff; box-shadow: 0 10px 0 rgba(90, 90, 90, .14); line-height: 0; }
.shot .sp2 img { width: 100%; height: auto; display: block; }
@media (min-width: 760px) { .fe.fe-text { grid-template-columns: 1fr; } }

/* コラムの場所(まだ記事がないので、リンクなし) */
.sh-soon { font-size: .9rem; padding: 8px 10px; color: var(--muted); cursor: default; }
.soon { text-align: center; margin-top: 14px; color: var(--muted); }

/* ページが短くても、スクロールバーの場所を空けておく(ページを切り替えたとき、ヘッダーが横にずれないように) */
html { overflow-y: scroll; }