/* =========================================================
   satellite443
   色・書体の値は 0915/DESIGN.md（紹介資料から実測）に準拠。
   スマートフォン（390）を基準に書き、64em（標準の文字サイズで1024px）以上でPC（1440）の組みに切り替える。
   ブレークポイントを em にしているのは、文字を大きくしている閲覧者にはメニューの組みを出すため。
   ========================================================= */

/* ---------- トークン ---------- */

:root {
  --paper: #F6F3ED;
  --surface: #EFEBE3;
  --surface-2: #DFD8CA;
  --ink: #23201D;
  --ink-2: #4B463F;
  --muted: #6F6960;
  --rule: #D9D3C8;
  --rule-2: #CFC7BA; /* PRICE の手順番号の枠・接続線（デザイン原本の値） */
  --accent: #7A4A2B;
  --band: #23201D;
  --intro-bg: #EDE9E1;

  --sans: 'Instrument Sans', 'Noto Sans JP', system-ui, sans-serif;

  --gutter: 20px;
  --rail-w: 40px;
  --logo-h: 20px;
  --content-max: 1288px; /* 1440 − 縦帯40 − 左右余白56×2 */

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1C1A18;
    --surface: #26231F;
    --surface-2: #332F2A;
    --ink: #F2EFE8;
    --ink-2: #CFC9BF;
    --muted: #9C958A;
    --rule: #332F2A;
    --rule-2: #4B463F;
    --accent: #C79468;
    --band: #100F0E;
    --intro-bg: #100F0E;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #1C1A18;
  --surface: #26231F;
  --surface-2: #332F2A;
  --ink: #F2EFE8;
  --ink-2: #CFC9BF;
  --muted: #9C958A;
  --rule: #332F2A;
  --rule-2: #4B463F;
  --accent: #C79468;
  --band: #100F0E;
  --intro-bg: #100F0E;
  color-scheme: dark;
}

/* ---------- ベース ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-feature-settings: 'palt' 1;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  display: block;
}

/* picture を display:contents にしている箇所で、<source> が並びの要素として数えられないようにする */
picture > source {
  display: none;
}

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

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 9999px;
  background: var(--ink);
  color: var(--paper);
  font-size: .75rem;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* ---------- イントロ（TOPのみ・1セッション1回） ---------- */

.intro {
  --intro-size: min(240px, 44vw, 40dvh);
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--intro-size) * .1833); /* 240px のとき 44px */
  background: var(--intro-bg);
  animation: intro-out .9s ease 1.8s forwards;
}

/* スマホ版（64em 未満）ではイントロを出さず、いきなり TOP を見せる（2026-10-05 運営者の指示） */
@media (max-width: 63.99em) {
  .intro {
    display: none;
  }
}

.intro-seen .intro {
  display: none;
}

/* Instrument Sans が届くまで（最大0.8秒）再生を止め、代替フォントの「443」を見せない */
.intro-wait .intro,
.intro-wait .intro__mark,
.intro-wait .intro__line {
  animation-play-state: paused;
}

.intro__mark {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: var(--intro-size);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--ink);
  animation: intro-num .9s ease-out both;
}

.intro__line {
  width: calc(var(--intro-size) * 1.0667); /* 240px のとき 256px */
  height: max(3px, calc(var(--intro-size) * .0208)); /* 240px のとき 5px */
  background: var(--accent);
  transform-origin: left center;
  animation: intro-line 1s ease-in-out .3s both;
}

