/* LPHP（LPだけをまとめる、白とモノトーンのサイト）
   色と書体は下の変数で差し替えられる */
:root {
  /* 色（白・薄い灰・黒） */
  --c-bg: #ffffff;
  --c-bg-2: #f4f4f2;
  --c-bg-3: #e9e9e6;
  --c-bg-4: #dcdcd8;
  --c-fg: #0c0c0c;
  --c-text: rgba(12, 12, 12, 0.78);
  --c-mute: rgba(12, 12, 12, 0.56);
  --c-line: rgba(12, 12, 12, 0.14);
  --c-ink: 12, 12, 12; /* 背景の細い線の色（濃さは線ごとに決める） */
  /* 書体（個人HPと同じ） */
  --font-en: "Inter Tight";
  --font-ja: "Zen Kaku Gothic New";
  --font: var(--font-en), var(--font-ja), "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  /* 動きと余白 */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pad: clamp(20px, 5vw, 72px);
  --head-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.8;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.label { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-mute); }
.ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.noscript { padding: 40px var(--pad); }

/* ---------- 文字の出方（下から切り出す） ---------- */
.clip { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; }
.clip > span { display: inline-block; }
.js .clip > span {
  transform: translateY(110%);
  transition: transform 1.05s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .fade {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s ease, transform 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .inview .clip > span, .js .is-active .clip > span, .js.is-ready .hero .clip > span { transform: none; }
.js .inview .fade, .js .inview.fade, .js .is-active .fade, .js.is-ready .hero .fade { opacity: 1; transform: none; }

/* ---------- ヘッダー ---------- */
.lp-head {
  position: fixed;
  z-index: 500;
  inset: 0 0 auto 0;
  height: var(--head-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 var(--pad);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
  font-size: 13px;
  letter-spacing: 0.08em;
}
.lp-head a { text-decoration: none; }
.lp-head__logo { justify-self: start; font-weight: 500; letter-spacing: 0.02em; font-size: 15px; }
/* あとでスイッチを置く空き */
.lp-head__slot { min-width: clamp(120px, 16vw, 220px); height: 36px; }
.lp-head__nav { justify-self: end; display: flex; gap: clamp(14px, 2vw, 32px); }
.lp-head__nav a { position: relative; padding: 6px 0; }
.lp-head__nav a::after, .link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.6s var(--ease);
}
.lp-head__nav a:hover::after, .lp-head__nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* ---------- 最初の画面 ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--head-h) + 40px) var(--pad) clamp(28px, 6vh, 64px);
  overflow: hidden;
}
.hero__layers { position: absolute; inset: 0; pointer-events: none; }
.layer { position: absolute; display: block; }
.layer i { position: absolute; inset: 0; display: block; animation: drift var(--t, 22s) ease-in-out infinite alternate; }
.layer--a { right: -6vw; top: -8vh; width: 58vw; height: 74vh; }
.layer--a i { background: var(--c-bg-2); }
.layer--b { left: -8vw; bottom: -16vh; width: 46vw; height: 56vh; }
.layer--b i { background: var(--c-bg-3); --t: 27s; --dx: -2.2vw; --dy: 1.6vh; --r: -5deg; }
.layer--c { right: 18vw; top: 22vh; width: 13vw; height: 60vh; }
.layer--c i { background: var(--c-bg-4); opacity: 0.55; --t: 19s; --dx: 1.4vw; --dy: -2.4vh; }
.layer--d { left: 34vw; top: 12vh; width: 52vh; height: 52vh; }
.layer--d i { border: 1px solid var(--c-line); border-radius: 50%; --t: 31s; --dx: -1.6vw; --dy: 2.2vh; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)); }
  to { transform: translate3d(var(--dx, 2vw), var(--dy, 2vh), 0) rotate(calc(var(--r, 0deg) + 1.5deg)); }
}
.layer--e { left: 8vw; top: -6vh; width: 22vw; height: 34vh; }
.layer--e i { background: var(--c-bg-2); --t: 24s; --dx: 1.8vw; --dy: 2.6vh; }
.layer--f { right: 30vw; bottom: -10vh; width: 30vw; height: 30vh; }
.layer--f i { background: var(--c-bg-3); opacity: 0.7; --t: 34s; --dx: -2.6vw; --dy: -1.4vh; --r: 4deg; }

