/* ==========================================================
   style.css — 参議院HP リニューアル
   カラー基準：Wordデザイン（2-2.仕様書別紙１.docx）準拠
   ヘッダー/フッター：#938375  リンク：#4472C4  金：#FFC000

   ■ 目次（「n.」のセクション番号でこのファイル内を検索できます）
      0.  Material Symbols Outlined（アイコンフォント）
      1.  CSSカスタムプロパティ（色・サイズ・ホバー色などの一元定義）
      2.  ベース／リセット補足
      3.  レイアウト
      4.  スキップリンク
      5.  ナビ内ユーティリティ（文字サイズ・English・メニュー・サイト内検索）
      5b. ヒーロー＋ナビ ラッパー
      5c. ヘッダー（グローバルナビ帯・黒透過）
      6.  ヒーローエリア（スライドショー・「参議院」文字）
      7.  メニューパネル（上から開く・黒透過。白版は19.の.sub-header-wrapで上書き）
      ※8〜14は欠番（旧レイアウト用CSSを2026-07-17に全削除）
      15. フッター（磨りガラス・「アクセス」ボタン）
      16.  レスポンシブ ヘッダー（標準文字：1070px以下でハンバーガー化）
      16b. レスポンシブ ヘッダー（拡大文字：1135px以下）
      16c. レスポンシブ ヘッダー（最大文字：1199px以下）
      16d. レスポンシブ コンテンツ（タブレット：970px以下）
      17. レスポンシブ（スマホ：600px以下）
      18. リニューアルメインコンテンツ（.rd-*系の基礎：タイル・見出し・アコーディオン等）
      21. 20260709.htmlデザイン取り込み分（3列カード・カルーセル・お知らせ等）※ファイル上は18の直後
      19. 個別ページ（.sub-header-wrap＝白ヘッダー/白メニュー・記事本文）※ファイル上は21の後
      ※20は欠番（過去の整理による）
      21b. メニューパネルを閉じるときの「その場で消す」動き
      22. メニュー下部（公式X・ご意見・ご質問・サブリンク）
      23. 今国会情報「委員会」ページ（00010_00000_committee.html）
      24. 共通ページテンプレート（000_000_template.html）
      25. メニューパネル内の文字サイズ切替
      26. 参議院の動き 一覧ページ（00020_00000_ugoki.html）専用のタイムラインCSS
   ========================================================== */

/* ----------------------------------------------------------
   0. Material Symbols Outlined（アイコンフォント・ローカル配置）
   ---------------------------------------------------------- */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    font-display: block;
    src: url('../fonts/material-symbols/MaterialSymbolsOutlined.woff2') format('woff2');
}

/* アイコンを文字として描画するための共通設定（<span class="material-symbols-outlined">名前</span> で使う） */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 1.25em;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga';
    vertical-align: middle;
    flex-shrink: 0; /* flexの中に置かれてもアイコンが潰れないように */
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* アイコンの小さめサイズ（メニュー項目内などで使用） */
.material-symbols-outlined.icon-sm { font-size: 1rem; }

/* ----------------------------------------------------------
   1. CSS カスタムプロパティ
   ---------------------------------------------------------- */
:root {
    /* ブランドカラー（Wordデザイン準拠） */
    --clr-primary:       #938375;   /* ヘッダー・フッター 茶褐色 */
    --clr-primary-dark:  #7d6e62;   /* ナビバー・ドロワー */
    --clr-primary-light: #b3a395;
    --clr-gold:          #FFC000;   /* アクセント ゴールド */
    --clr-gold-light:    #FFD966;
    --clr-link:          #4472C4;   /* リンク ブルー */
    --clr-link-dark:     #2f5496;
    --clr-btn-gray:      #A5A5A5;   /* ボタン グレー */

    /* 背景・テキスト */
    --clr-bg:            #FFFFFF;
    --clr-bg-card:       #F7F7F7;
    --clr-bg-head:       #F2EEEB;   /* セクションヘッダー薄茶 */
    --clr-hover:         #ECECEC;   /* ホバー時の背景色（灰色系・ボス指示 2026-07-21）。
                                       メニュー項目・タイル・アコーディオン・ご意見ボタンなど
                                       サイト内の全ホバーで共通。色の調整はこの1箇所だけでよい */
    --clr-text:          #1a1a1a;
    --clr-text-sub:      #666666;
    --clr-border:        #C8C8C8;   /* セクション外枠（薄めだがDDより少し濃く） */
    --clr-border-card:   #AAAAAA;   /* 個別カード枠（より濃く） */

    /* レイアウト */
    --max-width:         1200px;
    --gap:               20px;
    --radius:            4px;
    --radius-lg:         6px;

    /* フォント：どちらも閲覧者のパソコンに入っている書体（システムフォント）を使う方式。
       フォントファイルの配布が不要＝軽量・メンテナンス不要（明朝は元からこの方式）。
       ゴシックはWindows=メイリオ／Mac・iPhone=ヒラギノで表示される */
    --font-base:    'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
    --font-mincho:  'Yu Mincho', 'YuMincho', '游明朝', 'Hiragino Mincho Pro', 'HGS明朝E', 'MS Mincho', 'MS 明朝', serif;
    --fz-base:     1rem;       /* 16px → html font-size に連動してスケール */
    --fz-sm:       0.9375rem;  /* 15px相当 */
    --fz-xs:       0.8125rem;  /* 13px相当 */
    --fz-lg:       1.125rem;   /* 18px相当 */
    --fz-section:  1.0625rem;  /* 17px相当 */

    /* トランジション */
    --tr: 0.18s ease;
}


/* ----------------------------------------------------------
   2. ベース / リセット補足
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* 基準フォントサイズ（rem計算の土台） */
html {
    font-size: var(--fz-base);
    scroll-behavior: smooth;
}

/* 文字サイズ切替の実体：ヘッダーの「標準/拡大/最大」ボタンでhtmlにこのクラスが付く */
html.font-std { font-size: 16px; }
html.font-lg  { font-size: 18px; }
html.font-xl  { font-size: 20px; }

/* 拡大フォント時のグローバルヘッダー文字サイズ。
   標準(21px)と最大(24px)の中間になるよう明示指定（素のrem換算だと最大とほぼ同じに見えたため）。 */
html.font-lg .gnav-list__link       { font-size: 22.5px; }
html.font-lg .fontsize-switch__btn,
html.font-lg .gnav-util__lang,
html.font-lg .header-search-link    { font-size: 18px; }

/* 最大フォント時のみグローバルヘッダーの文字サイズを個別調整。
   1200px幅でサイト内検索ボタンまで収まるよう逆算（拡大時より大きく、素の1.3125rem/fz-*換算値より小さい）。
   標準・拡大はそのままのレイアウト・サイズを維持する。 */
html.font-xl .gnav-list__link       { font-size: 24px; }
html.font-xl .fontsize-switch__btn,
html.font-xl .gnav-util__lang,
html.font-xl .header-search-link    { font-size: 19.5px; }

/* 本文の既定（書体・文字色・行間） */
body {
    font-family: var(--font-base);
    color: var(--clr-text);
    background: var(--clr-bg);
    line-height: 1.7;
    margin: 0;
}

/* 画像は親要素からはみ出させない */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* リンクの既定：青。ホバーで濃い青＋下線 */
a {
    color: var(--clr-link);
    text-decoration: none;
}
a:hover, a:focus-visible {
    text-decoration: underline;
    color: var(--clr-link-dark);
}

/* リストの黒点と余白をリセット（見た目は各部品側で付ける） */
ul, ol { list-style: none; margin: 0; padding: 0; }

/* 見出しの既定：太字・行間 */
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.3; }

p { margin: 0 0 .75em; }
p:last-child { margin-bottom: 0; }

/* 画面には見せず、読み上げソフトにだけ読ませる文字（アクセシビリティ用） */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}


/* ----------------------------------------------------------
   3. レイアウト
   ---------------------------------------------------------- */
.l-wrapper {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gap);
}

/* トップページ本文領域の上下余白 */
.l-main {
    padding: 32px 0 48px;
}


/* ----------------------------------------------------------
   4. スキップリンク
   ---------------------------------------------------------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 9999;
}
.skip-link:focus {
    position: static;
    width: auto;
    height: auto;
    background: var(--clr-primary);
    color: #fff;
    padding: 8px 16px;
    display: block;
}


/* ----------------------------------------------------------
   5. ナビ内ユーティリティ（文字サイズ・English・検索）
   ---------------------------------------------------------- */