@keyframes intro-num {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes intro-line {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes intro-out {
  to { opacity: 0; visibility: hidden; }
}

/* 動きを減らす設定では、数字の浮き上がりと線の伸びを止め、静止した状態からフェードだけで消す */
@media (prefers-reduced-motion: reduce) {
  .intro__mark,
  .intro__line {
    animation: none;
  }
}

/* ---------- 縦帯（PCのみ） ---------- */

.rail {
  display: none;
}

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

.site-header {
  flex: none;
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 8px 8px var(--gutter);
}

.logo {
  display: block;
  flex: none;
  /* 見た目は高さ20pxのまま、タップ領域を上下に広げる */
  padding-block: 12px;
  margin-block: -12px;
  color: var(--ink);
}

.logo svg {
  height: var(--logo-h);
  width: auto;
  overflow: visible;
}

.gnav {
  display: none;
}

.menu-button {
  min-width: 64px;
  min-height: 48px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: inherit;
  font-size: .75rem;
  letter-spacing: .16em;
  cursor: pointer;
}

/* ---------- メイン（見出し・写真・リード） ---------- */

.hero {
  flex: none;
}

.hero__title {
  margin: 0;
  padding: 28px var(--gutter) 20px;
  font-size: 2.375rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--ink);
}

.hero__br {
  display: none;
}

.hero__photo {
  margin: 0;
  aspect-ratio: 4 / 3;
  background: var(--surface);
}

.hero__photo picture {
  display: contents;
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 写真は切り抜かずに額装する */
}

.hero__copy {
  margin: 0;
  padding: 20px var(--gutter) 0;
  font-size: .875rem;
  line-height: 1.95;
  color: var(--ink-2);
  text-wrap: pretty;
}

.hero__copy span {
  display: inline-block; /* 文節の途中で改行させない */
}

/* ---------- フッター ---------- */

.site-footer {
  flex: none;
  margin-top: 40px;
  border-top: 1px solid var(--rule);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px var(--gutter) max(40px, calc(env(safe-area-inset-bottom) + 24px));
}

.copyright {
  margin: 0;
  line-height: normal;
  font-size: .6875rem;
  letter-spacing: .08em;
  color: var(--muted);
}

.copyright small {
  font-size: inherit;
}

/* プライバシーポリシーへのリンク（デザイン原本にない。コピーライトと同じ文字の大きさ・色） */
.footer-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px; /* 押せる範囲を指の大きさに合わせる */
  margin-block: -12px; /* 押せる範囲を広げても、フッターの高さはほとんど変えない */
  font-size: .6875rem;
  line-height: normal;
  letter-spacing: .08em;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}

.footer-link:hover {
  color: var(--ink);
}

/* ---------- 全画面メニュー（スマートフォン・タブレット） ---------- */

.menu {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0 0 env(safe-area-inset-bottom);
  border: 0;
  background: var(--paper);
  color: var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu::backdrop {
  background: transparent;
}

html:has(.menu[open]) {
  overflow: hidden;
}

.menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 4px var(--gutter);
}

.menu__close:focus-visible {
  outline-offset: 1px; /* 画面の端でリングが切れないように */
}

.menu__close {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
}

.menu__nav {
  padding: 32px var(--gutter);
}

.menu__list,
.gnav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.menu__link {
  display: flex;
  align-items: center;
  min-height: 56px;
  font-size: 1.35rem;
  line-height: normal;
  letter-spacing: .12em;
  color: var(--muted);
}

.menu__link[aria-current="page"] {
  color: var(--ink);
}

.menu__link[aria-current="page"] span {
  padding-bottom: 3px;
  border-bottom: 1px solid var(--accent);
}

/* ---------- 横向きのスマートフォン・タブレット ---------- */

@media (max-width: 63.99em) and (orientation: landscape) {
  .hero__photo {
    width: min(100%, calc((100dvh - 65px) * 4 / 3));
    margin-inline: auto;
  }
}

/* ---------- タブレット（37.5em〜 = 600〜1023px） ---------- */

@media (min-width: 37.5em) {
  :root {
    --gutter: 32px;
  }

  .hero__title {
    padding-top: 40px;
    padding-bottom: 28px;
    font-size: clamp(2.375rem, 1.2rem + 3vw, 3.5rem);
  }

  .hero__copy {
    padding-top: 28px;
    font-size: .9375rem;
    line-height: 2.1;
  }
}

/* ---------- PC（64em = 1024px以上） ---------- */

