@charset "UTF-8";
/* ==========================================================================
   OMAKASE — main stylesheet
   --------------------------------------------------------------------------
   Three voices, three jobs:
     Instrument Serif  → the brand's speaking voice (headlines, tour names)
     Instrument Sans   → everything you actually read
     IBM Plex Mono     → verifiable facts only: licence numbers, durations,
                         prices, dates, group sizes. Never decoration.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
	--ink:          #101418;
	--ink-soft:     #2a3138;
	--indigo:       #16324f;
	--indigo-deep:  #0d1e33;
	--paper:        #edede8;
	--paper-2:      #e2e2da;
	--paper-3:      #d6d6cc;
	--lantern:      #d9913c;   /* accent on dark ground only */
	--lantern-deep: #8a5613;   /* accent as TEXT on paper — 5.2:1 */
	--steel:        #59636d;   /* muted label on paper — 5.2:1 */

	--fg:      var(--ink);
	--fg-soft: #4c555e;
	--bg:      var(--paper);
	--line:    rgba(16, 20, 24, .16);
	--line-2:  rgba(16, 20, 24, .08);

	--font-display: "Instrument Serif", "Times New Roman", serif;
	--font-body:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	--font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	--step--1: clamp(.8125rem, .79rem + .11vw, .875rem);
	--step-0:  clamp(1rem, .965rem + .16vw, 1.0625rem);
	--step-1:  clamp(1.125rem, 1.06rem + .3vw, 1.3125rem);
	--step-2:  clamp(1.375rem, 1.2rem + .75vw, 1.75rem);
	--step-3:  clamp(1.75rem, 1.42rem + 1.4vw, 2.5rem);
	--step-4:  clamp(2.125rem, 1.55rem + 2.5vw, 3.5rem);
	--step-5:  clamp(2.625rem, 1.6rem + 4.4vw, 5rem);
	--step-6:  clamp(3rem, 1.2rem + 7.6vw, 7.5rem);

	--gap:   clamp(1rem, .7rem + 1.4vw, 1.75rem);
	--pad-x: clamp(1.25rem, .8rem + 2.2vw, 3rem);
	--band:  clamp(4rem, 2.4rem + 6.4vw, 8.5rem);
	--wrap:  1220px;
	--wrap-wide: 1500px;
	--measure: 64ch;

	--r-sm: 2px;
	--r:    4px;
	--r-lg: 10px;

	--head-h: 68px;
	--ease:      cubic-bezier(.22, .61, .36, 1);
	--ease-out:  cubic-bezier(.16, 1, .3, 1);
	--dur:  .6s;
}

@media (min-width: 900px) { :root { --head-h: 84px; } }

/* ------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--head-h) + 16px);
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: 1.65;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

/* English copy: no hyphenation, but never let a long token break the layout */
body, p, li, dd, dt, h1, h2, h3, h4, figcaption, blockquote, td, th, label, button, a {
	hyphens: none;
	overflow-wrap: break-word;
}

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

/* <picture> must not introduce a box of its own, or object-fit sizing on the
   inner <img> has nothing to resolve its height against. */
picture { display: contents; }

h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }

:focus-visible {
	outline: 2px solid var(--lantern);
	outline-offset: 3px;
	border-radius: var(--r-sm);
}

::selection { background: var(--lantern); color: #fff; }

.skip-link {
	position: fixed; top: 8px; left: 8px; z-index: 999;
	transform: translateY(-160%);
	background: var(--ink); color: var(--paper);
	padding: .7em 1.2em; border-radius: var(--r);
	font: 500 var(--step--1)/1 var(--font-body);
	transition: transform .25s var(--ease);
}
.skip-link:focus-visible { transform: none; }

/* -------------------------------------------------------------- typography */
.display, h1, h2, h3, .h1, .h2, .h3 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -.018em;
	color: var(--fg);
}

h1, .h1 { font-size: var(--step-5); }
h2, .h2 { font-size: var(--step-4); line-height: 1.06; }
h3, .h3 { font-size: var(--step-2); line-height: 1.15; letter-spacing: -.012em; }
h4      { font-size: var(--step-1); font-family: var(--font-body); font-weight: 600; letter-spacing: -.005em; line-height: 1.3; }

.serif-em { font-style: italic; }

p { text-wrap: pretty; }
.lede {
	font-size: var(--step-1);
	line-height: 1.55;
	color: var(--fg-soft);
	max-width: 56ch;
}
.measure { max-width: var(--measure); }
.muted   { color: var(--fg-soft); }

/* Headings are short enough that balancing them helps at every width */
h1, h2, .h1, .h2, .balance { text-wrap: balance; }

/* Stop single-word last lines everywhere text wraps freely.
   `pretty` is ignored by browsers that do not support it, so this is safe. */
.hero__sub, .lede, .card__excerpt, .step__body, .itin__body, .quote__body,
.page-head__lede, .person__bio, .rating-card__note, .prose p, .prose li,
.ticks li, .person__licence, .person__licence span, .form-note,
.foot-cta__body, .no-results, .booking__price-note {
	text-wrap: pretty;
}
/* spec values are short phrases — balancing reads better than pretty here */
.spec dd, .itin__time, .menu-list__price, .card__meta { text-wrap: balance; }

/* Short strings that wrap to two or three lines: balance them instead, so a
   title never ends on a single stranded word. `pretty` does not reliably
   prevent that on blocks this short. */
h3, h4,
.card__title, .menu-list__name, .menu-list__sub, .step__title, .itin__title,
.foot-cta__title, .page-head__title, .accordion__btn > span, .person__name,
.stat__label, .filter-group__label {
	text-wrap: balance;
}


/* Mono = verifiable fact. Nothing else. */
.mono {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	font-weight: 400;
	letter-spacing: .06em;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

/* ただし定義リスト（Registered details・特商法・フッターなど）の値は本文と同じ書体にする。
   1つの表の中で、登録番号と法人番号だけが等幅になって書体が揃って見えないため。
   数字の桁揃え（tabular-nums）だけは残す。先方ご指示 2026-09-19。 */
.spec dd.mono {
	font-family: inherit;
	font-size: inherit;
	letter-spacing: normal;
}
.eyebrow {
	text-transform: uppercase;
	letter-spacing: .18em;
	font-size: .75rem;
	color: var(--steel);
	display: flex;
	align-items: center;
	gap: .7em;
}
.eyebrow::before {
	content: "";
	width: 1.6em; height: 1px;
	background: var(--lantern);
	flex: none;
}
.eyebrow--plain::before { display: none; }

/* line break that only exists on wider screens */
.br-md { display: none; }
@media (min-width: 768px) { .br-md { display: inline; } }
.br-sm { display: inline; }
@media (min-width: 768px) { .br-sm { display: none; } }

/* ------------------------------------------------------------------ layout */
.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--pad-x);
}
.wrap--wide { max-width: var(--wrap-wide); }
.wrap--narrow { max-width: 780px; }

.band { padding-block: var(--band); position: relative; }
.band--tight { padding-block: calc(var(--band) * .62); }
.band--paper  { background: var(--paper); }
.band--paper2 { background: var(--paper-2); }
/* Dark bands re-declare the muted tokens, otherwise the light-ground values
   (which are deliberately dark for contrast) become unreadable on them. */
.band--ink {
	background: var(--ink);
	--fg: var(--paper);
	--fg-soft: #b3bcc5;
	--steel: #9aa5b0;
	--lantern-deep: var(--lantern);
	--line: rgba(237, 237, 232, .18);
	--line-2: rgba(237, 237, 232, .09);
	color: var(--paper);
}
.band--indigo {
	background: var(--indigo-deep);
	--fg: var(--paper);
	--fg-soft: #b4c2cf;
	--steel: #9dabb9;
	--lantern-deep: var(--lantern);
	--line: rgba(237, 237, 232, .2);
	--line-2: rgba(237, 237, 232, .1);
	color: var(--paper);
}
.band--ink h1, .band--ink h2, .band--ink h3,
.band--indigo h1, .band--indigo h2, .band--indigo h3 { color: var(--paper); }

.grid { display: grid; gap: var(--gap); }
@media (min-width: 760px)  { .g-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px)  { .g-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .g-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px)  { .g-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .g-4 { grid-template-columns: repeat(4, 1fr); } }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.section-head {
	display: grid;
	gap: 1rem;
	margin-bottom: clamp(2rem, 1rem + 3vw, 4rem);
}
@media (min-width: 900px) {
	.section-head--split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
		align-items: end;
		gap: 3rem;
	}
}

/* ----------------------------------------------------------------- buttons */
.btn {
	display: inline-flex;
	align-items: center;
	gap: .65em;
	padding: .9em 1.5em;
	border-radius: 100px;
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.2;
	text-align: center;
	transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
	will-change: transform;
}
.btn svg { transition: transform .35s var(--ease-out); flex: none; }
.btn:hover svg { transform: translateX(4px); }

.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--lantern-deep); color: #fff; }
.band--ink .btn--solid, .band--indigo .btn--solid { background: var(--lantern); color: #14181c; }
.band--ink .btn--solid:hover, .band--indigo .btn--solid:hover { background: var(--paper); color: var(--ink); }

.btn--line {
	border: 1px solid var(--line);
	color: var(--fg);
	background: transparent;
}
.btn--line:hover { border-color: var(--fg); background: var(--fg); color: var(--bg); }
.band--ink .btn--line:hover, .band--indigo .btn--line:hover { background: var(--paper); color: var(--ink); }

.btn--lg { padding: 1.1em 2em; font-size: var(--step-0); }
.btn--block { display: flex; width: 100%; justify-content: center; }

/* text link with a rule that draws in */
.link {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-weight: 600;
	font-size: var(--step--1);
	padding-bottom: 3px;
	background-image: linear-gradient(var(--lantern), var(--lantern));
	background-size: 0% 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size .4s var(--ease-out), color .3s var(--ease);
}
.link:hover { background-size: 100% 1px; color: var(--lantern-deep); }
.band--ink .link:hover, .band--indigo .link:hover { color: var(--lantern); }

/* A link inside running text must look like a link without hovering it */
.inline-link {
	display: inline;
	font-weight: inherit;
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--lantern);
	text-decoration-thickness: 1px;
	text-underline-offset: .22em;
	transition: color .3s var(--ease), text-decoration-color .3s var(--ease);
}
.inline-link:hover { color: var(--lantern-deep); text-decoration-thickness: 2px; }
.band--ink .inline-link:hover, .band--indigo .inline-link:hover, .site-foot .inline-link:hover { color: var(--lantern); }

