/* LUXTH トップ（参考 sogokagu の型を黒地で。数値の根拠は analysis.md） */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--ff-ja);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;  /* 句読点・小さい「ッ」などを行の頭に置かない */
  -webkit-font-smoothing: antialiased;
}
body.is-loading { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
.nb { white-space: nowrap; }
/* 画面には出さず、読み上げにだけ渡す */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- 見出し：和文の明朝が主、欧文は小さな添え書き（年配の日本人向け） ---------- */
.h-ja-l { font-family: var(--ff-mincho); font-size: var(--fs-ja-l); font-weight: 500; letter-spacing: 0.06em; line-height: 1.4; font-feature-settings: "palt"; }

/* 右端の「↗」リンク（参考 MORE ↗・下線） */
.more {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 17px; font-weight: 500; line-height: 1;
  padding-bottom: 7px; border-bottom: 1px solid currentColor;
  transition: opacity var(--dur-hover) ease;
}
.more::after { content: ""; width: 0.75em; height: 0.75em; background: currentColor; -webkit-mask: var(--arrow-ne) center / contain no-repeat; mask: var(--arrow-ne) center / contain no-repeat; }
.more:hover { opacity: 0.6; }

/* ボタン（参考の黒い四角のボタンを黒地で反転：白の塗り＝押してほしい所） */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 56px; padding: 0 32px;
  border: 1px solid var(--c-ink); color: var(--c-ink);
  font-size: 17px; font-weight: 500; letter-spacing: 0.1em; line-height: 1;
  transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease;
}
.btn::after { content: ""; width: 0.7em; height: 0.7em; background: currentColor; -webkit-mask: var(--arrow-ne) center / contain no-repeat; mask: var(--arrow-ne) center / contain no-repeat; }
.btn--fill { background: var(--c-ink); color: var(--c-paper-ink); }
.btn--fill:hover { background: transparent; color: var(--c-ink); }

/* 01 — 05 の数え（参考 24px・現在は濃く、総数は灰） */
.count { display: inline-flex; align-items: center; font-family: var(--ff-en); font-size: 20px; font-weight: 300; line-height: 1; color: var(--c-ink); }
.count__now, .count__all { width: 1.4em; }
.count__all { text-align: right; color: var(--c-ink-mute); }
.count__rule { width: 20px; height: 1px; background: var(--c-ink); }

/* ---------- ローディング（参考 R0。画像を待たない。PC 約 2.5 秒・スマホ 約 1.6 秒） ---------- */
.loading {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-bg-deep);
  transition: opacity 0.8s ease;
}
.loading__logo { width: 200px; clip-path: inset(0 100% 0 0); transition: clip-path 0.6s ease; }
.loading__spin { position: absolute; left: 24px; top: 50%; width: 14px; height: 10px; border: 2px solid var(--c-ink); animation: spin-blink 0.6s steps(2) infinite; }
.loading__bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--c-ink); transform: scaleX(0); transform-origin: left; transition: transform 1.7s var(--ease-open); }
@media (max-width: 780px), (max-width: 1100px) and (orientation: portrait) { .loading__bar { transition-duration: 1.2s; } }
.loading.is-bar .loading__bar { transform: scaleX(1); }
.loading.is-logo .loading__logo { clip-path: inset(0 0 0 0); }
.loading.is-logo .loading__spin { display: none; }
.loading.is-done { opacity: 0; pointer-events: none; }
@keyframes spin-blink { 50% { border-color: transparent var(--c-ink) var(--c-ink) transparent; } }