@media (min-width: 64em) {
  :root {
    --gutter: 56px;
    --logo-h: 28px;
    --header-h: calc(var(--logo-h) + 61px); /* 上下余白30×2 ＋ ロゴ28 ＋ 罫1 = 89px */
  }

  body {
    padding-left: var(--rail-w);
  }

  .rail {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: var(--rail-w);
    padding-bottom: 28px;
    border-right: 1px solid var(--rule);
    background: var(--paper);
  }

  .rail__text {
    writing-mode: vertical-rl;
    font-size: .6875rem;
    letter-spacing: .18em;
    color: var(--muted);
    white-space: nowrap;
  }

  .site-header__inner,
  .site-footer__inner {
    max-width: calc(var(--content-max) + var(--gutter) * 2);
    margin-inline: auto;
  }

  .site-header__inner {
    justify-content: flex-start;
    gap: 48px;
    padding: 30px var(--gutter);
  }

  .menu-button {
    display: none;
  }

  .gnav {
    display: block;
    margin-left: auto;
  }

  .gnav__list {
    display: flex;
    gap: 36px;
  }

  .gnav__link {
    position: relative;
    display: block;
    padding-bottom: 3px;
    border-bottom: 1px solid transparent;
    font-size: .8125rem;
    line-height: normal;
    letter-spacing: .14em;
    color: var(--muted);
    transition: color .2s ease;
  }

  /* 見た目は変えずに、押せる範囲だけ上下左右に広げる（高さ44px以上） */
  .gnav__link::before {
    content: "";
    position: absolute;
    inset: -12px -18px;
  }

  .gnav__link:hover,
  .gnav__link[aria-current="page"] {
    color: var(--ink);
  }

  .gnav__link[aria-current="page"] {
    border-bottom-color: var(--accent);
  }

  /* 1440×900 で デザインどおり 高さ811・写真864×648（上下81.5ずつの余白）になるよう、
     写真の大きさを画面の高さと幅の両方から決める */
  .hero {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100dvh - var(--header-h));
    padding: 0 var(--gutter);
  }

  .hero__grid {
    --content-w: min(100cqw, var(--content-max));
    --hero-h: max(560px, calc(100dvh - var(--header-h)));
    --photo-w: min(
      864px,
      calc((var(--hero-h) - 163px) * 4 / 3),
      calc(var(--content-w) - 40px - 24rem)
    );
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--photo-w);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "title photo"
      "copy  photo";
    column-gap: 40px;
    width: var(--content-w);
    margin-inline: auto;
  }

  .hero__title {
    grid-area: title;
    margin: 0 0 clamp(32px, 4.17vw, 60px);
    padding: 0;
    font-size: clamp(3rem, 5vw, 4.5rem);
  }

  .hero__br {
    display: inline;
  }

  .hero__photo {
    grid-area: photo;
    width: var(--photo-w);
  }

  .hero__copy {
    grid-area: copy;
    max-width: 29em;
    padding: 0;
    font-size: .9375rem;
    line-height: 2.2;
  }

  .site-footer {
    margin-top: 0;
  }

  .site-footer__inner {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    padding: 40px var(--gutter) 48px;
  }

}

/* =========================================================
   下層ページ（ABOUT / SPACE / PRICE / ACCESS / CONTACT）
   スマートフォンでは HTML の順に縦に積み、PC では左に文字・右に写真（地図・料金表・フォーム）の
   2列に組み直す。1画面目の寸法の考え方は TOP と同じ（1440×900 で右列 864×648）。
   ========================================================= */

.pc-only {
  display: none;
}

/* ---------- ページ見出し ---------- */

.page-title {
  margin: 0;
  padding: 34px var(--gutter) 26px;
  font-size: 2.375rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--ink);
}

/* ---------- 1画面目 ---------- */

.lead__media {
  margin: 0;
}

.photo-frame {
  aspect-ratio: 4 / 3;
  background: var(--surface);
}

.photo-frame picture {
  display: contents;
}

.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 写真は切り抜かずに額装する */
}

.prose {
  display: flex;
  flex-direction: column;
  gap: 28px;
  font-size: .9375rem;
  line-height: 1.95;
  color: var(--ink-2);
  text-wrap: pretty;
}

.prose p {
  margin: 0;
}

.prose--tight {
  gap: 14px;
}

.lead__body {
  padding: 28px var(--gutter) 0;
}

/* ---------- 1画面目より下のまとまり ---------- */

.block {
  padding: 42px var(--gutter) 0;
}

.block__title {
  margin: 0 0 16px;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -.005em;
  color: var(--ink);
}

/* ---------- 項目と値の一覧（施設概要・設備・行き方） ---------- */

.facts {
  margin: 0;
  border-bottom: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}

.facts__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
}

.facts dt {
  font-size: .6875rem;
  line-height: normal;
  letter-spacing: .08em;
  color: var(--muted);
}

.facts dd {
  margin: 0;
  font-size: .875rem;
  line-height: 1.8;
  color: var(--ink);
}

.facts__line {
  display: inline;
}

.facts__tel {
  color: inherit;
}

/* ---------- 矢印付きの枠ボタン・ベタ塗りのボタン ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  min-height: 46px;
  padding: 13px 24px;
  border: 1px solid var(--rule);
  border-radius: 9999px;
  font-size: .75rem;
  font-weight: 500;
  line-height: normal;
  letter-spacing: .14em;
  color: var(--ink);
  transition: color .25s ease, border-color .25s ease;
}

.pill:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 48px;
  padding: 13px 28px;
  border-radius: 9999px;
  font-family: inherit;
  font-size: .75rem;
  font-weight: 500;
  line-height: normal;
  letter-spacing: .14em;
  cursor: pointer;
}

.button--ink {
  border: 0;
  background: var(--ink);
  color: var(--paper);
  transition: background .25s ease;
}

.button--ink:hover {
  background: var(--accent);
}

.button--line {
  justify-content: center;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  transition: border-color .25s ease;
}

.button--line:hover {
  border-color: var(--ink);
}

.button:disabled {
  cursor: progress;
  opacity: .6;
}

/* ---------- 下層ページのフッター ---------- */

