@charset "UTF-8";

/* =========================================================
   野口写真館テーマ
   Figmaワイヤーフレーム（1500px基準）をレスポンシブ化したもの
   ========================================================= */

:root {
	--primary: #191970;
	--accent: #c3b281;
	--text: #6c6c6c;
	--border: #ccc7c2;
	--about-bg: #f5feff;
	--dd-text: #555;

	--font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
	--font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
	--font-gothic: "Zen Kaku Gothic New", var(--font-sans);

	--header-h: 96px;
	--container: 1260px;
	--gutter: 24px;
}

/* ---------- リセット ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body,
h1, h2, h3, h4, p, figure, dl, dd, ul {
	margin: 0;
	padding: 0;
}

ul {
	list-style: none;
}

img,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

body {
	background: #fff;
	color: var(--text);
	font-family: var(--font-sans);
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
}

/* 狭い画面でだけ効かせる改行 */
.br-sp {
	display: none;
}

@media (max-width: 600px) {
	.br-sp {
		display: inline;
	}
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- 共通パーツ ---------- */
.container {
	width: min(100% - var(--gutter) * 2, var(--container));
	margin-inline: auto;
}

/* 見出し（中央：日本語32px + 英字20px） */
.section-title {
	font-family: var(--font-serif);
	text-align: center;
	margin-bottom: 56px;
}

.section-title__ja {
	display: block;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--text);
}

.section-title__en {
	display: block;
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 0.08em;
	color: var(--primary);
}

/* 見出し（左：巨大英字を背景に敷くパターン） */
.section-title--left {
	position: relative;
	text-align: left;
	padding-top: 32px;
	margin-bottom: 8px;
}

.section-title--left .section-title__en {
	position: absolute;
	top: -0.34em;
	left: 0;
	font-size: clamp(64px, 8vw, 120px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0;
	opacity: 0.2;
	pointer-events: none;
}

.section-title--left .section-title__ja {
	position: relative;
	font-size: 24px;
	font-weight: 900;
	line-height: 24px;
}

/* ボタン */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 240px;
	padding: 16px 40px;
	font-family: var(--font-serif);
	font-size: 20px;
	font-weight: 900;
	line-height: 24px;
	text-align: center;
	color: #fff;
	background: var(--primary);
	border-bottom-right-radius: 16px;
	transition: opacity 0.2s ease;
}

.btn:hover {
	opacity: 0.8;
}

.btn-wrap {
	text-align: center;
}

/* 電話番号 */
.tel-link {
	font-family: var(--font-serif);
	font-weight: 900;
	color: var(--accent);
	white-space: nowrap;
}

/* ---------- ヘッダー ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: var(--header-h);
	padding: 22px var(--gutter);
	transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* 背景に何が来ても読めるよう、最上部では上端を暗く落とす */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 140px;
	background: linear-gradient(to bottom, rgb(0 0 0 / 30%), transparent);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

body:not(.home) .site-header::before {
	opacity: 1;
}

/* スクロールしたら白地に切り替えて、常に文字が読める状態にする。
   背景とぼかしは擬似要素に持たせること。
   backdrop-filter を .site-header 自身に付けると、子孫の position: fixed の
   基準がヘッダーの矩形になり、ドロワーが画面全高にならなくなる。 */
.site-header.is-scrolled {
	box-shadow: 0 2px 16px rgb(0 0 0 / 10%);
}

.site-header::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.site-header.is-scrolled::after {
	opacity: 1;
	background: rgb(255 255 255 / 94%);
	backdrop-filter: blur(6px);
}

.site-header.is-scrolled::before {
	opacity: 0;
}

.site-header__brand {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	gap: var(--gutter);
	justify-content: center;
	padding: var(--gutter);
	background: var(--primary);
	border-bottom-right-radius: var(--gutter);
	z-index: 10;
}

.site-header__logo svg {
	width: 220px;
	height: auto;
}

/* 公式ロゴSVGは色指定が無いため、地の色に合わせてここで塗る（path・polygon両方） */
.site-header__logo svg :is(path, polygon, rect, circle, ellipse),
.site-footer__logo svg :is(path, polygon, rect, circle, ellipse) {
	fill: #fff;
}

.site-header__nav {
	display: flex;
	align-items: center;
	gap: 40px;
}

.global-nav {
	display: flex;
	align-items: center;
	gap: 40px;
}

.global-nav a {
	font-family: var(--font-serif);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--text);
	white-space: nowrap;
	transition: color 0.2s ease;
}

.global-nav a:hover {
	color: var(--primary);
}

.site-header__tel a {
	font-family: var(--font-serif);
	font-weight: 900;
	color: var(--accent);
	white-space: nowrap;
}

.site-header__tel-label {
	font-size: 20px;
	line-height: 24px;
}

.site-header__tel-number {
	font-size: 32px;
	line-height: 1.5;
}

