@charset "utf-8";

:root {
  --mc: #B08A3E;
  --sc: #23395B;
  --ac: #C2452D;
  --bc: #F4F0E6;
  --tx: #1E1E1E;
  --gr: #D6CFBF;
  --wh: #FFFFFF;
  --bk: #1A1A1A;
  --tx60: #1E1E1E99;
  --bc60: #F4F0E699;
  --bc30: #F4F0E64D;
  --bc90: #F4F0E6E6;
  --h1FZ: clamp(3rem, 5vw, 6rem);
  --h2FZ: clamp(1.875rem, 3vw, 3.5rem);
  --h3FZ: clamp(1.5rem, 1.5vw, 1.75rem);
  --PFZ: 1.25rem;
  --btnFZ: 1rem;
  --bodyFZ: 1rem;
  --emFZ: 10rem;
  --gap: clamp(1.5rem, 1.667vw, 2rem);
  --gutter: clamp(1.5rem, 6.25vw, 7.5rem);
  /* ヘッダーはナビの間隔が詰まる幅からコンテンツの余白に合わせず、1remまで縮める */
  --hGutter: clamp(1rem, 50vw - 34.25rem, var(--gutter));
  --rad: 8px;
  --bdw: 1px;
  --trans: .6s cubic-bezier(.25, 1, .5, 1);
  --metal-stops: #49391F, #FFF0CB 8%, #8C7044 20%, #E8D3A0 34%, #66502D 44%, #FFF5D9 49%, #A4844C 55%, #E3CA91 73%, #58452C 87%, #E8DAB4;
  --metal-edge: linear-gradient(135deg, var(--metal-stops));

  --Ser: "Zen Old Mincho", serif;
  --Eng: "Plus Jakarta Sans", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
html { scroll-behavior: smooth; scroll-padding-top: 10rem; }
html.lenis { scroll-behavior: auto; }
body {
  background: var(--bc);
  color: var(--tx);
  font-family: var(--Ser);
  font-size: var(--bodyFZ);
  line-height: 1.5;
  overflow-x: clip;
}
h1 { font-size: var(--h1FZ); font-weight: 600; line-height: 1.5; }
h2 { font-size: var(--h2FZ); font-weight: 600; line-height: 1.5; }
h3 { font-size: var(--h3FZ); font-weight: 600; }

.en, .fig, .sub, dt, .num, .logo_en, .mv .spec, .callout b, .cards .name span, .steps .name span, .f_copy { font-family: var(--Eng); font-weight: 700; letter-spacing: .075em; }
.en, .mv_it .sub, .cards .name span, .steps .name span, .callout.is-active b { color: var(--mc); text-shadow: 0 -.5px 0 #FFF0CB99, 0 .5px .5px #49391F80; }

section { position: relative; padding: 8% var(--gutter); }
:where(section, .head, .cards, .steps, .f_main) > * { min-width: 0; }
:where(p, dd, dt) { overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid var(--mc); outline-offset: 4px; }
.page { position: relative; }
/* 動きを減らす設定では、個別に止めていない遷移・アニメーションも即座に終わらせる */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; }
}

