/* ---- Base ---- */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* ---- Main ---- */
/* SHIKII BI: 基本色 #0A0203 / サブカラー #BCA475 / 和文 明朝 / 欧文 Julius Sans One
     既存ページ「奥葉山の閾」の色・書体・余白を引き継ぐ。暗い地に写真を置く単一テーマ。 */
  :root {
    color-scheme: dark;
    --ink: #0A0203;
    --ink-2: #151011;
    --tan: #BCA475;
    --tan-dim: #8C7B58;
    --paper: #FFFFFF;
    --text: #E6E7E8;
    --text-mid: #A7A9AC;
    --text-faint: #7E8083;
    --rule: #2E2829;
    --rule-lit: #443A38;
    --mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    --roman: "Julius Sans One", "Optima", serif;
    --measure: 34rem;
    --wide: 62rem;
    --gutter: 1.25rem;
  }
  @media (min-width: 40rem) { :root { --gutter: 1.75rem; } }

  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    background: var(--ink);
    color: var(--text);
    font-family: var(--mincho);
    font-size: 16px;
    line-height: 2.05;
    -webkit-font-smoothing: antialiased;
    padding-bottom: 4.5rem;
  }
  .wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }
  .wide { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
  hr.rule { border: 0; height: 1px; background: var(--rule); margin: 0; }
  p { margin: 0 0 1.4rem; }
  p:last-child { margin-bottom: 0; }
  img { display: block; width: 100%; height: auto; }
  a { color: var(--tan); text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
  a:hover { color: var(--paper); }
  a:focus-visible, button:focus-visible { outline: 1px solid var(--tan); outline-offset: 4px; }
  .soft { color: var(--text-mid); }
  .small { font-size: 0.9rem; line-height: 1.95; }
  .flag {
    display: inline-block; border: 1px solid var(--tan-dim); color: var(--tan);
    font-family: var(--roman); font-size: 0.62rem; letter-spacing: 0.14em;
    line-height: 1.7; padding: 0.1em 0.55em; vertical-align: 0.15em; white-space: nowrap;
  }

  .topnote {
    text-align: center; padding: 0.7rem var(--gutter);
    font-size: 0.72rem; letter-spacing: 0.12em; color: var(--text-faint);
    border-bottom: 1px solid var(--rule);
  }
  .topnote a { color: var(--text-mid); }

  /* ---------- hero ---------- */
  .hero { padding: 1.75rem 0 3.5rem; }
  .hero .kicker {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.2rem;
    justify-content: center; margin: 0 0 1.3rem;
  }
  .hero .kicker .en { font-family: var(--roman); font-size: 0.74rem; letter-spacing: 0.32em; color: var(--tan); }
  .hero .kicker .ja { font-size: 0.8rem; letter-spacing: 0.2em; color: var(--text-mid); }
  .hero-photo { margin: 0 auto; max-width: var(--wide); padding: 0 var(--gutter); }
  .hero-photo .frame { border: 1px solid var(--rule-lit); padding: 0.4rem; }
  .hero-photo img { aspect-ratio: 3 / 2; object-fit: cover; max-width: 100%; }
  .hero-photo figcaption { margin-top: 0.7rem; font-size: 0.72rem; letter-spacing: 0.16em; color: var(--text-faint); }
  .hero-text { text-align: center; padding-top: 2.5rem; }
  h1 {
    font-weight: 600; font-size: clamp(1.45rem, 5.2vw, 2rem); line-height: 1.9;
    letter-spacing: 0.1em; color: var(--paper); margin: 0 0 1.1rem; text-wrap: balance;
  }
  .hero .sub {
    max-width: 28rem; margin: 0 auto 2rem; font-size: 1rem; line-height: 2.1;
    letter-spacing: 0.05em; color: var(--text-mid); text-wrap: balance;
  }
  .hero .members {
    max-width: 30rem; margin: 0 auto 2rem; padding: 1rem 1.1rem; border: 1px solid var(--tan-dim);
    font-size: 0.9rem; line-height: 2; letter-spacing: 0.05em; color: var(--text);
  }
  .cta-row { display: flex; flex-wrap: wrap; gap: 0.8rem 1.6rem; justify-content: center; align-items: center; }
  .btn {
    display: inline-block; padding: 0.9rem 1.8rem; border: 1px solid var(--tan);
    background: transparent; font-family: var(--mincho); font-size: 0.95rem;
    letter-spacing: 0.16em; color: var(--tan); text-decoration: none; cursor: pointer; line-height: 1.6;
  }
  .btn:hover { background: var(--tan); color: var(--ink); }
  .link-quiet { font-size: 0.88rem; letter-spacing: 0.1em; color: var(--text-mid); }

  /* ---------- quick facts ---------- */
  .facts {
    list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--rule-lit); border-left: 1px solid var(--rule);
  }
  @media (min-width: 46rem) { .facts { grid-template-columns: repeat(4, 1fr); } }
  .facts li { padding: 1.2rem 1rem 1.1rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .facts .k { display: block; font-size: 0.7rem; letter-spacing: 0.2em; color: var(--tan); margin-bottom: 0.35rem; }
  .facts .v { display: block; font-size: 1.02rem; font-weight: 600; letter-spacing: 0.06em; color: var(--paper); line-height: 1.7; font-variant-numeric: tabular-nums; }
  .facts .n { display: block; font-size: 0.76rem; color: var(--text-faint); line-height: 1.7; margin-top: 0.2rem; }

  /* ---------- sections ---------- */
  section { padding: 3.75rem 0; }
  .eyebrow { margin: 0 0 1.7rem; }
  .eyebrow .en { display: block; font-family: var(--roman); font-size: 0.76rem; letter-spacing: 0.34em; color: var(--tan); margin-bottom: 0.7rem; }
  .eyebrow .ja { display: block; font-size: 1.2rem; font-weight: 600; letter-spacing: 0.18em; color: var(--paper); }
  .lead { font-size: 1.04rem; line-height: 2.15; letter-spacing: 0.04em; color: var(--paper); }

  /* ---------- gallery rails (横スワイプ) ---------- */
  .group { margin: 2.75rem auto 0; }
  .group-hd {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem 0.9rem;
    margin: 0 0 1rem; border-top: 1px solid var(--tan-dim); padding-top: 0.9rem;
  }
  .group-hd h3 { margin: 0; font-size: 1.02rem; font-weight: 600; letter-spacing: 0.18em; color: var(--paper); }
  .group-hd .meta { font-size: 0.78rem; letter-spacing: 0.1em; color: var(--text-faint); }
  .group-hd .ctrl { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
  .group-hd .count {
    font-family: var(--roman); font-size: 0.72rem; letter-spacing: 0.1em;
    color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .arrow {
    display: none; width: 2rem; height: 2rem; padding: 0; cursor: pointer;
    background: transparent; border: 1px solid var(--rule-lit); color: var(--tan);
    font-size: 1rem; line-height: 1; align-items: center; justify-content: center;
  }
  .arrow:hover { border-color: var(--tan); color: var(--paper); }
  .arrow[disabled] { opacity: 0.3; cursor: default; }
  .arrow[disabled]:hover { border-color: var(--rule-lit); color: var(--tan); }
  @media (min-width: 56rem) { .arrow { display: inline-flex; } }

  .rail {
    display: flex; align-items: flex-start; gap: 1.1rem;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 0.3rem;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail:focus-visible { outline: 1px solid var(--tan); outline-offset: 3px; }
  .rail > figure { flex: 0 0 84%; scroll-snap-align: start; margin: 0; }
  @media (min-width: 40rem) { .rail > figure { flex: 0 0 45%; } }
  @media (min-width: 62rem) { .rail > figure { flex: 0 0 31%; } }
  .rail .frame { border: 1px solid var(--rule-lit); padding: 0.35rem; }
  .rail img { aspect-ratio: 3 / 2; object-fit: cover; }
  figcaption { margin-top: 0.6rem; font-size: 0.85rem; line-height: 1.85; color: var(--text-mid); }
  .swipe-hint {
    margin: 0.7rem 0 0; font-size: 0.74rem; letter-spacing: 0.14em; color: var(--text-faint);
  }
  @media (min-width: 56rem) { .swipe-hint { display: none; } }

  /* ---------- full-width break ---------- */
  .break { margin: 0; }
  .break img { aspect-ratio: 3 / 1; object-fit: cover; }
  @media (max-width: 40rem) { .break img { aspect-ratio: 3 / 2; } }
  .break figcaption { max-width: var(--wide); margin: 0.6rem auto 0; padding: 0 var(--gutter); font-size: 0.78rem; letter-spacing: 0.12em; color: var(--text-faint); }

  /* ---------- rooms table ---------- */
  .rooms { margin: 2.4rem auto 0; }
  .rooms table { width: 100%; border-collapse: collapse; font-size: 0.88rem; line-height: 1.8; }
  .rooms th, .rooms td { text-align: left; padding: 0.6rem 0.4rem; border-top: 1px solid var(--rule); vertical-align: top; }
  .rooms th { color: var(--tan); font-weight: 500; letter-spacing: 0.1em; white-space: nowrap; width: 9rem; }
  .rooms td { color: var(--text); }
  .rooms tr:first-child th, .rooms tr:first-child td { border-top: 1px solid var(--rule-lit); }
  .rooms tr:last-child th, .rooms tr:last-child td { border-bottom: 1px solid var(--rule-lit); }

  /* ---------- uses ---------- */
  .uses { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
  .uses li { padding-left: 1.2rem; border-left: 1px solid var(--tan-dim); }
  .uses h3 { margin: 0 0 0.3rem; font-size: 1.02rem; font-weight: 600; letter-spacing: 0.14em; color: var(--paper); }
  .uses p { font-size: 0.92rem; line-height: 1.95; color: var(--text-mid); margin: 0; }
  .note-box { margin: 2.3rem 0 0; padding: 1rem 1.2rem; border: 1px solid var(--rule-lit); font-size: 0.86rem; line-height: 1.9; color: var(--text-mid); }
  .note-box strong { color: var(--tan); font-weight: 500; }
  .day { display: grid; margin: 1.5rem 0 0; padding: 0; list-style: none; }
  .day li { display: grid; grid-template-columns: 5.2rem 1fr; gap: 0 1.2rem; padding: 1rem 0; border-top: 1px solid var(--rule); align-items: baseline; }
  .day li:first-child { border-top: 1px solid var(--rule-lit); }
  .day li:last-child { border-bottom: 1px solid var(--rule-lit); }
  .day .clock { font-family: var(--roman); font-size: 0.76rem; letter-spacing: 0.1em; color: var(--tan); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .day .stage { font-size: 0.98rem; font-weight: 600; letter-spacing: 0.12em; color: var(--paper); margin: 0 0 0.15rem; }
  .day .note { font-size: 0.86rem; line-height: 1.9; color: var(--text-mid); margin: 0; }
  @media (max-width: 30rem) { .day li { grid-template-columns: 1fr; gap: 0.3rem; } }

  /* ---------- price ---------- */
  .price-main { border-top: 1px solid var(--tan-dim); border-bottom: 1px solid var(--rule-lit); padding: 1.8rem 0 1.6rem; margin: 0 0 2rem; }
  .price-main .cond { font-size: 0.8rem; letter-spacing: 0.16em; color: var(--tan); margin: 0 0 0.4rem; }
  .price-main .total { font-size: clamp(2rem, 8vw, 2.6rem); font-weight: 600; letter-spacing: 0.04em; color: var(--paper); line-height: 1.3; margin: 0 0 0.9rem; font-variant-numeric: tabular-nums; }
  .price-main .total small { font-size: 0.95rem; letter-spacing: 0.1em; color: var(--text-mid); margin-left: 0.4rem; font-weight: 400; }
  .lines { margin: 0; padding: 0; list-style: none; }
  .lines li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 0.5rem 0; border-top: 1px solid var(--rule); font-size: 0.92rem; }
  .lines li:first-child { border-top: 0; }
  .lines .amt { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--paper); }
  .lines .sum { font-weight: 600; color: var(--paper); }
  .lines .sum .amt { color: var(--tan); }
  .price-sub { padding: 1.2rem 0 0; }
  .price-sub h3 { font-size: 0.98rem; font-weight: 600; letter-spacing: 0.14em; color: var(--paper); margin: 0 0 0.6rem; }
  .price-sub .lines li { font-size: 0.88rem; }
  .member { margin-top: 2.2rem; padding: 1.2rem 1.2rem 1.1rem; border: 1px solid var(--rule-lit); background: var(--ink-2); }
  .member h3 { font-size: 0.82rem; font-weight: 500; letter-spacing: 0.18em; color: var(--tan); margin: 0 0 0.6rem; }
  .member .lines li { font-size: 0.86rem; color: var(--text-mid); }
  .member .lines .amt { color: var(--text); }
  .excl { margin: 2rem 0 0; font-size: 0.88rem; line-height: 1.95; color: var(--text-mid); }
  .excl strong { color: var(--paper); font-weight: 500; }

  /* ---------- terms ---------- */
  .terms { margin: 0; display: grid; }
  .terms > div { display: grid; grid-template-columns: 1fr; gap: 0.15rem 1rem; padding: 1rem 0; border-top: 1px solid var(--rule); }
  @media (min-width: 30rem) { .terms > div { grid-template-columns: 8.5rem 1fr; } }
  .terms > div:first-child { border-top: 1px solid var(--rule-lit); }
  .terms > div:last-child { border-bottom: 1px solid var(--rule-lit); }
  .terms dt { color: var(--tan); font-size: 0.86rem; letter-spacing: 0.14em; line-height: 1.9; }
  .terms dd { margin: 0; font-size: 0.92rem; line-height: 1.95; color: var(--text); }
  .terms dd .soft { display: block; font-size: 0.82rem; }
  .terms ul { margin: 0.2rem 0 0; padding-left: 1.1rem; }
  .terms li { font-size: 0.88rem; color: var(--text-mid); line-height: 1.9; }

  /* ---------- contact ---------- */
  .contact-hd { text-align: center; }
  .contact-hd .eyebrow .ja { font-size: 1.3rem; }
  .steps { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
  .steps li { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.6rem; font-size: 0.94rem; line-height: 1.95; }
  .steps .num { font-family: var(--roman); font-size: 0.8rem; color: var(--tan); letter-spacing: 0.1em; padding-top: 0.35rem; }
  .steps strong { color: var(--paper); font-weight: 600; }
  .memo { margin: 1.8rem 0 0; border: 1px solid var(--rule-lit); background: var(--ink-2); }
  .memo header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--rule); font-size: 0.78rem; letter-spacing: 0.16em; color: var(--tan); }
  .memo textarea {
    display: block; width: 100%; box-sizing: border-box; min-height: 13.5rem; margin: 0; padding: 1rem;
    border: 0; resize: vertical; background: transparent; color: var(--text);
    font-family: var(--mincho); font-size: 0.92rem; line-height: 1.95;
  }
  .memo textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--tan-dim); }
  .copy { background: transparent; border: 1px solid var(--tan-dim); color: var(--tan); font-family: var(--mincho); font-size: 0.78rem; letter-spacing: 0.12em; padding: 0.3rem 0.8rem; cursor: pointer; white-space: nowrap; }
  .copy:hover { border-color: var(--tan); color: var(--paper); }
  .options { margin: 2rem 0 0; }
  .options h3 { font-size: 0.96rem; font-weight: 600; letter-spacing: 0.14em; color: var(--paper); margin: 0 0 0.5rem; }
  .options p { font-size: 0.9rem; color: var(--text-mid); }
  .draft-note { margin: 2rem 0 0; padding: 0.9rem 1.1rem; border: 1px dashed var(--tan-dim); font-size: 0.84rem; line-height: 1.9; color: var(--text-mid); }

  .choices { display: grid; grid-template-columns: 1fr; gap: 0.9rem; margin: 1.3rem 0 0; }
  @media (min-width: 34rem) { .choices { grid-template-columns: 1fr 1fr; } }
  .choice { border: 1px solid var(--tan-dim); padding: 1.2rem 1.2rem 1.1rem; }
  .choice .t { display: block; font-size: 0.98rem; font-weight: 600; letter-spacing: 0.12em; color: var(--tan); margin-bottom: 0.4rem; }
  .choice .d { display: block; font-size: 0.84rem; line-height: 1.9; color: var(--text-mid); }

  .eat-hd { margin: 2.6rem 0 0.5rem; font-size: 1.02rem; font-weight: 600; letter-spacing: 0.16em; color: var(--paper); }
  footer { padding: 3rem 0; text-align: center; }
  footer .tail { width: 2.5rem; height: 1px; background: var(--tan-dim); margin: 0 auto 1.6rem; }
  footer p { margin: 0 0 0.4rem; font-size: 0.74rem; letter-spacing: 0.16em; line-height: 2.1; color: var(--text-faint); }
  footer .en { font-family: var(--roman); letter-spacing: 0.3em; color: var(--text-mid); }

  .sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
    background: rgba(10, 2, 3, 0.93); border-top: 1px solid var(--rule-lit);
    padding: 0.6rem var(--gutter); padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
    display: flex; justify-content: center; align-items: center; gap: 1rem;
    transform: translateY(110%); transition: transform 0.3s ease;
  }
  .sticky.on { transform: none; }
  .sticky .btn { padding: 0.65rem 1.4rem; font-size: 0.88rem; }
  .sticky .hint { font-size: 0.74rem; letter-spacing: 0.1em; color: var(--text-faint); }
  @media (max-width: 32rem) { .sticky .hint { display: none; } }
  @media (prefers-reduced-motion: reduce) { .sticky { transition: none; } }