/*
 * WPの全ページ共通のCSS（functions.php の ork_enqueue_assets で、ページごとのCSSの後に読む）
 * 旧サイトの /stylesheets/common.css には今後足さない。共通の規則はここに書く。2026-10-06
 */

/* 天気予報ウィジェット（アウトドア天気.JP）を中央に寄せる。
   ウィジェットは表示時にIDを書き換え、元のIDを data-origin-id に移すため、そちらで指定する */
[data-origin-id="COURSE_WRAPPER"] .COURSE_WIDGET,
[data-origin-id="COURSE_WRAPPER"] [data-origin-id="COURSE_WIDGET_AUTO"],
[data-origin-id="COURSE_WRAPPER"] [class$="_course_container"] {
	margin-left: auto;
	margin-right: auto;
}

/* 天気予報を包むクリーム色の帯（.section-news）の余白を、外側(margin)と内側(padding)で半々にする。
   天気予報がすぐ下の子にある帯だけに当てる（トップの「Orkブログ／SNS」の帯には当てない） */
.section-news:has(> [id^="COURSE_WRAPPER"]) {
	margin-top: 15px;
	margin-bottom: 30px;
	padding-top: 15px;
	padding-bottom: 30px;
}
@media (min-width: 736px) {
	.section-news:has(> [id^="COURSE_WRAPPER"]) {
		margin-top: 30px;
		margin-bottom: 30px;
		padding-top: 30px;
		padding-bottom: 30px;
	}
}

/* ボタン一覧（.box-contact__lst）の各項目を、.box-notice と同じカード（白地・左に緑の線）にする版 */
.box-contact__lst--notice li {
	background: #fff;
	border: 1px solid #ddd;
	border-left: 4px solid #9ea91c;
	border-radius: 4px;
	padding: 16px 20px;
	box-sizing: border-box;
}
.box-contact__lst--notice .btn-2 {
	margin-top: 8px;
}
@media (max-width: 735px) {
	.box-contact__lst--notice li {
		margin: 0 0 15px;
	}
}

/* PCでは、カードの一覧を項目の数に関係なく中央に寄せる（1つのときも左に寄らない） */
@media (min-width: 736px) {
	.box-contact__lst--notice {
		display: flex;
		justify-content: center;
	}
	/* 1枚のカードの幅をページ間でそろえる（activities の生成CSSに残る旧サイトの max-width: 45% を効かせない） */
	.box-contact__lst--notice li {
		max-width: none;
	}
}

/* 項目が2つの一覧は、カードをつなげて1つの箱にする（PCは横、スマホは縦）。
   PCは緑の線を左の項目だけにし、境目は細い線にする */
@media (min-width: 736px) {
	.box-contact__lst--notice:has(> li:nth-child(2)) {
		display: flex;
		margin-left: 40px !important;
		margin-right: 40px !important;
	}
	.box-contact__lst--notice:has(> li:nth-child(2)) > li {
		flex: 1 1 0;
		display: block;
		width: auto;
		max-width: none;
		margin: 0;
	}
	.box-contact__lst--notice:has(> li:nth-child(2)) > li:first-child {
		border-radius: 4px 0 0 4px;
	}
	.box-contact__lst--notice:has(> li:nth-child(2)) > li + li {
		border-left: 0;
		border-radius: 0 4px 4px 0;
	}
}
@media (max-width: 735px) {
	.box-contact__lst--notice:has(> li:nth-child(2)) > li {
		margin: 0;
	}
	.box-contact__lst--notice:has(> li:nth-child(2)) > li:first-child {
		border-radius: 4px 4px 0 0;
	}
	.box-contact__lst--notice:has(> li:nth-child(2)) > li + li {
		border-top: 0;
		border-radius: 0 0 4px 4px;
	}
}

/* カードの中で、ボタンの段落の後ろに文字（段落）が続くときは、8px空ける */
.box-contact__lst--notice p:has(> .btn-2) + p {
	margin-top: 8px;
}

/* 本文（page.php の .ork-page-body）は、PCで最大1280px・左右の余白0で作られている。
   画面がそれより狭いと本文が画面の端に付くため、その間だけ本文全体の左右に余白を付ける。
   本文の中の書き方（.box-container の有無など）に関係なく、全ページで同じだけ内側に寄る */
