@charset "UTF-8";
/*
 * swell_child / style_test_20260730.css
 *
 * 方針（2026-07-30 ユーザー指定のデザインに合わせて改訂）:
 *   - ヘッダー・ドロワー（サイドメニュー）・フッター … 既存サイトの見た目そのまま
 *     （gmenu/header.php・gmenu/footer.php ＋ common/css_n/style-m.css に完全に委ねる）
 *   - 記事一覧・記事本文 … SWELL 標準デザイン（リスト型＋右サイドバー）
 *     → SWELL のCSSを邪魔しない。独自の装飾は書かない。
 *
 * 読み込み順: SWELL main_style → reset.css → fonts.css → style-m.css → font-awesome
 *             → lightbox.min.css → 本ファイル（最後）
 *
 * 🔴 本番反映時は本ファイルの中身を style.css へマージすること。
 */

/* ==================================================================
 * 1. コンテンツを左ドロワー（固定280px）の右側に逃がす
 *
 * 既存サイトは #contents { width:100%; padding-left:280px } でこれを実現していたが、
 * WordPress 側は SWELL 標準テンプレートに戻したため #contents が存在しない。
 * 同じ役割を #wrapper_inner に持たせる。
 * SP（668px以下）ではドロワーがオフキャンバスに退避するので padding を戻す
 * （style-m.css の #drawer は PC=280px / SP=190〜200px で visibility:hidden）。
 * ================================================================== */
#wrapper #wrapper_inner {
	padding-left: 280px;
	box-sizing: border-box;
}

@media only screen and (max-width: 668px) {
	#wrapper #wrapper_inner {
		padding-left: 0;
	}
}

/* 🔴 フッターは style-m.css 側で自分からドロワー分を避けている:
 *      @media (min-width:667px) #footer { width:100%; padding-left:280px }
 *      @media (max-width:668px) #footer { padding-left:0 }
 *    既存サイトは #contents（コンテンツ）と #footer にそれぞれ 280px を持たせる作りで、
 *    #wrapper_inner には持たせていない。
 *    WordPress 側は #contents が無いので #wrapper_inner に 280px を持たせているため、
 *    そのままだとフッターだけ 280+280＝560px ずれる（2026-07-31 ユーザー報告）。
 *    → フッター自身の 280px を打ち消して、既存サイトと同じ 280px に揃える。
 *    ブレークポイントは既存サイトと同じ 667px を使う。 */
@media only screen and (min-width: 667px) {
	#wrapper #wrapper_inner #footer {
		padding-left: 0;
	}
}

/* ==================================================================
 * 2. SWELL の * { box-sizing:border-box } を、既存サイト由来のパーツだけ
 *    content-box に戻す
 *
 * 既存サイトの reset.css には box-sizing の指定が1件も無く、
 * ヘッダー・ドロワー・フッターは content-box 前提で組まれている。
 * 実際に起きた不具合（2026-07-30 ユーザー報告）:
 *   #nav_inner { width:190px; padding:40px 30px; overflow-y:scroll } に対し
 *     content-box → 中身 190px（設計どおり）
 *     border-box  → 中身 130px（190 − 左右padding 60）
 *   となり、メニューが「当ホテルについ／て」と折り返して縦に伸び、
 *   #nav_thumb dl dt(width:170px) が枠を超えて縦横のスクロールバーが出ていた。
 *
 * 🔴 記事エリア（#content 配下）には当てない。SWELL のレイアウトは border-box 前提のため。
 * 🔴 :where() で詳細度0にしているので、style-m.css が明示している box-sizing
 *    （#nav_thumb の content-box / SP の border-box 等）には負ける＝既存サイトが正。
 * ================================================================== */