.page .site-footer {
  margin-top: 34px;
}

.page--price .site-footer {
  margin-top: 0;
}

.page .site-footer__inner {
  padding: 28px var(--gutter) max(36px, calc(env(safe-area-inset-bottom) + 20px));
}

/* ---------- SPACE: スライドショー ---------- */

.gallery__stage {
  position: relative;
}

.gallery__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2.4s ease-in-out;
}

.gallery__slide.is-active {
  opacity: 1;
}

.gallery__slide[hidden] {
  display: none;
}

.gallery__slide picture {
  display: contents;
}

.gallery__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* サムネイルはJSが動くときだけ出す（押しても何も起きない状態にしない） */
.gallery__thumbs {
  display: none;
}

.js .gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 12px var(--gutter) 0;
  list-style: none;
}

.gallery__thumb {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.gallery__thumb picture {
  display: contents;
}

.gallery__thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  opacity: .45;
  transition: opacity .6s ease;
}

.gallery__thumb[aria-current="true"] img {
  opacity: 1;
}

.gallery__bar {
  display: block;
  height: 2px;
}

.gallery__thumb[aria-current="true"] .gallery__bar {
  background: var(--accent);
}

/* ---------- SPACE: 素材（スマートフォンでは開閉式） ---------- */

.materials {
  padding-top: 48px;
}

.materials__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--rule);
}

.material {
  border-top: 1px solid var(--rule);
}

.material__heading {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--ink);
}

.material__name {
  display: block;
  padding: 18px 0;
}

.material__toggle {
  display: none;
}

.js .material__name {
  display: none;
}

.js .material__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.material__sign::before {
  content: "+";
  font-size: 1.25rem;
  line-height: 1;
  color: var(--muted);
}

.material__toggle[aria-expanded="true"] .material__sign::before {
  content: "−";
}

.material__panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 0 24px;
}

.material__panel[hidden],
.js .material__heading:has(.material__toggle[aria-expanded="false"]) + .material__panel {
  display: none;
}

.material__media {
  position: relative;
}

.material__media picture {
  display: contents;
}

/* 拡大のリンク（写真の上に重ねる）。スマホ版では出さず、写真は拡大しない（2026-10-05 運営者の指示）。PC は下の 64em 以上で出す */
.material__zoom {
  display: none;
}

.material__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--surface);
}

.coming-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule);
  background: var(--surface);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--muted);
}

.material__body {
  margin: 0;
  font-size: .875rem;
  line-height: 1.95;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ---------- SPACE: レイアウト図 ---------- */

.layout-figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
}

/* ---------- SPACE: 写真の拡大表示 ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-out;
}

.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox::backdrop {
  background: rgb(35 32 29 / .88);
}

html:has(.lightbox[open]) {
  overflow: hidden;
}

.lightbox {
  --lightbox-pad: 0px;
}

.lightbox__frame {
  --ratio: 4 / 3; /* JSが開く写真の比率に置き換える */
  position: relative;
  width: min(1040px, 100%, calc((100dvh - var(--lightbox-pad) * 2) * (var(--ratio))));
}

.lightbox__image picture {
  display: contents;
}

.lightbox__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio);
  object-fit: contain;
  background: var(--surface);
  cursor: default;
}

.lightbox__close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
}

/* ---------- PRICE: 料金表 ---------- */

.price-lead {
  padding: 0 var(--gutter);
}

.price-table {
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--rule);
}

.price-table__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.25rem 5.25rem; /* 84px（文字を大きくした閲覧者に合わせて広がる） */
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
}

.price-table__head {
  padding: 0 0 10px;
  border-top: 0;
}

.price-table__head span {
  font-size: .75rem;
  line-height: normal;
  text-align: right;
  color: var(--muted);
}

.price-table__row--first {
  border-top-color: var(--ink);
}

.price-table__plan {
  font-size: .875rem;
  line-height: normal;
  color: var(--ink);
}

.price-table__note {
  display: block;
  margin-top: 2px;
  font-size: .75rem;
  line-height: 1.8;
  color: var(--muted);
  text-wrap: pretty;
}

.price {
  line-height: 1.5;
  text-align: right;
}

.price__amount {
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  color: var(--ink);
}