@media (min-width: 736px) and (max-width: 1340px) {
	.ork-page-body {
		padding-left: 30px;
		padding-right: 30px;
	}
}

/* 本文を内側に寄せる旧サイトの補助のクラス（.pc-scale は幅90%、.padding08 は左右4%）は、WPでは使わない。
   ページによって本文の左右の位置が変わるため。全ページの本文の左右は .ork-page-body（上）にそろえる */
@media (min-width: 736px) {
	.ork-page-body .pc-scale {
		max-width: none;
	}
	.ork-page-body .padding08 {
		margin-left: 0;
		margin-right: 0;
	}
}

/* 施設MAP（[cottage_map]）。箱1070px・画像1069pxの固定幅なので、本文の幅が狭いとはみ出して切れる。
   本文の幅を超えないよう縮め、左下のロゴの位置も地図の高さに対する割合にする（上から430px ≒ 68%） */
@media (min-width: 736px) {
	.stay-cottage__map {
		max-width: 100%;
	}
	.stay-cottage__map .stay-cottage__map-img img {
		width: 100%;
		max-width: 1069px;
	}
	.stay-cottage__map .stay-cottage__map-ttl {
		top: 68%;
	}
}

/* フッターの「ENJOY ORK」の一覧（.list-photo-link--02）。PCでは左から詰めて並ぶため、1行に3つのときは左に寄っていた。
   行ごとに中央に寄せ、項目の間は30pxにそろえる（3つごと・4つごとに右の余白を変える旧来の調整は不要） */
@media (min-width: 736px) {
	.list-photo-link--02 {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		column-gap: 30px;
	}
	/* 旧CSSの li:nth-child(3n) / (4n) の調整と同じ強さにして、後から読むこちらで打ち消す */
	.list-photo-link--02 li:nth-child(n) {
		float: none;
		margin-right: 0;
	}
}

/* 「ENJOY ORK」の画像の高さをそろえる。画像ごとに縦横の比率が違うため、いちばん多い 270×191 の比率に合わせ、はみ出す分は中央を残して切る */
.list-photo-link--02 .item__pct img {
	width: 100%;
	aspect-ratio: 270 / 191;
	object-fit: cover;
	height: auto;
}

/* ページ固有の下部メニュー（inc/bottom-menu.php。中身は編集画面の「下部メニュー」欄）。画面の下に固定し、項目は均等の幅で並べる。
   ヘッダー(1000)・スマホのメニュー(2000)・お知らせモーダル(9999)より下に重ねる。iPhone の画面下のバーの分も空ける */