/* 文字サイズ切替 */
.fontsize-switch {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fontsize-switch__label {
    font-size: var(--fz-section);
    color: rgba(255,255,255,.8);
    white-space: nowrap;
    /* コントラスト比確保のため視覚的に隠し、aria-label で代替（WCAG 1.4.3対応） */
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}

.fontsize-switch__btn {
    /* rgba(0,0,0,.25) で実効背景を #6e6259 相当に暗化 → 白文字コントラスト比 5.9:1（AA合格）*/
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    padding: 3px 8px;
    font-family: var(--font-base);
    font-size: var(--fz-section);
    transition: background var(--tr);
    white-space: nowrap;
}
/* ホバー：English・メニュー・サイト内検索と同じ「白が乗って明るくなる」動き（ボス指定） */
.fontsize-switch__btn:hover {
    background: rgba(255,255,255,.2);
    border-color: rgba(255,255,255,.75);
}
/* 使用中（選択されている文字サイズ）：白背景＋黒文字ではっきり区別 */
.fontsize-switch__btn[aria-pressed="true"] {
    background: #fff;
    border-color: #fff;
    color: #1a1a1a;
}

/* ナビ右側ユーティリティグループ */
.gnav-util {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Englishボタン */
.gnav-util__lang {
    display: flex;
    align-items: center;
    gap: 3px;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: var(--radius);
    color: #fff;
    padding: 3px 9px;
    font-size: var(--fz-section);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--tr);
}
.gnav-util__lang:hover { background: rgba(255,255,255,.15); color: #fff; text-decoration: none; }
.gnav-util__lang .material-symbols-outlined { font-size: .9em; }

/* サイト内検索ボタン（検索ページ /search/ へ遷移するリンク。検索窓は置かない。
   並び・見た目とも 20260710.html の .header-search-btn / .menu-trigger-btn 準拠 */
.header-search-link {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: var(--radius);
    color: #fff;
    padding: 10px 20px;
    height: 44px;
    margin-left: 8px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: all .2s;
}
.header-search-link:hover {
    background: rgba(255,255,255,.2);
    border-color: rgba(255,255,255,.5);
    color: #fff;
    text-decoration: none;
}
.header-search-link .material-symbols-outlined { font-size: 1em; }

/* メニューボタン：全サイズ共通で常時表示。押下でメニュー一覧（ドロワー）を開く。
   ボス指示 2026-07-29：PCもスマホ・タブレットと同じハンバーガー（3本線＋「メニュー」）にする。
   以前はPCだけ「≡ メニュー」の横並び・枠線付きの大きめボタンだった */
.header-menu-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: var(--radius);
    color: #fff;
    cursor: pointer;
    padding: 5px 8px;
    height: auto;
    margin-left: 8px;
    font-size: 16px;
    font-weight: 400;
    transition: all .2s;
    /* <a>で書いているため、ボタンと同じ見た目になるよう指定（折り返さない・下線を出さない） */
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0;
}
.header-menu-btn:hover,
.header-menu-btn[aria-expanded="true"] {
    background: rgba(255,255,255,.2);
    border-color: rgba(255,255,255,.5);
}
.header-menu-btn .bar {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
    transition: transform var(--tr), opacity var(--tr);
}
.header-menu-btn__glyph { display: none; }   /* 「≡」記号は使わない（3本線で表す） */
/* 「メニュー」の文字は横幅を詰めて表示する（ボス指示 2026-07-21：横に長いのを短く） */
.header-menu-btn__label {
    font-size: 0.875rem;
    line-height: 1;     /* <a>にしても<button>のときと同じ高さになるよう固定 */
    color: #fff;
    letter-spacing: .05em;
    display: block;
    transform: scaleX(.82);
    transform-origin: center;
}

.header-menu-btn[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.header-menu-btn[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.header-menu-btn[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }


/* ----------------------------------------------------------
   5b. ヒーロー＋ナビ ラッパー（SP順序入れ替え用）
   ---------------------------------------------------------- */
.hero-nav-wrapper {
    display: flex;
    flex-direction: column;
    position: relative; /* 黒透過ヘッダー（absolute）をヒーローに重ねる基準 */
    overflow: visible;  /* sticky が有効になるよう明示 */
    /* メインビジュアル（＋重なるヘッダー）の最大幅は1445px・中央寄せ（20260709.html 準拠、ボス指定値） */
    max-width: 1445px;
    margin: 0 auto;
    width: 100%;
}

/* PC: ナビ→ヒーロー の順（グローバルナビをトップビュー上に配置） */
.l-hero    { order: 2; }
.l-header  { order: 1; }

/* ----------------------------------------------------------
   5c. ヘッダー（グローバルナビ帯）
   黒の透過＋磨りガラス（参考: Web20260709_HP_design/20260709.html）。
   ヒーローの上に重ねて表示する。
   ---------------------------------------------------------- */
.l-header {
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    box-shadow: none;
    opacity: 1;
    transition: opacity .3s ease;
}
/* メニューパネルの開閉中は「参議院」ロゴが二重に見えないよう、グローバルヘッダーを即座に隠す。
   パネルが上まで完全に上がりきってから（main.jsがtransitionendで検知）フェードインで戻す */
.l-header.is-drawer-hidden {
    opacity: 0;
    transition: none;
}

/* 疑似要素で背景だけを黒透過グラデーション＋ぼかしにする */
.l-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(30, 30, 30, .8) 0%,
        rgba(30, 30, 30, .6) 100%
    );
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: -1;
}

/* PCスクロール固定（JS が .is-fixed を付与） */
.l-header.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
}

/* グローバルナビ（帯の色はヘッダー全体の黒透過に任せる） */
.l-gnav { background: transparent; }

/* ヘッダー内側：左=ロゴ／右=ボタン群 */
.gnav-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gap);
    display: flex;
    align-items: center;
}

/* 「参議院」ロゴ（メニュー左側） */
.gnav-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: auto;
}
.gnav-logo img {
    display: block;
    height: 56px;
    width: auto;
    margin: 10px 0;
}

/* PCのメニュー項目一覧はヘッダーに表示しない（右端の「メニュー」ボタンから開く）。
   ドロワー生成元データとしてDOMには残している */
.gnav-list { display: none; }

.gnav-list__item { position: relative; }

.gnav-list__link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 11px clamp(12px, 1.4vw, 18px); /* 画面幅に応じて左右padding自動調整 */
    color: #fff;
    font-family: var(--font-mincho);
    font-size: 1.3125rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: background var(--tr), border-color var(--tr);
}
.gnav-list__link:hover,
.gnav-list__link:focus-visible {
    background: rgba(255,255,255,.1);
    border-bottom-color: var(--rd-bronze);   /* 黄色→コンテンツ見出し縦線と同じメタル色（ボス指示 2026-07-21） */
    text-decoration: none;
    color: #fff;
}

/* ドロップダウン */
.gnav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 340px;
    background: #fff;
    border: 1px solid var(--clr-border);
    border-top: 3px solid var(--clr-primary);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    z-index: 200;
    padding: 6px 0;
}
.gnav-list__item:hover .gnav-dropdown,
.gnav-list__item:focus-within .gnav-dropdown { display: block; }

.gnav-dropdown__link {
    display: block;
    padding: 9px 16px;
    font-size: var(--fz-sm);
    color: var(--clr-text);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--tr);
}
.gnav-dropdown__link:hover {
    background: var(--clr-hover);
    color: var(--clr-primary);
    text-decoration: none;
}


/* ----------------------------------------------------------
   6. ヒーローエリア（スライドショー＋縦書きサイトタイトル）
   ---------------------------------------------------------- */
.l-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
    /* 黒透過ヘッダーが上に重なる分（約76px）に加えて、もう一段（+76px）分
       全体を大きく見せるため、合計152px上乗せする。
       幅は .hero-nav-wrapper で1445pxに制限されるため、高さ計算も1445px止まり */
    height: calc(min(100vw, 1445px) * 5 / 16 + 152px);
    max-height: 612px;
}

/* スライドは js/main.js が js/hero_config.js の slides の内容どおりに生成する（自動検出は無い）。
   .is-active が付いたスライドだけをフェード表示する（左右ボタン・ドットで手動切替可） */
.l-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s ease, visibility 1.2s ease;
    z-index: 1;
    /* 縦積み：上=画像・動画（残り高さ全部）／下=説明文バー（画像の外・20260709.html と同じ構造） */
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}
.l-hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* 画像・動画の切り抜き枠。説明文バーを除いた残り高さいっぱいに広がり、
   拡大表示（view D/E/F）ではみ出した部分をこの枠で切る */
.l-hero__media {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

/* 画像・動画共通（video要素にも同じクラスを付与している） */
.l-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* 表示方法 view（js/hero_config.js で1文字指定）：
   'G'（指定なし＝既定）＝幅合わせ。画像の横幅を動画スライドと同じ横幅に揃える。
                          縦長画像だけは横幅を満たせないため、そのままの横サイズで全体表示になる。
                          幅の計算は js/main.js の layoutFit が行い、width をインラインで指定する
   'A' ＝object-fit:cover（横幅いっぱい・上下を切る・中央基準）
   'B' ＝ 同じく上下を切るが上側を優先して残す
   'C' ＝ 切り取らず全体を表示（余白の色は containBackground／bg で設定） */
.l-hero__img--fit-width {
    display: block;
    margin: 0 auto;   /* 基準幅より狭いときは中央寄せ（左右が余白色になる） */
}
.l-hero__img--cover-top {
    object-position: center top;
}
.l-hero__img--contain {
    object-fit: contain;
}

/* スライドごとの説明文バー（js/hero_config.js で text を設定したときのみ表示）。
   画像・動画の「中」ではなく「外（下）」に灰色バックで表示する（20260709.html 準拠）。
   スライドと一体なので、スライドが切り替わると説明文・リンクも一緒に切り替わる */
.l-hero__caption {
    flex-shrink: 0;
    height: 44px;
    /* 右側はドット＋停止ボタンの分を空ける（テキストが折り返してもボタンに掛からない）。
       左右同じ幅を空けて、文字は中央のまま */
    padding: 0 190px;
    background: rgba(249, 248, 246, .95);
    color: var(--clr-text);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.3;
    font-size: 0.9375rem;
    font-weight: 600;
}
a.l-hero__slide:hover .l-hero__caption {
    text-decoration: underline;
    color: var(--clr-link, #1b4c8c);
}

/* スライドショーの停止／再生ボタン（説明文バーの右端・ドットの横。広報課依頼 2026-07-21）
   動画だけでなくスライドの自動送りそのものを止める・動かす */
.hero-play-toggle {
    position: absolute;
    right: 16px;
    bottom: 8px;                /* 説明文バー(44px)の中に収まる位置 */
    width: 28px;
    height: 28px;
    border: 1px solid #9c8a6e;
    border-radius: 6px;
    background: #fff;
    color: var(--rd-accent, #6b6356);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 11;
    transition: background var(--tr);
    user-select: none;
}
.hero-play-toggle:hover { background: var(--clr-hover); }

/* 左右の手動切替ボタン */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background var(--tr);
    user-select: none;
}
.hero-arrow:hover { background: rgba(0, 0, 0, .65); }
.hero-arrow--prev { left: 20px; }
.hero-arrow--next { right: 20px; }

/* グラデーションオーバーレイ */
.l-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0,0,0,.55) 0%,
        rgba(0,0,0,.2) 35%,
        transparent 65%
    );
    pointer-events: none;
}

/* ===== サイトタイトル「参議院」（JSがスライドごとに生成） =====
   表示パターンはクラスの組み合わせで指定する：
     縦横: .hero-title--vertical / .hero-title--horizontal
     上中下: .hero-title--top / .hero-title--middle / .hero-title--bottom
     白黒: .hero-title--white / .hero-title--black
   各要素は対応する画像スライドと全く同じanimation（名前・周期・delay）を
   インラインで共有するため、画像と文字のフェードは必ず同時になる。 */
.hero-title {
    position: absolute;
    left: clamp(28px, 4vw, 55px);
    width: max-content;
    display: flex;
    align-items: center;
    gap: 0.1em;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    user-select: none;
}
.hero-title--vertical   { flex-direction: column; }
.hero-title--horizontal { flex-direction: row; }