/* ---------- ヘッダー（参考：透明で始まり、下へで隠れ、上へで帯が付く） ---------- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 44px;
  height: 84px; padding: 0 var(--gutter);
  font-family: var(--ff-en); font-size: 14px; font-weight: 500; letter-spacing: 0.14em; line-height: 1;
  transition: transform var(--dur-hover) ease-in-out, background-color var(--dur-hover) ease;
}
.header.is-hide { transform: translateY(-100%); }
.header.is-show { background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
.header__logo img { width: 136px; }
.header__nav { display: flex; gap: 36px; margin-left: auto; white-space: nowrap; }
.header__side { display: flex; align-items: center; gap: 24px; margin-left: 12px; padding-left: 36px; border-left: 1px solid var(--c-line); white-space: nowrap; }
/* カート：細い線の紙袋の中に点数（PC は「カート」の文字つき、1120px 以下はアイコンだけ） */
.header__cart { display: inline-flex; align-items: center; gap: 10px; margin-left: 32px; padding: 10px 0; letter-spacing: 0.14em; transition: opacity var(--dur-hover) ease; }
.header__cart:hover { opacity: 0.6; }
.header__bag { position: relative; display: block; width: 24px; height: 24px; }
.header__bag svg { display: block; }
.header__cart-n { position: absolute; left: 0; right: 0; top: 11px; font-family: var(--ff-en); font-size: 10px; font-weight: 500; line-height: 1; letter-spacing: 0; text-align: center; }
.header nav a, .header__side a { transition: opacity var(--dur-hover) ease; }
.header nav a:hover, .header__side a:hover { opacity: 0.6; }
.header__menu { display: none; }

/* ---------- S1 ファーストビュー（全面表示。時間割は参考 R1：7 秒で 1.1 倍・2 秒のフェード） ---------- */
.kv { position: relative; height: 100vh; min-height: 640px; overflow: hidden; background: var(--c-stage); }
.kv__rears { position: absolute; inset: 0; }
.kv__rear { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-fade) ease; }
.kv__rear.is-active { opacity: 1; z-index: 1; }
/* 靴が「置かれている」ことを見せる、足元のかすかな床の光 */
.kv__rear::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 30% 5% at 36% 88%, var(--c-floor), transparent 70%); }
.kv__rear picture { display: contents; }
/* 静物は地がページと同じ黒なので、切り抜かずに全体を収める（画面の比率が変わっても靴の大きさと位置が崩れない） */
.kv__rear img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; transform: scale(1); transform-origin: 30% 50%; }
.kv__rear.is-zoom img { transform: scale(1.1); transition: transform 7s linear; }
.kv__cap { position: absolute; left: clamp(32px, 6.9vw, 100px); bottom: 96px; z-index: 2; font-size: 16px; line-height: 1.5; letter-spacing: 0.08em; color: var(--c-ink); }
.kv__cap small { display: block; margin-top: 2px; font-family: var(--ff-en); font-size: 14px; color: var(--c-ink-sub); letter-spacing: 0.1em; }
.kv__side { position: absolute; right: clamp(32px, 6.9vw, 100px); bottom: 104px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; width: 440px; }
.kv__title { font-family: var(--ff-serif-en); font-size: clamp(44px, 4.2vw, 60px); font-weight: 400; line-height: 1.12; letter-spacing: 0.01em; }
.kv__lead { color: var(--c-ink-sub); text-wrap: pretty; }
.kv__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
/* 写真の進み具合（3 本の線） */
.kv__dots { position: absolute; left: clamp(32px, 6.9vw, 100px); bottom: 48px; z-index: 3; display: flex; gap: 8px; }
.kv__dots li { width: 48px; height: 1px; background: var(--c-line); transition: background-color 0.6s ease; }
.kv__dots li.is-on { background: var(--c-ink); }

/* ---------- セクションの共通（参考：見出し↔中身 16〜24px・セクションの間は大きく） ---------- */
.sec { position: relative; padding: var(--sec-y) var(--gutter) 0; }
.sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-p); }
.sec__title { display: flex; align-items: flex-end; gap: 24px; }
.sec__title .count { padding-bottom: 10px; }
.h-ja-xl { font-family: var(--ff-mincho); font-size: clamp(32px, 2.8vw, 40px); font-weight: 500; letter-spacing: 0.06em; line-height: 1.45; font-feature-settings: "palt"; }
.h-ja-m { font-family: var(--ff-mincho); font-size: clamp(22px, 1.8vw, 26px); font-weight: 500; letter-spacing: 0.08em; line-height: 1.5; font-feature-settings: "palt"; }
/* 写真がまだ無い枠（無地の面。文字は入れない） */
.ph { display: block; background: var(--c-tile); }

