@charset "utf-8";
/*
 * レスポンシブ調整（2026-08-18）
 * HP作成所版の index.html / terms.html / privacy.html に後から重ねる差分。
 * 原本のマークアップは変更せず、このファイルだけで上書きする。
 *
 * 直している問題（すべて実測ベース）:
 *  1. タップ領域が 16〜19px しかないリンクがあり WCAG 2.2 の 2.5.8
 *     Target Size (Minimum) 24×24px を満たしていなかった
 *  2. 10〜11px の文字が本文・操作要素に使われていた
 *  3. 規約・ポリシーの表がスマホで1文字ずつ折り返していた
 *  4. 320px で見出しが語中改行していた（「対応エリアの拡/大」）
 */

/* ─────────────────────────────────────────
   1. タップ領域を 24px 以上に（WCAG 2.2 AA / 2.5.8）
   ───────────────────────────────────────── */

/* 本文中の「公式LINEから」など、行内リンクの当たり判定を広げる。
   line-height を変えずに上下へ伸ばすため padding + 負の margin を使う。 */
/* inline-block にすると行内リンクが折り返せず狭い画面で親からはみ出すため、
   inline のまま padding を足す（inline の padding は行の高さを変えずに
   タップ判定にだけ効く）。 */
.line-txt-link,
a.js-cta.line-txt-link {
  padding-block: 6px;
}

/* 手動改行(br)入りの注記が最狭端末で枠を超えたときの保険 */
.line-notice-desc,
.cta-sub {
  overflow-wrap: anywhere;
}

/* 「すべてが公式LINEから」見出し: nowrap の継承で320px級では
   カードからはみ出していた。折り返しを許可し、最狭端末では一回り小さく */
.line-notice-head,
.line-notice-head .line-txt-link,
.line-notice-desc {
  white-space: normal;
}

@media (max-width: 340px) {
  .line-notice-head {
    font-size: 14px;
  }
}

/* フッターのリンク一覧: 17px 高しかなかった */
footer .footer-col ul li a,
footer .footer-bottom-links a,
footer .footer-line-link {
  display: inline-block;
  min-height: 32px;
  padding-block: 7px;
  line-height: 1.6;
}

/* 規約・ポリシーの「← トップページ」 */
.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

/* ─────────────────────────────────────────
   2. 極小フォントの底上げ
   ───────────────────────────────────────── */

/* 動画切り替えタブは操作要素。10px は小さすぎるうえ当たり判定も浅かった。
   ただし文字を大きくすると5個が1行に収まらないため、モバイルでは
   「押し込む」のをやめて自然に折り返す（下の768px以下のブロック参照）。 */
.vp-tab {
  min-height: 34px;
  font-size: 12.5px;
}

@media (max-width: 768px) {
  /* 5つを1列のまま維持する（本人指示 2026-08-21）。
     あふれ対策は折り返しではなく「画面幅に応じた文字サイズ」で行う。
     430px級では12.5px、375pxで約11.6px、320pxで下限10px。
     実機ヒラギノの字幅（Windows比+8%）でも収まることを検証済み。 */
  .vp-tabs {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .vp-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 2px;
    font-size: clamp(10px, 3.1vw, 12.5px);
    letter-spacing: 0;
  }

  /* ホバー用の下線はタッチ端末では出ない前提の装飾なので消す */
  .vp-tab::after {
    display: none;
  }

  /* 原本の scale(1.2) は隣のピルと重なるため控えめに */
  .vp-tab.active {
    transform: scale(1.06);
  }
}

/* 320px級の最小端末: 間隔と字間を詰めて5つを収める */
@media (max-width: 340px) {
  .vp-tabs {
    gap: 4px;
  }

  .vp-tab {
    font-size: 10px;
    letter-spacing: -0.01em;
  }
}

/* 章ラベル・バッジ類・フッター見出し */
.sec-label,
.hero-badge,
.license-badge,
.free-banner-label,
.monitor-box-bot,
footer .footer-col h4,
footer h4 {
  font-size: 12px;
}

/* 注記は11pxで敷き詰められていた */
.monitor-foot,
.cta-sub,
.license-note {
  font-size: 12px;
  line-height: 1.9;
}

/* 規約・ポリシー内の未確定プレースホルダ */
.ph {
  font-size: inherit;
}

/* ─────────────────────────────────────────
   3. 見出しの語中改行を防ぐ（日本語の文節で折る）
   ───────────────────────────────────────── */
.sec-heading,
.hero-title,
.roadmap-title,
.flow3-card-title,
.cta-mid-title,
.final-title,
.feature-title {
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
}

@supports (word-break: auto-phrase) {
  .sec-heading,
  .hero-title,
  .roadmap-title,
  .flow3-card-title,
  .cta-mid-title,
  .final-title {
    word-break: auto-phrase;
    overflow-wrap: normal;
  }
}

/* ─────────────────────────────────────────
   4. 規約・ポリシーの表をスマホで読めるようにする
      4列を375pxに押し込むと1文字ずつ縦積みになっていたため、
      狭い画面ではカード状に積み替える。
   ───────────────────────────────────────── */
@media (width <= 600px) {
  .doc-body table,
  .article table,
  table {
    display: block;
    width: 100%;
  }

  .doc-body table thead,
  .article table thead,
  table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .doc-body table tbody,
  .article table tbody,
  table tbody {
    display: block;
  }

  .doc-body table tr,
  .article table tr,
  table tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--border, #edd9ce);
    border-radius: 10px;
    padding: 4px 2px;
  }

  .doc-body table td,
  .article table td,
  table td {
    display: block;
    width: auto !important;
    border: none;
    padding: 6px 12px;
    text-align: left;
  }

  /* 1列目を見出し扱いにして、残りをその内訳として並べる */
  .doc-body table td:first-child,
  .article table td:first-child,
  table td:first-child {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border, #edd9ce);
    font-weight: 700;
  }
}

/* ─────────────────────────────────────────
   5. 極端に狭い端末（320px）での詰まりを緩和
   ───────────────────────────────────────── */
@media (width <= 360px) {
  .container,
  .doc-body {
    padding-inline: 14px;
  }

}