/*
 * Kumamoto Forum 2026 Page Styles
 * 第29回熊本フォーラム 特設ページ専用スタイル
 *
 * 配色はチラシ（sales/outputs/20260803_熊本フォーラム専用ページ作成/チラシ参考画像.png）と
 * 同系色（濃紺 × 赤アクセント）に揃えている。写真素材が揃うまではヒーロー背景はCSSのみで表現する。
 *
 * 2026-08-07 UI/UX改善(1回目): ターゲット層（50〜70代以上の経営者・役員層）向けに、
 * 文字サイズ・行間、コントラスト、ボタンの押しやすさ、情報構造（分科会・申込ステップ）を見直した。
 * 補助テキストの色は共有トークン（--ui-text-secondary #666 / --ui-text-tertiary #999）を使わず、
 * 本ページ専用の --kf-muted（白背景でコントラスト比 約7.5:1、WCAG AA/AAA適合）に統一している。
 *
 * 2026-08-07 UI/UX改善(2回目): オーナーフィードバックにより、全体の文字サイズをさらに1〜2段階拡大。
 * また、参加申込ブロックを開催概要の直後に移動して申込導線を短縮し、フォーラムテーマを
 * 分科会紹介の直前に配置して「テーマ→分科会」が1つの流れに見えるよう再構成した。
 *
 * 2026-08-07 UI/UX改善(3回目): 灰色の背景ボックス・枠線を全体的に撤廃し、白背景+余白ベースの
 * 構成へ。日程プログラムを表からタイムライン形式へ刷新。締切・注記は「余白の中の強調要素」として
 * 際立たせることで、装飾を減らしつつ重要情報の視認性を上げる方針にした。
 *
 * Specificity note:
 * 親テーマ系の ui-framework.css に `#douyu-wrapper * { padding/margin/border: 0 }`
 * という id スコープのリセット (specificity 1,0,0) があり、本ページの `#kf-page` 配下の
 * 大半（`#douyu-wrapper` 内側）は素のクラスセレクタ (0,1,0) では負けて padding 等が
 * 潰れる（notice-banner.css と同じ回避パターン）。全セレクタに `:is(#douyu-wrapper, body)`
 * を前置して id 相当の specificity (1,1,0) を借りる。ヒーローエリアは #douyu-wrapper の
 * 外側だが、前置しても対象要素は変わらないため統一して付けている。
 */

:is(#douyu-wrapper, body) .kf-page {
    --kf-navy: #14284d;
    --kf-navy-light: #274a80;
    --kf-red: #a3243b;
    --kf-gold: #c9a961;
    --kf-muted: #4a5568;
    --kf-surface: #eef1f6;
    --kf-surface-border: #9fb0c2;
    --kf-shadow: rgba(11, 26, 51, 0.25);
    --kf-text: var(--ui-text-primary, #2c2c2c);
    --kf-max-width: var(--ui-container-max, 1200px);

    /* タイプスケール(6段階)。以後、font-size はこの変数からのみ指定する */
    --kf-fs-sm:   1.1rem;
    --kf-fs-base: 1.2rem;
    --kf-fs-md:   1.4rem;
    --kf-fs-lg:   1.7rem;
    --kf-fs-xl:   1.9rem;
    --kf-fs-2xl:  2.6rem;

    /* スペーシングスケール(8pxの倍数)。以後、レイアウトの余白はこの変数からのみ指定する */
    --kf-sp-1: 8px;
    --kf-sp-2: 16px;
    --kf-sp-3: 24px;
    --kf-sp-4: 32px;
    --kf-sp-6: 48px;
    --kf-sp-8: 64px;

    /* ここが実際に効いている基準値である（詳細度 1,1,0）。
       断面側の `#kf-page { font-size: ... }` は詳細度 1,0,0 で負けるため、
       断面ごとの本文サイズは要素セレクタ（p / li / th / td）を添えて指定している。

       font-size は 1.2rem = 19.2px。これを継承している要素は、読み上げ専用の
       非表示 h1（.kf-hero__sr-title）だけで、見えるテキストは全て個別指定を持つ。

       letter-spacing の 0.01em は、この19.2pxを基準に 0.192px として解決され、
       子要素にはその絶対値が継承される。したがって14pxの文字では相対的に広く、
       24pxの文字では狭くなる。基準サイズを変えると字送りも一緒に動くため、
       固定改行（分科会のテーマ・サブテーマ）の収まりを全幅で測り直すこと。 */
    font-family: var(--ui-font-family-main, "Noto Serif JP", serif);
    color: var(--kf-text);
    font-size: var(--kf-fs-base);
    line-height: 1.9;
    letter-spacing: 0.01em;
}

:is(#douyu-wrapper, body) .kf-page * {
    box-sizing: border-box;
}

/* ============ サイト共通の青緑帯の扱い ============ */
/* この帯(#main_content_header)は、非ログイン時は中身が空のニュースティッカーだけで、
   ヒーロー画像の真上に60pxの色帯として残る。フォーラムの配色(濃紺+ゴールド)と
   ぶつかるため、このページに限って消す。
   ただしログイン中の会員には、この帯の中に「マイページ/ログアウト」が描画されるため、
   その場合は帯を残し、背景色だけ濃紺に寄せる。 */

body:not(.logged-in) #main_content_header {
    display: none !important;
}

body.logged-in #main_content_header {
    background: #14284d !important; /* --kf-navy と同じ値 */
}

/* ============ 1. ヒーローエリア ============ */
/* デザイン画像(1200x600、比2:1)をそのまま使用。表示領域は画像の比率に合わせ、
   トリミングはしない(width:100%; height:auto)。見出し・日時・会場は画像内に
   含まれるため、視覚要素としては重複させず、アクセシビリティ用にのみ確保する。 */

:is(#douyu-wrapper, body) .kf-hero {
    line-height: 0; /* img前後の余白ゆれ防止 */
    /* #side_button(ログイン/お問い合わせの縦ボタン、幅60px)の逃げ。
       ただしこの指定は 769px以上のカンプ版ブロックが padding-right:0 で打ち消すため、
       現在どの画面幅でも効いていない（残置）。実際の逃げは器の max-width で作っている。 */
    padding-right: 76px;
}

/* 768px以下では右に浮くもの(#return_top・#side_button)が無いため、余白を戻す */
@media (max-width: 768px) {
    :is(#douyu-wrapper, body) .kf-hero {
        padding-right: 0;
    }

}