/* ---------- S2 ラインナップ（参考 R3：写真＋本文の段の横送り・次が覗く） ---------- */
.lineup__common { margin-top: 20px; color: var(--c-ink-sub); }
.lineup__track { display: flex; gap: 40px; margin: 40px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); }
.lineup__track::-webkit-scrollbar { display: none; }
.lineup__track.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.lineup__item { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 300px; gap: 40px; width: min(1080px, calc(100vw - 300px)); scroll-snap-align: start; }
.lineup__img { position: relative; display: grid; place-items: center; aspect-ratio: 870 / 614; background: var(--c-stage); overflow: hidden; }
.lineup__img::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 34% 6% at 50% 84%, var(--c-floor), transparent 70%); }
.lineup__img img { position: relative; z-index: 1; width: 62%; transition: transform 0.6s ease; }
.lineup__img:hover img { transform: scale(1.03); }
.lineup__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 8px; }
.lineup__line { display: flex; gap: 14px; font-family: var(--ff-en); font-size: 16px; letter-spacing: 0.16em; color: var(--c-ink-sub); line-height: 1; }
.lineup__line .no { color: var(--c-ink); }
.lineup__name { font-family: var(--ff-mincho); font-size: 28px; font-weight: 500; letter-spacing: 0.1em; line-height: 1.4; }
.lineup__name small { display: block; margin-top: 6px; font-family: var(--ff-en); font-size: 14px; font-weight: 400; letter-spacing: 0.2em; color: var(--c-ink-sub); }
.lineup__desc { color: var(--c-ink-sub); text-wrap: pretty; }
.lineup__txt .btn { margin-top: auto; }

/* 横送りの矢印（参考：写真の右下角に接する四角 128×63。黒地では線だけ） */
.arrows { position: absolute; right: 0; bottom: 0; display: flex; width: 128px; height: 63px; border: 1px solid var(--c-line); background: var(--c-bg); color: var(--c-ink); }
.arrows button { flex: 1; display: grid; place-items: center; }
.arrows button + button { border-left: 1px solid var(--c-line); }
.arrows button::before { content: ""; width: 11px; height: 11px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
.arrows__prev::before { transform: rotate(-135deg); }
.arrows__next::before { transform: rotate(45deg); }
.arrows button:disabled { opacity: 0.3; cursor: default; }
.lineup .arrows, .story .arrows { position: static; margin: 32px 0 0 auto; }

/* ---------- S1.5 信頼の帯（FV の直下。カードにせず縦線で区切る） ---------- */
.trust { border-bottom: 1px solid var(--c-line); }
.trust__list { display: grid; grid-template-columns: repeat(3, 1fr); }
.trust__list li { display: flex; flex-direction: column; gap: 10px; padding: 40px clamp(20px, 3vw, 44px); }
.trust__list li + li { border-left: 1px solid var(--c-line); }
.trust__ttl { font-family: var(--ff-mincho); font-size: 19px; font-weight: 500; letter-spacing: 0.06em; line-height: 1.5; }
.trust__list p { color: var(--c-ink-sub); text-wrap: pretty; }

/* ---------- S3 こだわり（参考 R4 の地の切り替えを、黒の明暗で。インソールを大きく） ---------- */
.craft { margin-top: var(--sec-y); background: var(--c-bg-deep); }
.craft__inner { padding: 120px var(--gutter); }
.craft__main { display: grid; grid-template-columns: 6fr 4fr; gap: clamp(32px, 4.4vw, 64px); align-items: end; margin-top: 56px; }
.craft__img { display: block; aspect-ratio: 4 / 5; }
.craft__img--main { aspect-ratio: 16 / 11; }
.craft__txt { display: flex; flex-direction: column; gap: 16px; padding-bottom: 8px; }
.craft__sub { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4.4vw, 64px); margin-top: 72px; padding-left: calc(60% - 40px); }
.craft__sub li { display: flex; flex-direction: column; gap: 14px; }
.craft__sub .craft__img { aspect-ratio: 4 / 3; }
.craft__no { font-family: var(--ff-mincho); font-size: 20px; color: var(--c-ink-sub); line-height: 1; }
.craft__ttl { font-family: var(--ff-mincho); font-size: 22px; font-weight: 500; letter-spacing: 0.06em; line-height: 1.5; }
.craft__ttl--main { font-size: 30px; }
.craft p:not(.craft__no) { color: var(--c-ink-sub); text-wrap: pretty; }