/* ハンバーガー（PCでは非表示） */
.site-header__toggle {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.site-header__toggle span:not(.screen-reader-text) {
	display: block;
	width: 26px;
	height: 2px;
	margin: 6px auto;
	background: var(--primary);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ---------- FV ---------- */
.fv {
	padding: 0 50px;
}

.fv-slider {
	position: relative;
	--fv-duration: 6s;
}

/* SP用スライドを登録したときだけ、幅で2つのスライダーを出し分ける */
.fv--split .fv-slider--sp {
	display: none;
}

@media (max-width: 600px) {
	.fv--split .fv-slider--pc {
		display: none;
	}

	.fv--split .fv-slider--sp {
		display: block;
	}
}

.fv-slider__stage {
	position: relative;
	height: 90svh;
	min-height: 320px;
	overflow: hidden;
	border-bottom-right-radius: 40px;
}

.fv-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.fv-slide.is-active {
	opacity: 1;
}

/* 1枚だけのときは常に表示しておく */
.fv-slider:not(.js-fv-slider) .fv-slide {
	opacity: 1;
}

.fv img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}

/* ---------- ドットインジケーター ---------- */
.fv-slider__dots {
	position: absolute;
	right: 40px;
	bottom: 32px;
	z-index: 2;
	display: flex;
	gap: 12px;
	align-items: center;
}

.fv-dot {
	position: relative;
	width: 12px;
	height: 12px;
	padding: 0;
	overflow: hidden;
	background: rgb(255 255 255 / 45%);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: width 0.4s ease, background 0.3s ease;
}

.fv-dot:hover {
	background: rgb(255 255 255 / 75%);
}

/* 表示中のドットだけ横に伸ばし、その中を残り時間で満たす */
.fv-dot.is-active {
	width: 64px;
	background: rgb(255 255 255 / 35%);
}

.fv-dot__meter {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	background: #fff;
	border-radius: inherit;
}

.fv-dot.is-active .fv-dot__meter {
	animation: nogu-fv-meter var(--fv-duration) linear forwards;
}

@keyframes nogu-fv-meter {
	from {
		width: 0;
	}

	to {
		width: 100%;
	}
}

.fv-dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* 動きを減らす設定の端末ではフェードとメーターを止める */
@media (prefers-reduced-motion: reduce) {
	.fv-slide {
		transition: none;
	}

	.fv-dot.is-active .fv-dot__meter {
		animation: none;
		width: 100%;
	}
}

/* ---------- お知らせ ---------- */
.news {
	padding: 80px 0;
}

.news__inner {
	display: flex;
	gap: 80px;
	align-items: flex-start;
	width: min(100% - var(--gutter) * 2, 1160px);
	margin-inline: auto;
}

.news__title {
	flex-shrink: 0;
	text-align: left;
	margin-bottom: 0;
}

.news__title .section-title__ja,
.news__title .section-title__en {
	text-align: left;
}

.news__list {
	display: flex;
	flex: 1 0 0;
	min-width: 0;
	flex-direction: column;
	gap: var(--gutter);
}

.news__item {
	display: flex;
	gap: var(--gutter);
	align-items: center;
	padding-bottom: var(--gutter);
	border-bottom: 1px solid var(--border);
	font-family: var(--font-gothic);
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
}

.news__date {
	flex-shrink: 0;
	width: 120px;
	color: var(--accent);
}

.news__text {
	flex: 1 0 0;
	min-width: 0;
	color: var(--text);
	letter-spacing: 0.04em;
}

.news__text a:hover {
	color: var(--primary);
}

/* ---------- about ---------- */
.about {
	display: flex;
	gap: 40px;
	align-items: center;
	justify-content: center;
	padding: 57px 69px;
	background: var(--about-bg);
}

.about__collage {
	position: relative;
	flex-shrink: 1;
	width: 100%;
	max-width: 462px;
	/* Figmaの462×473。比率で持たせて、どの幅でも同じ配置になるようにする */
	aspect-ratio: 462 / 473;
}

.about__collage img {
	position: absolute;
	object-fit: cover;
}

/* Figmaの座標を462×473に対する割合へ置き換えたもの */
.about__collage img:nth-child(1) {
	top: 0;
	left: 0;
	z-index: 1;
	width: 60.85%;
	border-bottom-right-radius: 8.66%;
}

.about__collage img:nth-child(2) {
	top: 15.86%;
	left: 57.79%;
	width: 42.21%;
	height: 51.59%;
}

.about__collage img:nth-child(3) {
	top: 57.93%;
	left: 51.08%;
	width: 34.42%;
	height: 42.07%;
}

.about__collage img:nth-child(4) {
	top: 41.23%;
	left: 6.06%;
	width: 45.02%;
	height: 54.97%;
}

.about__body {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: 831px;
}

.about__lead {
	font-family: var(--font-serif);
	font-size: 40px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--primary);
}

.about__text p {
	font-size: 20px;
	line-height: 2;
	letter-spacing: 0.04em;
	color: var(--text);
	word-break: auto-phrase;
}

/* ---------- 撮影メニュー ---------- */
.menu {
	padding: 80px 0;
}

.menu__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}

.menu-card {
	display: flex;
	flex-direction: column;
}

.menu-card__thumb {
	position: relative;
	aspect-ratio: 1 / 1;
}

.menu-card__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 人物の顔が切れにくいよう、寄せる位置を上げておく */
	object-position: center 30%;
	border-bottom-right-radius: var(--gutter);
}

.menu-card__label {
	position: absolute;
	bottom: -8px;
	left: 8px;
	padding: 8px 16px;
	font-size: 24px;
	line-height: normal;
	color: #fff;
	background: rgba(25, 25, 112, 0.7);
	white-space: nowrap;
}