:is(#douyu-wrapper, body) .kf-hero__sr-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

:is(#douyu-wrapper, body) .kf-hero__image {
    display: block;
    width: 100%;
    height: auto;
}

/* ============ 共通コンテナ・見出し ============ */
/* セクションの区切りは枠線ではなく、余白(padding)と見出しのアクセントバーで表現する */

:is(#douyu-wrapper, body) .kf-container {
    max-width: var(--kf-max-width);
}

:is(#douyu-wrapper, body) .kf-section {
    padding: var(--kf-sp-8) 0;
}

:is(#douyu-wrapper, body) .kf-section__title {
    font-size: var(--kf-fs-xl);
    font-weight: 700;
    color: var(--kf-navy);
    text-align: center;
    margin: 0 0 var(--kf-sp-4);
    line-height: 1.5;
    position: relative;
    padding-bottom: 18px;
}

/* 見出し下の短いアクセントバー。フォーマル感を出すための装飾 */
:is(#douyu-wrapper, body) .kf-section__title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    background: var(--kf-gold);
    margin: var(--kf-sp-2) auto 0;
}

/* ============ 共通ボタン ============ */

:is(#douyu-wrapper, body) .kf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px 52px;
    background-color: var(--kf-red);
    color: #fff !important;
    font-weight: 700;
    font-size: var(--kf-fs-base);
    letter-spacing: 0.04em;
    text-decoration: none;
    border-radius: 999px;
    border: 2px solid transparent;
    box-shadow: 0 4px 12px var(--kf-shadow);
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    min-height: 48px;
}

/* URL未確定時の「準備中」表示。「壊れている」ではなく「これから使える」に見せる。サイトの配色に寄せる */
:is(#douyu-wrapper, body) .kf-button--disabled {
    background-color: #e7ebf1;
    color: var(--kf-navy) !important;
    border: 2px solid var(--kf-navy-light);
    box-shadow: none;
    cursor: default;
    pointer-events: none;
}

:is(#douyu-wrapper, body) .kf-button--disabled:hover {
    opacity: 1;
    transform: none;
    box-shadow: none;
}

:is(#douyu-wrapper, body) .kf-button::after {
    content: "\203A";
    font-weight: 700;
    font-size: 1.2em;
}

:is(#douyu-wrapper, body) .kf-button:hover,
:is(#douyu-wrapper, body) .kf-button:focus-visible {
    opacity: 0.92;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px var(--kf-shadow);
}

:is(#douyu-wrapper, body) .kf-button:focus-visible {
    outline: 3px solid var(--kf-gold);
    outline-offset: 3px;
}

:is(#douyu-wrapper, body) .kf-button--large {
    padding: 24px 68px;
    font-size: var(--kf-fs-md);
}

/* ============ 2. 開催概要 ============ */

:is(#douyu-wrapper, body) .kf-info-table {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    border-collapse: collapse;
    font-size: var(--kf-fs-base);
}

:is(#douyu-wrapper, body) .kf-info-table th,
:is(#douyu-wrapper, body) .kf-info-table td {
    padding: var(--kf-sp-2) var(--kf-sp-3);
    border-bottom: 1px solid var(--kf-surface-border);
    text-align: left;
}

:is(#douyu-wrapper, body) .kf-info-table th {
    width: 6.5em;
    color: var(--kf-navy);
    font-weight: 700;
    white-space: nowrap;
}

:is(#douyu-wrapper, body) .kf-theme-statement {
    text-align: center;
}

:is(#douyu-wrapper, body) .kf-theme-statement__title {
    font-size: var(--kf-fs-2xl);
    font-weight: 700;
    color: var(--kf-navy);
    margin: 0 0 var(--kf-sp-2);
    line-height: 1.35;
}

:is(#douyu-wrapper, body) .kf-theme-statement__lead {
    font-size: var(--kf-fs-base);
    color: var(--kf-text);
    margin: 0;
}

/* テーマ文から分科会一覧への橋渡しになるリード文 */
:is(#douyu-wrapper, body) .kf-sessions__lead {
    text-align: center;
    font-size: var(--kf-fs-md);
    font-weight: 700;
    color: var(--kf-navy);
    margin: 0 0 var(--kf-sp-4);
}

/* ============ 3. 参加申込（開催概要の直後に配置。ボックス装飾は使わず、
   余白と強調要素(ボタン・締切バッジ・注記)で情報の優先度を示す） ============ */

:is(#douyu-wrapper, body) .kf-apply-band {
    text-align: center;
}

/* ============ 4. 日程プログラム（タイムライン形式） ============ */

:is(#douyu-wrapper, body) .kf-day {
    max-width: 640px;
    margin: 0 auto;
}

:is(#douyu-wrapper, body) .kf-day + .kf-day {
    margin-top: var(--kf-sp-6);
}

:is(#douyu-wrapper, body) .kf-day__title {
    font-size: var(--kf-fs-md);
    font-weight: 700;
    color: var(--kf-navy);
    text-align: center;
    margin: 0 0 var(--kf-sp-4);
    padding-bottom: 14px;
    border-bottom: 2px solid var(--kf-navy);
}

:is(#douyu-wrapper, body) .kf-day__body {
    text-align: center;
    font-size: var(--kf-fs-base);
    font-weight: 700;
    color: var(--kf-navy);
    margin: 0 0 var(--kf-sp-1);
}


/* display:contents で <li> 自体は箱を作らず、time/marker/labelを
   直接 .kf-timeline の grid item にすることで、全行のtime列幅が揃い、
   マーカー同士がぴったり同じ縦位置に並ぶ */
:is(#douyu-wrapper, body) .kf-timeline {
    display: grid;
    grid-template-columns: auto 32px 1fr;
    list-style: none;
    margin: 0;
    padding: 0;
}

:is(#douyu-wrapper, body) .kf-timeline__item {
    display: contents;
}

:is(#douyu-wrapper, body) .kf-timeline__time {
    text-align: right;
    padding: var(--kf-sp-2) var(--kf-sp-3) var(--kf-sp-2) 0;
    font-weight: 700;
    color: var(--kf-navy);
    font-size: var(--kf-fs-sm);
    white-space: nowrap;
    align-self: center;
}

:is(#douyu-wrapper, body) .kf-timeline__marker {
    position: relative;
    width: 2px;
    align-self: stretch;
    justify-self: center;
    background: var(--kf-surface-border);
}

:is(#douyu-wrapper, body) .kf-timeline__marker::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--kf-gold);
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--kf-surface-border);
}

/* 最初と最後の項目は、ラインを外側にはみ出させない */
:is(#douyu-wrapper, body) .kf-timeline__item:first-child .kf-timeline__marker {
    background: linear-gradient(to bottom, transparent 0%, transparent 50%, var(--kf-surface-border) 50%, var(--kf-surface-border) 100%);
}

:is(#douyu-wrapper, body) .kf-timeline__item:last-child .kf-timeline__marker {
    background: linear-gradient(to bottom, var(--kf-surface-border) 0%, var(--kf-surface-border) 50%, transparent 50%, transparent 100%);
}

:is(#douyu-wrapper, body) .kf-timeline__label {
    align-self: center;
    padding: var(--kf-sp-2) 0 var(--kf-sp-2) var(--kf-sp-3);
    font-size: var(--kf-fs-base);
}

/* 開会式・懇親会は強調ドット(ゴールド・やや大きめ)で視覚的な強弱をつける */


/* ============ 6. フォーラムテーマ ～ 分科会紹介（1つの流れとして構成） ============ */

:is(#douyu-wrapper, body) .kf-theme-sessions .kf-theme-statement {
    max-width: 760px;
    margin: 0 auto var(--kf-sp-6);
}

:is(#douyu-wrapper, body) .kf-session-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--kf-sp-2);
}

/* カード自身は「回転の軸」だけを担い、見た目（背景・枠・影・余白）は
   表裏の面（.kf-session-card__face）が持つ。 */
:is(#douyu-wrapper, body) .kf-session-card {
    list-style: none;
    position: relative;
    perspective: 1600px;
}

/* ---- 裏返しの仕組み ----
   PC・スマートフォンで値が同じなので、断面を分けずここでまとめて定義する。 */
:is(#douyu-wrapper, body) .kf-session-card__inner {
    position: relative;
    transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}

:is(#douyu-wrapper, body) .kf-session-card.is-flipped .kf-session-card__inner {
    transform: rotateY(180deg);
}

:is(#douyu-wrapper, body) .kf-session-card__face {
    background-color: #fff;
    border: 1px solid #555;
    border-radius: 12px;
    box-shadow: 5px 5px 6px rgba(0, 0, 0, .22);
    padding: 25px;
    text-align: left;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 裏面は表面に重ねる。高さは表面が決めるため、裏面は表面より短くなる前提。
   将来 概要 が伸びて収まらなくなった場合は裏面の中でスクロールする。 */
:is(#douyu-wrapper, body) .kf-session-card__face--back {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    transform: rotateY(180deg);
    overflow: auto;
}

/* 半分回ったところ（0.3秒後）で、見えていない面を読み上げ・タブ移動の対象から外す */
:is(#douyu-wrapper, body) .kf-session-card.is-flipped .kf-session-card__face--front,
:is(#douyu-wrapper, body) .kf-session-card:not(.is-flipped) .kf-session-card__face--back {
    visibility: hidden;
    transition: visibility 0s .3s;
}

:is(#douyu-wrapper, body) .kf-session-card.is-flipped .kf-session-card__face--back,
:is(#douyu-wrapper, body) .kf-session-card:not(.is-flipped) .kf-session-card__face--front {
    visibility: visible;
    transition: visibility 0s .3s;
}

/* カード全面を覆う操作ボタン。読み上げ用の文言だけを持ち、見た目は透明。 */
:is(#douyu-wrapper, body) .kf-session-card__toggle {
    position: absolute;
    inset: 0;
    z-index: 2;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 12px;
    cursor: pointer;
    color: transparent;
    font-size: 0;
}

:is(#douyu-wrapper, body) .kf-session-card__toggle:focus-visible {
    outline: 3px solid var(--kf-red);
    outline-offset: 3px;
}

:is(#douyu-wrapper, body) .kf-session-card:hover .kf-session-card__face {
    box-shadow: 7px 7px 10px rgba(0, 0, 0, .26);
}

/* 裏面の見出しと概要 */
:is(#douyu-wrapper, body) .kf-session-card__back-label {
    margin: 0 0 var(--kf-sp-2);
    padding-left: 12px;
    border-left: 3px solid var(--kf-gold);
    font-weight: 700;
}

:is(#douyu-wrapper, body) .kf-session-card__summary {
    margin: 0;
    flex: 1 1 auto;
}

/* 「概要を見る」「とじる」。押せることを示す唯一の手がかりなので必ず出す。
   記号は文字（↻など）では明朝体で字形が崩れるため、CSSの三角形で描く。

   色は濃紺。金（#c9a961）は白地で 2.25:1 しかなく、WCAG AA（4.5:1）にも
   アイコンの基準（3:1）にも届かない（実測で検出）。
   このページの色の役割は 金＝塗り・罫線／赤＝締切と注意／濃紺＝見出しと強調 であり、
   赤を使うと「締切」の合図に見えてしまうため、濃紺を採る。 */
:is(#douyu-wrapper, body) .kf-session-card__hint {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin: var(--kf-sp-2) 0 0;
    font-weight: 700;
    color: var(--kf-navy);
    letter-spacing: 0;
}

:is(#douyu-wrapper, body) .kf-session-card__hint::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 7px solid currentColor;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

:is(#douyu-wrapper, body) .kf-session-card__face--back .kf-session-card__hint {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

:is(#douyu-wrapper, body) .kf-session-card__face--back .kf-session-card__hint::after {
    border-left: 0;
    border-right: 7px solid currentColor;
}

/* 端末側で「動きを減らす」設定がされている場合は回転させず、その場で入れ替える */
@media (prefers-reduced-motion: reduce) {
    :is(#douyu-wrapper, body) .kf-session-card__inner {
        transition: none;
    }

    :is(#douyu-wrapper, body) .kf-session-card.is-flipped .kf-session-card__inner {
        transform: none;
    }

    :is(#douyu-wrapper, body) .kf-session-card__face--back {
        transform: none;
    }
}

:is(#douyu-wrapper, body) .kf-session-card__head {
    margin: 0 0 var(--kf-sp-2);
}

:is(#douyu-wrapper, body) .kf-session-card__committee {
    margin: 0;
    font-size: var(--kf-fs-sm);
    color: var(--kf-muted);
}

:is(#douyu-wrapper, body) .kf-session-card__title {
    margin: 0 0 var(--kf-sp-1);
    font-size: var(--kf-fs-base);
    font-weight: 700;
    text-wrap: pretty;
}

:is(#douyu-wrapper, body) .kf-session-card__subtitle {
    margin: 0 0 var(--kf-sp-2);
    color: var(--kf-muted);
    font-size: var(--kf-fs-sm);
}

:is(#douyu-wrapper, body) .kf-session-card__people {
    margin: 0 0 var(--kf-sp-2);
}

:is(#douyu-wrapper, body) .kf-deadline {
    text-align: center;
    font-size: var(--kf-fs-md);
    font-weight: 700;
    display: block;
    width: fit-content;
    margin: var(--kf-sp-4) auto 0;   /* 上に32px。どこに置いても同じ間隔になる */
    padding: var(--kf-sp-2) var(--kf-sp-6);
    background-color: var(--kf-navy);
    color: #fff;
    border-radius: 8px;   /* 999px から変更。スマホ側(480px)の指定と同じ形にそろう */
    box-shadow: 0 6px 16px var(--kf-shadow);
}

:is(#douyu-wrapper, body) .kf-deadline strong {
    color: var(--kf-gold);
    font-size: 1.15em;
}

/* 参加申込ブロック内の強調要素は、縁をそろえて1つのまとまりに見せる */
:is(#douyu-wrapper, body) .kf-apply-band .kf-button,
:is(#douyu-wrapper, body) .kf-apply-band .kf-deadline {
    width: 100%;
    max-width: 560px;
}

/* ============ 8. お問い合わせ ============ */

:is(#douyu-wrapper, body) .kf-contact__body {
    margin: 0;
    font-size: var(--kf-fs-base);
    line-height: 1.9;
    text-align: center;
}

/* 電話・メールのリンク。指でタップしやすいよう高さを44px以上確保する */
:is(#douyu-wrapper, body) .kf-contact__link {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    color: var(--kf-navy);
    font-weight: 700;
    text-decoration: underline;
}

/* スマートフォン実機(body.mobile_device)では電話番号がタップ発信できるため、
   リンクだと分かるよう下線を戻す。親テーマの !important に勝つ必要がある。 */
body.mobile_device :is(#douyu-wrapper, body) .kf-contact__link[href^="tel:"] {
    text-decoration: underline !important;
}

/* ================================================================
   スマートフォン版（768px以下 / 2026-08-09 設計）
   PC版カンプの設計原理を、1カラムへ翻訳して適用する。

   カンプから引き継いだ原理:
     1. 色は役割で固定
        金 #C9A961 = 参加の価値（申込ボタン）
        赤 #AA2C3D = 期限の警告（申込締切。白地＋赤枠）
        濃紺 #092A62 = 構造（見出し・罫線）
        ※金地に白文字はコントラスト2.25:1で不適。濃紺文字（6.48:1）にする
     2. 縦の寸法は25pxの倍数（罫線の太さ5pxは「装飾」として高さに数えない）
     3. 左揃え基準。画面の左右余白は25pxで固定し、全セクションの左端をそろえる
     4. 見出しは「左に見出し語＋右へ伸びる濃紺の太罫線5px」で統一

   1カラムへの畳み方（PC版の2カラム4箇所）:
     開催概要   見出し左 + 表右      → 見出しの下に表
     参加申込   QR列 + ボタン列      → ボタン群 → QRの縦順（導線を先に置く）
     日程       1日目 + 2日目        → 1日目の下に2日目
     分科会     カード2列            → カード1列

   縦の刻みについての補足:
     表・タイムラインなど「短い値が並ぶ箇所」は行送りを25pxにして25px刻みに乗せる。
     長文（カード本文・注記）は読みやすさを優先し、行送り1.7〜1.9の自然な高さとする。
     25pxの倍数で管理するのは、ブロックどうしの間隔と、ボタン・バッジの実寸。
   ================================================================ */

@media (max-width: 768px) {

    /* ---------- 配色・基準の文字サイズ ---------- */
    #kf-page {
        --c-navy: #092A62;
        --c-gold: #C9A961;
        --c-red:  #AA2C3D;
        --c-sub:  #6b6b6b;   /* カンプは #8a8a8a だが白地で3.25:1 とWCAG AA(4.5:1)を下回るため濃くした */
        --sp-gutter: 25px;   /* 画面の左右余白。全セクションの左端をそろえる基準 */

        /* セクションどうしの縦の間隔。スマートフォンではこの1種類だけを使う。
           2026-08-20: 75px → 50px（オーナー様のご指示）。25pxの倍数。
           間隔は各セクションが自分の margin-top で持つ（下記の「セクションどうしの間隔」を参照）。 */
        --kf-section-gap: 50px;
    }

    /* 本文は17px。PC版カンプが16px基準で、小さい画面では相対的に読みにくくなるため1px上げている。
       ここを `#kf-page` にまとめて書くと効かない。基底層の
       `:is(#douyu-wrapper, body) .kf-page`（詳細度 1,1,0）が
       font-size / line-height / color / letter-spacing を持っており、
       `#kf-page`（詳細度 1,0,0）では勝てないため。要素セレクタを添えた下記が効いている。
       （2026-08-18、効いていない font-size:17px / line-height / color を撤去した） */

    #kf-page p,
    #kf-page li,
    /* 本文サイズは要素をまとめて指定せず、PC断面と同じく部品ごとに当てる。
       以前は `p / li / th / td` に17pxを一括で指定していたが、
       実際に効いていたのは開催概要の表だけで（他は個別指定を持つ）、
       しかも430px幅で表があふれていた（必要385px / 器380px）。
       16pxにするとあふれが解消し、360px以上の全幅で成立する（実測）。 */
    #kf-page .kf-info-table th,
    #kf-page .kf-info-table td {
        font-size: 18px;
    }

    /* ---------- ヒーロー ---------- */
    /* 画面いっぱいに置く。下の余白50pxはPC版と同じ */
    #kf-page .kf-hero {
        padding-right: 0;
        margin-bottom: 50px;
    }

    #kf-page .kf-hero__image {
        display: block;
        width: 100%;
        height: auto;
    }

    /* ---------- セクションの器 ---------- */
    /* テーマ側の箱は横方向の制約を解除し、左右の余白は #douyu-wrapper 1箇所で作る。
       こうすると全セクションの左端が必ず25pxで一致する（左揃え基準） */
    #kf-page #page_contents,
    #kf-page .post_content {
        max-width: none;
        width: auto;
        margin: 0;
        padding: 0;
    }

    #kf-page #douyu-wrapper {
        max-width: none;
        width: auto;
        margin: 0;
        padding: 0 var(--sp-gutter);
        background: none;
        border-radius: 0;
        box-shadow: none;
    }

    #kf-page .kf-section {
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
        text-align: left;
    }

    /* ---------- セクションどうしの間隔 ----------
       間隔は「後ろのセクションが自分の margin-top で持つ」の1本に統一する。
       開催概要はヒーロー直後（間隔はヒーローの margin-bottom 50px が持つ）のため対象外。
       2026-08-20: 以前は削除済みのCTAボタン帯が padding で前後の間隔を肩代わりしており、
       フォーラムテーマ・お問い合わせだけ間隔が 0px になっていた。持ち主を一本化して解消。 */
    #kf-page #kf-apply,
    #kf-page #kf-schedule,
    #kf-page #kf-sessions,
    #kf-page #kf-contact-section {
        margin-top: var(--kf-section-gap);
    }

    /* ---------- 共通: 見出し（左に見出し語＋右へ伸びる太罫線5px） ---------- */
    #kf-page .kf-section__title {
        display: flex;
        align-items: center;
        gap: 20px;
        height: 50px;
        margin: 0 0 25px;
        padding: 0;
        font-size: 24px;
        font-weight: 700;
        line-height: 1;
        color: var(--c-navy);
        text-align: left;
        white-space: nowrap;
    }

    #kf-page .kf-section__title::after {
        content: "";
        display: block;
        flex: 1 1 auto;
        width: auto;
        height: 5px;
        margin: 0;
        background: var(--c-navy);
    }

    /* 「1日目｜」の表記は、SPでは1日目と2日目が縦に並ぶため残す（PC幅では隠す） */

    /* ---------- 1. 開催概要 ---------- */
    /* PC版は上下を太罫線で挟む。SPでは見出しの罫線が上罫線を兼ね、表の下に太罫線を引く */
    #kf-page #kf-overview {
        padding-bottom: 25px;
        border-bottom: 5px solid var(--c-navy);
    }

    #kf-page .kf-info-table {
        width: 100%;
        max-width: none;
        margin: 0;
        border-collapse: collapse;
    }

    /* 行送り25px＋上下12.5pxの余白で、1行の行は50px・2行の行は75pxになる */
    #kf-page .kf-info-table th,
    #kf-page .kf-info-table td {
        padding: 12.5px 0;
        border: none;
        line-height: 25px;
        text-align: left;
        vertical-align: top;
    }

    #kf-page .kf-info-table tr:not(:last-child) th,
    #kf-page .kf-info-table tr:not(:last-child) td {
        border-bottom: 1px solid #000;
    }

    #kf-page .kf-info-table th {
        width: 4.5em;
        color: var(--c-navy);
        font-weight: 700;
        white-space: nowrap;
    }

    /* 2026-08-21: 本文の色を明示した。
       指定が無いと基底層の --kf-text（#2c2c2c）を拾い、
       ページの他の本文（#000）とわずかに違う色になっていた。 */
    #kf-page .kf-info-table td {
        color: #000;
    }

    /* ---------- 2. 参加申込 ---------- */
    /* 縦順は「金ボタン → 締切 → 注記」。1カラムの表示順を
       「案内文 → QR → ボタン → 締切 → 注記」にそろえるため、
       HTMLの順序（注記が先）は変えずに order だけで入れ替える。
       ブロック全体は中央に置く（2026-08-20 のご指示）。 */
    #kf-page .kf-apply__right {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 350px;   /* PC版と同じ実寸。横に広い端末でも間延びさせない */
        margin-left: auto;
        margin-right: auto;
    }

    /* 申込ボタン: 金べた塗り＋濃紺文字。ページでただ1つの「参加の価値」の色 */
    #kf-page .kf-apply-band .kf-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: none;
        height: 100px;
        min-height: 0;
        margin: 0;
        padding: 0;
        background: var(--c-gold);
        color: var(--c-navy) !important;
        border: none;
        border-radius: 8px;
        box-shadow: 4px 4px 0 rgba(0, 0, 0, .25);
        font-size: 21px;
        font-weight: 700;
    }

    #kf-page .kf-apply-band .kf-button::after {
        content: "\2192";
        font-size: 1em;
    }

    /* 申込締切: 白地＋赤枠。赤は「期限の警告」にだけ使う */
    #kf-page .kf-apply-band .kf-deadline {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: none;
        height: 100px;
        margin: 25px 0 0;
        padding: 0;
        background: #fff;
        color: var(--c-red);
        border: 2px solid var(--c-red);
        border-radius: 20px;
        box-shadow: none;
        font-size: 21px;
        font-weight: 700;
        white-space: nowrap;
    }

    #kf-page .kf-deadline strong {
        color: var(--c-red);
        font-size: 1em;
    }

    /* ---------- 3. 日程プログラム ---------- */
    /* 2026-08-24: 末尾の太罫線（5px）を削除した（同友会様のご指示）。
       あわせて、太罫線に縦線が接触しないために置いていた下の余白50pxも撤去した。
       罫線が無くなったため、この余白は行き先のない余白になる。
       セクションどうしの区切りは、後ろのセクションの margin-top（--kf-section-gap）が持つ。 */

    #kf-page #kf-schedule .kf-day {
        max-width: none;
        margin: 0;
    }

    /* 2026-08-22: 50px→75px。コースとコースの間が50pxなので、
       日と日はそれより広くしないと、どこで日が変わったのか分からなくなる。 */
    #kf-page #kf-schedule .kf-day + .kf-day {
        margin-top: 75px;
    }

    #kf-page .kf-day__title {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        margin: 0 0 25px;
        padding: 0;
        border: 1px solid var(--c-navy);
        font-size: 21px;
        font-weight: 700;
        color: var(--c-navy);
        text-align: center;
    }

    /* 時刻列 / マーカー列 / 内容列。1行の高さは50px（25pxの倍数）

       時刻列は 110px → 105px（2026-08-20）。詰めた5pxは内容列に回る。
       最長の時刻「12:00 – 12:30」は15pxで実測97.5pxなので、105pxでも7.5pxの余裕がある。
       内容列の折り返し対策（下の font-size を参照）と組みで効かせている。 */
    #kf-page .kf-timeline {
        display: grid;
        grid-template-columns: 105px 25px 1fr;
        margin: 0;
        padding: 0;
    }

    #kf-page .kf-timeline__item {
        display: contents;
    }

    /* nowrap のため、上げると升目から横にあふれる恐れがある。
       16pxで320〜768pxのすべてを実測し、あふれ・ラベルとの重なりが無いことを確認済み。 */
    #kf-page .kf-timeline__time {
        height: 50px;
        padding: 0;
        line-height: 50px;
        font-size: 15px;
        text-align: right;
        color: var(--c-navy);
        white-space: nowrap;
    }

    /* 内容列は 18px → 15px（2026-08-20、統一段階の「最小」）。
       「各分科会にて2次会開催」が18pxだと画面幅389px以下で2行になり、
       行の高さが50px固定のため2行目が升目から38pxはみ出していた。

       15px＋時刻列105pxで、2行になる画面幅は352px以下まで下がる。
       主要デバイスの下限とみなす360px（Android標準）で余裕8.0px。
       320px（iPhone SE 第1世代）は15pxでも収まらないが、対象外とするご判断。 */
    #kf-page .kf-timeline__label {
        height: 50px;
        padding: 0 0 0 12px;
        line-height: 50px;
        font-size: 15px;
        color: #000;
    }

    #kf-page .kf-timeline__marker {
        background: #b9c4d4;
    }

    #kf-page .kf-timeline__marker::before {
        width: 12px;
        height: 12px;
        background: var(--c-gold);
        border: 2px solid #fff;
        box-shadow: none;
    }

    /* 開会式・懇親会は金の大きめドットで強弱をつける（PC版と同じ） */


    #kf-page .kf-day__body {
        margin: 0 0 12px;
        font-size: 18px;
        font-weight: 700;
        color: var(--c-navy);
        text-align: left;
    }

    /* 2026-08-20: 語の途中で切らない指定を追加。
       文言を「エクスカーションの詳細は24日公開予定で準備中です。…」に変えたところ、
       360〜390pxで「公開予／定で」「準備中／です」のように単語の真ん中で切れていた。
       カードのテーマ・人物欄と同じ扱いにそろえる。 */

    /* ---------- 3-2. エクスカーション（2日目・A〜Cコース） ----------
       文字サイズはPC断面と同じ4段（24 / 21 / 18 / 15px）だけを使う。
       この案件はPCとSPで段が共通である（基準サイズだけが違うページとは違う）。

       2026-08-22 追加。スマートフォンでは「コース名 → 紹介文 → 参加の条件 → 行程」を縦に積む。 */
    /* 余白の段（PC断面と同じ考え方）: コースの中25px / コースとコース50px / ご案内の前50px */
    #kf-page .kf-course + .kf-course {
        margin-top: 25px;
        padding-top: 25px;
        border-top: 1px solid #b9c4d4;
    }
    #kf-page .kf-course__head {
        display: flex;
        align-items: baseline;
        gap: 12px;
        flex-wrap: wrap;
        margin: 0 0 25px 0;
    }
    /* 文字色 #8a6d2f は白地で4.9:1。明るい金を文字色に使ってはならない（2.2:1） */
    #kf-page .kf-course__badge {
        flex: none;
        padding: 3px 12px;
        border: 1px solid var(--c-gold);
        background: #fdfaf3;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.08em;
        color: #8a6d2f;
    }
    #kf-page .kf-course__name {
        margin: 0;
        font-size: 21px;   /* 理由はPC断面の同じ箇所を参照（日付見出しとの階層の逆転を避ける） */
        font-weight: 700;
        line-height: 1.5;
        color: var(--c-navy);
        word-break: auto-phrase;
    }
    #kf-page .kf-course__lead {
        margin: 0 0 25px 0;
        font-size: 18px;
        line-height: 1.9;
        color: #000;
        word-break: auto-phrase;
    }
    #kf-page .kf-course__body { display: block; }
    /* 2026-08-24: 参加費と定員を横並びにした（縦並びから変更）。
       dt/dd が交互に並ぶ定義リストなので、行（1段目=項目名 / 2段目=値）と列を明示して置く。
       列は max-content（文字の実寸）で作る。等分（1fr）にすると、769px断面で
       「最少催行人数・定員」の余裕が0.6pxしか無く、フォントのわずかな違いで折り返す。 */
    #kf-page .kf-course__facts dl {
        display: grid;
        grid-template-columns: max-content max-content;
        column-gap: 25px;
        margin: 0 0 25px 0;
    }
    #kf-page .kf-course__facts dl dt:nth-of-type(1) { grid-area: 1 / 1; }
    #kf-page .kf-course__facts dl dd:nth-of-type(1) { grid-area: 2 / 1; }
    #kf-page .kf-course__facts dl dt:nth-of-type(2) { grid-area: 1 / 2; }
    #kf-page .kf-course__facts dl dd:nth-of-type(2) { grid-area: 2 / 2; }
    #kf-page .kf-course__facts dt {
        margin: 0 0 2px 0;
        font-size: 15px;
        font-weight: 400;
        color: var(--c-navy);
    }
    #kf-page .kf-course__facts dd {
        margin: 0;   /* 2026-08-24: 下の25pxは dl 側へ移した（横並びの2列を離さないため） */
        font-size: 21px;
        font-weight: 700;
        color: var(--c-navy);
    }
    #kf-page .kf-course__included {
        margin: 0;
        padding: 12px 14px;
        background: #eef1f6;
        border-left: 3px solid var(--c-gold);
        font-size: 15px;
        line-height: 1.8;
        color: #000;
        word-break: auto-phrase;
    }
    #kf-page .kf-course__included b {
        display: block;
        margin-bottom: 2px;
        font-size: 15px;
        font-weight: 700;
        color: var(--c-navy);
    }

    /* 行程。行の高さは中身に合わせる（固定すると折り返した地名が次の行と重なる。知見No.115） */
    /* 列幅は1日目のタイムラインと同じ 105px / 25px にそろえる（理由はPC断面を参照） */
    #kf-page .kf-timeline--course {
        grid-template-columns: 105px 25px 1fr;
        margin-top: 25px;
    }
    /* align-self は start にする（理由はPC断面の同じ箇所を参照） */
    /* 行の高さは1日目と同じ50px（行間26px＋上下12px）。1行目の中央は25pxで点と一致する */
    #kf-page .kf-timeline--course .kf-timeline__time {
        height: auto;
        padding: 12px 0;
        line-height: 26px;
        font-size: 15px;
        align-self: start;
    }
    #kf-page .kf-timeline--course .kf-timeline__label {
        height: auto;
        padding: 12px 0 12px 12px;
        line-height: 26px;
        font-size: 15px;
        word-break: auto-phrase;
        align-self: start;
    }
    #kf-page .kf-timeline--course .kf-timeline__marker::before { top: 25px; }
    #kf-page .kf-timeline--course .kf-timeline__item:first-child .kf-timeline__marker {
        background: linear-gradient(to bottom, transparent 0 25px, #b9c4d4 25px 100%);
    }
    #kf-page .kf-timeline--course .kf-timeline__item:last-child .kf-timeline__marker {
        background: linear-gradient(to bottom, #b9c4d4 0 25px, transparent 25px 100%);
    }

    /* 3コース共通のご案内 */
    /* 2026-08-24: 塗枠上部の罫線装飾（3px）を削除した。
       セクション末尾の太罫線を外したため、これだけ残すと section 内で最も強い線になり、
       ここが区切りに見えてしまう。塗り（#eef1f6）だけで囲いの役目は足りる。 */
    #kf-page .kf-excursion-notes {
        margin: 50px 0 0 0;
        padding: 20px 16px;
        background: #eef1f6;
    }
    #kf-page .kf-excursion-notes__title {
        margin: 0 0 14px 0;
        font-size: 18px;
        font-weight: 700;
        color: var(--c-navy);
    }
    #kf-page .kf-excursion-notes__list {
        margin: 0 0 20px 0;
        padding-left: 1.2em;
        list-style: disc;
    }
    #kf-page .kf-excursion-notes__list li {
        font-size: 15px;
        line-height: 1.85;
        color: #000;
        word-break: auto-phrase;
    }
    #kf-page .kf-excursion-notes__subtitle {
        margin: 0 0 10px 0;
        font-size: 15px;
        font-weight: 700;
        color: var(--c-navy);
    }
    #kf-page .kf-cancel-wrap { overflow-x: auto; }
    /* 最小幅は持たせない。360px幅では表の横スクロールが出ないよう、セル内で折り返す */
    #kf-page .kf-cancel {
        width: 100%;
        border-collapse: collapse;
        background: #fff;
        font-size: 15px;
    }
    #kf-page .kf-cancel th,
    #kf-page .kf-cancel td {
        border: 1px solid #b9c4d4;
        padding: 6px 8px;
        text-align: left;
        color: #000;
        word-break: auto-phrase;
    }
    #kf-page .kf-cancel th {
        background: #dfe5ee;
        color: var(--c-navy);
        font-weight: 700;
    }

    /* ---------- 5. フォーラムテーマ 〜 分科会 ---------- */
    /* 上の間隔は「セクションどうしの間隔」でまとめて持つ（--kf-section-gap）。
       セクション自身の内側の余白は持たせない */
    #kf-page #kf-sessions {
        padding-top: 0;
    }

    #kf-page .kf-theme-sessions .kf-theme-statement {
        max-width: none;
        margin: 0 0 25px;
        text-align: left;
    }

    #kf-page .kf-theme-statement__title {
        margin: 0 0 10px;
        font-size: 24px;
        font-weight: 700;
        line-height: 1.4;
        color: var(--c-navy);
    }

    /* 2026-08-20: 18px（標準）→ 21px（強調）へ1段階上げた */
    #kf-page .kf-theme-statement__lead {
        margin: 0;
        font-size: 21px;
        line-height: 1.5;
        color: #000;
    }

    /* 2026-08-20: 18px（標準）→ 21px（強調）へ1段階上げた */
    #kf-page .kf-sessions__lead {
        margin: 0 0 25px;
        font-size: 21px;
        font-weight: 700;
        color: var(--c-navy);
        text-align: left;
    }

    /* 分科会カード: 1列。高さは内容にあわせ、間隔は25px */
    #kf-page .kf-session-list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
        margin: 0;
        padding: 0;
        max-width: none;
    }

    /* 見た目は面（__face）が持つ。カードは回転の軸のみ。 */
    #kf-page .kf-session-card {
        display: block;
        height: auto;
        margin: 0;
    }

    /* 2026-08-21: 色を明示した。
       指定が無いと基底層の --kf-navy（#14284d）を拾い、
       ページの他の濃紺（--c-navy #092A62）とわずかに違う紺になっていた。 */
    #kf-page .kf-session-card__hint {
        font-size: 15px;
        color: var(--c-navy);
    }

    #kf-page .kf-session-card__back-label,
    #kf-page .kf-session-card__summary {
        line-height: 1.9;
        color: #000;
    }

    #kf-page .kf-session-card__back-label { font-size: 15px; }

    /* 概要は16px。1列になると裏面の使える高さが減るため、そのままでは
       最も長い第5分科会（174文字）が360〜390pxであふれる。次の2点で収めている。
         - 行送りを1.9→1.7（段落として妥当な範囲。ページ内の他所でも1.7を使用）
         - 裏面の見出しと案内の余白を16px→8px（下記。裏面だけに限定し表面は変えない）
       360px以上の全幅で収まることを実測で確認済み（320pxは従来どおり未対応）。 */
    #kf-page .kf-session-card__summary {
        font-size: 18px;
        line-height: 1.7;
    }

    #kf-page .kf-session-card__back-label { margin-bottom: 8px; }

    #kf-page .kf-session-card__face--back .kf-session-card__hint { margin-top: 8px; }

    /* 委員会・委員長。カードの最初に置く2行の見出し。
       金の短い罫線を左に添えて、テーマ本体と役割を分ける。 */
    /* 2026-08-20: 下の余白 25px → 15px。左の12pxは罫線からの距離で横方向のため据え置き。 */
    #kf-page .kf-session-card__head {
        margin: 0 0 15px;
        padding-left: 12px;
        border-left: 3px solid var(--c-gold);
    }

    /* ① 分科会ナンバー＋委員会名: 21px（強調）→ 24px（見出し）へ1段階拡大（2026-08-20） */
    #kf-page .kf-session-card__committee {
        margin: 0;
        line-height: 1.7;
        font-size: 24px;
    }

    /* スマートフォンでは、分科会ナンバーと委員会名を2段に分ける。
       1段に置くと「第3分科会 産業集積くまもと未来委員会」（18文字）が
       360〜375px幅で折り返し、そのカードだけ背が高くなるため。
       2段にすれば、いちばん長い委員会名でも320px幅まで1行に収まる。 */
    #kf-page .kf-session-card__no,
    #kf-page .kf-session-card__cname {
        display: block;
        font-weight: 700;
        color: var(--c-navy);
    }

    /* 座長・副座長。見出しとのあいだに細い罫線を引いて、所属の表示と登壇者を切り分ける。
       3行目に座長、4行目に副座長を置く。2段にすることで、氏名の長さに関係なく
       5枚のカードがすべて同じ行数になる（1行に並べると幅次第で折り返しがばらつく）。 */
    /* 役職名の欄は max-content で組む。em で幅を決め打ちすると、字送りのぶんだけ
       あふれて「副座長：」が2行に割れる（実測で発生）。 */
    /* 2026-08-20: 上下の余白 25px → 15px。文字は②で18px → 15px。 */
    #kf-page .kf-session-card__people {
        display: grid;
        grid-template-columns: max-content 1fr;
        column-gap: 4px;
        margin: 0 0 15px;
        padding-top: 15px;
        border-top: 1px solid #d9dee6;
        font-size: 15px;
        line-height: 1.7;
    }

    /* 役職と氏名を、親のグリッドの升目に直接置く */
    #kf-page .kf-session-card__person {
        display: contents;
    }

    /* 「座　長：」は全角スペースを挟んで「副座長：」と同じ4文字にそろえている（均等割り）。
       同じ幅になるため右寄せは不要で、左端・「：」の位置・氏名の左端がすべてそろう。 */
    #kf-page .kf-session-card__role {
        white-space: nowrap;
        font-weight: 700;
        color: var(--c-navy);
    }

    #kf-page .kf-session-card__name {
        font-weight: 700;
        color: #000;
    }

    /* 「分科会テーマ」ラベル（2026-08-20 / 報告資料30の案3）

       同友会様より「分科会テーマが分科会テーマであると、一般の人には分からないのでは」
       とのご指摘。ページ上部のセクション見出しが「フォーラムテーマ」で、
       カードの中にも無ラベルの「テーマ」があり、2種類のテーマが並んでいた。

       人物欄の上と同じ1pxの横罫線で区切り、その下にラベルを置く。
       これでカードが「委員会名 / 登壇者 / テーマ」の3つのまとまりになり、
       同じ区切り方が2回くり返される形になる。

       上の15pxは人物欄の margin-bottom(15px) と重なって15pxにまとまる（マージンの相殺）。
       罫線の下も15px空けるため、文字と文字の間は 15＋1＋15＝31px になる。

       金の縦棒（見出し部・裏面の見出しで使用）は増やさない方針とした。
       金は申込ボタンで「参加の価値」を示す色でもあり、増やすほど意味が薄まるため。 */
    #kf-page .kf-session-card__theme-label {
        margin: 15px 0 5px;
        padding-top: 15px;
        border-top: 1px solid #d9dee6;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.7;
        color: var(--c-navy);
    }

    /* テーマ・サブテーマは、幅にあわせて自然に折り返す。
       2026-08-20 の整理でこの形にした。それ以前は次の2つを併用していた。

         - <span> で改行位置を固定する
         - テーマ欄に3行分の高さを予約する（min-height）

       どちらも「5枚のカードの高さをそろえる」ためのもので、カードが2列だった時期の制約。
       ⑩でPCも1列になり、5枚が横に並ぶことは無くなったため役目を終えていた。
       実際、予約しても人物欄の折り返しがカードごとに違うため高さはそろっておらず、
       テーマが2行のカード（4枚）に34〜41pxの空きだけが残っていた。

       固定改行をやめたことで、画面幅ごとに文字サイズを下げる必要も無くなり、
       テーマ24px・サブ21pxの1通りに統一できた（従来は幅により4通り）。 */
    #kf-page .kf-session-card__title {
        margin: 0 0 5px;   /* 2026-08-20: 12px → 5px */
        font-size: 24px;
        font-weight: 700;
        line-height: 1.7;
        color: var(--c-navy);
        word-break: auto-phrase;   /* 語の途中で切れないようにする */
    }

    /* ④ サブテーマ: 18px（標準）→ 21px（強調）へ1段階拡大（2026-08-20） */
    #kf-page .kf-session-card__subtitle {
        margin: 0;
        font-size: 21px;
        line-height: 1.7;
        color: #000;
        word-break: auto-phrase;
    }

    /* ---------- 6. お問い合わせ ---------- */
    /* 申込導線とは独立した参照情報。ここだけはPC版と同じ中央揃え＋金の短い下線にする */
    /* 上の間隔は「セクションどうしの間隔」でまとめて持つ（--kf-section-gap）。
       下はページ末尾の余白。PC断面とそろえて、こちらも同じ値にする */
    #kf-page #kf-contact-section {
        padding: 0 0 var(--kf-section-gap);
        text-align: center;
    }

    #kf-page #kf-contact-section > .kf-section__title {
        display: block;
        height: auto;
        margin: 0 auto 12px;
        padding-bottom: 10px;
        font-size: 18px;
        text-align: center;
        white-space: normal;
    }

    #kf-page #kf-contact-section > .kf-section__title::after {
        display: block;
        width: 85px;
        height: 2px;
        margin: 10px auto 0;
        background: var(--c-gold);
        flex: none;
    }

    /* 2026-08-21: 本文の色を明示した。
       指定が無いと基底層の --kf-text（#2c2c2c）を拾い、
       ページの他の本文（#000）とわずかに違う色になっていた。 */
    #kf-page .kf-contact__body {
        margin: 0;
        font-size: 18px;
        line-height: 2.2;
        text-align: center;
        color: #000;
    }

    /* 電話・メールはタップ対象。44pxの高さと下線は維持する */
    #kf-page .kf-contact__link {
        display: inline-block;
        min-height: 44px;
        line-height: 44px;
        color: var(--c-navy);
        font-weight: 700;
        text-decoration: underline;
    }

    /* ================================================================
       2026-08-20 同友会様のご要望による変更
       ================================================================ */

    /* ① 開催概要だけをもう1段上げる。本文（p / li）は標準18pxのままにする */
    #kf-page .kf-info-table th,
    #kf-page .kf-info-table td {
        font-size: 21px;
    }

    /* ⑥ 日程の日付の枠内を白で塗る */
    #kf-page .kf-day__title {
        background: #fff;
    }

    /* ⑤ 見出しと申込導線の間に置く案内文。1カラムの中身は中央にそろえる。
       下の25pxが、案内文とQRの枠の間のすき間になる（PC断面と同じ作り）。
       2026-08-20: 20px → 25px。設計方針の「縦の寸法は25pxの倍数」にそろえた。 */
    #kf-page .kf-apply__guide {
        margin: 0 0 25px;
        font-size: 18px;
        line-height: 1.8;
        color: #000;
        text-align: center;
    }

    /* ④ QRコードの枠。スマートフォンでは1列に積むため、横幅にあわせた正方形にする。
       画像が届いたら .kf-apply__qr-frame の中身を <img> に差し替える。 */
    #kf-page .kf-apply__qr {
        margin: 0 0 25px;
    }

    /* 1カラムの中身は中央にそろえる（2026-08-20 のご指示） */
    #kf-page .kf-apply__qr-frame {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 240px;
        aspect-ratio: 1 / 1;
        margin: 0 auto;
        border: 1px solid var(--c-navy);
        background: #fff;
    }

    /* QRコードは原寸216pxのまま置く（1マス6px）。
       枠(240px)より小さいので中央に収まり、拡大によるにじみが出ない。
       枠が216pxを下回る極端に狭い端末では max-width で縮める。 */
    #kf-page .kf-apply__qr-image {
        display: block;
        width: 216px;
        height: auto;        /* 縮んだときも正方形を保つ */
        max-width: 100%;
    }

    /* ⑬⑭⑮ 委員長・座長・副座長を同じ書き方の3行にまとめ、所属・役職を氏名に続ける。
       氏名と所属を同じ升目に置けないため、grid をやめて1行ずつのブロックにする。
       役職の欄は min-width でそろえる（固定 width にすると字送りのぶんで折り返す）。 */
    #kf-page .kf-session-card__people {
        display: block;
    }

    /* ============ 人物欄の折り返し（2026-08-20 / 報告資料29の案G） ============

       狙い: 会社名・役職を消さずに、語の途中で改行されるのを止める。

       それまでは「氏名の後ろに続けて流し、折り返した行はぶら下げインデントで
       氏名の位置にそろえる」形だった。使える幅が
         人物欄258px（360pxのとき） − ぶら下げ68px = 190px
       しかなく、所属の必要幅は最長361pxのため、
       「（株）冨坂建設　副／社長」「えがおホー／ルディングス」のように
       単語の真ん中で切れていた。

       いまの形は次の3点でできている。

         1. word-break: auto-phrase … 語の途中で切らない（テーマと同じ指定）
         2. 所属を inline-block …… ひとかたまりとして扱う。氏名の後ろに
                                    入りきらなければ丸ごと次の行へ落ちる。
                                    入る幅（768px）では1行のままで変化しない
         3. ぶら下げインデントの撤去 … 落ちた先で行頭から全幅を使えるようにする

       【触るときの注意】
       - 氏名と所属のあいだの8pxは **氏名の margin-right** で作る。
         所属の margin-left にすると、所属が単独の行に落ちたときに
         その8pxが行頭を押し込み、1行に収まるはずの所属が折り返す（実測で発生）。
       - ぶら下げインデントを残したまま 2 だけ入れると、負の text-indent と
         干渉して **「冨田 由衣」と「（株）冨坂建設」が重なって表示される**（実測で発生）。
       - 検証は ツール/person-wrap-probe.js（行ごとの文字が出る）と
         ツール/person-wrap-shots.js（案ごとの高さ）で行う。
       ================================================================== */
    #kf-page .kf-session-card__person {
        display: block;
        word-break: auto-phrase;
    }

    #kf-page .kf-session-card__role {
        display: inline-block;
        min-width: 4.5em;
    }

    /* 氏名と所属のあいだの8px。所属側ではなく氏名側に持たせる（上の注意を参照） */
    #kf-page .kf-session-card__name {
        margin-right: 8px;
    }

    /* 会社名・役職。2026-08-20: 薄いグレー(--c-sub)から本文の黒へ変更。
       薄い文字は「読みにくい」というご指摘を受けやすいため（オーナー様のご判断）。
       氏名との区別は太さ（氏名は太字）で付ける。 */
    #kf-page .kf-session-card__affil {
        display: inline-block;
        margin-left: 0;
        font-size: 15px;
        color: #000;
        word-break: auto-phrase;
    }
}