/* ---------- S4 ブランドの物語（参考 R5：全幅の写真 1 枚の横送り） ---------- */
.story { margin-top: var(--sec-y); border-top: 1px solid var(--c-line); }
.story::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--c-line); }
.story__track { display: flex; gap: 20px; margin: 32px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); }
.story__track::-webkit-scrollbar { display: none; }
.story__track.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.story__item { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 360px; gap: 40px; width: calc(100vw - var(--gutter) * 2); scroll-snap-align: start; }
.story__img { aspect-ratio: 1000 / 560; overflow: hidden; background: var(--c-tile); }
.story__img img { width: 100%; height: 100%; object-fit: cover; }
.story__img--still img { object-position: 36% 50%; }
.story__txt { display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding-bottom: 8px; }
.story__step { font-family: var(--ff-mincho); font-size: 20px; color: var(--c-ink-sub); line-height: 1; }
.story__ttl { font-family: var(--ff-mincho); font-size: 24px; font-weight: 500; letter-spacing: 0.06em; line-height: 1.5; }
.story__txt p:last-child { color: var(--c-ink-sub); text-wrap: pretty; }

/* ---------- S5 ご注文の流れ（主）＋フルオーダー（副） ---------- */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 40px; border-top: 1px solid var(--c-ink); border-bottom: 1px solid var(--c-line); }
.flow li { display: flex; flex-direction: column; gap: 12px; padding: 32px 24px 36px 0; }
.flow li + li { padding-left: 24px; border-left: 1px solid var(--c-line); }
.flow__no { font-family: var(--ff-mincho); font-size: 24px; color: var(--c-ink-sub); line-height: 1; }
.flow__ttl { font-family: var(--ff-mincho); font-size: 20px; font-weight: 500; letter-spacing: 0.06em; line-height: 1.5; }
.flow li p { color: var(--c-ink-sub); text-wrap: pretty; }
.fullorder { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 4.4vw, 64px); align-items: end; margin-top: 80px; }
.fullorder__img { aspect-ratio: 21 / 9; }
.fullorder__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.fullorder__txt p { color: var(--c-ink-sub); text-wrap: pretty; }
.fullorder__tel { display: flex; flex-direction: column; gap: 4px; }
.fullorder__tel a, .contact__tel a { font-family: var(--ff-mincho); font-size: 28px; color: var(--c-ink); letter-spacing: 0.06em; line-height: 1.3; }

/* ---------- S6 ご購入の前に（参考 R2：線で挟んだ行。見出し左・表右） ---------- */
.before { display: grid; grid-template-columns: 360px 1fr; gap: 40px; }
.before__head { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.before__list { border-top: 1px solid var(--c-ink); }
.before__list > div { display: grid; grid-template-columns: 220px 1fr; gap: 0 var(--sp-p); padding: 26px 4px; border-bottom: 1px solid var(--c-line); }
.before__list dt { font-family: var(--ff-mincho); font-size: 18px; font-weight: 500; letter-spacing: 0.06em; }
.before__list dd { color: var(--c-ink-sub); letter-spacing: 0.04em; text-wrap: pretty; }
.before__list dd.before__price { font-family: var(--ff-mincho); font-size: 26px; color: var(--c-ink); line-height: 1.2; }
.before__price small { font-family: var(--ff-ja); font-size: 16px; color: var(--c-ink-sub); }

/* ---------- S7 ブランドについて（参考 R7：縦線で区切った記事。2 枠） ---------- */
.about__list { display: grid; grid-template-columns: repeat(2, 1fr); margin: 32px calc(var(--gutter) * -1) 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.about__list li + li { border-left: 1px solid var(--c-line); }
.about__list a { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 14px 14px 28px; transition: background-color var(--dur-hover) ease; }
.about__list a:hover { background: var(--c-tile); }
.about__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-tile); }
.about__ttl { margin-top: 6px; font-family: var(--ff-mincho); font-size: 22px; font-weight: 500; letter-spacing: 0.06em; line-height: 1.5; }
.about__list p { color: var(--c-ink-sub); text-wrap: pretty; }
.about__more { display: inline-flex; align-items: center; gap: 0.5em; margin-top: auto; padding-top: 8px; font-size: 16px; }
.about__more::after { content: ""; width: 0.7em; height: 0.7em; background: currentColor; -webkit-mask: var(--arrow-ne) center / contain no-repeat; mask: var(--arrow-ne) center / contain no-repeat; }

