@charset "UTF-8";
/*!
 * Mimori 公式サイト スタイルシート
 * ------------------------------------------------------------------
 * 同梱している第三者リソースのライセンス
 *   - Noto Sans JP（assets/font/NotoSansJP-subset.woff2）
 *     SIL Open Font License 1.1 ／ 全文は assets/font/OFL.txt
 *   - destyle.css v3.0.2（assets/css/destyle.min.css）
 *     MIT License ／ https://github.com/nicolas-cusan/destyle.css
 * ------------------------------------------------------------------
 * 記述順（仕様書 §10-2）
 *   1. @charset / ライセンス   2. :root   3. base   4. utility
 *   5. components   6. layout   7. page-top   8. page-features / faq / 404
 *   9. page-legal（/tokushoho/）   11. prefers-reduced-motion
 *
 * ・メディアクエリは各ブロックの直後に書く（末尾にまとめない）。
 * ・ブレークポイントは PC ≥1024px / TB 768–1023px / SP ≤767px。
 *   PCの値を基準に max-width で上書きしていく。
 * ・色・サイズ・余白は必ず CSS変数か §7-3 のスペーシングスケールを使う。
 */

/* ==================================================================
   2. :root ／ デザイントークン（§7-1）
   §7-1 の定義をそのまま書き写している。値を変えるときは仕様書から直す。
   ================================================================== */

:root {
  /* ---- ブランド（装飾・面） ---- */
  --c-sky:         #9CE0EF;  /* アプリのテーマ色。装飾専用（文字色・ボタン背景に使わない） */
  --c-mist:        #DDEEF5;  /* アイコンの水彩の淡い水色。面・にじみ */
  --c-accent:      #F2B27B;  /* あたたかい差し色（杏色）。装飾専用 */

  /* ---- 文字・操作（コントラスト検証済み） ---- */
  --c-main:        #2C66BF;  /* リンク・強調・アイコン線（イラストの青を濃くした色）。対 --c-bg 5.49:1 */
  --c-main-deep:   #1F4E99;  /* ボタン背景・フォーカスリング。白文字 8.05:1 */
  --c-heading:     #2B3650;  /* 見出し（紺）。対 --c-bg 11.83:1 */
  --c-ink:         #3D3D3D;  /* 本文。対 --c-bg 10.69:1 */
  --c-ink-2:       #646A75;  /* 副次テキスト・注記。対 --c-bg 5.35:1 */
  --c-accent-ink:  #9E5317;  /* 杏色の文字（番号・ラベル）。対 --c-bg 5.58:1 */

  /* ---- 背景・面 ---- */
  --c-bg:          #FFFDF8;  /* ベース（紙の白） */
  --c-bg-sky:      #F1F9FB;  /* 水色寄りのティント */
  --c-bg-warm:     #FDF5EC;  /* 杏色寄りのティント */
  --c-surface:     #FFFFFF;  /* カード */
  --c-line:        #E3EAEE;  /* 罫線・境界 */

  /* ---- グラデーション ---- */
  --gradient-hero: linear-gradient(170deg, #FFFDF8 0%, #F1F9FB 55%, #E6F4F8 100%);
  --gradient-cta:  linear-gradient(135deg, #1F4E99 0%, #2A62B8 100%);
  --gradient-tile: linear-gradient(135deg, rgba(156,224,239,.30), rgba(90,155,250,.14));

  /* ---- 影（紺ベース） ---- */
  --sh-1:      0 2px 8px rgba(43,54,80,.06);
  --sh-2:      0 12px 32px rgba(43,54,80,.10);
  --sh-3:      0 24px 60px rgba(43,54,80,.16);

  /* ---- 角丸 ---- */
  --r-s:    12px;
  --r-m:    20px;
  --r-l:    28px;
  --r-xl:   40px;
  --r-pill: 999px;

  /* ---- モーション ---- */
  --ease:     cubic-bezier(.22,.61,.36,1);
  --dur-fast: 180ms;
  --dur:      320ms;
  --dur-slow: 700ms;

  /* ---- フォント（§7-2・§14-2 L7） ---- */
  --font-body: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", sans-serif;
}

/* ==================================================================
   3. base
   要素セレクタへのスタイル指定は、このセクションでのみ行う（§10-2）。
   ================================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px; /* 追従ヘッダー分（§5-3-1-a） */
  -webkit-text-size-adjust: 100%;
}

/* font-family は変数経由で指定する。韓国語版は :lang(ko) で
   --font-body を差し替えるだけで済むようにするため（§14-2 L7） */
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .01em;
  color: var(--c-ink);
  background: var(--c-bg);
}

@media (max-width: 767px) {
  body { font-size: 15px; }
}

/* 日本語固有の組版指定はここに閉じ込める（§7-2・§14-2 L6）。
   英語・韓国語のページに約物詰めがかかると字間が崩れるため。 */
:lang(ja) {
  font-feature-settings: "palt";
  line-break: strict;
}

h1,
h2,
h3,
h4 {
  color: var(--c-heading);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .01em;
}

