/*
Theme Name: Noppo camera
Theme URI: https://www.instagram.com/noppo_camera/
Author: shimairo
Description: 長崎のフォトグラファー Noppo camera のためのテーマ。写真が主役の縦長1枚のトップページ。文章・写真・料金は「外観 → カスタマイズ → Noppo camera の内容」で差し替えられます。相談文づくり・LINEを開くしくみ・空き状況（○△×）・レンタル衣装のデータはプラグイン「Noppo camera 相談・予約」。予約の確定・決済の機能は含みません。
Version: 1.17.0
Requires at least: 6.3
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: noppo-camera
*/

/* ------------------------------------------------------------
   基本
------------------------------------------------------------ */
:root {
	--paper: #faf8f4;
	--ink: #302f2a;
	--muted: #675f54;
	--line: #d9d3c8;
	--wash: #eeeae2;
	--accent: #76674f;
	--white: #fff;
	/* 1.14.0：トップの黄色（HERO の写真の壁 #F6C57D）に合わせた、ボタンの地と控えめな箱の地（CEO ボードQ79 A 薄いクリーム黄・デザイン担当 mock/yellow-2026-11-08/yellow-A.css）。
	   文字は --ink のまま（黄色の上に白い文字を置かない） */
	--y-btn: #FBEFD3;        /* ボタンの地（前は黒い面だった所）。--ink の文字 11.7:1 */
	--y-btn-press: #F5E1B3;  /* 押したとき・マウスを載せたとき。--ink の文字 10.4:1 */
	--y-tint: #FDF6E6;       /* 薄い黄色の地（控えめな箱） */
	--y-line: #A6813C;       /* ボタンの線（地 --paper に対して 3:1 以上） */
	--y-line-soft: #EBD9AE;  /* 薄い黄色の箱の線（飾り） */
	/* 公開の前に外す印（【仮：K番号】【要確認】）。公開する版には残らないので、共通の色とは分けている */
	--mark-kari: #8a3a17;
	--mark-kari-bg: #fdf1ea;
	--mark-check: #24527a;
	--mark-check-bg: #edf3f9;
	--serif: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif CJK JP", "Noto Serif JP", serif;
	--sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
	--latin: Georgia, "Times New Roman", serif;
	--label: Arial, "Helvetica Neue", sans-serif;
	--gutter: 25px;
	/* shimairoパターン（会社の型）が読む、画面の上と下によける分（型の保管庫 README「5.」。1.7.1）。
	   上：ログイン中の管理バー（幅 600px 以下では一緒に流れるので 0）。下：スマホの画面下の LINE の帯（下の 700px 以下） */
	--sp-offset-top: var(--wp-admin--admin-bar--height, 0px);
	--sp-offset-bottom: 0px;
	--sp-safe-bottom: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 600px) {
	:root { --sp-offset-top: 0px; }
}
@media (max-width: 700px) {
	/* 画面下の LINE の帯の高さ：上下の余白 10px＋ボタン 50px＋上の線 1px＋iPhone の下の余白（帯が safe-area の分も持つ） */
	:root { --sp-offset-bottom: calc(71px + env(safe-area-inset-bottom, 0px)); --sp-safe-bottom: 0px; }
}

*,
*::before,
*::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* 1.15.0：横のはみ出しの守り（CEO 2026-11-09「右に空き」）。元の要素（相談文の select）は下の「08 ご相談」で直した。
   clip はスクロールの箱を作らないので、止まった枠（sticky）は今までどおり効く。html に付けた値は画面（viewport）の横を止める */
html, body { overflow-x: clip; }
html {
	scroll-behavior: smooth;
	scroll-padding-top: 24px;
	scroll-padding-bottom: 96px;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 15px;
	line-height: 2;
	letter-spacing: .035em;
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
	line-break: strict;
	/* 文節の切れ目（<wbr>）と句読点の後で改行する。収まらないときだけ途中で改行する。 */
	word-break: keep-all;
	overflow-wrap: anywhere;
	-webkit-font-smoothing: antialiased;
}
table, .entry-content, .entry h1, textarea { word-break: normal; overflow-wrap: break-word; }
.price-table th, .price-table td { word-break: keep-all; }

a { color: inherit; text-decoration: none; }
a:focus-visible,
summary:focus-visible,
button:focus-visible,
textarea:focus-visible { outline: 2px solid #5f5341; outline-offset: 4px; }
p { margin: 0 0 22px; text-wrap: pretty; }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; }
figcaption { font-size: 13px; color: var(--muted); line-height: 1.8; padding-top: 14px; }

h1, h2, h3, h4 {
	font-family: var(--serif);
	font-weight: 400;
	letter-spacing: .065em;
	line-height: 1.8;
	margin: 0 0 24px;
	word-break: keep-all;
	overflow-wrap: anywhere;
	text-wrap: balance;
}
h1 { font-size: clamp(30px, 3.1vw, 43px); }
h2 { font-size: 32px; }
h3 { font-size: 23px; }
h4 { font-size: 20px; }

.nw { white-space: nowrap; }

/* 公開の前に外す印：【仮：K番号】（推測の値）と【要確認】（答え待ち） */
.mark {
	display: inline-block; margin: 0 0 0 .35em; padding: 0 .45em;
	border: 1px dashed currentColor; border-radius: 2px;
	font: 12px/1.7 var(--sans); letter-spacing: .02em; font-weight: 400; font-style: normal;
	white-space: normal; vertical-align: .15em; text-transform: none;
}
.mark--kari { color: var(--mark-kari); background: var(--mark-kari-bg); }
.mark--check { color: var(--mark-check); background: var(--mark-check-bg); }
p > .mark:first-child, li > .mark:first-child, dd > .mark:first-child { margin-left: 0; }
.sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

.eyebrow {
	font: 10px/1.8 var(--label);
	letter-spacing: .19em;
	color: var(--muted);
	margin: 0 0 16px;
	text-transform: uppercase;
}

.skip {
	position: absolute; left: 16px; top: -100px; z-index: 100;
	background: var(--white); padding: 10px 14px;
}
.skip:focus { top: 12px; }

/* ボタンとリンク */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 12px;
	min-height: 52px; padding: 12px 26px;
	border: 1px solid var(--ink);
	font-size: 15px; letter-spacing: .06em; line-height: 1.5;
	text-align: center;
	transition: background-color .25s ease, color .25s ease;
	cursor: pointer;
}
.btn--primary { background: var(--y-btn); color: var(--ink); border-color: var(--y-line); }
.btn--primary:hover, .btn--primary:active { background: var(--y-btn-press); }
.btn--ghost { background: transparent; color: var(--ink); font-family: inherit; }
.btn--ghost:hover { background: var(--wash); }
.btn--large { min-height: 60px; padding: 16px 34px; font-size: 16px; }
.btn .ext, .btn .arrow { font-size: 15px; }

