@font-face { font-family: "IS"; src: url(fonts/is.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "IS"; src: url(fonts/isi.woff2) format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: "MR"; src: url(fonts/mr.woff2) format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "DM"; src: url(fonts/dm.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "ZO"; src: url(fonts/zo.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "NJ"; src: url(fonts/nj.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --ash: #e9e6e0; --paper: #f3f1ec; --line: #cfcac0;
  --ink: #1b1a17; --ink-2: #4f4c46;
  --gold: #a57a1f; --gold-t: #7d5a12; --gold-l: #d8b45c;
  --glaze: #1f2a26; --glaze-2: #2a3832; --on-glaze: #ece8df; --on-glaze-2: #b9b4a8;
  --disp: "IS", "Times New Roman", serif;
  --head: "IS", "ZO", serif;
  --body: "MR", "NJ", system-ui, sans-serif;
  --mono: "DM", ui-monospace, monospace;
  --gut: clamp(16px, 4vw, 56px);
  --idx: 232px;
}
:lang(ja) { --head: "ZO", serif; --body: "MR", "NJ", system-ui, sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ash); color: var(--ink); font: 400 17px/1.7 var(--body); font-feature-settings: "kern"; }
:lang(ja) body { font-size: 16px; line-height: 1.9; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; word-break: auto-phrase; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
main { overflow-x: clip; }

.proposal { background: var(--ink); color: var(--paper); font-size: 14px; text-align: center; padding: 6px var(--gut); line-height: 1.5; }
.label { font: 400 13px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-t); }
:lang(ja) .label { letter-spacing: .04em; }

/* ---------- ヘッダー（1段） ---------- */
.top { position: sticky; top: 0; z-index: 30; height: 56px; display: flex; align-items: center; gap: 20px; padding: 0 var(--gut); background: rgba(233, 230, 224, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; min-height: 44px; }
.mark-k { font: 700 15px/1 "ZO", serif; color: var(--paper); background: var(--ink); padding: 7px 6px; letter-spacing: .05em; border-bottom: 2px solid var(--gold); }
.mark-n { font: 400 22px/1 var(--disp); letter-spacing: .01em; }
.mark-n em { font-style: italic; color: var(--gold-t); }
.nav { display: flex; gap: 4px; }
.nav a, .top-cta { text-decoration: none; font-size: 15px; font-weight: 500; padding: 10px 12px; min-height: 44px; display: inline-flex; align-items: center; position: relative; }
.nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
.langs { display: flex; border: 1px solid var(--line); }
.lang { background: none; border: 0; padding: 0 10px; min-height: 36px; min-width: 40px; font: 400 13px var(--mono); cursor: pointer; color: var(--ink-2); }
.lang:hover { color: var(--ink); background: var(--paper); }
.lang[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.top-cta { background: var(--ink); color: var(--paper); border-radius: 2px; padding: 0 16px; transition: background .2s; }
.top-cta:hover { background: #3a372f; }
.menu-b { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; position: relative; }
.menu-b span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--ink); transition: transform .25s; }
.menu-b span:first-child { top: 17px; } .menu-b span:last-child { top: 26px; }
.menu-b[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.menu-b[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
.menu-b:hover span { background: var(--gold-t); }
.sheet { position: fixed; inset: 56px 0 auto 0; z-index: 29; background: var(--paper); border-bottom: 1px solid var(--line); padding: 8px var(--gut) 16px; }
.sheet a { display: flex; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 18px; min-height: 44px; }
.sheet a:hover span { color: var(--gold-t); }
.sheet b { font: 400 13px var(--mono); color: var(--gold-t); }

/* ---------- 左の目次 ---------- */
.frame { display: grid; grid-template-columns: var(--idx) minmax(0, 1fr); }
.index { position: sticky; top: 56px; height: calc(100vh - 56px); padding: 40px 0 28px 32px; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.seam { position: absolute; left: 32px; top: 46px; bottom: 120px; width: 2px; background: var(--line); }
.seam i { position: absolute; inset: 0; background: linear-gradient(var(--gold-l), var(--gold)); transform-origin: top; transform: scaleY(0); }
.index ol { list-style: none; margin: 0; padding: 0 0 0 22px; display: grid; gap: 4px; }
.index a { display: flex; gap: 12px; align-items: baseline; padding: 8px 12px 8px 0; text-decoration: none; color: var(--ink-2); min-height: 40px; transition: color .2s; }
.index a b { font: 400 13px var(--mono); color: var(--ink-2); width: 22px; }
.index a span { font-size: 15px; }
.index a:hover { color: var(--ink); }
.index a:hover span { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.index a.on { color: var(--ink); }
.index a.on b { color: var(--gold-t); }
.index a.on span { font-weight: 700; }
.index-foot { margin-top: auto; padding-left: 22px; font: 400 13px/1.6 var(--mono); color: var(--ink-2); }

/* ---------- 最初の画面 ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(32px, 5vw, 72px) var(--gut) clamp(40px, 5vw, 80px); min-height: calc(100vh - 56px - 33px); }
.display { font: 400 clamp(64px, 9.4vw, 150px)/.9 var(--disp); letter-spacing: -.02em; margin: 18px 0 26px; }
.display em { display: block; font-style: italic; color: var(--gold-t); }
:lang(ja) .display { font: 700 clamp(48px, 6.6vw, 104px)/1.12 "ZO", serif; letter-spacing: 0; }
:lang(ja) .display em { font-style: normal; }
.lead { font-weight: 300; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.6; max-width: 34em; color: var(--ink); }
.hero-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 32px 0 30px; }
.btn { display: inline-flex; align-items: center; gap: 14px; background: var(--ink); color: var(--paper); text-decoration: none; padding: 0 22px; min-height: 52px; border-radius: 2px; border: 0; cursor: pointer; font-weight: 600; font-size: 16px; position: relative; overflow: hidden; transition: background .2s; }
.btn i { width: 26px; height: 1.5px; background: var(--gold-l); position: relative; transition: width .3s; }
.btn i::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1.5px solid var(--gold-l); border-right: 1.5px solid var(--gold-l); transform: rotate(45deg); }
.btn:hover { background: #33302a; } .btn:hover i { width: 38px; }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn--ghost i { background: var(--gold); } .btn--ghost i::after { border-color: var(--gold); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.link { font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; text-decoration-thickness: 1.5px; min-height: 44px; display: inline-flex; align-items: center; transition: color .2s; }
.link:hover { color: var(--gold-t); }
.rating { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line); max-width: 30em; font-size: 15px; color: var(--ink-2); }
.rating > b { font: 400 54px/1 var(--disp); color: var(--ink); }
.rating .num { color: var(--ink); }

.mend { margin: 0; justify-self: center; width: min(100%, 520px); }
.mend-stage { position: relative; aspect-ratio: 1100 / 1476; max-height: calc(100vh - 230px); margin: 0 auto; overflow: hidden; border-radius: 2px; background: var(--ink); }
.mend-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.mend-stage img.on { opacity: 1; }
.mend-cap { position: absolute; left: 0; bottom: 0; background: var(--ink); color: var(--paper); font: 400 14px var(--mono); padding: 8px 14px; letter-spacing: .04em; }
.mend-ctl { position: relative; margin-top: 18px; }
#mend-r { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: grab; margin: 0; --p: 0%; }
#mend-r:active { cursor: grabbing; }
#mend-r::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--gold) var(--p), var(--line) var(--p)); }
#mend-r::-moz-range-track { height: 2px; background: var(--line); }
#mend-r::-moz-range-progress { height: 2px; background: var(--gold); }
#mend-r::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); box-shadow: 0 0 0 4px rgba(165, 122, 31, .18); transition: box-shadow .2s; }
#mend-r::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
#mend-r:hover::-webkit-slider-thumb { box-shadow: 0 0 0 8px rgba(165, 122, 31, .25); }
#mend-r:focus-visible { outline: none; }
#mend-r:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--gold); }
.mend-ticks { display: flex; justify-content: space-between; margin-top: -2px; }
.mend-ticks span { font: 400 13px var(--mono); color: var(--ink-2); cursor: pointer; padding: 4px 0; min-width: 32px; }
.mend-ticks span:nth-child(2) { text-align: center; } .mend-ticks span:last-child { text-align: right; }
.mend-ticks span.on { color: var(--gold-t); }
.mend-ticks span:hover { color: var(--ink); }
.mend figcaption { font-size: 14px; color: var(--ink-2); margin-top: 6px; }

/* ---------- 章 ---------- */
.ch { padding: clamp(56px, 7vw, 112px) var(--gut); border-top: 1px solid var(--line); }
.ch-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(16px, 2.4vw, 36px); margin-bottom: clamp(32px, 4vw, 56px); max-width: 1080px; position: relative; }
.ch-n { grid-row: span 2; font: 400 clamp(64px, 8vw, 120px)/.8 var(--disp); color: var(--gold); }
.ch-head h2 { font: 400 clamp(36px, 4.2vw, 58px)/1.05 var(--head); letter-spacing: -.01em; align-self: end; }
:lang(ja) .ch-head h2 { font-weight: 700; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.3; letter-spacing: .02em; }
.ch-lead { grid-column: 2; margin-top: 16px; font-weight: 300; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; max-width: 40em; }
.ch-head::after { content: ""; position: absolute; left: 0; bottom: -18px; height: 1px; width: 100%; background: var(--line); }
.ch--glaze { background: var(--glaze); color: var(--on-glaze); border-top: 0; }
.ch--glaze .ch-head::after { background: var(--glaze-2); }
.ch--glaze .ch-n { color: var(--gold-l); }
.ch--glaze .label { color: var(--gold-l); }

/* 時間表 */
.time { background: var(--paper); border: 1px solid var(--line); padding: clamp(16px, 2.4vw, 32px); margin-bottom: 40px; }
.time-tabs { display: inline-flex; border: 1px solid var(--ink); margin-bottom: 24px; flex-wrap: wrap; }
.time-tabs button { background: none; border: 0; padding: 10px 18px; text-align: left; cursor: pointer; min-height: 56px; display: grid; transition: background .2s; }
.time-tabs button b { font: 400 22px/1.15 var(--disp); }
:lang(ja) .time-tabs button b { font: 700 17px/1.4 "ZO", serif; }
.time-tabs button span { font-size: 14px; color: var(--ink-2); }
.time-tabs button:hover { background: var(--ash); }
.time-tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.time-tabs button[aria-selected="true"] span { color: var(--on-glaze-2); }
.time-grid { overflow-x: auto; }
.tg-row { display: grid; grid-template-columns: 210px minmax(440px, 1fr); align-items: center; gap: 12px; padding: 6px 0; }
.tg-name { font-size: 15px; font-weight: 600; line-height: 1.35; }
.tg-cells { display: grid; grid-template-columns: repeat(22, minmax(0, 1fr)); gap: 3px; }
.tg-cells i { height: 26px; background: rgba(0, 0, 0, .04); position: relative; }
.tg-days .tg-cells i { background: none; height: auto; font: 400 13px var(--mono); font-style: normal; color: var(--ink-2); white-space: nowrap; overflow: visible; }
.tg-cells i.c-l { background: var(--ink); }
.tg-cells i.c-d { background: repeating-linear-gradient(135deg, rgba(165, 122, 31, .5) 0 2px, transparent 2px 6px); }
.tg-cells i.c-h::after { content: ""; position: absolute; right: 4px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--gold-l); }
.tg-foot { margin-top: 14px; font-size: 15px; color: var(--ink-2); max-width: 46em; }
.time-key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; font: 400 13px var(--mono); color: var(--ink-2); }
.time-key span::before { content: ""; display: inline-block; width: 18px; height: 12px; margin-right: 8px; vertical-align: -1px; }
.k-l::before { background: var(--ink); }
.k-d::before { background: repeating-linear-gradient(135deg, rgba(165, 122, 31, .6) 0 2px, transparent 2px 6px); }
.k-h::before { background: radial-gradient(circle, var(--gold-l) 5px, transparent 5.5px); }

/* 教室カード */
.classes { display: grid; gap: 24px; }
.cl { background: var(--paper); border-left: 3px solid var(--gold); padding: clamp(20px, 3vw, 40px); display: grid; gap: 18px; }
.cl-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.cl h3 { font: 400 clamp(28px, 2.6vw, 38px)/1.1 var(--head); max-width: 18em; }
:lang(ja) .cl h3 { font-weight: 700; font-size: clamp(22px, 2vw, 28px); line-height: 1.4; }
.cl-price { display: flex; align-items: baseline; gap: 8px; }
.cl-price b { font: 800 clamp(40px, 4vw, 58px)/1 var(--body); letter-spacing: -.03em; }
.cl-price span { font-size: 14px; color: var(--ink-2); }
.cl-meta { display: flex; flex-wrap: wrap; gap: 8px 40px; margin: 0; }
.cl-meta div { display: grid; }
.cl-meta dt { font: 400 13px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--gold-t); }
.cl-meta dd { margin: 0; font-weight: 600; }
.cl-lead { max-width: 44em; }
.cl-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 28px; }
.cl ul { margin: 8px 0 0; padding: 0; list-style: none; }
.cl li { padding: 6px 0 6px 20px; position: relative; border-bottom: 1px solid var(--line); font-size: 16px; }
.cl li::before { content: ""; position: absolute; left: 0; top: 17px; width: 10px; height: 1.5px; background: var(--gold); }
.cl .notes li { color: var(--ink-2); font-size: 15px; }
.cities-b { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; border-radius: 2px; transition: background .2s, color .2s; }
.chip span { color: var(--gold-t); transition: transform .2s; }
.chip:hover { background: var(--ink); color: var(--paper); }
.chip:hover span { color: var(--gold-l); transform: translate(2px, -2px); }

/* 開催地 */
.cities { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.cities li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; padding: 22px 20px 22px 0; border-bottom: 1px solid var(--line); }
.cities li:first-child { grid-column: span 3; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; background: var(--paper); padding: 26px 24px; border-bottom: 1px solid var(--ink); }
.ci-n { font: 400 40px/1 var(--disp); color: var(--gold); grid-row: span 2; }
.cities li:first-child .ci-n { font-size: 72px; }
.cities h3 { font: 400 28px/1.1 var(--head); }
:lang(ja) .cities h3 { font-weight: 700; font-size: 22px; }
.cities li:first-child h3 { font-size: 44px; }
:lang(ja) .cities li:first-child h3 { font-size: 30px; }
.cities p { font-size: 15px; color: var(--ink-2); }
.ci-when { grid-column: 2; font: 400 13px var(--mono) !important; color: var(--gold-t) !important; text-transform: uppercase; letter-spacing: .06em; }
.cities li:first-child .ci-when { grid-column: 3; grid-row: 1 / span 2; font-size: 15px !important; background: var(--ink); color: var(--paper) !important; padding: 10px 14px; }
.cities-foot { margin-top: 22px; font-size: 16px; max-width: 46em; }
.cities-foot a { font-weight: 600; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.cities-foot a:hover { color: var(--gold-t); }

/* 口コミ */
.score { display: flex; align-items: flex-end; gap: 28px; margin-bottom: 36px; flex-wrap: wrap; }
.score-big { font: 400 clamp(110px, 14vw, 200px)/.8 var(--disp); color: var(--gold-l); }
.score-sub { font-size: 18px; color: var(--on-glaze); padding-bottom: 8px; }
.score-sub b { font: 400 40px/1 var(--disp); }
.score-sub small { font: 400 13px var(--mono); color: var(--on-glaze-2); }
.voices { list-style: none; margin: 0; padding: 0 0 8px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 30%); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--glaze-2) transparent; }
.voices li { scroll-snap-align: start; border-top: 2px solid var(--gold-l); padding-top: 18px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.voices blockquote { margin: 0; font: italic 400 clamp(21px, 1.7vw, 25px)/1.4 var(--disp); }
.voices .who { font: 400 13px var(--mono); color: var(--on-glaze-2); letter-spacing: .04em; }
.voices-nav { display: flex; align-items: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.vb { width: 48px; height: 48px; border: 1px solid var(--on-glaze-2); background: none; color: var(--on-glaze); cursor: pointer; border-radius: 2px; font-size: 18px; transition: background .2s, color .2s; }
.vb:hover { background: var(--on-glaze); color: var(--glaze); }
.link--light { margin-left: 14px; text-decoration-color: var(--gold-l); }
.link--light:hover { color: var(--gold-l); }

/* 作品とギフト */
.avail ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.avail a { display: grid; gap: 6px; text-decoration: none; }
.av-ph { display: block; aspect-ratio: 1; overflow: hidden; background: var(--ink); }
.av-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.avail a:hover img { transform: scale(1.04); }
.avail a:hover .av-n { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.av-n { font: 400 26px/1.15 var(--disp); margin-top: 8px; }
.av-m { font-size: 14px; color: var(--ink-2); }
.av-p { font-weight: 800; font-size: 18px; }
.gift-notes { display: flex; justify-content: space-between; align-items: center; gap: 24px 40px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.gift-notes p { max-width: 44em; color: var(--ink-2); font-size: 16px; }

/* 私たちについて */
.story { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.story-ph { margin: 0; position: sticky; top: 90px; }
.story-ph img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }
.story-ph figcaption { font: 400 13px var(--mono); color: var(--ink-2); margin-top: 8px; }
.years { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); border-top: 1px solid var(--ink); }
.years li { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.years b { font: 400 36px/1 var(--disp); color: var(--gold-t); }
.years li:last-child b { color: var(--ink); }
.years span { font-size: 14px; line-height: 1.45; }
.prose p { margin-bottom: 1.1em; max-width: 40em; }
.prose .quote { font: italic 400 clamp(22px, 2vw, 28px)/1.45 var(--disp); border-left: 2px solid var(--gold); padding-left: 22px; margin: 28px 0; }
:lang(ja) .prose .quote { font: 700 20px/1.8 "ZO", serif; }
.team { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.team .label { display: block; margin-bottom: 4px; }
.aside-note { margin-top: 12px; font-size: 15px; color: var(--ink-2); }

.history { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 24px clamp(24px, 4vw, 64px); margin-top: clamp(56px, 7vw, 96px); padding-top: 36px; border-top: 1px solid var(--ink); }
.history-year { font: 400 clamp(54px, 6vw, 92px)/.95 var(--disp); margin-top: 10px; }
.history-sub { font-size: 18px; color: var(--ink-2); }
.history-body p { margin-bottom: 1em; max-width: 40em; }
.history-more { color: var(--ink-2); font-size: 16px; }
.history-ph { grid-column: 1 / -1; display: grid; grid-template-columns: .7fr 1fr 1.3fr; gap: 16px; align-items: end; }
.history-ph figure { margin: 0; }
.history-ph img { width: 100%; object-fit: cover; }
.history-ph figcaption, .prize figcaption { font-size: 14px; color: var(--ink-2); margin-top: 8px; }

.media { margin-top: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.media-head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 20px; border-top: 1px solid var(--ink); padding-top: 18px; }
.media-head h3 { font: 400 clamp(30px, 3vw, 44px)/1.1 var(--head); }
:lang(ja) .media-head h3 { font-weight: 700; font-size: 26px; }
.tv { list-style: none; margin: 0; padding: 0; display: contents; }
.tv li { display: grid; gap: 4px; align-content: start; font-size: 15px; }
.tv img { aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 8px; }
.tv-w { font-weight: 700; }
.tv-d { font: 400 13px var(--mono); color: var(--gold-t); }
.prize { margin: 0; grid-column: 4; grid-row: 2; }
.prize img { aspect-ratio: 4 / 5; object-fit: cover; }
.press { list-style: none; margin: 0; padding: 0; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.press a { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 600; min-height: 44px; transition: color .2s, padding .2s; }
.press a span { color: var(--gold-t); }
.press a:hover { color: var(--gold-t); padding-left: 8px; }

/* 修理 */
.repair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); }
.status { display: inline-flex; align-items: center; gap: 10px; font: 400 15px var(--mono); border: 1px solid var(--on-glaze-2); padding: 10px 14px; margin-bottom: 20px; }
.status i { width: 10px; height: 10px; border-radius: 50%; background: #e08b6b; }
.repair-now p { max-width: 36em; margin-bottom: 1em; }
.jp-link a { color: var(--gold-l); text-underline-offset: 4px; }
.jp-link a:hover { color: var(--on-glaze); }
.repair-list ol { margin: 14px 0 18px; padding: 0; list-style: none; counter-reset: r; }
.repair-list li { counter-increment: r; display: grid; grid-template-columns: 44px 1fr; padding: 12px 0; border-bottom: 1px solid var(--glaze-2); }
.repair-list li::before { content: "0" counter(r); font: 400 22px/1.2 var(--disp); color: var(--gold-l); }
.repair-list .small { font-size: 15px; color: var(--on-glaze-2); }

/* お問い合わせ */
.visit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.facts { margin: 0; border-top: 1px solid var(--ink); }
.facts div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts dt { font: 400 13px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--gold-t); }
.facts dd { margin: 4px 0 0; }
.facts dd > a[href^="mailto"] { font: 400 26px/1.3 var(--disp); text-decoration-color: var(--gold); text-underline-offset: 5px; word-break: break-all; }
.facts dd > a[href^="mailto"]:hover { color: var(--gold-t); }
.ask { background: var(--paper); border: 1px solid var(--line); padding: clamp(20px, 3vw, 36px); display: grid; gap: 16px; }
.topics { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.topics legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.topics label { position: relative; }
.topics input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.topics span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); font-size: 15px; border-radius: 2px; transition: border-color .2s, background .2s; }
.topics label:hover span { border-color: var(--ink); }
.topics input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.topics input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.ask .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ask label > span { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.ask input:not([type=radio]), .ask textarea { width: 100%; font: inherit; font-size: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 2px; background: #fff; min-height: 48px; transition: border-color .2s; }
.ask input:not([type=radio]):hover, .ask textarea:hover { border-color: var(--ink-2); }
.ask input:focus, .ask textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(165, 122, 31, .25); }
.ask .btn { justify-self: start; }
.ask-note { font-size: 14px; color: var(--ink-2); }
.ask-note.show { color: var(--ink); font-weight: 600; }

.foot { padding: 56px var(--gut) 72px; background: var(--ink); color: var(--on-glaze-2); font-size: 15px; display: grid; gap: 6px; }
.foot-k { font: 700 64px/1 "ZO", serif; color: var(--gold-l); margin-bottom: 14px; }
.foot a { color: var(--on-glaze); text-underline-offset: 4px; }
.foot a:hover { color: var(--gold-l); }
.foot-note { margin-top: 10px; color: var(--on-glaze); }

/* ---------- 幅ごと ---------- */
@media (max-width: 1180px) {
  .nav { display: none; }
  .menu-b { display: block; }
  :root { --idx: 196px; }
}
@media (max-width: 1023px) {
  .frame { grid-template-columns: minmax(0, 1fr); }
  .index { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .mend { width: min(100%, 460px); justify-self: start; }
  .mend-stage { max-height: none; }
  .story, .history, .repair, .visit { grid-template-columns: minmax(0, 1fr); }
  .story-ph { position: static; max-width: 380px; }
  .media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prize { grid-column: auto; grid-row: auto; }
  .cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cities li:first-child { grid-column: span 2; }
  .voices { grid-auto-columns: minmax(280px, 46%); }
}
@media (max-width: 640px) {
  .top { gap: 8px; }
  .mark-n { font-size: 19px; }
  .mark-n em { display: none; }
  .top-cta { display: none; }
  .hero { padding-top: 24px; gap: 28px; }
  .display { margin: 12px 0 18px; }
  .mend { width: 100%; }
  .mend-stage { aspect-ratio: 4 / 4.2; }
  .cl-cols { grid-template-columns: minmax(0, 1fr); }
  .cities { grid-template-columns: minmax(0, 1fr); }
  .cities li:first-child { grid-column: auto; grid-template-columns: auto minmax(0, 1fr); }
  .cities li:first-child .ci-when { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
  .cities li:first-child h3 { font-size: 34px; }
  .avail ul { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
  .avail li:first-child { grid-column: span 2; }
  .av-n { font-size: 22px; }
  .voices { grid-auto-columns: 86%; }
  .link--light { margin-left: 0; }
  .media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
  .press { grid-template-columns: minmax(0, 1fr); }
  .history-ph { grid-template-columns: 1fr 1fr; }
  .history-ph figure:last-child { grid-column: span 2; }
  .ask .row { grid-template-columns: minmax(0, 1fr); }
  .tg-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tg-days { display: none; }
  .tg-cells { min-width: 0; }
  .tg-cells i { height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
:lang(ja) .display em { white-space: nowrap; }
.ask .topics label > span { display: inline-flex; margin: 0; font-weight: 400; font-size: 15px; }
.media-head .label { white-space: nowrap; }
.ask [aria-invalid="true"] { border-color: #a3392b !important; }
.ask-note.err { color: #a3392b; }
@media (max-width: 640px) {
  .hero { gap: 18px; padding-top: 16px; }
  .mend { order: -1; }
  .mend-stage { aspect-ratio: 4 / 3; max-height: 42vh; }
  .mend-ctl { margin-top: 6px; }
  .mend figcaption { margin-top: 0; }
  .hero-text .label { font-size: 13px; }
}
@media (max-width: 640px) {
  .time-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .time-tabs button { padding: 10px 12px; }
}
.cl-foot { margin-top: 20px; font-size: 15px; color: var(--ink-2); }
@media (max-width: 640px) { .time-tabs button span { line-height: 1.5; } }
:lang(ja) :is(.label, .cl-meta dt, .facts dt, .ci-when, .voices .who, .score-sub small, .mend-cap, .mend-ticks span, .index-foot, .tv-d, .time-key, .tg-days .tg-cells i, .index a b, .sheet b, .years span, .story-ph figcaption) { font-size: 14px !important; }