a {
  color: var(--c-main);
  transition: color var(--dur-fast) var(--ease);
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* フォーカス可視化（§11-3）
   :focus-visible 未対応ブラウザ（対応範囲に含まれる iOS Safari 14 など）で
   フォーカスリングが消えてしまうのを避けるため、outline:none の側を
   @supports で条件付きにしている。値そのものは §11-3 のとおり。
   🔴 順番を入れ替えない。:focus と :focus-visible は詳細度が同じなので、
      :focus を後に書くとキーボード操作でもリングが消える（towaly はこの順で消えていた）。 */
@supports selector(:focus-visible) {
  :focus { outline: none; }
}

:focus-visible {
  outline: 2px solid var(--c-main-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==================================================================
   4. utility
   ================================================================== */

.container {
  width: 100%;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

@media (max-width: 767px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* 視覚的に隠し、支援技術にだけ読ませる */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* スクロールリビール（§7-6）。移動量は 24px を超えない。
   JSが読み込まれなかった場合に本文が消えないよう、
   各ページの <head> に <noscript> の打ち消しスタイルを置くこと（§5-5-8 A）。 */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* 連鎖遅延。1グループで最大8要素まで（§7-6） */
.reveal--d1 { transition-delay:  80ms; }
.reveal--d2 { transition-delay: 160ms; }
.reveal--d3 { transition-delay: 240ms; }
.reveal--d4 { transition-delay: 320ms; }
.reveal--d5 { transition-delay: 400ms; }
.reveal--d6 { transition-delay: 480ms; }
.reveal--d7 { transition-delay: 560ms; }
.reveal--d8 { transition-delay: 640ms; }

/* キャッチコピーの改行制御専用（§3-4）。
   .br-sp は 767px 以下、.br-tb は 1023px 以下でだけ改行する（§5-2-4 T-03） */
.br-sp,
.br-tb { display: none; }

@media (max-width: 1023px) {
  .br-tb { display: inline; }
}

@media (max-width: 767px) {
  .br-sp { display: inline; }
}

/* 水彩のにじみ（§7-4）。アプリアイコンの水彩を、画像を使わず CSS で再現する。
   置く場所は FV・S2・S9 の3箇所だけ。大きさと位置は各セクションで指定する。
   <span class="wash" aria-hidden="true"></span> として置き、動かさない。
   filter: blur() は描画が重いので、1画面に3つ以上置かない。 */
.wash {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(156,224,239,.50), rgba(90,155,250,.14) 60%, transparent);
  filter: blur(28px);
  pointer-events: none;
}

/* モーダル表示中の背面スクロールを止める（<body> に付与） */
.is-modal-open { overflow: hidden; }

/* ==================================================================
   5. components
   ※ .shot（5-5）・.faq-list / .faq-item（5-6）・.icon-tile（5-8）はフェーズ2で追記した。

   🔴 フォントの生成（§10-4）への申し送り：
     CSS の content で出す文字は HTML に現れないため、§10-4 のマージン集合に
     手で入れてある。このファイルで使っているのは次のとおり。
       ✓（U+2713 .trust-point::before）
       + −（U+002B・U+2212 .faq-item__q::after）
       → ↓（S3 の .howto__step::after）
       >（U+003E .breadcrumb__item::before。ASCII なので集合の ASCII に含まれる）
     記号を足したり変えたりしたら、§10-4 の集合も直すこと。
   ================================================================== */

/* ---- 5-1. ボタン（§7-5-1） ---------------------------------------- */
/* 幅を指定しない。padding で組み、長い文言でも崩れないようにする（§14-2 L5） */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 36px;
  border-radius: var(--r-pill);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  text-align: center;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}

.btn--primary {
  background: var(--gradient-cta);
  color: #fff;
  box-shadow: var(--sh-2);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-3);
}

.btn--primary:active {
  transform: translateY(0) scale(.985);
  box-shadow: var(--sh-1);
  transition-duration: var(--dur-fast);
}

.btn--secondary {
  background: var(--c-surface);
  color: var(--c-main-deep);
  border: 1.5px solid var(--c-main);
  box-shadow: none;
}

.btn--secondary:hover { background: var(--c-bg-sky); }

.btn--secondary:active {
  background: var(--c-bg-sky);
  transform: scale(.985);
  transition-duration: var(--dur-fast);
}

/* ヘッダーCTA用。見た目は確定値のまま、当たり判定だけ 44px に広げる（§7-5-1） */
.btn--sm {
  padding: 11px 22px;
  font-size: 14px;
}

.btn--sm::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

.btn--lg {
  padding: 18px 44px;
  font-size: 17px;
}

/* SPでは §7-2 の button 行（14〜15px）に合わせて字だけ縮める。
   padding は §7-5-1 の確定値のまま変えない。 */
@media (max-width: 767px) {
  .btn { font-size: 15px; }
  .btn--sm { font-size: 14px; }
  .btn--lg { font-size: 15px; }
}

/* ---- 5-2. ストアバッジ（§7-5-2） ----------------------------------- */
/* 2つのバッジは同じ高さにする。Google Play のPNG（646×192）には透明の余白が
   無く、同じ高さで見た目の高さもそろうため（フェーズ1で実寸を確認。§7-5-2）。 */

.store-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.store-badges__link {
  display: inline-flex;
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}

.store-badges__link:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 8px 14px rgba(43,54,80,.20));
}

.store-badges__link:focus-visible {
  outline: 2px solid var(--c-main-deep);
  outline-offset: 4px;
  border-radius: 8px;
}

/* 高さを固定し、幅は自動。バッジの比率を崩さない（中 44px） */
.store-badges__img {
  height: 44px;
  width: auto;
}

/* 大 52px（S7・S9）。SPでは中にそろえる */
.store-badges--lg .store-badges__img { height: 52px; }

/* 暗い面（DLカード）の上ではフォーカスリングを白に切り替える（§11-3） */
.store-badges--on-dark .store-badges__link:focus-visible { outline-color: #FFFFFF; }

@media (max-width: 767px) {
  .store-badges { gap: 12px; }
  .store-badges--lg .store-badges__img { height: 44px; }
}

/* ---- 5-3. カード（§7-5-3） ---------------------------------------- */
/* 箱（面・枠線・角丸・余白・影・hover）だけを持つ。中の並びは各セクションで組む。
   PC の値は §7-5-3、TB・SP の値は §7-3「カード内 padding」（DLカードだけは別の値）。 */

.card {
  background: var(--c-surface);
  border-radius: var(--r-l);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* シーンカード（S2）。枠線あり・hover なし */
.card--scene {
  border: 1px solid var(--c-line);
  padding: 28px 24px;
  box-shadow: var(--sh-1);
}

/* ステップカード（S3）。枠線なし・hover なし */
.card--step {
  padding: 28px 24px;
  box-shadow: var(--sh-1);
}

/* 機能カード（S4）。枠線あり */
.card--feature {
  border: 1px solid var(--c-line);
  padding: 28px 24px 32px;
  box-shadow: var(--sh-1);
}

/* 小機能カード（S5）。枠線なし */
.card--mini {
  padding: 28px 24px;
  min-height: 180px;
  box-shadow: var(--sh-1);
}

.card--feature:hover,
.card--mini:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
}

/* 補足ボックス（S7）。影なし */
.card--note {
  border: 1px solid var(--c-line);
  padding: 28px 32px;
}

/* DLカード（S9・下層ページのページ末）。白文字を載せてよい面（§7-1） */
.card--dl {
  background: var(--gradient-cta);
  border-radius: var(--r-xl);
  padding: 64px 40px;
  box-shadow: var(--sh-3);
}

@media (max-width: 1023px) {
  .card--scene,
  .card--step,
  .card--feature,
  .card--mini,
  .card--note { padding: 28px 24px; }
  .card--dl { padding: 56px 32px; }
}

/* DLカードの SP 値は、375px 幅でバッジ2つ（44px）が1行に並ぶ値 */
@media (max-width: 767px) {
  .card--scene,
  .card--step,
  .card--feature,
  .card--mini,
  .card--note { padding: 20px 16px; }
  .card--mini { min-height: 0; }
  .card--dl { padding: 48px 24px; }
}

/* ---- 5-4. ピル・ラベル（§7-5-4） ----------------------------------- */

/* 信頼ポイント（FV の T-05〜T-07・T-09）。✓ は content で出す記号（§14-2 L4） */
.trust-point {
  color: var(--c-ink-2);
  font-size: 13px;
  font-weight: 500;
}

.trust-point::before {
  content: "✓";
  margin-right: 6px;
  color: var(--c-main);
  font-weight: 700;
}

/* 番号（S3 のステップ・S4 のグループの 01〜03） */
.num-label {
  color: var(--c-accent-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
}

/* プレミアム表示。機能名の横に添えるだけ。オレンジのベタ塗りにしない（確定事項7） */
.premium-label {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid rgba(158,83,23,.25);
  border-radius: var(--r-pill);
  background: var(--c-bg-warm);
  color: var(--c-accent-ink);
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

/* ---- 5-5. スクリーンショット枠（§7-5-8） --------------------------- */
/* 画像に端末の枠（黒いベゼル）が入っていて、四隅は透過している。
   🔴 CSS で枠を足さない（border-radius / overflow / border / background を付けない）。
   🔴 .shot img に aspect-ratio / object-fit / object-position を書かない。
      比率は <img> の width / height 属性（原本の寸法）から決まる（§5-4-5）。
   影は box-shadow ではなく drop-shadow。透過した四隅を避けて、端末の形どおりに落ちる。
   大きさは使う場所で決める（.shot--hero は S1、.shot--card は S4）。 */

.shot { display: block; }

.shot img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 36px rgba(43,54,80,.18));
}

/* ---- 5-6. アコーディオン（§5-5-3 ／ §7-5-5） ----------------------- */
/* <details> / <summary> のみ。JavaScript を使わない。開閉アニメーションも付けない。
   トップ S8 と /faq/ で共用する。 */

.faq-list {
  display: grid;
  gap: 12px;
  max-width: 760px;
  margin: 40px auto 0;
}

.faq-item {
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-m);
  background: var(--c-bg);
}