/* セクションの背景だけを、スクロール位置に合わせてディゾルブする */
.section-dissolve { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.has-section-dissolve .page > :is(section, footer) { background: transparent; }
.has-section-dissolve .page > footer { position: relative; }

/* 写真の表示窓と、縁から内側へぼける金色の陰影 */
.photo-reveal { position: relative; overflow: clip; isolation: isolate; --photo-inset: 1rem; }
.photo-reveal > img, .photo-reveal__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.photo-reveal.is-reveal-pending > img { opacity: 0; }
.photo-reveal__canvas { z-index: 1; pointer-events: none; }
.photo-reveal::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; background: var(--metal-edge); opacity: 0; transition: opacity var(--photo-shadow-duration, 400ms) linear; box-shadow: inset 0 1px 2px #FFF5D9CC, inset 0 -3px 8px #49391FB3; mask-image: linear-gradient(90deg, #000, transparent var(--photo-inset), transparent calc(100% - var(--photo-inset)), #000), linear-gradient(0deg, #000, transparent var(--photo-inset), transparent calc(100% - var(--photo-inset)), #000); mask-composite: add; }
.photo-reveal:is(.is-reveal-finishing, .is-reveal-complete)::after { opacity: .5; }
.photos :is(.tools, .loupe)::after { mask-image: radial-gradient(closest-side, transparent calc(100% - var(--photo-inset)), #000); }

/* loading */
.loading-screen { display: none; position: fixed; inset: 0; z-index: 1000; place-items: center; background: var(--bc); color: var(--sc); opacity: 1; transition: opacity .22s linear; }
html.is-loading, html.is-loading body { overflow: hidden; }
.is-loading .loading-screen { display: grid; }
.is-loading .page *, .is-loading .page *::before, .is-loading .page *::after { animation-play-state: paused !important; }
.loading-screen.is-leaving { opacity: 0; pointer-events: none; }
.loading-screen__number { display: flex; align-items: center; gap: 0; font-family: var(--Ser); font-size: clamp(64px, 8vw, 120px); font-weight: 400; font-style: italic; font-variant-numeric: tabular-nums; }
.loading-screen__mask { flex: 0 0 auto; width: 1em; height: 1.15em; margin-inline: -.14em; overflow: clip; transition: width .18s linear, margin .18s linear; }
.loading-screen__mask.is-empty { width: 0; margin-inline: 0; }
.loading-screen__percent { margin-left: .025em; font-size: .55em; line-height: 1; }
.loading-screen__reel { will-change: transform; }
.loading-screen__face { height: 1.15em; line-height: 1.15; text-align: center; }
@media (prefers-reduced-motion: reduce) {
.loading-screen, .loading-screen__mask { transition: none; }
}

/* canvas で動かす要素。位置と大きさは、デザインの座標（px）を親の幅に対する割合にして置く */
.canvas { position: absolute; pointer-events: none; }
.canvas canvas, .canvas img { width: 100%; height: 100%; }

.btn {
  display: inline-flex; align-items: center; gap: .625rem;
  border-radius: 999px;
  font-size: var(--btnFZ); font-weight: 600;
  transition: var(--trans);
}
.btn:hover { opacity: .8; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--gap); }
.head .ttl { flex: 1 1 25rem; display: flex; flex-direction: column; gap: 1.5rem; }
.head .lead { flex: 1 1 20rem; max-width: 35rem; line-height: 2.125; }
.head { margin-bottom: 3%; }

.rows > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; }
.rows dt, .rows dd { min-width: 0; }
.rows dd { font-weight: 600; }
:is(.rows > div, .mv .spec > div) { position: relative; border-top: var(--bdw) solid transparent; }
:is(.rows > div, .mv .spec > div)::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--bdw)); height: var(--bdw); background: var(--metal-edge); background-size: calc(100% + var(--line-span, 0px)) 100%; background-position: calc(var(--line-shift, 0px) - var(--line-span, 0px)) 0; background-repeat: no-repeat; pointer-events: none; }
.line-reveal::before { transform: scaleX(0); transform-origin: left; transition: transform .6s linear; }
.line-reveal.is-line-drawn::before { transform: scaleX(1); }
.list-text-reveal > :is(.name, .body) { clip-path: inset(0 0 100% 0); transform: translateY(-.75em); transition: clip-path .5s ease-out, transform .5s ease-out; }
.list-text-reveal.is-text-shown > :is(.name, .body) { clip-path: inset(0); transform: translateY(0); }
.list-text__char { display: inline-block; overflow: clip; vertical-align: top; white-space: pre; }
.list-text__glyph { display: block; transform: translateY(-110%); }
.list-text-reveal.is-text-shown > :is(dt, dd) .list-text__glyph { animation: list-char-enter .45s cubic-bezier(.2, .7, .2, 1) calc(var(--char-index) * 40ms) both; }
@keyframes list-char-enter { from { transform: translateY(-110%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
.line-reveal::before { transform: none; transition: none; }
.list-text-reveal > :is(.name, .body), .list-text__glyph { clip-path: none; transform: none; transition: none; }
.list-text-reveal.is-text-shown > :is(dt, dd) .list-text__glyph { animation: none; }
}

/* header */
#header { position: fixed; inset-inline: 0; top: 0; height: 140px; z-index: 100; color: var(--bc); mix-blend-mode: difference; transition: var(--trans); }
#header.is-scrolled { background: transparent; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.h_inner { position: relative; height: 100%; display: flex; justify-content: space-between; align-items: flex-start; padding: var(--gap) var(--hGutter) 0; }
.h_logo { display: flex; flex-direction: column; gap: .25rem; margin-top: .25rem; }
.logo_ja { font-size: 2rem; font-weight: 700; letter-spacing: .25em; line-height: 1.5; }
.ruler { height: 40px; }
.h_inner > .ruler { position: absolute; inset-inline: var(--hGutter); bottom: 0; }
.ruler svg { display: block; width: 100%; height: 100%; }
/* 目盛りの II・IV・VI・VIII・X（12等分の偶数の位置）にナビを置く */
.h_nav { position: fixed; z-index: 101; color: var(--bc); mix-blend-mode: difference; pointer-events: none; inset-inline: var(--hGutter); top: 46px; display: flex; }
.h_nav a { pointer-events: auto; flex: 0 0 calc(100% / 6); display: flex; flex-direction: column; align-items: center; gap: .125rem; }
.h_nav a:first-child { margin-left: calc(100% / 12); }
.h_nav .label { font-weight: 600; }
.hand { position: absolute; bottom: -5px; left: 0; width: 10px; height: 28px; transition: var(--trans); }
.hand::before { content: ""; position: absolute; bottom: 0; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--ac); }
.hand::after { content: ""; position: absolute; top: 0; left: 3px; width: 4px; height: calc(100% - 10px); background: var(--ac); }
.h_items { position: relative; z-index: 1; }
.h_items .btn { padding: 1rem var(--gap); background: var(--sc); color: var(--wh); }
/* ナビは目盛りの位置に固定のため、狭くなるほどロゴの英字と予約ボタンを縮めて間をあける */
@media (max-width: 1840px) {
  .h_logo .logo_en { font-size: .875rem; }
}
@media (max-width: 1640px) {
  .h_logo .logo_en { font-size: .75rem; }
  .h_items .btn { padding: .75rem 1.5rem; font-size: .875rem; }
}
@media (max-width: 1440px) {
  .h_logo .logo_en { font-size: .625rem; }
  .h_items .btn { padding-inline: 1rem; gap: .5rem; }
  .h_items .btn svg { width: 16px; height: 16px; }
}

/* mv */
.mv { aspect-ratio: 1920 / 1240; padding: 0; background: url(../images/canvas/grid.webp) 0 0 / 100% auto; }
.mv_it { position: absolute; left: var(--gutter); top: calc(300 / 1240 * 100%); width: 34%; max-width: 38.75rem; display: flex; flex-direction: column; gap: var(--gap); }
.mv_it .fig { color: var(--tx60); }
.slot-title__char { position: relative; display: inline-block; width: 1em; height: 1em; margin-block: .25em; line-height: 1; overflow: clip; vertical-align: top; }
.slot-title__char::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid; border-image: var(--metal-edge) 1; box-shadow: inset 0 1px 0 #FFFFFF59, inset 0 -1px 0 #00000040; opacity: 0; }
.slot-title__reel { display: block; transform: translateY(-75%); }
.slot-title__reel > span { display: block; height: 1em; overflow: clip; }
.slot-title.is-slot-complete .slot-title__reel { transform: none; }
.slot-title.is-slot-complete .slot-title__reel > span:not(:last-child) { display: none; }
.slot-title.is-slot-ready .slot-title__reel { transform: translateY(0); }
.slot-title.is-slot-playing .slot-title__reel { animation: slot-title-roll .7s cubic-bezier(.22, .7, .25, 1) calc(var(--i) * 65ms) both; }
.slot-title.is-slot-playing .slot-title__char::after { animation: slot-title-frame .7s linear calc(var(--i) * 65ms) forwards; }
@keyframes slot-title-roll { from { transform: translateY(0); } to { transform: translateY(var(--slot-end, -75%)); } }
@keyframes slot-title-frame { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .slot-title.is-slot-ready .slot-title__reel { transform: translateY(-75%); }
  .slot-title.is-slot-playing .slot-title__reel, .slot-title.is-slot-playing .slot-title__char::after { animation: none; }
}
.mv .spec { padding-top: 1rem; }
.mv .spec > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; padding-block: .75rem; }
.mv .spec dt { color: var(--tx60); }
/* PCの時計は設計図の背景へ重ね、小画面ではMV内で折り返す。 */
.mv_art { position: absolute; left: calc(840 / 1920 * 100%); top: 0; margin-top: calc(170 / 1920 * 100%); width: calc(1000 / 1920 * 100%); aspect-ratio: 1000 / 1287; pointer-events: none; }
.canvas.watch { z-index: 2; inset: 0; width: 100%; height: 100%; }
/* 白い線に difference をかけ、生成りの地では暗く、はみ出した紺の地では明るく見せる */
.canvas.watch.__lines { mix-blend-mode: difference; }