.price__unit {
  margin-left: 4px;
  font-size: .75rem;
  color: var(--muted);
}

.price__tax {
  display: block;
  font-size: .75rem;
  line-height: 2; /* 24px。デザインでは改行後の行が金額の行の高さ（16px×1.5）を引き継ぐ */
  color: var(--muted);
}

.price-table__row--daily {
  grid-template-columns: minmax(0, 1fr) 7.5rem; /* 120px */
}

.price-table__flat {
  display: none;
}

/* ---------- PRICE: 流れ・キャンセル・注意事項 ---------- */

.terms {
  margin: 0 var(--gutter);
  padding: 34px 0;
  border-top: 1px solid var(--ink);
}

.lead--price + .terms {
  margin-top: 42px;
}

.terms__title {
  margin: 0 0 20px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--ink);
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 14px;
}

.step__marker {
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step__marker::after {
  content: "";
  flex: 1;
  width: 1px;
  min-height: 24px;
  margin: 6px 0;
  background: var(--rule-2);
}

.step:last-child .step__marker::after {
  display: none;
}

.step__num {
  padding: 4px 10px;
  border: 1px solid var(--rule-2);
  border-radius: 4px;
  font-size: .6875rem;
  line-height: normal;
  letter-spacing: .08em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.step__title {
  margin: 0 0 6px;
  padding-top: 2px;
  font-size: .9375rem;
  font-weight: 400;
  line-height: normal;
  color: var(--ink);
}

.step__body {
  margin: 0;
  padding-bottom: 24px;
  font-size: .8125rem;
  line-height: 1.9;
  color: var(--ink-2);
}

.step:last-child .step__body {
  padding-bottom: 0;
}

.terms-list {
  margin: 0;
  border-bottom: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}

.terms-list__row {
  border-top: 1px solid var(--rule);
}

.terms-list dd {
  margin: 0;
}

.terms-list--cancel .terms-list__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  font-size: .8125rem;
  line-height: 1.7;
}

.terms-list--cancel dt {
  color: var(--ink-2);
}

.terms-list--cancel dd {
  color: var(--ink);
}

.terms-list--notes .terms-list__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
}

.terms-list--notes dt {
  font-size: .8125rem;
  line-height: normal;
  color: var(--ink);
}

.terms-list--notes dd {
  font-size: .8125rem;
  line-height: 1.9;
  color: var(--ink-2);
}

.terms-list__line {
  display: block;
}

/* ---------- ACCESS: 地図 ---------- */

.map iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
}

.lead__facts {
  margin: 28px var(--gutter) 0;
}

.lead__link {
  display: none;
}

/* ---------- CONTACT: フォーム ---------- */

.lead--contact .lead__body {
  padding-top: 0;
}

.contact {
  padding: 40px var(--gutter) 0;
}

.contact-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.contact-form[hidden] {
  display: none;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field__label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: .75rem;
  line-height: normal;
  letter-spacing: .08em;
  color: var(--muted);
}

.field__req {
  font-size: .6875rem;
  color: var(--accent);
}

.field__input {
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 1rem; /* スマートフォンで16px未満にすると、入力時に画面が拡大される */
  line-height: normal;
  color: var(--ink);
  outline: none;
  transition: border-color .2s ease;
}

.field__input:focus {
  border-bottom-color: var(--accent);
}

.field__input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.field__select {
  appearance: none;
  cursor: pointer;
}

.field__textarea {
  min-height: calc(5 * 1.8em + 20px);
  line-height: 1.8;
  resize: vertical;
}

.field__count {
  display: none;
  align-self: flex-end;
  font-size: .6875rem;
  line-height: normal;
  letter-spacing: .04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.js .field__count {
  display: block;
}

.field__error {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.8;
  color: var(--accent);
}

.field__error[hidden] {
  display: none;
}

/* プライバシーポリシーへの同意（デザイン原本にない部品。入力欄の見出しと同じ色・字の大きさの系統で組む） */
.consent {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.consent__note {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.8;
  color: var(--ink-2);
}

.consent__link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}

.consent__link:hover {
  color: var(--accent);
}

.consent__label {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  min-height: 44px; /* 押せる範囲を指の大きさに合わせる */
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink);
  cursor: pointer;
}

.consent__label .field__req {
  margin-left: 8px;
}

.consent__input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--ink);
  cursor: pointer;
}

.contact-form__actions {
  display: flex;
  padding-top: 8px;
}

.contact-form__actions .button {
  width: 100%;
}