.menu-card__text {
	margin-top: var(--gutter);
	font-size: 18px;
	line-height: 1.5;
	color: var(--text);
}

/* ---------- ギャラリー / インスタグラム ---------- */
.gallery {
	padding: 80px 0;
}

.gallery__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
}

.gallery__item {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	overflow: hidden;
}

.gallery__grid img {
	width: 100%;
	aspect-ratio: 252 / 300;
	object-fit: cover;
	object-position: center 30%;
	transition: transform 0.4s ease, opacity 0.3s ease;
}

.gallery__item:hover img,
.gallery__item:focus-visible img {
	transform: scale(1.05);
	opacity: 0.85;
}

.gallery__item:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: -2px;
}

.gallery .btn-wrap {
	margin-top: 72px;
}

.gallery__placeholder {
	grid-column: 1 / -1;
	padding: 80px 0;
	text-align: center;
	color: var(--border);
}

/* ---------- アクセス / お問い合わせ ---------- */
.access,
.contact {
	display: flex;
	align-items: stretch;
}

/* 高さは本文にまかせ、地図側をそれに合わせる（本文下に余白を作らないため） */
.access {
	min-height: 420px;
}

.access__body {
	justify-content: center;
}

.access__map,
.contact__photo {
	position: relative;
	flex: 1 1 50%;
	min-width: 0;
}

.access__map img,
.access__map iframe,
.contact__photo img {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

/* 地図は隣の本文の高さいっぱいに敷く（縦横比で伸ばさない） */
.access__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.access__body,
.contact__body {
	display: flex;
	flex: 1 1 50%;
	min-width: 0;
	flex-direction: column;
	gap: 40px;
	padding: 80px 120px 80px 40px;
	background: #fff;
}

.access__dl {
	display: flex;
	flex-direction: column;
	gap: var(--gutter);
	font-family: var(--font-serif);
	font-weight: 700;
}

.access__row {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-bottom: var(--gutter);
	border-bottom: 1px dashed var(--border);
}

.access__row dt {
	font-size: 20px;
	letter-spacing: 0.1em;
	color: var(--primary);
}

.access__row dd {
	font-size: 18px;
	line-height: 1.5;
	letter-spacing: 0.1em;
	color: var(--dd-text);
	/* 番地の途中で切れないようにする */
	word-break: auto-phrase;
}

/* 住所は郵便番号のあとで必ず折り返す */
.access__zip {
	display: block;
}

.contact__lead {
	font-family: var(--font-serif);
	font-size: 32px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--primary);
	/* 「ご予約はこ／ちら」のような切れ方を避ける */
	word-break: auto-phrase;
}

.contact__text p {
	font-size: 20px;
	line-height: 2;
	letter-spacing: 0.04em;
	word-break: auto-phrase;
}

.contact__tel a {
	font-family: var(--font-serif);
	font-weight: 900;
	color: var(--accent);
	white-space: nowrap;
}

.contact__tel-label {
	font-size: 20px;
	line-height: 24px;
}

.contact__tel-number {
	font-size: 32px;
	line-height: 1.5;
}

.contact .btn-wrap {
	text-align: left;
}

/* ---------- フッター ---------- */
.site-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 22px 56px;
	background: var(--text);
}

.site-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.site-footer__logo {
	padding: var(--gutter);
}

.site-footer__logo svg {
	width: 220px;
	height: auto;
}

.site-footer .global-nav a {
	color: #fff;
}

.site-footer .global-nav a:hover {
	color: var(--accent);
}

.site-footer__social {
	display: flex;
	align-items: center;
	gap: 20px;
}

.site-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: #fff;
	border: 1px solid rgb(255 255 255 / 40%);
	border-radius: 50%;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
	color: var(--accent);
	border-color: var(--accent);
}

.site-footer__social svg {
	width: 21px;
	height: 21px;
	/* ブランドマークは塗りで描くので、ロゴSVGの白塗り指定に巻き込まれないようにする */
	fill: currentColor;
}

.site-footer__copy {
	font-family: var(--font-serif);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	color: #fff;
}

/* =========================================================
   レスポンシブ
   ========================================================= */