/* ================================================================
   カンプ再現（PC幅のみ / 2026-08-09 適用）
   オーナー作成のデザインカンプを実装へ反映したもの。
   検証済みプレビュー(comp-repro.js)のCSSをそのまま移設している。
   - スマートフォン(768px以下)には一切適用しない。上の「スマートフォン版」ブロックが、
     同じ設計原理を1カラムへ翻訳して受け持つ。
   - !important は移設元のまま。テーマの `#douyu-wrapper *` リセットに
     負けないための措置。
   ================================================================ */
@media (min-width: 769px) {

    #kf-page {
        --c-navy: #092A62;
        --c-gold: #C9A961;
        --c-red:  #AA2C3D;
        --c-line: #000000;
        --c-sub:  #6b6b6b;   /* カンプは #8a8a8a だが白地で3.25:1 とWCAG AA(4.5:1)を下回るため濃くした */

        /* セクション見出しの左端の位置（セクションの左端からの距離）。
           開催概要の見出しが元から居た位置で、参加申込・日程プログラムもここにそろえる。
           この1箇所を変えれば3つの見出しが一緒に動く。 */
        --kf-title-indent: 57px;

        /* ④ QRコードの枠の一辺。右列の「申込ボタン上端〜締切カード下端」の縦幅と
           同じにそろえている（実測 225px）。右列の構成を変えたら測り直すこと。 */
        --kf-apply-qr-size: 225px;

        /* ③ QRコードの枠の右端と、ボタン列の左端との間隔（2026-08-20 のご指示で50px）。
           #kf-apply の列と列のすき間として与えている。 */
        --kf-apply-column-gap: 50px;

        /* セクションどうしの縦の間隔。ページ全体でこの1種類だけを使う。
           間隔は「後ろのセクションが自分の margin-top で持つ」の1本に統一している。

           経緯: 150px（当時はCTAボタンの前後だけ112.5pxで不均等）→ 間延びするため100pxへ
           → 「セクションの区切りが分かりにくい」との指摘を受けて125pxで確定（2026-08-09）
           → CTAボタン帯の削除にともなう間隔の再統一に合わせて100pxへ（2026-08-20、オーナー様のご指示）。
           1段階（25px）動かすと、4区間ぶんでページの縦が100px変わる。 */
        --kf-section-gap: 100px;

        /* 2026-08-24 追加。エクスカーションの「左:行程 / 右:テキスト」の左列の幅。
           セクションの幅から列のすき間25pxを引いて半分にした値である。
           日付カードの横幅（⑤）も同じ値を使うため、ここを変えると両方が一緒に動く。 */
        --kf-course-col: calc((100% - 25px) / 2);
    }

    /* PCの本文は16px（カンプの基準サイズ）。
       スマートフォン断面と同じ理由で、`#kf-page` に font-size を書いても効かない。
       基底層の `:is(#douyu-wrapper, body) .kf-page` に負けるため、
       要素セレクタを添えた指定で当てている（下記の p / li / th / td）。
       （2026-08-18、効いていない font-size:16px / line-height を撤去した） */

    /* ---------- 領域の設計（画面幅に追従する構成） ----------
       実サイト(1280px)の実測値:
         左サイドバー header#header : x=0〜330   ← 右端は330px(カンプ上の390pxではない)
         #kf-page                   : x=330〜1280 (950px、画面幅に追従)
         右の固定要素 #return_top    : 画面右端から95pxの位置に貼り付く
                                       (「先頭へ戻る」の丸ボタン。65×65px、右端から30px)

       カンプは1280px専用の作図なので、そのまま固定値で組むと他の幅で崩れる。
       カンプから読み取れた「比率のルール」だけを残し、幅は追従させる。
         - 器はサイドバーの右端に接し、右は #return_top の手前25pxまで伸びる
           (下の calc(100% - 120px) の 120px は、この 95px + 25px の合計)
         - 器の上限は1100px（テーマの #page_contents と同じ値）
         - ヒーローは器いっぱい、縦横比 2:1（カンプの800×400と同じ比率）
         - セクションは器から左に25px内側。右端はヒーローと一致
       1280pxでは器が830pxになり、カンプの800pxとほぼ同じ見た目になる。 */

    /* テーマ側の箱は横方向の制約を解除して素通しにする。
       これをしないと、器の 100% が何を指すかが変わってしまう。 */
    #kf-page #page_contents,
    #kf-page .post_content {
        max-width: none !important;
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* ヒーローと本文コンテナに「同じ幾何」を与えることで、どの画面幅でも右端が一致する。
       プレビューでは両者を1つの器に入れて実現したが、実装ではスマートフォン表示を
       変えないため、DOMは動かさずCSSだけで揃える。 */
    #kf-page .kf-hero,
    #kf-page #douyu-wrapper {
        width: auto !important;
        max-width: min(1100px, calc(100% - 120px)) !important;
        margin-left: 0 !important;   /* サイドバーの右端に接する */
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        background: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* 「1日目｜」「2日目｜」は、PC幅では1日目と2日目が横に並ぶため冗長になる。
       スマートフォンでは縦に並ぶので、そちらでは表示したままにする。 */
    #kf-page .kf-day__title-prefix {
        display: none !important;
    }
    /* セクションは器の左端から25px内側。右端はヒーローと一致する。
       padding で右の余白を作ると border(罫線)が padding の外側に引かれ、
       罫線だけが右へ伸びてしまうため、幅そのものを指定する。 */
    #kf-page .kf-section {
        width: calc(100% - 25px) !important;
        margin-left: 25px !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* ---------- セクションどうしの間隔 ----------
       間隔は「後ろのセクションが自分の margin-top で持つ」の1本に統一する。
       開催概要はヒーロー直後（間隔はヒーローの margin-bottom 50px が持つ）のため対象外。
       2026-08-20: 以前は削除済みのCTAボタン帯が padding で前後の間隔を肩代わりしており、
       フォーラムテーマ・お問い合わせだけ間隔が 0px になっていた。持ち主を一本化して解消。 */
    #kf-page #kf-apply,
    #kf-page #kf-schedule,
    #kf-page #kf-sessions,
    #kf-page #kf-contact-section {
        margin-top: var(--kf-section-gap) !important;
    }

    /* ヒーロー下の余白 50px。
       テーマ側の article/.post_content が上に余白を持つため、それも打ち消す */
    #kf-page .kf-hero { margin-bottom: 50px !important; }
    #kf-page #page_contents,
    #kf-page .post_content,
    #kf-page #douyu-wrapper {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* ---------- 共通: 見出し ---------- */
    #kf-page .kf-section__title {
        font-size: 24px !important;
        font-weight: 700 !important;
        color: var(--c-navy) !important;
        text-align: left !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }
    #kf-page .kf-section__title::after { display: none !important; }

    /* 見出しの右へ伸びる罫線（参加申込・日程プログラム）

       見出し語の左端は、開催概要の見出しに合わせる（--kf-title-indent）。
       開催概要は動かさない基準なので、この値は「開催概要の見出しが元から居た位置」である。
       罫線は、開催概要の表の左端（＝セクション左端から210px）から始める。
         内訳: 57px(左の余白) + 128px(見出し語の箱) + 25px(すき間) = 210px

       見出し語の箱に minmax() を使うのは、語が長いときに罫線と重ならないようにするため。
       「参加申込」(97px)は128pxの下限が効いて罫線が210pxから始まり、
       「日程プログラム」(169px)は語の実寸が優先され、罫線はその25px右から始まる。
       flex ではなく grid にしているのは、素のテキストに最小幅を与えられるのが
       grid の列指定だけのため（テキストは無名のグリッドアイテムとして1列目に入る）。 */
    #kf-page #kf-apply > .kf-section__title,
    #kf-page #kf-schedule > .kf-section__title {
        display: grid !important;
        grid-template-columns: minmax(calc(210px - var(--kf-title-indent) - 25px), max-content) 1fr !important;
        align-items: center !important;
        gap: 0 25px !important;
        height: 75px !important;
        padding-left: var(--kf-title-indent) !important;
    }
    #kf-page #kf-apply > .kf-section__title::after,
    #kf-page #kf-schedule > .kf-section__title::after {
        display: block !important;
        content: "" !important;
        height: 5px !important;
        background: var(--c-navy) !important;
        margin: 0 !important;
        width: auto !important;
    }

    /* ---------- 1. 開催概要: 見出し左 / 表右、上下に罫線 ---------- */
    #kf-page #kf-overview {
        display: grid !important;
        grid-template-columns: 210px 1fr !important;  /* 見出しは固定、表が伸びる */
        align-items: center !important;
        border-top: 5px solid var(--c-navy) !important;
        border-bottom: 5px solid var(--c-navy) !important;
    }
    /* 開催概要の見出しは、位置を動かさないことがオーナー様の指示。
       元は210pxカラム内の中央揃えで、結果として左端がセクション左端から57pxの位置にあった。
       中央揃えのままだと語の長さで左端が動いてしまうため、その位置を数値で固定し直し、
       同じ値（--kf-title-indent）を参加申込・日程プログラムの見出しにも使う。
       これで3つの見出しの左端が、開催概要の元の位置でそろう。 */
    #kf-page #kf-overview > .kf-section__title {
        text-align: left !important;
        padding-left: var(--kf-title-indent) !important;
        white-space: nowrap !important;
    }
    #kf-page .kf-info-table {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        border-collapse: collapse !important;
        font-size: 21px !important;
    }
    #kf-page .kf-info-table tr { display: block !important; height: 75px !important; }
    #kf-page .kf-info-table tbody { display: block !important; }
    #kf-page .kf-info-table th,
    #kf-page .kf-info-table td {
        height: 75px !important;
        padding: 0 !important;
        border: none !important;
        vertical-align: middle !important;
        font-size: 21px !important;
        line-height: 75px !important;
    }
    #kf-page .kf-info-table tr { display: flex !important; align-items: center !important; }
    #kf-page .kf-info-table tr:not(:last-child) { border-bottom: 1px solid var(--c-line) !important; }
    #kf-page .kf-info-table th {
        width: 130px !important;
        text-align: center !important;
        color: var(--c-navy) !important;
        font-weight: 700 !important;
    }
    /* 2026-08-21: 本文の色を明示した（理由はスマートフォン断面の同じ箇所を参照） */
    #kf-page .kf-info-table td {
        flex: 1 1 auto !important;
        color: #000 !important;
    }

    /* ---------- 2. 参加申込: 左 QRの枠 / 右 ボタン群 ----------
       左右の配置はPC幅だけの見せ方で、スマートフォンは従来の順序（注記→ボタン→締切）のまま。

       1列目は auto（＝QRの枠とその左余白の実寸で決まる）、2列目は残り全部。
       列の間は --kf-apply-column-gap で、これが「QRの右端 → ボタンの左端」の余白になる。
       以前は 1fr 1fr で2列目の左端をセクションの中心に置いていたが、
       QRとボタンの間が広く空くため、間隔を数値で決める形へ変えた（2026-08-20）。 */
    /* 上の間隔は「セクションどうしの間隔」でまとめて持つ（--kf-section-gap） */
    #kf-page #kf-apply {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        column-gap: var(--kf-apply-column-gap) !important;
    }
    #kf-page #kf-apply > .kf-section__title { grid-column: 1 / -1 !important; }

    /* ボタン群は左列。列幅（セクションの半分）より狭い350px固定なので、左端で止める。
       案内文との間のすき間は、案内文の margin-bottom（25px）だけで作る。
       以前はここにも padding-top: 25px があり、合計50px空いていた（2026-08-20に解消）。 */
    #kf-page .kf-apply__right {
        grid-column: 1 !important;
        grid-row: 2 !important;   /* DOMの記述順に関わらず2行目に固定する */
        justify-self: start !important;
        align-self: start !important;
        display: flex !important;
        flex-direction: column !important;
        width: 350px !important;
    }

    /* 縦の並びは 金ボタン → 締切バッジ。
       この2つで「ボタン上端〜締切下端＝225px」となり、QRの枠の一辺と一致する
       （--kf-apply-qr-size）。ここに要素を足すと枠の寸法も測り直しになる。 */
    #kf-page .kf-apply__right .kf-button   { order: 1 !important; }
    #kf-page .kf-apply__right .kf-deadline { order: 2 !important; }

    #kf-page .kf-apply__right .kf-button {
        width: 350px !important;
        max-width: none !important;
        height: 100px !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        background: var(--c-gold) !important;
        color: var(--c-navy) !important;
        border: none !important;
        border-radius: 8px !important;
        box-shadow: 4px 4px 0 rgba(0,0,0,.25) !important;
        font-size: 21px !important;
        font-weight: 700 !important;
    }
    #kf-page .kf-apply__right .kf-button::after { content: "\2192" !important; font-size: 1em !important; }

    #kf-page .kf-apply__right .kf-deadline {
        width: 350px !important;
        max-width: none !important;
        height: 100px !important;
        margin: 25px 0 0 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #fff !important;
        color: var(--c-red) !important;
        border: 2px solid var(--c-red) !important;
        border-radius: 20px !important;
        box-shadow: none !important;
        font-size: 21px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }
    #kf-page .kf-deadline strong { color: var(--c-red) !important; font-size: 1em !important; }

    /* ---------- 3. 日程プログラム: 1日目 / 2日目 の横2カラム ---------- */
    /* 上の間隔は「セクションどうしの間隔」でまとめて持つ（--kf-section-gap） */
    /* 2026-08-22: 1日目/2日目の横2カラムから縦1列へ変更。
       2日目にエクスカーション3コースの詳細が入り、片方のカラム(約390px)では収まらないため。 */
    #kf-page #kf-schedule {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        /* 2026-08-24: 末尾の太罫線（5px）を削除した（同友会様のご指示）。
           あわせて、その太罫線に縦線が接触しないために置いていた下の余白50pxも撤去した。 */
        padding-bottom: 0 !important;
    }
    #kf-page #kf-schedule > .kf-section__title { grid-column: 1 / -1 !important; }
    #kf-page #kf-schedule .kf-day {
        max-width: none !important;
        margin: 0 !important;
        height: auto !important;
    }
    /* 縦1列にしたため、日と日の間隔は上下の余白で持つ */
    #kf-page #kf-schedule .kf-day + .kf-day { margin-top: 75px !important; }

    /* 2026-08-22: 下の余白を50px→25pxにした。日と日の間は100px（日の間隔75px＋見出しの上25px）
       あるため、見出しと中身を25pxで近づけると 1:4 になり、どの中身がどの日のものか迷わなくなる。 */
    /* 2026-08-24: 横幅をセクション全幅から行程の列幅（--kf-course-col）にそろえ、左詰めにした。
       行程が左列に来たため、全幅の帯のままでは日付カードの右半分が中身のない張り出しになる。
       囲い線そのもの・中の文字の中央揃えは同友会様のご指示による意匠なので変えていない。 */
    #kf-page .kf-day__title {
        width: var(--kf-course-col) !important;
        height: 75px !important;
        margin: 25px 0 25px 0 !important;   /* 上25px / 下25px */
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid var(--c-navy) !important;
        border-bottom: 1px solid var(--c-navy) !important;
        font-size: 21px !important;
        font-weight: 700 !important;
        color: var(--c-navy) !important;
        text-align: center !important;
    }

    /* 2026-08-22: 列構成を「時刻105px / 縦線25px / 内容」の1本に統一した。
       従来は 1fr 25px 1fr で縦線をセクションの中心に置いていたが、2日目のコースが
       「左:参加条件 / 右:行程」の2列になったため、1日目と2日目で縦線が20pxずれていた。

       2026-08-24 まで、1日目には参加条件の列ぶん（240px＋25px＝265px）の左余白を与えていた。
       当時は2日目の行程が右列だったためである。行程を左列へ移した（③）ことで
       その余白は不要になり、1日目・2日目ともセクションの左端から始める形にそろえた。
       これで時刻列の左端・縦線・内容列の左端が、4本すべて同じX座標になる。 */
    #kf-page .kf-timeline {
        display: grid !important;
        grid-template-columns: 105px 25px minmax(0, 1fr) !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* 2026-08-24: 265px → 0。2日目の行程が左列（セクションの左端）へ移ったため、
       1日目もセクションの左端から始めることで、時刻列の左端・縦線・地名の左端が
       1日目と2日目で同じX座標に乗る。日付カードの左端ともそろう。 */
    #kf-page .kf-timeline--day {
        margin-left: 0 !important;
    }
    #kf-page .kf-timeline__item { display: contents !important; }
    #kf-page .kf-timeline__time {
        font-size: 15px !important;
        padding: 0 !important;
        height: 50px !important;
        line-height: 50px !important;
        text-align: right !important;
        color: var(--c-navy) !important;
        white-space: nowrap !important;
    }
    #kf-page .kf-timeline__label {
        font-size: 18px !important;
        padding: 0 !important;
        height: 50px !important;
        line-height: 50px !important;
        color: #000 !important;
        white-space: nowrap !important;   /* 50pxの行の高さを保つため、折り返させない */
    }
    #kf-page .kf-timeline__marker { background: #b9c4d4 !important; }
    #kf-page .kf-timeline__marker::before {
        width: 12px !important; height: 12px !important;
        background: var(--c-gold) !important;
        box-shadow: none !important;
        border: 2px solid #fff !important;
    }

    /* 2026-08-22: 中央揃え→左寄せ。1列になって幅が広がり、
       中央に置くと下に続くコース名(左寄せ)と視線の起点がずれるため。 */
    #kf-page .kf-day__body {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: var(--c-navy) !important;
        text-align: left !important;
        margin: 0 0 25px 0 !important;
    }
    /* 2026-08-20: 語の途中で切らない指定を追加（理由はスマートフォン断面の同じ箇所を参照） */
    /* 注記は文の切れ目（句点のあと）で改行する。
       spanを行ごとに block にして、折り返し位置を画面幅に任せない。
       スマートフォンでは指定しないため、従来どおり続けて流れる。

       2日目の欄はPC幅では2カラムの片方（769pxのとき約300px）しかないため、
       1文目が1行に収まらず、その中でさらに折り返すことがある。
       auto-phrase により文節の切れ目で折り返す。 */

    /* ---------- 3-2. エクスカーション（2日目・A〜Cコース） ----------
       文字サイズはページ共通の4段（24px 見出し / 21px 強調 / 18px 標準 / 15px 最小）だけを使う。
       この4段以外の値を足してはならない（知見No.71・No.120）。今回の割り当て:
         コース名 21px / ラベル 15px / 紹介文 18px / 参加費の項目名 15px / 金額・人数 18px
         含まれるもの 15px / 行程の時刻 15px / 行程の地名 18px（1日目と同じ）
         共通のご案内の見出し 18px / 箇条書き 15px / 取消料の表 15px

       2026-08-22 追加。コース名と紹介文はブロックの全幅に置き、その下を
       「左:参加の条件(240px) / 右:行程」の2列にする。
       紹介文を左列に入れると12行前後になり、右の行程と縦の釣り合いが取れないため。 */
    /* 余白の段（2026-08-22 デザインレビューを受けて整理）
         コースの中     : 25px
         コースとコース : 50px（罫線をちょうど中央に置く。25px + 罫線 + 25px）
         ご案内の前     : 75px
         日と日         : 100px（日の間隔75px ＋ 見出しの上25px）
       従来はコース間が150px（下50＋間50＋上50）で、セクション間の100pxより広く階層が逆転していた。 */
    #kf-page .kf-course { padding: 0 !important; }
    #kf-page .kf-course + .kf-course {
        margin-top: 25px !important;
        padding-top: 25px !important;
        border-top: 1px solid #b9c4d4 !important;
    }
    /* コース名の行。ラベル(Aコース)と名称を同じ行に並べる */
    #kf-page .kf-course__head {
        display: flex !important;
        align-items: baseline !important;
        gap: 16px !important;
        flex-wrap: wrap !important;
        margin: 0 0 25px 0 !important;
    }
    /* ラベルの文字色 #8a6d2f は白地で4.9:1。WCAG AA(4.5:1)を満たす濃さの金である。
       これより明るい金(--c-gold #C9A961 は2.2:1)を文字色に使ってはならない */
    #kf-page .kf-course__badge {
        flex: none !important;
        padding: 4px 14px !important;
        border: 1px solid var(--c-gold) !important;
        background: #fdfaf3 !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        letter-spacing: 0.08em !important;
        color: #8a6d2f !important;
    }
    /* コース名は 21px（強調の段）。
       2026-08-22: 一度24px（見出しの段）にしたが、入れ物である日付見出し（21px）より
       大きくなり階層が逆転するため、オーナー様のご指示で21pxに戻した。
       日付見出しは同友会様からのご指示による意匠のため、こちらを上げる選択は採らない。
       金額（21px）と同じ段になるが、コース名は右列の先頭・金のラベル付きの見出しで、
       金額はその下の参加の条件の中に置かれるため、位置と装飾で役割が分かれる。
       （2026-08-24: 参加の条件が左の細い列240pxから右列へ移ったため、説明を直した） */
    #kf-page .kf-course__name {
        margin: 0 !important;
        font-size: 21px !important;
        font-weight: 700 !important;
        line-height: 1.5 !important;
        color: var(--c-navy) !important;
    }
    #kf-page .kf-course__lead {
        margin: 0 0 25px 0 !important;
        font-size: 18px !important;
        line-height: 1.95 !important;
        color: #000 !important;
        word-break: auto-phrase !important;
    }
    /* 2026-08-24: 左右を入れ替え、「左:行程（日程表） / 右:コース名＋紹介文＋参加の条件」にした。
       あわせて、行程の縦幅を右側テキストの全縦幅にそろえた。

       仕組み:
         2列のグリッドを .kf-course（コースの箱）そのものに持たせ、
         中の入れ物 .kf-course__body は display:contents で箱を消す。
         これで コース名 / 紹介文 / 参加の条件 / 行程 の4つが同じグリッドの直接の子になり、
         行程だけを1行目から最終行までまたがせられる。
         またいだ行程の高さは、右列3段の合計高さと必ず一致する。
         画面幅やコースによって文章量が変わっても、④の条件が自動的に成り立つ。

       行程の中は高さを固定しない自動サイズの行なので、箱が高くなったぶんは
       各行に均等に配られる（グリッドの align-content の既定の働き）。
       行の高さを固定していないため、長い地名が折り返しても次の行と重ならない（知見No.115）。
       縦線（.kf-timeline__marker）は行ごとに縦いっぱいへ伸びる作りなので、
       行の間隔が広がっても線は途切れない。

       スマートフォン断面（768px以下）は display:block のままなので、
       DOMの順（コース名 → 紹介文 → 参加の条件 → 行程）がそのまま縦に並ぶ。
       **上下の順は変えていない**（詳細 → 日程表のまま）。 */
    #kf-page .kf-course {
        display: grid !important;
        grid-template-columns: var(--kf-course-col) 25px minmax(0, 1fr) !important;
        /* 3段目（参加の条件）だけを 1fr にして、行程のほうが高いときの余りを最後の段に集める。
           3段すべて auto のままだと余りが3段に分配され、25pxで組んだ段の間隔が崩れる。 */
        grid-template-rows: max-content max-content minmax(max-content, 1fr) !important;
    }
    #kf-page .kf-course__body { display: contents !important; }
    #kf-page .kf-course__head  { grid-column: 3 !important; grid-row: 1 !important; }
    #kf-page .kf-course__lead  { grid-column: 3 !important; grid-row: 2 !important; }
    #kf-page .kf-course__facts { grid-column: 3 !important; grid-row: 3 !important; }
    #kf-page .kf-course__body > .kf-timeline {
        grid-column: 1 !important;
        grid-row: 1 / -1 !important;
    }

    /* 参加の条件。ラベルはネイビー、金額・人数は太字のネイビー（薄いグレーは使わない） */
    /* 2026-08-24: 参加費と定員を横並びにした。理由と列の作り方はスマートフォン断面の同じ箇所を参照 */
    #kf-page .kf-course__facts dl {
        display: grid !important;
        grid-template-columns: max-content max-content !important;
        column-gap: 25px !important;
        margin: 0 0 25px 0 !important;
    }
    #kf-page .kf-course__facts dl dt:nth-of-type(1) { grid-area: 1 / 1 !important; }
    #kf-page .kf-course__facts dl dd:nth-of-type(1) { grid-area: 2 / 1 !important; }
    #kf-page .kf-course__facts dl dt:nth-of-type(2) { grid-area: 1 / 2 !important; }
    #kf-page .kf-course__facts dl dd:nth-of-type(2) { grid-area: 2 / 2 !important; }
    #kf-page .kf-course__facts dt {
        margin: 0 0 4px 0 !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        color: var(--c-navy) !important;
    }
    /* 金額・定員は参加の判断に直結するため 21px（強調の段）。項目名15pxとの差は1.4倍 */
    #kf-page .kf-course__facts dd {
        margin: 0 !important;   /* 2026-08-24: 下の25pxは dl 側へ移した */
        font-size: 21px !important;
        font-weight: 700 !important;
        color: var(--c-navy) !important;
    }
    /* 240pxの狭い欄に読点区切りの列挙が入るため、語の途中で切らない指定を入れる
       （入れないと「茶菓/子」「観光入/場」のように単語の真ん中で折り返す） */
    #kf-page .kf-course__included {
        margin: 0 !important;
        padding: 16px 18px !important;
        background: #eef1f6 !important;
        border-left: 3px solid var(--c-gold) !important;
        font-size: 15px !important;
        line-height: 1.8 !important;
        color: #000 !important;
        word-break: auto-phrase !important;
    }
    #kf-page .kf-course__included b {
        display: block !important;
        margin-bottom: 4px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--c-navy) !important;
    }

    /* 行程。時刻列を100pxに詰め、行の高さは中身に合わせる。
       高さを50pxに固定すると、長い地名（「熊本城（昼食：桜の馬場城彩苑）」等）が
       折り返したときに次の行と文字が重なる（知見No.115）。 */
    /* align-self は start にする。基底は center のため、地名が2行になった行では
       時刻だけが下へずれ、左の時刻と右の地名・点の高さが合わなくなる（実測12〜19pxのずれ）。 */
    /* 行の高さは1日目と同じ50pxにそろえる（反復）。
       行間26px ＋ 上下12px = 50px。1行目の中央は 12+13 = 25px で、1日目の点の位置と一致する。
       高さは固定せず中身に合わせる（固定すると折り返した地名が次の行と重なる。知見No.115）。
       align-self は start にする。基底は center のため、地名が2行になった行では
       時刻だけが下へずれ、点とそろわなくなる（実測12〜19pxのずれ）。 */
    #kf-page .kf-timeline--course .kf-timeline__time {
        height: auto !important;
        padding: 12px 0 !important;
        line-height: 26px !important;
        font-size: 15px !important;
        align-self: start !important;
    }
    #kf-page .kf-timeline--course .kf-timeline__label {
        height: auto !important;
        padding: 12px 0 12px 12px !important;
        line-height: 26px !important;
        font-size: 18px !important;
        white-space: normal !important;
        align-self: start !important;
    }
    /* 点は「行の中央」ではなく「1行目の中央」に置く。
       行の中央にすると、折り返した行で左の時刻とずれる。14px(上の余白)+16px*1.6/2≒27px */
    #kf-page .kf-timeline--course .kf-timeline__marker::before {
        top: 25px !important;
        transform: translate(-50%, -50%) !important;
    }
    #kf-page .kf-timeline--course .kf-timeline__item:first-child .kf-timeline__marker {
        background: linear-gradient(to bottom, transparent 0 25px, #b9c4d4 25px 100%) !important;
    }
    #kf-page .kf-timeline--course .kf-timeline__item:last-child .kf-timeline__marker {
        background: linear-gradient(to bottom, #b9c4d4 0 25px, transparent 25px 100%) !important;
    }

    /* 3コース共通のご案内 */
    /* 2026-08-24: 塗枠上部の罫線装飾（3px）を削除した。理由はスマートフォン断面の同じ箇所を参照 */
    #kf-page .kf-excursion-notes {
        margin: 75px 0 0 0 !important;
        padding: 25px 25px 25px 25px !important;
        background: #eef1f6 !important;
    }
    #kf-page .kf-excursion-notes__title {
        margin: 0 0 20px 0 !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        color: var(--c-navy) !important;
    }
    #kf-page .kf-excursion-notes__list {
        margin: 0 0 25px 0 !important;
        padding-left: 1.2em !important;
        list-style: disc !important;
    }
    #kf-page .kf-excursion-notes__list li {
        font-size: 15px !important;
        line-height: 1.9 !important;
        color: #000 !important;
    }
    #kf-page .kf-excursion-notes__subtitle {
        margin: 0 0 12px 0 !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--c-navy) !important;
    }
    #kf-page .kf-cancel-wrap { overflow-x: auto !important; }
    #kf-page .kf-cancel {
        width: 100% !important;
        max-width: 520px !important;
        border-collapse: collapse !important;
        background: #fff !important;
        font-size: 15px !important;
    }
    #kf-page .kf-cancel th,
    #kf-page .kf-cancel td {
        border: 1px solid #b9c4d4 !important;
        padding: 8px 12px !important;
        text-align: left !important;
        color: #000 !important;
    }
    #kf-page .kf-cancel th {
        background: #dfe5ee !important;
        color: var(--c-navy) !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }
    #kf-page .kf-cancel td:last-child { white-space: nowrap !important; }

    /* ---------- 5. フォーラムテーマ 〜 分科会 ---------- */
    /* 上の間隔は「セクションどうしの間隔」でまとめて持つ（--kf-section-gap）。
       セクション自身の内側の余白は持たせない */
    #kf-page #kf-sessions {
        padding-top: 0 !important;
    }
    /* 中央見出しを左右の罫線で挟む */
    /* 「フォーラムテーマ」の見出しは、中央に置いて左右から罫線で挟む。
       他のセクション見出し（左寄せ＋右側だけの罫線）とは意匠が異なるが、
       この見出しだけは中央揃えにするというご判断（2026-08-18）。

       文字サイズは基底の .kf-section__title（24px）を使うため、ここでは指定しない。
       元は16px＋letter-spacing 0.1em だったが、24pxでは字間が広がりすぎるため
       字送りは戻していない。 */
    #kf-page #kf-sessions > .kf-section__title {
        display: flex !important;
        align-items: center !important;
        gap: 40px !important;
        height: auto !important;
        padding-left: 0 !important;
        margin: 0 0 25px 0 !important;
    }

    /* 見出し語を左右から挟む罫線。flex: 1 1 auto で残りの幅を等分するため、
       語の長さが変わっても中央に置かれる。 */
    #kf-page #kf-sessions > .kf-section__title::before,
    #kf-page #kf-sessions > .kf-section__title::after {
        display: block !important;
        content: "" !important;
        flex: 1 1 auto !important;
        height: 5px !important;
        background: var(--c-navy) !important;
        margin: 0 !important;
        width: auto !important;
    }

    /* スローガンと副題は中央揃え（2026-08-18のご判断で元に戻した）。
       下の25pxが「副題 → リード文」のすき間になる（この1箇所で決まる。
       副題もリード文も margin を持たない）。
       2026-08-20: 40px → 25px。前後の刻みにそろえた。 */
    #kf-page .kf-theme-statement {
        max-width: none !important;
        margin: 0 0 25px 0 !important;
        padding-left: 0 !important;
        text-align: center !important;
    }
    #kf-page .kf-theme-statement__title {
        font-size: 24px !important;
        font-weight: 700 !important;
        color: var(--c-navy) !important;
        margin: 0 0 10px 0 !important;
        line-height: 1.3 !important;
    }
    /* 2026-08-20: 18px（標準）→ 21px（強調）へ1段階上げた */
    #kf-page .kf-theme-statement__lead {
        font-size: 21px !important;
        color: #000 !important;
        margin: 0 !important;
    }
    /* 中央揃え（2026-08-18のご判断で元に戻した）。
       2026-08-20: 18px（標準）→ 21px（強調）へ1段階上げた。 */
    #kf-page .kf-sessions__lead {
        font-size: 21px !important;
        font-weight: 700 !important;
        color: var(--c-navy) !important;
        text-align: center !important;
        padding-left: 0 !important;
        margin: 0 0 25px 0 !important;
    }

    /* 分科会カード: 2カラム、5枚目は中央 */
    #kf-page .kf-session-list {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;  /* カードは均等割り、間隔は25px固定 */
        column-gap: 15px !important;
        row-gap: 15px !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
    }
    /* 高さ250px固定は撤去した。分科会の詳細（概要・座長・副座長）を載せるため、
       中身にあわせて伸びる必要がある。同じ段に並ぶ2枚は grid の既定の引き伸ばしで
       自動的に同じ高さになるので、固定しなくても左右はそろう。 */
    /* 見た目は面（__face）が持つ。カードは回転の軸のみ。
       面のパディングは25px。固定改行の最長行「「選ばれ、成長する企業」」（24pxで292px）を
       PCで最も狭い769px幅（内寸295px）に収めるために30pxから詰めた。
       25pxはカンプの25px刻みにも合う（30pxは元から刻みを外れていた）。 */
    #kf-page .kf-session-card {
        display: block !important;
        height: auto !important;
        margin: 0 !important;
    }

    /* PCのスケールは 12/14/16/18/24。注記と同じ最小段にそろえる。 */
    #kf-page .kf-session-card__hint {
        font-size: 15px !important;
    }

    #kf-page .kf-session-card__back-label,
    #kf-page .kf-session-card__summary {
        line-height: 1.9 !important;
        color: #000 !important;
    }

    #kf-page .kf-session-card__back-label { font-size: 15px !important; }
    #kf-page .kf-session-card__summary { font-size: 18px !important; }
    #kf-page .kf-session-card:nth-child(5) {
        grid-column: 1 / -1 !important;
        width: calc(50% - 12.5px) !important;  /* 1枚分の幅を保ったまま中央に置く */
        margin: 0 auto !important;
    }
    /* 委員会・委員長。カードの最初に置く2行の見出し。
       金の短い罫線を左に添えて、テーマ本体と役割を分ける。 */
    /* 2026-08-20: 下の余白 25px → 15px。左の12pxは罫線からの距離で横方向のため据え置き。 */
    #kf-page .kf-session-card__head {
        margin: 0 0 15px 0 !important;
        padding-left: 12px !important;
        border-left: 3px solid var(--c-gold) !important;
    }
    /* ① 分科会ナンバー＋委員会名: 21px（強調）→ 24px（見出し）へ1段階拡大（2026-08-20） */
    #kf-page .kf-session-card__committee {
        margin: 0 !important;
        line-height: 1.7 !important;
        font-size: 24px !important;
    }
    /* 1行目: 分科会ナンバー＋委員会名 */
    #kf-page .kf-session-card__no,
    #kf-page .kf-session-card__cname {
        font-weight: 700 !important;
        color: var(--c-navy) !important;
    }
    #kf-page .kf-session-card__no {
        margin-right: 12px !important;
    }
    /* 座長・副座長。見出しとのあいだに細い罫線を引いて、所属の表示と登壇者を切り分ける。
       3行目に座長、4行目に副座長を置く。2段にすることで、氏名の長さに関係なく
       5枚のカードがすべて同じ行数になる（1行に並べると幅次第で折り返しがばらつく）。 */
    /* 役職名の欄は max-content で組む。em で幅を決め打ちすると、字送りのぶんだけ
       あふれて「副座長：」が2行に割れる（実測で発生）。 */
    /* 2026-08-20: 上下の余白 25px → 15px。文字は②で18px → 15px。 */
    #kf-page .kf-session-card__people {
        display: grid !important;
        grid-template-columns: max-content 1fr !important;
        column-gap: 4px !important;
        margin: 0 0 15px 0 !important;
        padding-top: 15px !important;
        border-top: 1px solid #d9dee6 !important;
        font-size: 15px !important;
        line-height: 1.7 !important;
    }
    /* 役職と氏名を、親のグリッドの升目に直接置く */
    #kf-page .kf-session-card__person {
        display: contents !important;
    }
    /* 「座　長：」は全角スペースを挟んで「副座長：」と同じ4文字にそろえている（均等割り）。
       同じ幅になるため右寄せは不要で、左端・「：」の位置・氏名の左端がすべてそろう。 */
    #kf-page .kf-session-card__role {
        white-space: nowrap !important;
        font-weight: 700 !important;
        color: var(--c-navy) !important;
    }
    #kf-page .kf-session-card__name {
        font-weight: 700 !important;
        color: #000 !important;
    }

    /* 「分科会テーマ」ラベル（2026-08-20 / 報告資料30の案3）。
       意図と作りはスマートフォン断面の同じ箇所のコメントを参照。 */
    #kf-page .kf-session-card__theme-label {
        margin: 15px 0 5px !important;
        padding-top: 15px !important;
        border-top: 1px solid #d9dee6 !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.7 !important;
        color: var(--c-navy) !important;
    }

    /* テーマ・サブテーマは幅にあわせて自然に折り返す（高さの予約はしない）。
       理由はスマートフォン断面の同じ箇所のコメントを参照。 */
    #kf-page .kf-session-card__title {
        font-size: 24px !important;
        font-weight: 700 !important;
        color: var(--c-navy) !important;
        line-height: 1.9 !important;
        margin: 0 0 5px 0 !important;   /* 2026-08-20: 12px → 5px */
        word-break: auto-phrase !important;
    }
    /* ④ サブテーマ: 18px（標準）→ 21px（強調）へ1段階拡大（2026-08-20） */
    #kf-page .kf-session-card__subtitle {
        font-size: 21px !important;
        color: #000 !important;
        line-height: 1.7 !important;
        margin: 0 !important;
        word-break: auto-phrase !important;
    }

    /* ---------- 6. お問い合わせ ---------- */
    /* 下はページ末尾の余白。セクションどうしの間隔と同じ値にそろえる。
       テーマ側の器(#douyu-wrapper)が持つ末尾の余白は下で打ち消し、この1箇所で決める */
    #kf-page #kf-contact-section {
        text-align: center !important;
        padding-top: 0 !important;
        padding-bottom: var(--kf-section-gap) !important;
    }
    #kf-page #douyu-wrapper,
    #kf-page .post_content,
    #kf-page #page_contents {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    #kf-page #kf-contact-section > .kf-section__title {
        font-size: 18px !important;
        text-align: center !important;
        display: block !important;
        margin: 0 auto 12px !important;
        padding-bottom: 10px !important;
        position: relative !important;
    }
    #kf-page #kf-contact-section > .kf-section__title::after {
        display: block !important;
        content: "" !important;
        width: 85px !important;
        height: 2px !important;
        background: var(--c-gold) !important;
        margin: 10px auto 0 !important;
        position: static !important;
    }
    #kf-page .kf-contact,
    /* 2026-08-21: 本文の色を明示した（理由はスマートフォン断面の同じ箇所を参照） */
    #kf-page .kf-contact__body {
        max-width: none !important;
        margin: 0 !important;
        text-align: center !important;
        font-size: 18px !important;
        line-height: 2.2 !important;
        color: #000 !important;
    }
    #kf-page .kf-contact__link {
        min-height: 0 !important;
        line-height: inherit !important;
        text-decoration: none !important;
        color: #000 !important;
        font-weight: 400 !important;
    }

    /* 本文の既定 */
    #kf-page, #kf-page p, #kf-page td, #kf-page th { font-size: 18px; }


    /* ================================================================
       2026-08-20 同友会様のご要望による変更
       ================================================================ */

    /* ① 開催概要だけをもう1段上げる。本文（p / td / th の既定）は標準18pxのままにする */
    #kf-page .kf-info-table th,
    #kf-page .kf-info-table td {
        font-size: 21px !important;
    }

    /* ⑥ 日程の日付の枠内を白で塗る */
    #kf-page .kf-day__title {
        background: #fff !important;
    }

    /* ⑤ 見出しと申込導線の間に置く案内文。見出しと同じ左端にそろえる */
    #kf-page .kf-apply__guide {
        margin: 0 0 25px 0 !important;
        padding-left: var(--kf-title-indent) !important;
        font-size: 18px !important;
        line-height: 1.8 !important;
        color: #000 !important;
    }

    /* ④ 左にQRコードの枠、右に注記・ボタン・締切。
         枠は正方形で、右列の「ボタン上端〜締切カード下端」と同じ縦幅にそろえる。
         その縦幅は下の --kf-apply-qr-size で持つ（実測して決めた値）。 */
    /* #kf-apply は2列のグリッドで、見出しが1行目を占める。
         2行目に案内文を全幅で置き、3行目に「左:QRの枠 / 右:申込ボタン・締切」を並べる。 */
    #kf-page .kf-apply__guide {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        /* .kf-apply-band は中央揃えなので、見出しと同じ左寄せに戻す */
        text-align: left !important;
    }

    /* ② 枠の左端を、見出し・案内文と同じ位置（--kf-title-indent）にそろえる。
         この左余白は1列目の幅にも含まれるため、列幅は 57px + 枠225px = 282px になる。
         案内文との間のすき間は、案内文の margin-bottom（25px）だけで作る。 */
    #kf-page .kf-apply__qr {
        grid-column: 1 !important;
        grid-row: 3 !important;
        justify-self: start !important;
        align-self: start !important;
        padding-left: var(--kf-title-indent) !important;
    }

    /* .kf-apply__right は名前と逆で、もとは左列だった（カンプ由来の名前）。
         ④のご要望で右列へ移す。行は案内文の下（3行目）。 */
    #kf-page .kf-apply__right {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    #kf-page .kf-apply__qr-frame {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: var(--kf-apply-qr-size, 200px) !important;
        height: var(--kf-apply-qr-size, 200px) !important;
        border: 1px solid var(--c-navy) !important;
        background: #fff !important;
    }

    /* QRコードは原寸216pxのまま枠(225px)の中央に置く。
       1マス6pxなので、225pxへ伸ばすと1マス6.25pxとなり端数でにじむ。
       画像を差し替えるときは ツール/qr-verify.js で原寸とマス寸を測り直すこと。 */
    #kf-page .kf-apply__qr-image {
        display: block !important;
        width: 216px !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* ⑬⑭⑮ 委員長・座長・副座長を同じ書き方の3行にまとめ、所属・役職を氏名に続ける */
    #kf-page .kf-session-card__people {
        display: block !important;
    }

    #kf-page .kf-session-card__person {
        display: block !important;
    }

    #kf-page .kf-session-card__role {
        display: inline-block !important;
        min-width: 4.5em !important;
    }

    /* 会社名・役職。2026-08-20: 薄いグレー(--c-sub)から本文の黒へ変更。
       薄い文字は「読みにくい」というご指摘を受けやすいため（オーナー様のご判断）。 */
    #kf-page .kf-session-card__affil {
        margin-left: 8px !important;
        font-size: 15px !important;
        color: #000 !important;
    }

    /* ⑩ 分科会カードを1列にし、横幅を器いっぱいに広げる。
         5枚目だけ中央に置いていた指定も外す。 */
    #kf-page .kf-session-list {
        grid-template-columns: 1fr !important;
    }

    #kf-page .kf-session-card:nth-child(5) {
        grid-column: auto !important;
        width: auto !important;
        margin: 0 !important;
    }

    /* ⑨ 裏返しをやめ、表と裏の中身を続けて1枚のカードに出す。
         押して切り替える操作は使わないため、ボタンと案内文（概要を見る／とじる）、
         裏面の見出しは消す。スマートフォンでは従来どおり裏返しのまま。

         見た目の箱（白背景・枠線・角丸・影・余白25px）は、基底層では「面」が持っている。
         2つの面を並べると箱が二重に見えるため、PCでは箱をカード側へ移し、面は素の入れ物にする。

         裏面には visibility: hidden が別途かかっている（.is-flipped でない間は隠す指定）。
         position や transform を上書きしても visibility は残るため、明示的に戻す必要がある。 */
    #kf-page .kf-session-card {
        padding: 25px !important;
        background-color: #fff !important;
        border: 1px solid #555 !important;
        border-radius: 12px !important;
        box-shadow: 5px 5px 6px rgba(0, 0, 0, .22) !important;
        perspective: none !important;
    }

    #kf-page .kf-session-card__inner {
        transform: none !important;
        transform-style: flat !important;
        height: auto !important;
    }

    #kf-page .kf-session-card__face {
        position: static !important;
        transform: none !important;
        backface-visibility: visible !important;
        visibility: visible !important;
        height: auto !important;
        padding: 0 !important;
        background: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    /* 概要は表面の続きとして流す。表面の最後（サブテーマ）との間だけ空ける */
    #kf-page .kf-session-card__face--back {
        display: block !important;
        margin-top: 15px !important;
    }

    #kf-page .kf-session-card__toggle,
    #kf-page .kf-session-card__hint,
    #kf-page .kf-session-card__back-label {
        display: none !important;
    }

}


