/* =================================================================
 * NetChai Original Text — Inbound Chinese Course
 * Design: IB4 — Travel Ticket（搭乗券・パスポート風）× Ocean（オーシャン）
 * 書式・フォントサイズは中級コース F10（intermediate_course_F10.css）を踏襲。
 *   - 配色のみオーシャン（紺×ブルー）に変更
 *   - ヘッダーをトラベルチケット（破線枠＋スタンプ）に変更
 *   - 文法（今日の文法ポイント）はインバウンド向けに詳しい解説構造を追加
 * 基礎フェーズ(第1〜40課)＝F系7セクション(.f-*)、インバウンド(第41〜100課)＝
 * 上記＋.ib-scene/.ib-phrase/.ib-gram を使用。全課がこの1枚を参照する。
 * ================================================================= */

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#dde2ea;min-height:100vh;-webkit-font-smoothing:antialiased}
ruby rt{font-weight:500;letter-spacing:.04em;font-family:"Source Sans 3","Source Sans Pro","Inter","Segoe UI","Helvetica Neue",Arial,sans-serif}
/* ── 中国語テキストのフォント統一（2026-06-12 講師レビュー対応） ──
   日本語フォントに無い簡体字専用字（们/这/说 等）だけが別フォントへフォール
   バックし「一部の漢字だけ細字」になる問題への対策。中国語テキスト（ruby で
   囲まれた漢字・.zh・.han・ヘッダー中国語サブタイトル）は OS 標準の中文フォント
   で統一する（外部フォント依存なし＝中国本土アクセスでも遅延しない）。 */
.page ruby,.page .zh,.page .han,.f-head h1 small{
  font-family:"PingFang SC","Microsoft YaHei","SimHei",sans-serif;
}
/* ピンインを単語ごとに読みやすく：隣り合うルビ語の間に微小な余白 */
.f-dia .zh ruby,.ib-phrase .zh ruby,.f-ex .item .zh ruby,.ib-gram .examples li ruby,.ib-gram .tip ruby,.f-p-list li ruby{margin-right:.14em}

/* ── オーシャン配色（IB4） ── */
.page{
  --F-ink:#0d2b45;        /* 濃紺（本文・見出し） */
  --F-paper:#eef4f9;      /* 紙色（淡いブルーグレー） */
  --F-magenta:#2a7fb8;    /* アクセント（オーシャンブルー） */
  --F-acc-dark:#1c5e8c;   /* 濃いアクセント */
  --F-acc2:#7ab3d6;       /* 淡いアクセント */
  --F-mute:#5f7d96;       /* 補助テキスト */
  --F-rule:#bcd4e6;       /* 罫線 */
  --F-soft:#e1eef7;       /* ごく淡い面 */
  --F-card:#ffffff;
  --F-japanese:#173049;   /* 日本語訳 */
  font-family:"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3",Meiryo,"PingFang SC","Microsoft YaHei","SimHei",sans-serif;
  color:var(--F-ink);background:var(--F-paper);
  max-width:880px;margin:32px auto;
  box-shadow:0 14px 40px rgba(20,30,55,.18);border-radius:6px;overflow:hidden;
  letter-spacing:.01em;
}

/* ── ヘッダー（トラベルチケット：破線枠＋スタンプ） ── */
.f-head{
  position:relative;margin:18px 18px 4px;padding:26px 40px 22px;
  border:2px dashed var(--F-magenta);border-radius:16px;
  background:linear-gradient(180deg,var(--F-soft),var(--F-card));
  text-align:center;
}
.f-head::before,.f-head::after{ /* チケットの切り込み（穴） */
  content:"";position:absolute;top:50%;width:22px;height:22px;border-radius:50%;
  background:#dde2ea;transform:translateY(-50%);
}
.f-head::before{left:-12px} .f-head::after{right:-12px}
.f-head .kicker{font-family:"Inter","Source Sans 3","Segoe UI",sans-serif;font-size:14px;letter-spacing:.3em;color:var(--F-magenta);font-weight:800;text-transform:uppercase}
.f-head h1{margin:10px 0 0;font-size:42px;font-weight:900;letter-spacing:.04em;line-height:1.12;white-space:nowrap}
.f-head h1 small{display:block;font-size:19px;color:var(--F-mute);font-weight:700;letter-spacing:.08em;margin-top:8px;white-space:nowrap}
.f-head .stamp{
  position:absolute;top:14px;right:20px;transform:rotate(-9deg);
  border:2px solid var(--F-magenta);color:var(--F-magenta);border-radius:8px;padding:6px 12px;
  font-family:"Inter","Source Sans 3","Segoe UI",sans-serif;font-weight:800;font-size:12px;letter-spacing:.16em;line-height:1.2;text-align:center;
}

