/* LeftBlock/RightBlockが実質空になったことを受けて、CenterBlockが空いた幅を使える
   ようにする。styles.cssの#LeftBlock(130px)/#CenterBlock(740px)/#RightBlock(200px)
   固定幅指定を、この上書きファイルで置き換える
   （MetaHeader.phpでstyles.css等より後に読み込むことで、cssの読み込み順で上書きする）。

   - #LeftBlockは常に空になったため非表示にする。
   - #MainBlockは親要素(#MainPane、実際は1260px。styles.css内の別の後方ルールで
     #container-inner等が1080pxから1260pxに上書きされているため、当初1080pxを想定した
     max-widthを指定すると右側に180pxの余白ができ「偏って見える」不具合になっていた。
     max-widthは指定せず、親要素の実際の幅にそのまま追従させる）。
   - #CenterBlock/#RightBlockはflexboxにし、#RightBlockが存在する時（未ログイン時のみ、
     ログインフォーム表示のため_app/_inc/RightBlock.phpが出力する）はその分を確保し、
     存在しない時（ログイン時、_app/_inc/RightBlock.php側でdiv自体を出力しなくなった）は
     #CenterBlockが自動的に100%まで広がる。

   ページ全体の固定幅(1260px)自体を超えて画面幅いっぱいに広げる完全なレスポンシブ化は、
   ヘッダー背景画像や他の要素が固定ピクセル値で組まれているため影響範囲が大きく、今回は
   対象外（現状のページ固定幅の中でLeft/Rightが空けた分をCenterBlockに還元する範囲に留める）。 */

#LeftBlock {
	display: none;
}

#MainBlock {
	width: 100%;
	float: none;
	display: flex;
	align-items: flex-start;
	gap: 20px;
	box-sizing: border-box;
}
/* サイト共通CSSのグローバルclearfix（styles.css: div:after{content:".";display:block}）が
   #MainBlockにも効いており、display:flexの中で見えない3つ目のflexアイテムとして"."が
   挿入されてしまう。#CenterBlockがflex-grow:1でも、この疑似要素自身の幅（+gapの20px）の分だけ
   #MainBlockの右端まで届かず、約24px右に余白ができ「偏って見える」原因になっていた
   （このプロジェクトで既知の再発パターン。.TopListHeader/#TopCategoryToggleBtnで
   過去に同じ原因を確認・修正済み）。flexコンテナはfloatを使わないためclearfix自体が不要 — 打ち消す。 */
#MainBlock::after {
	content: none;
	display: none;
}

#MainBlock > #CenterBlock {
	flex: 1 1 auto;
	width: auto;
	float: none;
	min-width: 0;
	box-sizing: border-box;
}

#MainBlock > #RightBlock {
	flex: 0 0 220px;
	width: 220px;
	float: none;
	box-sizing: border-box;
}

/* #CenterBlockの幅を上で広げても、その中身の本文ラッパー.Story自体に
   styles.cssでwidth:740pxが直接指定されているため、実際に表示される箱は依然740pxのまま
   左詰めで表示され、右側だけに大きな余白ができる「偏って見える」状態になる
   （管理者メニュー・パートナー代行メニュー・その他ほぼ全ページの本文がこの.Storyを使用）。
   .Storyをwidth:100%まで広げる案は、管理者メニュー(.CenterMenu li{width:30%}の
   3列フロートレイアウト)など、内部が740px幅を前提に列組みされているページで中身が間延びして
   崩れる副作用があるため採用しない。.Story自体の幅(740px、内部レイアウトの前提)は変更せず、
   #CenterBlock内で中央揃えにするだけに留める（余白が左右対称になり「偏って見える」問題は
   解消しつつ、内部レイアウトは無傷のままにする）。
   .Storyはグローバルルール(div,ul,dl{display:inline-block})の対象になっているため、
   margin:0 autoではなくtext-align:centerで中央寄せする（inline-block要素はmargin:autoでは
   中央寄せされないため）。.Story自身はtext-align:leftを指定済みなので、内部の文字列の
   左揃えには影響しない。 */