/* 細い線（ゆっくり引かれて、ゆっくり消える） */
.hl { position: absolute; display: block; height: 1px; pointer-events: none; }
.hl--v { width: 1px; }
.hl i {
  display: block;
  width: 100%; height: 100%;
  background: rgba(var(--c-ink), var(--al, 0.16));
  animation: hl-x var(--t, 15s) cubic-bezier(0.65, 0, 0.35, 1) var(--dl, 0s) infinite;
}
.hl--v i { animation-name: hl-y; }
.hl--drift { animation: hl-drift var(--dt, 26s) ease-in-out infinite alternate; }
@keyframes hl-x {
  0% { transform: scaleX(0); transform-origin: left; }
  38% { transform: scaleX(1); transform-origin: left; }
  62% { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}
@keyframes hl-y {
  0% { transform: scaleY(0); transform-origin: top; }
  38% { transform: scaleY(1); transform-origin: top; }
  62% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@keyframes hl-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--mx, 0), var(--my, 0), 0); } }
.hl--1 { left: 0; top: 31vh; width: 46vw; --t: 17s; }
.hl--2 { left: 62vw; top: 0; height: 70vh; --t: 21s; --dl: -6s; --mx: 3vw; --al: 0.13; }
.hl--3 { right: 0; top: 58vh; width: 34vw; --t: 19s; --dl: -11s; --my: -5vh; --al: 0.12; }
.hl--4 { left: 18vw; top: 46vh; width: 58vw; rotate: -24deg; --t: 25s; --dl: -3s; --al: 0.1; }
.hl--5 { left: 12vw; top: 18vh; height: 52vh; --t: 14s; --dl: -8s; --al: 0.2; }

/* 全体の背景（PCだけ。文字や画像の後ろ） */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg__plane { position: absolute; display: block; will-change: transform; }
.bg__plane i { position: absolute; inset: 0; display: block; background: var(--c-bg-2); animation: drift var(--t, 30s) ease-in-out infinite alternate; }
.bg__plane--1 { left: -10vw; top: 34vh; width: 46vw; height: 72vh; rotate: -8deg; }
.bg__plane--2 { right: -12vw; top: 92vh; width: 40vw; height: 88vh; rotate: 6deg; }
.bg__plane--2 i { --t: 38s; --dx: -2vw; --dy: -2vh; }
.bg__lines { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 画面の外では止める */
.is-off .layer i, .is-off .hero__scroll i::after, .is-off .hl i, .is-off .hl--drift { animation-play-state: paused; }

.hero__body { position: relative; z-index: 1; transform-origin: 0 100%; }
.hero__lead { margin-bottom: clamp(18px, 3vh, 36px); font-size: clamp(17px, 1.9vw, 34px); line-height: 1.6; font-weight: 500; }
.hero__lead .clip { display: block; }
.hero__title {
  margin: 0;
  font-size: clamp(30px, 8.7vw, 200px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.hero__title .m { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; }
.hero__title .ch { display: inline-block; }
.js .hero__title .ch {
  transform: translateY(112%);
  transition: transform 1.15s var(--ease);
  transition-delay: calc(var(--i, 0) * 38ms + 0.2s);
}
.js.is-ready .hero__title .ch { transform: none; }
.hero__foot {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-top: clamp(24px, 5vh, 56px);
  padding-top: 18px;
  border-top: 1px solid var(--c-line);
  font-size: 12px;
  letter-spacing: 0.14em;
}
.hero__note { color: var(--c-mute); letter-spacing: 0.08em; }
.hero__scroll { display: inline-flex; align-items: center; gap: 12px; text-transform: uppercase; }
.hero__scroll i { position: relative; display: block; width: 1px; height: 54px; background: var(--c-line); overflow: hidden; }
.hero__scroll i::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 40%;
  background: var(--c-fg);
  animation: cue 2.2s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
@keyframes cue { from { transform: translateY(-110%); } to { transform: translateY(260%); } }

/* ---------- 作品の場面（もとの形：縦に並ぶ。スマホ・動きを減らす設定はこの形） ---------- */
.works { position: relative; }
.works__label { padding: clamp(72px, 12vh, 140px) var(--pad) 0; }
.stage__hud { display: none; }
.scene { position: relative; padding: clamp(56px, 10vh, 110px) var(--pad); overflow: hidden; }
.scene + .scene { border-top: 1px solid var(--c-line); }
.scene__in { position: relative; z-index: 1; display: grid; gap: 40px; max-width: 2000px; margin: 0 auto; }
.scene__num {
  position: absolute;
  z-index: 0;
  right: var(--pad);
  top: 28px;
  font-size: clamp(120px, 40vw, 220px);
  line-height: 0.8;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--c-bg-3);
  pointer-events: none;
  user-select: none;
}
.scene__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: clamp(18px, 3vh, 34px); font-size: 13px; letter-spacing: 0.08em; }
.scene__no { font-weight: 500; }
.tag { border: 1px solid var(--c-fg); padding: 0 0.7em; font-size: 11px; line-height: 1.7; letter-spacing: 0.14em; }
.badge { border: 1px solid var(--c-line); border-radius: 99px; padding: 0.1em 1em; font-size: 12px; letter-spacing: 0.04em; color: var(--c-mute); background: var(--c-bg); }
.scene__kind { margin-bottom: 0.5em; font-size: clamp(14px, 1.05vw, 19px); color: var(--c-mute); }
.scene__title { margin: 0; font-size: clamp(30px, 3.5vw, 76px); line-height: 1.22; font-weight: 500; letter-spacing: 0.01em; }
.scene__point { margin-top: clamp(20px, 3.4vh, 40px); max-width: 32em; font-size: clamp(14.5px, 1.02vw, 18px); line-height: 2; color: var(--c-text); }
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.5em 0;
  font-weight: 500;
  text-decoration: none;
}
.link::after { transform: scaleX(1); transform-origin: left; }
.link:hover::after, .link:focus-visible::after { animation: redraw 0.9s var(--ease); }
@keyframes redraw { 0% { transform: scaleX(1); transform-origin: right; } 45% { transform: scaleX(0); transform-origin: right; } 46% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }
.link .ico { transition: transform 0.6s var(--ease); }
.link:hover .ico { transform: translate(2px, -2px); }
.scene .link { margin-top: clamp(22px, 3.6vh, 44px); }