.text-link {
	display: inline-flex; align-items: center; gap: 14px;
	min-height: 44px; padding: 4px 0;
	border-bottom: 1px solid var(--ink);
	font-size: 14px; line-height: 1.7;
}
.text-link .ext { font-size: 14px; }
.section-cta { margin: 48px 0 0; }

/* ------------------------------------------------------------
   ヘッダー
------------------------------------------------------------ */
.header { max-width: 1440px; margin: auto; padding: 28px 6% 0; }
.header-inner { display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: baseline; gap: .25em; min-height: 44px; font: 42px/1.2 var(--latin); letter-spacing: -2px; white-space: nowrap; }
.brand i { font-size: 16px; letter-spacing: 0; }
.brand--logo img { max-height: 64px; width: auto; }
.header-caption { font: 10px var(--label); letter-spacing: .17em; margin-left: auto; color: var(--muted); }
.header-cta {
	display: inline-flex; align-items: center; gap: 14px;
	min-height: 44px; padding: 6px 16px;
	border: 1px solid var(--ink);
	font-size: 13px; white-space: nowrap;
}
.header-cta:hover { background: var(--wash); }
.preview-badge {
	display: inline-block; margin: 14px 0 0;
	padding: 2px 10px; border: 1px dashed var(--muted);
	font-size: 11px; line-height: 1.8; color: var(--muted);
}
.nav { margin-top: 18px; }
.nav--mobile { display: none; }
.nav ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 12px; }
.nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 8px; font-size: 13px; }
.nav a:hover { color: #5f5341; }

/* ------------------------------------------------------------
   HERO
------------------------------------------------------------ */
.hero { max-width: 1440px; margin: 24px auto 0; padding: 0 4% 0 6%; }
/* HERO の中身（見出し・写真・説明）。9コマを下に動かして見るあいだは、画面の上にとどまる（.is-box-pinned） */
.hero-stage {
	display: grid; grid-template-columns: 44% 56%;
	grid-template-areas: "head photo" "body photo";
	grid-template-rows: auto 1fr;
	column-gap: 0;
}
.hero-head { grid-area: head; align-self: end; padding: 60px 30px 0 0; }
.hero-head h1 { margin-bottom: 30px; }
.hero-photo { grid-area: photo; max-width: 590px; width: 100%; justify-self: end; }
.hero-photo img { animation: noppo-appear 1.2s ease-out both; }
.hero-body { grid-area: body; padding: 0 30px 40px 0; }
.hero-lead { font-size: 15px; line-height: 2.25; margin-bottom: 34px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.photo-caption {
	display: flex; justify-content: space-between; gap: 15px;
	font-size: 13px; line-height: 1.9; color: var(--ink); padding-top: 12px;
}
.photo-caption .credit { font: italic 13px/1.9 var(--latin); white-space: nowrap; }

/* HERO の9コマ（hero_mode＝box）。今の HERO の写真の上に重ねる（下の写真は消さない）。1つの枠は約5:6（HERO の写真の形で変わる）。
   JavaScript が動くときだけ出す（.is-box-playing）。1枚ずつ .is-on が付いて現れる（assets/js/site.js が付ける）：
   - 自動再生：0.3秒から0.6秒おき（9枚目は約5.1秒）、約6.2秒から0.8秒かけて消えて、下の今の HERO に変わる（全部で約7秒）
   - 下に動かしたとき：HERO がその場にとどまり（.is-box-pinned）、動かした分だけ1枚ずつ現れ、そのあと薄くなって今の HERO に変わる
   どちらも数は戻らない（多いほうに合わせる） */
/* 1.16.0：上の小さなヘッダー（1023px 以下）の下に止まる（--sp-offset-top。PC は今までどおり 0。ログイン中は管理バーの下） */
.js .hero.is-box-pinned .hero-stage { position: sticky; top: var(--sp-offset-top, 0px); }
.hero-pin-space { height: 0; }
.hero-photo-frame { position: relative; }
.hero-box, .hero-box-skip { display: none; }
.js .hero.is-box-playing .hero-box {
	display: grid; position: absolute; inset: 0; z-index: 2;
	grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr));
	/* 下に白い帯を残し、「とばす」をそこに置く（写真に重ねない） */
	gap: 4px; padding: 4px 4px 52px;
	background: var(--white);
	cursor: pointer;
	transition: opacity .8s ease;
}
.hero-box-tile {
	display: block; min-width: 0; min-height: 0; overflow: hidden; background: var(--wash);
	opacity: 0; transform: scale(.94); transition: opacity .45s ease-out, transform .45s ease-out;
}
.hero-box-tile.is-on { opacity: 1; transform: none; }
.hero-box-tile img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.js .hero.is-box-ending .hero-box { opacity: 0; }
/* 下に動かして薄くするときは、指の動きについていくように短く */
.js .hero.is-box-scrolling .hero-box { transition-duration: .12s; transition-timing-function: linear; }
.js .hero.is-box-skipping .hero-box { opacity: 0; transition-duration: .3s; }
.js .hero.is-box-playing .hero-box-skip {
	display: inline-flex; align-items: center; justify-content: center;
	position: absolute; right: 4px; bottom: 4px; z-index: 3;
	min-width: 64px; min-height: 44px; padding: 0 14px;
	border: 1px solid var(--ink); background: rgba(250, 248, 244, .92); color: var(--ink);
	font: 13px/1 var(--sans); letter-spacing: .06em; cursor: pointer;
}
.js .hero.is-box-ending .hero-box-skip, .js .hero.is-box-skipping .hero-box-skip { display: none; }

@keyframes noppo-appear {
	from { opacity: .55; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

/* スクロールに合わせて、写真がほんの少し小さくなる（対応ブラウザーのみ。切り抜きはしない）。
   管理画面の「HEROのスクロールの動き」を外したときの動き（前の試作 1.1.1 のまま） */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.hero-photo:not(.is-scroll-3d) { animation: noppo-hero-out linear both; animation-timeline: view(); animation-range: exit 10% exit 100%; }
	}
}
/* HERO のスクロールの動き（1.5.0。「HEROのスクロールの動き」がオンのとき）：
   下に動かすと、写真が下の辺を軸に少し奥へ倒れ、わずかに小さく・薄くなる（箱の中に写真を寝かせるように。控えめに）。
   --hero-p（0〜1。写真が画面から出ていくほど大きい）は assets/js/site.js が入れる。
   JavaScript が動かないとき・動きを減らす設定では動かない（--hero-p が入らない） */
.hero-photo.is-scroll-3d { perspective: 1100px; }
.js .hero-photo.is-scroll-3d .hero-photo-frame {
	transform-origin: 50% 100%;
	transform: rotateX(calc(var(--hero-p, 0) * 12deg)) scale(calc(1 - var(--hero-p, 0) * .08));
	opacity: calc(1 - var(--hero-p, 0) * .25);
}
.js .hero-photo.is-scroll-3d.is-scrolling .hero-photo-frame { will-change: transform, opacity; }
@keyframes noppo-hero-out {
	to { transform: scale(.96); opacity: .82; }
}