/* --------------------------------------------------------------- site head */
.site-head {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	transition: background-color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.site-head__inner {
	max-width: var(--wrap-wide);
	margin-inline: auto;
	padding-inline: var(--pad-x);
	height: var(--head-h);
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 3rem);
}

/* transparent while sitting on the hero, solid once you scroll.
   The shadow keeps the wordmark legible if a hero frame is bright at the top. */
body.has-hero .site-head { color: #fff; }
body.has-hero .site-head:not(.is-stuck) .brand,
body.has-hero .site-head:not(.is-stuck) .nav,
body.has-hero .site-head:not(.is-stuck) .burger {
	text-shadow: 0 1px 12px rgba(11, 14, 18, .75), 0 1px 2px rgba(11, 14, 18, .5);
}
.site-head.is-stuck {
	background: rgba(237, 237, 232, .92);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	box-shadow: 0 1px 0 var(--line-2);
	color: var(--ink);
}
.site-head.is-hidden { transform: translateY(-102%); }
body:not(.has-hero) .site-head {
	background: rgba(237, 237, 232, .92);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	box-shadow: 0 1px 0 var(--line-2);
}
body:not(.has-hero) .site-main { padding-top: var(--head-h); }

.brand { flex: none; display: block; }
.brand__word {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: clamp(1rem, .9rem + .4vw, 1.2rem);
	letter-spacing: .26em;
	text-indent: .26em;
	line-height: 1;
}
.brand img, .brand .custom-logo { max-height: 40px; width: auto; }
/* 先方ロゴ（横組み）。ヘッダー高さ 68/84px の中に、上下に少し余白を残して収める（2026-09-23）。
   シンボルの中は白で塗ってあるので、ヒーロー写真の上（暗い背景）でもそのまま読める */
.brand__logo { display: block; line-height: 0; }
.brand__logo img { display: block; height: 44px; width: auto; max-height: none; }
@media (min-width: 900px) { .brand__logo img { height: 54px; } }
.menu-panel__logo { width: 72px; height: auto; margin-bottom: .4rem; }

.nav { display: none; margin-inline-start: auto; }
@media (min-width: 1080px) { .nav { display: block; } }
.nav__list { display: flex; align-items: center; gap: clamp(1.1rem, 1.8vw, 2.2rem); }
.nav__link {
	position: relative;
	font-size: .875rem;
	font-weight: 500;
	letter-spacing: .01em;
	padding-block: .4em;
	display: inline-block;
}
.nav__link::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 100%; height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .42s var(--ease-out);
}
.nav__link:hover::after, .nav__link.is-current::after,
.nav .current-menu-item > a::after { transform: scaleX(1); transform-origin: left; }
/* on the light header the pale accent is unreadable, so use the dark one */
.nav .current-menu-item > a,
.nav__link.is-current { color: var(--lantern-deep); font-weight: 600; }
body.has-hero .site-head:not(.is-stuck) .nav .current-menu-item > a,
body.has-hero .site-head:not(.is-stuck) .nav__link.is-current { color: var(--lantern); }

.site-head__actions {
	margin-inline-start: auto;
	display: flex;
	align-items: center;
	gap: .75rem;
}
@media (min-width: 1080px) { .site-head__actions { margin-inline-start: 0; } }

.head-cta { display: none; padding: .7em 1.25em; }
@media (min-width: 600px) { .head-cta { display: inline-flex; } }
/* 透明ヘッダー（ヒーロー写真に重なっている状態）のときだけ、枠線と文字色を
   明るくする。以前はヒーローの無いページにも枠線だけが当たっており、
   淡い背景に淡い枠線で枠が消え、ヒーロー上では文字色が暗いままだったため
   写真に文字が沈んでいた（コントラスト実測 1.04:1）。 */
body.has-hero .site-head:not(.is-stuck) .head-cta {
	border-color: rgba(237, 237, 232, .55);
	color: #fff;
}
body.has-hero .site-head:not(.is-stuck) .head-cta:hover {
	background: #fff;
	color: var(--ink);
	border-color: #fff;
}

.burger {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: .5em .25em;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	position: relative;
}
/* The visible burger is 22px wide and must stay that size, so the touch
   target is grown with a pseudo-element rather than by padding the button. */
.burger::before {
	content: "";
	position: absolute;
	inset: 50% 50% auto auto;
	transform: translate(50%, -50%);
	width: max(100%, 44px);
	height: 44px;
}
@media (min-width: 1080px) { .burger { display: none; } }
.burger__box { display: block; width: 22px; height: 12px; position: relative; }
.burger__box i {
	position: absolute; left: 0;
	width: 100%; height: 1.5px;
	background: currentColor;
	transition: transform .4s var(--ease-out), opacity .25s var(--ease);
}
.burger__box i:nth-child(1) { top: 0; }
.burger__box i:nth-child(2) { bottom: 0; width: 70%; }
.burger[aria-expanded="true"] .burger__box i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__box i:nth-child(2) { transform: translateY(-5px) rotate(-45deg); width: 100%; }
.burger__label { display: none; }
@media (min-width: 420px) { .burger__label { display: inline; } }

.read-progress { height: 2px; background: transparent; }
.read-progress i {
	display: block; height: 100%;
	background: var(--lantern);
	transform-origin: left;
	transform: scaleX(var(--p, 0));
	transition: transform .12s linear;
}

/* ------------------------------------------------------------- menu panel */
.menu-panel {
	position: fixed;
	inset: 0;
	z-index: 99;
	background: var(--ink);
	color: var(--paper);
	--fg: var(--paper);
	--fg-soft: #b3bcc5;
	--steel: #9aa5b0;
	display: grid;
	place-items: center;
	opacity: 0;
	visibility: hidden;
	clip-path: inset(0 0 100% 0);
	transition: clip-path .7s var(--ease-out), opacity .3s var(--ease), visibility 0s .7s;
}
.menu-panel.is-open {
	opacity: 1;
	visibility: visible;
	clip-path: inset(0 0 0 0);
	transition: clip-path .7s var(--ease-out), opacity .3s var(--ease), visibility 0s;
}
.menu-panel__inner {
	width: 100%;
	max-width: var(--wrap);
	padding: calc(var(--head-h) + 2rem) var(--pad-x) 3rem;
	display: grid;
	gap: 2.5rem;
	max-height: 100dvh;
	overflow-y: auto;
}
@media (min-width: 860px) {
	.menu-panel__inner { grid-template-columns: minmax(0, 1fr) 20rem; gap: 4rem; align-items: start; }
}
.menu-panel__nav a {
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.1rem + 4.4vw, 3.75rem);
	line-height: 1.12;
	display: inline-block;
	padding-block: .08em;
	transition: color .3s var(--ease), transform .5s var(--ease-out);
}
.menu-panel__nav li {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .5s var(--ease) calc(.12s + var(--i) * .05s), transform .6s var(--ease-out) calc(.12s + var(--i) * .05s);
	border-bottom: 1px solid rgba(237, 237, 232, .12);
}
.menu-panel.is-open .menu-panel__nav li { opacity: 1; transform: none; }
.menu-panel__nav a:hover { color: var(--lantern); transform: translateX(10px); }

.menu-panel__aside { display: grid; gap: .6rem; align-content: start; }
.menu-panel__mail {
	font-family: var(--font-display);
	font-size: var(--step-2);
	line-height: 1.2;
	word-break: break-word;
}
.menu-panel__mail:hover { color: var(--lantern); }
.menu-panel__note { font-size: var(--step--1); color: #a4aeb8; }

body.menu-open { overflow: hidden; }

/* -------------------------------------------------------------------- hero */
.hero {
	position: relative;
	min-height: 100svh;
	min-height: 100dvh;
	display: grid;
	align-items: end;
	background: var(--ink);
	color: var(--paper);
	overflow: clip;
	isolation: isolate;
}
.hero__stage { position: absolute; inset: 0; z-index: -2; }
.hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.6s var(--ease);
}
.hero__slide.is-on { opacity: 1; }
.hero__slide picture, .hero__slide img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: var(--pos, 50% 50%);
}
.hero__slide.is-on img { animation: kenburns 9s linear forwards; }
@keyframes kenburns {
	from { transform: scale(1.005); }
	to   { transform: scale(1.075); }
}
.hero::after {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(to top, rgba(11, 14, 18, .92) 0%, rgba(11, 14, 18, .55) 34%, rgba(11, 14, 18, .18) 62%, rgba(11, 14, 18, .5) 100%);
}

/* On a phone the hero text block is tall and sits over the middle of the
   photograph, where the gradient above is still light. Deepen and raise the
   scrim so white text is readable whatever the frame happens to show. */
@media (max-width: 767px) {
	.hero::after {
		background:
			linear-gradient(to top,
				rgba(11, 14, 18, .95) 0%,
				rgba(11, 14, 18, .88) 30%,
				rgba(11, 14, 18, .66) 52%,
				rgba(11, 14, 18, .32) 74%,
				rgba(11, 14, 18, .55) 100%);
	}
}

.hero__inner {
	position: relative;
	width: 100%;
	max-width: var(--wrap-wide);
	margin-inline: auto;
	padding: 0 var(--pad-x) clamp(2.5rem, 1rem + 5vw, 5rem);
	display: grid;
	gap: clamp(1.5rem, 3vw, 3rem);
}
@media (min-width: 1000px) {
	.hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); align-items: end; }
}

.hero__title {
	font-family: var(--font-display);
	font-size: var(--step-6);
	line-height: .96;
	letter-spacing: -.028em;
	margin: 0;
	color: #fff;
}
.hero__title em { font-style: italic; color: var(--lantern); }
.hero__line { display: block; overflow: hidden; }
.hero__line > span {
	display: block;
	transform: translateY(105%);
	animation: riseIn 1s var(--ease-out) forwards;
	animation-delay: calc(.15s + var(--d, 0) * .12s);
}
@keyframes riseIn { to { transform: none; } }