#CenterBlock {
	text-align: center;
}
#CenterBlock > .Story {
	text-align: left;
}

/* ここから「PCページ幅統一」作業（PC_WIDTH_UNIFICATION_CHECKLIST.md参照）。
   全ページを一斉にwidth:100%にすると、740px前提の内部レイアウト（.CenterMenu等）が
   一斉に崩れてしまうため、ページごとに動作確認した上で個別に「広幅」を有効化できるよう、
   opt-in用のクラス.WideStoryを用意する。
   使い方：確認・修正が済んだページの<div class="Story radius">に、
   手動でWideStoryクラスを追加する（例：class="Story radius WideStory"）。
   .Story自身はグローバルルールでdisplay:inline-blockになっているが、blockに上書きすることで
   #CenterBlockのtext-align:centerの影響を受けずに幅いっぱいに広がる
   （text-align:centerはinline-block要素の配置にのみ影響し、block要素の幅には影響しないため）。 */
.Story.WideStory {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

/* .CenterMenu（管理者メニュー・パートナー代行メニュー・テーマサンプル選択で
   使われる見出し+リンクの一覧コンポーネント）は、styles.cssで.CenterMenu li{width:30%;float:left}、
   .CenterMenu li.title{width:670px}、.Col2 li{width:300px}、li.Col1{width:630px}という
   740px前提の固定・％指定で組まれており、WideStoryで幅を広げるとリンクの列組みだけが間延びし、
   見出しバー(固定670px)との整合が取れず崩れる（AdminMenu.php等で確認済み）。
   float+固定幅ではなくCSS Gridに変更し、コンテナ幅が変わっても列が均等に追従するようにする。
   見出し(li.title/li.read)と.Col1は1行全体を占める(grid-column:1/-1)ことでclear:both相当を再現する。 */
.CenterMenu {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px 20px;
	margin: 0 0 10px;
}
.CenterMenu li {
	float: none;
	width: auto;
	min-width: 0;
}
.CenterMenu li.title,
.CenterMenu li.read {
	grid-column: 1 / -1;
	width: auto;
}
.Col2.CenterMenu {
	grid-template-columns: repeat(2, 1fr);
}
.Col2.CenterMenu li,
.Col2.CenterMenu li a {
	width: auto;
}
.CenterMenu li.Col1,
.CenterMenu li.Col1 a {
	width: auto;
	grid-column: 1 / -1;
}

/* _app/_member/index.php（マイページ）専用の幅対応。
   このページは.Storyを使わず自前で740px前提のレイアウトを組んでいるため、WideStoryクラスの
   opt-in方式が使えない。ページ自身が$TmpStr['BodyClass'][]="mypage"を持っているため、
   body.mypageスコープで個別に上書きする（他ページへの影響なし、確認済み）。
   ・#MyPageTop（左:お知らせ+シングルスライダー390px固定、右:お客様の声）は
     PHP側で既にdisplay:flexに変更済み。シングルスライダー(#SingleSlider_wrap)自体は
     画像サイズが330px/230pxで固定のコンポーネントのため幅は変えず、
     右側の「お客様の声」だけが空いた幅を使うようにする。
   ・MakeRecommend()（comfunc.php、_member/index.php以外にCustomerVoice.php等3ページでも
     共有利用されているため、関数自体は変更せずCSS側でこのページに限定して上書きする）内の
     #title_Recommendがwidth:735px固定なので100%にする。
   ・#NaviPageUpper/.navBarはPHP側で既にwidth:100%に変更済み。 */
body.mypage #title_Recommend {
	width: 100%;
	box-sizing: border-box;
}

/* table.List（管理画面の一覧・登録フォーム等、約35ページで共有される
   共通テーブルクラス）はstyles.cssでwidth:698pxの固定幅になっている。列数が少ない/狭い
   ページ（HousingPartnerCategory.php等）でWideStoryを有効にすると、テーブルは698pxのまま
   なのにその外側の.Storyだけが広がり、右側に大きな余白が残って「偏って見える」状態になる
   （列数が多く元々698pxを超えていたWinnerEntryDisp.php等では表面化しなかった問題）。
   WideStory配下でのみ100%に広げる。個々の列の固定px指定（表示順30px等）はそのまま活きるため、
   狭い列が不自然に伸びることはなく、可変の列にだけ余白が配分される。 */