/* ================================================================
   器の右の逃げ（769px以上は 120px で一本）
   2026-08-09 追加 / 2026-08-10 コメント修正 / 2026-08-20 タブレット帯の補正を撤去

   テーマ側が置く「浮いているもの」と、それが現れる画面幅。
   すべて二分探索で1px単位まで確定させた実測値（ツール/breakpoint-exact.js）。

     要素             正体                        出現する最小幅   占める場所
     ---------------  --------------------------  --------------  ------------------------
     #return_top      先頭へ戻る丸ボタン           851px           右端から30px、幅65px
     #side_button     ログイン/お問い合わせ縦ボタン 1222px          右端に接する、幅60px
     header#header    左サイドバー                 1222px          左端から330px

   カンプ版CSSの calc(100% - 120px) は「#return_top の95px(30+65) + 中身とのすき間25px」。
   **851px 以上でこの120pxを詰めてはならない。** 詰めると「先頭へ戻る」ボタンが
   分科会カードの文字の上に重なる。

   【2026-08-20 に撤去したもの】
   以前は 769〜849px だけ `max-width: calc(100% - 25px)` に詰めていた。
   その幅では #return_top がまだ無く、120pxの逃げが死に余白になるためだった。

   これを撤去して 769px以上を120pxの一本にしたのは、次の理由（オーナー様のご判断）。

     - 帯の終わりが849pxで、#return_top の出現(851px)と1pxずれていた
     - 849→850pxでカードの幅が94px縮む（画面を広げたのに狭くなる）不連続が生じていた
     - 撤去すると 769〜849px でカードは95px狭くなるが、落差が消えて規則が1つ減る

   【検討して採らなかった案】
   「重なっても支障ない」として逃げを25pxに統一する案も実測した。
   **851〜1220pxの370幅のうち307幅(83%)で、実際に本文の文字が隠れた**
   （最大2行・43pxぶん）。1222px以上では縦ボタンとの重なりが12〜14件になる。
   採らない。測り方は ツール/return-top-text-overlap.js。

   **要素の枠(getBoundingClientRect)で重なりを見ると、中身が左寄せの要素は
   枠だけが右まで伸びているため誤判定する。文字は行単位の矩形で見ること。**

   2026-08-10、逃げを「1222pxまで無駄な余白」と読み違えて1221pxまで詰め、
   実際に文字が隠れて取り消した。**"固定ナビ" のような曖昧な呼び名で判断せず、
   必ず要素名で確かめること。** ページ上の固定要素は ツール/fixed-elements.js で全列挙できる。
   ================================================================ */