.contact-confirm {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-confirm[hidden] {
  display: none;
}

.contact-confirm__lead,
.contact-sent__text {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.95;
  color: var(--ink-2);
}

.contact-confirm__list {
  margin: 0;
  border-bottom: 1px solid var(--rule);
}

.contact-confirm__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
}

.contact-confirm__row dt {
  font-size: .75rem;
  line-height: normal;
  letter-spacing: .08em;
  color: var(--muted);
}

.contact-confirm__row dd {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.8;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.contact-confirm__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 8px;
}

/* 送信完了。JS では .is-shown、JS がないときは送信後に #sent へ戻ってきたとき（:target）に出す */
.contact-sent {
  display: none;
  flex-direction: column;
  gap: 20px;
  padding: 8px 0;
}

.contact-sent.is-shown,
html:not(.js) .contact-sent:target {
  display: flex;
}

html:not(.js) .contact:has(.contact-sent:target) .contact-form {
  display: none;
}

.contact-sent__title {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
}

.contact-sent__back {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px;
  font-size: .75rem;
  letter-spacing: .14em;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: .3em;
}

.contact-sent__back:hover {
  color: var(--ink);
}

.contact-tel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 40px var(--gutter) 0;
}

.contact-tel__label {
  font-size: .75rem;
  line-height: normal;
  letter-spacing: .08em;
  color: var(--muted);
}

.contact-tel__number {
  align-self: flex-start;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: color .25s ease;
}

.contact-tel__number:hover {
  color: var(--accent);
}

.contact-tel__hours {
  font-size: .75rem;
  line-height: 1.8;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- PRIVACY POLICY（デザイン原本にないページ。本文の書体・色は .prose と同じ） ---------- */

.policy {
  display: flex;
  flex-direction: column;
  gap: 40px;
  font-size: .9375rem;
  line-height: 1.95;
  color: var(--ink-2);
  text-wrap: pretty;
}

.policy p {
  margin: 0;
}

.policy__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.policy__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
}

.policy__subtitle {
  margin: 8px 0 0;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.8;
  color: var(--ink);
}

.policy__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding-left: 1.25em;
}

.policy__list li::marker {
  color: var(--muted);
}

.policy a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
  overflow-wrap: anywhere; /* 長いURLが390px幅ではみ出さないように */
}

.policy a:hover {
  color: var(--accent);
}

.policy__date {
  font-size: .8125rem;
  color: var(--muted);
}

/* 小さな文字のリンク（PRICE の下・CONTACT の本文の下の「特定商取引法に基づく表記」、404 の「トップページへ」） */
.legal-note {
  margin: 0;
}

.terms__body .legal-note {
  margin-top: 8px;
}

.legal-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* 押せる範囲を指の大きさに合わせる */
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}

.legal-link:hover {
  color: var(--ink);
}

/* 表記の一覧（.facts）の値の中に段落・箇条書きを置くとき */
.policy .facts dd > * + * {
  margin-top: 6px;
}

.policy .facts dd .policy__list {
  gap: 2px;
}

/* ---------- 下層ページ: 横向きのスマートフォン・タブレット ---------- */

@media (max-width: 63.99em) and (orientation: landscape) {
  .page .photo-frame {
    width: min(100%, calc((100dvh - 65px) * 4 / 3));
    margin-inline: auto;
  }

  .js .gallery__thumbs {
    width: min(100% - var(--gutter) * 2, calc((100dvh - 65px) * 4 / 3));
    margin-inline: auto;
    padding-inline: 0;
  }
}

/* ---------- 下層ページ: タブレット ---------- */

@media (min-width: 37.5em) {
  .page-title {
    padding-top: 40px;
    padding-bottom: 32px;
    font-size: clamp(2.375rem, 1.2rem + 3vw, 3.25rem);
  }
}

/* ---------- 下層ページ: PC ---------- */