.f-body{padding:14px 44px 36px}

/* ── 大見出し（チケットの半券風・破線） ── */
h2.f-h{
  margin:34px 0 18px;display:flex;align-items:baseline;gap:14px;
  border-bottom:2px dashed var(--F-rule);padding-bottom:8px;
}
h2.f-h .num{font-family:"Inter",sans-serif;font-weight:900;font-size:40px;line-height:1;color:var(--F-magenta)}
h2.f-h .t{font-size:20px;font-weight:900;letter-spacing:.1em}
h2.f-h .en{margin-left:auto;font-family:"Inter","Source Sans 3","Segoe UI",sans-serif;font-size:18px;letter-spacing:.18em;color:var(--F-mute);text-transform:uppercase;font-weight:800}

/* ── 場面設定（インバウンド独自・導入ノート） ── */
.ib-scene{
  background:var(--F-soft);border:1.5px dashed var(--F-acc2);border-radius:10px;
  padding:14px 20px;margin-top:6px;font-size:17px;line-height:1.9;color:var(--F-japanese);
}
.ib-scene b{color:var(--F-acc-dark)}

/* ── 接客フレーズ集（F10 慣用フレーズ .f-phrase と同サイズ） ── */
.ib-phrase,.f-phrase{display:grid;gap:4px;margin-top:6px}
.ib-phrase .item,.f-phrase .item{display:grid;grid-template-columns:38px 1fr;gap:18px;border-bottom:1px dashed var(--F-rule);padding:16px 0}
.ib-phrase .item .n,.f-phrase .item .n{font-family:"Inter",sans-serif;font-weight:900;color:var(--F-magenta);font-size:24px;padding-top:4px;text-align:center}
.ib-phrase .item .body .zh,.f-phrase .item .body .zh{font-size:24px;font-weight:700;line-height:2;color:var(--F-ink);letter-spacing:.03em}
.ib-phrase .item .body .zh ruby rt,.f-phrase .item .body .zh ruby rt{color:var(--F-magenta);font-size:17px;font-weight:400;font-family:"Source Sans 3","Source Sans Pro","Inter","Segoe UI","Helvetica Neue",Arial,sans-serif;letter-spacing:.01em}
.ib-phrase .item .body .ja,.f-phrase .item .body .ja{margin-top:8px;font-size:19px;color:var(--F-japanese);padding-left:14px;border-left:3px solid var(--F-magenta);line-height:1.75}

/* ── 重要文型（基礎フェーズ用・F10と同サイズ） ── */
.f-ex{display:grid;gap:4px;margin-top:6px}
.f-ex .item{display:grid;grid-template-columns:30px 1fr 1fr;gap:18px;border-bottom:1px solid var(--F-rule);padding:14px 0;align-items:center}
.f-ex .item .n{font-family:"Inter",sans-serif;font-weight:900;color:var(--F-magenta);font-size:13px;padding-top:6px}
.f-ex .item .zh{font-size:23px;font-weight:700;letter-spacing:.03em;line-height:2}
.f-ex .item .zh ruby rt{color:var(--F-magenta);font-size:15.5px;font-weight:400;font-family:"Source Sans 3","Source Sans Pro","Inter","Segoe UI","Helvetica Neue",Arial,sans-serif;letter-spacing:.01em}
.f-ex .item .ja{align-self:center;font-size:19px;color:var(--F-japanese);padding-left:12px;border-left:3px solid var(--F-magenta);line-height:1.75}