@media (max-width: 1200px) {
	.access__body,
	.contact__body {
		padding: 56px 40px;
	}

	.about {
		padding: 56px 40px;
	}

	.about__lead {
		font-size: 32px;
	}

	.about__text p,
	.contact__text p {
		font-size: 18px;
	}

	.menu__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.site-header__tel-number,
	.contact__tel-number {
		font-size: 26px;
	}

	.site-header__nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(86vw, 340px);
		flex-direction: column;
		align-items: flex-start;
		/* 項目が増えても上下が切れないよう、中央寄せをやめて上から積む */
		justify-content: flex-start;
		gap: 32px;
		/* 上端はハンバーガーのぶんを空ける */
		padding: calc(var(--header-h) + 24px) 28px 40px;
		/* 画面に収まらない件数でも全項目に届くようにする */
		overflow-y: auto;
		overscroll-behavior: contain;
		background: #fff;
		box-shadow: -8px 0 32px rgb(0 0 0 / 12%);
		transform: translateX(100%);
		transition: transform 0.3s ease;
		z-index: 20;
	}

	/* 狭い端末で電話番号がドロワー幅を超えないようにする */
	.site-header__nav .global-nav {
		width: 100%;
	}

	.site-header__nav .site-header__tel {
		width: 100%;
	}

	.site-header__nav .site-header__tel a {
		display: flex;
		align-items: baseline;
		gap: 4px;
		flex-wrap: wrap;
	}

	.site-header__nav .site-header__tel-label {
		font-size: 16px;
	}

	.site-header__nav .site-header__tel-number {
		font-size: clamp(22px, 6.2vw, 28px);
	}

	.site-header__nav.is-open {
		transform: translateX(0);
	}

	.global-nav {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--gutter);
	}

	.site-header__toggle {
		display: block;
		z-index: 30;
	}

	/* 開いている間は背面を暗くして、メニューを読みやすくする */
	body.is-nav-open::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 15;
		background: rgb(0 0 0 / 45%);
	}

	body.is-nav-open {
		overflow: hidden;
	}

	/* 開いたときはハンバーガーを×に */
	.is-nav-open .site-header__toggle span:not(.screen-reader-text):nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}

	.is-nav-open .site-header__toggle span:not(.screen-reader-text):nth-child(2) {
		opacity: 0;
	}

	.is-nav-open .site-header__toggle span:not(.screen-reader-text):nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}

	.site-header__brand {
		padding: 16px;
	}

	.site-header__logo svg {
		width: 160px;
		height: auto;
	}
}

@media (max-width: 900px) {
	.news__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}

	.about {
		flex-direction: column;
	}

	.access,
	.contact {
		flex-direction: column;
	}

	.contact {
		flex-direction: column-reverse;
	}

	.access {
		min-height: 0;
	}

	.access__map,
	.contact__photo {
		position: static;
	}

	.access__map img,
	.access__map iframe,
	.contact__photo img {
		position: static;
		height: clamp(240px, 50vw, 420px);
		aspect-ratio: auto;
	}

	.gallery__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.site-footer__inner {
		flex-direction: column;
		gap: 28px;
	}
}

@media (max-width: 600px) {
	/* ヘッダーを詰めて、FVを画面内に収める */
	:root {
		--header-h: 76px;
	}

	.fv {
		padding: 0 16px;
	}

	.fv-slider__stage {
		min-height: 380px;
	}

	/* お知らせは左右の余白を詰めて幅を使い切る */
	.news__inner {
		width: calc(100% - 32px);
	}

	/* 最後の行が1枚だけにならないよう、TOPの写真は8枚に絞る */
	.gallery--front .gallery__grid > *:nth-child(n+9) {
		display: none;
	}

	.gallery--front .gallery__grid img {
		aspect-ratio: 1 / 1;
	}

	/* 英字を重ねると日本語と潰れ合うので、縦に並べる */
	.section-title--left {
		padding-top: 0;
	}

	.section-title--left .section-title__en {
		position: static;
		font-size: clamp(36px, 11vw, 44px);
		opacity: 0.25;
	}

	.section-title--left .section-title__ja {
		margin-top: 4px;
	}

	/* お知らせは日付を上に置いて本文の幅を確保する */
	.news__item {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.news__date {
		width: auto;
		font-size: 14px;
	}

	/* 文字数の多いボタンが折り返さないよう左右を詰める */
	.btn {
		padding: 16px 20px;
	}

	/* フッターは各項目の間隔を確保する */
	.site-footer {
		padding: 32px 20px;
		gap: 20px;
	}

	.site-footer__logo {
		padding: 0;
	}

	.site-footer .global-nav {
		align-items: center;
		gap: 14px;
	}

	.site-footer__copy {
		margin-top: 4px;
		font-size: 16px;
	}

	.about {
		padding: 40px 20px;
		gap: var(--gutter);
	}

	.about__text p,
	.contact__text p {
		font-size: 16px;
		line-height: 1.9;
	}

	.fv-slider__dots {
		right: 16px;
		bottom: 16px;
		gap: 8px;
	}

	.fv-dot.is-active {
		width: 44px;
	}

	.menu__grid {
		grid-template-columns: 1fr;
	}

	.gallery__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.about__lead {
		font-size: 26px;
	}

	.contact__lead {
		font-size: 22px;
	}

	/* 左右の余白が広いと1行に収まらないため詰める */
	.access__body,
	.contact__body {
		padding: 48px 20px;
		gap: 28px;
	}

	.section-title--left .section-title__en {
		font-size: 56px;
	}

	.btn {
		min-width: 0;
		width: 100%;
		font-size: 18px;
	}
}

/* =========================================================
   下層ページ
   ========================================================= */

/* ---------- ページヘッダー ---------- */
.page-header {
	position: relative;
	height: 400px;
	margin-top: calc(var(--header-h) * -1);
	overflow: hidden;
	border-bottom-right-radius: 40px;
}

.page-header__bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

/* Figmaのオーバーレイ rgba(90,197,226,0.4) */
.page-header::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgb(90 197 226 / 40%);
	border-bottom-right-radius: 40px;
}

/* 明るい写真でもナビとタイトルが読めるよう、上下を落とす */
.page-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(to bottom, rgb(0 0 0 / 30%), transparent 40%),
		linear-gradient(to top, rgb(0 0 0 / 52%), transparent 60%);
	border-bottom-right-radius: 40px;
	pointer-events: none;
}