.hero-title--top    { top: clamp(20px, 4vw, 48px); }
.hero-title--middle { top: 44%; transform: translateY(-50%); }
.hero-title--bottom { bottom: clamp(20px, 4vw, 48px); }

.hero-title img {
    width: clamp(2.8rem, 6vw, 5rem);
    height: clamp(2.8rem, 6vw, 5rem);
    display: block;
}
.hero-title--white img { filter: drop-shadow(2px 2px 8px rgba(0,0,0,.7)); }
.hero-title--black img { filter: drop-shadow(0 0 6px rgba(255,255,255,.85)); }

/* 「参」は常にひと回り大きい（元デザイン踏襲） */
.hero-title img:first-child {
    width: calc(clamp(2.8rem, 6vw, 5rem) + 20px);
    height: calc(clamp(2.8rem, 6vw, 5rem) + 20px);
}
/* 横書き時のみ「議」「院」を縮小補正。各画像の文字インク占有率（参=531/736, 議=572/660, 院=540/582）が
   異なるため、見た目のインク高さが「参」の拡大時と揃うよう倍率で補正している。
   議 = (参の拡大サイズ) × 0.83247　／　院 = (参の拡大サイズ) × 0.77758 */
.hero-title--horizontal img:nth-child(2) {
    width: calc((clamp(2.8rem, 6vw, 5rem) + 20px) * 0.83247);
    height: calc((clamp(2.8rem, 6vw, 5rem) + 20px) * 0.83247);
    margin-left: -12px;
    margin-top: 5px;
}
.hero-title--horizontal img:nth-child(3) {
    width: calc((clamp(2.8rem, 6vw, 5rem) + 20px) * 0.77758);
    height: calc((clamp(2.8rem, 6vw, 5rem) + 20px) * 0.77758);
    margin-left: 6px;
}

/* 固定表示モード（本番用）：フェードさせず常時表示 */
.hero-title--fixed {
    opacity: 1 !important;
    animation: none !important;
}

/* スライドショードットナビ（クリックでそのスライドへ移動） */
/* ドットは写真に重ねず、説明文バーの右端（停止ボタンの横）に置く（広報課依頼 2026-07-21） */
.hero-dots {
    position: absolute;
    bottom: 0;
    right: 56px;                /* 停止ボタン(28px+右16px)のすぐ左 */
    height: 44px;               /* 説明文バーと同じ高さで上下中央 */
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 11;
}

/* 色味はサイトの雰囲気に合わせる：通常=薄い金茶／表示中=アクセント色 */
.hero-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    background: #d8cca6;
    border: none;
    cursor: pointer;
    transition: background var(--tr);
}

.hero-dot--active {
    background: var(--rd-accent, #6b6356);
}


/* ----------------------------------------------------------
   7. メニューパネル（PC・SP共通：画面上からスライドして開く・黒透過）
   ---------------------------------------------------------- */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 190;
    display: none;
}
.drawer-overlay.is-open { display: block; }

/* ----------------------------------------------------------
   メニュー専用ページ（menu.html）だけの調整
   メニューはJSで組み立てるため、組み上がるまでのごく短い間に
   「空の本文＋フッター」が先に見えてしまい、動きが2段階（もたつき）に見える。
   このページではその2つを最初から出さず、画面を白1色にしておくことで、
   メニューが上から降りてくる1動作だけが見えるようにする。
   目印の .menu-page-wrap は parts/1000050_menu_main.html に付けている。
   ---------------------------------------------------------- */
.menu-page-wrap {
    min-height: 100vh;
    background: #1a1a1a;     /* メニューの地色と同じ。切り替わりが目立たない */
}
.menu-page-wrap ~ .l-footer { display: none; }
.menu-page-wrap--white { background: #fff; }   /* 白いメニューページの地色 */

.l-drawer {
    position: fixed;
    inset: 0 0 auto 0;              /* 画面上部に全幅で配置 */
    width: 100%;
    max-height: 100vh;
    background: linear-gradient(to bottom, rgba(25,25,25,.94) 0%, rgba(30,30,30,.9) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    transform: translateY(-100%);   /* 上から降りてくる */
    transition: transform .3s ease;
    z-index: 200;
    overflow-y: auto;
    padding: 0 0 40px;
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.l-drawer.is-open { transform: translateY(0); }

/* パネル先頭：ヘッダーと同じ配置で「参議院」ロゴ＋閉じるボタン */
.drawer-head {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gap);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.drawer-logo {
    display: block;
    height: 56px;
    width: auto;
    margin: 10px 0;
}
.drawer-close-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: var(--radius);
    color: #fff;
    cursor: pointer;
    padding: 8px 16px;
    font-size: var(--fz-sm);
    font-family: var(--font-base);
}
.drawer-close-btn:hover { background: rgba(255,255,255,.15); }

.drawer-nav-list__item { border-bottom: 1px solid rgba(255,255,255,.15); }

.drawer-nav-list__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 14px 16px;
    font-size: var(--fz-sm);
    font-family: var(--font-base);
    font-weight: 500;
    text-align: left;
    transition: background var(--tr);
}
.drawer-nav-list__btn::after {
    content: '+';
    font-size: 1.2em;
    font-weight: 400;
    color: rgba(255,255,255,.8);
    transition: transform var(--tr);
}
.drawer-nav-list__btn[aria-expanded="true"]::after { content: '−'; }

.drawer-nav-list__btn:hover { background: rgba(255,255,255,.1); }

.drawer-sub-list { display: none; background: transparent; }
.drawer-sub-list.is-open { display: block; }

.drawer-sub-list__link {
    display: block;
    padding: 11px 20px;
    color: rgba(255,255,255,.85);
    font-size: var(--fz-sm);
    border-bottom: 1px solid rgba(255,255,255,.08);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--tr);
}
/* 項目の頭に矢印（▶）を付ける（広報課依頼 2026-07-21。矢印の分だけ行頭が字下げされる。
   黒パネル=白矢印／白パネル=黒矢印（文字色に追従）。SPアコーディオン時も共通で効く。
   display:inline-block でホバー時の下線を矢印には引かせない（下線は文字部分だけ・ボス指示） */
.drawer-sub-list__link::before {
    content: '\25B6';
    display: inline-block;
    font-size: .55em;
    margin-right: 8px;
    vertical-align: 2px;
}
.drawer-sub-list__link:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
    /* ホバーしたことが分かるようアンダーラインを出す */
    text-decoration: underline;
}

.drawer-nav-list__link-en {
    display: none; /* ドロワー内のEnglishは非表示（ヘッダー1行目に表示済み） */
}

/* ── PC時のメニュー表示（宮内庁HP風の全面パネル）──
   「メニュー」ボタン押下で画面上から降りてきて4カテゴリを一覧表示する。
   SP（〜1070px）は同じ黒透過パネルをアコーディオンで表示 */
@media (min-width: 1071px) {
    .drawer-nav-list {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px 36px;
        align-items: start;
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 28px var(--gap) 0;
    }
    .drawer-nav-list__item { border-bottom: none; }

    /* カテゴリ名は開閉ボタンではなく見出しとして表示 */
    .drawer-nav-list__btn {
        pointer-events: none;
        /* カテゴリ名はゴシック体（広報課依頼 2026-07-21で明朝体から変更） */
        font-family: var(--font-base);
        font-size: 1.25rem;
        font-weight: 700;
        padding: 6px 4px 10px;
        border-bottom: 2px solid var(--rd-bronze);   /* 黄色→コンテンツ見出し縦線と同じメタル色（ボス指示 2026-07-21） */
        margin-bottom: 4px;
    }
    .drawer-nav-list__btn::after { content: none; }

    /* サブメニューは常時展開。行頭は少し字下げする（広報課依頼 2026-07-21） */
    .drawer-sub-list { display: block; }
    .drawer-sub-list__link {
        padding: 10px 4px 10px 10px;
        border-bottom: 1px solid rgba(255,255,255,.12);
        white-space: normal;
    }

    /* English行はグリッドのセルにしない（非表示のまま） */
    .drawer-nav-list__item:has(.drawer-nav-list__link-en) { display: none; }
}


/* ツールチップ付きカード — 吹き出しが前面に出るよう overflow を解除 */

/* ツールチップ付きボタン */

/* 上向き三角（枠線用） */
/* 上向き三角（白塗り） */

/* ホバーで表示（下） */

/* 上表示モード（JSが .tip-above クラスを付与） */

/* セクション見出し共通（明朝・統一サイズ） */

/* ニュース本文リンク型カード（参議院の動き / 会議の案内） */
/* 内側の枠線なし・外側の top-card 枠線を共用して1枚のカードに見せる */

/* 参議院の動き カード */

/* 会議の案内 カード */

 /* #B71C1C → #9B1C1C（コントラスト比 5.6:1、AA合格） */


/* パネル（カード）型リンク */


/* バナー行2：お知らせ（左）＋ バナー群（右） */


/* サイドバーのナビリスト（subpage用） */

/* サイドバーのお知らせリスト */

/* サイドバーのバナーグループ */

/* サイドバーの contact-btn */


/* ----------------------------------------------------------
   15. フッター
   ---------------------------------------------------------- */
/* 参考デザイン（20260709.html）準拠：磨りガラス＋黒文字（黄土色ベタ塗りを廃止） */
.l-footer {
    background: rgba(168, 160, 151, .6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0,0,0,.1);
    color: #1e1c1a;
    padding: 16px 0 0;
    margin-top: 48px;
}

/* フッター内側の幅・余白 */
.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gap);
}

/* 住所＋「アクセス」ボタンの行 */
.footer-address-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    margin-bottom: 14px;
}

.footer-address {
    font-size: var(--fz-sm);
    font-style: normal;
    color: #1e1c1a;
    line-height: 1.6;
}

