@charset "UTF-8";
/*
 * トップ以外のページ（予約する・お問い合わせ・thanks）専用。
 * is_front_page() でないときだけ読み込む。
 *
 * 数値は現行サイトを1440pxで実測した値に合わせている。
 *   読み物の列 … 幅988px 中央（1440pxのとき左端x=226）
 *   Reservation … Noto Sans JP 20px / 600 / 字間5px / #413C1B
 *   User Guide・privacy policy … Arial 20px / 600 / 字間5px / 茶色 #433c03
 *   規約の本文 … Noto Sans JP 11px / 行送り24.75px（＝2.25倍）/ 字間なし / 黒
 *   ボタン    … 濃茶 #413C1B・角丸4px・白文字
 *
 * theme.json は本文全体に「17px・字間6px」を指定しているが、これはトップの
 * 縦書きコピーに合わせた値。下層の読み物にそのまま効くと一文字ずつ離れて
 * 間延びするので、このファイルで打ち消している。トップには影響しない。
 */

/* ==================================================
 * 共通
 * ================================================== */

/*
 * 現行サイトの下層ページには「予約する」などのページ見出しが出ない。
 * ただし見出しが1つも無いページになるのは避けたいので、
 * 消さずに、目に見えない置き方（読み上げと検索には残る）にする。
 */