.scene__media { position: relative; }
.scene__tilt { position: relative; aspect-ratio: 100 / 72; }
.scene__pc, .scene__sp {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: var(--c-bg-2);
  outline: 1px solid var(--c-line);
  box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.3);
}
.scene__pc { right: 0; top: 0; width: 90%; aspect-ratio: 3 / 2; border-radius: 6px; }
.scene__sp { left: 0; bottom: 0; width: 23%; aspect-ratio: 9 / 17; border-radius: 14px; }
.scene__pc img, .scene__sp img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* 画面の写真を見せる作品（LP ではないもの）：できることを番号つきの行で出す。写真は、右と下の余白を枠で切る。
   小さいほうの写真は、スマホの形ではなく、横長のまま重ねる */
.scene__points { counter-reset: pt; list-style: none; margin: clamp(20px, 3.4vh, 40px) 0 0; padding: 0; max-width: 32em; font-size: clamp(14.5px, 1.02vw, 18px); line-height: 1.9; color: var(--c-text); border-bottom: 1px solid var(--c-line); }
.scene__points li { counter-increment: pt; display: grid; grid-template-columns: 2.6em minmax(0, 1fr); padding: 0.6em 0; border-top: 1px solid var(--c-line); }
.scene__points li::before { content: counter(pt, decimal-leading-zero); padding-top: 0.35em; font-size: 12px; letter-spacing: 0.1em; color: var(--c-mute); }
.scene__for { margin-top: clamp(14px, 2.4vh, 26px); max-width: 32em; font-size: clamp(13px, 0.95vw, 16px); line-height: 1.9; color: var(--c-mute); }
.scene__for b { margin-right: 1em; font-weight: 500; color: var(--c-fg); }
.scene--shot .scene__pc, .scene--shot .scene__sp { background: #fff; }
.scene--shot .scene__pc img { width: 113.6%; max-width: none; height: auto; }
.scene--shot .scene__sp { width: 38%; aspect-ratio: 1180 / 1040; border-radius: 6px; }
.scene--shot .scene__sp img { width: 111.2%; max-width: none; height: auto; }

/* ---------- 作品の場面（PC：画面いっぱいに重ね、スクロールで奥行きの中を進む） ---------- */
.is-stage .works__label { display: none; }
.is-stage .stage { position: relative; height: 100vh; overflow: hidden; }
.is-stage .scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: calc(var(--head-h) + 2vh) var(--pad) 9vh;
  border: 0;
  overflow: visible;
  visibility: hidden;
}
.is-stage .scene__in {
  width: 100%;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(32px, 5vw, 110px);
}
.is-stage .scene__text, .is-stage .scene__media, .is-stage .scene__num { will-change: transform, opacity; }
.is-stage .scene__num { top: auto; right: auto; bottom: 5vh; left: var(--pad); font-size: min(60vh, 36vw); }
.is-stage .scene__media { perspective: 1500px; }
.is-stage .scene__tilt { max-width: min(100%, 118vh); margin-inline: auto; transform-style: preserve-3d; }
/* 1本おきに左右を入れ替える */
.is-stage .scene:nth-child(even) .scene__in { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.is-stage .scene:nth-child(even) .scene__text { order: 2; }
.is-stage .scene:nth-child(even) .scene__num { left: auto; right: var(--pad); }
.is-stage .scene:nth-child(even) .scene__pc { right: auto; left: 0; }
.is-stage .scene:nth-child(even) .scene__sp { left: auto; right: 0; }
.is-stage .stage__hud {
  position: absolute;
  z-index: 200;
  left: var(--pad); right: var(--pad); bottom: 3.2vh;
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
}
.stage__bar { position: relative; flex: 1; height: 1px; background: var(--c-line); }
.stage__bar span { position: absolute; inset: 0; background: var(--c-fg); transform: scaleX(0); transform-origin: left; }

/* ---------- 流れる大きな文字 ---------- */
.marquee { overflow: hidden; padding-top: clamp(60px, 10vh, 140px); white-space: nowrap; }
.marquee__track {
  display: inline-block;
  font-size: clamp(64px, 15vw, 300px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(12, 12, 12, 0.22);
  will-change: transform;
}

/* ---------- 一覧 ---------- */
.index { position: relative; padding: clamp(70px, 12vh, 160px) var(--pad) clamp(90px, 14vh, 180px); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: clamp(30px, 6vh, 80px); }
.sec-head__en { margin: 0; font-size: clamp(56px, 13vw, 260px); line-height: 0.95; font-weight: 500; letter-spacing: -0.035em; }
.index__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--c-line); }
.row {
  position: relative;
  display: grid;
  grid-template-columns: clamp(48px, 6vw, 110px) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 clamp(16px, 2.4vw, 44px);
  padding: clamp(20px, 3.2vh, 40px) 0;
  text-decoration: none;
  transition: opacity 0.5s ease;
}
.row__rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--c-line); transform-origin: left; }
.js .row__rule { transform: scaleX(0); transition: transform 1.3s var(--ease); }
.js .row.inview .row__rule { transform: none; }
.row__no { font-size: 13px; letter-spacing: 0.1em; color: var(--c-mute); }
.row__title { font-size: clamp(25px, 4.3vw, 92px); line-height: 1.2; font-weight: 500; transition: transform 0.7s var(--ease); }
.row__kind { font-size: clamp(12px, 0.95vw, 16px); color: var(--c-mute); white-space: nowrap; }
.row__thumb { display: none; }
@media (hover: hover) and (pointer: fine) {
  .index__list:hover .row { opacity: 0.28; }
  .index__list .row:hover, .index__list .row:focus-visible { opacity: 1; }
  .row:hover .row__title { transform: translateX(clamp(12px, 1.8vw, 36px)); }
}
/* マウスを追いかけるサムネ */
.index__float {
  --fw: clamp(260px, 25vw, 520px);
  position: fixed;
  z-index: 50;
  left: 0; top: 0;
  width: var(--fw);
  aspect-ratio: 3 / 2;
  margin: calc(var(--fw) * -0.36) 0 0 28px;
  overflow: hidden;
  background: var(--c-bg-2);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.index__float img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  transform: scale(1.14);
  transition: opacity 0.45s ease, transform 0.9s var(--ease);
}
.index__float img.is-on { opacity: 1; transform: none; }
.index__float img.is-shot { right: auto; bottom: auto; width: 113.6%; max-width: none; height: auto; }
.row__thumb.is-shot { object-position: left top; }