.hero__sub {
	font-size: var(--step-1);
	line-height: 1.5;
	color: #d8dde2;
	max-width: 34ch;
	opacity: 0;
	animation: fadeUp .9s var(--ease-out) .6s forwards;
}
.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	opacity: 0;
	animation: fadeUp .9s var(--ease-out) .78s forwards;
}
.hero__actions .btn--line { border-color: rgba(237, 237, 232, .45); color: #fff; }
.hero__actions .btn--line:hover { background: #fff; color: var(--ink); border-color: #fff; }
.hero__actions .btn--solid { background: var(--lantern); color: #14181c; }
.hero__actions .btn--solid:hover { background: #fff; }

@keyframes fadeUp {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

/* the ticker turns the photographs into evidence: where and when */
.hero__ticker {
	display: grid;
	gap: .5rem;
	align-content: end;
	opacity: 0;
	animation: fadeUp .9s var(--ease-out) .95s forwards;
	border-top: 1px solid rgba(237, 237, 232, .22);
	padding-top: 1rem;
}
.hero__ticker-label {
	display: flex; align-items: center; gap: .6em;
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #9aa5b0;
}
.hero__ticker-label::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--lantern);
	animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.hero__ticker-text {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	line-height: 1.5;
	color: #e6eaee;
	min-height: 3em;
}
.hero__ticker-text .t-swap { display: block; animation: swapIn .7s var(--ease-out); }
@keyframes swapIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.hero__dots { display: flex; gap: .4rem; margin-top: .35rem; }
.hero__dot {
	width: 26px; height: 2px;
	background: rgba(237, 237, 232, .28);
	position: relative; overflow: hidden;
}
.hero__dot::after {
	content: ""; position: absolute; inset: 0;
	background: var(--lantern);
	transform: scaleX(0); transform-origin: left;
}
.hero__dot.is-on::after { animation: dotFill 6s linear forwards; }
@keyframes dotFill { to { transform: scaleX(1); } }

.hero__scroll {
	position: absolute;
	left: 50%; bottom: 1.1rem;
	transform: translateX(-50%);
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(237, 237, 232, .6);
	display: none;
}
@media (min-width: 1000px) and (min-height: 700px) { .hero__scroll { display: block; } }
.hero__scroll i {
	display: block; width: 1px; height: 34px;
	margin: .6rem auto 0;
	background: linear-gradient(to bottom, var(--lantern), transparent);
	animation: scrollHint 2s var(--ease) infinite;
}
@keyframes scrollHint { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* --------------------------------------------------- the meaning of the word */
.meaning { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (min-width: 900px) { .meaning { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); } }
.meaning__mark {
	font-family: "Noto Serif JP", var(--font-display), serif;
	font-size: clamp(4.5rem, 2rem + 11vw, 10rem);
	line-height: 1;
	letter-spacing: .02em;
	color: var(--ink);
	writing-mode: horizontal-tb;
}
@media (min-width: 900px) {
	.meaning__mark { writing-mode: vertical-rl; font-size: clamp(5rem, 7vw, 8.5rem); }
}
.meaning__romaji {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--lantern-deep);
	margin-top: 1rem;
}
.meaning__body p + p { margin-top: 1.1em; }

/* ------------------------------------------------------ 和敬清寂（4つの徳目）
   トップページの哲学セクション。大きな漢字を左に置き、本文を右に流す。
   漢字は装飾ではなく内容だが、英語の読み上げでは意味をなさないため
   aria-hidden とし、隣の "Wa — harmony" が意味を担う。 */
.tenets {
	list-style: none;
	margin: clamp(3rem, 6vw, 5.5rem) 0 0;
	padding: 0;
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 1100px) {
	.tenets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 3.5vw, 4rem); }
}
.tenet {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(1.1rem, 3vw, 2rem);
	align-items: start;
	padding-top: clamp(1.6rem, 3vw, 2.2rem);
	border-top: 1px solid var(--line);
}
.tenet__kanji {
	font-family: "Noto Serif JP", var(--font-display), serif;
	font-size: clamp(3.2rem, 1.6rem + 5vw, 5.5rem);
	line-height: .9;
	color: var(--lantern-deep);
	/* 漢字は字面が四角いので、行頭の英字と光学的に揃わない。少しだけ上げる。 */
	margin-top: -.08em;
}
.tenet__gloss {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--steel);
}
.tenet__gloss b { color: var(--lantern-deep); font-weight: 500; }
.tenet__label { margin-top: .9rem; }
.tenet__title {
	font-size: var(--step-2);
	line-height: 1.14;
	letter-spacing: -.015em;
	margin: .5rem 0 .9rem;
}
.tenet__body > p:last-child { max-width: 46ch; }


/* --------------------------------------------------------- signature: menu */
.menu-list { display: grid; }
.menu-list__row {
	position: relative;
	display: block;
	border-top: 1px solid var(--line);
	transition: background-color .5s var(--ease);
}
.menu-list__row:last-child { border-bottom: 1px solid var(--line); }
.menu-list__link {
	display: grid;
	gap: .5rem 1.5rem;
	padding-block: clamp(1.4rem, .9rem + 1.6vw, 2.4rem);
	align-items: baseline;
}
@media (min-width: 900px) {
	.menu-list__link {
		/* 料金の列は「¥100,000 / person」まで折り返さずに収まる幅にしてある。
		   狭いと nowrap の文字が列からはみ出し、右隣の矢印にぶつかる。 */
		grid-template-columns: minmax(0, 1fr) 9.5rem 9.5rem 1.75rem;
		align-items: center;
		gap: .5rem 1.25rem;
	}
}
@media (min-width: 1200px) {
	.menu-list__link { grid-template-columns: minmax(0, 1fr) 11rem 10rem 2rem; }
}
/* 料金を出さない設定のとき。列を減らさないと、矢印が空いた料金の列に落ちて
   行の右端から 10rem ほど内側に寄ってしまう。 */
@media (min-width: 900px) {
	.menu-list--no-price .menu-list__link { grid-template-columns: minmax(0, 1fr) 9.5rem 1.75rem; }
}
@media (min-width: 1200px) {
	.menu-list--no-price .menu-list__link { grid-template-columns: minmax(0, 1fr) 11rem 2rem; }
}
.menu-list__name {
	display: block; /* inline spans ignore max-width and text-wrap */
	font-family: var(--font-display);
	font-size: var(--step-3);
	line-height: 1.08;
	letter-spacing: -.018em;
	max-width: 26ch;
	transition: transform .55s var(--ease-out), color .35s var(--ease);
}
.menu-list__sub {
	display: block;
	font-size: var(--step--1);
	color: var(--fg-soft);
	max-width: 44ch;
	margin-top: .4rem;
	transition: color .35s var(--ease);
}
.menu-list__meta {
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .08em;
	color: var(--steel);
	text-transform: uppercase;
	display: flex;
	flex-wrap: wrap;
	gap: .4em .9em;
}
.menu-list__price {
	font-family: var(--font-mono);
	font-size: .8125rem;
	letter-spacing: .04em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.menu-list__arrow {
	display: none;
	color: var(--lantern);
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity .4s var(--ease), transform .5s var(--ease-out);
}
@media (min-width: 900px) { .menu-list__arrow { display: block; justify-self: end; } }

/* image shown on phones inside each row; hidden on desktop where the sticky
   preview takes over. It comes last in the markup so screen readers hear the
   name first, and is moved above the name visually so it cannot read as
   belonging to the row below. */
.menu-list__thumb {
	order: -1;
	margin-bottom: 1.1rem;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--r);
	background: var(--paper-3);
}
.menu-list__thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .menu-list__thumb { display: none; } }

@media (hover: hover) and (min-width: 900px) {
	.menu-list__row:hover { background: rgba(16, 20, 24, .035); }
	.band--ink .menu-list__row:hover, .band--indigo .menu-list__row:hover { background: rgba(237, 237, 232, .05); }
	.menu-list__row:hover .menu-list__name { transform: translateX(14px); color: var(--lantern-deep); }
	.band--ink .menu-list__row:hover .menu-list__name { color: var(--lantern); }
	.menu-list__row:hover .menu-list__arrow { opacity: 1; transform: none; }
}

.menu-layout { display: grid; gap: 2rem; }
@media (min-width: 900px) {
	.menu-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
}
.menu-preview { display: none; }
@media (min-width: 900px) {
	.menu-preview {
		display: block;
		position: sticky;
		top: calc(var(--head-h) + 3rem);
		aspect-ratio: 3 / 4;
		border-radius: var(--r-lg);
		overflow: hidden;
		background: var(--paper-3);
	}
}
.menu-preview__img {
	position: absolute; inset: 0;
	opacity: 0;
	transition: opacity .55s var(--ease), transform 1.2s var(--ease-out);
	transform: scale(1.06);
}
.menu-preview__img.is-on { opacity: 1; transform: none; }
.menu-preview__img img { width: 100%; height: 100%; object-fit: cover; }
/* 横長の写真（下北沢・侍など）は、縦枠に cover で入れると左右を削って「拡大」に見える。
   同じ写真をぼかして背景にし、手前に丸ごと見せる（2026-09-23）。 */
.menu-preview__img--wide > img, .menu-preview__img--wide > picture > img { position: relative; z-index: 1; object-fit: contain; }
.menu-preview__blur { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--ink); }
.menu-preview__blur img { object-fit: cover; filter: blur(22px) brightness(.55) saturate(1.1); transform: scale(1.15); }
.menu-preview__caption {
	position: absolute;
	inset: auto 0 0;
	padding: 2.5rem 1.25rem 1.1rem;
	background: linear-gradient(to top, rgba(11, 14, 18, .85), transparent);
	color: #fff;
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* ------------------------------------------- feature: full-bleed image + text */
.feature { display: grid; }
@media (min-width: 900px) {
	.feature { grid-template-columns: 1fr 1fr; align-items: stretch; }
}
.feature__media { position: relative; min-height: clamp(300px, 46vw, 640px); overflow: hidden; }
/* 横の文章が長いと列が伸びて写真枠が縦長になり、cover で左右を大きく削って「拡大」に見えていた
   （先方ご指摘 2026-09-23、About の電車の節）。PC では写真を元の比率の枠に入れ、上下中央に置く。 */
@media (min-width: 900px) {
	.feature__media { align-self: center; aspect-ratio: 4 / 3; min-height: 0; }
}
.feature__media img, .feature__media picture { width: 100%; height: 100%; object-fit: cover; }
.feature__body { display: grid; align-items: center; }
.feature__inner {
	padding: var(--band) var(--pad-x);
	max-width: 40rem;
	margin-inline: auto;
	width: 100%;
}
@media (min-width: 900px) {
	.feature__inner { padding-inline: clamp(2.5rem, 4vw, 5rem); margin-inline: 0; }
}
.feature--flip .feature__media { order: 2; }

/* ------------------------------------------------------------------- cards */
.card { display: flex; flex-direction: column; height: 100%; }
.card__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--r);
	aspect-ratio: 4 / 3;
	background: var(--paper-3);
}
.card--tall .card__media { aspect-ratio: 3 / 4; }
.card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	/* portraits are the common case in this library; biasing upward keeps
	   faces in frame instead of cropping them at the top edge */
	object-position: 50% 32%;
	transition: transform 1s var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.055); }