.faq-item__q {
  position: relative;
  padding: 20px 56px 20px 24px;
  color: var(--c-heading);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
  list-style: none;
}

.faq-item__q::-webkit-details-marker { display: none; }

/* + ／ −（U+2212 MINUS SIGN）。§10-4 のフォントのマージン集合に入れてある */
.faq-item__q::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 24px;
  color: var(--c-main);
  font-size: 20px;
  line-height: 1;
  transform: translateY(-50%);
}

.faq-item[open] .faq-item__q::after { content: "−"; }

/* .faq-item の overflow: hidden で外側のリングが切れるので、内側に描く（towaly と同じ） */
.faq-item__q:focus-visible {
  outline: 2px solid var(--c-main-deep);
  outline-offset: -2px;
}

.faq-item__a {
  padding: 0 24px 24px;
  color: var(--c-ink-2);
  font-size: 15px;
  line-height: 2.0;
}

@media (max-width: 767px) {
  .faq-item__q { font-size: 15px; }
}

/* ---- 5-7. お問い合わせモーダル（§5-5-7 ／ §7-5-6） ----------------- */
/* 本サイトのモーダルはお問い合わせの1つだけ。他の用途で増やさない。
   <dialog> は対応最小ブラウザ（iOS Safari 14）が未対応のため使わない（§10-7）。 */

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}

.modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur) var(--ease);
}

.modal__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(43,54,80,.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 32px 28px 28px;
  border-radius: var(--r-l);
  background: var(--c-surface);
  box-shadow: var(--sh-3);
  transform: translateY(12px);
  transition: transform var(--dur) var(--ease);
}

.modal.is-open .modal__dialog { transform: none; }

.modal__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-heading);
}

.modal__text {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--c-ink);
}

.modal__mail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  padding: 16px 20px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-m);
  background: var(--c-bg);
}

.modal__address {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--c-heading);
  word-break: break-all;
}

/* 幅を固定しない。「コピーしました」に変わると横に伸びる（§14-2 L5） */
.modal__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-left: auto;
  padding: 11px 22px;
  border: 1.5px solid var(--c-main);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-main-deep);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.modal__copy:hover { background: var(--c-bg-sky); }

/* コピー完了。--c-main の地に白文字（5.59:1。§7-1「白文字を載せてよい面」） */
.modal__copy.is-copied {
  background: var(--c-main);
  border-color: var(--c-main);
  color: #fff;
}

.modal__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-main);
}

.modal__link:hover { text-decoration: underline; }

/* ×ボタンはダイアログ内の先頭に置く（開いたときのフォーカス先。§5-5-8 F） */
.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  color: var(--c-ink-2);
  font-size: 20px;
  line-height: 1;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.modal__close:hover {
  background: var(--c-bg-sky);
  color: var(--c-heading);
}

@media (max-width: 767px) {
  .modal { padding: 20px; }
  .modal__dialog { padding: 28px 20px 24px; }
  .modal__copy { margin-left: 0; }
}

/* ---- 5-8. アイコンタイル（§7-4・§8-3） ----------------------------- */
/* 機能・安心のアイコンを載せるタイル。52px（SP 44px）・角丸 16px。
   S4 の説明だけの項目は .icon-tile--s（44px・角丸 12px）。
   アイコンが入稿されるまでは絵文字で仮置きする。絵文字は必ず
   <span class="icon-tile__emoji" aria-hidden="true"> で囲む（装飾。§11-5）。 */

.icon-tile {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--gradient-tile);
}

.icon-tile--s {
  width: 44px;
  height: 44px;
  border-radius: var(--r-s);
}

/* 絵文字の大きさはタイルの約半分（仕様にも towaly にも値が無かったので決めた。§8-3） */
.icon-tile__emoji {
  font-size: 26px;
  line-height: 1;
}

.icon-tile--s .icon-tile__emoji { font-size: 22px; }

@media (max-width: 767px) {
  .icon-tile {
    width: 44px;
    height: 44px;
  }
  .icon-tile__emoji { font-size: 22px; }
}

/* ==================================================================
   6. layout
   ================================================================== */

/* ---- 6-1. スキップリンク（§11-2） ---------------------------------- */

.skip-link {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--c-main-deep);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease);
}

.skip-link:focus { transform: translateY(0); }

/* ---- 6-2. 追従ヘッダー（§5-3-1-a） -------------------------------- */
/* 背景は --c-bg（#FFFDF8）の88%。下線は常に1pxぶん確保しておき、
   スクロールしたら色を付ける（付け外しで高さが変わって本文が動かないように）。 */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  background: rgba(255,253,248,.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.site-header.is-scrolled {
  border-bottom-color: var(--c-line);
  box-shadow: var(--sh-1);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 72px;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* アプリアイコン。原本は角丸なしの正方形なので、iOS に近い 22% を CSS で付ける */
.site-header__mark {
  width: 36px;
  height: 36px;
  border-radius: 22%;
}

/* ロゴタイプは高さで決め、幅は SVG の比率なり（851×203） */
.site-header__type {
  width: auto;
  height: 20px;
}

.site-header__cta-short { display: none; }

/* SP でもロゴタイプを出す（towaly と違い、幅が小さいため。§5-3-1-a） */
@media (max-width: 767px) {
  .site-header__inner { height: 56px; }
  .site-header__mark {
    width: 32px;
    height: 32px;
  }
  .site-header__type { height: 18px; }
}

@media (max-width: 374px) {
  .site-header__cta-full { display: none; }
  .site-header__cta-short { display: inline; }
}

/* ---- 6-3. フッター（§5-5-5） -------------------------------------- */
/* 上の余白は横長のイラスト（item4）が担うので、padding-top は 0。
   SP の下の余白は追従CTAバーの高さ分。 */

.footer {
  padding: 0 0 120px;
  background: var(--c-bg);
}

.footer__illust {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto 40px;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 48px;
}

.footer__mark {
  width: 40px;
  height: 40px;
  border-radius: 22%;
}

.footer__type {
  width: auto;
  height: 22px;
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 220px));
  gap: 56px;
}