/* ------------------------------------------------------------
   セクション共通
------------------------------------------------------------ */
.section { max-width: 1160px; margin: 140px auto; padding: 0 35px; }
.section-head { margin-bottom: 48px; }
.section-head h2 { margin-bottom: 0; }
.section-head .lead { margin: 22px 0 0; font-size: 15px; line-height: 2.1; }
.lead { font-size: 15px; }

/* 出てくるときの小さな動き（JSが動くときだけ） */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .9s ease, transform .9s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

/* 想い */
.concept { display: grid; grid-template-columns: 1.12fr 1fr; grid-template-areas: "photo copy"; align-items: center; gap: 11%; margin-top: 150px; }
.concept-copy { grid-area: copy; }
.concept-photo { grid-area: photo; padding-top: 80px; }
.concept-copy p:not(.eyebrow):not(.signature) { font-size: 15px; line-height: 2.2; }
.signature { font: italic 33px var(--latin); margin-top: 35px; }

/* 01 撮影メニュー */
.service-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 28px; }
.service-card { position: relative; display: flex; flex-direction: column; }
.service-card .card-cover::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.service-card .card-link span { display: inline-flex; }
.service-card .card-cover:focus-visible { outline: none; }
.service-card .card-cover:focus-visible::after { outline: 2px solid #5f5341; outline-offset: 6px; }
.service-image { aspect-ratio: 4 / 5; background: var(--wash); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; overflow: hidden; }
.service-image img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s ease; }
.service-card:hover .service-image img { transform: scale(1.015); }
.service-card .eyebrow { font-size: 10px; margin-bottom: 6px; letter-spacing: .14em; }
.service-title { font-size: 24px; letter-spacing: .06em; line-height: 1.7; margin: 0 0 10px; }
.service-text { font-size: 15px; line-height: 1.95; margin: 0 0 18px; }
.card-link { display: flex; justify-content: space-between; margin: auto 0 0; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }

/* お知らせ */
.news { max-width: 950px; }
.news-head { display: flex; align-items: baseline; gap: 24px; margin-bottom: 24px; }
.news-head h2 { font-size: 24px; margin: 0; }
.news-head .eyebrow { margin: 0; }
.news-list { list-style: none; border-top: 1px solid var(--line); }
.news-list li { border-bottom: 1px solid var(--line); }
.news-list a { display: flex; align-items: flex-start; gap: 20px; padding: 18px 0; min-height: 44px; }
.news-thumb { flex: 0 0 120px; }
.news-thumb img { width: 120px; height: auto; }
.news-body { display: flex; flex-direction: column; }
.news-body time { font: 12px var(--label); letter-spacing: .1em; color: var(--muted); }
.news-title { font-size: 15px; line-height: 1.8; }
.news-more { margin: 20px 0 0; }
.news-placeholder { border: 1px dashed var(--line); padding: 18px 20px; font-size: 14px; color: var(--muted); margin: 0; }

/* 02 作品 */
.works { padding: 100px max(6%, calc((100vw - 1100px) / 2)); background: var(--wash); }
.works-inner { max-width: 1100px; margin: auto; }
.gallery-group { margin-top: 90px; }
.gallery-intro { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0 40px; align-items: end; margin-bottom: 30px; }
.gallery-intro .eyebrow { grid-column: 1 / -1; margin-bottom: 10px; }
.gallery-intro h3 { font-size: 27px; margin: 0; }
.gallery-intro p:last-child { font-size: 15px; line-height: 2; margin: 0; }
.photo-grid { list-style: none; display: flex; flex-wrap: wrap; column-gap: 22px; row-gap: 0; align-items: flex-start; }
/* 枠の比率（--ar：縦長 4:5＝0.8・横長 3:2＝1.5。works.php）に合わせて幅を分けるので、同じ行の写真は同じ高さになる。
   1.12.0：写真は枠に合わせて切る（object-fit: cover）。見せる位置は --pos、写真の縁を隠す拡大は --zoom（inc/helpers.php noppo_works_frame） */
.photo-grid > li { flex: var(--ar, 1) 1 0; min-width: 0; margin-bottom: 22px; overflow: hidden; }
.photo-grid > .photo-break { flex: 0 0 100%; height: 0; margin: 0; }
.photo-grid img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar, 0.8); object-fit: cover; object-position: var(--pos, 50% 50%); transform: scale(var(--zoom, 1)); }

/* 03 料金 */
.pricing { max-width: 1100px; }
.price-notice {
	padding: 24px 28px; margin-bottom: 40px;
	border-left: 2px solid var(--y-line); background: var(--y-tint);
}
.price-notice p { margin: 0 0 6px; font-size: 15px; }
.price-notice .price-notice-main { font-family: var(--serif); font-size: 20px; letter-spacing: .05em; line-height: 1.8; margin-bottom: 8px; }
.price-notice .text-link { margin-top: 10px; }
.price-notice .price-booking-note { margin-top: 16px; } /* 1.9.0：予約の受け付けの一言（LINEリンクの下。上の文とリンクの間と同じあき） */

.price-table-wrap { margin-bottom: 40px; }
.price-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.7; }
.price-table caption { text-align: left; font-family: var(--serif); font-size: 20px; letter-spacing: .06em; padding-bottom: 14px; }
.price-table caption .period, .price-category .period {
	display: inline-block; margin-left: 12px; padding: 0 8px;
	border: 1px solid var(--line); font: 13px/1.9 var(--sans); letter-spacing: .04em; color: var(--muted); vertical-align: middle;
}
.price-table thead th { font: 13px/1.6 var(--sans); color: var(--muted); text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--ink); letter-spacing: .08em; }
.price-table thead th:last-child { text-align: right; }
.price-table .cat-row th { text-align: left; padding: 18px 6px 6px; font-family: var(--serif); font-weight: 400; font-size: 16px; border-bottom: 1px solid var(--line); }
/* 1.11.0：見出しの行に、下のカードと同じ写真の小さな丸（飾り。位置も撮影メニューと同じ） */
.price-table .cat-thumb { display: inline-block; width: 32px; height: 32px; margin: 0 10px 0 0; border-radius: 50%; overflow: hidden; vertical-align: middle; background: var(--line); }
.price-table .cat-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--sp11-pos, 50% 50%); }
.price-table tbody th[scope="row"], .price-table td { padding: 11px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; text-align: left; font-weight: 400; }
.price-table .plan-name { font-family: var(--latin); letter-spacing: .05em; }
.price-table .plan-label { display: block; font-size: 13px; color: var(--muted); line-height: 1.5; }
.price-table td.summary span { display: block; }
.price-table td.summary span.mark { display: inline-block; margin: 4px 0 0; }
.price-table-note { font-size: 14px; color: var(--muted); margin: 14px 0 0; }
.price-table td.yen { text-align: right; font-family: var(--serif); font-size: 17px; font-variant-numeric: lining-nums; white-space: nowrap; }
.price-table td.yen .mark, .price-table th .mark { display: block; width: fit-content; margin: 4px 0 0 auto; white-space: nowrap; }
.price-table th .mark { margin-left: 0; }
/* 1.13.0：各プランの行の料金の下の「このプランで相談 ›」。金額より控えめ（小さな字・--muted・細い下線）、押せる範囲は高さ 44px */
.price-table .price-row-cta {
	display: flex; width: max-content; align-items: center; justify-content: flex-end; gap: 4px;
	min-height: 44px; margin: 0 0 -10px auto; padding: 0 0 0 8px;
	font: 12px/1.4 var(--sans); letter-spacing: .02em; color: var(--muted); white-space: nowrap;
}
/* 1.15.0：文が「このプランで予約する」に伸びた（CEO 2026-11-09）。幅 375px の iPhone では一覧が画面より 13px 広くなるので、
   幅が足りないときだけ、文節の切れ目（<wbr>）で2行にする（表の最小の幅を、文の長さで広げない） */