/* ---------- S8 お問い合わせ（参考 R8：帯 → 黒地のまま上下の線で） ---------- */
.contact { margin-top: var(--sec-y); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.contact__inner { display: grid; grid-template-columns: 1fr 640px; gap: 40px; align-items: end; max-width: 1240px; margin: 0 auto; padding: 88px var(--gutter); }
.contact__body { display: flex; flex-direction: column; gap: 20px; }
.contact__body p { color: var(--c-ink-sub); }
.contact__link { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--c-ink); font-family: var(--ff-mincho); font-size: 26px; letter-spacing: 0.1em; transition: opacity var(--dur-hover) ease; }
.contact__link::after { content: ""; width: 0.8em; height: 0.8em; background: currentColor; -webkit-mask: var(--arrow-ne) center / contain no-repeat; mask: var(--arrow-ne) center / contain no-repeat; }
.contact__link:hover { opacity: 0.6; }

/* ---------- スマホの追従ボタン（FV を過ぎたら出し、フッターでは隠す） ---------- */
.sticky { display: none; }

/* ---------- S9 フッター（参考 R9：大きなロゴ・4 列のリンク） ---------- */
.footer { background: var(--c-bg-deep); padding: 72px var(--gutter) 40px; }
.footer__top { display: grid; grid-template-columns: 1fr 760px; gap: 40px; }
.footer__logo img { width: 220px; }
.footer__nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.footer__nav li + li { margin-top: 14px; }
.footer__nav a { font-size: 16px; transition: opacity var(--dur-hover) ease; }
.footer__nav a:hover { opacity: 0.6; }
.footer__bottom { display: flex; align-items: center; gap: 32px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--c-line); font-size: 16px; color: var(--c-ink-sub); }
.footer__legal { display: flex; gap: 24px; margin-left: auto; }
.footer__copy { font-family: var(--ff-en); }

/* ---------- スマホのメニュー ---------- */
.menu { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; padding: 88px var(--gutter) 32px; background: var(--c-bg); overflow-y: auto; }
.menu[hidden] { display: none; }
.menu__list li { border-bottom: 1px solid var(--c-line); }
.menu__list a { display: flex; align-items: baseline; justify-content: space-between; padding: 18px 0; font-family: var(--ff-en); font-size: 20px; letter-spacing: 0.14em; }
.menu__list small { font-family: var(--ff-ja); font-size: 14px; letter-spacing: 0.08em; color: var(--c-ink-sub); }
.menu__foot { margin-top: 32px; }
.menu__foot .btn { width: 100%; }
.btn--line { border-color: var(--c-ink); }
.btn--line:hover { background: var(--c-ink); color: var(--c-paper-ink); }
.header__menu[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(20deg); }
.header__menu[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-20deg); }
.header__menu span { transition: transform var(--dur-hover) ease; }

/* 写真が上から下へ開く（参考 clip-path 0.8s cubic-bezier(.645,.045,.355,1)） */
.reveal { clip-path: inset(0 0 100% 0); transition: clip-path var(--dur-open) var(--ease-open); }
.reveal.is-on { clip-path: inset(0 0 0 0); }
.no-js .reveal { clip-path: none; }

/* ---------- 1120px 以下：メニューが入りきらないので、ハンバーガーメニューに切り替える ---------- */
@media (max-width: 1120px) {
  /* 段が細くなりすぎないよう組み直す（こだわり・ご注文の流れ） */
  .craft__main { grid-template-columns: 1fr 1fr; }
  .craft__ttl--main { font-size: 24px; }
  .craft__sub { padding-left: 0; }
  .flow { grid-template-columns: 1fr 1fr; }
  .flow li:nth-child(3) { padding-left: 0; border-left: 0; }
  .flow li:nth-child(n+3) { border-top: 1px solid var(--c-line); }
  .header__nav, .header__side { display: none; }
  .header__cart { margin-left: auto; padding: 10px; border-left: 0; position: relative; z-index: 2; }
  .header__cart-label { display: none; }
  .header__menu { display: flex; flex-direction: column; justify-content: center; gap: 8px; width: 44px; height: 44px; margin-left: 8px; position: relative; z-index: 2; }
  .header__menu span { display: block; width: 32px; height: 1px; background: currentColor; margin-left: auto; }
}