/* 「アクセス」ボタン：明るいボタン地＋黒系の文字（ボス指定：黒系でないと読めない） */
.footer-access-link {
    color: #1e1c1a;
    font-size: var(--fz-sm);
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(255,255,255,.9);
    border-radius: var(--radius);
    padding: 5px 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--tr);
}
.footer-access-link:hover { background: rgba(255,255,255,.8); color: #1e1c1a; text-decoration: none; }

/* 利用案内・著作権・免責事項などのリンク行（|区切り） */
.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 14px 0;
}
.footer-links li + li::before {
    content: '｜';
    color: rgba(0,0,0,.35);
    padding: 0 4px;
}
.footer-links__link {
    color: #1e1c1a;
    font-size: var(--fz-xs);
    text-decoration: none;
    transition: color var(--tr);
}
.footer-links__link:hover { color: #1e1c1a; text-decoration: underline; }

/* コピーライト行 */
.footer-copyright {
    display: flex;
    justify-content: center;
    width: 100%;
    font-size: var(--fz-xs);
    color: #1e1c1a;
    text-align: center;
    padding: 10px 0;
    margin: 0;
}


/* ----------------------------------------------------------
   16. レスポンシブ ヘッダー（ハンバーガー：max-width 1070px）
   検索ボタンが見切れる1068px以下をカバーするよう安全マージンを見て1070pxに設定。
   PCサイズ（1071px以上）では拡大・最大フォント時でも標準/拡大/最大ボタンと
   グローバルメニューを常に表示する（フォントサイズによる自動ハンバーガー化はしない）。
   ---------------------------------------------------------- */
@media (max-width: 1070px) {
    .gnav-list { display: none; }
    .fontsize-switch { display: none; }
    /* ハンバーガー（3本線）の見た目は全サイズ共通のため、このブロックでは指定しない
       （5c. の .header-menu-btn を参照） */

    /* サイト内検索はアイコンのみのボタンにする（文字は隠す） */
    .header-search-link {
        border: none;
        padding: 6px;
        margin-left: 0;
        font-size: var(--fz-sm);
    }
    .header-search-link:hover { background: none; }
    .header-search-link .material-symbols-outlined { font-size: 1.4em; }
    .header-search-link__label { display: none; }

    /* ロゴはSPでは小さめに */
    .gnav-logo { margin-right: 10px; }
    .gnav-logo img { height: 34px; margin: 6px 0; }

    /* English ボタン: コンパクトに */
    .gnav-util__lang {
        display: flex;
        font-size: var(--fz-sm);
        padding: 5px 10px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* gnav-util を全幅 */
    .gnav-util {
        gap: 6px;
        flex: 1;
        margin-left: 0;
        min-width: 0;
        justify-content: flex-end;
    }

    /* ハンバーガーをヒーロー上に・スクロール固定 */
    .l-hero   { order: 2; margin-top: 0; } /* 黒透過ヘッダーの下に潜り込ませる */
    .l-header { order: 1; position: fixed; top: 0; left: 0; right: 0; z-index: 200; }

    /* ナビバーの高さを少し確保 */
    .gnav-inner { padding: 6px var(--gap); }
}

/* ----------------------------------------------------------
   16b. レスポンシブ ヘッダー（拡大フォント専用：max-width 1135px）
   実測の結果、拡大時は1130px未満でサイト内検索ボタンが見切れるため、
   1135pxを安全マージンとしてブレークポイントを設定する。
   ---------------------------------------------------------- */
@media (max-width: 1135px) {
    /* 内容は16.と同じ（拡大文字時は1135px以下でハンバーガー化）。修正時は16.・16b.・16c.の3箇所を揃えて直すこと。
       ハンバーガーの見た目は全サイズ共通のため、ここでは指定しない */
    html.font-lg .gnav-list { display: none; }
    html.font-lg .fontsize-switch { display: none; }
    html.font-lg .header-search-link {
        border: none;
        padding: 6px;
        margin-left: 0;
        font-size: var(--fz-sm);
    }
    html.font-lg .header-search-link:hover { background: none; }
    html.font-lg .header-search-link .material-symbols-outlined { font-size: 1.4em; }
    html.font-lg .header-search-link__label { display: none; }
    html.font-lg .gnav-util__lang {
        display: flex;
        font-size: var(--fz-sm);
        padding: 5px 10px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    html.font-lg .gnav-util {
        gap: 6px;
        flex: 1;
        margin-left: 0;
        min-width: 0;
        justify-content: flex-end;
    }
    html.font-lg .l-hero   { order: 2; margin-top: 0; }
    html.font-lg .l-header { order: 1; position: fixed; top: 0; left: 0; right: 0; z-index: 200; }
    html.font-lg .gnav-inner { padding: 6px var(--gap); }
}

/* ----------------------------------------------------------
   16c. レスポンシブ ヘッダー（最大フォント専用：max-width 1199px）
   最大(font-xl)は1200px程度をPCサイズの基準とする（ボス指定）。
   1199px以下ではタブレット表示に切り替える。
   ---------------------------------------------------------- */
@media (max-width: 1199px) {
    /* 内容は16.と同じ（最大文字時は1199px以下でハンバーガー化）。修正時は16.・16b.・16c.の3箇所を揃えて直すこと。
       ハンバーガーの見た目は全サイズ共通のため、ここでは指定しない */
    html.font-xl .gnav-list { display: none; }
    html.font-xl .fontsize-switch { display: none; }
    html.font-xl .header-search-link {
        border: none;
        padding: 6px;
        margin-left: 0;
        font-size: var(--fz-sm);
    }
    html.font-xl .header-search-link:hover { background: none; }
    html.font-xl .header-search-link .material-symbols-outlined { font-size: 1.4em; }
    html.font-xl .header-search-link__label { display: none; }
    html.font-xl .gnav-util__lang {
        display: flex;
        font-size: var(--fz-sm);
        padding: 5px 10px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    html.font-xl .gnav-util {
        gap: 6px;
        flex: 1;
        margin-left: 0;
        min-width: 0;
        justify-content: flex-end;
    }
    html.font-xl .l-hero   { order: 2; margin-top: 0; }
    html.font-xl .l-header { order: 1; position: fixed; top: 0; left: 0; right: 0; z-index: 200; }
    html.font-xl .gnav-inner { padding: 6px var(--gap); }
}


/* ----------------------------------------------------------
   16d. レスポンシブ コンテンツ（タブレット：max-width 970px）
   ---------------------------------------------------------- */
@media (max-width: 970px) {
    :root { --gap: 14px; }

    .l-hero { max-height: 416px; aspect-ratio: auto; height: 416px; } /* ヘッダー(実測58px)分＋もう一段58px分を上乗せ */
}


/* ----------------------------------------------------------
   17. レスポンシブ（スマホ：max-width 600px）
   ---------------------------------------------------------- */
@media (max-width: 600px) {
    :root { --gap: 12px; }

    .l-hero { height: 316px; } /* ヘッダー(実測58px)分＋もう一段58px分を上乗せ */

    /* スライダーの操作部・説明文はSPでは小さく */
    .l-hero__caption { height: 34px; font-size: 0.6875rem; padding: 0 104px 0 8px; }  /* 右padding=ドット＋停止ボタンの分 */
    .hero-play-toggle { right: 6px; bottom: 5px; width: 24px; height: 24px; font-size: 9px; }
    .hero-dots { height: 34px; right: 38px; gap: 5px; }
    .hero-dot { width: 8px; height: 8px; }
    .hero-arrow { width: 34px; height: 34px; font-size: 15px; }
    .hero-arrow--prev { left: 10px; }
    .hero-arrow--next { right: 10px; }
    .l-hero__overlay { padding: 14px 16px; }

    .footer-address-row { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================
   18. リニューアルメインコンテンツ（20260625_revised.html 準拠）
   トップビュー直下〜フッター手前まで
   ========================================================== */
:root {
    --rd-accent:     #6b6356;
    --rd-accent-lt:  #9e9488;
    --rd-bronze:     #8a7a5a;
    --rd-border:     #e4e0db;
    --rd-bg-sub:     #f9f8f6;
    --rd-text:       #0f0e0d;
    --rd-text-muted: #6b6660;
    --rd-radius-sm:  6px;
    --rd-radius-md:  10px;
}

.rd-container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* 見出し（統一）。フォントは新着情報・トピックス等と同じゴシック（本文書体）、
   サイズは 20260709.html の見出し（22px）に合わせる（ボス指示 2026-07-21） */
.rd-section-header, .rd-main-title-flex {
    font-family: var(--font-base);
    font-size: 22px;   /* 20260709.htmlと同じ固定22px（文字サイズ切替でも1行を維持） */
    font-weight: 700;
    color: var(--rd-text);
    border-left: 4px solid var(--rd-bronze);
    padding: 4px 0 4px 14px;
    margin-bottom: 20px;
    display: block;
    letter-spacing: 0.02em;
}
/* 「参議院の動き」見出し行：左=見出し／右=バックナンバーリンク */
.rd-main-title-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.rd-main-title-flex a { font-size: 0.9375rem; font-weight: 700; color: #000; }

/* 2カラムレイアウト */
.rd-two-col-row {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 32px;
    margin-bottom: 32px;
}
@media (max-width: 900px) {
    /* SPは「参議院の動き」→「ピックアップ」の順（広報課依頼 2026-07-21でこの順に変更） */
    .rd-two-col-row { grid-template-columns: 1fr; }
}

/* アコーディオンボックス */
.rd-accordion-box {
    background: #fff;
    border: 1px solid #9c8a6e;
    border-radius: var(--rd-radius-md);
    margin-bottom: 12px;
    overflow: hidden;
}
.rd-accordion-box:last-child { margin-bottom: 0; }
.rd-box-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--rd-text);
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: #fefefd;
    border-left: 4px solid transparent;
    border-radius: var(--rd-radius-md) var(--rd-radius-md) 0 0;
    transition: background .15s, border-left-color .15s;
}
.rd-box-title::-webkit-details-marker { display: none; }
/* 元の挙動（文字・縦線#6b5842）＋背景のみ指示F/Gで--clr-hoverに変更 */
.rd-box-title:hover {
    background: var(--clr-hover);
    color: #6b5842;
    border-left-color: #6b5842;
}
.rd-box-title::after { content: '›'; font-size: 1.125rem; color: var(--rd-bronze); line-height: 1; }
details[open] .rd-box-title { border-bottom: 1px solid var(--rd-border); }
details[open] .rd-box-title::after { transform: rotate(90deg); display: inline-block; }
.rd-accordion-content { padding: 16px 20px 18px; }

/* ニュースリスト（アコーディオン内） */
.rd-movement-list { display: flex; flex-direction: column; }
.rd-movement-item {
    display: flex; gap: 16px; padding: 10px 0;
    border-bottom: 1px solid #f0ede8;
    color: var(--rd-text); font-size: 0.9375rem;
    align-items: baseline;
}
.rd-movement-item:last-child { border-bottom: none; }
.rd-movement-item:hover { color: var(--rd-accent); text-decoration: underline; }
/* 日付列の幅は固定pxではなく文字サイズ連動（8em）にする：
   文字サイズ「拡大/最大」でも日付列が突き破らず、文章の開始位置が全行で揃う（テーブル状の見た目を維持） */
.rd-movement-date { color: var(--rd-text-muted); min-width: 9em; font-size: 0.75rem; flex-shrink: 0; }
.rd-movement-text { font-weight: 500; line-height: 1.45; }

/* 審議中継バナー */
/* 3列レイアウトに合わせ、審議中継のバナーは上下（縦）に並べる */
.rd-virtual-banner {
    display: flex;
    justify-content: center;
    transition: opacity .15s;
}
.rd-virtual-banner:hover { opacity: .7; }
.rd-virtual-banner img { display: block; }

/* 国際関係グリッド */

/* 「ピックアップ」見出しも他の見出しと同じゴシック・22px固定（ボス指示 2026-07-21） */
.rd-pickup-title { font-family: var(--font-base); font-size: 22px; font-weight: 700; color: var(--rd-text); margin-bottom: 12px; }

/* タイルグリッド */
.rd-content-section { margin-bottom: 28px; }
.rd-tile-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 14px;
    background: var(--rd-bg-sub);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-md);
}
@media (max-width: 768px) { .rd-tile-grid { grid-template-columns: repeat(2, 1fr); } }
.rd-tile-item {
    background: #fefefd;
    border: 1px solid #9c8a6e;
    border-radius: var(--rd-radius-sm);
    padding: 18px 10px;
    text-align: center;
    color: var(--rd-text);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    transition: all .15s;
    text-decoration: none;
}
/* 元の挙動（枠線#6b5842）＋指示分のみ変更：背景=--clr-hover（指示F/G）・文字=明るい同系ブロンズ（指示H） */
.rd-tile-item:hover {
    border-color: #6b5842;
    background: var(--clr-hover);
    color: var(--rd-bronze);
    text-decoration: none;
}
.rd-tile-label { font-size: 1rem; font-weight: 500; line-height: 1.35; }
.rd-tile-icon { font-size: 1.625rem; color: var(--rd-bronze); }
.rd-tile-icon img { width: 26px; height: 26px; display: block; }

/* ニュース一覧 */

/* お知らせとサイドバナーの親コンテナ */
.rd-news-container {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 32px;
    margin-bottom: 60px;
    align-items: start;
}
@media (max-width: 900px) {
    .rd-news-container { grid-template-columns: 1fr; gap: 12px; }
    .rd-side-banners { margin-top: 0; }
}
.rd-side-banners { display: flex; flex-direction: column; gap: 20px; margin-top: 70px; }

/* ご意見・ご質問 */
.rd-contact-area { text-align: center; margin-bottom: 8px; }
.rd-contact-btn {
    display: inline-block; padding: 14px 36px;
    border: 1.5px solid var(--rd-accent); color: var(--rd-accent);
    border-radius: 9999px; /* 左右は完全な半円（ボス指定） */
    font-size: 1rem; font-weight: 600;
    transition: background .15s, color .15s, border-color .15s;
}
/* ホバーは共通の薄い背景色＋文字・枠は同系の明るい黄土色（青リンク色にはしない・ボス指定） */
.rd-contact-btn:hover {
    background: var(--clr-hover);
    color: var(--rd-bronze);
    border-color: var(--rd-bronze);
    text-decoration: none;
}


/* ----------------------------------------------------------
   21. 20260709.html デザイン取り込み分（3列レイアウト・カルーセル等）
   ---------------------------------------------------------- */

/* ページ全体の薄い背景模様（参考デザインの std.png 相当） */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url('../images/back_ground.png');
    background-repeat: repeat;
    opacity: .03;
    z-index: -1;
    pointer-events: none;
}

/* ── ピックアップ カルーセル（自動送り＋左右ボタン＋ドット） ── */
.rd-pickup-carousel {
    position: relative;
    width: 100%;
    height: 110px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-sm);
}
.rd-pickup-track { position: relative; width: 100%; height: 100%; }
.rd-pickup-banner {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease, visibility .5s ease;
    z-index: 1;
}
.rd-pickup-banner.is-active { opacity: 1; visibility: visible; z-index: 2; }
.rd-pickup-banner img {
    width: 100%;
    height: 100%;
    /* 上下を少し切りつつ横幅いっぱいに表示する（広報課依頼 2026-07-21・80周年バナー等）。
       ただしPCでは枠が280x110（約2.5:1）でバナー（約4:1）より縦長のため、
       cover にすると左右が切れる。全体を見せるため contain にする（上下に余白が出る） */
    object-fit: contain;
    background: #fff;
    display: block;
}
/* タブレット・スマホ（1列表示）：枠が横に広くなり上下が大きく切れてしまうため、
   枠自体をバナーの縦横比（約4:1）に合わせて、上下を切らずに全体表示する（ボス指示 2026-07-22） */
@media (max-width: 900px) {
    .rd-pickup-carousel { height: auto; aspect-ratio: 4 / 1; }
    .rd-pickup-banner img { object-fit: contain; }
}
.rd-pickup-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.4);
    color: #fff;
    border: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.6875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background .2s;
    user-select: none;
}
.rd-pickup-btn:hover { background: rgba(0,0,0,.7); }
.rd-pickup-btn--prev { left: 8px; }
.rd-pickup-btn--next { right: 8px; }
.rd-pickup-dots {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
}
.rd-pickup-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.6);
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.rd-pickup-dot.is-active { background: var(--rd-accent); transform: scale(1.15); }