.entry-header {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* 字間の全体指定を戻し、下層は中央ぞろえを基本にする。 */
.entry-content {
	letter-spacing: normal;
	text-align: center;
}

.entry-content a {
	text-decoration: none;
}

.entry-content a:hover,
.entry-content a:focus-visible {
	text-decoration: underline;
}

/* ---------- ボタン ---------- */
/* 現行サイト実測：高さ50px・文字20px・角丸4px・濃茶地に白文字。 */

.entry-content .wp-block-buttons {
	justify-content: center;
}

.entry-content .wp-block-button__link {
	padding: 15px 32px;
	border-radius: 4px;
	background-color: var(--wp--preset--color--contrast, #413c1b);
	color: #fff;
	font-family: var(--wp--preset--font-family--sans, "Noto Sans JP", sans-serif);
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: normal;
	text-decoration: none;
}

.entry-content .wp-block-button__link:hover,
.entry-content .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--secondary, #433c03);
	text-decoration: none;
}

/* ==================================================
 * 予約する（reservation-page）
 * ================================================== */

/*
 * 見出しの上の絵（くつ・時計・鹿）は現行サイトの装飾。
 * 本文ではなくデザインの一部なので、テーマに同梱してここから置く。
 * 大きさは現行サイトの表示サイズ（幅90px）に合わせ、
 * 高さは元画像の比率から決めて、差し替えても崩れないようにする。
 */
.kakoi-reservation::before,
.kakoi-userguide::before,
.kakoi-privacy::before {
	content: "";
	display: block;
	width: 90px;
	height: auto;
	margin-inline: auto;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.kakoi-reservation::before {
	aspect-ratio: 261 / 168; /* くつ */
	margin-bottom: 6px;
	background-image: url(../img/icon-reservation.png);
}

.kakoi-userguide::before {
	aspect-ratio: 167 / 230; /* 時計 */
	margin-bottom: 20px;
	background-image: url(../img/icon-user-guide.png);
}

.kakoi-privacy::before {
	aspect-ratio: 330 / 214; /* 鹿 */
	margin-bottom: 20px;
	background-image: url(../img/icon-privacy-policy.png);
}

.kakoi-reservation {
	padding-top: 64px;
}

.kakoi-reservation h2 {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans, "Noto Sans JP", sans-serif);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 5px;
	color: var(--wp--preset--color--contrast, #413c1b);
}

/*
 * 電話番号と受付時間は1つの段落に改行で入っている。
 * 現行サイトでは電話が27px、時間が18pxなので、
 * 段落を18pxにしてリンク（電話）だけ大きくする。
 */
.kakoi-reservation p {
	margin: 20px 0 0;
	font-family: var(--wp--preset--font-family--sans, "Noto Sans JP", sans-serif);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast, #413c1b);
}

.kakoi-reservation p a {
	font-size: 27px;
	letter-spacing: 2.2px;
	color: var(--wp--preset--color--secondary, #433c03);
}

.kakoi-reservation .wp-block-buttons {
	margin-top: 22px;
}

/* ==================================================
 * 利用規約（User Guide）・個人情報保護方針（privacy policy）
 * ================================================== */

.kakoi-userguide {
	padding-top: 88px;
}

.kakoi-privacy {
	padding-top: 96px;
	padding-bottom: 100px;
}

/* 見出しは現行サイトと同じ緑。書体もArial系で合わせている。 */
.kakoi-userguide > h2,
.kakoi-privacy > h2 {
	margin: 0 0 46px;
	font-family: Arial, Helvetica, "Noto Sans JP", sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 5px;
	color: #433c03;
}

/*
 * 読み物の列。現行サイトは1440pxで幅988px・左端x=226。
 * ブロックの標準では1080pxになるため、そこだけ上書きする。
 * セレクタが長いのは、WordPress側の指定
 * （.wp-block-group.is-layout-constrained > *）のほうが強く、
 * 同じ強さでは勝てないため。
 */
.entry-content .wp-block-group.kakoi-userguide > *,
.entry-content .wp-block-group.kakoi-privacy > * {
	max-width: 988px;
	margin-inline: auto;
	padding-inline: 0;
}

.kakoi-userguide :where(h3, h4, p),
.kakoi-privacy :where(h3, h4, p) {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans, "Noto Sans JP", sans-serif);
	font-weight: 400;
	font-size: 11px;
	line-height: 2.25; /* 11px × 2.25 = 24.75px（現行サイトと同じ行送り） */
	letter-spacing: normal;
	color: #000;
	text-align: left;
}

/* 【利用規約】【個人情報保護方針】など、かたまりの頭。 */
.kakoi-userguide h3 { font-size: 18px; }
.kakoi-privacy   h3 { font-size: 16px; }
.kakoi-userguide h4 { font-size: 14px; }
.kakoi-privacy   h4 { font-size: 11px; }

/* 見出しとその本文はくっつけ、かたまりの間だけ空ける。 */
.kakoi-userguide :where(h3, h4),
.kakoi-privacy :where(h3, h4),
.kakoi-userguide p + p,
.kakoi-privacy p + p {
	margin-top: 17px;
}

/* ==================================================
 * お問い合わせ（contact）・thanks
 * ================================================== */

/*
 * どちらも現行サイトではロゴだけが置かれ、見出しの文字は無い。
 * ロゴは本文ではなくデザインの一部として、テーマ同梱の画像を使う。
 */
.kakoi-contact::before,
.kakoi-thanks::before {
	content: "";
	display: block;
	height: auto;
	aspect-ratio: 600 / 724;
	margin-inline: auto;
	background: url(../img/logo-mark.webp) center / contain no-repeat;
}

.kakoi-contact {
	padding-top: 130px;
	padding-bottom: 120px;
}

.kakoi-contact::before {
	width: min(300px, 62vw);
	margin-bottom: 72px;
}

/* 現行サイトに見出しの文字は無い。読み上げ用にだけ残す。 */
.kakoi-contact > h2 {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.kakoi-thanks {
	padding-top: 150px;
	padding-bottom: 120px;
}

.kakoi-thanks::before {
	width: min(150px, 40vw);
	margin-bottom: 84px;
}

.kakoi-thanks p {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans, "Noto Sans JP", sans-serif);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: 0.9px;
	color: #7a7a7a;
}

.kakoi-thanks .wp-block-buttons {
	margin-top: 40px;
}

.kakoi-thanks .wp-block-button__link {
	padding: 15px 36px;
	font-size: 16px;
}

/* ==================================================
 * ページの末尾の「上へ戻る」
 * 現行サイトの下層ページだけにあり、PC表示のみ。
 * ================================================== */

.page-top {
	display: block;
	width: 67px;
	height: 65px;
	margin: 0 0 0 auto;
	border-radius: 3px;
	background: #5bc0de;
	color: #fff;
	font-size: 24px;
	line-height: 65px;
	letter-spacing: normal; /* 全体指定の字間6pxが効くと矢印が左へずれる */
	text-align: center;
	text-decoration: none;
}

.page-top:hover,
.page-top:focus-visible {
	background: #31b0d5;
}

@media (max-width: 1200px) {
	.page-top {
		display: none; /* 現行サイトもタブレット・スマホでは出さない */
	}
}

/* ==================================================
 * フッター
 * 下層は現行サイトと同じく、灰色の帯を画面いっぱいに出す。
 * （トップは背景の映像に合わせて右の欄に収めているので、そちらはそのまま）
 * ================================================== */

.site-footer {
	width: 100%;
	max-width: none;
	margin-top: 96px;
	margin-inline: 0;
}

.site-footer__copyright {
	padding: 30px 12px;
	font-size: 15px;
}

/* ==================================================
 * スマホ・タブレット
 * ================================================== */

@media (max-width: 767px) {
	.kakoi-reservation {
		padding-top: 40px;
	}

	.kakoi-reservation h2 {
		font-size: 18px;
		letter-spacing: 3px;
	}

	.kakoi-reservation p {
		font-size: 16px;
	}

	.kakoi-reservation p a {
		font-size: 22px;
	}

	.entry-content .wp-block-button__link {
		padding: 13px 22px;
		font-size: 16px;
	}

	.kakoi-userguide {
		padding-top: 56px;
	}

	.kakoi-privacy {
		padding-top: 60px;
		padding-bottom: 64px;
	}

	.kakoi-userguide > h2,
	.kakoi-privacy > h2 {
		margin-bottom: 28px;
		font-size: 18px;
		letter-spacing: 3px;
	}

	/* 小さい画面では11pxは読みにくいので、行送りはそのままに少し上げる。 */
	.kakoi-userguide :where(h3, h4, p),
	.kakoi-privacy :where(h3, h4, p) {
		font-size: 12px;
	}

	.kakoi-userguide h3 { font-size: 16px; }
	.kakoi-privacy   h3 { font-size: 15px; }
	.kakoi-userguide h4 { font-size: 14px; }
	.kakoi-privacy   h4 { font-size: 12px; }

	.kakoi-contact {
		padding-top: 64px;
		padding-bottom: 72px;
	}

	.kakoi-contact::before {
		margin-bottom: 44px;
	}

	.kakoi-thanks {
		padding-top: 72px;
		padding-bottom: 72px;
	}

	.kakoi-thanks::before {
		margin-bottom: 48px;
	}

	.site-footer {
		margin-top: 56px;
	}

	.site-footer__copyright {
		padding: 22px 12px;
		font-size: 13px;
	}
}

/* 20:38レビュー: 予約導線をTOPと統一。先頭へ戻るとフッターを連続させる。 */
.entry-content .kakoi-reservation .wp-block-button__link {
 display: inline-flex; align-items: center; justify-content: center;
 min-height: 52px; max-width: 100%; padding: 14px 24px;
 background: #087f3e; color: #fff; border: 2px solid #087f3e;
 border-radius: 6px; box-shadow: 0 3px 8px rgba(0,0,0,.15);
 font-size: 17px; font-weight: 700; line-height: 1.5; letter-spacing: .04em; text-decoration: none;
}
.entry-content .kakoi-reservation .wp-block-button__link:hover { background: #066330; border-color: #066330; }
.entry-content .kakoi-reservation .wp-block-button__link:focus-visible { outline: 3px solid #433c03; outline-offset: 4px; }
.site-main:has(> .page-top) + .site-footer { margin-top: 0; }

/* ==================================================
 * 2026-10-03 本番の幅別レイアウトに合わせる（probe-sub-r0.json の実測）
 *   予約 … 規約本文の幅 1024px:902 ／ 768px:651 ／ 390px:左右26px。時計などの絵 90/80/60/70px
 *   お問い合わせ・thanks … ロゴ上端 y=205(1440)・115(1024)・106(768)・119(390)。ロゴ幅 300px（390pxは60vw）
 * ================================================== */
@media (min-width: 1201px) {
	.kakoi-contact { padding-top: 141px; }
	.kakoi-contact::before { margin-bottom: 90px; }
	.kakoi-thanks { padding-top: 216px; }
}

@media (max-width: 1200px) {
	.kakoi-reservation::before,
	.kakoi-userguide::before,
	.kakoi-privacy::before { width: 80px; }

	.kakoi-contact { padding-top: 51px; }
	.kakoi-contact::before { width: 300px; margin-bottom: 73px; }
	.kakoi-thanks { padding-top: 51px; }
	.kakoi-thanks::before { margin-bottom: 63px; }
}

@media (min-width: 768px) and (max-width: 1200px) {
	/* 1024px で 902px、768px で 651px（その間は比例） */
	.entry-content .wp-block-group.kakoi-userguide > *,
	.entry-content .wp-block-group.kakoi-privacy > * {
		max-width: min(calc(98vw - 103px), 902px); /* 2026-10-03 タブレット帯を1200pxまで広げたため902pxで頭打ち */
	}
}

@media (max-width: 900px) and (min-width: 768px) {
	.kakoi-reservation::before,
	.kakoi-userguide::before,
	.kakoi-privacy::before { width: 60px; }
	.kakoi-contact { padding-top: 42px; }
	.kakoi-thanks { padding-top: 42px; }
}

@media (max-width: 767px) {
	.kakoi-reservation::before,
	.kakoi-userguide::before,
	.kakoi-privacy::before { width: 70px; }

	.entry-content .wp-block-group.kakoi-userguide > *,
	.entry-content .wp-block-group.kakoi-privacy > * {
		padding-inline: 10px;
	}

	.kakoi-contact { padding-top: 74px; }
	.kakoi-contact::before { width: 60vw; margin-bottom: 73px; }
	.kakoi-thanks { padding-top: 74px; }
	.kakoi-thanks::before { margin-bottom: 62px; }
}