.page-header__title {
	position: absolute;
	/* 高さが変わっても収まりが変わらないよう、下端からの位置で置く */
	bottom: clamp(20px, 5vw, 56px);
	left: clamp(16px, 4vw, 36px);
	z-index: 3;
	font-family: var(--font-serif);
	font-weight: 900;
	white-space: nowrap;
	/* 背景写真が明るくても読めるように */
	text-shadow: 0 2px 12px rgb(0 0 0 / 45%);
}

.page-header__en {
	font-size: clamp(40px, 11vw, 120px);
	line-height: 1;
	color: #fff;
}

.page-header__ja {
	margin-top: clamp(2px, 1vw, 8px);
	font-size: clamp(14px, 3.6vw, 24px);
	line-height: 1.4;
	letter-spacing: 0.08em;
	color: #fff;
}

/* ---------- 撮影メニュー一覧 ---------- */
.menu-archive {
	padding: 80px 0 96px;
}

.menu-archive__lead {
	margin: -24px auto 72px;
	max-width: 831px;
	text-align: center;
	font-size: 20px;
	line-height: 2;
	letter-spacing: 0.04em;
}

.menu-detail-list {
	display: flex;
	flex-direction: column;
	gap: 64px;
}

.menu-detail {
	display: flex;
	gap: 64px;
	align-items: flex-start;
	padding-bottom: 64px;
	border-bottom: 1px solid var(--border);
}

.menu-detail:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.menu-detail__photo {
	flex-shrink: 0;
	width: 400px;
}

.menu-detail__photo img {
	width: 100%;
	height: auto;
}

.menu-detail__body {
	display: flex;
	flex: 1 0 0;
	min-width: 0;
	flex-direction: column;
	gap: 19px;
}

.menu-detail__title {
	font-family: var(--font-serif);
	font-size: 36px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--text);
}

.menu-detail__catch {
	font-family: var(--font-serif);
	font-size: 18px;
	line-height: 2;
	letter-spacing: 0.04em;
	color: var(--primary);
}

.menu-detail__text {
	font-size: 16px;
	line-height: 2;
	letter-spacing: 0.04em;
}

.menu-detail__text p + p {
	margin-top: 0;
}

/* 料金プラン */
.plan__heading {
	padding-bottom: 0;
	border-bottom: 1px solid var(--primary);
	font-family: var(--font-serif);
	font-size: 16px;
	font-weight: 500;
	line-height: 2;
	letter-spacing: 0.04em;
	color: var(--primary);
}

.plan__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

.plan__row {
	display: flex;
	gap: var(--gutter);
	align-items: center;
	padding-bottom: 8px;
	border-bottom: 1px dashed var(--border);
	font-size: 16px;
	line-height: 2;
	letter-spacing: 0.04em;
	color: var(--text);
}

.plan__name {
	flex-shrink: 0;
	width: 120px;
}

.plan__desc {
	flex: 1 0 0;
	min-width: 0;
}

.plan__price {
	flex-shrink: 0;
	width: 80px;
	text-align: right;
}

.plan__note {
	margin-top: 8px;
	font-size: 14px;
	line-height: 2;
	letter-spacing: 0.04em;
}

/* 料金プランの下の追加ブロック */
.menu-detail__sub-heading {
	padding-bottom: 0;
	border-bottom: 1px solid var(--primary);
	font-family: var(--font-serif);
	font-size: 16px;
	font-weight: 500;
	line-height: 2;
	letter-spacing: 0.04em;
	color: var(--primary);
}

.menu-detail__sub-text {
	margin-top: 8px;
	font-size: 16px;
	line-height: 2;
	letter-spacing: 0.04em;
}

.menu-detail__accent {
	padding-bottom: 4px;
	border-bottom: 1px solid var(--accent);
	font-family: var(--font-serif);
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
	color: var(--accent);
}

.btn-wrap--left {
	text-align: left;
}

@media (max-width: 1000px) {
	.menu-detail {
		flex-direction: column;
		gap: 32px;
	}

	.menu-detail__photo {
		width: 100%;
	}
}

@media (max-width: 600px) {
	.page-header {
		height: 240px;
	}

	.menu-archive__lead {
		font-size: 16px;
		text-align: left;
	}

	.plan__row {
		flex-wrap: wrap;
		gap: 4px 16px;
	}

	.plan__name {
		width: auto;
	}

	.plan__desc {
		flex: 1 0 100%;
		order: 3;
	}
}

/* 下層ページはヘッダーが写真に重なるため、ナビを白抜きにする */
body:not(.home) .global-nav a {
	color: #fff;
	text-shadow: 0 1px 4px rgb(0 0 0 / 35%);
}

body:not(.home) .global-nav a:hover {
	color: var(--accent);
}

body:not(.home) .site-footer .global-nav a {
	text-shadow: none;
}

body:not(.home) .site-header__tel a {
	color: #fff;
	text-shadow: 0 1px 6px rgb(0 0 0 / 40%);
}

body:not(.home) .site-header__tel-label,
body:not(.home) .site-header__tel-number {
	color: inherit;
}

.gallery--archive {
	padding: 80px 0 96px;
}