.footer__heading {
  margin-bottom: 16px;
  color: var(--c-ink-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.4;
}

/* <a> と、お問い合わせの <button> の両方に付ける。タップ領域 44px（§11-7） */
.footer__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 0;
  color: var(--c-ink);
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
}

.footer__link:hover {
  color: var(--c-main);
  text-decoration: underline;
}

/* F-3 の補足「夫婦・家族の円満アプリ」。リンクの直下に置き、リンクには含めない */
.footer__note {
  color: var(--c-ink-2);
  font-size: 12px;
  line-height: 1.7;
}

.footer__bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--c-line);
}

.footer__copyright {
  color: var(--c-ink-2);
  font-size: 12px;
  line-height: 1.7;
}

@media (max-width: 767px) {
  .footer { padding-bottom: 96px; }
  .footer__illust { margin-bottom: 28px; }
  .footer__brand { margin-bottom: 40px; }
  .footer__mark {
    width: 32px;
    height: 32px;
  }
  .footer__type { height: 18px; }
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  /* 姉妹アプリは2列の下段に全幅で置く */
  .footer__col--sister { grid-column: 1 / -1; }
}

/* ---- 6-4. モバイル追従ダウンロードバー（§5-5-6） -------------------- */
/* SP幅でのみ表示。上端センチネル（#hero / .page-header）を通過してから
   下端センチネル（#download）に到達するまでの間だけ出す（表示の制御は main.js）。
   inset は iOS Safari 14.0 が未対応のため、top / right / bottom / left で書く。 */

.floating-cta {
  display: none;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 90;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,253,248,.95);
  box-shadow: 0 -4px 20px rgba(43,54,80,.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transform: translateY(120%);
  visibility: hidden;
  transition: transform .35s var(--ease), visibility 0s linear .35s;
}

.floating-cta.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform .35s var(--ease);
}

.floating-cta__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

@media (max-width: 767px) {
  .floating-cta { display: block; }
}

/* ==================================================================
   7. page-top（S1〜S9）
   セクションID順（§5-1-1）に書く。値はすべて §5 の確定値。
   §5 に SP の値が無いものは PC の値のまま、TB の値が無い文字サイズは §7-2 の TB の値。
   §5 にも §7 にも値が無いものは towaly の実装値（§13-3 のメモ）。
   🔴 .reveal と .card を同じ要素に付けない。.card の transition（hover 用）が
      .reveal の transition を上書きして、フェードインが効かなくなるため。
      カードを順に出すときは <li class="reveal"> の中に .card を入れる。
   ================================================================== */

/* ---- 7-0. セクション共通パーツ -------------------------------------- */

.section { position: relative; }

/* .wash（z-index: 0）より本文を上に載せるための包み */
.section__inner {
  position: relative;
  z-index: 1;
}

/* h2（セクション見出し §7-2）。大 36/30/26px は S4・S7、S2・S3 は SP だけ 24px */
.section-title {
  font-size: 36px;
  line-height: 1.5;
  text-align: center;
}

/* h2（小 §7-2）。S1補・S5・S6・S8 */
.section-title--s { font-size: 32px; }

/* 文字の大きさ・行の高さは §7-2 の body-lead。S2・S3 のリード */
.section-lead {
  max-width: 680px;
  margin: 20px auto 0;
  color: var(--c-ink);
  font-size: 17px;
  line-height: 2.0;
  text-align: center;
}

/* eyebrow（§7-2）。見出しタグにしない（§9-5） */
.eyebrow {
  display: block;
  color: var(--c-main);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.4;
  text-align: center;
}

.eyebrow + .section-title { margin-top: 12px; }

/* セクション末尾のテキストリンク（S5・S8）。タップ領域 44px を確保する（§11-7） */
.link-text {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-main);
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
}

.link-text:hover { color: var(--c-main-deep); }

@media (max-width: 1023px) {
  .section-title { font-size: 30px; }
  .section-title--s { font-size: 28px; }
  .section-lead { font-size: 16px; }
}

@media (max-width: 767px) {
  .section-title { font-size: 26px; }
  .section-title--s,
  .section-title--sp-s { font-size: 24px; }
  .section-title--sp-left { text-align: left; }
  .section-lead { text-align: left; }
  .eyebrow { font-size: 12px; }
}

/* ---- 7-1. S1 ファーストビュー（§5-2） ------------------------------ */
/* 1440×900 で FV（スクショの下端まで）がスクロールなしに収まること（§5-2-2）。
   高さはヘッダー 73px ＋ padding 144px ＋ 右カラム（スクショ 300px 幅で約607px）。
   375×667 でストアバッジの下端までが見えること（§5-2-1）。 */

.hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0;
  background: var(--gradient-hero);
}

/* 水彩のにじみ（§5-2-2）。①スクショの背後（右カラムの中央）②左上。
   ①の left は、右カラム（340px）の中心が container の中心から 346px 右にあることから出した値 */
.hero__wash--1 {
  top: calc(50% - 230px);
  left: calc(50% + 86px);
  width: 520px;
  height: 460px;
}

.hero__wash--2 {
  top: 0;
  left: -120px;
  width: 300px;
  height: 240px;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 64px;
  align-items: center;
}

/* 左カラムは読み込み時に即時再生する（.reveal ではない。§5-2-6）。
   JS に頼らず CSS の animation で再生する。JS が動かないときに FV が
   消えたり、ちらついたりしないようにするため（towaly と同じ。§13-3 のメモ）。 */
.hero__body {
  animation: hero-in var(--dur-slow) var(--ease) both;
}

@keyframes hero-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.hero__icon {
  width: 64px;
  height: 64px;
  border-radius: 22%;
  box-shadow: var(--sh-1);
}

.hero__title {
  margin-top: 12px;
  color: var(--c-ink-2);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.6;
}

/* No.1ピル（T-08）。リンクにしない。左カラムから 120ms 遅れて出す */
.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 5px 14px 5px 5px;
  border: 1px solid rgba(44,102,191,.25);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.85);
  box-shadow: var(--sh-1);
  color: var(--c-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 18px; /* 枠線1px ＋ padding 5px ＋ 18px で高さ 30px（§5-2-1） */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: hero-in var(--dur-slow) var(--ease) 120ms both;
}