.Story.WideStory table.List {
	width: 100%;
	box-sizing: border-box;
}

/* table.Listと同じ698px固定幅パターンが`.navBar`（一覧ページの「提携先数：n件
   （x〜yを表示中）」表示・ページ送りボタンのバー、#NaviPageUpper/#NaviPageBottom内で使われる、
   ほぼ全ての管理画面一覧ページに共通）にもある（styles.css: `.navBar{width:698px}`）。
   外側の#NaviPageUpper自体はwidth:100%まで広がるのに.navBarだけ698pxのまま残り、
   table.Listと同様に右側へ余白ができ「左に寄って見える」状態になる。
   `table.LongBanner`（MakeContentsCase56()、CampaignFeature.php/CheckPartnerNew.php/
   CheckPartnerPopular.php等で使用）もwidth:682px固定。table.List/.navBarと同じ理屈で
   WideStory化後は右に余白が残るため、事前に流動化しておく。 */
.Story.WideStory table.LongBanner {
	width: 100%;
	box-sizing: border-box;
}
/* table.LongBanner自体はdisplay:blockだが、内側の
   tr/tdはdisplay指定が無くブラウザ既定のtable-row/table-cellのまま（tableという祖先が
   display:blockのため「壊れたテーブル」状態）になっており、各カード（1カードごとに別々の
   <table>インスタンス）ごとに、そのカードの文章量に応じて列幅がブラウザの自動テーブル
   レイアウトで個別に決まってしまい、カードごとに区切り線の位置がずれていた。
   table.boneで採用した対処と同じく、table/tr/td を display:block+flex のボックスモデルに
   完全に置き換え、常に image:10% / feature:45% / service:45%（styles.cssの元の意図どおり）
   で固定されるようにする。 */
.Story.WideStory table.LongBanner tbody {
	display: block;
	width: 100%;
}
.Story.WideStory table.LongBanner tr {
	display: flex;
	align-items: stretch;
	width: 100%;
	box-sizing: border-box;
}
.Story.WideStory table.LongBanner td {
	display: block;
	box-sizing: border-box;
}
.Story.WideStory table.LongBanner td.image {
	flex: 0 0 10%;
	width: 10%;
}
.Story.WideStory table.LongBanner td.feature,
.Story.WideStory table.LongBanner td.service,
.Story.WideStory table.LongBanner td.pdf {
	flex: 1 1 45%;
	width: 45%;
}
/* このtdは上のtr{display:flex;align-items:stretch}によって、隣のtd.feature
   （会社説明文など）の文章量に応じて縦に引き伸ばされる。td.service自体はdisplay:blockのまま
   （td{display:block}を参照）なので中身（未ログイン時はぼかし枠）は上端から流れるだけで、
   td.featureが長文で背が高いカードほど下に大きな空白ができ、ぼかし枠の案内文が上寄りに
   見えてしまっていた。td.serviceだけ縦方向flexにして中身を常に上下中央にする。 */