@media (min-width: 64em) {
  .pc-only {
    display: inline;
  }

  .page main {
    container-type: inline-size;
    /* 内容の幅（最大1288px）。1画面目の右列の幅（--media-w）は TOP と同じく画面の高さと幅から決める */
    --content-w: min(calc(100cqw - var(--gutter) * 2), var(--content-max));
    --hero-h: max(560px, calc(100dvh - var(--header-h)));
    --media-w: min(864px, calc((var(--hero-h) - 163px) * 4 / 3), calc(var(--content-w) - 64px - 22.5rem));
  }

  .page--price main {
    --media-w: min(864px, calc(var(--content-w) - 64px - 12rem));
  }

  .page--contact main {
    --media-w: min(864px, calc(var(--content-w) - 64px - 22.5rem));
  }

  .page-title {
    grid-area: title;
    margin: 0 0 44px;
    padding: 0;
    font-size: 3.875rem;
  }

  .lead {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100dvh - var(--header-h));
    padding: 0 var(--gutter);
  }

  .lead__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--media-w);
    column-gap: 64px;
    width: var(--content-w);
    margin-inline: auto;
  }

  .lead__media {
    grid-area: media;
    align-self: start;
    width: var(--media-w);
  }

  .lead__body {
    grid-area: body;
    padding: 0;
  }

  .lead--about .lead__grid {
    grid-template-areas:
      "title media"
      "body  media";
    grid-template-rows: auto 1fr;
  }

  /* 404 ページ（見出し・案内文・トップページへのリンク） */
  .lead--404 .lead__grid {
    grid-template-areas:
      "title ."
      "body  .";
  }

  .block {
    width: var(--content-w);
    margin-inline: auto;
    padding: 96px 0 0;
  }

  .block--near {
    padding-top: 32px;
  }

  .block__title {
    margin-bottom: 24px;
    font-size: 1.5rem;
  }

  .facts__row {
    gap: 6px;
    padding: 18px 0 20px;
  }

  .facts dt {
    font-size: .75rem;
  }

  .facts dd {
    font-size: .9375rem;
  }

  .facts--3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 64px;
  }

  .facts__line {
    display: block;
  }

  .page .site-footer {
    margin-top: 64px;
  }

  .page .site-footer__inner {
    padding: 40px var(--gutter) 48px;
  }

  /* SPACE */
  .lead--space .lead__grid {
    grid-template-areas:
      "title  media"
      "body   media"
      "thumbs media";
    grid-template-rows: auto auto 1fr;
  }

  .js .gallery__thumbs {
    grid-area: thumbs;
    align-self: end;
    gap: 8px;
    max-width: 22.5rem;
    margin-top: 24px;
    padding: 0;
  }

  .gallery__thumb {
    gap: 6px;
  }

  .gallery__thumb:hover img {
    opacity: 1;
  }

  .materials {
    padding-top: 32px;
  }

  .materials__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 64px;
    border-bottom: 0;
  }

  .material {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    border-top: 0;
  }

  .material__heading {
    font-size: 1.25rem;
  }

  .material__name,
  .js .material__name {
    display: block;
    padding: 0;
  }

  .js .material__toggle {
    display: none;
  }

  /* PCでは開閉しない（JSが付けた hidden を無視して常に見せる） */
  .material__panel,
  .material__panel[hidden],
  .js .material__heading:has(.material__toggle[aria-expanded="false"]) + .material__panel {
    display: contents;
  }

  .material__media,
  .material .coming-soon {
    order: -1;
  }

  .material__zoom {
    position: absolute;
    inset: 0;
    display: block;
    cursor: zoom-in;
  }

  .material__media img {
    transition: opacity .3s ease;
  }

  .material__media:hover img {
    opacity: .85;
  }

  .material__body {
    margin-top: -10px;
  }

  .layout-figure {
    max-width: 1200px;
    margin: 24px auto 0;
  }

  .lightbox {
    --lightbox-pad: 16px;
  }

  .lightbox[open] {
    padding: 16px 96px;
  }

  /* PRICE */
  .lead--price .lead__grid {
    grid-template-areas: "title table";
  }

  .lead--price .page-title {
    align-self: start;
  }

  .price-lead {
    grid-area: table;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: min(648px, calc(var(--hero-h) - 163px));
    padding: 0;
  }

  /* 金額の列は、下の「ご利用の流れ」「キャンセルについて」「ご利用にあたって」の右側と同じ位置
     （左から 280px＋間隔24px）から始め、左揃えにする */
  .price-table__row {
    grid-template-columns: 280px repeat(2, minmax(min-content, 11.25rem)); /* 280px / 最大180px / 最大180px */
    justify-content: start;
    gap: 24px;
    padding: 16px 0;
  }

  .price-table__head span,
  .price,
  .price-table__flat {
    text-align: left;
  }

  .price-table__head {
    padding: 0 0 12px;
  }

  .price-table__plan {
    font-size: .9375rem;
  }

  .price__amount {
    font-size: 1.375rem;
  }

  .price-table__row--daily {
    grid-template-columns: 280px repeat(2, minmax(min-content, 11.25rem));
  }

  .price-table__flat {
    display: block;
    font-size: .75rem;
    color: var(--muted);
  }

  .terms {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--media-w);
    gap: 64px;
    align-items: start;
    width: var(--content-w);
    margin-inline: auto;
    padding: 72px 0;
  }

  .lead--price + .terms {
    margin-top: 0;
  }

  .terms__title {
    margin: 0;
    font-size: 1.0625rem;
  }

  .steps {
    border-bottom: 1px solid var(--rule);
  }

  .step {
    grid-template-columns: 56px 200px minmax(0, 1fr);
    grid-template-rows: auto;
    column-gap: 24px;
    align-items: baseline;
    padding: 18px 0;
    border-top: 1px solid var(--rule);
  }

  .step__marker {
    grid-row: auto;
    display: block;
    align-self: start;
  }

  .step__marker::after {
    display: none;
  }

  .step__num {
    display: block;
  }

  .step__title {
    margin: 0;
    padding: 0;
  }

  .step__body,
  .step:last-child .step__body {
    padding: 0;
    font-size: .875rem;
  }

  .terms-list--cancel .terms-list__row,
  .terms-list--notes .terms-list__row {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px;
    align-items: baseline;
    padding: 18px 0;
  }

  .terms-list--cancel .terms-list__row {
    font-size: .9375rem;
  }

  .terms-list--notes dt,
  .terms-list--notes dd {
    font-size: .875rem;
  }

  .page.page--price .site-footer {
    margin-top: 0;
  }

  /* ACCESS */
  .lead--access .lead__grid {
    grid-template-areas:
      "title media"
      "facts media"
      "link  media";
    grid-template-rows: auto auto 1fr;
  }

  .map {
    aspect-ratio: 4 / 3;
    background: var(--surface);
  }

  .map iframe {
    height: 100%;
    filter: grayscale(1);
    transition: filter .4s ease;
  }

  .map:hover iframe {
    filter: none;
  }

  .lead__facts {
    grid-area: facts;
    margin: 0;
  }

  .lead__link {
    grid-area: link;
    align-self: end;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 24px;
  }

  /* CONTACT（1画面目を縦に中央寄せしない。フォームの長さが変わるため） */
  .lead--contact {
    justify-content: flex-start;
    min-height: 0;
    padding-top: 81px;
  }

  .lead--contact .lead__grid {
    grid-template-areas:
      "title form"
      "body  form"
      "tel   form";
    grid-template-rows: auto auto 1fr;
    align-items: start;
  }

  .contact {
    grid-area: form;
    width: var(--media-w);
    padding: 0;
  }

  .contact-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 48px;
  }

  .field__input {
    font-size: .9375rem;
  }

  .field--wide,
  .consent,
  .contact-form__actions {
    grid-column: 1 / -1;
  }

  .field__textarea {
    min-height: 176px;
  }

  .contact-form__actions {
    justify-content: flex-end;
  }

  .contact-form__actions .button {
    width: auto;
  }

  .contact-confirm {
    gap: 24px;
  }

  .contact-confirm__row {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 24px;
    padding: 14px 0;
  }

  .contact-confirm__row dt {
    padding-top: 3px;
  }

  .contact-confirm__actions {
    flex-direction: row-reverse;
    justify-content: flex-start;
  }

  .contact-sent {
    padding: 0;
  }

  .contact-sent__title {
    font-size: 1.75rem;
  }

  .contact-tel {
    grid-area: tel;
    padding: 56px 0 0;
  }

  .contact-tel__number {
    font-size: 1.5rem;
  }

  /* PRIVACY POLICY・特定商取引法に基づく表記（CONTACT と同じく、左に見出し・右の列に本文。本文は読みやすい行の長さで止める） */
  .page--privacy main,
  .page--legal main {
    --media-w: min(864px, calc(var(--content-w) - 64px - 22.5rem));
  }

  .lead--policy {
    justify-content: flex-start;
    min-height: 0;
    padding-top: 81px;
  }

  .lead--policy .lead__grid {
    grid-template-areas: "title body";
    align-items: start;
  }

  .lead--policy .lead__body {
    max-width: 42em;
  }
}

/* ---------- 強制カラーモード ---------- */

@media (forced-colors: active) {
  .button--ink,
  .menu__close,
  .lightbox__close,
  .skip-link {
    outline: 1px solid transparent; /* 強制カラーモードでだけ線として見える */
    outline-offset: -1px;
  }

  .button--ink:focus-visible,
  .menu__close:focus-visible,
  .lightbox__close:focus-visible,
  .skip-link:focus-visible {
    outline: 2px solid;
    outline-offset: 3px;
  }

  .gallery__thumb[aria-current="true"] .gallery__bar {
    background: Highlight;
  }
}

/* ---------- 動きを減らす設定 ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
  }
}