/* ---------- 背の低いスマホ（iPhone SE など）：文字を減らして靴と重ねない ---------- */
@media (max-width: 780px) and (max-height: 700px) {
  .kv .kv__lead { display: none; }
  .kv__cap { display: none; }
  .kv__title { font-size: 36px; }
  .kv__btns .btn { min-height: 50px; }
}

/* ---------- スマホ・タブレットの縦向き（縦に積む） ---------- */
@media (max-width: 780px), (max-width: 1100px) and (orientation: portrait) {
  .header { height: 64px; }
  .header__logo img { width: 104px; }

  .kv { height: 100svh; min-height: 560px; }
  .kv__rear::before { background: radial-gradient(ellipse 44% 3% at 50% 48%, var(--c-floor), transparent 70%); }
  .kv__cap { left: var(--gutter); bottom: auto; top: 76px; font-size: 16px; }
  .kv__cap small { display: inline; margin: 0 0 0 10px; font-size: 14px; }
  .kv__side { left: var(--gutter); right: var(--gutter); bottom: 28px; width: auto; max-width: 560px; gap: 16px; }
  .kv__lead { font-size: 16px; }
  .kv__btns { flex-direction: column; align-items: stretch; align-self: stretch; }
  .kv__dots { display: none; }

  .sec__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .sec__title .count { display: none; }

  .lineup__track { gap: 16px; }
  .lineup__item { grid-template-columns: 1fr; gap: 20px; width: min(84vw, 520px); }
  .lineup__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .lineup__img { aspect-ratio: 4 / 5; }
  .lineup__img img { width: 82%; }
  .lineup__txt { gap: 12px; padding-top: 0; }
  .lineup__txt .btn { align-self: stretch; margin-top: 8px; }
  .lineup .arrows, .story .arrows { display: none; }

  .trust__list { grid-template-columns: 1fr; }
  .trust__list li { padding: 24px var(--gutter); }
  .trust__list li + li { border-left: 0; border-top: 1px solid var(--c-line); }

  .craft__inner { padding: 80px var(--gutter); }
  .craft__main { grid-template-columns: 1fr; gap: 24px; margin: 40px calc(var(--gutter) * -1) 0; }
  .craft__img--main { aspect-ratio: 4 / 5; }
  .craft__main .craft__txt { padding: 0 var(--gutter); }
  .craft__ttl--main { font-size: 24px; }
  .craft__sub { grid-template-columns: 1fr; gap: 48px; margin-top: 56px; padding-left: 0; }

  .story__item { grid-template-columns: 1fr; gap: 20px; width: min(84vw, 680px); }
  .story__img { aspect-ratio: 4 / 3; }

  .flow { grid-template-columns: 1fr; }
  .flow li { padding: 24px 0; }
  .flow li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--c-line); }
  .fullorder { grid-template-columns: 1fr; gap: 24px; margin-top: 56px; }
  .fullorder__img { aspect-ratio: 16 / 10; }

  .before { grid-template-columns: 1fr; gap: 28px; }
  .before__list > div { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }

  .about__list { grid-template-columns: 1fr; margin: 28px 0 0; border-bottom: 0; }
  .about__list li { border-bottom: 1px solid var(--c-line); }
  .about__list li + li { border-left: 0; }
  .about__list a { padding: 20px 0 28px; }

  .contact__inner { grid-template-columns: 1fr; gap: 24px; padding: 64px var(--gutter); }
  .contact__link { font-size: 22px; }

  .sticky { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; display: flex; align-items: center; justify-content: center; min-height: 56px; background: var(--c-ink); color: var(--c-paper-ink); font-size: 17px; font-weight: 500; letter-spacing: 0.1em; transform: translateY(calc(100% + 24px)); transition: transform var(--dur-hover) ease; }
  .sticky.is-on { transform: translateY(0); }
  .footer { padding-bottom: 96px; }

  .footer__top { grid-template-columns: 1fr; gap: 40px; }
  .footer__logo img { width: 160px; }
  .footer__nav { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer__legal { flex-direction: column; gap: 12px; margin-left: 0; }

  .cursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kv__rear, .kv__rear img, .reveal, .loading, .loading__logo, .loading__bar { transition: none; }
  .reveal { clip-path: none; }
}