/* ── 3列情報エリア（会議のご案内／審議中継／議長）──
   20260709.html の .bottom-info-3col ＋ .info-tile-link 準拠。
   3枚とも同じ高さ・同じカードデザインに揃える */
.rd-info-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 24px 0 32px;
    align-items: stretch;
}
.rd-info-3col > * { margin-bottom: 0; }
@media (max-width: 900px) {
    .rd-info-3col { grid-template-columns: 1fr; gap: 16px; }
    /* SPは「議長あいさつ」→「会議のご案内」→「審議中継」の順（広報課依頼 2026-07-21） */
    .rd-info-3col .rd-tile-link--gichou { order: -1; }
    /* 1列表示ではカードが「他のカードに合わせて伸びる」仕組みが働かないため、
       写真エリアの高さを明示する（これが無いと高さ0になり写真が消える） */
    .rd-info-3col .rd-tile-link--gichou .rd-gichou-photo { flex: 0 0 auto; height: 96px; }
}

/* カード本体（20260709.html の info-tile-link と同寸・同配色）。
   高さは「参議院インターネット審議中継」の説明文がちょうど収まる分だけ＝
   文の下に余白を作らない（3枚ともこの高さに揃う） */
.rd-tile-link {
    display: flex;
    flex-direction: column;
    background: #fcfbf9;
    border: 1px solid #8a7c6f;
    border-left: 6px solid #8a7a5a;
    border-radius: var(--rd-radius-md);
    /* 上下の余白を詰めてカードの縦幅を抑える（下の余白は上と同程度まで潰す・ボス指示 2026-07-21） */
    padding: 10px 24px 10px;
    height: 100%;
    color: var(--rd-text);
    text-decoration: none;
    overflow: hidden;
    transition: all .15s;
}
/* 指示B「他のパネルボタン（.rd-tile-item）と同じ動き」：枠線#6b5842・背景--clr-hover・文字ブロンズ。
   左の太い縦線（6px）だけは常時ブロンズのまま。浮く動きは無し */
.rd-tile-link:hover {
    border-color: #6b5842;
    border-left-color: #8a7a5a;
    background: var(--clr-hover);
    text-decoration: none;
}
.rd-tile-link:hover h4,
.rd-tile-link:hover p { color: var(--rd-bronze); }
/* 見出しは「参議院の動き」と同じフォント（明朝）・同じ文字サイズ */
.rd-tile-link h4 {
    /* 新着情報等と同じゴシック体・最大幅で1行に収まるサイズ（20260709.html準拠・ボス指示 2026-07-21）。
       文字サイズ切替（拡大・最大）でも1行を保つため固定pxにする */
    font-family: var(--font-base);
    font-size: 17px;
    font-weight: 700;
    color: var(--rd-text);
    letter-spacing: 0.02em;
    margin: 0 0 8px;
    border-bottom: 1px solid #e4e0db;
    padding-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rd-tile-link__icon { font-size: 1.125rem; }
/* 説明文のサイズは「高さを抑えつつ読める大きさ」（2026-07-21ボス指示で13px→14pxへ少し拡大。
   増えた高さ分は上下余白の圧縮で吸収し、カードの縦幅はほぼ変えない） */
.rd-tile-link p {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.55;
    color: #383430;
    margin: 0;
}

/* 議長カード：写真は「採用情報」などのバナーと同じく原寸（488×193）を上限に表示する
   ＝スマホ等でカードが広くなっても画像は原寸より大きくならず、高さがほぼ一定になる。
   カードが狭いときは実比率のまま縮小（顔は切れない）。
   写真＋名前の全体を薄い枠線で囲み、カード内で中央寄せ */
/* 議長の写真は小さくして、カードの高さを他の2枚（青線の縦幅）に揃える（広報課依頼 2026-07-21）。
   名前は写真に重ねず左側に置き、写真は右側に小さく表示する */
/* カードの高さは「会議のご案内・審議中継（文章側）」の高さで決まり、
   議長カードはそれに合わせる（＝カードを写真で高くしない）。
   写真はカードの残り空間いっぱいに自動で収まる（空間内で最大サイズ）。
   写真まわりの余白は極力潰し、下にわずかに残る分は写真の枠のように見える程度（ボス指示）。
   文字サイズを拡大・最大にすると文章側が伸びる分だけカードも高くなり、
   写真もその空間の上下中央で一緒に大きくなる */
.rd-tile-link--gichou { padding-bottom: 4px; padding-right: 10px; }  /* 右余白を詰めて写真を右端寄りに */
.rd-tile-link--gichou h4 { margin-bottom: 4px; margin-right: 14px; } /* 見出しの下線は他カードと揃える */
.rd-tile-link--gichou .rd-gichou-photo {
    display: flex;                  /* 名前=左・写真=右 */
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 0;
    flex: 1 1 0;                    /* カードの高さには影響させず、残り空間を全部使う */
}
/* pictureタグ（画像の自動切替用）は箱として扱わず、中のimgを直接flexに参加させる */
.rd-tile-link--gichou .rd-gichou-photo picture { display: contents; }
.rd-tile-link--gichou .rd-gichou-photo img {
    /* PC（横長の枠）・1列表示：gichou_sp.png を切らずに全体表示し、右端に寄せる（枠線なし） */
    height: 100%;
    width: auto;
    max-width: 100%;
    min-width: 0;
    object-fit: contain;
    object-position: right center;
    display: block;
    border: none;
    border-radius: var(--rd-radius-sm);
    transition: opacity .15s;
}

/* 3列のまま幅が狭いとき（901〜1100px）：gichou_bg.png（pictureタグが自動で切替）を
   上下いっぱいに敷き、名前は画像の左側の白い帯の上に重ねる（ボス指示 2026-07-21） */
@media (min-width: 901px) and (max-width: 1100px) {
    .rd-tile-link--gichou .rd-gichou-photo {
        display: block;
        position: relative;
    }
    .rd-tile-link--gichou .rd-gichou-photo img {
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        /* 右端を基準に表示する（議事堂・議長側は絶対に切らない。
           はみ出す分は左の白い帯側が切れるので、重ねた名前は白い部分に乗る） */
        object-position: right center;
    }
    .rd-gichou-name {
        position: absolute;
        left: 18%;
        top: 50%;
        transform: translate(-50%, -50%);
        white-space: nowrap;
    }
}
/* 写真のホバーは他の画像バナー類と同じ透過（opacity .7）に統一（ボス指定） */
.rd-tile-link--gichou:hover .rd-gichou-photo img { opacity: .7; }
.rd-gichou-name {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--rd-text);
    white-space: nowrap;
}