/* ---------- お仕事のご依頼（お受けしている仕事の案内） ---------- */
.order { position: relative; padding: 0 var(--pad) clamp(90px, 14vh, 180px); scroll-margin-top: calc(var(--head-h) + 16px); }
.order__title { margin: 0; font-size: clamp(34px, 6vw, 120px); line-height: 1.15; font-weight: 500; letter-spacing: 0.01em; }
.order__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 110px); align-items: start; }
.order__lead { max-width: 32em; font-size: clamp(15px, 1.2vw, 21px); line-height: 2; color: var(--c-text); }
.order__note { margin-top: 1.2em; max-width: 32em; font-size: clamp(14px, 1.02vw, 18px); line-height: 2; color: var(--c-mute); }
.order__list { counter-reset: od; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--c-line); font-size: clamp(18px, 1.7vw, 32px); line-height: 1.5; font-weight: 500; }
.order__list li { counter-increment: od; display: grid; grid-template-columns: 3.2em minmax(0, 1fr); align-items: baseline; padding: 0.8em 0; border-top: 1px solid var(--c-line); }
.order__list li::before { content: counter(od, decimal-leading-zero); font-size: 12px; font-weight: 400; letter-spacing: 0.1em; color: var(--c-mute); }
.order__info { grid-column: 1 / -1; margin: 0; font-size: clamp(14px, 1.02vw, 18px); line-height: 1.9; }
.order__info > div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 0 1em; padding: 0.9em 0; border-top: 1px solid var(--c-line); }
.order__info > div:last-child { border-bottom: 1px solid var(--c-line); }
.order__info dt { color: var(--c-mute); }
.order__info dd { margin: 0; color: var(--c-text); }