.Story.WideStory table.LongBanner td.service {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* 見出し行(table.List.Small.Title)はPHP側で inline style="width:58%/42%" が指定されているが、
   実際のカード内訳（image10%+feature45%=55% / service45%）とは元々3ポイントずれていた
   （狭幅時代は数十px差で目立たなかったが、1260px幅では約36pxの差になり目立っていた）。
   カードの区切り線と揃うよう55%/45%に統一する。inline styleより優先させるため!importantを使う。 */
.Story.WideStory table.List.Small.Title th:first-child {
	width: 55% !important;
}
.Story.WideStory table.List.Small.Title th:last-child {
	width: 45% !important;
}

/* この見出し行（「提携先名・取扱い品目・サービス」「優待内容・制約など」）の文字は
   中央寄せにする。同じマークアップがPartnersGuide.php／index.php（カテゴリ一覧）／
   CheckPartnerPopular.php／CheckPartnerNew.php／CampaignFeature.phpの計5ページで
   共有されているため、ページ限定CSS（$TmpStr['Styles']）ではなくここ（共通CSS）に
   置くこと。ページ限定CSSに置くと、共有元(comfunc.php等)を問わず一律で反映されない。 */
table.List.Small.Title th {
	text-align: center;
}
/* PDFボタン(td.pdf、MakeContentsCase56()が組み立てるカード内のPDFリンク)も同じ理由で
   ページ限定CSSではなく共通CSSでカード内中央寄せにする。 */
table.LongBanner td.pdf {
	text-align: center;
}

.Story.WideStory .navBar {
	width: 100%;
	box-sizing: border-box;
}

/* パートナー編集画面(setContents.php/setPageContents02.php等)の
   <table class="bone" style="width:696px">（またはその<tbody style="width:696px">）というインライン
   固定幅指定に注意。外側の<table class="FormPart">はwidth:100%（styles.css）で正しく広がるのに、内側の
   .boneテーブルだけ696pxのまま左詰めで残り、外枠との間に大きな空白ができ「偏って見える」。
   インライン style 属性は通常のCSSクラスより詳細度が高いため!importantで上書きする。 */
.Story.WideStory table.bone,
.Story.WideStory table.bone > tbody {
	width: 100% !important;
	box-sizing: border-box;
}

/* table-layout:auto/fixedのどちらで試しても、列幅の計算は<tbody style="width:696px">
   （インライン。CSSのwidth上書きは効かない特殊な扱いになる）の影響を受けてしまい、
   th/tdにwidth:100%やcalc()を指定してもgetComputedStyle上の実際のレンダリング幅には
   反映されない（実測：常にth=200px/td=760px、テーブル全体1216pxに対し256px不足のまま）。
   テーブルの列幅計算アルゴリズムそのものと戦うのをやめ、tr/th/tdをdisplay:flex/blockに
   上書きしてテーブル本来のレイアウトを使わないようにする（=普通のCSSボックスモデルに
   従わせる）ことで確実に幅を制御する。 */
.Story.WideStory table.bone {
	display: block;
	width: 100% !important;
	box-sizing: border-box;
}
.Story.WideStory table.bone > tbody {
	display: block;
	width: 100% !important;
}
.Story.WideStory table.bone > tbody > tr {
	display: flex;
	align-items: stretch;
	width: 100%;
	box-sizing: border-box;
}
.Story.WideStory table.bone > tbody > tr > th {
	display: block;
	flex: 0 0 220px;
	width: 220px;
	box-sizing: border-box;
}
.Story.WideStory table.bone > tbody > tr > td {
	display: block;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	box-sizing: border-box;
}

/* さらにその残りのケース：td自体は上記でwidth:autoになり列は広がったが、
   その中の入力欄・テキストエリア（class="text w500 ...")自体は696px前提のページで元々
   500px程度に収まるよう作られた固定サイズのままのため、広がった列の中で左詰めのまま残り、
   入力欄の右側に無駄な余白ができる。.w500はsetContents.php／setPageContents02.php
   （どちらもtable.bone配下）の「列いっぱいに使ってよい」内容欄にだけ付いているクラスのため、
   table.bone配下に限定してwidth:100%にする（提携先サイトURLの表示名(w150)・URL(w300)のような
   意図的に幅を分けた並び入力にはこのクラスが付いていないため影響しない）。 */
.Story.WideStory table.bone .w500 {
	width: 100% !important;
	box-sizing: border-box;
}

/* table.Details自体もstyles.cssでwidth:698px固定（table.List/.navBar/table.LongBannerと
   同じ698px系パターン）。table.List等と同様、WideStory配下で一律100%にする。 */
.Story.WideStory table.Details {
	width: 100%;
	box-sizing: border-box;
}

/* setPageContents02.phpのプレビュー欄（#tabs内の現在WEB掲載中/掲載待機中/
   編集中のプレビューの各タブ）が使うtable.Details（MakeDispImage()、comfunc.php）は、
   このページ専用にstyles.cssで`#setPageContents02 table.Details{width:658px}`という
   固定幅指定がある（IDセレクタのため詳細度が高い）。widthを広げたStoryの中でこの658px幅の
   プレビュー枠だけ左詰めのまま残り、右側に大きな空白ができて「偏って見える」状態になっていた。
   ページ全体の他の要素（table.bone/table.List等）と統一して幅いっぱいまで広げる。 */
body#setPageContents02 .Story.WideStory table.Details {
	width: 100%;
	box-sizing: border-box;
}
/* プレビュー欄の見出し列（利用できる範囲/優待内容・制約など等）はstyles.css既定の
   width:95pxのままで狭く、フォーム側のラベル列(220px)と並べたときバランスが悪いとの指摘。
   このページのプレビュー表示に限定して広げる（table.Detailsは他ページ(PartnersGuide.php等)
   でも使われる共有クラスのため、影響をsetPageContents02.phpのみに限定するスコープにする）。 */