.card__tag {
	position: absolute;
	top: .75rem; left: .75rem;
	background: rgba(16, 20, 24, .72);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);   /* Safari は接頭辞が要る */
	color: #fff;
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: .45em .8em;
	border-radius: 100px;
}
.card__body { padding-top: 1.1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.card__title {
	font-family: var(--font-display);
	font-size: var(--step-2);
	line-height: 1.12;
	letter-spacing: -.012em;
}
.card:hover .card__title { color: var(--lantern-deep); }
.band--ink .card:hover .card__title, .band--indigo .card:hover .card__title { color: var(--lantern); }
.card__excerpt { font-size: var(--step--1); color: var(--fg-soft); }
.card__meta {
	margin-top: auto;
	padding-top: .8rem;
	border-top: 1px solid var(--line-2);
	display: flex;
	flex-wrap: wrap;
	gap: .4em 1em;
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--steel);
}

/* ------------------------------------------------- process (a real sequence) */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
	counter-increment: step;
	display: grid;
	gap: .35rem 1.5rem;
	padding-block: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
	border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 760px) {
	.step { grid-template-columns: 5rem minmax(0, 15rem) minmax(0, 1fr); align-items: start; }
}
.step::before {
	content: counter(step, decimal-leading-zero);
	font-family: var(--font-mono);
	font-size: var(--step-1);
	color: var(--lantern);
	letter-spacing: .04em;
	line-height: 1.2;
}
.step__title { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.15; }
.step__body { color: var(--fg-soft); max-width: 52ch; }

/* --------------------------------------------------- credentials (marquee) */
.credentials {
	border-block: 1px solid var(--line);
	padding-block: 1.1rem;
	overflow: hidden;
	--speed: 46s;
}
.credentials__track {
	display: flex;
	width: max-content;
	gap: 3rem;
	animation: marquee var(--speed) linear infinite;
}
.credentials:hover .credentials__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.credentials__item {
	display: inline-flex;
	align-items: center;
	gap: .7em;
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fg-soft);
	white-space: nowrap;
}
.credentials__item::before {
	content: "";
	width: 5px; height: 5px;
	background: var(--lantern);
	border-radius: 50%;
	flex: none;
}

/* --------------------------------------------------------------- specs/dl */
.spec { display: grid; gap: 0; }
.spec > div {
	display: grid;
	gap: .15rem .75rem;
	padding-block: .85rem;
	border-bottom: 1px solid var(--line-2);
}
@media (min-width: 560px) {
	.spec > div { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); align-items: baseline; }
}
.spec dt {
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--steel);
}
.spec dd { margin: 0; }
.spec--tight > div { padding-block: .5rem; }

/* In a narrow sidebar the two-column form squeezes the value into a 4-word
   column and an address breaks over six lines. Stack it there instead. */
.booking .spec > div { grid-template-columns: minmax(0, 1fr); }
.booking .spec dt { margin-bottom: .15rem; }

/* ------------------------------------------------------------- itinerary */
.itin { display: grid; }
.itin__row {
	display: grid;
	gap: .4rem 1.75rem;
	padding-block: clamp(1.2rem, .9rem + 1vw, 1.9rem);
	border-top: 1px solid var(--line);
	position: relative;
}
.itin__row:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 720px) {
	.itin__row { grid-template-columns: 8.5rem minmax(0, 1fr); }
}
.itin__time {
	font-family: var(--font-mono);
	font-size: .8125rem;
	letter-spacing: .06em;
	color: var(--lantern-deep);
	font-variant-numeric: tabular-nums;
	padding-top: .25em;
}
.band--ink .itin__time, .band--indigo .itin__time { color: var(--lantern); }
.itin__title { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.15; }
.itin__body { color: var(--fg-soft); margin-top: .3rem; max-width: 60ch; }

/* --------------------------------------------------------------- ticklist */
.ticks { display: grid; gap: .7rem; }
.ticks li {
	display: grid;
	grid-template-columns: 1.35rem minmax(0, 1fr);
	gap: .65rem;
	align-items: start;
	line-height: 1.55;
}
.ticks li::before {
	content: "";
	width: 1.35rem; height: 1.35rem;
	margin-top: .12em;
	background: var(--lantern);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center / contain no-repeat;
	flex: none;
}
.ticks--minus li::before {
	background: var(--steel);
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' d='M6 12h12'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ testimonials */
.quote {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	background: var(--paper);
	border: 1px solid var(--line-2);
	border-radius: var(--r);
	height: 100%;
}
.band--ink .quote, .band--indigo .quote { background: rgba(237, 237, 232, .045); border-color: var(--line-2); }
.quote__body {
	font-family: var(--font-display);
	font-size: var(--step-2);
	line-height: 1.32;
	letter-spacing: -.008em;
}
.quote__body::before { content: "“"; }
.quote__body::after  { content: "”"; }
.quote__foot {
	margin-top: auto;
	padding-top: .9rem;
	border-top: 1px solid var(--line-2);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .35rem .8rem;
}
.quote__name { font-weight: 600; font-size: var(--step--1); }
.quote__where {
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--steel);
}
.stars { display: inline-flex; gap: .1em; font-size: .875rem; letter-spacing: .05em; line-height: 1; }
.star { color: var(--paper-3); }
.star.is-on { color: var(--lantern-deep); }
.band--ink .star, .band--indigo .star { color: rgba(237, 237, 232, .3); }
.band--ink .star.is-on, .band--indigo .star.is-on { color: var(--lantern); }
.stars.lg { font-size: 1.25rem; }

.rating-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.rating-summary__num {
	font-family: var(--font-display);
	font-size: var(--step-4);
	line-height: 1;
}
.rating-summary__meta { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }

/* --------------------------------------------------------------- gallery */
.gallery { display: grid; gap: .5rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px)  { .gallery { grid-template-columns: repeat(3, 1fr); gap: .75rem; } }
@media (min-width: 1100px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery__item {
	overflow: hidden;
	border-radius: var(--r);
	aspect-ratio: 1;
	background: var(--paper-3);
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.gallery__item:hover img { transform: scale(1.07); }
.gallery__item--wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.gallery__item--tall { grid-row: span 2; aspect-ratio: 1 / 2; }

/* ------------------------------------------------------------------ filters */
.filters {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	padding-block: 1rem;
}
.filter {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .55em 1.05em;
	border: 1px solid var(--line);
	border-radius: 100px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: .9375rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fg-soft);
	transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
	cursor: pointer;
}
.filter:hover { border-color: var(--fg); color: var(--fg); }
.filter.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.filter__n { opacity: .55; }

.filter-group { display: grid; gap: .5rem; }
/* 2026-09-23 先方「小さくて読みにくい」→ 本文の書体で大きく・太く */
.filter-group__label {
	font-family: var(--font-body);
	font-size: var(--step-0);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fg);
	margin-bottom: .6rem;
}

.tour-grid { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
@media (min-width: 700px)  { .tour-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tour-grid { grid-template-columns: repeat(3, 1fr); } }
.tour-grid > .card { transition: opacity .4s var(--ease), transform .4s var(--ease); }
.tour-grid > .card.is-hidden { display: none; }

.no-results {
	padding: 3rem 0;
	text-align: center;
	color: var(--fg-soft);
}

/* --------------------------------------------------------------- page head */
.page-head {
	padding-top: calc(var(--head-h) + clamp(2.5rem, 1.5rem + 4vw, 6rem));
	padding-bottom: clamp(2rem, 1.2rem + 3vw, 4rem);
}
.page-head__eyebrow { margin-bottom: 1.1rem; }
.page-head__title { font-size: var(--step-5); }
.page-head__lede { margin-top: 1.25rem; }

.page-head--image {
	position: relative;
	background: var(--ink);
	color: var(--paper);
	overflow: clip;
	isolation: isolate;
	min-height: clamp(360px, 52svh, 620px);
	display: grid;
	align-items: end;
	padding-bottom: clamp(2rem, 1.2rem + 3vw, 4rem);
}
.page-head--image .page-head__bg { position: absolute; inset: 0; z-index: -2; }
.page-head--image .page-head__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-head--image::after {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(to top, rgba(11, 14, 18, .9), rgba(11, 14, 18, .5) 55%, rgba(11, 14, 18, .6));
}
/* phones: the whole block of text sits over the middle of the photo */
@media (max-width: 767px) {
	.page-head--image::after {
		background: linear-gradient(to top,
			rgba(11, 14, 18, .93) 0%,
			rgba(11, 14, 18, .82) 38%,
			rgba(11, 14, 18, .66) 66%,
			rgba(11, 14, 18, .62) 100%);
	}
}
.page-head--image .page-head__title, .page-head--image h1 { color: #fff; }
.page-head--image .page-head__lede { color: #e2e7ec; }
/* the eyebrow inherits the light-ground muted colour, which is dark grey and
   disappears against a photograph — force the on-dark tokens here */
.page-head--image {
	--steel: #cbd4dd;
	--fg-soft: #dde3e9;
	--lantern-deep: var(--lantern);
}
.page-head--image .eyebrow { color: #e6ebf0; }
.page-head--image .eyebrow::before { background: var(--lantern); }
/* text over a photograph always gets a shadow, whatever the frame shows */
.page-head--image .page-head__title,
.page-head--image .page-head__lede,
.page-head--image .eyebrow,
.page-head--image .crumbs {
	text-shadow: 0 1px 14px rgba(11, 14, 18, .8), 0 1px 3px rgba(11, 14, 18, .55);
}

.crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem .55rem;
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--steel);
	margin-bottom: 1.25rem;
}
.crumbs a:hover { color: var(--lantern); }
.crumbs li:not(:last-child)::after { content: "/"; margin-inline-start: .55rem; opacity: .5; }
/* every item must share one baseline: a link and a plain span have different
   box heights, and an inline-flex item takes its baseline from its first child */
.crumbs { align-items: baseline; }
.crumbs li { display: inline-flex; align-items: baseline; }
.crumbs a { display: inline; }
.page-head--image .crumbs { color: #b9c3cd; }

/* --------------------------------------------------------------- team */
.team { display: grid; gap: clamp(2rem, 1.4rem + 2vw, 3.5rem); }
@media (min-width: 800px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1150px) { .team { grid-template-columns: repeat(3, 1fr); } }
/* 集合写真があるときの表示（page-about.php）。個人写真は名刺サイズに */
.team-group { max-width: 38rem; margin-inline: auto; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.5rem); border-radius: var(--r); overflow: hidden; background: var(--paper-3); }
.team-group img { display: block; width: 100%; height: auto; }
.team--compact .person__media { max-width: 11rem; }
.team--compact .person__media img { object-position: 50% 15%; }
.team--compact .person__name { font-size: var(--step-2); }
.person__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--r);
	background: var(--paper-3);
	position: relative;
}
.person__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.person:hover .person__media img { transform: scale(1.05); }
.person__initial {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-size: clamp(4rem, 8vw, 7rem);
	color: var(--steel);
	background: var(--paper-2);
}
/* A photo-shaped box holding nothing but one letter reads as a loading error
   on a phone, where it fills most of the screen. Keep it, but make it a band. */