.ork-bottom-menu {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900;
	background: #fff;
	border-top: 1px solid #ddd;
	box-shadow: 0 -2px 8px rgba(0, 0, 0, .08);
	padding-bottom: env(safe-area-inset-bottom);
}
.ork-bottom-menu > ul {
	display: flex;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.ork-bottom-menu > ul > li {
	flex: 1 1 0;
	min-width: 0;
}
.ork-bottom-menu > ul > li + li {
	border-left: 1px solid #eee;
}
.ork-bottom-menu > ul > li > a,
.ork-bottom-menu__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0 2px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 12px;
	line-height: 1.3;
	text-align: center;
	color: #333;
	text-decoration: none;
	cursor: pointer;
}
.ork-bottom-menu .is-primary > a,
.ork-bottom-menu .is-primary > .ork-bottom-menu__toggle {
	background: #9ea91c;
	color: #fff;
	font-weight: bold;
}
.ork-bottom-menu .is-primary > .ork-bottom-menu__toggle::before {
	color: #fff;
}
/* サブメニューのある項目：文字の上に ▲（開いているときは ▼）。横幅を取らないので、項目が5つでも狭いスマホで折り返さない */
.ork-bottom-menu__toggle {
	flex-direction: column;
	gap: 2px;
}
.ork-bottom-menu__toggle::before {
	content: '▲';
	font-size: 8px;
	line-height: 1;
	color: #9ea91c;
}
.is-open > .ork-bottom-menu__toggle {
	background: #f5f5ee;
}
.is-open > .ork-bottom-menu__toggle::before {
	content: '▼';
}
/* サブメニュー：メニューの上に開く。スマホは画面の幅いっぱい、PCは親の項目の上 */
.ork-bottom-menu__sub {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #fff;
	border-top: 1px solid #ddd;
	box-shadow: 0 -2px 8px rgba(0, 0, 0, .08);
}
.is-open > .ork-bottom-menu__sub {
	display: block;
}
.ork-bottom-menu__sub li + li {
	border-top: 1px solid #eee;
}
.ork-bottom-menu__sub a {
	display: block;
	padding: 14px 20px;
	font-size: 14px;
	line-height: 1.4;
	color: #333;
	text-decoration: none;
}
/* サブメニューの小さな写真（「表示名|リンク先|説明|画像」の4つ目）。左に写真、右に表示名と説明 */
.ork-bottom-menu__sub a.has-img {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 8px;
	padding-bottom: 8px;
}
.ork-bottom-menu__sub a.has-img img {
	flex: none;
	width: 64px;
	height: 43px;
	object-fit: cover;
	border-radius: 4px;
}
/* サブメニューのアイコン（4つ目に「icon:名前」）。左にサイトの緑の線画 */
.ork-bottom-menu__sub a.has-icon {
	display: flex;
	align-items: center;
	gap: 12px;
}
.ork-bottom-menu__icon {
	flex: none;
	width: 22px;
	height: 22px;
	fill: none;
	stroke: #9ea91c;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* サブメニューの短い説明（「表示名|リンク先|説明」の3つ目）。表示名の下に小さく */
.ork-bottom-menu__desc {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: #888;
}
@media (min-width: 736px) {
	.ork-bottom-menu > ul > li > a,
	.ork-bottom-menu__toggle {
		height: 56px;
		font-size: 15px;
	}
	.ork-bottom-menu > ul > li > a:hover,
	.ork-bottom-menu__toggle:hover,
	.ork-bottom-menu__sub a:hover {
		background: #f5f5ee;
	}
	.ork-bottom-menu .is-primary > a:hover {
		background: #8a941a;
	}
	.ork-bottom-menu .has-sub {
		position: relative;
	}
	.ork-bottom-menu__sub {
		right: auto;
		min-width: 100%;
		width: max-content;
		border: 1px solid #ddd;
		border-bottom: 0;
	}
	.ork-bottom-menu__sub a {
		font-size: 15px;
	}
}
/* ヒーロー画像（template-parts/top-*.php。外側は .box-index-main か .box-img-main--center-center）の中の文字は
   旧CSSで z-index 1000〜1500 のため、下部メニューや固定ヘッダーの上に出ていた。
   ヒーローの中だけの重なり順に閉じ込める（ヒーローの中の見え方は変わらない）。直後の要素を狙う旧CSSがあるので、外側を包む要素は足さない */
.box-index-main,
.box-img-main--center-center {
	isolation: isolate;
}
/* ページ内リンク（#list など）で飛んだ先の見出しが、PCでスクロール時に上に出る固定ヘッダー（高さ約78px）に隠れないように */
@media (min-width: 736px) {
	.ork-page-body [id],
	.ork-page-body a[name] {
		scroll-margin-top: 90px;
	}
}
/* スマホのメニュー（header.php の #main-nav__content）の、宿泊・BBQ・遊びの入口。左に各ページのヒーローの写真、右に名前。
   3つとも同じ幅でそろえて中央に置く */
#main-nav__content li a.ork-sp-nav-img {
	display: flex;
	align-items: center;
	gap: 16px;
	width: min(340px, 100% - 32px);
	margin: 0 auto;
	padding: 4px 0;
	text-align: left;
	font-size: 17px;
}
#main-nav__content li a.ork-sp-nav-img img {
	flex: none;
	width: 96px;
	height: 64px;
	object-fit: cover;
	border-radius: 6px;
	border: 2px solid #fff;
}
/* 項目の間を詰める（旧CSSは各項目の下に45px。写真付きの3つは12px、文字だけの項目は28px） */
@media (max-width: 735px) {
	.box-g-header #main-nav__content li {
		margin-bottom: 28px;
	}
	.box-g-header #main-nav__content li:has(> .ork-sp-nav-img) {
		margin-bottom: 12px;
	}
	.box-g-header #main-nav__content li:has(> .ork-sp-nav-img) + li:not(:has(> .ork-sp-nav-img)) {
		margin-top: 32px;
	}
}
/* 名前の下の概要 */
#main-nav__content li a.ork-sp-nav-img small {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: normal;
	line-height: 1.4;
}
/* 本文の最後（フッター）がメニューに隠れないように */
body.has-ork-bottom-menu {
	padding-bottom: calc(52px + env(safe-area-inset-bottom));
}
@media (min-width: 736px) {
	body.has-ork-bottom-menu {
		padding-bottom: 56px;
	}
}
/* Ork の承認までは、ログインしていない人（お客さん）には出さない。メニュー欄は本番にも書いてある（手元のDBは毎朝本番で上書きされるため）。
   承認が出たら、このかたまりを消すだけで全員に出る。2026-10-30 */