/* ページネーション */
.pagination {
	margin-top: 56px;
	text-align: center;
}

.pagination .page-numbers {
	display: inline-block;
	min-width: 40px;
	padding: 8px;
	font-family: var(--font-serif);
	color: var(--primary);
}

.pagination .page-numbers.current {
	color: #fff;
	background: var(--primary);
}

/* =========================================================
   ギャラリーのモーダル
   ========================================================= */

body.is-modal-open {
	overflow: hidden;
}

.gallery-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gallery-modal[hidden] {
	display: none;
}

.gallery-modal__backdrop {
	position: absolute;
	inset: 0;
	background: #000;
	opacity: 0.92;
}

.gallery-modal__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(92vw, 1100px);
	height: min(88vh, 900px);
}

.gallery-modal__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 100%;
	max-height: 100%;
	min-height: 0;
	margin: 0;
}

.gallery-modal__image {
	width: auto;
	height: auto;
	max-width: 100%;
	/* キャプション分を残してビューポート内に収める */
	max-height: min(78vh, 820px);
	object-fit: contain;
}

.gallery-modal__caption {
	font-family: var(--font-serif);
	font-size: 16px;
	color: #fff;
}

.gallery-modal__close,
.gallery-modal__nav {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: #fff;
	background: rgb(0 0 0 / 40%);
	border: 0;
	cursor: pointer;
	transition: background 0.2s ease;
}

.gallery-modal__close:hover,
.gallery-modal__nav:hover {
	background: var(--primary);
}

.gallery-modal__close {
	top: -8px;
	right: -8px;
	width: 44px;
	height: 44px;
	font-size: 28px;
	line-height: 1;
	border-radius: 50%;
}

.gallery-modal__nav {
	top: 50%;
	width: 48px;
	height: 72px;
	font-size: 32px;
	line-height: 1;
	transform: translateY(-50%);
}

.gallery-modal__nav--prev {
	left: -56px;
}

.gallery-modal__nav--next {
	right: -56px;
}

@media (max-width: 900px) {
	.gallery-modal__inner {
		width: 94vw;
	}

	.gallery-modal__nav--prev {
		left: 0;
	}

	.gallery-modal__nav--next {
		right: 0;
	}

	.gallery-modal__close {
		top: -4px;
		right: -4px;
		width: 40px;
		height: 40px;
	}
}

/* ---------- 固定ページ・投稿詳細 ---------- */
.page-body {
	padding: 80px 0 96px;
}

.container--narrow {
	width: min(100% - var(--gutter) * 2, 840px);
}

.entry-header {
	margin-bottom: 40px;
	padding-bottom: var(--gutter);
	border-bottom: 1px solid var(--border);
}

.entry-date {
	font-family: var(--font-gothic);
	font-size: 16px;
	color: var(--accent);
}

.entry-title {
	margin-top: 8px;
	font-family: var(--font-serif);
	font-size: 32px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--primary);
}

/* =========================================================
   記事本文（お知らせ・固定ページ）
   ========================================================= */

.entry-content {
	font-size: 17px;
	line-height: 2;
	letter-spacing: 0.02em;
	color: var(--text);
	overflow-wrap: anywhere;
}

.entry-content > * + * {
	margin-top: 1.6em;
}

/* ---------- 見出し ---------- */
.entry-content :is(h2, h3, h4, h5, h6) {
	font-family: var(--font-serif);
	line-height: 1.5;
	color: var(--primary);
}

.entry-content > :is(h2, h3, h4, h5, h6) {
	margin-top: 2.4em;
}

.entry-content > :is(h2, h3, h4, h5, h6):first-child {
	margin-top: 0;
}

.entry-content h2 {
	font-size: 26px;
	font-weight: 700;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
}

.entry-content h3 {
	font-size: 21px;
	font-weight: 700;
	padding-left: 14px;
	border-left: 4px solid var(--accent);
}

.entry-content h4 {
	font-size: 18px;
	font-weight: 700;
}

.entry-content :is(h5, h6) {
	font-size: 17px;
	font-weight: 700;
	color: var(--text);
}

/* 見出し直後の本文は詰める */
.entry-content :is(h2, h3, h4, h5, h6) + * {
	margin-top: 0.8em;
}