/* ---------- お仕事の相談 ---------- */
.contact { position: relative; overflow: hidden; padding: clamp(110px, 20vh, 260px) var(--pad); background: var(--c-bg-2); }
.contact__plane { position: absolute; right: -8%; top: -30%; width: 50vw; height: 130%; background: var(--c-bg-3); transform: rotate(8deg); }
.contact__plane--2 { right: auto; left: -10%; top: auto; bottom: -45%; width: 36vw; height: 90%; background: var(--c-bg); opacity: 0.6; transform: rotate(-6deg); }
.hl--c1 { right: 0; top: 24%; width: 40vw; --t: 18s; --al: 0.14; }
.hl--c2 { left: 70%; top: 0; height: 100%; --t: 23s; --dl: -9s; --mx: -3vw; --al: 0.12; }
.contact__in { position: relative; z-index: 1; }
.contact__title { margin: 0.15em 0 0; font-size: clamp(40px, 8.4vw, 170px); line-height: 1.15; font-weight: 500; letter-spacing: 0.01em; }
.contact__lead { margin-top: clamp(20px, 4vh, 48px); font-size: clamp(15px, 1.2vw, 21px); line-height: 2; color: var(--c-text); }
.contact__action { display: flex; flex-wrap: wrap; align-items: center; gap: 20px clamp(24px, 4vw, 64px); margin-top: clamp(32px, 6vh, 72px); }
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1em;
  padding: 1.1em 2em;
  border: 1px solid var(--c-fg);
  border-radius: 99px;
  overflow: hidden;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.5s ease;
}
.btn::before { content: ""; position: absolute; inset: 0; background: var(--c-fg); transform: translateY(101%); transition: transform 0.6s var(--ease); }
.btn > * { position: relative; }
.btn:hover, .btn:focus-visible { color: var(--c-bg); }
.btn:hover::before, .btn:focus-visible::before { transform: none; }

/* ---------- フッター ---------- */
.lp-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 28px var(--pad); background: var(--c-bg-2); border-top: 1px solid var(--c-line); font-size: 12px; letter-spacing: 0.08em; }
.lp-foot a { text-decoration: none; }

/* ---------- スマホ・狭い画面（軽い版） ---------- */
@media (max-width: 820px) {
  :root { --head-h: 60px; }
  .lp-head { grid-template-columns: 1fr auto; font-size: 12px; }
  .lp-head__logo { font-size: 14px; }
  .lp-head__slot { display: none; }
  .hero__foot { flex-wrap: wrap; }
  .hero__note { order: 3; width: 100%; }
  .pc-br { display: none; }
  .sec-head { flex-direction: column; gap: 8px; }
  .row { grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; }
  .row__kind { grid-column: 2; white-space: normal; }
  .row__thumb { display: block; order: -1; grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: top; margin-bottom: 16px; outline: 1px solid var(--c-line); }
  .index__float { display: none; }
  .order__in { grid-template-columns: 1fr; }
  .order__info > div { grid-template-columns: 1fr; }
  .contact__plane { width: 80vw; }
  /* 背景は軽く：層と線を減らし、全体の背景（キャンバス）は出さない */
  .bg, .layer--c, .layer--e, .layer--f, .hl--pc, .contact__plane--2 { display: none; }
}

/* 幅のせまいスマホ：上のメニュー（4つ）が入るように、すき間を詰める */
@media (max-width: 400px) {
  .lp-head { gap: 10px; letter-spacing: 0.04em; }
  .lp-head__nav { gap: 9px; }
}

/* ---------- タッチの端末（幅の広いタブレットも）：背景だけ、スマホと同じ軽い形にする。並び方は変えない ---------- */
@media (pointer: coarse) {
  .bg, .layer--c, .layer--e, .layer--f, .hl--pc, .contact__plane--2 { display: none; }
}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  .layer i, .hero__scroll i::after, .link:hover::after, .hl i, .hl--drift, .bg__plane i { animation: none; }
  .js .clip > span, .js .fade, .js .hero__title .ch, .js .row__rule { transform: none !important; opacity: 1 !important; transition: none !important; }
  .row__title, .btn::before, .index__float img { transition: none; }
}