/* ── 本文／会話例（F10 .f-dia と同サイズ） ── */
.f-dia{background:var(--F-card);border:2px solid var(--F-ink);border-radius:6px;padding:8px 22px 16px;margin-bottom:14px}
.f-dia .scene-no{
  display:inline-block;font-family:"Inter","Source Sans 3","Segoe UI",sans-serif;font-weight:900;font-size:16px;
  letter-spacing:.22em;background:var(--F-ink);color:#fff;padding:7px 18px;margin:0 0 16px 0;border-radius:0 0 8px 0;
}
.f-dia .turn{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:14px 0;border-bottom:1px dashed var(--F-rule)}
.f-dia .turn:last-child{border-bottom:0}
.f-dia .turn .who{font-family:"Source Sans 3","Inter","Segoe UI",sans-serif;font-weight:400;font-size:21px;letter-spacing:.03em;color:var(--F-magenta);padding-top:10px}
.f-dia .turn .who .ja{display:block;font-family:"Hiragino Kaku Gothic ProN",sans-serif;font-size:18px;color:var(--F-ink);font-weight:800;letter-spacing:.04em;margin-top:4px}
.f-dia .turn .zh{font-size:24px;font-weight:700;line-height:2;color:var(--F-ink)}
.f-dia .turn .zh ruby rt{color:var(--F-magenta);font-size:18px;font-weight:400;font-family:"Source Sans 3","Source Sans Pro","Inter","Segoe UI","Helvetica Neue",Arial,sans-serif;letter-spacing:.01em}

/* ── 重要単語（F10 .f-vocab と同サイズ：漢字25/ピンイン22/訳18） ── */
.f-vocab{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 30px;margin-top:8px}
.f-vocab .item{display:grid;grid-template-columns:26px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--F-rule)}
.f-vocab .item .n{font-family:"Inter",sans-serif;font-weight:900;color:var(--F-magenta);font-size:15px;padding-top:6px}
.f-vocab .item .han{font-size:25px;font-weight:900;color:var(--F-ink)}
.f-vocab .item .pinyin{font-family:"Source Sans 3","Source Sans Pro","Inter","Segoe UI","Helvetica Neue",Arial,sans-serif;color:var(--F-magenta);font-size:22px;font-weight:400;display:block;margin-top:2px;letter-spacing:.01em}
.f-vocab .item .meaning{font-size:18px;color:var(--F-japanese);margin-top:5px;line-height:1.7}

/* 新出単語（品詞つき・基礎フェーズ用） */
.f-tbl{column-count:2;column-gap:30px;margin-top:6px}
.f-tbl .w{break-inside:avoid;display:grid;grid-template-columns:26px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--F-rule)}
.f-tbl .w .n{font-family:"Inter",sans-serif;font-weight:900;color:var(--F-magenta);font-size:15px;padding-top:6px}
.f-tbl .w .body .h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.f-tbl .w .body .han{font-size:25px;font-weight:900}
.f-tbl .w .body .pos{font-size:14.5px;color:var(--F-mute);font-weight:600}
.f-tbl .w .body .pinyin{font-family:"Source Sans 3","Source Sans Pro","Inter","Segoe UI","Helvetica Neue",Arial,sans-serif;color:var(--F-magenta);font-size:22px;font-weight:400;display:block}
.f-tbl .w .body .ja{font-size:18px;color:var(--F-japanese);margin-top:5px;line-height:1.7}

/* =================================================================
 * 今日の文法ポイント（インバウンド向け・くわしい解説）
 *   要点(lead) → くわしい解説(p) → 例文(examples) → 注意(note) → 接客のコツ(tip)
 * サイズは F10 .f-gr-card 系に準拠（h3 20 / 本文 17 / 例文 21〜23 / ルビ 17）
 * ================================================================= */
