| の幅いっぱいに広がる）で並べている。 | に幅指定は無いため、tableの自動レイアウトが4画像の「本来の幅」の比（本番実測:
ハンバーガー69px・ロゴ346px・お申込み72px・ログイン72px、合計559px）を保ったまま、
ビューポート幅ぴったりに比例縮小する。結果として4つの画像は常に同じ高さ・
左右の余白ゼロ（画面端から端まで）で並ぶ（Chromeのモバイルエミュレーションで
375px幅・320px幅の両方で実測し、比率が一致することを確認済み）。
今回は固定pxではなく、この「本来の幅の比で埋める」ロジックをflexboxで再現する
（`flex: <本来の幅> 0 0`は、flex-basis 0のまま本来の幅の比でグロー分配するため、
tableの自動レイアウトと同じ効果になる）。あわせて、本番はこの行に左右パディングが
一切無い（`nav.navbar div.col-12 .container { padding: 0; max-width: 100%; }`、
`premio/css/style_other.css`のmax-width:991pxブロック）ため、モバイルだけ
`.site-header__bar`のパディング・gapもゼロにする。 */
@media (max-width: 991.98px) {
.site-header__bar {
padding: 0;
gap: 0;
}
.site-header__toggle {
order: -1;
flex: 69 0 0;
}
.site-header__toggle summary img {
display: block;
width: 100%;
height: auto;
}
.site-header__brand {
flex: 346 0 0;
margin-right: 0;
}
.site-header__logo--mobile {
display: block;
width: 100%;
height: auto;
}
.site-header__icon {
flex: 72 0 0;
}
.site-header__icon img {
display: block;
width: 100%;
height: auto;
}
}
.site-header__nav-utility {
display: flex;
align-items: center;
gap: .75rem;
flex-wrap: wrap;
}
/* 2026-08-22: デスクトップ用の複製（ロゴの反対側に出す方）は、モバイルでは隠す
（モバイルは`.site-header__nav-utility--mobile`側、ハンバーガーの中の方だけを使う）。
`.site-header__nav-utility`共通ルールがdisplay:flexを既定にしているため、
ここで明示的に打ち消さないとモバイルでもロゴの右に重なって出てしまう。 */
.site-header__nav-utility--desktop {
display: none;
}
/* -------------------------------------------------------------------------
* / によるナビ・フッターの開閉（JS不要）
*
* 仕組み: モバイルはネイティブの details 挙動（開閉できる）に任せる。
* デスクトップは summary を隠し、中身を常に強制表示する。
* ブラウザは details:not([open]) > :not(summary) を display:none にするだけなので、
* より詳細度の高い display 指定で上書きできる（content-visibility ではない）。
* ---------------------------------------------------------------------- */
.js-accordion summary {
cursor: pointer;
list-style: none;
}
.js-accordion summary::-webkit-details-marker {
display: none;
}
@media (min-width: 992px) {
/* 2026-08-22追記（目視確認で発覚した既存の不具合）: このルールは元々
`.site-footer__group > summary` も対象にしていたが、ヘッダーの`summary`は
ハンバーガーアイコンだけで、デスクトップでは意味を持たないので隠して正しい。
一方フッターの`summary`はグループの見出しテキスト（「クレジットカードお申込み」等）
そのものなので、隠してしまうと見出しの無いリンクの羅列に見えてしまう
（目視確認で発覚。それ自体はフェーズ3時点からの既存の不具合で、今回の配色作業とは
別件）。ヘッダー側だけを対象にする。 */
.site-header__toggle > summary {
display: none;
}
.site-header__toggle > *:not(summary) {
display: block !important;
}
.site-footer__group > * {
display: block !important;
}
/* 2026-09-18追記（検収指摘）: 上のJS修正（footer summary クリックのpreventDefault、
theme.js参照）でクリックしても子メニューが消えなくなったが、`.js-accordion summary`
の共通ルール（このファイル冒頭付近）が`cursor: pointer`を出したままだったため、
デスクトップではクリックしても何も起きないのに指カーソルだけが出る、という
見た目上のバグが残っていた（レガシーの固定見出しはリンクではないので矢印カーソル）。
デスクトップ幅に限りフッターの見出しだけカーソルを既定に戻す。 */
.site-footer__group.js-accordion > summary {
cursor: default;
}
}
/* モバイルの開閉インジケーター（+/-）。テキストではなくCSSで出す。
2026-08-22追記（目視指摘で発覚した不具合）: `.js-accordion`はフッターの4グループだけでなく
ヘッダーのハンバーガー（`.site-header__toggle`）も共有しているクラスだったため、この
`::after`が開閉状態のたびにハンバーガーアイコンの下にも「+」「−」を出してしまい、
「中途半端なプラスボタンが見える」不具合になっていた。フッターのグループだけに絞る。 */
@media (max-width: 991.98px) {
.site-footer__group.js-accordion > summary::after {
content: '+';
float: right;
}
.site-footer__group.js-accordion[open] > summary::after {
content: '\2212'; /* − */
}
}
.site-header__menu,
.site-footer__list,
.site-footer__legal-list {
list-style: none;
margin: 0;
padding: 0;
}
/* 2026-08-22: `.site-header__menu`のflex化・区切り線は下の「ヘッダーの配色」節に
まとめて書く（区切り線とgapを両方使うと二重に間隔が空くため、gapは使わずborder-leftの
paddingだけで間隔を作る）。 */
/* 2026-08-20: 目視確認で発見。scripts/create-menus.php のコメントは
「レガシーではモバイルのみに出ていた項目。CSSで lg 以上を非表示にする」としていたが、
そのCSSルール自体が書かれていなかった。デスクトップで「アカウントユーザーガイド」が
ヘッダー右側のユーティリティリンクと合わせて2回出ていたのはこれが原因。 */
@media (min-width: 992px) {
.menu-item-mobile-only {
display: none;
}
}
/* -------------------------------------------------------------------------
* ヘッダーの配色（本サイトの見た目を再現）
*
* 2026-08-22: レイアウト用CSS（sticky化・flexbox化）だけが実装済みで、配色が
* 丸ごと未実装だったことが目視確認で発覚（docs/current-state.mdフェーズ3が
* 最初から「見た目の目視確認は未」としていた項目そのもの）。
* 本サイトの実測値: `#navbarsDefault { background-color: #e5090d; }`
* （premio/css/style_other.css）。
*
* 2026-08-22追記（再指摘で修正）: 最初の実装は赤帯にプライマリナビ+ユーティリティを
* まとめて1本にしていたが、これは本サイトの実際の配置（ユーティリティはロゴの反対側・
* 赤帯の外・上）と違うと指摘を受けた。本サイトの構造を確認したところ、legacy header.php
* では `.navbar-right.d-none.d-lg-block`（デスクトップ専用、白背景の上段）と、
* `#navbarsDefault` 内の同項目（モバイルのみ、赤帯代わりの暗い帯の中）の**2箇所併存**が
* 正解だった。`header.php`側で`premio_header_utility_links()`を2回呼ぶ形に直し、
* ここではデスクトップ版（ロゴと同じ白背景の上段）とモバイル版（ハンバーガー内、
* 下のセクション）を別クラスで出し分ける。
* ---------------------------------------------------------------------- */
@media (min-width: 992px) {
.site-header__toggle {
order: 2;
width: 100%;
}
.site-header__brand {
order: 0;
}
/* 2026-08-22再修正: 本サイトはENGLISH（言語切替）が1行目、
アカウントユーザーガイド+ログインボタンが2行目という、縦2行構成になっている。
`flex-direction: column`だと3項目が縦に3行離れてしまう（1項目=1行になるため）。
代わりに`row`+`wrap`のままにして、言語切替だけ`flex-basis: 100%`で行を占有させ、
強制的に単独の1行目にする。残り2項目（ガイド・ログイン）は入りきらずに
自動的に2行目へ折り返るので、結果として2行構成になる。 */
.site-header__nav-utility--desktop {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: .4rem .75rem;
order: 1;
}
.site-header__nav-utility--desktop .lang-switcher {
order: -1;
flex-basis: 100%;
display: flex;
justify-content: flex-end;
}
/* 2026-09-04追記: 本番実測（`.online_account a.text-dark`、
`.lang-switcher.text-dark`）では、この2つのリンクは既定の青いリンク色ではなく
Bootstrapの`.text-dark`相当（#343a40）で表示される。テーマ側はこの2クラスに
色指定が無かったため、既定の青リンク色のまま表示されていた（目視指摘で発覚）。 */
/* 2026-09-04追記: 本番実測（`div.navbar-right { font-size: 0.9rem; }`、
premio/css/style_other.css）では、ヘッダー右上のアカウントユーザーガイド・
言語切替リンクは本文の16pxより一回り小さい0.9rem（14.4px）で表示される。
テーマ側はこの祖先の`.navbar-right`に相当するフォントサイズ指定が無く、
既定の16pxのまま表示されていた（目視指摘で発覚）。 */
.site-header__nav-utility--desktop a.online-account,
.site-header__nav-utility--desktop a.lang-switcher {
color: #343a40;
font-size: .9rem;
}
/* 2026-09-04追記: 本番実測（`div.online_account .btn { border-radius: 0; }`、
premio/css/style_other.css）では、ログインボタンはBootstrapの`.btn`既定の角丸
（border-radius: .25rem）を`.online_account`という祖先クラスで打ち消しており、
実際には真四角。テーマ側は`.online_account`に相当する祖先クラスを持たせていな
かったため、Bootstrap既定の角丸のまま表示されていた（目視指摘で発覚）。 */
.site-header__nav-utility--desktop .btn {
border-radius: 0;
}
.site-header__nav-utility--mobile {
display: none;
}
/* 2026-08-22追記（再指摘で修正）: 赤帯（背景）は画面の両端まで届く全幅のままだが、
その中のメニュー自体はフッターと同じ中央寄せの1140px幅に収め、なおかつ
（左詰めではなく）中央寄せで配置する。
以前は`.site-header__bar`の固定`1rem`パディングを負のマージンで打ち消していたが、
`.site-header__bar`のパディングがフッターと同じ可変値（`max()`）になったため、
固定値による打ち消しは使えない。代わりに、ビューポート基準で画面幅いっぱいに
広げる定番の手法（`margin: 0 calc(50% - 50vw)`）で、祖先のパディングに関係なく
全幅にする。 */
/* 2026-08-22再修正: `.site-header__nav`は`.site-header__bar`（既に左右パディングで
1140px幅に狭められている）の内側にあるため、パディングを`%`で書くと、そのパーセントは
ビューポート全体ではなく`.site-header__bar`の内側幅（=1140px）を基準に計算されてしまい、
`(100% - 1140px) / 2`が常に0近くになって左右パディングがほぼ付かなかった
（メニューがフッターと違う狭い基準で中央寄せされ、見た目上「センターに見えない」原因）。
`vw`はどこにネストしていても常にビューポート幅そのものを基準にするため、
`%`ではなく`100vw`を使う。 */
.site-header__nav {
background: #e5090d;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
width: auto;
padding-left: max(1.5rem, calc((100vw - 1140px) / 2));
padding-right: max(1.5rem, calc((100vw - 1140px) / 2));
display: flex;
justify-content: center;
}
.site-header__menu {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/* 2026-09-04追記: 本番実測（`ul.navbar-nav.justify-content-center.font-weight-bold`、
premio/_inc/header.php）では、赤帯のプライマリナビ全項目がBootstrapの
`.font-weight-bold`（font-weight: 700）で太字表示される。テーマ側はfont-weightの
指定が無く、既定の400（レギュラー）のまま表示されていた（ユーザー指摘で発覚）。 */
.site-header__menu a {
display: block;
padding: .65rem .75rem;
color: rgba(255, 255, 255, .9);
font-weight: 700;
}
/* 本番はBootstrap navbar-dark既定のホバー（色のみ、下線なし）。
text-decoration: noneが無いとBootstrapのa:hover下線が透けて出るため明示。 */
.site-header__menu a:hover {
color: rgba(255, 255, 255, .75);
text-decoration: none;
}
.site-header__menu li {
border-left: 1px solid #daa0a1;
}
.site-header__menu li:first-child {
border-left: 0;
}
}
/* -------------------------------------------------------------------------
* モバイルのハンバーガーメニュー（開いたときのパネル）
*
* 2026-08-22: 目視確認で発覚。開いた状態のパネルに位置・幅・背景の指定が一切なく、
* `.site-header__bar`のflexの並びの中にそのまま項目がテキストのまま流れ込み、
* ロゴや本文と重なって表示されていた。レガシーの `nav.navbar #navbarsDefault
* { background-color: rgba(0, 0, 0, 0.75); }`（991px以下）に合わせ、
* ヘッダー直下に浮かせるオーバーレイパネルとして実装する。
* ---------------------------------------------------------------------- */
@media (max-width: 991.98px) {
/* 2026-08-22: 目視確認で発見した2度目の不具合。パネルの位置決めの基準（containing
block）を`.site-header__toggle`（ハンバーガーボタン自身、幅117px程度）にしていたため、
`max-width: 100%`がそのハンバーガーボタンの幅で計算されてしまい、パネルがボタンの
幅のまま縦に伸びる不具合になっていた。基準を、すでに`position: sticky`で位置決めされて
おり、かつヘッダー全幅を持つ`.site-header`自体に変更し、`width: 100%`のみで十分な形にした
（`100vw`はスクロールバー分のずれや、ここでは不要な水平スクロールを生む可能性があるため
使わない）。 */
.site-header__nav {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: rgba(0, 0, 0, .85);
padding: 1rem 1.25rem 1.25rem;
z-index: 20;
}
/* 2026-09-04修正: 本番のレガシーCSS（premio/css/style_other.css、max-width:991px
ブロック）にはメニュー項目間の区切り線が無い。以前ここに付けていた
`border-bottom`は本番に存在しない独自の装飾で、目視指摘により削除した。 */
.site-header__menu a {
display: block;
padding: .6rem 0;
color: #fff;
}
/* 2026-09-04追記: デスクトップ側（上のブロック）には`:hover`に`text-decoration: none;`が
あったが、モバイル側には同じ上書きが無かった。Bootstrapは`a:hover { text-decoration:
underline; }`を既定で持つため、モバイルのハンバーガーメニューだけホバー時に本番には無い
下線が付いていた（目視指摘で発覚）。 */
.site-header__menu a:hover {
text-decoration: none;
}
.site-header__nav-utility {
flex-direction: column;
align-items: flex-start;
gap: .5rem;
margin-top: 1rem;
}
.site-header__nav-utility a.online-account,
.site-header__nav-utility a.lang-switcher {
color: #fff;
}
/* 2026-09-04追記: モバイルのログイン行は、本番実測（premio/_inc/header.php の
` |