/* 白文字 7.64:1（--c-main-deep の上。§7-1「白文字を載せてよい面」） */
.hero__pill-no {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--c-main-deep);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
}

.hero__catch {
  margin-top: 16px;
  font-size: 48px;
  letter-spacing: .02em;
  line-height: 1.4;
}

.hero__lead {
  margin-top: 16px;
  color: var(--c-ink);
  font-size: 17px;
  line-height: 2.0;
}

.hero__cta { margin-top: 24px; }

.hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 16px;
}

.hero__point { line-height: 1.6; }

.hero__note {
  margin-top: 10px;
  color: var(--c-ink-2);
  font-size: 11px;
  line-height: 1.6;
}

/* ホーム画面のスクショ（§5-2-2）。幅 300px。上下 12px のふわり */
.shot--hero {
  width: 300px;
  margin: 0 auto;
}

.shot--hero img { filter: drop-shadow(0 30px 60px rgba(43,54,80,.22)); }

.hero__shot { animation: float-soft 6s ease-in-out infinite; }

@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* 1024〜1079px は左カラムが 628px より狭く（1024px で 572px）、48px のキャッチの
   2行目が折り返して「記。」だけが3行目に落ちる。container が縮みはじめる 1079px 以下は、
   TB と同じ位置で改行して3行にする（2026-09-28 依頼者確認。§5-2-4） */
@media (max-width: 1079px) {
  .hero__catch .br-tb { display: inline; }
}

/* TB：2カラムのまま。右 260px、キャッチ 36px・3行（§5-2-3） */
@media (max-width: 1023px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 40px;
  }
  /* 右カラム（260px）の中心は右端から 154px */
  .hero__wash--1 {
    left: auto;
    right: -106px;
  }
  .hero__title { font-size: 15px; }
  .hero__catch { font-size: 36px; }
  .hero__lead { font-size: 16px; }
  .shot--hero { width: 260px; }
}

/* SP：1カラム・中央揃え。スクショは注記の下（スクロールした先）に置く（§5-2-1）。
   バッジが画面外に落ちるので、スクショをキャッチより上に置かない。 */
@media (max-width: 767px) {
  .hero { padding: 28px 0 40px; }
  .hero__wash--1 {
    top: -40px;
    right: -80px;
    width: 280px;
    height: 220px;
  }
  .hero__wash--2 {
    top: auto;
    bottom: 120px;
    left: -100px;
    width: 240px;
    height: 200px;
  }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    text-align: center;
  }
  .hero__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto;
  }
  .hero__title { font-size: 13px; }
  .hero__catch { font-size: 30px; }
  .hero__lead {
    font-size: 15px;
    line-height: 1.85;
  }
  .hero__cta { justify-content: center; }
  /* 信頼ポイントは2つずつ2行。::before を幅100%の改行にして、
     見た目の順番を DOM の順番のまま 1・2 ／ 3・4 に分ける */
  .hero__points {
    justify-content: center;
    gap: 8px 16px;
  }
  .hero__points::before {
    content: "";
    flex-basis: 100%;
    order: 1;
  }
  .hero__point:nth-child(n+3) { order: 2; }
  .hero__media { margin-top: 32px; }
  .shot--hero { width: 64%; }
}

@media (max-width: 374px) {
  .hero__catch { font-size: 24px; }
  /* 信頼ポイントを1行に1つ */
  .hero__points {
    flex-direction: column;
    align-items: center;
  }
  .hero__points::before { content: none; }
  .hero__note { font-size: 10px; }
}

/* ---- 7-2. S1補 実績（§5-3-1-b） ------------------------------------ */
/* 押せない要素なので hover で浮かせない。カウントアップもしない。
   数字にグラデーション文字を使わない（§11-1）。 */

.trust {
  padding: 72px 0 24px;
  background: var(--c-bg);
}

.trust__lead {
  margin-top: 12px;
  color: var(--c-ink-2);
  font-size: 15px;
  line-height: 1.8;
  text-align: center;
}

.trust-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 720px;
  margin: 32px auto 0;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-l);
  background: var(--c-surface);
  box-shadow: var(--sh-2);
}

.trust-board__item {
  position: relative;
  padding: 28px 16px;
  text-align: center;
}

/* 2つ目の指標の左に、1px の縦のヘアライン */
.trust-board__item + .trust-board__item::before {
  content: "";
  position: absolute;
  top: 18%;
  bottom: 18%;
  left: 0;
  width: 1px;
  background: var(--c-line);
}

.trust-board__label {
  color: var(--c-ink-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.5;
}

.trust-board__num {
  margin-top: 6px;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.2;
}

.trust-board__num--main { color: var(--c-main); }

.trust-board__num--accent { color: var(--c-accent-ink); }

/* 添え字（No. と 万人）は数字の約1/2 */
.trust-board__unit { font-size: 22px; }

.trust__note {
  margin-top: 14px;
  color: var(--c-ink-2);
  font-size: 11px;
  line-height: 1.7;
  text-align: center;
}

@media (max-width: 1023px) {
  .trust-board__num { font-size: 38px; }
  .trust-board__unit { font-size: 19px; }
}

@media (max-width: 767px) {
  .trust { padding: 56px 0 16px; }
  .trust__lead {
    font-size: 14px;
    text-align: left;
  }
  .trust-board { border-radius: var(--r-m); }
  .trust-board__item { padding: 20px 8px; }
  .trust-board__label { font-size: 11px; }
  .trust-board__num { font-size: 30px; }
  .trust-board__unit { font-size: 15px; }
}

/* ---- 7-3. S2 共感とシーン（§5-3-2） -------------------------------- */

.scenes {
  overflow: hidden;
  padding: 96px 0;
  background: var(--c-bg);
}

.scenes__wash {
  top: -60px;
  right: -120px;
  width: 360px;
  height: 280px;
}

.scenes__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}

/* カードの高さをそろえる */
.scenes__item { display: flex; }

.scene-card { flex: 1; }

/* イラストは装飾（§11-5）。枠の下端・中央にそろえる */
.scene-card__illust {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 120px;
}

.scene-card__img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.scene-card__title {
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.6;
}

.scene-card__text {
  margin-top: 8px;
  color: var(--c-ink-2);
  font-size: 14px;
  line-height: 1.9;
}

@media (max-width: 1023px) {
  .scenes__list { grid-template-columns: repeat(2, 1fr); }
}

/* SP：イラスト左・文字右の横並び。縦に積むと4枚で画面3枚分になるため */
@media (max-width: 767px) {
  .scenes { padding: 64px 0; }
  .scenes__wash { display: none; }
  .scenes__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .scene-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }
  .scene-card__illust {
    width: 96px;
    height: 72px;
  }
  .scene-card__title { margin-top: 0; }
}

/* ---- 7-4. S3 はじめかた（§5-3-3） ---------------------------------- */
/* → ↓ は CSS の content で出す記号。§10-4 のフォントのマージン集合に入れてある。
   矢印を別の記号に変えたら、§10-4 の集合も直すこと。 */