.ib-gram{
  background:var(--F-card);color:var(--F-ink);margin-top:14px;
  border:1px solid var(--F-rule);border-left:6px solid var(--F-magenta);border-radius:0 8px 8px 0;
  padding:22px 26px;
}
.ib-gram .tag{display:inline-block;background:var(--F-magenta);color:#fff;font-weight:900;font-size:11px;letter-spacing:.25em;padding:7px 12px;margin-bottom:14px}
.ib-gram h3{margin:0 0 10px;font-size:20px;font-weight:900;letter-spacing:.04em;color:var(--F-ink)}
.ib-gram .lead{margin:0 0 12px;font-size:18px;line-height:1.95;color:var(--F-japanese);font-weight:700}
.ib-gram p{margin:0 0 10px;font-size:17px;line-height:1.95;color:var(--F-japanese)}
.ib-gram p .zh,.ib-gram .lead .zh,.ib-gram .tip .zh{font-weight:700;color:var(--F-ink)}
.ib-gram h4{margin:16px 0 6px;font-size:14px;font-weight:900;letter-spacing:.12em;color:var(--F-acc-dark)}
.ib-gram .examples{margin:10px 0;padding:14px 20px;background:var(--F-soft);border-radius:8px;list-style:none}
.ib-gram .examples li{position:relative;padding:10px 0 10px 34px;border-bottom:1px dashed var(--F-rule);font-size:22px;font-weight:700;line-height:1.9;color:var(--F-ink)}
.ib-gram .examples li:last-child{border-bottom:0}
.ib-gram .examples li::before{content:attr(data-no);position:absolute;left:0;top:11px;color:var(--F-magenta);font-family:"Inter",sans-serif;font-weight:900;font-size:18px}
.ib-gram .examples li ruby rt{color:var(--F-magenta);font-size:16px;font-weight:400;font-family:"Source Sans 3","Source Sans Pro","Inter","Segoe UI","Helvetica Neue",Arial,sans-serif;letter-spacing:.01em}
.ib-gram .examples li .ja{display:block;font-size:15px;font-weight:400;color:var(--F-mute);margin-top:4px;line-height:1.6}
.ib-gram .note{margin-top:12px;padding:10px 14px;background:#fdeceA;border-left:4px solid #c0492f;color:#a23b28;font-size:16px;font-weight:800;line-height:1.7;border-radius:0 6px 6px 0}
.ib-gram .tip{margin-top:12px;padding:11px 16px;background:var(--F-soft);border-left:4px solid var(--F-acc2);font-size:16px;color:var(--F-japanese);line-height:1.85;border-radius:0 6px 6px 0}
.ib-gram .tip b{color:var(--F-acc-dark)}
.ib-gram .tip ruby rt{color:var(--F-magenta);font-size:13px;font-family:"Source Sans 3",sans-serif}

/* ── 文法（基礎フェーズ用・F10 .f-gr-card） ── */
.f-gr-card{background:var(--F-card);color:var(--F-ink);padding:20px 24px;margin-top:14px;display:grid;grid-template-columns:auto 1fr;gap:20px;border:1px solid var(--F-rule);border-left:6px solid var(--F-magenta)}
.f-gr-card .tag{background:var(--F-magenta);color:#fff;font-weight:900;font-size:11px;letter-spacing:.25em;padding:8px 12px;align-self:start;height:fit-content}
.f-gr-card h3{margin:0 0 10px;font-size:18px;font-weight:900;letter-spacing:.04em}
.f-gr-card p{margin:0 0 6px;font-size:17px;line-height:1.95;color:var(--F-japanese)}

/* ── 練習（F10 .f-p-list と同サイズ） ── */
.f-p-list{margin:14px 0 6px;background:var(--F-card);border:1px solid var(--F-rule);border-left:6px solid var(--F-magenta);padding:24px 28px;list-style:none}
.f-p-list li{position:relative;font-size:21px;padding:14px 0 14px 46px;line-height:1.9;color:var(--F-ink);font-weight:700;letter-spacing:.02em;border-bottom:1px dashed var(--F-rule)}
.f-p-list li:last-child{border-bottom:0}
.f-p-list li::before{content:attr(data-no);position:absolute;left:0;top:14px;color:var(--F-magenta);font-family:"Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,sans-serif;font-weight:900;font-size:24px}
.f-p-list li ruby rt{color:var(--F-magenta);font-size:16px;font-weight:400;font-family:"Source Sans 3",sans-serif}
.f-p-list li .ex{display:block;color:var(--F-mute);font-size:16px;margin-top:8px;font-style:italic;font-weight:600;line-height:1.7}

/* ── 参考訳（F10 .f-tr-block） ── */
.f-tr-block{margin:14px 0 6px;padding:16px 20px;background:var(--F-soft);border-radius:10px}
.f-tr-block h4{margin:0 0 10px;font-family:"Playfair Display","Times New Roman",serif;font-style:italic;color:var(--F-acc-dark);font-size:22px;font-weight:700;letter-spacing:.05em}
.f-tr-block .line{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:7px 0;font-size:17.5px;line-height:1.85}
.f-tr-block .line .who{color:var(--F-magenta);font-weight:700}
.f-tr-block .line .text{color:var(--F-japanese)}

/* ── 第0課 発音入門 専用パーツ ── */
.ib-tone{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:12px 0}
.ib-tone .t{background:var(--F-card);border:1px solid var(--F-rule);border-top:4px solid var(--F-magenta);border-radius:8px;padding:14px 10px;text-align:center}
.ib-tone .t .mark{font-size:36px;font-weight:900;color:var(--F-ink);font-family:"Source Sans 3","Inter",sans-serif;line-height:1}
.ib-tone .t .name{font-size:14px;font-weight:800;color:var(--F-magenta);margin-top:8px}
.ib-tone .t .desc{font-size:13px;color:var(--F-japanese);margin-top:5px;line-height:1.6}
.ib-minimal-note{font-size:16px;color:var(--F-japanese);line-height:1.9;margin:8px 0}
.ib-minimal-note b{color:var(--F-acc-dark)}
.ib-pin{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 28px;margin:8px 0}
.ib-pin .row{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--F-rule);align-items:baseline}
.ib-pin .row .lab{font-size:14.5px;font-weight:800;color:var(--F-magenta)}
.ib-pin .row .val{font-family:"Source Sans 3","Inter",sans-serif;font-size:19px;letter-spacing:.08em;color:var(--F-ink)}
.ib-syl{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.ib-syl span{background:var(--F-soft);border:1px solid var(--F-rule);border-radius:999px;padding:6px 16px;font-family:"Source Sans 3","Inter",sans-serif;font-size:18px;color:var(--F-ink)}
.ib-syl span b{color:var(--F-acc-dark);font-weight:800}

/* ── フッター ── */
.f-foot{padding:20px 44px;border-top:2px dashed var(--F-magenta);background:var(--F-paper);font-family:"Inter","Source Sans 3","Segoe UI",sans-serif;font-size:14px;color:var(--F-mute);display:flex;justify-content:space-between;letter-spacing:.1em;font-weight:600}
.f-foot strong{color:var(--F-ink);letter-spacing:.04em;font-weight:900}

/* ── 印刷用（教材作成CLAUDE.md §8-3 準拠：会話は発話単位で改ページ回避） ── */
@media print{
  body{background:#fff}
  .page{margin:0;box-shadow:none;border-radius:0;max-width:none;width:100%}
  .f-head::before,.f-head::after{background:#fff}
  h2.f-h{page-break-after:avoid}
  .ib-scene,.ib-gram,.f-gr-card,.f-tr-block,.f-p-list{page-break-inside:avoid}
  .f-dia .turn{page-break-inside:avoid}
  .ib-phrase .item,.f-phrase .item,.f-ex .item,.f-vocab .item,.f-tbl .w{page-break-inside:avoid}
  @page{margin:10mm}
}

/* ── スマホ（画面のみ・印刷には効かせない） ── */
@media screen and (max-width:760px){
  .page{margin:0;border-radius:0}
  .f-head h1,.f-head h1 small{white-space:normal}
  .f-tbl{column-count:1}
  .f-pn,.f-vocab{grid-template-columns:1fr}
  .f-ex .item{grid-template-columns:1fr;gap:8px}
  .f-gr-card{grid-template-columns:1fr}
  .f-dia .turn{grid-template-columns:1fr;gap:6px}
  .ib-phrase .item,.f-phrase .item{grid-template-columns:30px 1fr;gap:12px}
  .ib-tone{grid-template-columns:repeat(2,1fr)}
  .ib-pin{grid-template-columns:1fr}
}


/* ── 目次に戻る／前後の課／上へ ナビ（2026-06-20 追加・サイト配信用） ── */
html{scroll-behavior:smooth}
.ib-back{
  display:inline-flex;align-items:center;gap:6px;
  background:#2a7fb8;color:#fff;font-weight:800;font-size:14px;
  text-decoration:none;padding:8px 20px;border-radius:999px;
  border:2px solid #fff;box-shadow:0 3px 0 rgba(13,43,69,.22);
  transition:transform .12s,background .12s;
}
.ib-back:hover{background:#226f9f;transform:translateY(-1px)}
.ib-back.ib-disabled{background:#c3ccd8;box-shadow:0 3px 0 rgba(0,0,0,.06);cursor:default;pointer-events:none;opacity:.7}
.ib-nav-top{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;padding:16px 16px 6px}
.ib-nav-bottom{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;padding:18px 16px 30px}
.ib-totop{
  position:fixed;bottom:18px;z-index:50;left:calc(50% + 450px);right:auto;
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:50%;
  background:#f57db4;color:#fff;font-weight:900;font-size:20px;line-height:1;
  text-decoration:none;border:2px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.2);
  transition:transform .12s,background .12s;
}
.ib-totop span{font-size:9px;margin-top:1px;letter-spacing:.02em}
.ib-totop:hover{background:#ee6aa7;transform:translateY(-2px)}
@media (max-width:1024px){ .ib-totop{left:auto;right:14px} }
@media print{ .ib-nav-top,.ib-nav-bottom,.ib-totop{display:none} }