body:not(.logged-in) .ork-bottom-menu {
	display: none;
}
body.has-ork-bottom-menu:not(.logged-in) {
	padding-bottom: 0;
}

/* 棟の一覧・宿泊オプションの一覧（.box-stay-cottage__style .stay-cottage-list）。PCでは270px固定で左から詰めて並び、右が空いていた。
   画面の幅に応じた列数（2〜4列）で均等に並べ、行は中央に寄せる。項目の間とクリーム色の箱の内側に30pxの余白 */
@media (min-width: 736px) {
	.box-stay-cottage__style {
		padding-left: 30px;
		padding-right: 30px;
	}
	.box-stay-cottage__style .stay-cottage-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 30px;
	}
	/* clearfix の疑似要素が並びの項目にならないように */
	.box-stay-cottage__style .stay-cottage-list::before,
	.box-stay-cottage__style .stay-cottage-list::after {
		display: none;
	}
	.box-stay-cottage__style .stay-cottage-list__block,
	.box-stay-cottage__style .stay-cottage-list__block.last {
		float: none;
		width: auto;
		margin: 0;
		flex: 0 0 calc((100% - 30px) / 2);
	}
	.box-stay-cottage__style .stay-cottage-list__img a img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}
/* 列数は画面の幅で決める（カードの幅は列数で均等に割る。項目が少ない行も同じ大きさで中央に並ぶ） */
@media (min-width: 990px) {
	.box-stay-cottage__style .stay-cottage-list__block,
	.box-stay-cottage__style .stay-cottage-list__block.last {
		flex-basis: calc((100% - 60px) / 3);
	}
}
@media (min-width: 1290px) {
	.box-stay-cottage__style .stay-cottage-list__block,
	.box-stay-cottage__style .stay-cottage-list__block.last {
		flex-basis: calc((100% - 90px) / 4);
	}
}
/* スマホの宿泊オプション（料金欄 __option のある項目）。棟の一覧用の2列（写真左・LDKと定員右）だと、
   料金が右の細い列に、本文が写真の幅に押し込まれる。1列にして 見出し→写真→料金→本文 をどれも全幅で並べる */
@media screen and (max-width: 735px) {
	.box-stay-cottage__style .stay-cottage-list__block:has(.stay-cottage-list__option) {
		grid-template-columns: 100%;
	}
	.box-stay-cottage__style .stay-cottage-list__block:has(.stay-cottage-list__option) dt {
		grid-column: 1;
	}
	/* 写真の枠は旧CSSで高さ200px固定。全幅の写真がはみ出して料金に重なるので、写真の高さに合わせる */
	.box-stay-cottage__style .stay-cottage-list__block:has(.stay-cottage-list__option) .stay-cottage-list__img {
		grid-column: 1;
		grid-row: 2;
		height: auto;
	}
	.box-stay-cottage__style .stay-cottage-list__block .stay-cottage-list__option {
		grid-column: 1;
		grid-row: 3;
		float: none;
		width: auto;
		margin: 8px 0;
	}
}