/* ---------- 文字 ---------- */
.entry-content a {
	color: var(--primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: opacity 0.2s ease;
}

.entry-content a:hover {
	opacity: 0.65;
}

.entry-content strong {
	font-weight: 700;
	color: var(--primary);
}

.entry-content mark {
	background: linear-gradient(transparent 60%, rgb(195 178 129 / 45%) 60%);
	color: inherit;
}

.entry-content small {
	font-size: 14px;
}

.entry-content code {
	padding: 0.15em 0.5em;
	font-size: 0.9em;
	background: #f2f0ed;
	border-radius: 3px;
}

/* ---------- 画像とキャプション ---------- */
.entry-content :is(figure, .wp-block-image) {
	margin-inline: 0;
}

.entry-content :is(figure, .wp-block-image) img {
	width: 100%;
	height: auto;
	border-bottom-right-radius: var(--gutter);
}

.entry-content figcaption,
.entry-content .wp-element-caption {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.7;
	text-align: center;
	color: #8a8a8a;
}

/* キャプションが空なら詰めない（WordPressは空要素を出力しないが、念のため） */
.entry-content figcaption:empty {
	display: none;
}

/* 回り込み指定に対応する */
.entry-content .alignleft {
	float: left;
	margin: 0 var(--gutter) var(--gutter) 0;
	max-width: 50%;
}

.entry-content .alignright {
	float: right;
	margin: 0 0 var(--gutter) var(--gutter);
	max-width: 50%;
}

.entry-content .aligncenter {
	margin-inline: auto;
}

.entry-content .alignwide,
.entry-content .alignfull {
	width: auto;
	margin-inline: calc(var(--gutter) * -1);
}

.entry-content::after {
	content: "";
	display: block;
	clear: both;
}

/* ---------- リスト ---------- */
.entry-content :is(ul, ol) {
	padding-left: 1.6em;
}

.entry-content ul {
	list-style: disc;
}

.entry-content ol {
	list-style: decimal;
}

.entry-content li + li {
	margin-top: 0.4em;
}

.entry-content li::marker {
	color: var(--accent);
}

/* 入れ子は記号を変えて階層を示す */
.entry-content :is(ul, ol) :is(ul, ol) {
	margin-top: 0.4em;
	padding-left: 1.4em;
	font-size: 0.95em;
}

.entry-content ul ul {
	list-style: circle;
}

.entry-content ul ul ul {
	list-style: square;
}

.entry-content ol ol {
	list-style: lower-latin;
}

.entry-content ol ol ol {
	list-style: lower-roman;
}

.entry-content :is(ul, ol) :is(ul, ol) li::marker {
	color: var(--border);
}

/* ---------- 引用 ---------- */
.entry-content blockquote {
	margin-inline: 0;
	padding: var(--gutter) 28px;
	background: #faf9f7;
	border-left: 4px solid var(--border);
	font-size: 16px;
}

.entry-content blockquote > * + * {
	margin-top: 1em;
}

.entry-content blockquote cite,
.entry-content blockquote .wp-block-quote__citation {
	display: block;
	margin-top: 12px;
	font-size: 14px;
	font-style: normal;
	color: #8a8a8a;
}

.entry-content blockquote cite::before {
	content: "— ";
}

/* ---------- 表 ---------- */
.entry-content .wp-block-table,
.entry-content figure:has(> table) {
	overflow-x: auto;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}

.entry-content :is(th, td) {
	padding: 14px 16px;
	border: 1px solid var(--border);
	text-align: left;
	vertical-align: top;
}

.entry-content th {
	background: #f7f6f4;
	font-weight: 700;
	color: var(--primary);
	white-space: nowrap;
}

/* ---------- 区切り線 ---------- */
.entry-content hr,
.entry-content .wp-block-separator {
	height: 0;
	margin-block: 3em;
	border: 0;
	border-top: 1px solid var(--border);
}

.entry-content .wp-block-separator.is-style-dots {
	border: 0;
	text-align: center;
}

/* ---------- ボタン ---------- */
.entry-content .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.entry-content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 32px;
	font-family: var(--font-serif);
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	background: var(--primary);
	border-bottom-right-radius: 16px;
	text-decoration: none;
}

.entry-content .wp-block-button__link:hover {
	opacity: 0.8;
}

.entry-content .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--primary);
	background: none;
	border: 1px solid var(--primary);
}

/* ---------- 埋め込み・ギャラリー ---------- */
.entry-content :is(.wp-block-embed__wrapper, .wp-block-video) iframe,
.entry-content .wp-block-embed__wrapper video {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

.entry-content .wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
}

.entry-content .wp-block-gallery figure {
	margin: 0;
}

/* ---------- 補足ボックス（is-style-info を付けた段落） ---------- */
.entry-content .is-style-info {
	padding: 20px var(--gutter);
	background: var(--about-bg);
	border-bottom-right-radius: 16px;
	font-size: 16px;
}

@media (max-width: 600px) {
	.entry-content {
		font-size: 16px;
	}

	.entry-content h2 {
		font-size: 22px;
	}

	.entry-content h3 {
		font-size: 19px;
	}

	.entry-content :is(.alignleft, .alignright) {
		float: none;
		max-width: 100%;
		margin: 0;
	}
}

.page-body .btn-wrap {
	margin-top: 64px;
}

/* =========================================================
   カテゴリー絞り込み付き一覧（ギャラリー・衣装）
   ========================================================= */

.filter {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin: -24px 0 64px;
}

.filter__btn {
	padding: 10px 24px;
	font-family: var(--font-serif);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--primary);
	background: none;
	border: 1px solid var(--border);
	border-bottom-right-radius: 12px;
	cursor: pointer;
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.filter__btn:hover {
	border-color: var(--primary);
}

.filter__btn.is-active {
	color: #fff;
	background: var(--primary);
	border-color: var(--primary);
}

.filter__btn:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.filter-sections {
	display: flex;
	flex-direction: column;
	gap: 72px;
}

.filter-section.is-hidden {
	display: none;
}

.filter-section__title {
	margin-bottom: var(--gutter);
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
	font-family: var(--font-serif);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--primary);
}

/* ---------- 衣装 ---------- */
.costume-archive .gallery__grid {
	grid-template-columns: repeat(5, 1fr);
	gap: var(--gutter);
}