/* blueprint */
.blueprint { display: flex; flex-direction: column; gap: var(--gap); background: var(--sc) url(../images/canvas/grid-blue.webp) 0 0 / 100% auto no-repeat; color: var(--bc); overflow: clip; }
.sheet { position: relative; display: flex; aspect-ratio: 1680 / 1080; gap: var(--gap) calc(200 / 1520 * 100%); padding: calc(80 / 1680 * 100%); border: var(--bdw) solid var(--bc); }
.blueprint-figure { position: relative; flex: 1; min-width: 0; align-self: flex-start; aspect-ratio: 700 / 901; }
.blueprint-details { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--gap); }
.sheet::before { content: ""; position: absolute; inset: 1rem; border: var(--bdw) solid var(--bc); pointer-events: none; }
.canvas.drawing { inset: 0; width: 100%; height: 100%; }
.callout { position: absolute; left: calc((var(--x) - 80) / 700 * 100%); top: calc((var(--y) - 80) / 901 * 100%); width: calc(var(--w) / 700 * 100% + 8px); height: 8px; }
.callout::before { content: ""; position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--mc); transition: var(--trans); }
.callout::after { content: ""; position: absolute; left: 4px; right: 4px; top: 4px; height: 1px; background: var(--bc); transform: scaleX(0); transform-origin: right; transition: transform .6s linear; }
.callout.is-drawn::after { transform: scaleX(1); }
.callout b { position: absolute; left: calc(100% + 4px); top: -6px; transform-origin: left center; transition: transform .2s ease-out, color .2s; }
.callout.__top { width: 8px; height: calc(var(--w) / 901 * 100% + 8px); translate: 0 calc(-100% + 8px); }
.callout.__top::before { top: auto; bottom: 0; }
.callout.__top::after { right: auto; bottom: 4px; width: 1px; height: auto; transform: scaleY(0); transform-origin: top; }
.callout.__top.is-drawn::after { transform: scaleY(1); }
.callout.__top b { left: 50%; top: auto; bottom: calc(100% + 8px); translate: -50% 0; transform-origin: center bottom; }
.callout.is-active::before { z-index: 1; scale: 2; background: radial-gradient(circle at 31% 31%, #FFD2BE 0%, #E87855 28%, var(--ac) 62%, #591C16 100%); box-shadow: .5px 1px 1.5px #2319143D; }
.callout.is-active b { transform: scale(1.45); }
.callout.is-active::after { height: 2px; background: var(--metal-edge); }
.callout.is-drawn.is-active::after { animation: callout-line .45s linear both; }
.callout.__top.is-active::after { width: 2px; height: auto; animation-name: callout-line-vertical; }
@keyframes callout-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes callout-line-vertical { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
.callout::after, .callout b { transition: none; }
.callout.is-drawn.is-active::after { animation: none; }
}
.legend { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.legend .fig { color: var(--bc60); }
.slot { padding-top: .5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.slot .reel { position: relative; pointer-events: auto; aspect-ratio: 620 / 300; border-block: var(--bdw) solid transparent; background: #FFFFFF; }
.slot .reel::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border: 6px solid; border-image: linear-gradient(var(--edge-angle), var(--metal-stops)) 1; outline: 1px solid #49391F99; outline-offset: 1px; box-shadow: inset 0 1px 0 #FFF5D9B3, inset 1px 0 0 #FFF5D966, inset 0 -1px 0 #00000080, inset -1px 0 0 #00000059, 0 2px 3px #00000059;  transition: var(--trans); }
.slot .reel:focus-visible { outline: none; }
/* スロットにカーソルが乗ったら、金の枠のグラデーションの角度を少しずらして光の当たり方を変える */
@property --edge-angle { syntax: "<angle>"; inherits: false; initial-value: 90deg; }
.slot:hover .reel::before { --edge-angle: 270deg; }
.slot .note { align-self: flex-end; margin-top: -.5rem; font-weight: 800; animation: note-blink 3s ease-in-out infinite; }
@keyframes note-blink { 50% { opacity: .3; } }
.slot .parts { position: absolute; width: 1px; height: 1px; overflow: clip; clip-path: inset(50%); }
.slot .desc { position: relative; min-height: 6em; padding: 1.5rem; font-size: var(--PFZ); line-height: 1.9; transition: var(--trans); }
.slot .desc::before, .slot .desc::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-repeat: no-repeat; }
.slot .desc::before { background-image: linear-gradient(var(--mc), var(--mc)), linear-gradient(var(--mc), var(--mc)); background-position: left top, left top; background-size: 0 1px, 1px 0; }
.slot .desc::after { background-image: linear-gradient(var(--mc), var(--mc)), linear-gradient(var(--mc), var(--mc)); background-position: right bottom, right bottom; background-size: 0 1px, 1px 0; }
html:not(.is-loading) .slot .desc:not(.is-hidden)::before { animation: desc-corner-open .45s cubic-bezier(.25, 1, .5, 1) both; }
html:not(.is-loading) .slot .desc:not(.is-hidden)::after { animation: desc-corner-close .45s cubic-bezier(.25, 1, .5, 1) both; }
@keyframes desc-corner-open { to { background-size: 32px 1px, 1px 32px; } }
@keyframes desc-corner-close { to { background-size: 32px 1px, 1px 32px; } }
.slot .desc.is-hidden { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html:not(.is-loading) .slot .desc:not(.is-hidden)::before, html:not(.is-loading) .slot .desc:not(.is-hidden)::after { animation: none; background-size: 32px 1px, 1px 32px; }
}
.titleblock { position: relative; display: flex; width: 100%; border: var(--bdw) solid var(--bc); }
.titleblock > div { position: relative; flex: 1; min-width: 0; padding: 1.25rem 1rem; border-right: var(--bdw) solid var(--bc); overflow: clip; }
.titleblock dl { display: flex; flex-direction: column; gap: .5rem; }
.titleblock > div:last-child { border-right: 0; }
.titleblock dt { color: var(--bc60); }
.titleblock dd { font-size: var(--PFZ); font-weight: 600; }
.titleblock > div::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid; border-image: var(--metal-edge) 1; box-shadow: inset 0 1px 0 #FFFFFF59, inset 0 -1px 0 #00000040; opacity: 0; }
.slot-block__reel { --slot-end: calc(-600% / 7); position: absolute; left: 0; top: 0; width: 100%; height: 700%; pointer-events: none; transform: translateY(var(--slot-end)); }
.slot-block__face { height: calc(100% / 7); padding: 1.25rem 1rem; overflow: clip; }
.titleblock.is-slot-ready > div > dl { opacity: 0; }
.titleblock.is-slot-ready .slot-block__reel { transform: translateY(0); }
.titleblock.is-slot-playing .slot-block__reel { animation: slot-title-roll 1.4s cubic-bezier(.22, .7, .25, 1) calc(var(--i) * 65ms) both; }
.titleblock.is-slot-playing > div::after { animation: slot-title-frame 1.4s linear calc(var(--i) * 65ms) forwards; }
.titleblock.is-slot-complete .slot-block__reel { display: none; }
@media (prefers-reduced-motion: reduce) {
.titleblock.is-slot-ready > div > dl { opacity: 1; }
.titleblock .slot-block__reel { display: none; }
.titleblock.is-slot-playing > div::after { animation: none; }
}

/* craft */
.craft { overflow: clip; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap) 6%; }
.craft .txt { flex: 3 1 25rem; max-width: 36rem; display: flex; flex-direction: column; gap: 1.5rem; }
.craft .body { line-height: 2.125; }
.craft .rows { padding-top: 1rem; }
.craft .rows > div { padding-block: .875rem; }
.craft .rows dt { font-family: var(--Ser); letter-spacing: 0; color: var(--tx60); }
.photos { position: relative; flex: 5 1 32rem; width: 100%; max-width: min(65rem, 88%); margin-inline: auto; aspect-ratio: 1040 / 820; }
.photos > .photo-reveal { position: absolute; }
.photos .bench { left: 0; top: calc(80 / 820 * 100%); width: 100%; height: calc(640 / 820 * 100%); }
.photos .tools { right: 0; top: 0; width: calc(280 / 1040 * 100%); aspect-ratio: 1; border-radius: 50%; }
.photos .loupe { left: calc(-50 / 1040 * 100%); bottom: 0; width: calc(360 / 1040 * 100%); aspect-ratio: 1; border-radius: 50%; }

/* 歯車の組。写真の上では写真の箱、セクションではセクションの幅に対する割合で置く。上下の位置は margin-top の割合（親の幅が基準）で決める */
.gear_train { width: calc(var(--w) / 1920 * 100%); aspect-ratio: var(--w) / var(--h); left: calc(var(--x) / 1920 * 100%); top: 0; margin-top: calc(var(--y) / 1920 * 100%); z-index: 1; }
.photos .gear_train { width: calc(var(--w) / 1040 * 100%); left: calc(var(--x) / 1040 * 100%); margin-top: calc(var(--y) / 1040 * 100%); }

.photos .gear_train:last-child { translate: -50% 0; }

/* works */
.works { z-index: 1; display: flex; flex-direction: column; gap: var(--gap); background: var(--wh); }
.cards { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.cards li { flex: 1 1 20rem; min-width: 0; max-width: 35rem; display: flex; flex-direction: column; gap: 1.5rem; }
.cards > li > .photo-reveal { width: 100%; aspect-ratio: 1; }
.cards .name { display: flex; align-items: flex-end; gap: 1rem; font-size: var(--h3FZ); font-weight: 600; }
.cards .name span, .steps .name span { line-height: 2; }
.cards .rows > div { padding-block: .75rem; align-items: center; }
.cards .rows dt { color: var(--tx60); font-size: .8125rem; }
.cards .rows dd { flex: 1 1 9rem; text-align: end; }
.cards .rows dd { font-weight: 400; }

/* repair */
.repair { z-index: 1; display: flex; flex-direction: column; gap: var(--gap); }
.steps { position: relative; display: flex; flex-wrap: wrap; gap: var(--gap); overflow: clip; }
/* 折り返した各工程の中に罫線を収める */
.steps li::before { content: ""; position: absolute; left: 0; right: 0; top: 36px; height: 1px; background: var(--metal-edge); }
.steps li { position: relative; flex: 1 1 15rem; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.steps .screw { position: relative; width: 72px; height: 72px; rotate: -270deg; opacity: 0; transition: var(--trans); }
.steps li.is-in .screw { rotate: 0deg; opacity: 1; }
.steps .name { display: flex; flex-wrap: wrap; gap: .25rem 1rem; justify-content: space-between; align-items: flex-end; font-size: var(--h3FZ); font-weight: 600; }
.steps .body { color: var(--tx60); line-height: 1.875; }

/* contact */
.contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--gap) 6%; background: var(--sc); color: var(--bc); }
.contact .gear_train { left: calc(1100 / 1920 * 100%); top: 0; margin-top: calc(-50 / 1920 * 100%); width: calc(1100 / 1920 * 100% * 2 / 3); aspect-ratio: 356 / 244; opacity: .5; z-index: 0; }
.contact .photo { flex: 6 1 25rem; max-width: 48rem; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.contact .txt { position: relative; flex: 7 1 25rem; max-width: 48rem; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
.contact .rows > div { justify-content: flex-start; gap: var(--gap); padding-block: 1rem; }
.contact .rows dt { flex: 0 0 6.5rem; line-height: 1.5; color: var(--bc60); }
.contact .rows dd { font-weight: 400; line-height: 1.375; }
.contact .btn { align-self: flex-start; margin-top: 1rem; padding: 1.25rem var(--gap); gap: .75rem; line-height: 1.4375; background: var(--mc); color: var(--bk); }

/* footer */
.footer { padding: 8% var(--gutter) 4%; background: var(--sc); color: var(--bc); display: flex; flex-direction: column; gap: calc(var(--gap) * 3); }
.f_ruler { position: relative; }
.f_ruler .ruler { position: static; height: 40px; color: var(--mc); }
.f_main { display: flex; flex-wrap: wrap; gap: calc(var(--gap) * 2) 6%; align-items: start; }
.f_brand { flex: 2 1 22rem; max-width: 42.5rem; }
.f_visit { flex: 1 1 17rem; }
.f_nav { flex: 1 1 12rem; }
.f_brand { min-width: 0; }
.f_logo { display: flex; flex-direction: column; gap: .5rem; }
.f_logo .logo_ja { font-size: 3.5rem; }
.f_intro { margin-top: var(--gap); font-size: 1.25rem; line-height: 1.75; }
.footer .logo_en { color: var(--bc60); }
.f_visit { display: flex; flex-direction: column; gap: 1rem; }
.f_visit > .en { font-size: 1rem; }
.f_details { display: flex; flex-direction: column; gap: 1rem; font-size: 1.25rem; line-height: 1.5; }
.f_reserve { align-self: flex-start; margin-top: .5rem; font-size: 1rem; text-decoration: underline; text-underline-offset: 4px; }
.f_nav { display: flex; flex-direction: column; gap: 1.25rem; }
.f_nav > .en { margin-bottom: .25rem; }
.f_nav a { display: flex; align-items: baseline; gap: 1.5rem; line-height: 1.25; }
.f_copy { color: var(--bc60); font-size: .875rem; }
/* 時計と見出しは、十分な幅がある間は横並び、狭くなると自然に折り返す。 */
@media (max-width: 1100px) {
  .sheet { flex-wrap: wrap; justify-content: center; aspect-ratio: auto; gap: var(--gap); }
  .blueprint-figure { flex: 1 1 18rem; max-width: 32rem; }
  .blueprint-details { flex: 1 1 20rem; max-width: 38.75rem; }
  .callout { width: calc((780 - var(--x)) / 700 * 100% - 2.5rem); }
  .callout.__top { width: 8px; }
  .titleblock { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .titleblock > div { border-bottom: var(--bdw) solid var(--bc); }
  .titleblock > div:nth-child(even) { border-right: 0; }
  .titleblock > div:nth-last-child(-n + 2) { border-bottom: 0; }
  .mv { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); aspect-ratio: auto; padding: calc(7rem + var(--gap)) var(--gutter) 8%; }
  .mv_it { position: relative; inset: auto; flex: 1 1 20rem; width: 100%; }
  .mv_art { position: relative; inset: auto; flex: 1 1 20rem; width: 100%; max-width: 34rem; margin: 0 auto; }
}
@media (max-width: 834px) {
  html { font-size: 87.5%; scroll-padding-top: 8rem; }
}