.howto {
  padding: 96px 0;
  background: var(--c-bg-sky);
}

.howto__illust {
  width: 320px;
  margin: 32px auto 0;
}

.howto__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 32px;
}

.howto__step {
  position: relative;
  display: flex;
}

/* カードの間（gap 40px）の中央に → */
.howto__step:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 40px;
  color: var(--c-main);
  font-size: 20px;
  line-height: 1;
  text-align: center;
  transform: translateY(-50%);
}

.step-card { flex: 1; }

.step-card__title {
  margin-top: 8px;
  font-size: 18px;
  line-height: 1.6;
}

.step-card__text {
  margin-top: 8px;
  color: var(--c-ink-2);
  font-size: 14px;
  line-height: 1.9;
}

.howto__note {
  margin-top: 28px;
  color: var(--c-ink-2);
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}

.howto__cta {
  margin-top: 40px;
  text-align: center;
}

@media (max-width: 767px) {
  .howto { padding: 64px 0; }
  .howto__illust { width: 220px; }
  .howto__steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  /* カードの間（gap 28px）の中央に ↓ */
  .howto__step:not(:last-child)::after {
    content: "↓";
    top: 100%;
    left: 0;
    width: 100%;
    line-height: 28px;
    transform: none;
  }
  .step-card__title { font-size: 17px; }
  .howto__note { text-align: left; }
}

/* ---- 7-5. S4 機能（§5-4-2） ---------------------------------------- */
/* 各グループは「番号・見出し・リード」→「スクショつきカード」→「説明だけの項目」の順。
   説明だけの項目は、画像の無いカードにしない（枠線だけの別の形で並べる）。 */

.features {
  padding: 96px 0 120px;
  background: var(--c-bg);
}

.features__lead {
  max-width: 720px;
  margin: 24px auto 0;
  color: var(--c-ink);
  font-size: 17px;
  line-height: 2.0;
  text-align: center;
}

.feature-group { margin-top: 112px; }

.features__lead + .feature-group { margin-top: 72px; }

.feature-group__head { text-align: center; }

/* グループ03 のイラスト（item3）を見出しの右上に置く。装飾（§11-5） */
.feature-group__head--illust { position: relative; }

.feature-group__illust {
  position: absolute;
  top: -16px;
  right: 0;
  width: 140px;
}

.feature-group__title {
  margin-top: 12px;
  font-size: 28px;
  line-height: 1.5;
}

.feature-group__lead {
  max-width: 720px;
  margin: 16px auto 0;
  color: var(--c-ink);
  font-size: 16px;
  line-height: 2.0;
}

/* スクショつきカード（1〜2枚）を中央寄せ */
.feature-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 48px;
}

.feature-card {
  display: flex;
  flex: 1 1 280px;
  flex-direction: column;
  max-width: 330px;
}

/* 画像枠は高さ 320px。下揃え・中央 */
.feature-card__media {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 320px;
}

/* スクショは高さ 320px。幅は原本の比率なり（約158px）。トリミングしない */
.shot--card img {
  width: auto;
  height: 320px;
}

.feature-card__title {
  margin-top: 24px;
  font-size: 18px;
  line-height: 1.6;
}

.feature-card__text {
  margin-top: 8px;
  color: var(--c-ink-2);
  font-size: 14px;
  line-height: 1.9;
}

/* 上限の注記（カードと説明だけの項目で共通）。点線で本文と区切る */
.feature-limit {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--c-line);
  color: var(--c-ink-2);
  font-size: 12px;
  line-height: 1.7;
}

/* 説明だけの項目。1件でも2件でも1列。押せないので影も hover も付けない */
.feature-mini-list {
  display: grid;
  gap: 12px;
  max-width: 684px;
  margin: 24px auto 0;
}

.feature-mini {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  padding: 20px 24px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-m);
  background: var(--c-surface);
}

.feature-mini__title {
  font-size: 16px;
  line-height: 1.6;
}

.feature-mini__text {
  margin-top: 4px;
  color: var(--c-ink-2);
  font-size: 14px;
  line-height: 1.9;
}

@media (max-width: 1023px) {
  .features__lead { font-size: 16px; }
  .feature-group__title { font-size: 24px; }
  /* 見出しと重なるので出さない */
  .feature-group__illust { display: none; }
}

/* SP：カードの中は「サムネ左 96px ／ 文字右」、説明だけの項目は「アイコン左 44px ／ 文字右」 */
@media (max-width: 767px) {
  .features { padding: 64px 0 72px; }
  .features__lead { text-align: left; }
  .feature-group { margin-top: 64px; }
  .features__lead + .feature-group { margin-top: 48px; }
  .feature-group__head { text-align: left; }
  .feature-group__title { font-size: 22px; }
  .feature-group__lead { font-size: 15px; }
  .feature-cards { margin-top: 28px; }
  .feature-card {
    flex: 1 1 100%;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    max-width: none;
  }
  .feature-card__media {
    flex: 0 0 96px;
    height: auto;
  }
  .shot--card img {
    width: 96px;
    height: auto;
  }
  .feature-card__body {
    flex: 1;
    min-width: 0;
  }
  .feature-card__title {
    margin-top: 0;
    font-size: 17px;
  }
  .feature-mini-list { margin-top: 16px; }
  .feature-mini { padding: 16px; }
}

/* ---- 7-6. S5 ほかの機能（§5-4-3） --------------------------------- */
/* 背景とカードの形を S4 と変えて、別の層だと一目で分かるようにする */

.more {
  padding: 96px 0;
  background: var(--c-bg-warm);
}

/* S6 のリードも同じ（§5-4-4「S5 と同じ」） */
.more__lead,
.privacy__lead {
  margin-top: 16px;
  color: var(--c-ink);
  font-size: 16px;
  line-height: 2.0;
  text-align: center;
}

.more__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}

/* カードの高さをそろえる */
.more__item { display: flex; }

/* 60ms ずつ順に遅延（8枚目まで。§5-4-3） */
.more__item:nth-child(2) { transition-delay:  60ms; }
.more__item:nth-child(3) { transition-delay: 120ms; }
.more__item:nth-child(4) { transition-delay: 180ms; }
.more__item:nth-child(5) { transition-delay: 240ms; }
.more__item:nth-child(6) { transition-delay: 300ms; }
.more__item:nth-child(7) { transition-delay: 360ms; }
.more__item:nth-child(8) { transition-delay: 420ms; }

.mini-card { flex: 1; }

/* 機能名と「プレミアム」ラベル。ラベルは機能名の右に 8px あけて置く。
   幅が足りずに折り返しても字下げにならないよう、margin ではなく gap で空ける */
.mini-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 16px;
}

.mini-card__title {
  font-size: 17px;
  line-height: 1.6;
}