@media (max-width: 767px) {
	.person__media:has(.person__initial) { aspect-ratio: 5 / 2; }
	.person__initial { font-size: clamp(2.5rem, 14vw, 4rem); }
}
@supports not selector(:has(*)) {
	@media (max-width: 767px) {
		.person__media { aspect-ratio: auto; min-height: 0; }
		.person__initial { position: static; aspect-ratio: 5 / 2; font-size: clamp(2.5rem, 14vw, 4rem); }
	}
}
.person__name { font-family: var(--font-display); font-size: var(--step-3); margin-top: 1.1rem; line-height: 1.1; }
.person__role {
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lantern-deep);
	margin-top: .4rem;
}
.person__bio { margin-top: .9rem; color: var(--fg-soft); font-size: var(--step--1); }
.person__licences {
	margin-top: 1rem;
	padding-top: .9rem;
	border-top: 1px solid var(--line-2);
	display: grid;
	gap: .35rem;
}
.person__licence {
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .04em;
	color: var(--fg-soft);
	display: grid;
	grid-template-columns: 1rem minmax(0, 1fr);
	gap: .5rem;
	overflow-wrap: anywhere;
}
.person__licence::before { content: "✓"; color: var(--lantern); }

/* --------------------------------------------------------------- stats */
.stats { display: grid; gap: 1.5rem; }
@media (min-width: 620px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { border-top: 1px solid var(--line); padding-top: 1rem; }
.stat__n {
	font-family: var(--font-display);
	font-size: var(--step-4);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.stat__label {
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--steel);
	margin-top: .6rem;
}

/* --------------------------------------------------------------- forms */
.form { display: grid; gap: 1.25rem; }
.form__row { display: grid; gap: 1.25rem; }
@media (min-width: 620px) { .form__row--2 { grid-template-columns: repeat(2, 1fr); } }
/* 2026-09-26：直接予約の希望日（第1〜第3希望）を横に3つ並べる */
@media (min-width: 620px) { .form__row--3 { grid-template-columns: repeat(3, 1fr); } }

.field { display: grid; gap: .45rem; }
.field > label {
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--steel);
}
.field .req { color: var(--lantern-deep); }
.field input, .field select, .field textarea {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--line);
	padding: .7em 0;
	font-size: var(--step-0);
	border-radius: 0;
	transition: border-color .3s var(--ease);
	-webkit-appearance: none;
	appearance: none;
}
.field textarea { min-height: 8.5em; resize: vertical; line-height: 1.6; }
.field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23737f8b' stroke-width='1.6' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .1rem center;
	background-size: 1.15rem;
	padding-right: 1.75rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
	outline: none;
	border-bottom-color: var(--lantern);
}
.field input::placeholder, .field textarea::placeholder { color: var(--steel); opacity: .8; }

/* Honeypot: out of sight and out of the layout, without pushing the page wider */
.hp-field {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* small uppercase label — replaces one-off inline font sizes */
.label-xs {
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--steel);
}

.form-note { font-size: var(--step--1); color: var(--fg-soft); }
.form-note .req { color: var(--lantern-deep); }
.form-msg {
	padding: 1rem 1.2rem;
	border-radius: var(--r);
	font-size: var(--step--1);
	border: 1px solid var(--line);
}
.form-msg--ok  { background: rgba(217, 145, 60, .1); border-color: rgba(217, 145, 60, .5); }
.form-msg--err { background: rgba(180, 40, 40, .08); border-color: rgba(180, 40, 40, .4); }

.rating-input { display: flex; gap: .1rem; margin-left: -.4rem; }
.rating-input input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; border: 0; }
.rating-input label {
	font-size: 1.6rem;
	line-height: 1;
	color: var(--paper-3);
	cursor: pointer;
	transition: color .2s var(--ease), transform .2s var(--ease);
	padding: .35rem .4rem;   /* keeps each star a 40px+ tap target */
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}
.rating-input:hover label { color: var(--lantern-deep); }
.rating-input label:hover ~ label { color: var(--paper-3); }
.rating-input label.is-on { color: var(--lantern-deep); }
.rating-input input:focus-visible + label { outline: 2px solid var(--lantern); outline-offset: 2px; }

/* --------------------------------------------------------------- booking */
.booking {
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: clamp(1.25rem, 1rem + 1.4vw, 2rem);
	background: var(--paper);
	display: grid;
	gap: 1rem;

	/* The panel paints its own paper ground, so it must also restore the paper
	   text colours. Without this it inherits the light-on-dark tokens from
	   .band--ink and the values disappear against their own background. */
	--fg:           #101418;
	--fg-soft:      #4c555e;
	--steel:        #59636d;
	--lantern-deep: #8a5613;
	--line:         rgba(16, 20, 24, .16);
	--line-2:       rgba(16, 20, 24, .08);
	color: var(--fg);
}
/* ボタンは自前の配色を持っているので巻き込まない。
   以前ここに a と span が入っていたため、.btn--solid の明るい文字色が
   打ち消され、黒地に黒文字のボタンになっていた。 */
.booking :is(h1, h2, h3, dt, dd, p, strong) { color: inherit; }
.booking a:not(.btn) { color: inherit; }
.booking .muted,
.booking dt { color: var(--steel); }
@media (min-width: 1000px) {
	.booking { position: sticky; top: calc(var(--head-h) + 1.5rem); }
}
.booking__price {
	font-family: var(--font-display);
	font-size: var(--step-3);
	line-height: 1.05;
}
.booking__price-note { font-size: var(--step--1); color: var(--fg-soft); }

.tour-layout { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); }
@media (min-width: 1000px) {
	.tour-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); align-items: start; }
}

.map-embed {
	border-radius: var(--r);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--paper-3);
	border: 1px solid var(--line-2);
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ------------------------------------------------------------------- prose */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: var(--step-3); margin-top: 2em; }
.prose h3 { font-size: var(--step-2); margin-top: 1.8em; }
.prose h4 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-inline-start: 1.35em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--lantern); }
.prose a {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 100% 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	padding-bottom: 1px;
	transition: color .3s var(--ease);
}
.prose a:hover { color: var(--lantern-deep); }
.prose blockquote {
	border-left: 2px solid var(--lantern);
	padding-left: 1.25em;
	font-family: var(--font-display);
	font-size: var(--step-2);
	line-height: 1.35;
}
.prose img, .prose figure { border-radius: var(--r); }
.prose figcaption { font-size: var(--step--1); color: var(--fg-soft); margin-top: .6em; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.5em; }
.prose code {
	font-family: var(--font-mono);
	font-size: .875em;
	background: var(--paper-2);
	padding: .15em .4em;
	border-radius: var(--r-sm);
}
.prose table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.prose th, .prose td { text-align: left; padding: .7em .8em; border-bottom: 1px solid var(--line-2); }
.prose th { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ------------------------------------------------------------------ accordion */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__btn {
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 1.5rem;
	gap: 1rem;
	align-items: center;
	text-align: left;
	padding-block: 1.25rem;
	font-family: var(--font-display);
	font-size: var(--step-2);
	line-height: 1.2;
	transition: color .3s var(--ease);
}
.accordion__btn:hover { color: var(--lantern-deep); }
.accordion__icon { position: relative; width: 1.1rem; height: 1.1rem; justify-self: end; }
.accordion__icon::before, .accordion__icon::after {
	content: ""; position: absolute; inset: 50% 0 auto;
	height: 1.5px; background: var(--lantern);
	transition: transform .4s var(--ease-out);
}
.accordion__icon::after { transform: rotate(90deg); }
.accordion__btn[aria-expanded="true"] .accordion__icon::after { transform: rotate(0); }
.accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .5s var(--ease-out);
}
.accordion__panel > div { overflow: hidden; }
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel p { padding-bottom: 1.4rem; max-width: 64ch; color: var(--fg-soft); }

/* ------------------------------------------------------- rating cards */
.rating-card {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	padding: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--paper);
	transition: border-color .3s var(--ease), transform .4s var(--ease-out);
	height: 100%;
}
a.rating-card:hover { border-color: var(--lantern); transform: translateY(-3px); }
.rating-card__where {
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--steel);
}
.rating-card__score {
	font-family: var(--font-display);
	font-size: var(--step-4);
	line-height: 1;
}
.rating-card__score small { font-size: .4em; color: var(--steel); }
.rating-card__count { color: var(--steel); }
.rating-card__note { font-size: var(--step--1); color: var(--fg-soft); }

/* ------------------------------------------------------------ search + share */
.searchform { display: flex; gap: .5rem; align-items: center; max-width: 26rem; }
.searchform__input {
	flex: 1;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--line);
	padding: .7em 0;
	font-size: var(--step-0);
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
	min-width: 0;
}
.searchform__input:focus { outline: none; border-bottom-color: var(--lantern); }
.searchform__go {
	flex: none;
	width: 42px; height: 42px;
	display: grid; place-items: center;
	border: 1px solid var(--line);
	border-radius: 50%;
	transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.searchform__go:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.share { display: flex; flex-wrap: wrap; gap: .5rem; }
.share__link {
	padding: .5em 1em;
	border: 1px solid var(--line);
	border-radius: 100px;
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.share__link:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.filters-wrap { display: grid; gap: 1.5rem; }
@media (min-width: 860px) { .filters-wrap { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } }

/* ------------------------------------------------------------------ pager */
.pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .4rem;
	margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.pager .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 2.6rem; height: 2.6rem;
	padding-inline: .5rem;
	border: 1px solid var(--line);
	border-radius: 100px;
	font-family: var(--font-mono);
	font-size: .75rem;
	transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.pager .page-numbers:hover { border-color: var(--fg); }
.pager .page-numbers.current { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ------------------------------------------------------------- to top btn */
.to-top {
	position: fixed;
	right: clamp(1rem, 2vw, 2rem);
	bottom: clamp(1rem, 2vw, 2rem);
	z-index: 80;
	width: 44px; height: 44px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--ink);
	color: var(--paper);
	/* a ring so the button stays visible on the dark bands, where its own
	   background is the same colour as the section behind it */
	box-shadow: 0 0 0 1px rgba(237, 237, 232, .35), 0 6px 20px rgba(11, 14, 18, .35);
	opacity: 0;
	transform: translateY(14px);
	pointer-events: none;
	transition: opacity .35s var(--ease), transform .35s var(--ease), background-color .3s var(--ease);
}
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--lantern-deep); }