:where(.btn_reserve, .btn_reserve *),
:where(#header, #header *),
:where(#drawer, #drawer *),
:where(#footer, #footer *),
:where(#scrollUp, #scrollUp *) {
	box-sizing: content-box;
}

/* 同じパーツ内の line-height も既存サイトの前提（素のまま）に戻す。
   SWELL は body { line-height:1.6 } を当てるが reset.css は line-height を持たない。
   ※ 記事本文には当てない（SWELL / 本文側の行間をそのまま使う） */
:where(.btn_reserve),
:where(#header),
:where(#drawer),
:where(#footer),
:where(#scrollUp) {
	line-height: normal;
}

/* ==================================================================
 * 3. 管理バー（ログイン中のみ出る黒帯）が固定ヘッダー・ドロワーに重なるのを防ぐ
 *    未ログインの一般表示には影響しない
 * ================================================================== */
body.admin-bar #header,
body.admin-bar #drawer {
	margin-top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar #header,
	body.admin-bar #drawer {
		margin-top: 46px;
	}
}

/* ==================================================================
 * 4. 移行記事の本文内に残る画像のはみ出し防止（保険）
 * ================================================================== */
#content .post_content img {
	max-width: 100%;
	height: auto;
}

/* ==================================================================
 * 5. 記事一覧をユーザー指定デザインに寄せる（2026-07-30 参考画像準拠）
 *
 * ベースは SWELL の「リスト型（左右交互）」＝ .-type-list2 を使っている。
 * list2 を選んだ理由:
 *   - 記事間の区切り線を持つ（参考画像にある）
 *   - 「続きを読む」ボタンを持つ（SWELL では .p-postList__body::after の疑似要素。
 *     -type-big と -type-list2 でのみ出る仕様で、通常のリスト型では出ない）
 * ただし list2 は偶数番目の画像を右に振る（左右交互）ので、それだけ打ち消す。
 * ================================================================== */

/* (a) 左右交互をやめて、サムネイルを常に左に固定 */
.p-postList.-type-list2 .p-postList__item:nth-child(2n) .p-postList__link {
	flex-direction: row;
}

/* (b) 並び順を「タイトル → カテゴリ＋日付 → 抜粋 → 続きを読む」にする
       SWELL の既定は「タイトル → 抜粋 → 日付＋カテゴリ」なので入れ替える */
.p-postList.-type-list2 .p-postList__body {
	display: flex;
	flex-direction: column;
}
.p-postList.-type-list2 .p-postList__title { order: 1; }
.p-postList.-type-list2 .p-postList__meta { order: 2; margin-top: .5em; }
.p-postList.-type-list2 .p-postList__excerpt { order: 3; margin-top: .8em; }
.p-postList.-type-list2 .p-postList__body::after { order: 4; }

/* (c) カテゴリをグレーの角丸バッジにする（既定はフォルダアイコン＋テキスト） */
.p-postList.-type-list2 .p-postList__cat {
	background: #efece7;
	border-radius: 3px;
	padding: .3em .7em;
	font-size: 11px;
	line-height: 1;
	opacity: 1;
}
.p-postList.-type-list2 .p-postList__cat.icon-folder::before {
	display: none;
}

/* (d) 「続きを読む」を濃色の角丸ボタン・左寄せにする（既定は枠線のみ・中央・全幅） */
.p-postList.-type-list2 .p-postList__body::after {
	box-shadow: none;
	background: var(--color_main); /* テーマカラーに追従（カスタマイザーのメインカラー） */
	color: #fff;
	border-radius: 4px;
	opacity: 1;
	margin: 1.4em auto 0 0;
	padding: .8em 1.6em;
	width: auto;
	font-size: 12px;
	letter-spacing: .08em;
}

@media only screen and (max-width: 668px) {
	.p-postList.-type-list2 .p-postList__body::after {
		padding: .7em 1.2em;
		font-size: 11px;
	}
}

/* (f) ホバー時の色を青系から茶系に変更（2026-08-03 ユーザー指定）
 *
 * SWELL の既定では下記2つがホバー時に「青」になる:
 *   1) サムネイルのオーバーレイ
 *      .p-postList__thumb::before {
 *          background: linear-gradient(45deg, var(--color_gradient1), var(--color_gradient2));
 *          opacity: 0;
 *      }
 *      .p-postList__link:hover .c-postThumb::before { opacity: .2 }
 *      → --color_gradient1: #d8ffff（淡い水色）／--color_gradient2: #87e7ff（空色）が
 *        20% で乗るため、うっすら青くなっていた
 *   2) 「続きを読む」ボタン
 *      .p-postList__link:hover .p-postList__body::after { background: var(--color_main) }
 *      → --color_main: #04384c（紺）
 *
 * 🔴 --color_gradient1 / 2 や --color_main 自体は変えない。
 *    テーマカラーとしてボタン・見出し・カテゴリリンク等サイト全体で使われているため、
 *    ここでは「記事一覧のホバー」に限定して上書きする。
 */

/* サムネイルに乗るオーバーレイを茶系に */
.p-postList__thumb::before,
.p-postList .c-postThumb::before {
	background: linear-gradient(45deg, #8a7059, #b9a189);
}

/* 🔴 行全体（右側の文章エリア）にはホバー背景を付けない（2026-08-03 ユーザー指定）
 *    ホバーで色が変わるのはサムネイル画像だけにする＝SWELL 既定の挙動と同じ範囲。
 *    一度 .p-postList__link:hover に background-color を入れたが撤去した。 */

/* 「続きを読む」ボタンのホバーは、通常時(#3a3a3a)より少し濃い同系色にする
 * （SWELL 既定は var(--color_main)＝#04384c の紺になるため、青を消す目的で残している） */
.p-postList.-type-list2 .p-postList__link:hover .p-postList__body::after {
	background: var(--color_main_dark); /* SWELLがメインカラーから自動生成する濃い版 */
	color: #fff;
}

/* (e)(g) 撤去済み（2026-08-03）
 *
 * カテゴリバッジ（.c-categoryList__link）とページャー（[class*=page-numbers].current）は
 * 個別に #3a3a3a を上書きしていたが、SWELL のテーマカラー設定
 *   カスタマイザー → 色設定 → メインカラー（loos_customizer の color_main）
 * を #04384c（紺）→ #3a3a3a に変更したため不要になった。
 *
 * color_main は下記すべての参照元になっており、1箇所変えれば全部そろう:
 *   --color_main / --color_htag（見出し）/ --color_main_thin / --color_main_dark /
 *   --color_list_check / --color_list_num / --border01 / --border02
 *   → カテゴリバッジ・ページャー・前後記事リンクの矢印ブロック
 *     （.p-pnLinks .-prev .p-pnLinks__link { border-left: 1.25em solid var(--color_main) }）
 *     ・見出し・リストマーカー等
 *
 * 🔴 今後この色を変えるときは、CSS ではなく SWELL カスタマイザーのメインカラーを変える。 */