.mini-card__text {
  margin-top: 8px;
  color: var(--c-ink-2);
  font-size: 14px;
  line-height: 1.9;
}

.more__link {
  margin-top: 40px;
  text-align: center;
}

@media (max-width: 1023px) {
  .more__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .more { padding: 64px 0; }
  .more__lead,
  .privacy__lead { font-size: 15px; }
  .more__grid { gap: 12px; }
  .mini-card__title { font-size: 15px; }
  .mini-card__text { font-size: 13px; }
}

/* ---- 7-7. S6 安心して書ける（§5-4-4） ------------------------------ */
/* 事実だけを4つの短い項目で。押せないので影も hover も付けない */

.privacy {
  padding: 96px 0;
  background: var(--c-bg);
}

.privacy__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 880px;
  margin: 48px auto 0;
}

.privacy-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-m);
  background: var(--c-surface);
}

.privacy-item__title {
  font-size: 17px;
  line-height: 1.6;
}

.privacy-item__text {
  margin-top: 4px;
  color: var(--c-ink-2);
  font-size: 14px;
  line-height: 1.9;
}

@media (max-width: 767px) {
  .privacy { padding: 64px 0; }
  .privacy__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  /* アイコンは SP で 44px（§8-2） */
  .privacy-item { grid-template-columns: 44px minmax(0, 1fr); }
}

/* ---- 7-8. S7 無料ではじめられます（§5-5-1） ------------------------ */
/* 無料が主役で、プレミアムは補足。金額は書かない（確定事項7） */

.price {
  padding: 96px 0;
  background: var(--c-bg-sky);
}

.price__text {
  max-width: 640px;
  margin: 24px auto 0;
  color: var(--c-ink);
  font-size: 17px;
  line-height: 2.0;
  text-align: center;
}

.price__box {
  max-width: 680px;
  margin: 32px auto 0;
}

.price__box-text {
  color: var(--c-ink-2);
  font-size: 14px;
  line-height: 1.9;
}

.price__note {
  margin-top: 16px;
  color: var(--c-ink-2);
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}

/* 行き先はサイト内の /tokushoho/（同じタブ） */
.price__note-link {
  color: var(--c-main);
  text-decoration: underline;
}

.price__cta {
  justify-content: center;
  margin-top: 32px;
}

@media (max-width: 1023px) {
  .price__text { font-size: 16px; }
}

@media (max-width: 767px) {
  .price { padding: 64px 0; }
  .price__text { text-align: left; }
}

/* ---- 7-9. S8 よくある質問（4問）（§5-5-3） ------------------------ */
/* 開閉は <details>。見た目は 5-6 の .faq-list / .faq-item */

.faq {
  padding: 96px 0;
  background: var(--c-surface);
}

.faq__link {
  margin-top: 40px;
  text-align: center;
}

@media (max-width: 767px) {
  .faq { padding: 64px 0; }
}

/* ---- 7-10. S9 ダウンロードCTA（§5-5-4） ---------------------------- */

.download {
  overflow: hidden;
  padding: 40px 0 120px;
  background: var(--c-bg);
}

/* イラスト（item8）はカードの上に置く。カードに重ねない（白文字のコントラストが崩れるため） */
.download__illust {
  width: 300px;
  margin: 0 auto 20px;
}

/* 水彩のにじみをカードの外側・左上に置くための包み */
.download__wrap {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
}

.download__wash {
  top: -40px;
  left: -80px;
  width: 360px;
  height: 280px;
}

/* z-index で重なりの文脈を作り、装飾円（z-index: -1）を文字の下に敷く */
.download__card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-align: center;
}

/* 装飾円。白12%を重ねても白文字は 4.60:1（§7-1） */
.download__card::before,
.download__card::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
}

.download__card::before {
  top: -90px;
  right: -70px;
  width: 240px;
  height: 240px;
}

.download__card::after {
  bottom: -80px;
  left: -50px;
  width: 180px;
  height: 180px;
}

.download__title {
  color: #fff;
  font-size: 32px;
  line-height: 1.5;
}

.download__text {
  margin-top: 14px;
  color: #fff;
  font-size: 15px;
  line-height: 1.9;
  opacity: .92;
}

.download__cta {
  justify-content: center;
  margin-top: 32px;
}

@media (max-width: 1023px) {
  .download__title { font-size: 28px; }
}

/* SP はにじみを出さないので、カードの影を切らないよう overflow を戻す */
@media (max-width: 767px) {
  .download {
    overflow: visible;
    padding: 24px 0 72px;
  }
  .download__illust { width: 220px; }
  .download__wash { display: none; }
  .download__title { font-size: 22px; }
}

/* ==================================================================
   8. page-features / page-faq / page-404
   下層ページ（§6-0〜§6-4）。値は §6 の確定値。
   §6 に値が無いものは towaly の実装値、towaly にも無いものは §13-4 のメモ。
   ページ末のダウンロードカードは 7-10 の .download をそのまま使う
   （イラストと水彩のにじみは置かない。§8-1 B-2・§7-4）。
   ================================================================== */

/* ---- 8-0. 下層ページ共通（パンくず・ページヘッダー）（§6-0） -------- */

/* パンくず。13px / --c-ink-2 / margin: 24px 0 0。
   区切りの ">" は ASCII なので、§10-4 のフォントのマージン集合に入っている。 */
.breadcrumb { margin: 24px 0 0; }

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: var(--c-ink-2);
  font-size: 13px;
  line-height: 1.6;
}

/* min-height はタップ領域 44px の確保（§11-7） */
.breadcrumb__item {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: ">";
  margin: 0 8px;
}

.breadcrumb__link {
  color: var(--c-ink-2);
  text-decoration: underline;
}

.breadcrumb__link:hover { color: var(--c-main); }

/* ページヘッダー。中央揃え・PC 72px 0 56px / SP 48px 0 40px。h1 は §7-2 の「h1（下層ページ）」。
   🔴 class="page-header" は追従CTAバーの上端センチネル（§5-5-6）。
      /features/ /faq/ から外さない。/tokushoho/ と /404.html には付けない（バーを出さないため）。 */
.page-header {
  padding: 72px 0 56px;
  text-align: center;
}

.page-header__title {
  font-size: 40px;
  line-height: 1.45;
}

.eyebrow + .page-header__title { margin-top: 12px; }

.page-header__lead {
  max-width: 720px;
  margin: 24px auto 0;
  color: var(--c-ink);
  font-size: 17px;
  line-height: 2.0;
}

@media (max-width: 1023px) {
  .page-header__title { font-size: 34px; }
  .page-header__lead { font-size: 16px; }
}

/* 中央揃えの長い文は読みにくいので、SP のリードは左揃え（トップのリードと同じ） */
@media (max-width: 767px) {
  .page-header { padding: 48px 0 40px; }
  .page-header__title { font-size: 26px; }
  .page-header__lead { text-align: left; }
}