/* Phones: a floating button sits on top of the running text and hides the end
   of whichever line is underneath it. The header already returns on an upward
   swipe, so the button is redundant here — remove it rather than cover words. */
@media (max-width: 767px) {
	.to-top { display: none; }
}

/* ------------------------------------------------------------------- foot */
.site-foot {
	background: var(--ink);
	color: var(--paper);
	--fg: var(--paper);
	--fg-soft: #b3bcc5;
	--steel: #9aa5b0;
	--lantern-deep: var(--lantern);
	--line: rgba(237, 237, 232, .18);
	--line-2: rgba(237, 237, 232, .1);
}
.site-foot a { color: inherit; }
.site-foot__top {
	padding-block: clamp(3.5rem, 2rem + 6vw, 7rem);
	border-bottom: 1px solid rgba(237, 237, 232, .13);
	background:
		radial-gradient(1100px 420px at 15% -10%, rgba(217, 145, 60, .13), transparent 70%),
		var(--ink);
}
.foot-cta { display: grid; gap: 1.25rem; justify-items: start; max-width: 44rem; }
.foot-cta__title { font-family: var(--font-display); font-size: var(--step-4); line-height: 1.05; color: #fff; }
.foot-cta__body { color: #a9b3bd; max-width: 52ch; }
.foot-cta .btn--solid { background: var(--lantern); color: #14181c; }
.foot-cta .btn--solid:hover { background: var(--paper); color: var(--ink); }

.site-foot__main { padding-block: clamp(2.5rem, 1.6rem + 4vw, 5rem); }
.foot-grid { display: grid; gap: 2.5rem; }
@media (min-width: 700px)  { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 3rem; } }

/* 2026-09-21 のご指示で、「御任せ」を外した分、ロゴと英文を大きくしています */
.foot-brand__word { font-weight: 700; letter-spacing: .26em; font-size: var(--step-2); }
/* フッターは先方の縦組みロゴをそのまま。暗い地なので白い角丸の板に載せる（2026-09-23） */
.foot-brand__logo { display: inline-block; line-height: 0; background: #fff; border-radius: var(--r); padding: 1rem 1.1rem; }
.foot-brand__logo img { display: block; width: 180px; height: auto; }
.foot-brand__kanji {
	font-family: "Noto Serif JP", var(--font-display), serif;
	font-size: 2.4rem;
	line-height: 1.1;
	color: var(--lantern);
	margin-top: .5rem;
}
.foot-brand__gloss { color: #b3bcc5; font-size: var(--step-0); margin-top: 1rem; max-width: 40ch; line-height: 1.6; }
.foot-brand__gloss em { font-family: var(--font-mono); font-style: normal; letter-spacing: .06em; color: #d3dae0; }

.foot-nav ul { margin-top: 1rem; display: grid; gap: .55rem; }
.foot-nav a, .foot-contact a { font-size: var(--step--1); transition: color .3s var(--ease); }
.foot-nav a:hover, .foot-contact a:hover { color: var(--lantern); }
/* :not(.eyebrow) が要る。見出しも <p> なので、これが当たると
   CONTACT だけ文字が大きく（14px対12px）、上マージン分だけ下にずれていた。 */
.foot-contact p:not(.eyebrow) { margin-top: .55rem; font-size: var(--step--1); }
.foot-contact__addr, .foot-contact__hours { color: #b3bcc5; }
/* フッターの列は約250pxしかなく、11remのラベル列を引くと値が64pxしか残らない。
   会社名や13桁の法人番号が語中・桁の途中で改行されていたので、ここでは縦に積む。
   （.booking のサイドバーでも同じ理由で同じ対応をしている） */
.foot-legal-info .spec > div { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
.foot-legal-info .spec dd { overflow-wrap: normal; word-break: keep-all; }
.foot-legal-info .spec dt { color: #9aa5b0; margin-bottom: .1rem; }
.foot-legal-info .spec dd { color: #dce2e7; font-size: var(--step--1); }
.foot-legal-info .spec > div { border-color: rgba(237, 237, 232, .1); }

.socials { display: flex; gap: .6rem; margin-top: 1.25rem; }
.socials a {
	width: 38px; height: 38px;
	display: grid; place-items: center;
	border: 1px solid rgba(237, 237, 232, .2);
	border-radius: 50%;
	transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.socials a:hover { background: var(--lantern); border-color: var(--lantern); color: #14181c; }
.socials svg { width: 17px; height: 17px; }
.band--paper .socials a, .band--paper2 .socials a { border-color: var(--line); }

.site-foot__base {
	border-top: 1px solid rgba(237, 237, 232, .13);
	padding-block: 1.4rem;
}
.site-foot__base .wrap {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1.5rem;
	justify-content: space-between;
	align-items: center;
}
.copy, .legal-nav a {
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .08em;
	color: #9aa5b0;
}
.legal-nav ul, .legal-nav .menu { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
.legal-nav a:hover { color: var(--lantern); }

/* ---------------------------------------------------------------- motion */
/* Scroll reveals are opt-in from JavaScript.
   `.omk-js` is set by an inline script in the head, so if the script is blocked,
   fails, or the browser is old, every element simply stays visible. Content must
   never depend on JavaScript to be readable. */
.omk-js .reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .8s var(--ease-out) var(--delay, 0s), transform .9s var(--ease-out) var(--delay, 0s);
}
.omk-js .reveal.is-in { opacity: 1; transform: none; }

.reveal-mask { overflow: hidden; }
.omk-js .reveal-mask > * {
	transform: translateY(102%);
	transition: transform .95s var(--ease-out) var(--delay, 0s);
}
.omk-js .reveal-mask.is-in > * { transform: none; }

.reveal-img { overflow: hidden; }
.omk-js .reveal-img img {
	transform: scale(1.12);
	transition: transform 1.5s var(--ease-out);
}
.omk-js .reveal-img.is-in img { transform: none; }

.parallax { will-change: transform; }

/* ------------------------------------------------------------ utilities */
.sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.stack { display: grid; }
.stack-sm   { gap: .55rem; }
.stack-md   { gap: 1.1rem; }
.stack-lg   { gap: 2rem; }
.stack-band { gap: clamp(2.5rem, 2rem + 2vw, 4rem); }
.mt-band    { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.mb-band    { margin-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.center { text-align: center; justify-items: center; }
.img-missing { background: var(--paper-3); width: 100%; aspect-ratio: 3 / 2; border-radius: var(--r); }
.nowrap { white-space: nowrap; }

/* =========================================================================
   Japanese typography — BtoB and legal pages
   --------------------------------------------------------------------------
   Instrument Serif/Sans have no Japanese coverage, so anything in Japanese
   must be explicitly handed to Noto. `.ja` scopes it to the pages that need
   it; `lang="ja"` catches individual Japanese strings on English pages.
   ========================================================================= */
:root {
	--font-ja:         "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
	--font-ja-display: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

.ja,
body.is-ja,
[lang="ja"] {
	font-family: var(--font-ja);
	/* Japanese has no spaces, so the browser cannot balance lines for us.
	   Slightly looser tracking and leading is what makes it readable. */
	line-height: 1.9;
	letter-spacing: .02em;
	font-feature-settings: "palt" 1;
	/* Breaks Japanese at phrase boundaries instead of anywhere. This is what
	   stops a paragraph ending on a single stranded character. Chrome-only
	   for now; everywhere else it is simply ignored. */
	word-break: auto-phrase;
	line-break: strict;
}

/* `auto-phrase` alone still leaves the occasional one-character last line on
   long paragraphs, so give those a hanging-punctuation-style safety margin:
   a slightly narrower measure makes the break land earlier. */
.ja-body,
.ja-reason__body,
.ja-card__body,
.legal-row dd { max-width: 62ch; }

.ja-title {
	font-family: var(--font-ja-display);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: .01em;
	text-wrap: balance;
}

.ja-h2 {
	font-family: var(--font-ja-display);
	font-weight: 500;
	font-size: var(--step-3);
	line-height: 1.5;
	letter-spacing: .01em;
	text-wrap: balance;
}

.ja-body {
	font-family: var(--font-ja);
	font-size: var(--step-0);
	line-height: 1.95;
	/* `pretty` avoids the single-character orphan line that Japanese
	   paragraphs fall into constantly. */
	text-wrap: pretty;
}

.ja .lede,
.ja .measure,
.ja .prose p { line-height: 1.9; }

.ja .prose :is(h2, h3) { font-family: var(--font-ja-display); line-height: 1.5; }

/* 【要確認】markers. Visible to the client, quiet enough not to shout at a
   visitor if one is missed — but never invisible, or it never gets fixed. */
.ja-note {
	display: block;
	margin-top: .5em;
	font-family: var(--font-ja);
	font-size: var(--step--1);
	line-height: 1.7;
	color: var(--lantern-deep);
	border-left: 2px solid currentColor;
	padding-left: .7em;
}
.band--ink .ja-note,
.band--indigo .ja-note { color: var(--lantern); }

.ja-head__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
}

/* ------------------------------------------------------------ 選ばれる理由 */
.ja-reasons {
	display: grid;
	gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	margin-top: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
}
.ja-reason { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.ja-reason__no {
	font-size: var(--step--1);
	color: var(--lantern-deep);
	letter-spacing: .12em;
	margin-bottom: .75rem;
}
.ja-reason__title {
	font-family: var(--font-ja-display);
	font-size: var(--step-1);
	font-weight: 500;
	line-height: 1.6;
	margin-bottom: .6rem;
}
.ja-reason__body {
	font-family: var(--font-ja);
	font-size: var(--step--1);
	line-height: 1.9;
	color: var(--fg-soft);
	text-wrap: pretty;
}

/* ------------------------------------------------------------ 手配できること */
.ja-card {
	background: rgba(255, 255, 255, .5);
	border: 1px solid var(--line-2);
	border-radius: var(--r-lg);
	padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
}
.ja-card__title {
	font-family: var(--font-ja-display);
	font-size: var(--step-1);
	font-weight: 500;
	line-height: 1.55;
	margin-bottom: .7rem;
}
.ja-card__body {
	font-family: var(--font-ja);
	font-size: var(--step--1);
	line-height: 1.9;
	color: var(--fg-soft);
	text-wrap: pretty;
}

.ja-record { margin-top: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); }
.ja-step__title { font-family: var(--font-ja-display); font-weight: 500; line-height: 1.6; }
.ja-accordion__btn { font-family: var(--font-ja); line-height: 1.7; text-align: left; }

/* --------------------------------------------------------------- 外部評価 */
.ja-proof {
	margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
	padding-top: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
	border-top: 1px solid var(--line);
}
.ja-proof__lead {
	font-family: var(--font-ja);
	font-size: var(--step--1);
	color: var(--fg-soft);
	margin-bottom: .9rem;
}
.ja-proof__row {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem clamp(1.25rem, 3vw, 2.5rem);
	font-family: var(--font-ja);
	font-size: var(--step--1);
}
.ja-proof__row strong { font-family: var(--font-mono); font-size: var(--step-0); }

/* ------------------------------------------------------------------ フォーム */
.ja-form label { font-family: var(--font-ja); letter-spacing: .02em; }
.ja-form :is(input, textarea, select) { font-family: var(--font-ja); }
.ja-form .req {
	font-family: var(--font-ja);
	font-size: .75rem;
	letter-spacing: .06em;
	margin-left: .5em;
	padding: .1em .5em;
	border-radius: 2px;
	background: var(--lantern);
	color: #1a1206;
	vertical-align: .1em;
}
.ja-checks {
	display: grid;
	gap: .5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	margin-top: .5rem;
}
.ja-check {
	display: flex;
	align-items: center;
	gap: .55rem;
	font-family: var(--font-ja);
	font-size: var(--step--1);
	line-height: 1.6;
	/* A stacked list of choices, so a full-height row is the tap target.
	   (Inline links elsewhere use pseudo-element hit areas instead, because
	   growing those would overlap the lines above and below.) */
	min-height: 44px;
	padding-block: .3rem;
	cursor: pointer;
}
/* The text fields on this site are underline-style, with appearance:none.
   That rule also catches checkboxes and flattens them into a single line, so
   put the native control back for these. */
.ja-check input[type="checkbox"] {
	-webkit-appearance: checkbox;
	appearance: checkbox;
	flex: none;
	width: 1.05em;
	height: 1.05em;
	margin-top: .3em;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	accent-color: var(--lantern);
}

.ja-contact__mail a,
.ja-contact__tel a { font-family: var(--font-mono); font-size: var(--step-1); }
.ja-contact dt,
.ja-contact dd { font-family: var(--font-ja); }

/* =========================================================================
   BtoB entry points — header button, menu panel, home band
   ========================================================================= */
.head-btob {
	background: var(--lantern);
	color: #1a1206;
	border: 1px solid transparent;
	padding-inline: clamp(.9rem, .6rem + .8vw, 1.35rem);
	font-size: var(--step--1);
	letter-spacing: .04em;
	white-space: nowrap;
	transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.head-btob:hover,
.head-btob:focus-visible { background: #e6a458; }
.head-btob__en { display: inline; }

/* Header controls keep their drawn size; the touch target is grown behind
   them so nothing shifts on the desktop layout. */
@media (hover: none), (max-width: 1079px) {
	.brand, .head-btob, .head-cta { position: relative; }
	.brand::after, .head-btob::after, .head-cta::after {
		content: "";
		position: absolute;
		inset: 50% auto auto 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		height: max(100%, 44px);
	}
}
.head-btob__ja { display: none; font-family: var(--font-ja); }

.menu-panel__btob {
	display: block;
	margin-bottom: 1.5rem;
	padding: 1rem 1.15rem;
	border: 1px solid var(--lantern);
	border-radius: var(--r);
	color: var(--lantern);
	text-decoration: none;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.menu-panel__btob:hover,
.menu-panel__btob:focus-visible { background: var(--lantern); color: #1a1206; }
.menu-panel__btob-en { display: block; font-size: var(--step-0); letter-spacing: .02em; }
.menu-panel__btob-ja {
	display: block;
	margin-top: .3rem;
	font-family: var(--font-ja);
	font-size: var(--step--1);
	opacity: .85;
}

.btob-band { border-top: 1px solid rgba(255, 255, 255, .1); }
.btob-band__inner {
	display: grid;
	gap: clamp(2rem, 1.4rem + 3vw, 4rem);
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	align-items: center;
}
.btob-band__title {
	font-family: var(--font-display);
	font-size: var(--step-4);
	line-height: 1.1;
	margin-bottom: 1.25rem;
	text-wrap: balance;
}
.btob-band__ja {
	display: block;
	margin-top: .5rem;
	font-family: var(--font-ja-display);
	font-size: var(--step-2);
	font-weight: 500;
	line-height: 1.5;
	color: var(--lantern);
}
.btob-band__body {
	max-width: 52ch;
	color: var(--fg-soft);
	margin-bottom: .9rem;
}
.btob-band__body--ja { font-family: var(--font-ja); font-size: var(--step--1); line-height: 1.9; }
.btob-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: clamp(1.25rem, 1rem + 1vw, 2rem);
}
.btob-band__actions .btn svg { margin-left: .5em; }
.btob-band__points {
	list-style: none;
	display: grid;
	gap: .85rem;
	font-family: var(--font-ja);
	font-size: var(--step--1);
	line-height: 1.7;
}
.btob-band__points li {
	border-left: 2px solid var(--lantern);
	padding-left: .9rem;
}
.btob-band__points strong { font-weight: 600; color: #fff; }

/* =========================================================================
   Instagram grid
   ========================================================================= */
.ig__grid {
	list-style: none;
	display: grid;
	gap: clamp(.5rem, .3rem + .7vw, 1rem);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
}
.ig__item a {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--r);
	aspect-ratio: 1;
	background: var(--paper-3);
}
.ig__item :is(img, picture > img) {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.1s var(--ease-out), filter var(--dur) var(--ease);
}
.ig__item a:hover img,
.ig__item a:focus-visible img { transform: scale(1.06); }
.ig__play {
	position: absolute;
	inset-block-end: .6rem;
	inset-inline-end: .6rem;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
}
.ig__play::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-left: .45rem solid #fff;
	border-block: .3rem solid transparent;
	transform: translateX(.08rem);
}
.ig__cta { margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); }
/* 2026-09-25：写真が増えたので最初の 12 枚だけ出し、残りはボタンで開く */
.ig__grid:not(.is-open) .ig__item--more { display: none; }
.ig__more { margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem); text-align: center; }

/* =========================================================================
   Legal notice / 特商法
   ========================================================================= */
.legal-list { border-top: 1px solid var(--line); }
.legal-row {
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
	gap: clamp(1rem, 2vw, 2rem);
	padding-block: clamp(1rem, .8rem + .8vw, 1.5rem);
	border-bottom: 1px solid var(--line-2);
}
.legal-row dt { align-self: start; }
.legal-row__ja {
	display: block;
	font-family: var(--font-ja);
	font-size: var(--step--1);
	font-weight: 600;
	line-height: 1.6;
}
.legal-row__en {
	display: block;
	margin-top: .2rem;
	font-family: var(--font-body);
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--steel);
}
.legal-row dd {
	font-family: var(--font-ja);
	font-size: var(--step--1);
	line-height: 1.9;
}

.legal-h2__en {
	display: block;
	margin-top: .35rem;
	font-family: var(--font-body);
	font-size: .8125rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--steel);
}

.legal-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
	font-family: var(--font-ja);
	font-size: var(--step--1);
}
.legal-table :is(th, td) {
	text-align: left;
	padding: .9rem 1rem;
	border-bottom: 1px solid var(--line-2);
	vertical-align: top;
	line-height: 1.7;
}
.legal-table thead th {
	border-bottom: 1px solid var(--line);
	font-weight: 600;
}
.legal-table tbody th { font-weight: 500; }
.legal-th__en {
	display: block;
	margin-top: .2rem;
	font-family: var(--font-body);
	font-size: .75rem;
	letter-spacing: .05em;
	color: var(--steel);
	text-transform: none;
}
.legal-notes {
	list-style: none;
	margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
	display: grid;
	gap: 1.1rem;
}
.legal-notes li {
	border-left: 2px solid var(--line);
	padding-left: 1rem;
}
.legal-notes__en {
	display: block;
	margin-top: .25rem;
	font-family: var(--font-body);
	font-size: var(--step--1);
	color: var(--steel);
}

/* --------------------------------------------------------- tablet & phone */
@media (max-width: 899px) {
	.btob-band__inner { grid-template-columns: minmax(0, 1fr); }
	.ig__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	/* Below the burger breakpoint the English label no longer fits beside
	   the logo, and Japanese is the shorter of the two. */
	.head-btob { padding-inline: .8rem; }
	.head-btob__en { display: none; }
	.head-btob__ja { display: inline; font-size: .8125rem; }
	.ig__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.legal-row { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
	.legal-table :is(th, td) { padding: .75rem .5rem; }
	.ja-checks { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 599px) {
	/* The BtoB button is the one thing on this site that must never be
	   crowded out, so "Plan your trip" yields to it instead. */
	.head-cta { display: none; }
	.ja-title { line-height: 1.5; }
	.btob-band__points { font-size: .8125rem; }
}

/* =========================================================================
   Flags on reviews
   --------------------------------------------------------------------------
   Windows Chrome/Edge ship no flag glyphs and fall back to the two regional
   indicator letters. That is why the country name is always printed too, and
   why the glyph is boxed — so the fallback reads as a deliberate code chip
   rather than as a broken character.
   ========================================================================= */
.has-flag { display: inline-flex; align-items: baseline; gap: .4em; }
.flag {
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
	font-size: 1.05em;
	line-height: 1;
	letter-spacing: 0;
	font-variant-emoji: emoji;
}
.flag__name { display: inline; }

/* =========================================================================
   Approximate US dollars
   ========================================================================= */
.usd {
	display: inline-block;
	margin-left: .5em;
	font-family: var(--font-mono);
	/* 親が小さいとき（ツアー一覧のメタ情報は12px）に 9.8px まで縮んでいた。
	   相対指定は残しつつ、12pxを下限にする。 */
	font-size: max(.75rem, .8125em);
	letter-spacing: .01em;
	color: var(--steel);
	white-space: nowrap;
}
.band--ink .usd,
.band--indigo .usd,
.booking .usd { color: var(--fg-soft); }
.booking__price .usd { display: block; margin: .35em 0 0; }

/* =========================================================================
   Share row — WhatsApp first
   ========================================================================= */
.share { margin-top: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); }
.share__label {
	font-size: var(--step--1);
	color: var(--fg-soft);
	margin-bottom: .7rem;
	text-wrap: pretty;
}
.share__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.share__btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: pointer;
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
	            color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.share__btn:hover,
.share__btn:focus-visible { transform: translateY(-2px); border-color: currentColor; }
.share__btn--whatsapp:hover,
.share__btn--whatsapp:focus-visible { background: #25d366; border-color: #25d366; color: #fff; }
.share__btn--x:hover,
.share__btn--x:focus-visible { background: var(--ink); border-color: var(--ink); color: #fff; }
.share__btn--facebook:hover,
.share__btn--facebook:focus-visible { background: #1877f2; border-color: #1877f2; color: #fff; }
.share__btn--email:hover,
.share__btn--email:focus-visible,
.share__btn--copy:hover,
.share__btn--copy:focus-visible { background: var(--lantern); border-color: var(--lantern); color: #1a1206; }
.share__btn.is-done { background: var(--lantern); border-color: var(--lantern); color: #1a1206; }
.share__btn svg { pointer-events: none; }

.band--ink .share__btn,
.band--indigo .share__btn { border-color: rgba(255, 255, 255, .24); }

/* =========================================================================
   Rating badges
   ========================================================================= */
.badges {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(.75rem, .5rem + 1vw, 1.5rem);
	margin-bottom: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
}
.badges--embed { align-items: flex-start; }
.badges__slot { max-width: 100%; overflow-x: auto; }
.badge {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: .8rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
a.badge:hover,
a.badge:focus-visible { border-color: currentColor; transform: translateY(-2px); }
.badge__score { font-size: var(--step-2); line-height: 1; }
.badge__meta { display: grid; gap: .1rem; font-size: var(--step--1); line-height: 1.4; }
.badge__stars { color: var(--lantern-deep); letter-spacing: .05em; }
.badge__where { font-weight: 600; }
.badge__count { color: var(--steel); }
.badges__asof {
	font-size: var(--step--1);
	color: var(--steel);
	text-wrap: pretty;
}

@media (max-width: 599px) {
	.badge { width: 100%; }
	.share__list { gap: .45rem; }
}

/* =========================================================================
   Touch devices of any width
   --------------------------------------------------------------------------
   The tap-target rules above live in a max-width: 767px block, so a tablet —
   just as much a finger-driven device — got none of them: footer links came
   out 15px tall, breadcrumbs 23px, the header nav 17px.

   `pointer: coarse` asks the question that actually matters (is the primary
   input a finger?) instead of inferring it from the viewport. A touchscreen
   laptop still reports `fine` because its trackpad is primary, so the desktop
   layout is untouched.

   Same rule as before: only elements that sit on their own line may grow
   taller. Anything inside a line of text gets an invisible pseudo-element
   instead, so the text baseline never moves.
   ========================================================================= */
@media (pointer: coarse) {
	/* stacked lists — safe to grow */
	.foot-nav a,
	.foot-contact a,
	.nav__link,
	.ja-contact__mail a,
	.ja-contact__tel a { display: flex; align-items: center; min-height: 40px; }
	.foot-nav ul { gap: .15rem; }

	/* single-item rows — extend the hit area without moving anything */
	.crumbs a,
	.legal-nav a { position: relative; }
	.crumbs a::after,
	.legal-nav a::after {
		content: "";
		position: absolute;
		inset: -10px -6px;
		border-radius: 4px;
	}
	.legal-nav ul, .legal-nav .menu { gap: .75rem 1.4rem; }
	.crumbs, .crumbs li { align-items: baseline; }

	/* the FAQ rows are buttons spanning the full width — give them real height */
	.accordion__btn { min-height: 48px; }

	.link { padding-block: .45em; }
	/* レビュー内のツアー名リンクは flex-basis:100% で独立した行にあるので、
	   広げても上下の行に重ならない。以前は本文中のリンク扱いで除外していたが、
	   22pxしかなく指で押しづらかった。 */
	.quote__foot .link { padding-block: .25em; }
	.socials a { width: 42px; height: 42px; }

	/* links inside running text stay inline — WCAG 2.5.5 exempts them, and
	   enlarging them would overlap the lines above and below */
	.prose a, .inline-link, .form-note a, .legal-notes a { display: inline; min-height: 0; }
}

/* =========================================================================
   Phone legibility — deliberately last in the file so it wins over the
   component rules above without needing !important.
   ========================================================================= */
@media (max-width: 599px) {
	.eyebrow,
	.hero__ticker-label,
	.card__meta,
	.card__tag,
	.quote__where,
	.stat__label,
	.filter,
	.filter-group__label,
	.person__role,
	.person__licence,
	.crumbs,
	.share__link,
	.menu-preview__caption,
	.rating-card__where,
	.copy,
	.legal-nav a,
	.field > label,
	.field legend,
	.spec dt,
	.menu-list__meta,
	.itin__time,
	.booking .mono {
		font-size: .75rem;
	}
	.menu-list__price { font-size: .8125rem; }
	.label-xs { font-size: .75rem; }

	/* Two short columns of metadata read better stacked than squeezed */
	.menu-list__link { gap: .35rem; }
	.menu-list__meta { margin-top: .7rem; }
	.menu-list__price { margin-top: .1rem; }

	/* --------------------------------------------------------- tap targets
	   Rule: only elements that already sit on their own line may grow taller.
	   Anything that lives inside a line of text gets its hit area extended by
	   an invisible pseudo-element instead, so the text baseline never moves.
	   (Growing those with min-height is what broke the breadcrumb alignment.) */
	.btn { padding: 1em 1.5em; }
	.filter { padding: .7em 1.1em; }
	.brand { display: inline-flex; align-items: center; min-height: 44px; }
	.burger { padding: .85rem .4rem; }
	.menu-panel__mail { padding-block: .35em; }
	.menu-panel__nav a { padding-block: .3em; }

	/* stacked lists — safe to grow */
	.foot-nav a,
	.foot-contact a,
	.nav__link { display: flex; align-items: center; min-height: 40px; }
	.foot-nav ul { gap: .15rem; }

	/* single-item rows — extend the hit area without changing layout.
	   Only used where nothing tappable sits directly above or below, so the
	   invisible overlay cannot steal a tap from a neighbouring link. */
	.crumbs a,
	.legal-nav a,
	.quote__foot .link { position: relative; }
	.crumbs a::after,
	.legal-nav a::after,
	.quote__foot .link::after {
		content: "";
		position: absolute;
		inset: -10px -6px;
		border-radius: 4px;
	}
	.legal-nav ul, .legal-nav .menu { gap: .75rem 1.4rem; }

	/* keep every breadcrumb item sitting on one baseline */
	.crumbs { align-items: baseline; }
	.crumbs li { align-items: baseline; }

	/* standalone call-to-action links get real height; the one that lives
	   inside a review caption stays on its line */
	.link { padding-block: .45em; }
	.quote__foot .link { padding-block: .25em; }

	.share__link { padding: .7em 1.15em; }
	.socials a { width: 42px; height: 42px; }

	/* links inside running text stay inline — WCAG exempts inline targets,
	   and enlarging them here would overlap the lines above and below */
	.prose a, .inline-link, .form-note a { display: inline; min-height: 0; }

	/* Long English headlines get more room to breathe on a narrow screen */
	.hero__title { letter-spacing: -.022em; }
	.section-head { margin-bottom: 2rem; }
}

/* Very narrow phones (iPhone SE and similar) */
@media (max-width: 380px) {
	:root { --pad-x: 1.1rem; }
	.hero__title { font-size: clamp(2.6rem, 11vw, 3rem); }
	.btn { font-size: .8125rem; }
}

/* --------------------------------------------------- reduced motion / print */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.reveal, .reveal-mask > *, .hero__line > span, .hero__sub, .hero__actions, .hero__ticker,
	.menu-panel__nav li, .omk-js .reveal, .omk-js .reveal-mask > * {
		opacity: 1 !important;
		transform: none !important;
	}
	.reveal-img img, .omk-js .reveal-img img { transform: none !important; }
	.credentials__track { animation: none; }
	.hero__slide { transition: none; }
}

@media print {
	.site-head, .menu-panel, .to-top, .site-foot__top, .hero__ticker, .booking { display: none !important; }
	body { background: #fff; color: #000; }
	.band { padding-block: 1.5rem; }
	a::after { content: " (" attr(href) ")"; font-size: .8em; word-break: break-all; }
}

/* 画像の上のタグ。エリアと種別を並べる（Kyoto / Tokyo が一目で分かるように）。
   エリア側は文字色だけを変えて区別する。地の色を変えると、暗い帯の中に置いたときに
   白文字とのコントラストが 2.6:1 まで落ちてしまう。 */
.card__tags {
	position: absolute;
	top: .75rem; left: .75rem; right: .75rem;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}
.card__tags .card__tag { position: static; top: auto; left: auto; }
.card__tag--area { color: var(--lantern); }

/* 「*」で始めた行。含まれない項目ではなく、お客様へのご案内として出す */
.ticks__note {
	margin-top: .9rem;
	font-size: var(--step--1);
	color: var(--steel);
	line-height: 1.55;
}

/* ------------------------------------------------------------- SNSの導線
   トップページの Instagram 枠の下。フッターのアイコン並びと違い、
   何のリンクか文字で分かるようにする。 */
.social-follow { display: grid; gap: 1rem; justify-items: center; text-align: center; }
.social-follow__label { justify-content: center; }
.social-follow__row { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.social-btn { gap: .55em; }
.social-btn svg { flex: none; }

/* 点数を手入力していないプラットフォームのカード */
.rating-card__score--link {
	font-size: var(--step-1);
	line-height: 1.2;
	letter-spacing: -.01em;
}