body#setPageContents02 .Story.WideStory table.Details th {
	width: 160px;
}

/* MetaHeader.phpが読み込むjQuery UIテーマ(jquery-ui-1.13.2/jquery-ui.css)
   は、CSSファイル自体は配置されているが対応する画像アセット一式(_shared/jquery-ui-1.13.2/images/、
   ui-icons_*_256x240.png等)がサーバーに一つも配置されておらず全て404になっていた（1.10.4版には
   画像一式が存在するため、1.13.2への切替時にCSSだけ差し替えて画像を持ってきていなかったと見られる）。
   このため月送り矢印（背景画像スプライトで描画される仕様）が空白になり見えなくなっていた。
   影響は日付ピッカー全体（このサイトの全ての管理画面・パートナー画面の日付入力欄）に及ぶため、
   このファイル（MetaHeader.phpでjquery-ui.cssより後に読み込まれる）で、矢印だけを画像に依存しない
   CSS三角形に置き換えて対処する（他のjQuery UIアイコン欠落は今回のスコープ外、別途要確認）。
   スコープを絞らずページ全体に適用する（.Story.WideStoryに限定しない。日付ピッカーは
   WideStory未適用ページでも使われるため）。 */
.ui-datepicker-prev span,
.ui-datepicker-next span {
	background-image: none !important;
	text-indent: 0 !important;
	font-size: 0;
}
.ui-datepicker-prev span::before,
.ui-datepicker-next span::before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	margin: 4px auto;
	border-style: solid;
}
.ui-datepicker-prev span::before {
	border-width: 5px 7px 5px 0;
	border-color: transparent #666 transparent transparent;
}
.ui-datepicker-next span::before {
	border-width: 5px 0 5px 7px;
	border-color: transparent transparent transparent #666;
}

/* トップページ・住宅特集ページのスライドバナー(#DoubleSlider)の前後矢印
   (bxSlider標準の.bx-prev/.bx-next)を常に表示する。
   styles.css側の元の指定(既定0 -270px／ホバー時0 0)は、どちらもcontrols.png(96x600px)の
   中の空白部分を指しており、ホバーしても矢印は描画されない(実機Chromeでピクセルを
   直接解析して確認：x=0-30/30-60列で実際に色が描かれているのはy=124-139(赤い矢印)と
   y=394-409(グレーの矢印)のみで、y=0とy=270はどちらも空白)。
   「ホバー時の位置(0 0)にすれば矢印が出る」という前提は誤りで、それだけでは直らない。
   ボックス高さ260pxに対し矢印本体の実際の位置(y=124-139、中心131.5)を中央に来るよう
   background-position-yを-2pxに指定する必要がある。 */
#DoubleSlider_wrap .bx-prev {
	background-position: 0 -2px !important;
}
#DoubleSlider_wrap .bx-next {
	background-position: -30px -2px !important;
}