/* ---- 8-1. /features/ 機能一覧（§6-1） ------------------------------ */
/* トップ S4 の3グループと同じ見出し・同じ並びに、04・05 を足した5グループ。
   各機能は「画像 ／ 機能名 ／ 説明 ／ 無料・プレミアムの行」の1行。 */

.feature-list { padding-bottom: 96px; }

.feature-set + .feature-set { margin-top: 72px; }

/* 番号（.num-label）→ 見出しの間はトップ S4 と同じ 12px */
.feature-set__title {
  margin-top: 12px;
  font-size: 28px;
  line-height: 1.5;
}

.feature-set__lead {
  margin-top: 16px;
  color: var(--c-ink-2);
  font-size: 15px;
  line-height: 2.0;
}

.feature-set__items { margin-top: 24px; }

/* 機能行。左が画像（スクショかアイコンタイル）、右が文字。SP でも横並びのまま */
.feature-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 28px 0;
  border-top: 1px solid var(--c-line);
}

/* スクショは幅 96px（SP 80px）。枠は画像に入っているので足さない（.shot。§7-5-8） */
.shot--row { width: 96px; }

/* 画像の無い機能は、画像枠の位置にアイコンタイルを置く。空白にしない（§6-1）。
   角丸はアイコンタイルの 16px（§7-4）。
   アイコン（opt/icon_*@112.png）が入稿されたら、タイルの中に 48px で置く（§8-2）。 */
.feature-row__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  aspect-ratio: 1 / 1.4;
  border-radius: 16px;
  background: var(--gradient-tile);
}

/* 仮置きの絵文字は、入稿後のアイコン（48px）の半分（S5 のタイルと同じ比率）。
   SP でも変えない（§6-1 に SP の値が無いため） */
.feature-row__tile .icon-tile__emoji { font-size: 24px; }

/* 機能名と「プレミアム」ラベル。折り返しても字下げにならないよう gap で空ける（S5 と同じ） */
.feature-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.feature-row__title {
  font-size: 18px;
  line-height: 1.6;
}

.feature-row__text {
  margin-top: 8px;
  color: var(--c-ink-2);
  font-size: 14px;
  line-height: 1.9;
}

/* 無料・プレミアムの行。「プレミアム：」の後ろだけ --c-accent-ink の太字 */
.feature-row__plan {
  margin-top: 8px;
  color: var(--c-ink-2);
  font-size: 12px;
  line-height: 1.7;
}

.feature-row__premium {
  color: var(--c-accent-ink);
  font-weight: 700;
}

/* ページ下部の注記（P-66）。注記はこの1つだけ */
.feature-list__note {
  margin-top: 48px;
  color: var(--c-ink-2);
  font-size: 12px;
  line-height: 1.7;
}

/* 行き先はサイト内の /tokushoho/（同じタブ） */
.feature-list__note-link {
  color: var(--c-main);
  text-decoration: underline;
}

.feature-list__link {
  margin-top: 40px;
  text-align: center;
}

@media (max-width: 1023px) {
  .feature-set__title { font-size: 24px; }
}

@media (max-width: 767px) {
  .feature-list { padding-bottom: 56px; }
  .feature-set + .feature-set { margin-top: 56px; }
  .feature-set__title { font-size: 22px; }
  .feature-row {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 16px;
  }
  .shot--row,
  .feature-row__tile { width: 80px; }
  .feature-row__title { font-size: 17px; }
}

/* ---- 8-2. /faq/ よくある質問（§6-3） ------------------------------- */
/* アコーディオンは 5-6 の .faq-list / .faq-item を使う。カテゴリの見出しは .section-title--s */

.faq-page { padding-bottom: 96px; }

.faq-page__cat + .faq-page__cat { margin-top: 56px; }

/* Q8 の回答だけは <p> と <ul>（§6-3）。.faq-item__a を <div> に付け、中にこの2つを置く */
.faq-item__list {
  margin-top: 8px;
  padding-left: 24px;
  list-style: disc;
}

/* 回答の中のリンク（Q9 の特商法表記・Q18 のプライバシーポリシー） */
.faq-item__link {
  color: var(--c-main);
  text-decoration: underline;
}

.faq-page__link {
  margin-top: 48px;
  text-align: center;
}

@media (max-width: 767px) {
  .faq-page { padding-bottom: 56px; }
  .faq-page__cat + .faq-page__cat { margin-top: 40px; }
}

/* ---- 8-3. /404.html（§6-4） ---------------------------------------- */
/* 追従CTAバーを出さないため、.page-header と id="download" を置かない。
   h1 は §7-2 の「h1（下層ページ）」 */

.notfound {
  padding: 120px 0;
  text-align: center;
}

.notfound__title {
  font-size: 40px;
  line-height: 1.45;
}

.notfound__text {
  margin-top: 24px;
  color: var(--c-ink);
  font-size: 17px;
  line-height: 2.0;
}

.notfound__cta { margin-top: 40px; }

@media (max-width: 1023px) {
  .notfound__title { font-size: 34px; }
  .notfound__text { font-size: 16px; }
}

@media (max-width: 767px) {
  .notfound { padding: 72px 0; }
  .notfound__title { font-size: 26px; }
}

/* ==================================================================
   9. page-legal（/tokushoho/）
   §6-5 の確定値。本文は moberly.co.jp と一字一句同じなので、文字には触れない。
   追従CTAバー・ダウンロードカードは置かない（.page-header も付けない）。
   ================================================================== */

/* 本文の幅は 760px・中央（パンくずは container の左端のまま） */
.legal__body {
  max-width: 760px;
  margin: 0 auto;
}

/* TB の 28px は §7-2 の「h2（小）」（32/28/24px）に合わせた */
.legal__title {
  margin-top: 40px;
  font-size: 32px;
  text-align: center;
}

.legal__read {
  margin-top: 32px;
  color: var(--c-ink);
  font-size: 15px;
  line-height: 1.9;
}

.legal-list { margin-top: 32px; }

/* dt と dd の1組ずつを <div> で包み、上に罫線を引く */
.legal-list__item {
  padding: 20px 0;
  border-top: 1px solid var(--c-line);
}

.legal-list__term {
  color: var(--c-heading);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}

/* 内容の改行は <br>（この dd に限り許可。§3-4 の例外） */
.legal-list__desc {
  margin-top: 8px;
  color: var(--c-ink);
  font-size: 15px;
  line-height: 1.9;
}

.legal__date {
  margin: 32px 0 96px;
  color: var(--c-ink-2);
  font-size: 14px;
  text-align: right;
}

@media (max-width: 1023px) {
  .legal__title { font-size: 28px; }
}

@media (max-width: 767px) {
  .legal__title {
    margin-top: 28px;
    font-size: 24px;
  }
}

/* ==================================================================
   11. prefers-reduced-motion（§7-6）
   ここが最後。以降にスタイルを足さない。
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__shot { animation: none; transform: none; }
}