/* トピックス項目の頭に ▸ を付ける（参考デザイン準拠） */
.rd-movement-list--topics .rd-movement-item::before {
    content: '\25B8';
    color: var(--rd-bronze);
    font-size: 1.125rem;
    margin-right: 8px;
    flex-shrink: 0;
}

/* ── 事務局からのお知らせ：磨りガラス枠 ── */
.rd-news-container { gap: 40px; }
.rd-news-box {
    padding: 32px 40px;
    background: rgba(249, 248, 246, .85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-md);
}
.rd-news-divider { border: none; border-top: 1px solid var(--rd-border); margin: 0 0 10px; }
@media (max-width: 900px) {
    .rd-news-box { padding: 20px; }
}

/* お知らせ横のバナー列（縦並び）＋Xロゴ */
.rd-news-container .rd-side-banners { margin-top: 0; gap: 12px; }
.rd-x-link {
    display: block;
    width: 60px;
    margin: 40px auto 0;
    transition: opacity .2s;
}
.rd-x-link:hover { opacity: .7; }
.rd-x-link img { width: 100%; height: auto; display: block; }


/* ==========================================================
   19. 個別ページ（下層ページ）
   ヘッダーはトップと全く同じ構成（0020_menuを共用）のまま、
   .sub-header-wrap で包んだときだけ白ベース配色に切り替える。
   ========================================================== */

/* ── 白ベースヘッダー ──
   位置：ヒーローが無いので重ねず、常に画面上部に固定表示する（sticky）。
   PC・SPとも同じ挙動（JSのis-fixed切替に頼らず、CSSのみで常時固定）。
   sticky は .sub-header-wrap（親は body で十分な高さがある）に付与する。
   .l-header 自体に付けると、直近の親である .sub-header-wrap の高さが
   ヘッダー自身とほぼ同じで「留まる余地」が無く、固定されない不具合になるため。 */
.sub-header-wrap {
    position: sticky;
    top: 0;
    z-index: 200;
}
.sub-header-wrap .l-header,
.sub-header-wrap .l-header.is-fixed,
html.font-lg .sub-header-wrap .l-header,
html.font-xl .sub-header-wrap .l-header {
    position: static;
    background: #fff;
    border-bottom: 1px solid var(--clr-border);
}
.sub-header-wrap .l-header::before { content: none; } /* 黒透過グラデ＋ぼかしを無効化 */

/* ロゴ（白文字画像）を黒に反転 */
.sub-header-wrap .gnav-logo img { filter: brightness(0); }

/* 文字サイズ切替ボタン：白地・黒文字 */
.sub-header-wrap .fontsize-switch__btn {
    background: #fff;
    border-color: var(--clr-border-card);
    color: var(--clr-text);
}
.sub-header-wrap .fontsize-switch__btn:hover,
.sub-header-wrap .fontsize-switch__btn[aria-pressed="true"] {
    background: var(--clr-hover);
}

/* English ボタン */
.sub-header-wrap .gnav-util__lang {
    border-color: var(--clr-border-card);
    color: var(--clr-text);
}
.sub-header-wrap .gnav-util__lang:hover {
    background: var(--clr-hover);
    color: var(--clr-text);
}

/* サイト内検索ボタン（リンク） */
.sub-header-wrap .header-search-link {
    background: #fff;
    border-color: var(--clr-border-card);
    color: var(--clr-text);
}
.sub-header-wrap .header-search-link:hover {
    background: var(--clr-hover);
    border-color: var(--clr-border-card);
    color: var(--clr-text);
}

/* メニューボタン（PC枠線型・SP3本線とも黒に） */
.sub-header-wrap .header-menu-btn {
    background: #fff;
    border-color: var(--clr-border-card);
    color: var(--clr-text);
}
.sub-header-wrap .header-menu-btn:hover,
.sub-header-wrap .header-menu-btn[aria-expanded="true"] {
    background: var(--clr-hover);
    border-color: var(--clr-border-card);
}
.sub-header-wrap .header-menu-btn__label { color: var(--clr-text); }
.sub-header-wrap .header-menu-btn .bar { background: var(--clr-text); }

/* ── 白ベースのメニューパネル（ドロワー）──
   開閉の動き・レイアウトはトップと共通のまま、配色だけ白地・黒文字にする */