/* 769〜949px: 参加申込を1カラムに畳む。
   2カラムのままだと2列目の幅が350px（申込ボタンの固定幅）を下回り、
   ボタンが収まらなくなるため。

   境界の根拠: 2カラムに必要なセクション幅は
     1列目282px（左余白57＋枠225）＋ 列の間50px ＋ ボタン350px ＝ 682px。
   セクション幅は「画面幅 − 120px（器の左右）− 25px（セクションの左）」なので、
   画面幅で 827px あれば足りる。キリのよい 840px を境界とし、839px以下で1カラムに畳む。
   （2026-08-20: 1列目がセクション幅の半分から282px固定になったため、
     従来の949pxから下げた。827〜949pxが不要に畳まれていた） */
@media (min-width: 769px) and (max-width: 839px) {
    #kf-page #kf-apply {
        grid-template-columns: 1fr !important;
    }

    /* 1カラムのときは中身を中央に寄せる（2026-08-20 のご指示）。
       見出しは「見出し語＋右へ伸びる罫線」で全幅を占める意匠のため、従来どおり動かさない。
       案内文・ボタン群・QRの枠の3つを、セクションの中心にそろえる。 */
    #kf-page .kf-apply__guide {
        padding-left: 0 !important;
        text-align: center !important;
    }

    /* 1カラムの表示順は「案内文 → QR → ボタン → 締切」でスマートフォンとそろえる。
       1行目が見出し、2行目が案内文なので、QRが3行目・ボタン群が4行目。
       ボタン群の中（ボタン→締切）はPC断面の order がそのまま効く。 */
    #kf-page .kf-apply__qr {
        grid-column: 1 !important;
        grid-row: 3 !important;
        justify-self: center !important;
        padding-left: 0 !important;   /* 中央寄せのため、②の左余白は打ち消す */
        margin-bottom: 50px !important;
    }

    #kf-page .kf-apply__right {
        grid-column: 1 !important;
        grid-row: 4 !important;
        justify-self: center !important;
        margin-bottom: 0 !important;
    }
}

/* ============ 分科会テーマ・サブテーマの文字サイズ ============
   2026-08-20: 画面幅ごとに文字サイズを下げる指定（3つの帯）を撤去した。

   撤去前は次の4通りに分かれていた。
     〜374px      テーマ20px / サブ16px
     375〜400px   テーマ22px / サブ16px
     401〜429px   テーマ24px / サブ18px
     430px〜      テーマ24px / サブ21px

   段階が必要だったのは、テーマ・サブテーマの改行位置を <span> で固定していたため。
   固定した行が1行に収まらないと予約した3行を超え、そのカードだけ背が高くなるので、
   収まらない幅では文字サイズを下げるしかなかった。

   固定改行と3行予約をやめたことで、この制約自体が消えた。
   いまは全幅で テーマ24px / サブ21px の1通りで、字あふれは320pxでも0件。
   （実測: ツール/card-font-plan.js ／ ツール/fixed-line-fit.js）
*/