.price-table .price-row-cta { width: fit-content; max-width: 100%; white-space: normal; }
.price-table .price-row-cta > span:first-child { min-width: 0; text-align: right; word-break: keep-all; overflow-wrap: normal; }
.price-table .price-row-cta > span:first-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.price-table .price-row-cta-arrow { font-size: 15px; line-height: 1; }
.price-table .price-row-cta:hover { color: var(--ink); }

.price-category { margin: 0 0 8px; }
summary { cursor: pointer; list-style: none; position: relative; }
summary::-webkit-details-marker { display: none; }
/* 1.11.0：カテゴリの開閉の行は、01 撮影メニューの写真の扉（型11 の .hx-panel・.hx-shade・.hx-lab・.hx-en）と同じ見た目のカード。
   写真・写真の位置（--sp11-pos）は撮影メニューの同じカテゴリのもの。文字は写真の上の白（型11 のまま）。色・フォントは足していない */
.price-category > summary { display: block; padding: 0; border-radius: 14px; }
.price-category .price-door { display: block; }
.price-category .price-door .hx-panel { display: block; height: 148px; }
.price-category .price-door .hx-panel.is-nophoto { background: var(--accent); }
.price-category .price-door .hx-shade { background: linear-gradient(200deg, transparent 22%, rgba(20, 14, 8, .62)); } /* 文字が3行あるので、型11 の影を少し上から（色は型のまま） */
/* 文字は左の 6割まで（長い名前は「（」の前で折り返し、写真の真ん中の顔にかからないように） */
.price-category .price-door .hx-lab { max-width: 62%; line-height: 1.6; }
.price-category .price-door .cat-name { display: block; }
.price-category .price-door .cat-name strong { font-weight: 700; }
.price-category .price-door .period {
	position: absolute; left: 12px; top: 12px; margin: 0; padding: 0 7px; border-color: rgba(255, 255, 255, .7); background: rgba(20, 14, 8, .55); color: var(--white);
	font-size: 12px; line-height: 1.8; font-weight: 400; letter-spacing: .04em; white-space: nowrap;
}
.price-category .price-door .cat-hint { display: block; margin-top: 4px; font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: .06em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.price-category > summary::after, .faq summary .toggle::after {
	content: "+"; content: "+" / ""; font: 26px/1 var(--latin); position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
}
.price-category[open] > summary::after, .faq details[open] summary .toggle::after { content: "−"; content: "−" / ""; }
/* 開閉の印（＋／−）：カードの右上の丸（撮影メニューの「作品を見る」の地の色と同じ） */
.price-category > summary::after { width: 36px; height: 36px; top: 10px; right: 10px; transform: none; display: grid; z-index: 1; place-items: center; border-radius: 50%; background: rgba(250, 248, 244, .92); color: var(--ink); font-size: 22px; line-height: 1; }
.price-category-body { padding: 22px 0 36px; }
/* 幅 560px から（タブレット・PC）：横に長いカードに縦長の写真をいっぱいに入れると顔だけが大きく切れるので、
   写真はカードの右 46%（左は文字の地＝--ink に、写真の端をぼかしてなじませる）。iPhone の幅は撮影メニューと同じ全面の写真 */
@media (min-width: 560px) {
	.price-category .price-door .hx-panel { height: 172px; background: var(--ink); }
	.price-category .price-door .hx-panel img { left: auto; width: 46%; -webkit-mask-image: linear-gradient(to right, transparent, #000 35%); mask-image: linear-gradient(to right, transparent, #000 35%); }
	.price-category .price-door .hx-shade { left: auto; width: 46%; }
	.price-category .price-door .hx-lab { max-width: 52%; }
}
.category-intro { margin: 0 0 24px; }
.plan-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.plan-card { background: var(--white); padding: 26px 24px; display: flex; flex-direction: column; border: 1px solid #e5e0d7; }
.plan-card h3 { font: 18px/1.7 var(--latin); letter-spacing: .06em; margin: 0 0 8px; }
.plan-card h3 .plan-label { display: block; font: 14px/1.7 var(--sans); letter-spacing: .04em; color: var(--muted); }
.plan-card .price { font: 34px/1.4 var(--serif); font-variant-numeric: lining-nums; letter-spacing: .02em; margin: 0 0 16px; white-space: nowrap; }
.plan-card .price .nw { display: inline-flex; align-items: baseline; }
.plan-card .price .mark { vertical-align: middle; }
.plan-card h3 .mark { vertical-align: middle; }
.plan-facts-mark { margin: 0 0 6px; }
.plan-facts { list-style: none; margin: 0; font-size: 15px; line-height: 1.8; }
.plan-facts li { padding: 7px 0; border-top: 1px solid #eee9e2; }
.plan-note { font-size: 14px; line-height: 1.9; color: var(--muted); margin: 18px 0 0; }
.plan-card .plan-note { margin-top: auto; padding-top: 16px; }
.plan-note--cat { margin-top: 22px; }
.plan-options { margin-top: 34px; }
.plan-options .plan-options-title { font-size: 18px; margin-bottom: 8px; }
.plan-options .plan-note { margin: 0 0 8px; }
.plan-options dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; }
.plan-options dl > div { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.8; }
.plan-options dt { min-width: 0; }
.plan-options dd { margin: 0; text-align: right; font-variant-numeric: lining-nums; }
.opt-name { display: block; }
.opt-sub { display: block; font-size: 14px; color: var(--muted); line-height: 1.7; }
.pricing-footnote { font-size: 14px; line-height: 2; margin: 28px 0 0; color: var(--muted); }

/* 04 撮影者 */
.profile { display: grid; grid-template-columns: 1fr 1.2fr; gap: 12%; align-items: center; }
.profile-identity { text-align: center; }
.profile-photo {
	width: min(300px, 100%); aspect-ratio: 4 / 5; margin: 8px auto 0;
	background: var(--wash); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.profile-photo img { width: 100%; height: 100%; object-fit: contain; }
.profile-photo.is-empty { border: 1px solid var(--line); }
.profile-photo-note { padding: 0 18px; font-size: 13px; line-height: 1.8; color: var(--muted); text-align: center; }
.profile-wordmark { font: 76px/.9 var(--latin); letter-spacing: -4px; margin: 40px 0; }
.profile-name { font-size: 22px; margin: 0; }
.profile-name small { display: block; margin: 12px 0; font: 11px var(--label); letter-spacing: .16em; }
.profile-facts { font-size: 14px; color: var(--muted); }

/* 05 スタジオ */
.studio-band { background: var(--wash); display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.studio-photo { padding: 50px 0 50px 12%; }
.studio-copy { padding: 64px 12% 64px 10%; }
.info-list { margin: 28px 0; }
.info-list > div { display: grid; grid-template-columns: 90px 1fr; gap: 10px; border-top: 1px solid var(--line); padding: 12px 0; font-size: 15px; }
.info-list dt { color: var(--muted); }
.info-list dd { margin: 0; }
.note { font-size: 14px; line-height: 1.95; color: var(--muted); }

/* 06 撮影の流れ */
.flow-block + .flow-block { margin-top: 56px; }
.flow-title { font-size: 21px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); margin-bottom: 4px; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.steps li { padding: 24px 0 0; }
.step-num { display: block; font: italic 30px var(--latin); color: var(--accent); margin-bottom: 18px; font-variant-numeric: lining-nums; }
.steps h4 { font-size: 20px; margin-bottom: 12px; }
.steps p { margin: 0; }
.flow-block--newborn { padding: 30px 34px; background: var(--wash); }
.flow-block--newborn .flow-title { border-bottom-color: var(--line); }
.flow-block--newborn > p { margin: 18px 0 14px; }
.flow-sequence { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 0; }
.flow-sequence li { display: inline-flex; align-items: center; font-size: 15px; }
.flow-sequence li + li::before { content: "→"; content: "→" / ""; margin: 0 12px; color: var(--accent); }

/* 07 よくある質問 */
.faq { max-width: 950px; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { padding: 26px 44px 26px 0; font-size: 16px; line-height: 1.9; }
.faq summary .q { display: block; text-wrap: balance; }
.faq details p { font-size: 15px; margin: 0 36px 26px 0; color: var(--muted); }

/* 締めの写真 */
.closing-photo { max-width: 1000px; margin: 0 auto; padding: 0 35px; }
.closing-photo figcaption { text-align: center; font-family: var(--serif); font-size: 21px; letter-spacing: .12em; color: var(--ink); padding-top: 30px; }

/* 08 ご相談 */
.contact { text-align: center; max-width: 860px; }
.contact h2 { font-size: 34px; }
.contact .lead { margin-bottom: 36px; }
.contact-main { max-width: 560px; margin: 0 auto 48px; }
.contact-main .btn { width: 100%; }
.contact-note { font-size: 14px; color: var(--muted); margin: 16px 0 0; text-align: left; }
.contact-window { margin-top: 8px; }
.contact-avail { max-width: 560px; margin: 0 auto 48px; text-align: left; } /* 1.8.0：空き状況（○△×）。中身はプラグイン */
.contact-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; text-align: left; align-items: start; }
.contact-guide--single { grid-template-columns: minmax(0, 560px); justify-content: center; }
.contact-items, .contact-template { background: var(--wash); padding: 28px; }
.contact-guide h3 { font-size: 18px; margin-bottom: 14px; }
.contact-items ul { padding-left: 1.2em; }
.contact-items li { margin-bottom: 6px; }
/* 1.15.0：16px に（15px だと iPhone で「気になること」を押したとき画面が勝手に拡大し、横にずれる。プラグインの欄と同じ大きさ） */
.contact-template textarea {
	width: 100%; resize: vertical;
	font: 16px/1.8 var(--sans); color: var(--ink);
	background: var(--white); border: 1px solid var(--line); padding: 12px 14px;
}
.copy-text {
	margin: 0; padding: 14px 16px;
	background: var(--paper); border-left: 2px solid var(--line);
	font: 15px/1.8 var(--sans); color: var(--ink); letter-spacing: .03em;
	white-space: pre-wrap; word-break: normal; overflow-wrap: break-word;
	-webkit-user-select: all; user-select: all;
}
.copy-button { margin-top: 12px; width: 100%; min-height: 48px; }
/* 1.15.0（CEO 2026-11-09「右に空き」の元）：iPhone の Safari（WebKit）は、select で選んだ長い文（撮影メニューの「スタジオ（100日祝い・ハーフバースデー・1歳など）」・
   プランの「LOCATION お宮参り STANDARD（ご祈祷あり）」など）を、箱の外まではみ出した幅としてページの幅に数える（390px で右に 67px の空き）。
   paint の contain で、select の中身を箱の中だけに収める（見た目の幅・文字・選び方は同じ。箱の外の線（focus の輪郭）は消えない） */
.noppo-consult-field select { contain: paint; max-width: 100%; }
.copy-status { min-height: 1em; margin: 10px 0 0; font-size: 14px; white-space: pre-line; }
.copy-line { margin-top: 4px; }
.contact-template .note { margin: 6px 0 0; }
.contact-instagram { margin-top: 48px; }
.contact-instagram p { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.back-top { margin: 40px 0 0; }

/* フッター */
.footer { border-top: 1px solid var(--line); padding: 44px 6% 48px; }
.footer-inner { max-width: 1160px; margin: auto; display: grid; grid-template-columns: auto 1fr; gap: 10px 60px; align-items: center; }
.footer .brand { font-size: 32px; }
.footer .brand i { font-size: 13px; }
.footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0 26px; justify-content: flex-end; }
.footer-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; }
.copyright { grid-column: 1 / -1; margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.preview-note { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.9; color: var(--muted); }

/* 公式LINEのボタン（画面下）。スマホは横幅いっぱいの帯、PC・タブレットは右下の小さなボタン。
   PC・タブレットでは、料金の一覧・ご相談欄・フッターが見えている間は隠す（JavaScript が動くときだけ表示） */
.line-bar {
	display: none;
	position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); z-index: 50;
	transition: transform .35s ease, opacity .35s ease, visibility 0s linear 0s;
}
.line-bar .btn { min-height: 52px; box-shadow: 0 6px 20px rgba(48, 47, 42, .18); }
.js .line-bar { display: block; }
.js .line-bar:not(.is-shown) { transform: translateY(120%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .35s ease, opacity .35s ease, visibility 0s linear .35s; }

/* お知らせ（投稿）・固定ページ */
.entry { max-width: 760px; margin: 60px auto 120px; padding: 0 var(--gutter); }
.entry-meta { font: 12px var(--label); letter-spacing: .1em; color: var(--muted); margin-bottom: 10px; }
.entry h1 { font-size: 30px; white-space: normal; }
.entry-thumb { margin: 0 0 32px; }
.entry-content { font-size: 16px; line-height: 2.05; }
.entry-content img { margin: 24px 0; }
.entry-content a { border-bottom: 1px solid currentColor; }
.entry-back { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 20px 32px; }
.archive-list { list-style: none; border-top: 1px solid var(--line); }
.archive-list li { border-bottom: 1px solid var(--line); }
.archive-list a { display: block; padding: 18px 0; }
.pagination { margin-top: 32px; display: flex; gap: 16px; }

/* ------------------------------------------------------------
   タブレット
------------------------------------------------------------ */
@media (max-width: 1100px) {
	.header-caption { display: none; }
	.header-cta { margin-left: auto; }
	.hero h1 { font-size: 30px; }
	.section { margin: 100px auto; }
	.studio-copy { padding: 40px 8%; }
	.studio-copy h2 { font-size: 28px; }
	.plan-card { padding: 24px 18px; }
	.plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	h2 { font-size: 28px; }
	.concept h2, .profile h2 { font-size: 26px; }
	.gallery-intro h3 { font-size: 24px; }
}

@media (min-width: 701px) and (max-width: 900px) {

	.hero-stage { grid-template-columns: 46% 54%; }
	.hero-head { padding-right: 24px; }
	.hero h1 { font-size: 26px; }
	.service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.contact-guide { grid-template-columns: 1fr; }
	.steps { grid-template-columns: 1fr; gap: 0; }
	.steps li { position: relative; padding: 22px 0 0 54px; }
	.step-num { position: absolute; left: 0; top: 18px; font-size: 26px; }
}

/* ------------------------------------------------------------
   スマホ（iPhone 375 / 390px 基準）
------------------------------------------------------------ */
@media (max-width: 700px) {
	:root { --gutter: 25px; }
	body { letter-spacing: .025em; padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
	h2 { font-size: 26px; line-height: 1.75; }
	h3 { font-size: 21px; }
	.eyebrow { font-size: 10px; margin-bottom: 14px; }

	.header { padding: 20px 20px 0; }
	.header-inner { gap: 12px; }
	.brand { font-size: 34px; }
	.brand i { font-size: 13px; }
	.header-cta { font-size: 13px; padding: 6px 12px; gap: 8px; }
	.preview-badge { font-size: 11px; margin-top: 10px; }
	.nav--header { display: none; }
	/* 1.13.0：HERO の下の目次は、押せると分かる小さなボタンのます目に（3列。上の2つの大きなボタンより控えめ：細い線・角丸・白い地） */
	.nav--mobile { display: block; margin: 28px 0 0; padding: 0 var(--gutter); }
	.nav--mobile ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.nav--mobile li { min-width: 0; }
	.nav--mobile a {
		display: flex; width: 100%; height: 100%; min-height: 46px; min-width: 0; padding: 6px 4px;
		border: 1px solid var(--y-line-soft); border-radius: 8px; background: var(--y-tint); color: var(--ink);
		font-size: 13px; line-height: 1.4; letter-spacing: .02em; text-align: center;
		transition: background-color .25s ease, border-color .25s ease;
	}
	.nav--mobile a:hover { background: var(--y-btn-press); border-color: var(--y-line); color: var(--ink); }
	body:not(.is-front) .nav--header { display: block; margin-top: 10px; padding: 0 4px; }
	body:not(.is-front) .nav--header ul { justify-content: flex-start; gap: 0 4px; margin-left: -8px; }
	body:not(.is-front) .nav--header a { font-size: 14px; }

	.hero { margin-top: 18px; padding: 0 15px; }
	.hero-stage { display: flex; flex-direction: column; align-items: stretch; }
	.hero-head { align-self: stretch; padding: 6px 10px 0; }
	.hero h1 { font-size: 28px; line-height: 1.7; letter-spacing: .06em; margin-bottom: 20px; }
	.hero-head .eyebrow { margin-bottom: 12px; }
	.hero-photo { max-width: none; }
	.photo-caption { flex-direction: column; gap: 0; font-size: 13px; }
	.photo-caption .credit { align-self: flex-end; }
	.photo-caption .credit { font-size: 13px; }
	.hero-body { padding: 26px 10px 0; }
	.hero-lead { line-height: 2.1; margin-bottom: 24px; }
	.hero-actions { flex-direction: column; }
	.hero-actions .btn { width: 100%; }

	.section { margin: 84px auto; padding: 0 var(--gutter); }
	.section-head { margin-bottom: 32px; }
	.section-head .lead { margin-top: 18px; }
	.section-cta { margin-top: 36px; }

	.concept { display: flex; flex-direction: column; align-items: stretch; gap: 34px; margin-top: 84px; }
	.concept-photo { padding: 0; }
	.concept h2 { font-size: 26px; }
	.signature { font-size: 30px; margin-top: 28px; }

	.service-grid { grid-template-columns: 1fr 1fr; gap: 36px 16px; }
	.service-image { margin-bottom: 14px; }
	.service-card .eyebrow { font-size: 10px; letter-spacing: .06em; margin-bottom: 4px; }
	.service-title { font-size: 18px; letter-spacing: .03em; margin-bottom: 8px; }
	.service-text { font-size: 15px; line-height: 1.85; margin-bottom: 14px; }
	.card-link { font-size: 14px; padding: 8px 0; min-height: 44px; align-items: center; }

	.news-head { display: block; }
	.news-head .eyebrow { margin-bottom: 8px; }
	.news-thumb { flex-basis: 96px; }
	.news-thumb img { width: 96px; }

	.works { padding: 64px var(--gutter); }
	.gallery-group { margin-top: 60px; }
	.gallery-intro { display: block; margin-bottom: 22px; }
	.gallery-intro h3 { font-size: 22px; margin-bottom: 10px; }
	.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; align-items: start; grid-auto-flow: dense; }
	.photo-grid > li { margin: 0; }
	.photo-grid > .photo-break { display: none; }
	.photo-grid .is-landscape { grid-column: 1 / -1; }
	.photo-grid .is-solo { grid-column: 1 / -1; }

	.price-notice { padding: 20px; margin-bottom: 32px; }
	.price-notice .price-notice-main { font-size: 19px; }
	.price-table { font-size: 14px; }
	.price-table caption { font-size: 19px; }
	.price-table caption .period { margin-left: 8px; }
	.price-table thead th { font-size: 13px; padding: 6px 4px; }
	.price-table tbody th[scope="row"], .price-table td { padding: 10px 4px; }
	.price-table td.yen { font-size: 16px; }
	.plan-grid { grid-template-columns: 1fr; gap: 14px; }
	.plan-card { padding: 22px 22px; }
	.plan-card .price { font-size: 32px; }
	.plan-options dl { grid-template-columns: 1fr; }
	.plan-options dl > div { gap: 14px; padding: 12px 0; }
	.pricing-footnote { font-size: 14px; }

	.profile { display: flex; flex-direction: column; gap: 36px; }
	.profile-identity, .profile-copy { width: 100%; }
	.profile-photo { width: min(240px, 64vw); }
	.profile-wordmark { font-size: 62px; margin: 30px 0; }
	.profile h2 { font-size: 24px; }

	.studio-band { display: flex; flex-direction: column; }
	.studio-photo { padding: 25px 25px 0; width: 100%; }
	.studio-copy { padding: 36px 25px 40px; }
	.studio-copy h2 { font-size: 24px; }
	.info-list > div { grid-template-columns: 80px 1fr; }

	.steps { grid-template-columns: 1fr; gap: 0; }
	.steps li { position: relative; padding: 22px 0 4px 48px; border-bottom: 1px solid var(--line); }
	.steps li:last-child { border-bottom: 0; }
	.step-num { position: absolute; left: 0; top: 20px; font-size: 24px; }
	.steps h4 { font-size: 19px; margin-bottom: 8px; }
	.steps p { margin-bottom: 18px; }
	.flow-block--newborn { padding: 24px 20px; }
	.flow-title { font-size: 20px; }

	.faq summary { font-size: 16px; padding: 22px 36px 22px 0; }
	.faq details p { margin: 0 6px 22px 0; }

	.closing-photo { padding: 0 15px; }
	.closing-photo figcaption { font-size: 19px; letter-spacing: .06em; padding-top: 22px; }

	.contact h2 { font-size: 24px; }
	.contact-guide { grid-template-columns: 1fr; }
	.contact-items, .contact-template { padding: 22px 20px; }

	.footer { padding: 32px var(--gutter) 40px; }
	.footer-inner { display: block; }
	.footer .brand { display: inline-block; margin-bottom: 12px; }
	.footer-links { justify-content: flex-start; }

	.line-bar {
		display: block;
		left: 0; right: 0; bottom: 0;
		padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
		background: rgba(250, 248, 244, .95);
		border-top: 1px solid var(--line);
	}
	.line-bar .btn { width: 100%; min-height: 50px; box-shadow: none; }
	/* JavaScript が動かないときは、帯を固定せずページの最後に置く（最初の画面の写真や文字に重ならないように） */
	html:not(.js) .line-bar { position: static; border-top: 0; padding-top: 0; }
	html:not(.js) body { padding-bottom: 0; }
	.brand--logo img { max-height: 48px; max-width: 52vw; }
}
/* 1.13.0：とても細い画面（340px 以下）では、目次のボタンを2列に（6文字の名前が1行に入らないため） */
@media (max-width: 340px) {
	.nav--mobile ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------
   動きを減らす設定
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	/* 動きを減らす設定では、スクロールの動きもしない */
	.js .hero-photo.is-scroll-3d .hero-photo-frame { transform: none !important; opacity: 1 !important; }
	/* 動きを減らす設定では、9コマは出さず、最初から今の HERO */
	.js .hero.is-box-playing .hero-box, .js .hero.is-box-playing .hero-box-skip { display: none !important; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.js .reveal { opacity: 1; transform: none; }
}

@media print {
	.line-bar, .nav, .header-cta, .copy-button, .noppo-consult-actions, .hero-box, .hero-box-skip { display: none !important; }
	.js .reveal { opacity: 1; transform: none; }
}


/* ------------------------------------------------------------
   1.16.0：ハンバーガーとフッター（CEO 2026-11-09「見本の見た目で」。ナビ担当の見本 sections/nav-2026-11-09/ の style.css を下にそのまま入れた）
   テーマの側で合わせた所（この段と、見本の後ろの段）：
   - JavaScript が動かないときは .nvx を出さず、今のヘッダーのまま（html.js は head の中の小さな script が最初に付ける）
   - 1023px 以下（JS が動くとき）：今の大きなヘッダー（ロゴ・LINEで相談・目次）を隠し、上の小さなヘッダー（56px）の分だけ .header に上の余白
   - 上の小さなヘッダーの高さを --sp-offset-top に足す：衣装の止まる枠（sticky の top）・料金の小窓の位置・HERO の止まる演出・
     ページ内リンクで止まる位置（scroll-padding-top＝その下 24px）が、ヘッダーに隠れない
------------------------------------------------------------ */
:root { --nvx-h: 0px; --nvx-admin: var(--wp-admin--admin-bar--height, 0px); }
@media (max-width: 600px) {
	:root { --nvx-admin: 0px; } /* 管理バーは幅 600px 以下では一緒に流れる */
}
html:not(.js) .nvx { display: none !important; }
@media (max-width: 1023px) {
	html.js { --nvx-h: 56px; --sp-offset-top: calc(var(--nvx-admin) + var(--nvx-h)); scroll-padding-top: calc(var(--sp-offset-top) + 24px); }
	html.js .header { padding-top: var(--nvx-h); }
	html.js .header .header-inner, html.js .header .nav--header { display: none; }
	html.js .preview-badge { margin-top: 10px; }
}
/* 1.16.0：スマホの body の下の余白（80px。画面下の LINE の帯の分）は、フッター（.nvx-footer）が自分で下に 96px＋safe-area を持つので外す
   （残すと、フッターの薄い黄色の下に、地の色の帯が 80px 出る）。帯はフッターが見えている間は隠れる（site.js） */
@media (max-width: 700px) {
	body { padding-bottom: 0; }
}

/* nav-2026-11-09：スマホのハンバーガー（.nvx）とフッター（.nvx-footer）。（ナビ担当の見本 sections/nav-2026-11-09/style.css のまま。変えたのは .nvx-bar の top だけ：--nvx-admin）
   色・フォントはテーマの変数だけ（--paper --ink --muted --line --wash --y-* --serif --sans --latin --label --gutter）。 */
.nvx, .nvx-footer { font-family: var(--sans); color: var(--ink); font-size: 15px; line-height: 1.7; letter-spacing: .03em; }
.nvx *, .nvx-footer * { box-sizing: border-box; }
.nvx a, .nvx button, .nvx-footer a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.nvx ul, .nvx-footer ul { list-style: none; margin: 0; padding: 0; }
.nvx button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.nvx-footer p { margin: 0; }
html.nvx-lock { overflow: hidden; }

/* ---- 上に残る小さなヘッダー（1023px 以下だけ）---- */
.nvx-bar { display: none; }
@media (max-width: 1023px) {
	.nvx-bar {
		display: flex; align-items: center; justify-content: space-between; gap: 12px;
		position: fixed; left: 0; right: 0; top: var(--nvx-admin, 0px); z-index: 60;
		min-height: 56px; padding: 6px max(16px, env(safe-area-inset-right)) 6px max(16px, env(safe-area-inset-left));
		background: transparent; border-bottom: 1px solid transparent;
		transition: background-color .3s ease, border-color .3s ease;
	}
	.nvx-bar.is-solid { background: rgba(250, 248, 244, .95); border-bottom-color: var(--line); }
	.nvx-brand { display: inline-flex; align-items: center; min-height: 44px; font: 24px/1.2 var(--latin); letter-spacing: -1px; white-space: nowrap; }
	.nvx-menu-btn {
		display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 14px;
		border: 1px solid var(--y-line); border-radius: 22px; background: var(--y-btn); color: var(--ink);
		font: 11px/1 var(--label); letter-spacing: .16em; transition: background-color .25s ease;
	}
	.nvx-menu-btn:active { background: var(--y-btn-press); }
	.nvx-lines, .nvx-lines::before, .nvx-lines::after { display: block; width: 16px; height: 1px; background: var(--ink); }
	.nvx-lines { position: relative; }
	.nvx-lines::before, .nvx-lines::after { content: ""; position: absolute; left: 0; }
	.nvx-lines::before { top: -5px; }
	.nvx-lines::after { top: 5px; }
}

/* ---- 開くメニュー（右から）---- */
.nvx-veil, .nvx-drawer { display: none; }
@media (max-width: 1023px) {
	.nvx-veil { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(48, 47, 42, .38); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
	.nvx-drawer {
		display: flex; flex-direction: column;
		position: fixed; top: 0; right: 0; bottom: 0; z-index: 71; width: min(88vw, 360px);
		background: var(--paper); border-left: 1px solid var(--y-line-soft);
		padding: 0 0 env(safe-area-inset-bottom); overflow-y: auto; overscroll-behavior: contain;
		transform: translateX(104%); visibility: hidden; transition: transform .35s ease, visibility 0s linear .35s;
	}
	.nvx.is-open .nvx-veil { opacity: 1; visibility: visible; transition: opacity .3s ease; }
	.nvx.is-open .nvx-drawer { transform: none; visibility: visible; transition: transform .35s ease; }
	.nvx-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px 6px 22px; min-height: 56px; }
	.nvx-close { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; font: 26px/1 var(--latin); color: var(--ink); }
	.nvx .nvx-list { padding: 4px 22px 0; border-top: 1px solid var(--y-line-soft); }
	.nvx-list li { border-bottom: 1px solid var(--line); }
	.nvx-list a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font: 17px/1.5 var(--serif); letter-spacing: .08em; }
	.nvx-list a::after { content: "\2192"; font: 14px var(--latin); color: var(--muted); }
	.nvx-list a:active { background: var(--y-tint); }
	.nvx-actions { padding: 22px 22px 28px; display: grid; gap: 4px; }
	.nvx-line {
		display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 18px;
		border: 1px solid var(--y-line); background: var(--y-btn); font-size: 15px; letter-spacing: .06em; text-align: center;
	}
	.nvx-line:active { background: var(--y-btn-press); }
	.nvx-insta { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; font-size: 14px; color: var(--muted); }
	.nvx-insta span { border-bottom: 1px solid var(--muted); padding-bottom: 1px; }
	.nvx a:focus-visible, .nvx button:focus-visible { outline: 2px solid var(--y-line); outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) {
	.nvx-bar, .nvx-veil, .nvx-drawer, .nvx-menu-btn { transition: none; }
}

/* ---- フッター ---- */
.nvx-footer { background: var(--y-tint); border-top: 1px solid var(--y-line-soft); padding: 40px var(--gutter, 25px) calc(96px + env(safe-area-inset-bottom)); }
.nvx-footer-inner { max-width: 1080px; margin: 0 auto; }
.nvx-f-brand { display: inline-flex; align-items: baseline; gap: .25em; min-height: 44px; font: 34px/1.2 var(--latin); letter-spacing: -1px; white-space: nowrap; }
.nvx-f-brand i { font-size: 13px; letter-spacing: 0; }
.nvx-f-lead { margin: 6px 0 26px; font: 14px/1.9 var(--serif); letter-spacing: .06em; }
.nvx-f-nav ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; border-top: 1px solid var(--y-line-soft); }
.nvx-f-nav li { min-width: 0; border-bottom: 1px solid var(--y-line-soft); }
.nvx-f-nav a { display: flex; align-items: center; min-height: 48px; padding: 0 2px; font-size: 13px; line-height: 1.4; }
.nvx-f-nav a:active { background: var(--y-btn); }
.nvx-f-contact { display: grid; gap: 4px; margin-top: 26px; }
.nvx-f-line { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 18px; border: 1px solid var(--y-line); background: var(--y-btn); font-size: 15px; letter-spacing: .06em; }
.nvx-f-line:active { background: var(--y-btn-press); }
.nvx-f-insta { display: flex; align-items: center; justify-content: center; min-height: 48px; font-size: 14px; color: var(--muted); }
.nvx-f-insta span { border-bottom: 1px solid var(--muted); padding-bottom: 1px; }
.nvx-copy { margin-top: 22px; font-size: 12px; color: var(--muted); text-align: center; }
.nvx-footer a:focus-visible { outline: 2px solid var(--y-line); outline-offset: 2px; }
@media (max-width: 340px) { .nvx-f-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
	.nvx-footer { padding-bottom: 40px; }
	.nvx-footer-inner { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 24px 56px; align-items: start; }
	.nvx-f-lead { margin-bottom: 0; }
	.nvx-f-contact { margin-top: 0; min-width: 240px; }
	.nvx-copy { grid-column: 1 / -1; text-align: left; margin-top: 0; }
}

/* 1.16.0：見本にない所（今のフッターにあったもの）：プライバシーポリシーと、公開前モードの確認用の文。コピーライトの上 */
.nvx-footer .nvx-f-policy { margin-top: 14px; text-align: center; }
.nvx-f-policy a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--muted); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.nvx-footer .preview-note { margin-top: 10px; }
.nvx-brand--logo img { display: block; max-height: 32px; width: auto; }
.nvx-brand--logo a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 1024px) {
	.nvx-footer .nvx-f-policy, .nvx-footer .preview-note { grid-column: 1 / -1; text-align: left; margin-top: 0; }
}
/* 1.16.0：メニューの目次で飛んだ先の見出し（nav.js が tabindex=-1 でフォーカスを移す）。押せる所ではないので輪郭は出さない */
.nvx-jumped:focus { outline: none; }
@media print {
	.nvx { display: none !important; }
}