.sub-header-wrap .l-drawer ,
.l-drawer--white {
    background: linear-gradient(to bottom, rgba(255,255,255,.97) 0%, rgba(250,249,247,.95) 100%);
    color: var(--clr-text);
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.sub-header-wrap .drawer-logo ,
.l-drawer--white .drawer-logo { filter: brightness(0); }
.sub-header-wrap .drawer-close-btn ,
.l-drawer--white .drawer-close-btn {
    border-color: var(--clr-border-card);
    color: var(--clr-text);
}
.sub-header-wrap .drawer-close-btn:hover ,
.l-drawer--white .drawer-close-btn:hover { background: var(--clr-hover); }
.sub-header-wrap .drawer-nav-list__item ,
.l-drawer--white .drawer-nav-list__item { border-bottom-color: var(--clr-border); }
.sub-header-wrap .drawer-nav-list__btn ,
.l-drawer--white .drawer-nav-list__btn { color: var(--clr-text); }
.sub-header-wrap .drawer-nav-list__btn::after ,
.l-drawer--white .drawer-nav-list__btn::after { color: var(--clr-text-sub); }
.sub-header-wrap .drawer-nav-list__btn:hover ,
.l-drawer--white .drawer-nav-list__btn:hover { background: var(--clr-hover); }
.sub-header-wrap .drawer-sub-list__link ,
.l-drawer--white .drawer-sub-list__link {
    color: var(--clr-text);
    border-bottom-color: var(--clr-border);
}
.sub-header-wrap .drawer-sub-list__link:hover ,
.l-drawer--white .drawer-sub-list__link:hover {
    background: var(--clr-hover);
    color: var(--clr-text);
    /* 統一ルール（ボス指定）：メニュー内のテキストリンクは黒・白ともホバーで下線 */
    text-decoration: underline;
}

/* ── 白メニューパネル内の下部エリア（公式X・ご意見・ご質問・サブリンク）──
   文字色は他のメニュー項目と同じ黒に揃える */
.sub-header-wrap .drawer-bottom__btn ,
.l-drawer--white .drawer-bottom__btn {
    background: #fff;
    border-color: #8a7c6f;
    color: var(--clr-text);
}
/* ホバー色は他のメニュー項目（議員情報など）と同じ（ボス指定） */
.sub-header-wrap .drawer-bottom__btn:hover ,
.l-drawer--white .drawer-bottom__btn:hover {
    background: var(--clr-hover);
    color: var(--clr-text);
    border-color: #8a7c6f;
}
.sub-header-wrap .drawer-bottom__x ,
.l-drawer--white .drawer-bottom__x { filter: none; }
.sub-header-wrap .drawer-bottom__links a ,
.l-drawer--white .drawer-bottom__links a { color: var(--clr-text); text-decoration: none; }
.sub-header-wrap .drawer-bottom__links a:hover ,
.l-drawer--white .drawer-bottom__links a:hover { color: #6b5842; text-decoration: underline; }

/* ── 個別ページ本文 ── */
.sub-main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 18px var(--gap) 56px;
}

/* パンくず */
.sub-breadcrumb {
    font-size: var(--fz-xs);
    color: var(--clr-text-sub);
    margin: 0 0 24px;
}
.sub-breadcrumb a { color: var(--clr-link); }

/* ページ大見出し（トップの明朝＋ブロンズ左線と共通の .rd-section-header を併用） */
.sub-page-title { font-size: 1.5rem; }

/* 記事 */
.sub-article { max-width: 860px; margin: 0 auto; }
.sub-article__title {
    font-family: var(--font-mincho);
    font-size: 1.3125rem;
    font-weight: 700;
    color: var(--clr-text);
    /* 下線は「参議院の動き」見出し左の縦棒と同じ色（指示書_20260714【色を変更】対応） */
    border-bottom: 2px solid var(--rd-bronze);
    padding-bottom: 8px;
    margin: 28px 0 6px;
}
/* 記事の日付（右寄せ） */
.sub-article__date {
    text-align: right;
    font-size: var(--fz-sm);
    color: var(--clr-text-sub);
    margin: 0 0 20px;
}
.sub-article__figure { margin: 0 0 24px; text-align: center; }
/* 画像はブロック要素になるためtext-alignでは中央にならない。margin:autoで確実に中央へ */
.sub-article__figure img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.sub-article__body {
    font-size: var(--fz-base, 1rem);
    line-height: 1.9;
}


/* ----------------------------------------------------------
   21b. メニューパネルを閉じるときの「その場で消す」動き
   閉じるときは上へスライドさせず即座に消す（ボス指定）。
   開くときのスライドは通常どおり（このクラスはJSが閉じる瞬間だけ付ける）
   ---------------------------------------------------------- */
.l-drawer.is-instant,
.drawer-overlay.is-instant {
    transition: none !important;
}

/* ----------------------------------------------------------
   22. メニュー下部（公式X・ご意見・ご質問・サブリンク）
   （指示書_20260714：宮内庁HPのメガメニュー下部を参考。SNSはXのみ。
     ※サイトメニューページ(22b)は2026-07-15に廃止済み）
   ---------------------------------------------------------- */

/* 22a. メニューパネル（トップ・黒透過）内の下部エリア */
.drawer-bottom {
    max-width: var(--max-width);
    margin: 8px auto 0;
    padding: 24px var(--gap) 40px;
}
/* 「公式X」「ご意見・ご質問」の2ボタン（狭い画面では折り返し） */
.drawer-bottom__btns {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.drawer-bottom__btn {
    flex: 1 1 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: var(--radius);
    background: rgba(255,255,255,.08);
    color: #fff;
    padding: 14px 20px;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--tr);
}
.drawer-bottom__btn:hover { background: rgba(255,255,255,.2); color: #fff; text-decoration: none; }
.drawer-bottom__x { height: 18px; width: auto; filter: brightness(0) invert(1); }
/* 利用案内・著作権・免責事項・サイトマップの行（通常下線なし・ホバーで下線） */
.drawer-bottom__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* アンダーラインは通常は出さず、ホバーしたときだけ出す（ボス指定・メニュー項目と同じ挙動） */
.drawer-bottom__links a {
    color: rgba(255,255,255,.9);
    font-size: var(--fz-sm);
    text-decoration: none;
}
.drawer-bottom__links a:hover { color: #fff; text-decoration: underline; }


/* ----------------------------------------------------------
   23. 今国会情報「委員会」ページ（00010_00000_committee.html・仕様書別紙５）
   ・委員会名のバー（rd-accordion-box/rd-box-title を共用）を div.iinkai-grid で
     囲むと横並び（2〜4列）になる。クリックで9項目がバーの段の下に全幅で開く
     （開閉の動きは js/main.js「7.」、行の生成もJS側）
   ・9項目の表示は文字リンク型（.iinkai-links）とタイルボタン型（--tile）の2種
   ---------------------------------------------------------- */

/* 一覧ページはカードより広め（記事幅860pxだと委員会名が窮屈なため） */
.sub-article--wide { max-width: 1000px; }

/* カテゴリ見出し（常任委員会／特別委員会／調査会／審査会） */
.iinkai-category { margin-top: 36px; }

/* 委員会名バー（開く前のタイトル）を横に並べる（div.iinkai-grid で囲んで使う。
   見本：常任=3列／特別=2列／調査会=4列。タブレットは2列・SPは1列に自動切替） */
.iinkai-grid {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
    /* 同じ段に行数（高さ）の違う委員会名が並んでも、バーの高さは段内で揃う（gridの既定stretch） */
}
/* バーが高くなっても委員会名は上下中央に表示する */
.iinkai-grid .rd-box-title { height: 100%; }
.iinkai-grid--2col { grid-template-columns: repeat(2, 1fr); }
.iinkai-grid--3col { grid-template-columns: repeat(3, 1fr); }
.iinkai-grid--4col { grid-template-columns: repeat(4, 1fr); }
.iinkai-grid .rd-accordion-box { margin-bottom: 0; }

/* 開いた委員会の9項目は、バーの段の下に左右いっぱい（メインコンテンツ最大幅）で表示する。
   バー自体の幅・3列の並びは開いても変わらない（9項目は js/main.js「7.」が
   この全幅の行（.iinkai-panel-row）へ移して表示する）。
   同じグリッド内で別の委員会を開くと、開いていたものは自動で閉じる */
.iinkai-panel-row {
    grid-column: 1 / -1;
    background: #fff;
    border: 1px solid #9c8a6e;
    border-radius: var(--rd-radius-md);
}
/* 開いているバーの位置に合わせてパネルの上の角を直角にする（js/main.js「7.」がクラスを付ける）。
   段の左端のバーを開いたときは左上、右端のバーなら右上を直角にして、タブと綺麗に接続させる。
   中間のバーのときは両角とも丸いまま */
.iinkai-panel-row--flat-left  { border-top-left-radius: 0; }
.iinkai-panel-row--flat-right { border-top-right-radius: 0; }
/* パネルの中では9項目の点線枠を消す（パネル自身の枠と二重の線になるため） */
.iinkai-panel-row .iinkai-links { border: none; }

/* 開いているバー：下方向へ13px伸ばして（12pxの隙間＋1px重ね）パネルに接続する。
   閉じている隣のバーは伸ばさないので、パネルとの間に従来どおり12pxの間隔が残る */
.iinkai-grid details[open] {
    position: relative;
    z-index: 1;                     /* パネル上辺の線より手前に描く */
    margin-bottom: -13px;           /* stretchで確保された高さより13px下まで伸びる */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
}
/* 伸ばした13px分を除いた高さで委員会名を上下中央に保つ */
.iinkai-grid details[open] .rd-box-title { height: calc(100% - 13px); }
@media (max-width: 900px) {
    .iinkai-grid--3col,
    .iinkai-grid--4col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .iinkai-grid--2col,
    .iinkai-grid--3col,
    .iinkai-grid--4col { grid-template-columns: 1fr; }
}

/* 点線枠（別紙５指定）＋9項目を3列で表示（標準パターン） */
.iinkai-links {
    border: 1px dashed #9c8a6e;
    border-radius: var(--rd-radius-sm);
    padding: 14px 18px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 16px;
}
@media (max-width: 600px) {
    .iinkai-links { grid-template-columns: repeat(2, 1fr); }
}
.iinkai-links a { display: inline-block; }
.iinkai-links li::before { content: '\30FB'; color: var(--rd-bronze); }

/* 列数のバリエーション（ul にクラスを足して使う。SPでは3列・4列は自動的に2列になる） */
.iinkai-links--2col { grid-template-columns: repeat(2, 1fr); }
.iinkai-links--3col { grid-template-columns: repeat(3, 1fr); }
.iinkai-links--4col { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 600px) {
    .iinkai-links--3col,
    .iinkai-links--4col { grid-template-columns: repeat(2, 1fr); }
}

/* タイルボタン型（クリック後の9項目をタイルボタンで表示する。
   デザインはトップページのタイル（.rd-tile-item）と同じ流儀：
   枠#9c8a6e・ホバーで枠#6b5842＋背景--clr-hover＋文字ブロンズ。
   列数は上の --2col/--3col/--4col と組み合わせて指定する） */
.iinkai-links--tile {
    gap: 10px;
    padding: 14px;
}
.iinkai-links--tile li::before { content: none; }   /* タイル型では「・」を付けない */
.iinkai-links--tile a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px 8px;
    background: #fefefd;
    border: 1px solid #9c8a6e;
    border-radius: var(--rd-radius-sm);
    text-align: center;
    color: var(--rd-text);
    font-weight: 500;
    text-decoration: none;
    transition: all .15s;
}
.iinkai-links--tile a:hover {
    border-color: #6b5842;
    background: var(--clr-hover);
    color: var(--rd-bronze);
    text-decoration: none;
}

/* 「※以降〜も同じ形式」の注記 */
.iinkai-note {
    color: var(--clr-text-sub);
    font-size: var(--fz-sm);
    line-height: 1.8;
    margin: 10px 0 28px;
}


/* ----------------------------------------------------------
   24. 共通ページテンプレート（000_000_template.html・仕様書別紙４案①）
   ---------------------------------------------------------- */

/* 本文リンク一覧（今回次の項目・バックナンバー共用） */
.tpl-link-list {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
}
.tpl-link-list li {
    border-bottom: 1px solid #eee;
}
.tpl-link-list a {
    display: block;
    padding: 12px 4px;
    color: var(--clr-text);
    text-decoration: none;
    transition: background .15s;
}
.tpl-link-list a::before {
    content: '\25B8';           /* ▸ */
    color: var(--rd-bronze);
    margin-right: 8px;
}
.tpl-link-list a:hover {
    background: var(--clr-hover);
    color: var(--clr-text);
    text-decoration: underline;
}
/* バックナンバーはPCで2列（SPは1列） */
.tpl-link-list--2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 32px;
}
@media (max-width: 700px) {
    .tpl-link-list--2col { grid-template-columns: 1fr; }
}

/* 回次別一覧ボックス（別紙４の画像を design5 の配色で再現） */
.tpl-kaiji-box {
    border: 1px solid #8a7c6f;
    border-radius: var(--rd-radius-md);
    overflow: hidden;
    margin: 36px 0 8px;
    background: #fff;
}
.tpl-kaiji-box__head {
    font-family: var(--font-mincho);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--rd-text);
    background: var(--clr-bg-head);
    border-bottom: 1px solid #8a7c6f;
    padding: 10px 18px;
    margin: 0;
}
.tpl-kaiji-box__body { padding: 22px 18px 18px; }
.tpl-kaiji-select {
    display: block;
    width: 100%;
    margin: 14px 0;
    padding: 12px 14px;
    font-size: 1rem;
    font-family: var(--font-base);
    color: var(--clr-text);
    background: var(--rd-bg-sub);
    border: 1px solid #8a7c6f;
    border-radius: var(--rd-radius-sm);
    cursor: pointer;
}
.tpl-kaiji-box__note {
    font-size: var(--fz-sm);
    color: var(--clr-text-sub);
    margin: 0;
}


/* ----------------------------------------------------------
   25. 欠番（メニューパネル内の文字サイズ切替はボス指示により削除・2026-07-21）
   ---------------------------------------------------------- */


