@charset "UTF-8";
/*
* 統合レイアウトの「意図的な差分」だけを置くファイル（Step3-13-2d）。
*
* ── 重ね方 ──────────────────────────────────────────────
* 1. layout201911.mobile/Main.css … 土台（全幅） Blue が書いたもの
* 2. layout201911/Main.css media≥768px … 広い幅で上書き Blue が書いたもの
* 3. home/index201911.mobile/Main.css … ページ土台
* 4. home/index201911/Main.css media≥768px … ページの広い幅
* 5. ★このファイル … 1〜4 に対する意図的な差分だけ
*
* 🎯 PC の見た目を自分で書き直さないのが要点。Blue は同じ DOM 構造向けの
* PC 用 CSS を既に持っているので、それを「広い幅のときだけ」上から着せる。
* ここに書くのは Blue のどちらとも違えたい所（最大幅・写真グリッド・ラベル・
* ハンバーガーの出し分け）に限る。
*
* 🔴 詳細度の注意（2026-08-02 に実際にやらかした）
* Blue の CSS は SCSS が生成した深いネストで、
* `html > body #body_wrap > div#global_menu > nav > ul` のように異常に強い。
* 素の `#global_menu { … }` では負けて何も効かない（PC 幅でハンバーガーが
* 残り、メニューが3列×6行の表になった）。→ 同じ `html > body` 接頭辞を付ける。
*
* 🔴 サーバー側の UA 出し分けは禁止（PERF-04 のキャッシュ事故）。
* HTML は1種類だけ出し、見せ分けはこのファイルと media 属性だけで行う。
*/
/* ==================================================================
* 全幅共通
* ================================================================== */
/* 狭い幅ではハンバーガーだけを使う＝横並びメニューは隠す。
* ⚠️ Blue のモバイル版はそもそも横並びメニューを描画していなかったが、
* 統合後は HTML に常に存在するので CSS で隠す必要がある。 */
html > body #global_menu {
display: none;
}
/* 複数枚ラベル「N枚の写真」
* 📌 Blue は PC＝左上の帯／モバイル＝右上の丸バッジ の2種類を持っていたが、
* ユーザー判断でPC 版の帯に一本化した（2026-08-02）。
* モバイル側のページ CSS は帯の規則を持っていないので、ここで全幅ぶん定義する。
* 🔄 2026-08-12 に一本化をモバイルだけ戻した（Step3-52・F-2・台帳 §2e D-4）＝
* 実機を見たユーザーの判断。広い幅＝帯／狭い幅＝丸バッジで Blue と同じ姿になる。
* 🔑 2026-08-02 の判断は画面を見る前のもので、実機の判断が上書きした。
* 🔴 left だけでなく right も 0 にして画像の幅いっぱいの帯にする（ユーザー指摘）。
* 絶対配置は既定で中身の幅に縮むため、Blue（left のみ）だと文字の背後だけ色が付く。
* ⚠️ 本番でも実は文字幅しかないが、サムネの上下に黒帯が焼き込まれているため
* 全幅に見えていた（実測）。＝ここは Blue より良くしている。 */
html > body #recent_posts_wrap > ul > li > a > p {
position: absolute;
top: 0;
left: 0;
right: 0;
color: #fff;
background: linear-gradient(rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0));
padding: 5px;
font-size: 13px;
margin: 0;
z-index: 1;
box-sizing: border-box;
}
/* 🔴 右カラム（広告専用・Step3-17-3）は狭い幅では出さない。
* Blue のモバイルにも右カラムは無い＝これは再現であって新しい判断ではない。
* ⚠️ 隠しているのは「空の 」であって広告そのものではない。
* は PC 幅と判定できたときだけ JS が足すので、狭い幅では
* 広告の要求そのものが発生しない（AdSense 規約に沿う唯一の形）。
* 📌 狭い幅では layout201911/Main.css が media="(min-width:768px)" で読まれず
* #right_wrap に何も当たらないので、id 1つで足りる。 */
#right_wrap {
display: none;
}
/* 🔴🔴 パンくずの帯が 100vw で画面からはみ出す問題の修正（Step3-20-5・2026-08-04）
*
* 【症状】どの幅でも横スクロールバーが出る。狭い幅で 15px、PC 幅で 94px はみ出す。
* さらに `overflow-x:auto` ＋ `height:50px` の組み合わせで縦スクロールバーまで出る。
*
* 【原因】`layout201911.mobile/Main.css` の
* `html > body #body_wrap > div#pankuzu_wrap > ul { width:100vw; margin-left:-15px; … }`
* ・`100vw` は縦スクロールバーの幅を含むので、常に scrollbar 分だけ広い。
* ・この規則はモバイル版レイアウト専用だったが、Green はレイアウトを1枚に統合し、
* モバイル CSS を media 属性なしで全幅読み込みしているため PC でも当たる。
* ・PC では `#pankuzu_wrap` が中央寄せ（左 93px）なので、そこから `100vw` が始まって大きくはみ出す。
*
* 【Blue はどうだったか】実測＝Blue の PC は `
* （`#pankuzu_wrap` 自体が出力されない）。帯が出るのはモバイル版だけで、
* そこでは画面幅いっぱい＝`100vw` が正しく機能していた。
* → レイアウト統合が作り出した Green 固有の欠陥であって、Blue の穴ではない。
*
* 【直し方】狭い幅は「帯は残すが 100vw をやめる」。負マージンで器の padding 分だけ広げれば
* スクロールバーの影響を受けない（見た目は変わらない）。
* ⚠️ 3枚目 `/privacy` 以来ずっと在った欠陥で、4回のユーザー目視をすり抜けた
* （横スクロールバーは画面の端にあり、内容を見ていると気付きにくい）。 */
html > body #body_wrap > div#pankuzu_wrap > ul {
width: auto;
margin-left: -15px;
margin-right: -15px;
}
/* ==================================================================
* 広い幅（768px 以上）
* ================================================================== */
/* 🔴 狭い幅では帯を出さず、Blue モバイルと同じ丸バッジ「xN」だけにする
* （Step3-52・F-2・ユーザー依頼 2026-08-12）。
* 📌 バッジの見た目はページ CSS（移送物）が既に持っている
* （`home/index201911.mobile/Main.css:30`）ので、ここでやるのは出し分けだけ。 */
@media (max-width: 767.98px) {
html > body #recent_posts_wrap > ul > li > a > p {
display: none;
}
}
@media (min-width: 768px) {
/* 🔴 PC ではモバイル専用の帯をまるごと解除して、Blue の PC と同じ素のパンくずに戻す
* （ユーザー判断・Step3-20-5）。打ち消しに使うのはその環境での初期値だけ。 */
html > body #body_wrap > div#pankuzu_wrap > ul {
width: auto;
margin: 0;
padding: 0;
height: auto;
line-height: normal;
background-color: transparent;
overflow-x: visible;
white-space: normal;
}
/* 🎯 広い幅では右カラムを出す。値は layout201911/Main.css の
* `#main_content_wrap > div { display: inline-block }` と同値＝
* 打ち消しに使うのは「その環境での初期値」だけ（勝手な数値を入れると Blue と別物になる）。
* 📌 上の #body_wrap max-width:1200px は 13-2 の時点で
* 「880（本文）+ 320（広告）」を見越して置いてあった＝ここで回収される。 */
#right_wrap {
display: inline-block;
}
/* 🔴 最大幅 1200px で中央寄せ（ユーザー判断・2026-08-02）。
* Blue の PC は「本文 max-width:900px ＋ 右カラム 320px」＝合計およそ 1220〜1280px。
* 右カラムは落としたが 1200px にしておくと、将来 広告（320px）を戻すとき
* 880 + 320 でほぼ同じ構成に復元できる＝「一旦なし」の判断を安く覆せる。
* ⚠️ Blue はどちらの版も #body_wrap に幅を指定していない（padding だけ）＝新規の差分。 */
html > body #body_wrap {
max-width: 1200px;
margin: 0 auto;
}
/* ハンバーガーを隠し、横並びメニューを見せる（狭い幅と逆）。
* ⚠️ !important は JS 対策＝MyMethods.js の fadeIn/show/hide がインライン styleを
* 書くため、狭い幅で開いてから広げると通常の規則では勝てない。 */
html > body #open_hamburger_menu_button,
html > body #close_hamburger_menu_button,
html > body #hamburger_menu_wrap {
display: none !important;
}
html > body #global_menu {
display: block;
}
/* 🔴 Blue の PC 版は `#main_content_wrap` を display:flex にして
* #left_wrap（本文）と #right_wrap（右カラム）を横に並べる前提だった
* （layout201911/Main.css:170）。統合で右カラムごと削ったため、そのままだと
* #h1_wrap と .h2_wrap が flex 要素になって横に並んでしまう
* （2026-08-02 実測。「投稿写真」と「コンテンツ」が横並びになった）。
* 1カラムにしたので通常のブロック積みへ戻す。 */
html > body #body_wrap > div#main_content_wrap {
display: block;
}
/* Blue の PC 版は `#main_content_wrap > div { display: inline-block }` ＋
* `#left_wrap { margin: 0 30px 0 0 }` で「本文｜右カラム」を横に置く前提。
* 右カラムを落として1カラムにしたので、本文は幅いっぱいのブロックに戻す。 */
html > body #body_wrap > div#main_content_wrap > div#left_wrap {
display: block;
margin: 0;
}
/* 🔴🔴 L-75 の修正（Step3-38・2026-08-09）＝右カラムを出すページだけ Blue の2カラムへ戻す。
*
* 【何が壊れていたか】上の2つ（:155 の display:block と :162 の margin:0）は
* Step3-13-2a で `/home` を1カラムにしたときの指定で、当時は右カラムが存在せず正しかった。
* その後 Step3-17-3 で右カラムを復活させたとき `#right_wrap { display:inline-block }` だけを足し、
* `#main_content_wrap` を flex に戻すのを忘れた。
* → `#left_wrap` が幅いっぱいの block になり、`#right_wrap` はその下に置かれた
* inline-block ＝中身が空なので shrink-to-fit で幅0。`max-width:320px` は上限なので0を押し上げない。
* 実測（1280px・2026-08-09）＝6ページすべてで #right_wrap が w0 / 本文の下、
* `` の実体まで 0×0＝広告が1枠も表示されない。
*
* 【Blue はどうか】`layout201911/Main.css:170` が `#main_content_wrap { display:flex }`、
* `:176` が `#left_wrap { margin: 0 30px 0 0 }`。本番は正しく2カラムで出ている
* ＝これは Blue の穴ではなく移行で入れた Green の退行（＝パリティ復旧であって調整ではない）。
*
* 【なぜ旗で分けるか】上の2つを直接書き換えると右カラムを持たない `/home`・`/legal/privacy` まで
* flex になる。`_LayoutMain` が `ViewBag.RightColumnAdSlot` を見て付ける
* `.has_right_column` でだけ戻す＝1カラム2ページは1バイトも変わらない。
* ⚠️ 詳細度は 0,1,1,3 で上の 0,1,0,3 に勝つ（同ファイル内で後ろに置くので順序でも勝つ）。
*
* 📌 幅の値は足していない＝`#right_wrap` の上限は `layout201911/Main.css:216` の
* `max-width:320px` をそのまま使う（ユーザー確定 2026-08-09・Q1）。
* ⚠️ Blue のこの6枚は別骨格（旧 `_Layout`）で右カラム379・広告349だが、
* slot ID は同じ＝Tier1（収益タグ）は不変で、枠幅は Tier2（レイアウト）として 320 を採る。
*
* ⚠️⚠️ この修正は静的テストでは守れない＝器も slot も HTML には最初から在り、
* 幅が0なだけだった（memory feedback_green_tests_vs_working_page）。
* 見張りは「綴りが在るか」までで、本当の担保は実測（プラン §9 の表）。 */
html > body #body_wrap > div#main_content_wrap.has_right_column {
display: flex;
}
html > body #body_wrap > div#main_content_wrap.has_right_column > div#left_wrap {
margin: 0 30px 0 0;
/* 🔴 本文が余りを取る。Blue にはこの指定が無いが、Blue の右カラムは
* サイト内検索やプラグインという中身を持っていたので content 幅で自然に決まっていた。
* Green の右カラムは空の器だけ（中身は JS が後から入れる）なので、
* 誰も幅を主張せず本文が中身の幅（実測 623px）に縮む。
* min-width: 0 は flex 既定の min-width:auto を解除するため
* （長い表やコード塊があると本文がはみ出して横スクロールが生まれる）。 */
flex: 1 1 auto;
min-width: 0;
}
/* 🔴🔴 右カラムの幅は自分で主張させる（Step3-38-4 の実測で判明）。
*
* 【なぜ必要か】display:flex に戻しただけではまだ幅0のままだった（実測）。
* flex 既定の flex: 0 1 auto はベースサイズを中身から取るが、
* #right_wrap の中身は空の #ad_right_top だけ。
* そこへ JS が入れる <ins> は display:block ＝親の幅に追従するので、
* 親が0 → 広告も0 → 親も0 の堂々巡りになる。
* ⚠️ layout201911/Main.css:216 の max-width:320px は上限なので0を押し上げない。
*
* 【Blue はなぜ壊れなかったか】Blue の右カラムはサイト内検索・プラグイン等の中身を持っていて、
* それが幅を主張していた。Green は生きているのが広告1枠だけだったので器だけの箱にした
* （Step3-17-3）＝統合で中身を削ったことが、この副作用を生んだ。
*
* 📌 320px の根拠＝layout201911/Main.css:216 の max-width と同値（ユーザー確定・Q1）。
* 本文は 1200 − 30(溝) − 320 ＝ 850px に落ち着く（Blue のこの6枚は885＝別骨格）。 */
html > body #body_wrap > div#main_content_wrap.has_right_column > div#right_wrap {
flex: 0 0 320px;
}
/* 🔴 土台のモバイル版は横並びメニューを描画しない前提で
* li に width:33.3333%（＝3列に折り返す形）を与えている。
* 広い幅では Blue の PC 版と同じ「中身の幅で横1行」に戻す。
* ⚠️ セレクタはモバイル版と同じ形にしないと詳細度で負ける（0,2,5）。 */
html > body #body_wrap > div#global_menu > nav > ul > li {
width: auto;
}
/* 🔴 モバイル版は2行ラベルを `a.two_lines { display:flex; flex-direction:column;
* justify-content:center }` で縦中央寄せにしている。クラス付きなので詳細度が
* Blue PC の `a { display:inline-block }` より高く、広い幅でも勝ってしまう。
* その結果 2行が上下にはみ出し、`em`（New! バッジ・top:-5px の絶対配置）と
* 1行目が重なっていた（2026-08-02 実測）。広い幅では PC の挙動へ戻す。
* ⚠️ セレクタはモバイル版と同じ形（クラス込み）にしないと詳細度で負ける。 */
html > body #body_wrap > div#global_menu > nav > ul > li > a.two_lines {
display: inline-block;
}
/* 🔴🎯 この重ね方の構造的な穴（2026-08-02・本番と計算済みスタイルを突き合わせて判明）
* ＝モバイル版だけが宣言していて PC 版が宣言していないプロパティは、
* 広い幅でも打ち消されずに残り続ける。PC 版は「自分が書いた宣言」しか上書きしない。
* CSSOM を全走査して当該プロパティを洗い出し、実害のあった2箇所をここで戻す。
*
* ⚠️ 見出し帯（#h1_wrap > h1 等）は一見同じ穴に見えるが、PC 版が
* `#main_content_wrap > div#left_wrap #h1_wrap > h1` というより強いセレクタで
* 宣言し直しているので勝っている（本番と計算値が一致することを実測で確認済み）。 */
/* ① メニューの文字は本番 16px（body から継承）。モバイル版は 1.2rem＝12px を指定している。
* 枠線・幅・text-align もモバイル版だけの宣言なので、本番同様「区切り線のみ」に戻す。 */
html > body #body_wrap > div#global_menu > nav > ul > li > a {
font-size: 1.6rem;
border: none;
width: auto;
text-align: left;
}
/* 🔴 広い幅ではバッジを出さない＝帯だけ（Blue の PC と同じ）。
* ⚠️ 両方出ると左上の帯と右上のバッジが二重に出る＝一番ありがちな失敗。 */
html > body #recent_posts_wrap > ul > li > a .photo-count-badge {
display: none;
}
/* ② 「全ての投稿写真を見る>>」は本番 PC では素のリンク（青文字＋下線）。
* モバイル版は指で押しやすい青いボタンにしているので、広い幅では戻す。 */
#recent_posts_wrap > a {
display: inline;
background-color: transparent;
color: #05f;
padding: 0;
text-decoration: underline;
}
/* 🔴 写真グリッド＝Blue の PC は flex ＋ 150px 固定だが、
* ユーザー判断で列いっぱいに伸びる可変グリッドにする（隙間が出ないため）。
* 土台のモバイル版は minmax(75px, 1fr) で、広い画面ではサムネが縮みすぎるので下限を上げる。 */
html > body #recent_posts_wrap > ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}
/* PC 版ページ CSS の li { margin: 10px } は grid の gap と二重になるので消す。 */
html > body #recent_posts_wrap > ul > li {
margin: 0;
}
/* PC 版ページ CSS は img を 150×150 に固定する。可変グリッドに合わせて列いっぱいへ。
* ⚠️ サムネの実体は 300×300 の正方形（黒帯は画像ファイルに焼き込み済み・実測）なので、
* 幅だけ指定すれば高さも揃う＝height は auto でよい。 */
html > body #recent_posts_wrap > ul > li > a > img {
width: 100%;
max-width: none;
height: auto;
}
}
/* ==================================================================
* フッター（Step3-46-2・台帳 L-122）
*
* 🔴🔴 Blue は日本語側でフッターを2種類持っていた。統合したとき `/home` 用（`_Layout201911`）を
* 採用したので、**それ以外の13ページにあった導線が消えていた**
* （`/contact` と 11言語リンク＝**内部リンクは Tier1**）。→ 和集合に戻した。
*
* 📌 **ここに書く理由**＝`layout201911/Main.css`（Blue 製・移送物）には
* `#language_links_wrap` も `.legal_links_wrap` も**規則が1つも無い**（Blue は
* 別レイアウトの CSS で当てていた）。**移送物は1バイトも触らない**方針なので、
* Green 製のこのファイルに置く。
*
* 🔴 **詳細度に注意**＝移送物は `html > body #body_wrap > div#footer_wrap …` と異常に強いので、
* 同じ接頭辞を付けないと負ける（2026-08-02 にやらかした型）。
* ================================================================== */
/* 言語リンク＝横に流して折り返す。狭い幅でも広い幅でも同じ組み方でよい
* （Blue の PC 版も1行の羅列で、モバイル版も同じ見せ方だった）。 */
html > body #body_wrap > div#footer_wrap > ul#language_links_wrap {
list-style-type: none;
margin: 0 0 25px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
/* 🎯 中央寄せ（ユーザー指示 2026-08-12・Step3-51）。
* 📌 Blue は左寄せなので**意図的な Tier2 差分**＝台帳 §2e に記録済み。
* 🔑 flex-wrap で2段になっても**段ごとに中央へ乗る**のが text-align との違い。 */
justify-content: center;
}
html > body #body_wrap > div#footer_wrap > ul#language_links_wrap > li > a {
color: #fff;
}
html > body #body_wrap > div#footer_wrap > ul#language_links_wrap > li > a:hover {
color: yellow;
}
/* お問い合わせ｜プライバシーポリシー＝著作権行のすぐ下にまとめる（ユーザー指示 2026-08-11）。
* 📌 `#copyright_wrap` は移送物側で `text-align: center` が当たっているので中央に乗る。 */
html > body #body_wrap > div#footer_wrap > div#copyright_wrap > p.legal_links_wrap {
margin: 8px 0 0;
}
html > body #body_wrap > div#footer_wrap > div#copyright_wrap > p.legal_links_wrap > a {
color: #fff;
}
html > body #body_wrap > div#footer_wrap > div#copyright_wrap > p.legal_links_wrap > a:hover {
color: yellow;
}