/* 検索から 来た人が 読む「解説ページ」の 見た目。
   アプリ本体（style.css）の 色や 部品を そのまま つかいつつ、
   長い文章が 読みやすいように 整える。 */
body.doc { background: var(--bg); }
.doc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(160deg, #1b3a6b, #16305c); padding: 12px max(16px, env(safe-area-inset-left)); }
.doc-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #e8c860; font-size: 18px; font-weight: 800; white-space: nowrap; }
.doc-logo img { display: block; width: 44px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); }
.doc-cta { display: inline-block; text-decoration: none; white-space: nowrap;
  background: linear-gradient(180deg, #e8c860, #c9a227); color: #3a2a00; font-weight: 800;
  padding: 11px 22px; border-radius: 999px; box-shadow: 0 3px 0 #a8821c; }
.doc-cta.big { font-size: 19px; padding: 15px 34px; margin-top: 10px; }
/* 上の 帯の ボタンは 長い 英語（Start practicing …）でも 折り返す。スマホ 390px で 右に はみ出して いた（2026-09-30 点検 B16） */
.doc-head .doc-cta { white-space: normal; text-align: center; max-width: 100%; line-height: 1.35; }
/* 大きい ボタンも 画面より 広く ならない ように */
.doc-main .doc-cta { max-width: 100%; white-space: normal; text-align: center; }
/* 🌐 もう一方の 言語へ（日本語ページ→英語ページ／英語ページ→日本語ページ） */
.doc-lang { display: inline-block; text-decoration: none; white-space: nowrap; font-weight: 700; font-size: 14px;
  color: #eaf1ff; border: 1px solid rgba(234, 241, 255, .55); border-radius: 999px; padding: 7px 14px; }
.doc-lang:hover { background: rgba(234, 241, 255, .14); }

.doc-main { max-width: 760px; margin: 0 auto; padding: 24px max(16px, env(safe-area-inset-left)) 40px; }
.doc-main h1 { font-size: clamp(23px, 5.4vw, 32px); line-height: 1.4; color: var(--navy); margin-bottom: 12px; }
.doc-main h2 { font-size: clamp(19px, 4.4vw, 23px); color: var(--navy); margin: 30px 0 10px;
  border-bottom: 3px solid var(--royal-gold); padding-bottom: 6px; }
.doc-art { display: block; width: 100%; max-width: 420px; height: auto; margin: 4px auto 16px; border-radius: 14px; box-shadow: 0 4px 14px rgba(22,48,92,.15); }
.doc-hook { font-size: 15px; color: #6b5f4c; margin: 4px 0 12px; line-height: 1.8; }
.doc-lead { font-size: 16px; line-height: 2; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 8px; }
.doc-main p { line-height: 1.95; margin: 10px 0; }
.doc-main b { color: var(--accent); }
.doc-main h1 b, .doc-main h2 b { color: inherit; }

/* 本文にちらばる 図（app.js の しくみを そのまま つかう） */
.doc-main .un-step, .doc-main .sb-step { background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 8px; }

.doc-table { overflow-x: auto; }
.doc-table .rec-table { min-width: 460px; background: var(--card); }
.doc-table .rec-table td:first-child { white-space: nowrap; }
/* style.css は スマホで 表を 1行（nowrap）に するが、解説ページの 表は 文が 長いので 折り返す */
.doc-main .rec-table { white-space: normal; }
/* 2026-11-05 点検：長い URL（apps.microsoft.com/… など）が 折り返せず、スマホで 画面が 425px に 広がった（facts）→ 文は どこでも 折れる ように */
.doc-main p, .doc-main li, .doc-main dd, .doc-main td { overflow-wrap: anywhere; }
/* 見出し（th）と 中身（td）の 2列の 表（特商法など）。スマホでは 縦に 並べる（2026-09-30 点検 A8：幅 2787px で 右が 見えなかった） */
.doc-table.kv .rec-table th { text-align: left; white-space: nowrap; vertical-align: top; }
.doc-table.kv .rec-table td { text-align: left; }
.doc-price-list { margin: 6px 0; padding-left: 1.3em; }
.doc-price-list li { margin: 2px 0; }
@media (max-width: 640px) {
  .doc-table.kv { overflow: visible; }
  .doc-table.kv .rec-table { min-width: 0; display: block; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
  .doc-table.kv .rec-table tbody, .doc-table.kv .rec-table tr, .doc-table.kv .rec-table th, .doc-table.kv .rec-table td { display: block; width: auto; }
  .doc-table.kv .rec-table th { border: 0; border-top: 1px solid var(--line); padding: 8px 12px 2px; white-space: normal; }
  .doc-table.kv .rec-table tr:first-child th { border-top: 0; }
  .doc-table.kv .rec-table td { border: 0; padding: 4px 12px 10px; }
  /* 列が 多い 表（記事の 頭に cards: yes）：1行を 1枚の カードに。見出しの 行は かくし、各マスの 前に 列の 名前を 出す */
  .doc-table.cards { overflow: visible; }
  .doc-table.cards .rec-table { min-width: 0; display: block; background: none; border: 0; }
  .doc-table.cards .rec-table tbody { display: block; }
  .doc-table.cards .rec-table tr:first-child { display: none; }
  .doc-table.cards .rec-table tr { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 12px; margin: 0 0 12px; overflow: hidden; }
  .doc-table.cards .rec-table td { display: block; width: auto; border: 0; border-top: 1px solid var(--line); padding: 8px 12px; text-align: left; white-space: normal; }
  .doc-table.cards .rec-table td:first-child { border-top: 0; font-weight: 800; background: #f6efe0; white-space: normal; }
  .doc-table.cards .rec-table td:not(:first-child)::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 800; color: #7a6a4f; margin-bottom: 2px; }
}

/* 料金の いちばん 上の「14日間 ためす（クレジットカード不要）」・英語の 入口の「アプリを ひらく」 */
.doc-try { text-align: center; background: linear-gradient(180deg, #eaf6ee, #d6efdf); border: 2px solid #2f8f5b; border-radius: 16px; padding: 14px 16px 16px; margin: 12px 0 16px; }
.doc-try .doc-cta.big { margin-top: 0; }
.doc-try p { text-align: left; font-size: 14px; line-height: 1.8 !important; margin: 10px 0 0 !important; color: #3d5a47; }

/* 料金の 表の すぐ 上の 1文（20〜16級は ずっと 無料・15級から 上は プラン） */
.doc-free-line { background: var(--card); border-left: 5px solid #2f8f5b; border-radius: 8px; padding: 10px 14px; margin: 10px 0 12px; line-height: 1.8; }

/* 教室ページの「はじめ方」（①お試し → ②プラン） */
.doc-flow { background: var(--card); border: 2px solid var(--royal-gold); border-radius: 14px; padding: 12px 16px; margin: 18px 0 6px; }
.doc-flow-h { font-weight: 900; color: var(--navy); font-size: 17px; margin-bottom: 4px; }
.doc-flow ol { margin: 0; padding-left: 1.4em; line-height: 1.9; }
.doc-flow li { margin: 4px 0; }
.doc-flow a { color: var(--navy); font-weight: 800; white-space: nowrap; }

.doc-box { background: linear-gradient(180deg, #fff8e4, #ffefc4); border: 3px solid var(--royal-gold);
  border-radius: 16px; padding: 18px 18px 22px; margin: 34px 0 20px; text-align: center; }
.doc-box-h { font-size: 20px; font-weight: 900; color: var(--navy); margin-bottom: 6px; }
.doc-box p { text-align: left; }

.doc-nav { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.doc-nav b { color: var(--navy); margin-right: 4px; }
.doc-nav a { color: var(--navy); font-weight: 700; text-decoration: none;
  border: 2px solid var(--line); border-radius: 999px; padding: 7px 14px; }
.doc-nav a:hover { border-color: var(--royal-gold); background: #fff8e4; }

.doc-foot { text-align: center; color: #8a7560; font-size: 13px; line-height: 1.9;
  padding: 22px 16px max(22px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.doc-foot a { color: var(--navy); font-weight: 700; }

@media (max-width: 640px) {
  .doc-main { padding-top: 18px; }
  .doc-lead { font-size: 15px; line-height: 1.9; }
  .doc-cta { padding: 9px 16px; font-size: 14px; }
  .doc-lang { padding: 6px 11px; font-size: 12px; }
  .doc-nav a { font-size: 13px; padding: 6px 12px; }
}

/* 教室ページの 申し込み枠 */
.doc-jump { text-align: center; margin: 18px 0 4px; }
.doc-jump a { display: inline-block; color: var(--navy); font-weight: 700; text-decoration: none;
  border: 2px dashed var(--royal-gold); border-radius: 999px; padding: 9px 20px; background: #fffdf7; }
.doc-jump a:hover { background: #fff8e4; }
.doc-form { background: linear-gradient(180deg, #16305c, #0f2445); color: #eef3fb;
  border-radius: 16px; padding: 20px 20px 24px; margin: 16px 0 8px; text-align: center; }
.doc-form-h { font-size: 21px; font-weight: 900; color: #f0d68a; margin-bottom: 8px; }
.doc-form p { text-align: left; line-height: 1.9; color: #d9e3f4; }
.doc-form .doc-cta { margin-top: 14px; }
.doc-form-n { font-size: 13px; color: #b8c6de !important; margin-top: 12px !important; text-align: center !important; }
.doc-form-n a { color: #f0d68a; font-weight: 700; }
.doc-box-n { font-size: 14px; margin-top: 14px !important; text-align: center !important; color: #6b5836; }
.doc-box-n a { color: var(--navy); font-weight: 800; }

/* ---- プランの お申し込み ボタン（塾向けページ）。リンクが 無い あいだは 灰色の「準備中」 ---- */
.doc-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 6px; }
.doc-plans .doc-cta { margin: 0; text-align: center; white-space: normal; }
.doc-cta.soon { background: #d9d3c4; color: #6b5f4c; cursor: default; box-shadow: none; }
.doc-plans-n { font-size: 14px; color: #6b5f4c; margin-top: 6px; }
@media (max-width: 640px) { .doc-plans { grid-template-columns: 1fr; } }

/* ページの いちばん上の 写真（教室の先生へ・ご家庭の方へ・2026-09-25） */
.doc-hero { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; object-position: 50% 58%; border-radius: 16px; margin: 4px 0 18px; box-shadow: 0 6px 18px rgba(22,48,92,.18); }
@media (max-width: 640px) { .doc-hero { aspect-ratio: 4 / 3; object-position: 50% 55%; border-radius: 12px; } }

/* ---- 料金の カード（2026-09-26：表 → 色つきの カード。人数が 多いほど 濃い 青＝大きさを 色で 見せる） ---- */
.plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0 10px; }
.plan-card { position: relative; display: flex; flex-direction: column; background: var(--card); border: 2px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 3px 10px rgba(22,48,92,.08); }
.plan-card .pc-top { padding: 10px 12px 8px; color: #fff; text-align: center; }
.plan-card[data-tier="1"] .pc-top { background: #5b8fd6; }
.plan-card[data-tier="2"] .pc-top { background: #3f74c0; }
.plan-card[data-tier="3"] .pc-top { background: #2c5aa5; }
.plan-card[data-tier="4"] .pc-top { background: #1f4486; }
.plan-card[data-tier="5"] .pc-top { background: #16305c; }
.plan-card[data-tier="home"] .pc-top { background: linear-gradient(180deg, #2f8f5b, #1f7a49); }
/* 先行 100家庭（H-4）：赤みの 金。familyY（年払い・保留中）は 緑を 少し 暗く */
.plan-card[data-tier="family100"] .pc-top { background: linear-gradient(180deg, #c8553d, #a8412d); }
.plan-card[data-tier="familyY"] .pc-top { background: linear-gradient(180deg, #247a4c, #185f3a); }
.plan-card.home + .plan-card.home { margin-top: 14px; }
.plan-card .pc-em { display: block; font-size: 28px; line-height: 1.1; }
.plan-card .pc-name { display: block; font-weight: 900; font-size: 16px; margin-top: 2px; }
.plan-card .pc-body { padding: 12px 12px 14px; text-align: center; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.plan-card .pc-max { font-size: 14px; color: #6b5f4c; font-weight: 700; }
.plan-card .pc-max b { color: var(--navy); font-size: 22px; }
.plan-card .pc-price { font-size: 15px; color: #6b5f4c; }
.plan-card .pc-price b { display: block; color: var(--navy); font-size: 26px; line-height: 1.15; letter-spacing: -.5px; }
.plan-card .pc-head { display: inline-block; align-self: center; background: #fff8e4; border: 2px solid var(--royal-gold); color: #6b5836; border-radius: 999px; padding: 3px 12px; font-size: 13px; font-weight: 800; }
.plan-card .pc-head b { color: var(--accent); font-size: 15px; }
/* 名前の 下の 小さな 札（前は 右上の 斜めの 帯。スマホで 名前を 隠し「00家庭 かぎり」と 切れた・2026-09-30 点検 A20） */
.plan-card .pc-tag { display: inline-block; margin-top: 6px; background: rgba(255,255,255,.95); color: var(--accent); font-size: 13px; font-weight: 900; line-height: 1.35; padding: 3px 10px; border-radius: 999px; }
.plan-card .doc-cta { margin: 8px 0 0; padding: 10px 8px; font-size: 14px; white-space: normal; text-align: center; }
.plan-card .doc-cta.big { font-size: 14px; padding: 10px 8px; }
.plan-card .doc-cta.soon { padding: 10px 8px; }
.plan-note { display: flex; gap: 12px; align-items: flex-start; background: linear-gradient(180deg, #fff8e4, #ffefc4); border: 2px solid var(--royal-gold); border-radius: 14px; padding: 12px 14px; margin: 12px 0; }
.plan-note .pn-em { font-size: 30px; line-height: 1; flex: none; }
.plan-note p { margin: 0 !important; line-height: 1.8 !important; font-size: 15px; }
/* 家庭ページ：ほかの 方法と 月額を くらべる 横棒（ひとつの 物差し・直接 ラベル） */
.cost-bars { display: grid; grid-template-columns: max-content 1fr; gap: 10px 12px; align-items: center; background: var(--card); border: 2px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 12px 0; }
.cost-bars .cb-lb { font-size: 14px; font-weight: 700; color: var(--navy); text-align: right; }
.cost-bars .cb-tr { position: relative; height: 26px; background: #f1ede2; border-radius: 6px; overflow: hidden; }
.cost-bars .cb-bar { position: absolute; left: 0; top: 0; bottom: 0; background: #b9b1a0; border-radius: 0 6px 6px 0; }
.cost-bars .cb-bar.me { background: linear-gradient(180deg, #e8c860, #c9a227); }
.cost-bars .cb-v { position: absolute; left: 8px; top: 0; line-height: 26px; font-size: 13px; font-weight: 900; color: #3a2a00; white-space: nowrap; }
.cost-bars .cb-cap { grid-column: 1 / -1; font-size: 13px; color: #8a7560; margin: 0 !important; line-height: 1.6 !important; }
.plan-card.home { max-width: 380px; margin: 0 auto; }
@media (min-width: 700px) {
  .plan-cards { grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .plan-card .pc-body { padding: 10px 8px 12px; }
  .plan-card .pc-price b { font-size: 21px; }
  .plan-card .pc-max b { font-size: 20px; }
  .plan-card .pc-head { padding: 2px 9px; font-size: 12px; }
  .plan-card .pc-head b { font-size: 14px; }
  .plan-card .pc-name { font-size: 14px; }
}
@media (max-width: 640px) {
  .plan-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .plan-card .pc-price b { font-size: 22px; }
  .cost-bars { grid-template-columns: 1fr; gap: 4px 0; padding: 12px; }
  .cost-bars .cb-lb { text-align: left; margin-top: 6px; }
}
.plan-card .doc-cta.soon small { display: block; font-size: 11px; font-weight: 700; margin-top: 1px; }
/* thanks：1枚の 絵の 上に 透明な ボタン（.pic-hit）を 重ねる。押せる 場所は さわると 光る */
.doc-main.pic-main { max-width: 1100px; padding: 12px 8px 28px; }
.pic-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pic-page { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 18px rgba(0,0,0,.18); }
.pic-page img { display: block; width: 100%; height: auto; }
.pic-hit { position: absolute; border-radius: 10px; -webkit-tap-highlight-color: rgba(255,214,90,.35); }
.pic-hit:hover, .pic-hit:focus-visible { background: rgba(255,230,120,.28); outline: 3px solid #e8b400; outline-offset: 1px; }

/* 印刷：記事・観察シートを 紙に するとき、サイトの 見出し・メニュー・案内は 出さない（2026-10-10） */
@media print {
  .doc-head, .doc-nav, .doc-foot, .doc-cta, .doc-box, .doc-lang, .doc-hook { display: none !important; }
  body, .doc, .doc-main { background: #fff !important; color: #000 !important; }
  .doc-table table { border-collapse: collapse; width: 100%; }
  .doc-table th, .doc-table td { border: 1px solid #000; padding: 6px; }
  .doc-table tr { break-inside: avoid; }
}

/* よくある質問（2026-10-13） */
.doc-faq { margin: 8px 0 18px; }
.doc-faq dt { font-weight: 800; margin-top: 10px; color: var(--navy, #16305c); }
.doc-faq dd { margin: 2px 0 0; }

/* ============ 家庭の プランえらび（katei・2026-10-13）：アプリの 保護者の 画面（class.css の .pl-*）と 同じ 見た目。王都の 絵の 上に 青と 赤の カード */
.pl-stage { margin-top: 10px; padding: 18px; border-radius: 16px; display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 16px; align-items: start;
  background: linear-gradient(90deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.55) 38%, rgba(255,255,255,.15) 100%), url(assets/adventure/title.jpg) center / cover no-repeat;
  border: 3px solid #d4af37; box-shadow: 0 6px 16px rgba(22,48,92,.18); }
.pl-hero h3 { font-size: 26px; line-height: 1.3; color: #16305c; margin: 4px 0 8px; text-shadow: 0 2px 0 #fff; }
.pl-hero p { font-size: 14px; font-weight: 700; color: #3b2a14; line-height: 1.7; margin: 0 0 8px; }
.pl-kids { width: 100%; max-width: 300px; display: block; filter: drop-shadow(0 6px 8px rgba(0,0,0,.3)); }
.pl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; padding-top: 18px; }
.pl-card { --c: #1d5fd1; --c2: #0f3f9e; position: relative; text-align: center; background: linear-gradient(180deg, #fffdf6, #f8efdc); border: 3px solid #e2c06a;
  border-radius: 16px; padding: 30px 14px 14px; box-shadow: 0 6px 14px rgba(0,0,0,.18); }
.pl-card.red { --c: #e0364a; --c2: #a8182c; }
.pl-ribbon { position: absolute; left: 50%; top: -16px; transform: translateX(-50%); white-space: nowrap; padding: 6px 18px; border-radius: 8px;
  background: linear-gradient(180deg, var(--c), var(--c2)); color: #fff; font-weight: 800; font-size: 14px; box-shadow: 0 3px 6px rgba(0,0,0,.25); }
.pl-name { font-size: 22px; font-weight: 800; color: #2a1d0b; }
.pl-sub { font-size: 12px; font-weight: 700; color: var(--c); margin-top: 2px; }
.pl-price { color: var(--c); font-weight: 800; font-size: 16px; margin-top: 6px; }
.pl-price b { font-size: 40px; letter-spacing: 1px; }
.pl-note { font-size: 12px; font-weight: 700; color: #6b5a45; }
.pl-art { width: 78%; max-width: 220px; margin: 8px auto 4px; display: block; border-radius: 12px; background: linear-gradient(180deg, #eaf3ff, #fff); }
.pl-feats { list-style: none; text-align: left; margin: 6px 4px 12px; padding: 0; }
.pl-feats li { position: relative; padding: 5px 0 5px 28px; font-size: 14px; font-weight: 700; color: #3b2a14; border-bottom: 1px dashed #e6d8b8; }
.pl-feats li::before { content: "✓"; position: absolute; left: 2px; top: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--c); color: #fff;
  font-size: 13px; line-height: 20px; text-align: center; font-weight: 900; }
.pl-go { display: block; padding: 13px 10px; border-radius: 999px; color: #fff; font-weight: 800; font-size: 17px; text-decoration: none;
  background: linear-gradient(180deg, var(--c), var(--c2)); box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.pl-go:hover { filter: brightness(1.08); }
.pl-strip { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pl-strip span { background: rgba(255,250,238,.95); border: 2px solid #e2c06a; border-radius: 12px; padding: 8px 12px; font-size: 13px; color: #6b5a45; }
.pl-strip b { display: block; color: #16305c; font-size: 15px; }
.pl-foot { grid-column: 1 / -1; margin: 0; font-size: 12px; color: #3b2a14; background: rgba(255,255,255,.8); border-radius: 8px; padding: 6px 10px; }
@media (max-width: 760px) {
  .pl-stage { grid-template-columns: 1fr; padding: 12px; }
  .pl-hero h3 { font-size: 21px; }
  .pl-kids { max-width: 140px; margin: 0 auto; }
  .pl-strip { grid-template-columns: 1fr; }
}
/* ほかの a・b の 色に 負けない（ボタンの 字が 黒く、青い カードの 値段が 赤く なっていた） */
.pl-card a.pl-go, .pl-card a.pl-go:visited { color: #fff; text-decoration: none; }
.pl-card .pl-price, .pl-card .pl-price b { color: var(--c); }
.pl-card.red .pl-art { width: 60%; background: none; }
/* 英語版の プランえらび（2026-10-03） */
.pl-gold { color: #c8891a; }
.pl-box { display: inline-block; margin: 6px 0 2px; padding: 6px 12px; border-radius: 8px; background: rgba(212,175,55,.15); font-size: 13px; }
.pl-card.red .pl-box { background: rgba(224,54,74,.10); }
.doc .pl-stage, .pl-stage { margin: 14px 0; } .pl-hero h3 { border: 0; padding: 0; } .pl-go.soon { background: #aaa; }
/* katei は 本文が せまい（約 720px）ので、見出しと 絵を 上に、カード 2枚を 横に 並べる。スマホは 縦 1列 */
.pl-stage.pl-page { grid-template-columns: 1fr; }
.pl-page .pl-hero { display: grid; grid-template-columns: 1fr 170px; gap: 12px; align-items: center; }
.pl-page .pl-kids { max-width: 170px; }
.pl-page .pl-cards { grid-template-columns: 1fr 1fr; row-gap: 28px; }
@media (max-width: 560px) {
  .pl-page .pl-hero { grid-template-columns: 1fr; }
  .pl-page .pl-kids { max-width: 130px; margin: 0 auto; }
  .pl-page .pl-cards { grid-template-columns: 1fr; }
}
.pl-page .pl-hero { grid-template-rows: auto auto; row-gap: 0; }
.pl-page .pl-hero h3, .pl-page .pl-hero p { grid-column: 1; }
.pl-page .pl-kids { grid-column: 2; grid-row: 1 / 3; }
@media (max-width: 560px) { .pl-page .pl-kids { grid-column: 1; grid-row: auto; } }

/* ============ katei の 最初の 1画面（2026-10-16 E）：3つ・値段・ボタン。くわしい 文は details に */
.kt-top { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 14px; margin: 0 0 14px; text-align: center; }
.kt-3 { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; text-align: left; }
.kt-3 li { display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; align-items: start; line-height: 1.45; }
.kt-3 i { font-style: normal; font-size: 22px; line-height: 1.2; grid-row: span 2; }
.kt-3 b { font-size: 15px; color: var(--navy); }
.kt-3 span { font-size: 12px; color: #4b3e2c; }
.kt-price { font-size: 13px; line-height: 1.55; margin: 0 0 8px; color: #3b2a14; text-align: left; }
.kt-price b { color: #2f8f5b; }
.kt-top .doc-cta.big { margin-top: 0; }
.kt-sub { font-size: 13px; margin: 8px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
.kt-sub a { color: var(--navy); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(22,48,92,.35); white-space: nowrap; }
.kt-more { margin: 18px 0; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; background: #fff; }
.kt-more > summary { cursor: pointer; font-weight: 800; color: var(--navy); padding: 12px 0; list-style: none; }
.kt-more > summary::-webkit-details-marker { display: none; }
.kt-more[open] > summary { border-bottom: 1px dashed var(--line); margin-bottom: 8px; }
.kt-more h2 { margin-top: 10px; }
@media (max-width: 640px) { .doc-main .kt-top ~ * { } .doc-main h1 + .kt-top { margin-top: -2px; } .doc-main .kt-top .doc-cta.big { font-size: 17px; padding: 12px 22px; } }
@media (min-width: 700px) { .kt-price { text-align: center; } .kt-3 { grid-template-columns: repeat(3, 1fr); gap: 12px; } .kt-3 li { grid-template-columns: 1fr; text-align: center; justify-items: center; } .kt-3 i { grid-row: auto; font-size: 28px; } }

/* 余白（2026-11-08 ユーザー「詰め込みすぎ・各項目の 余白を 十分に」）：見出しの 上を 30 → 44px・箱の 間を 広げる */
.doc-main h2 { margin: 44px 0 14px; }
.doc-main p { margin: 12px 0; }
.doc-try, .doc-flow, .plan-note, .cost-bars, .doc-free-line { margin-top: 20px; margin-bottom: 20px; }
.doc-hero { margin: 8px 0 28px; }
.plan-cards { gap: 16px; margin: 20px 0 14px; }
.doc-faq { margin: 12px 0 28px; }

/* 高級感の 余白（2026-11-10 ユーザー「ホテルの サイトの ように 上品な 余白・詰め込みすぎに 見える」）：
   箱と 箱の 間を さらに 広げ、縁どりを 太い 色から 細く しずかな 影に 変える。色・構成は 変えない */
.doc-main { max-width: 800px; }
.doc-main h2 { margin: 64px 0 18px; letter-spacing: .5px; }
.doc-main h2:first-child, .doc-main h1 + h2 { margin-top: 32px; }
.doc-main p { line-height: 2.05; }
.doc-try, .doc-flow, .plan-note, .cost-bars, .doc-free-line,
.doc-box, .doc-form, .kt-top, .doc-table, .doc-faq, .doc-jump, .doc-nav { margin-top: 32px !important; margin-bottom: 32px !important; }
.doc-box { border-width: 1.5px; box-shadow: 0 6px 20px rgba(201, 162, 39, .14); }
.doc-flow, .doc-try { border-width: 1.5px; }
.plan-note { border-width: 1.5px; }
.kt-top { padding: 22px 20px 26px; box-shadow: 0 4px 16px rgba(22,48,92,.06); }
.kt-more { margin: 32px 0; }
.doc-faq dt { margin-top: 20px; }
.doc-faq dt:first-child { margin-top: 0; }
.doc-faq dd { margin-top: 4px; line-height: 1.8; }
.doc-table.kv .rec-table th, .doc-table.kv .rec-table td { padding-top: 10px; padding-bottom: 14px; }
.doc-table.cards .rec-table tr { margin-bottom: 16px; }
.doc-table.cards .rec-table td { padding: 10px 14px; }
@media (max-width: 640px) {
  .doc-main h2 { margin: 48px 0 16px; }
  .doc-try, .doc-flow, .plan-note, .cost-bars, .doc-free-line,
  .doc-box, .doc-form, .kt-top, .doc-table, .doc-faq, .doc-jump, .doc-nav { margin-top: 26px !important; margin-bottom: 26px !important; }
}

/* ============ 文字＋大きな 写真の 帯（2026-11-10 ユーザー「ホテル（ニューオータニ EXECUTIVE HOUSE 禅）の ように、右半分に 大きな 絵・余白で 見やすく」）
   パソコン：本文（800px）より 広く 出して 左に 文字・右に 写真（高さいっぱい）。スマホ：今まで どおり 文字 → 写真の 縦 1列。
   写真は 今ある 物だけ（新しい 絵は 頼まない） */
.doc-hero-split { margin: 8px 0 48px; }
.doc-hero-split .dhs-img .doc-hero { margin: 24px 0 0; }
@media (min-width: 900px) {
  .doc-hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 64px; align-items: center;
    width: min(1180px, calc(100vw - 64px)); margin: 24px 0 72px calc(50% - min(590px, 50vw - 32px)); }
  .doc-hero-split .dhs-text h1 { font-size: clamp(28px, 2.6vw, 36px); line-height: 1.5; margin-bottom: 28px; letter-spacing: .5px; }
  .doc-hero-split .dhs-img { align-self: stretch; }
  .doc-hero-split .dhs-img .doc-hero { width: 100%; height: 100%; min-height: 520px; aspect-ratio: auto; object-fit: cover; object-position: 50% 50%;
    margin: 0; border-radius: 6px; box-shadow: 0 18px 48px rgba(22,48,92,.18); }
  /* 左の 列は 本文より せまいので、3つの 特長は 縦に 並べる */
  .doc-hero-split .kt-top { margin: 0 !important; padding: 26px 26px 28px; text-align: left; }
  .doc-hero-split .kt-3 { grid-template-columns: 1fr; gap: 14px; }
  .doc-hero-split .kt-3 li { grid-template-columns: 34px 1fr; text-align: left; justify-items: start; }
  .doc-hero-split .kt-3 i { grid-row: span 2; font-size: 24px; }
  .doc-hero-split .kt-price { text-align: left; margin: 18px 0 16px; }
  .doc-hero-split .kt-sub { justify-content: flex-start; }
  .doc-hero-split .doc-lead { margin: 0; padding: 22px 24px; font-size: 16px; line-height: 2.1; }
}