/* テンプレートページ専用：部品ラベル行（実ページでは行ごと削除して使う） */
.tpl-guide {
    background: #f0f0f0;
    color: #555;
    font-size: var(--fz-sm);
    border-left: 4px solid #aaa;
    padding: 8px 12px;
    margin: 40px 0 16px;
}
/* テンプレートページ専用：画像の差し込み位置を示すプレースホルダ */
.tpl-img-placeholder {
    width: 600px;
    max-width: 100%;
    height: 220px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8e4df;
    border: 1px dashed #9c8a6e;
    border-radius: var(--rd-radius-sm);
    color: #7a6f63;
    font-size: 1.125rem;
}


/* アイコン付き大型バナー（仕様書別紙４「国会会議録検索」の形。部品J） */
.tpl-banner-link {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 8px 22px;
    border: 1px solid #8a7c6f;
    border-radius: var(--rd-radius-md);
    background: #fff;
    padding: 22px 28px;
    margin: 8px 0;
    color: var(--clr-text);
    text-decoration: none;
    transition: background .15s;
}
.tpl-banner-link:hover {
    background: var(--clr-hover);
    color: var(--clr-text);
    text-decoration: none;
}
.tpl-banner-link__icon {
    font-size: 2.75rem;
    line-height: 1;
}
.tpl-banner-link__title {
    font-family: var(--font-mincho);
    font-size: 1.5rem;
    font-weight: 700;
    white-space: nowrap;
}
.tpl-banner-link__desc {
    font-size: var(--fz-sm);
    line-height: 1.8;
}
@media (max-width: 700px) {
    .tpl-banner-link { grid-template-columns: auto 1fr; }
    .tpl-banner-link__desc { grid-column: 1 / -1; }
}


/* 囲み見出し（部品A・リンクなし）。広報課指摘 2026-07-27 で追加。
   別紙PDFでリンクボックス群の上に描かれていた横長のバー。
   委員会の開閉バー（.rd-accordion-box＋.rd-box-title）と同じ枠・角丸・背景にし、
   「押せるもの」と誤解されないよう 矢印（›）・ホバー・カーソル変化は付けない */
.tpl-headbar {
    background: #fefefd;
    border: 1px solid #9c8a6e;
    border-radius: var(--rd-radius-md);
    padding: 14px 20px;
    margin: 8px 0 12px;
    font-family: var(--font-base);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--rd-text);
}


/* 枠付きリンクボタン（部品B＝▶／部品C＝＞）。広報課指摘 2026-07-27 で追加。
   枠・ホバーの流儀は委員会ページのタイルボタン（.iinkai-links--tile）と揃える。
   列数は --2col／--3col／--4col、矢印の形は --tri／--chev で切り替える */
.tpl-linkbtns {
    list-style: none;
    display: grid;
    gap: 10px;
    margin: 8px 0 12px;
    padding: 0;
}
.tpl-linkbtns--2col { grid-template-columns: repeat(2, 1fr); }
.tpl-linkbtns--3col { grid-template-columns: repeat(3, 1fr); }
.tpl-linkbtns--4col { grid-template-columns: repeat(4, 1fr); }
/* タブレットは2列、スマートフォンは1列（委員会バー .iinkai-grid と同じ折り返し方） */
@media (max-width: 900px) {
    .tpl-linkbtns--3col,
    .tpl-linkbtns--4col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .tpl-linkbtns--2col,
    .tpl-linkbtns--3col,
    .tpl-linkbtns--4col { grid-template-columns: 1fr; }
}
.tpl-linkbtns li::before { content: none; }
.tpl-linkbtns a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 16px;
    background: #fefefd;
    border: 1px solid #9c8a6e;
    border-radius: var(--rd-radius-sm);
    color: var(--rd-text);
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    transition: all .15s;
}
.tpl-linkbtns a:hover {
    border-color: #6b5842;
    background: var(--clr-hover);
    color: var(--rd-bronze);
    text-decoration: none;
}
/* 矢印は行頭に固定し、文字が2行になっても折り返しに巻き込まれないようにする */
.tpl-linkbtns a::before {
    flex: 0 0 auto;
    margin-right: 10px;
    color: var(--rd-bronze);
}
/* 部品J：メニュー内のリンク（.drawer-sub-list__link）と同じ▶ */
.tpl-linkbtns--tri a::before {
    content: '\25B6';
    font-size: .55em;
    position: relative;
    top: 1px;
}
/* 部品K：別紙PDFと同じ＞ */
.tpl-linkbtns--chev a::before {
    content: '\203A';
    font-size: 1.25em;
    line-height: 1;
}


/* ----------------------------------------------------------
   26. 参議院の動き 一覧ページ（00020_00000_ugoki.html）専用
   元データ（指示書_20260714添付 ugoki-index_20260714.html）由来のタイムラインCSS。
   このページの外側 <div class="l-wrapper ugoki-page"> にだけ効くようスコープ済み
   ---------------------------------------------------------- */
/* タイムライン用追加CSS */
.ugoki-page .category-label {
    display: inline-block;
    background: #f4f4f4;
    padding: 2px 8px;
    font-size: 0.8rem;
    border-radius: 4px;
    margin-bottom: 5px;
}

/* 1. 全体コンテナ：左側にバッジのための広いスペースを確保 */
.ugoki-page .timeline-container {
    position: relative;
    padding-left: 140px; /* バッジ（80px）＋余裕を持たせる */
    margin-top: 50px;
}
/* 2. 円形ラベル：親要素の timeline-container を基準に左端へ固定 */
.ugoki-page .month-badge {
    position: absolute;
    left: -135px;           /* 左端に固定 */
    top: 0;
    width: 80px;
    height: 80px;
    border: 2px solid var(--rd-bronze);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--rd-bronze);
    background: #fff;
    z-index: 2;
}

/* 3. 縦線：バッジの中心（left: 40px）を通るように設定 */
.ugoki-page .timeline-line {
    position: absolute;
    left: 40px;      /* バッジの中心位置に固定 */
    top: 0;
    bottom: 0;
    width: 2px;
    background: #dcdcdc;
    z-index: 1;
}

/* 4. イベントリスト全体：バッジと被らないよう右へオフセット */
.ugoki-page .event-wrapper {
    padding-left: 50px; /* バッジからイベントまでの距離 */
}
/* 日付ラベル */
.ugoki-page .day-label {
    position: absolute;
    left: -90px;    /* ここを広げると日付が左に離れる */
    top: 20px;
    width: 60px;
    text-align: center;
}

.ugoki-page .sub-article {
        max-width: 1200px !important;
        width: 95% !important; /* 画面幅に対して95%の広さを確保 */
    }


.ugoki-page .filter-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 30px;
    }
    .ugoki-page .filter-btn {
        padding: 8px 16px;
        border: 2px solid var(--rd-bronze);
        background: #fff;
        color: var(--rd-bronze);
        border-radius: 20px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 0.9rem;
        font-weight: bold;
    }
    .ugoki-page .filter-btn:hover {
        background: var(--rd-bronze);
        color: #fff;
    }
    /* 選択中のボタンのスタイル */
    .ugoki-page .filter-btn.is-active {
        background: var(--rd-bronze);
        color: #fff;
    }



/* 1. カード全体の通常時のスタイル */
.ugoki-page .event-item {
    border: 1px solid #eee;
    padding: 20px;
    margin-bottom: 15px;
    position: relative;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.3s ease; /* 変化を滑らかにする */
}

/* 2. ホバー時のスタイル（浮き上がる動きは付けない・ボス指定） */
.ugoki-page .event-item:hover {
    background-color: #fcf9f5 !important; /* 少し暖色系の明るい背景色に変更 */
    border-color: var(--rd-bronze) !important;      /* 枠線の色をテーマカラーに */
    box-shadow: 0 6px 12px rgba(139, 115, 85, 0.15) !important; /* 少し強めの影 */
}

/* 3. タイトルリンクのホバー時 */
.ugoki-page .event-item h3 a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.ugoki-page .event-item h3 a:hover {
    color: var(--rd-bronze); /* ホバー時に文字色も変える */
    text-decoration: underline;
}


/* SP：月バッジ・日付・縦線が同じ幅に重なるため置き方を変える
   （インラインstyleより優先させるため !important） */
@media (max-width: 600px) {
    /* 左の列は日付だけ。幅を確保 */
    .ugoki-page .timeline-container { padding-left: 52px !important; }
    .ugoki-page .event-wrapper { padding-left: 0 !important; }
    .ugoki-page .day-label { left: -52px !important; width: 44px !important; top: 16px !important; }

    /* 月の丸バッジ：左の列に置くと日付と重なるため、その月の見出しとして上に置く */
    .ugoki-page .month-badge {
        position: static !important;
        width: 52px !important;
        height: 52px !important;
        margin: 0 0 12px !important;
    }

    /* 縦線：日付と交差するため非表示 */
    .ugoki-page .timeline-line { display: none !important; }
}

/* ----------------------------------------------------------
   27. 「トップへ戻る」ボタン（全ページ共通・見た目は20260709.html準拠。
       ただしホバーで浮く動きは無し・スクロールは減速式＝ボス指示 2026-07-21）
   ボタン自体は js/main.js「8.」が全ページの右下に自動で設置する。
   300pxより下へスクロールすると .is-show が付いて表示される
   ---------------------------------------------------------- */
.to-top-btn {
    position: fixed;
    bottom: 40px;                /* 画面のより下側に配置（ボス指示 2026-07-21で120px→40px） */
    right: 30px;
    width: 48px;
    height: 48px;
    background-color: var(--rd-accent);
    color: #ffffff;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s, background-color 0.2s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.to-top-btn.is-show {
    opacity: 1;
    visibility: visible;
}
/* ホバーは色が変わるだけ（浮くような動きはしない・ボス指示 2026-07-21）。
   色はサイトの配色（--rd-accent の明るい同系グレー）を使う＝参考デザインのブロンズは使わない */
.to-top-btn:hover {
    background-color: var(--rd-accent-lt);
}
/* スマホでは少し大きく・角に寄せる（小さくて押しづらいというボス指摘 2026-07-21） */
@media (max-width: 600px) {
    .to-top-btn {
        width: 56px;
        height: 56px;
        font-size: 24px;
        bottom: 20px;
        right: 14px;
    }
}