.costume-card__name {
	margin-top: 12px;
	font-size: 15px;
	line-height: 1.6;
	text-align: center;
}

/* 衣装は商品カタログなので、切り取らず全体を見せる */
.costume-archive .gallery__grid img {
	aspect-ratio: 3 / 4;
	object-fit: contain;
	background: #f7f6f4;
}

.costume-archive .gallery__item {
	background: #f7f6f4;
}

@media (max-width: 900px) {
	.costume-archive .gallery__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.filter-sections {
		gap: 56px;
	}
}

@media (max-width: 600px) {
	.costume-archive .gallery__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.filter {
		gap: 8px;
	}

	.filter__btn {
		padding: 8px 16px;
		font-size: 14px;
	}

	.filter-section__title {
		font-size: 20px;
	}
}

/* =========================================================
   お問い合わせフォーム（Contact Form 7）
   ========================================================= */

.wpcf7 {
	margin-top: 48px;
}

.wpcf7-form > p:empty {
	display: none;
}

.cf7-field + .cf7-field {
	margin-top: var(--gutter);
}

.cf7-field label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
	font-family: var(--font-serif);
	font-size: 17px;
	font-weight: 700;
	color: var(--primary);
}

.cf7-req,
.cf7-any {
	padding: 3px 10px;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0.08em;
	border-radius: 2px;
}

.cf7-req {
	color: #fff;
	background: #b4483c;
}

.cf7-any {
	color: var(--text);
	background: #eceae7;
}

.cf7-note {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.7;
	color: #8a8a8a;
}

/* 入力欄 */
.wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
	width: 100%;
	padding: 14px 16px;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.7;
	color: var(--text);
	background: #fbfaf9;
	border: 1px solid var(--border);
	border-radius: 0;
	border-bottom-right-radius: 12px;
	transition: border-color 0.2s ease, background 0.2s ease;
	appearance: none;
}

.wpcf7 :is(input, textarea)::placeholder {
	color: #b9b5b0;
}

.wpcf7 :is(input, textarea):focus {
	background: #fff;
	border-color: var(--primary);
	outline: 2px solid rgb(25 25 112 / 15%);
	outline-offset: 1px;
}

.wpcf7 textarea {
	resize: vertical;
	min-height: 180px;
}

/* 送信ボタン */
.cf7-submit {
	margin-top: 40px;
	text-align: center;
}

.wpcf7 input[type="submit"] {
	min-width: 280px;
	padding: 18px 40px;
	font-family: var(--font-serif);
	font-size: 18px;
	font-weight: 900;
	line-height: 1.5;
	color: #fff;
	background: var(--primary);
	border: 0;
	border-bottom-right-radius: 16px;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.wpcf7 input[type="submit"]:hover {
	opacity: 0.82;
}

.wpcf7 input[type="submit"]:disabled {
	opacity: 0.5;
	cursor: default;
}

/* 入力エラー */
.wpcf7-not-valid-tip {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.7;
	color: #b4483c;
}

.wpcf7 :is(input, textarea).wpcf7-not-valid {
	border-color: #b4483c;
	background: #fdf7f6;
}

/* 送信結果の表示 */
.wpcf7-response-output {
	margin: var(--gutter) 0 0;
	padding: 16px 20px;
	border: 1px solid var(--border);
	border-radius: 0;
	border-bottom-right-radius: 12px;
	font-size: 16px;
	line-height: 1.8;
}

.wpcf7 form.sent .wpcf7-response-output {
	color: var(--primary);
	background: var(--about-bg);
	border-color: var(--primary);
}

.wpcf7 form:is(.failed, .aborted, .invalid, .unaccepted, .payment-required) .wpcf7-response-output {
	color: #b4483c;
	background: #fdf7f6;
	border-color: #b4483c;
}

.wpcf7-spinner {
	margin: 0 0 0 12px;
}

@media (max-width: 600px) {
	.cf7-field label {
		font-size: 16px;
	}

	.wpcf7 input[type="submit"] {
		width: 100%;
		min-width: 0;
		font-size: 17px;
	}
}

/* =========================================================
   ドロワー内の文字色
   下層ページ用の白文字指定を打ち消すため、最後にまとめて置く
   ========================================================= */

@media (max-width: 1200px) {
	body:not(.home) .site-header__nav .global-nav a,
	.site-header__nav .global-nav a {
		color: var(--primary);
		text-shadow: none;
	}

	body:not(.home) .site-header__nav .global-nav a:hover,
	.site-header__nav .global-nav a:hover {
		color: var(--accent);
	}

	body:not(.home) .site-header__tel a,
	.site-header__tel a {
		color: var(--accent);
		text-shadow: none;
	}
}

/* スクロール追従中のヘッダーは白地。下層ページの白文字指定を打ち消す */
.site-header.is-scrolled .global-nav a,
body:not(.home) .site-header.is-scrolled .global-nav a {
	color: var(--text);
	text-shadow: none;
}

.site-header.is-scrolled .global-nav a:hover,
body:not(.home) .site-header.is-scrolled .global-nav a:hover {
	color: var(--primary);
}

.site-header.is-scrolled .site-header__tel a,
body:not(.home) .site-header.is-scrolled .site-header__tel a {
	color: var(--accent);
	text-shadow: none;
}