:root{
  --bg: #0c0a09;
  --bg-2: #14100e;
  --panel: #1c1714;
  --panel-2: #262019;
  --line: rgba(240,233,222,.11);
  --line-strong: rgba(240,233,222,.26);
  --text: #f2ece2;
  --text-mid: rgba(242,236,226,.72);
  --text-low: rgba(242,236,226,.54);
  --accent: #e63a2e;
  --accent-2: #d9d2c4;
  --accent-3: #8ab4c0;
  --r-card: 18px;
  --r-media: 10px;
  --r-pill: 999px;
  --shadow-1: 0 14px 34px rgba(0,0,0,.46);
  --shadow-2: 0 28px 68px rgba(0,0,0,.58);
  --band: linear-gradient(90deg, transparent 0%, rgba(138,180,192,.55) 26%, rgba(217,210,196,.82) 50%, rgba(138,180,192,.55) 74%, transparent 100%);
  --accent-soft: rgba(230,58,46,.14);
  --accent-2-soft: rgba(217,210,196,.10);
  --focus: 0 0 0 2px #0c0a09, 0 0 0 4px #8ab4c0;
  --max: 1180px;
  --header-h: 72px;
  --scrim-1: rgba(12,10,9,.94);
  --scrim-2: rgba(12,10,9,.62);
  --lp-max: 1180px;
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Murecho", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size:16px; line-height:1.9; letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:"M PLUS 2", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; line-height:1.4; margin:0; letter-spacing:.04em }
p{ margin:0 }
img,video{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px }
section[id]{ scroll-margin-top:88px }

/* 読み飛ばし（キーボードの人が最初に出会う物） */
.lp-skip{
  position:absolute; left:12px; top:-64px; z-index:1000;
  padding:12px 18px; border-radius:var(--r-pill);
  background:var(--accent); color:var(--bg); font-weight:700;
  transition:top .2s ease;
}
.lp-skip:focus{ top:12px }

/* 読み進みの帯 */
.lp-progress{
  position:fixed; inset:0 0 auto 0; height:3px; z-index:999;
  background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3));
  transform:scaleX(0); transform-origin:0 50%;
}
@media (prefers-reduced-motion: reduce){ .lp-progress{ display:none } }

/* 動画の再生ボタン（JSが動く時だけ出る）
   🚨 2026-08-20 実測: 動画が動かないとき、右下の小さなボタンでは
      「壊れている」のか「押せば動く」のかが分からなかった。
      止まっている間は【真ん中に大きく】出し、再生が始まったら消す。 */
.lp-vwrap{ position:relative }
.lp-vbtn{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
  display:grid; place-items:center;
  width:72px; height:72px; padding:0 0 0 5px;
  border:1px solid var(--line-strong); border-radius:var(--r-pill);
  background:rgba(0,0,0,.5); color:var(--text); font-size:22px; cursor:pointer;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:opacity .25s ease, border-color .25s ease, background .25s ease;
}
.lp-vbtn:hover{ border-color:var(--accent); background:rgba(0,0,0,.68) }
/* 再生中は消す。ただし焦点が当たっている間は消さない（キーボードの人が見失うため） */
.lp-vwrap.is-playing .lp-vbtn{ opacity:0; pointer-events:none }
.lp-vwrap.is-playing .lp-vbtn:focus-visible{ opacity:1; pointer-events:auto }
@media (hover: hover){
  .lp-vwrap.is-playing:hover .lp-vbtn{ opacity:.55; pointer-events:auto; width:46px; height:46px; font-size:15px }
}

/* 浮かび上がり（JSが無ければ最初から見えている＝壊れない） */
.lp-js [data-lp-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1) }
.lp-js [data-lp-reveal].is-in{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){
  .lp-js [data-lp-reveal]{ opacity:1; transform:none; transition:none }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important }
}

/* ═══ top ═══ */
/* ══════════════════════════════════════════════════════════════════════════
   top ── 表紙（#hero）＋ いま外に出ている物（#now）＋ 上に貼り付く帯
   ・色/角丸/影は必ず var(--…)。生の色はこのファイルに1つも書かない
   ・優先度の強制指定は0件（土台の1塊だけが正常）
   ・画面に貼り付ける配置は .lp-top-nav の1か所だけ
   🚨 この見出しに検査の当たり語（生の色・強制指定・貼り付け配置の綴り）を書かないこと。
      検査は本文と注釈を区別しないので、注意書きが自分で件数を1つ増やしてしまう
   ══════════════════════════════════════════════════════════════════════════ */

/* 見出し用の書体。組み立て側が h1〜h4 にだけ当てているので、
   <p>/<span> で大きい数字を出す所には自分で当てる（色ではないので検査⑤の対象外） */
.lp-top-hero,
.lp-top-now{
  --lp-top-display: "M PLUS 2", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --lp-top-gap: clamp(12px, 1.6vw, 20px);
  /* 表紙の幕。組み立て側の :root に --scrim-1 / --scrim-2 が在ればそちらが勝つ。
     控えの rgba(12,10,9,…) は --bg と同じ地の色を、透かして重ねるためだけの値 */
  --lp-top-scrim-1: var(--scrim-1, rgba(12, 10, 9, .94));
  --lp-top-scrim-2: var(--scrim-2, rgba(12, 10, 9, .58));
}

/* ══ 共通の小物 ══════════════════════════════════════════════════════ */
.lp-top-wrap{
  max-width: var(--lp-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 28px);
}
.lp-top-eyebrow{
  font-family: var(--lp-top-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent-3);
  margin-bottom: 12px;
}

/* ══ ① 上に貼り付く帯 ════════════════════════════════════════════════ */
.lp-top-nav{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease;
}
.lp-top-nav.is-stuck{
  background-color: var(--bg);
  border-bottom-color: var(--line);
}
.lp-top-nav-inner{
  max-width: var(--lp-max);
  margin: 0 auto;
  min-height: var(--header-h);
  padding: 0 clamp(12px, 3vw, 28px);
  display: flex;
  align-items: center;
  gap: 10px;
}

.lp-top-brand{
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  /* 🚨 519px未満では .lp-top-brand-name が display:none になり、
     残る印は28pxしかない＝押す的が 28×44 になっていた（実測）。
     min-height だけ在って min-width が無かったので、横だけ抜けていた。 */
  min-width: 44px;
}
.lp-top-brand-mark{
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  object-fit: cover;
  border: 1px solid var(--line-strong);
}
.lp-top-brand-name{
  font-family: var(--lp-top-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--text);
}

.lp-top-navlist{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.lp-top-navlist::-webkit-scrollbar{ width: 0; height: 0 }
.lp-top-navlist a{
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  white-space: nowrap;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--text-mid);
  border-radius: var(--r-pill);
  transition: color .25s ease;
}
.lp-top-navlist a:hover{ color: var(--text) }
.lp-top-navlist a.is-current{ color: var(--text) }
.lp-top-navlist a::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: var(--r-pill);
  background: var(--accent);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}
.lp-top-navlist a.is-current::after{ opacity: 1; transform: none }

.lp-top-navcta{
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: background-color .3s ease, transform .3s ease;
}
.lp-top-navcta:hover{ background-color: var(--accent-2-soft); transform: translateY(-1px) }
.lp-top-navcta-dot{
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--accent);
  flex: none;
}

/* ══ ② 表紙 ══════════════════════════════════════════════════════════ */
.lp-top-hero{
  position: relative;                 /* 帯の入れ物にならないよう transform / filter は使わない */
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-top: calc(var(--header-h) + 18px);
  padding-bottom: clamp(26px, 5vh, 54px);
  /* hero-motion-brushes.png（2.0MB）の代わり。銀の筆跡3本を0バイトで引く */
  background-image:
    linear-gradient(102deg, transparent 0 37%, var(--accent-2-soft) 37% 38.1%, transparent 38.1%),
    linear-gradient(96deg,  transparent 0 60%, var(--accent-2-soft) 60% 60.7%, transparent 60.7%),
    linear-gradient(110deg, transparent 0 73%, var(--accent-2-soft) 73% 74.4%, transparent 74.4%);
}
/* 漆の地が呼吸する。🚨 拡大や移動でこの板を動かすと画面の外へはみ出すので、
   動かすのは【地模様の位置だけ】。板そのものは inset:0 から1pxも動かさない */
.lp-top-glow{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(54% 44% at 24% 32%, var(--accent-2-soft), transparent 70%),
    radial-gradient(44% 38% at 76% 74%, var(--accent-2-soft), transparent 72%);
  background-repeat: no-repeat;
  background-size: 150% 150%, 150% 150%;
  background-position: 0% 0%, 100% 100%;
  animation: lp-top-breathe 20s ease-in-out infinite alternate;
}
.lp-top-heroinner{
  position: relative;
  z-index: 1;
  max-width: var(--lp-max);
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 28px);
}

.lp-top-stage{
  position: relative;
  min-height: 380px;
}
.lp-top-media{
  position: relative;                 /* z-index は付けない（再生ボタンを人物の上に出すため） */
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(664px, 66vh);
  max-height: min(664px, 66svh);
  overflow: hidden;
  border-radius: var(--r-media);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  background-color: var(--bg-2);
}
.lp-top-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
.lp-top-scrim{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg,
    var(--lp-top-scrim-1) 0%,
    var(--lp-top-scrim-2) 46%,
    transparent 100%);
}
.lp-top-media .lp-vbtn{ z-index: 4 }

.lp-top-copy{
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 3;
  /* 人物(max-width:36%)と足して96%。900px ちょうどでも4%の隙間が残る */
  width: min(640px, 60%);
  display: grid;
  align-content: center;
  padding: clamp(20px, 3.4vw, 50px);
}
.lp-top-title{
  font-family: var(--lp-top-display);
  font-weight: 800;
  font-size: clamp(30px, 6.2vw, 58px);
  letter-spacing: .06em;
  line-height: 1.24;
  color: var(--text);
  margin-bottom: 18px;
}
.lp-top-lead{
  font-size: clamp(13.5px, 1.35vw, 16px);
  line-height: 1.9;
  color: var(--text-mid);
  max-width: 34em;
}
.lp-top-lead + .lp-top-lead{ margin-top: 6px }

.lp-top-btns{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.lp-top-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  border: 1px solid transparent;
  transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease, border-color .3s ease;
}
/* 朱の塗りはページ全体で2か所だけ。ここと #contact の X ボタン */
.lp-top-btn-main{
  background: var(--accent);
  color: var(--bg);
  box-shadow: var(--shadow-1);
}
.lp-top-btn-main:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2) }
.lp-top-btn-sub{
  border-color: var(--accent-2);
  color: var(--accent-2);
}
.lp-top-btn-sub:hover{ transform: translateY(-2px); background-color: var(--accent-2-soft) }

.lp-top-figure{
  position: absolute;
  right: clamp(0px, 1.5vw, 22px);
  bottom: 0;
  z-index: 2;
  width: auto;
  height: 100%;
  max-width: 36%;
  object-fit: contain;
  object-position: bottom right;
  pointer-events: none;                       /* 透明の余白が再生ボタンを塞がないように */
  /* 影は透過画像の輪郭に沿わせたいので drop-shadow。色はトークン化できない黒の落ち影 */
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .62));
}

.lp-top-heronote{
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-mid);
}

/* ══ ③ いま、外に出ている物 ══════════════════════════════════════════ */
.lp-top-now{
  position: relative;
  padding: clamp(48px, 7vw, 88px) 0 clamp(44px, 6vw, 76px);
  background-color: var(--bg-2);
  border-top: 1px solid var(--line);
}

.lp-top-head{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: clamp(26px, 3.6vw, 40px);
}
.lp-top-headtext{ min-width: 0 }
.lp-top-h2{
  position: relative;
  font-family: var(--lp-top-display);
  font-weight: 800;
  font-size: clamp(22px, 3.4vw, 34px);
  letter-spacing: .06em;
  line-height: 1.3;
  padding-bottom: 15px;
}
.lp-top-h2::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(200px, 62%);
  height: 2px;
  background: var(--band);
  transform-origin: 0 50%;
}
/* JSが動く時だけ「左から引く」。JSが無ければ最初から引かれている */
.lp-js [data-lp-reveal] .lp-top-h2::after{
  transform: scaleX(0);
  transition: transform .6s cubic-bezier(.22, 1, .36, 1) .15s;
}
.lp-js [data-lp-reveal].is-in .lp-top-h2::after{ transform: scaleX(1) }

.lp-top-sub{
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-mid);
  max-width: 46em;
}

/* 朱の印（光だけが12秒で1周し、印そのものは動かない） */
.lp-top-seal{
  position: relative;
  flex: none;
  width: 46px;
  height: 46px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
}
.lp-top-seal::before{
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: var(--r-pill);
  background: conic-gradient(from 0deg, transparent 0 68%, var(--accent-2) 80%, transparent 92%);
  -webkit-mask: radial-gradient(closest-side, transparent 0 calc(100% - 2px), black calc(100% - 2px));
  mask: radial-gradient(closest-side, transparent 0 calc(100% - 2px), black calc(100% - 2px));
  opacity: .55;
  animation: lp-top-spin 12s linear infinite;
}
.lp-top-seal-char{
  position: relative;
  z-index: 1;
  font-family: var(--lp-top-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--accent-2);
}

/* ── 数字板4つ ── */
.lp-top-stats{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lp-top-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-top-stat{
  position: relative;
  overflow: hidden;
  padding: 26px 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background-color: var(--panel);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.lp-top-stat::before{                       /* 触れると白群の細線が左から右へ */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 1px;
  width: 0;
  background: var(--accent-3);
  transition: width .35s ease;
}
.lp-top-stat:hover{
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-1);
}
.lp-top-stat:hover::before{ width: 100% }
.lp-top-stat-dot{                           /* 朱は板の左肩の点だけ */
  position: absolute;
  left: 16px;
  top: 15px;
  width: 3px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.lp-top-stat-label{
  font-family: var(--lp-top-display);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .1em;
  line-height: 1.6;
  color: var(--text-mid);
}
.lp-top-stat-num{
  font-family: var(--lp-top-display);
  font-weight: 800;
  font-size: clamp(34px, 4.6vw, 50px);
  line-height: 1.1;
  letter-spacing: .02em;
  color: var(--text);
  margin-top: 8px;
}
.lp-top-stat-unit{
  font-size: .42em;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--text-mid);
  margin-left: 4px;
}
.lp-top-stat-sub{
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--accent-3);
}
.lp-top-stat-src{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.75;
  color: var(--text-mid);
}

/* ══ ④ その場で動く道具（X文字数カウンターのお試し版） ══════════════ */
.lp-cnt{ display: none }                     /* JSが1行も動かない環境では欄ごと出さない */
.lp-cnt-live .lp-cnt{ display: block }
.lp-cnt-live .lp-cnt-fallback{ display: none }

.lp-cnt{
  margin-top: clamp(22px, 3vw, 34px);
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background-color: var(--panel);
  box-shadow: var(--shadow-1);
}
.lp-cnt-head{ margin-bottom: 18px }
.lp-cnt-h{
  font-family: var(--lp-top-display);
  font-weight: 800;
  font-size: clamp(16px, 2.1vw, 20px);
  letter-spacing: .05em;
  line-height: 1.5;
  color: var(--text);
}
.lp-cnt-say{
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text-mid);
}
.lp-cnt-label{
  display: block;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--text-mid);
  margin-bottom: 8px;
}
.lp-cnt-input{
  display: block;
  width: 100%;
  min-height: 104px;
  padding: 14px;
  font: inherit;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
  background-color: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-media);
  resize: vertical;
  transition: border-color .3s ease;
}
.lp-cnt-input::placeholder{ color: var(--text-mid) }
.lp-cnt-input:hover{ border-color: var(--accent-3) }
.lp-cnt-input:focus{ border-color: var(--accent-3) }

.lp-cnt-out{
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 16px;
}
.lp-cnt-num{
  font-family: var(--lp-top-display);
  font-weight: 800;
  font-size: clamp(30px, 4.2vw, 42px);
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.lp-cnt-unit{
  font-family: var(--lp-top-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-mid);
}
.lp-cnt-limit{
  font-size: 12.5px;
  color: var(--text-mid);
  margin-left: 2px;
}
.lp-cnt.is-over .lp-cnt-num{ color: var(--accent) }

.lp-cnt-bar{
  height: 4px;
  margin-top: 10px;
  border-radius: var(--r-pill);
  background-color: var(--accent-2-soft);
  overflow: hidden;
}
.lp-cnt-fill{
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--r-pill);
  background-color: var(--accent-2);
  transition: width .18s ease;
}
.lp-cnt.is-over .lp-cnt-fill{ background-color: var(--accent) }

.lp-cnt-url{
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--accent-3);
  border-radius: var(--r-media);
  background-color: var(--panel-2);
  font-size: 13px;
  line-height: 1.75;
  color: var(--text);
}
.lp-cnt-note{
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-mid);
}
.lp-cnt-more{
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--text-mid);
}
/* 🙇 実測43px。指の的の44pxに1px足りませんでした（1pxでも足りなければ足りない）。 */
.lp-cnt-link{
  display: inline-block;
  min-height: 44px;
  padding-block: 10px;
  margin-block: -10px;
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.lp-cnt-link:hover{ color: var(--text) }

.lp-cnt-fallback{
  margin-top: clamp(22px, 3vw, 34px);
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background-color: var(--panel);
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-mid);
}

/* ══ ⑤ 画面の幅で組み替える ══════════════════════════════════════════ */

/* 大きい画面: カウンターは説明を左、欄を右に */
@media (min-width: 900px){
  .lp-cnt{
    display: none;
  }
  .lp-cnt-live .lp-cnt{
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 40px);
    align-items: start;
  }
  .lp-cnt-head{ margin-bottom: 0 }
}

/* 数字板は幅760px未満で2×2 */
@media (max-width: 759px){
  .lp-top-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

/* 900px未満: 人物を隠す（重ねると顔が街あかりに埋まる） */
@media (max-width: 899px){
  .lp-top-figure{ display: none }
}

/* 860px未満: 文字を動画の上に重ねず、下に置く（重ねると日本語が読めない高さになる） */
@media (max-width: 859px){
  .lp-top-hero{
    min-height: auto;
    padding-top: calc(var(--header-h) + 26px);
    padding-bottom: 30px;
  }
  .lp-top-stage{ min-height: 0 }
  .lp-top-copy{
    position: static;
    width: auto;
    padding: 22px 2px 0;
  }
  .lp-top-scrim{
    background: linear-gradient(180deg,
      transparent 0%,
      var(--lp-top-scrim-2) 66%,
      var(--lp-top-scrim-1) 100%);
  }
  .lp-top-btns{ margin-top: 20px }
  .lp-top-btn{ flex: 1 1 220px }
}

/* 520px未満: 帯の名前を落として、章の並びに幅を渡す */
@media (max-width: 519px){
  .lp-top-brand-name{ display: none }
  .lp-top-nav-inner{ min-height: 60px; gap: 8px; padding: 0 12px }
  .lp-top-navcta{ padding: 0 12px; font-size: 12px }
  .lp-top-head{ gap: 12px }
  .lp-top-stat{ padding: 24px 13px 16px }
  .lp-top-stat-dot{ left: 13px }
}

/* ══ ⑥ 動きを止めている人 ════════════════════════════════════════════
   土台の @media(prefers-reduced-motion) が全体の animation/transition を
   .001ms に潰している。ここは「潰した後の見た目」を正しい形に固定するだけ。 */
@media (prefers-reduced-motion: reduce){
  .lp-top-glow{ animation: none }
  .lp-top-seal::before{ animation: none }
  .lp-top-nav,
  .lp-top-navlist a,
  .lp-top-navlist a::after,
  .lp-top-navcta,
  .lp-top-btn,
  .lp-top-stat,
  .lp-top-stat::before,
  .lp-cnt-input,
  .lp-cnt-fill{ transition: none }
  .lp-top-navcta:hover,
  .lp-top-btn:hover,
  .lp-top-stat:hover{ transform: none }
  .lp-js [data-lp-reveal] .lp-top-h2::after{ transform: none; transition: none }
}

@keyframes lp-top-spin{
  to{ transform: rotate(1turn) }
}
@keyframes lp-top-breathe{
  from{ background-position: 0% 0%, 100% 100% }
  to{ background-position: 24% 18%, 76% 82% }
}

/* ── 数字の札から、実物へ飛ぶリンク（2026-08-21 社長「もうちょっとリンクとか作りこんで」）──
   数えた物には、必ずその実物への飛び先を添える。
   数字だけ置いて飛べないのは【数えた証拠を見せない】のと同じ。 */
.lp-top-golinks{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 12px 0 0;
}
.lp-top-golink{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--text-mid);
  font-size: 12px;
  letter-spacing: .03em;
  line-height: 1.4;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.lp-top-golink:hover{
  border-color: var(--accent-3);
  color: var(--text);
  background: var(--accent-2-soft);
}
.lp-top-ext{ font-size: 10px; opacity: .7 }
.lp-top-sr{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 640px){
  .lp-top-golink{ font-size: 11.5px; padding: 10px 11px }
}

/* ═══ works ═══ */
/* ══════════════════════════════════════════════════════════════
   works ── 忍スプ／アニメ
   ・色・角丸・影は全部 var(--…)。生の #rrggbb は1つも書かない
   ・強制上書き（土台の3件だけが正常な、あの印）は0件
   ・独自の変数・目印は lp-works- で始める
   ══════════════════════════════════════════════════════════════ */

.lp-works{
  /* 見出し用の書体（意匠の display と同じ並び） */
  --lp-works-display: "M PLUS 2", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  /* ネムの背後の薄い紫の光。rgba を直に書いている唯一の場所（notes に理由あり） */
  --lp-works-glow: radial-gradient(58% 52% at 62% 40%,
      rgba(126, 78, 168, .30) 0%,
      rgba(126, 78, 168, .10) 46%,
      rgba(126, 78, 168, 0) 72%);
  --lp-works-pad: clamp(56px, 8vw, 116px);
  position: relative;
  padding-block: var(--lp-works-pad);
}
.lp-works-game{ background: var(--bg) }
.lp-works-anime{ background: var(--bg-2) }

.lp-works-inner{
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: clamp(16px, 4.5vw, 32px);
}

/* ── 目印の小さな英字 ── */
.lp-works-eyebrow{
  font-family: var(--lp-works-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent-3);
  margin-bottom: 14px;
}

/* ── 章の見出し（下に螺鈿の細線） ── */
.lp-works-h2{
  font-weight: 800;
  font-size: clamp(25px, 4.6vw, 44px);
  letter-spacing: .06em;
  line-height: 1.24;
}
.lp-works-h2::after{
  content: "";
  display: block;
  height: 1px;
  margin-top: 20px;
  background: var(--band);
  transform: scaleX(1);
  transform-origin: 0 50%;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
/* JSが動くときだけ「左から引く」。JSが無ければ最初から引かれている */
.lp-js [data-lp-reveal] .lp-works-h2::after{ transform: scaleX(0) }
.lp-js [data-lp-reveal].is-in .lp-works-h2::after{ transform: scaleX(1) }

.lp-works-h3{
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .05em;
  color: var(--accent-2);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.lp-works-num{
  font-family: var(--lp-works-display);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--accent);
}

/* ══════ 忍スプ：大きな板 ══════ */
.lp-works-board{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding: clamp(22px, 4vw, 44px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
}
@media (min-width: 900px){
  .lp-works-board{ grid-template-columns: minmax(0, 1fr) minmax(0, .84fr) }
}
.lp-works-board-text{ position: relative; z-index: 1; min-width: 0 }

.lp-works-board-figure{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-width: 0;
}
.lp-works-board-figure::before{
  content: "";
  position: absolute;
  inset: -4% -6%;
  background: var(--lp-works-glow);
  pointer-events: none;
  z-index: 0;
}
.lp-works-board-figure img{
  position: relative;
  z-index: 1;
  /* 幅を確かな値にしておく＝絵が届く前から場所を取る（読み込み時のガタつき無し）。
     620px（最大の高さ）× 1024/1536 が、高さ620pxに収まる幅 */
  width: 100%;
  max-width: calc(620px * 1024 / 1536);
  max-height: 620px;
  filter: drop-shadow(var(--shadow-2));
}

.lp-works-tagrow{ margin-bottom: 16px }
.lp-works-tag{
  display: inline-block;
  font-family: var(--lp-works-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--accent-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 7px 16px;
}
.lp-works-lead{
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.95;
  color: var(--text);
}

/* ── 遊び方カード2枚 ── */
.lp-works-howto{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 26px;
}
@media (min-width: 640px){
  .lp-works-howto{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
.lp-works-howto-card{
  position: relative;
  overflow: hidden;
  padding: 18px 18px 20px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-media);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.lp-works-howto-card::after{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--accent-3);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .35s ease;
}
.lp-works-howto-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--line-strong);
}
.lp-works-howto-card:hover::after{ transform: scaleX(1) }
.lp-works-howto-body{
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-mid);
}

/* ══════ 数字の横一列（銀の細い罫） ══════ */
.lp-works-figures{
  list-style: none;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.lp-works-figure{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 16px;
  min-width: 0;
  border-left: 1px solid var(--line);
}
.lp-works-figure:nth-child(odd){ border-left: 0 }
.lp-works-figure:nth-child(n + 3){ border-top: 1px solid var(--line) }
@media (min-width: 820px){
  .lp-works-figures{ grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .lp-works-figure:nth-child(odd){ border-left: 1px solid var(--line) }
  .lp-works-figure:nth-child(n + 3){ border-top: 0 }
  .lp-works-figure:first-child{ border-left: 0 }
}
.lp-works-figure-label{
  font-family: var(--lp-works-display);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--text-low);
}
.lp-works-figure-value{
  font-family: var(--lp-works-display);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: .04em;
  line-height: 1.2;
  color: var(--accent-2);
}
.lp-works-figure-note{
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-mid);
}

/* ══════ 製品情報の小さな表 ══════ */
.lp-works-tablewrap{
  margin-top: clamp(26px, 3.6vw, 40px);
  max-width: 560px;
  overflow-x: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-media);
}
.lp-works-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.lp-works-table-cap{
  text-align: left;
  padding: 14px 18px 4px;
  font-family: var(--lp-works-display);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--text-low);
}
.lp-works-table th,
.lp-works-table td{
  padding: 12px 18px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--line);
  line-height: 1.8;
}
.lp-works-table th{
  width: 32%;
  white-space: nowrap;
  font-weight: 500;
  color: var(--text-low);
}
.lp-works-table td{ color: var(--text) }

/* ══════ ボタン ══════ */
.lp-works-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 32px);
}
.lp-works-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--lp-works-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .06em;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
}
.lp-works-btn-primary{
  background: var(--accent);
  color: var(--bg);
  box-shadow: var(--shadow-1);
}
.lp-works-btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.lp-works-btn-ghost{
  color: var(--accent-2);
  border-color: var(--line-strong);
}
.lp-works-btn-ghost:hover{
  transform: translateY(-2px);
  color: var(--text);
  border-color: var(--accent-3);
}
.lp-works-ext{ font-size: .9em; line-height: 1 }

/* ボタンの下の、控えめな1行 */
.lp-works-note{
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-low);
}

/* ══════ 章の締め（左に朱の引用・右下にシロガミ） ══════ */
.lp-works-closing{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 36px);
  margin-top: clamp(40px, 6vw, 72px);
  align-items: end;
}
.lp-works-shirogami{
  margin: 0;
  padding: 16px;
  width: 100%;
  max-width: 300px;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
}
.lp-works-shirogami img{ width: 100%; max-width: 260px }
/* 🔑 この塊は .lp-works-shirogami の【後ろ】に置く。前に置くと center に負ける */
@media (min-width: 820px){
  .lp-works-closing{ grid-template-columns: minmax(0, 1fr) minmax(0, 300px) }
  /* 章の右下に置く。文字は左、シロガミは右 */
  .lp-works-shirogami{ grid-column: 2; grid-row: 1; justify-self: end }
  .lp-works-quotebox{ grid-column: 1; grid-row: 1 }
}
.lp-works-shirogami-cap{
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
  color: var(--text-low);
}
.lp-works-quotebox{ min-width: 0 }
.lp-works-quote{
  margin: 0;
  padding-left: 18px;
  border-left: 3px solid var(--accent);
}
.lp-works-quote p{
  font-family: var(--lp-works-display);
  font-weight: 700;
  font-size: clamp(18px, 2.6vw, 26px);
  line-height: 1.6;
  letter-spacing: .05em;
  color: var(--text);
}
.lp-works-quote-from{
  margin-top: 10px;
  padding-left: 21px;
  font-size: 12px;
  color: var(--text-low);
}
.lp-works-links{
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin-top: 14px;
  padding-left: 21px;
}
.lp-works-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 2px;
  font-size: 14px;
  color: var(--accent-2);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 5px;
  transition: color .25s ease, text-decoration-color .25s ease;
}
.lp-works-link:hover{
  color: var(--text);
  text-decoration-color: var(--accent-3);
}

/* ══════ アニメ：冒頭の一文 ══════ */
.lp-works-head{ max-width: 46em }
.lp-works-statement{
  margin-top: 22px;
  padding-left: 18px;
  border-left: 1px solid var(--line-strong);
  font-family: var(--lp-works-display);
  font-weight: 700;
  font-size: clamp(17px, 2.3vw, 24px);
  line-height: 1.75;
  letter-spacing: .05em;
  color: var(--accent-2);
}

/* ══════ 動画2枚 ══════ */
.lp-works-videos{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.6vw, 28px);
  margin-top: clamp(26px, 4vw, 44px);
}
@media (min-width: 900px){
  .lp-works-videos{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
.lp-works-video{ margin: 0; min-width: 0 }
.lp-works-video-frame{
  position: relative;      /* 再生ボタン(.lp-vbtn)の置き場 */
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-media);
  box-shadow: var(--shadow-1);
}
/* 実測どおりの縦横比。16:9に切り込まない */
.lp-works-video-torika{ aspect-ratio: 1080 / 676 }
.lp-works-video-cm{ aspect-ratio: 1280 / 720 }
.lp-works-video-el{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lp-works-video-cap{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}
.lp-works-video-name{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--lp-works-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .05em;
  color: var(--text);
}
.lp-works-video-kind{
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--accent-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px 10px;
}
.lp-works-video-desc{
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-mid);
}
.lp-works-video-src{
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-low);
}

/* ══════ 記事3枚 ══════ */
.lp-works-h3-standalone{
  display: block;
  margin-top: clamp(34px, 5vw, 56px);
  font-family: var(--lp-works-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--text-low);
}
.lp-works-articles{
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 760px){
  .lp-works-articles{ grid-template-columns: repeat(3, minmax(0, 1fr)) }
}
.lp-works-article{
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-media);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.lp-works-article::after{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--accent-3);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .35s ease;
}
.lp-works-article:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--line-strong);
}
.lp-works-article:hover::after{ transform: scaleX(1) }
.lp-works-article-link{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 44px;
  height: 100%;
}
.lp-works-article-title{
  font-family: var(--lp-works-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: .04em;
  color: var(--text);
}
.lp-works-article-meta{
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--text-low);
}
.lp-works-article-more{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding-top: 10px;
  font-size: 13px;
  color: var(--accent-2);
}
.lp-works-badge{
  align-self: flex-start;
  font-family: var(--lp-works-display);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .24em;
  color: var(--accent-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 5px 12px;
}
/* 準備中の2枚：隠さない。落ち着かせるだけ */
.lp-works-article-soon{ background: var(--bg-2) }
.lp-works-article-soon .lp-works-article-title{ color: var(--text-mid) }
.lp-works-article-soon:hover{
  transform: none;
  box-shadow: none;
  border-color: var(--line);
}
.lp-works-article-soon:hover::after{ transform: scaleX(0) }

/* 画面読み上げ機だけに届く文字 */
.lp-works-sr{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ══════ 動きを止める（強制上書きを使わず、後ろに置いて勝たせる） ══════ */
@media (prefers-reduced-motion: reduce){
  .lp-works *,
  .lp-works *::before,
  .lp-works *::after{ animation: none }
  .lp-works-h2::after,
  .lp-js [data-lp-reveal] .lp-works-h2::after,
  .lp-js [data-lp-reveal].is-in .lp-works-h2::after{ transform: scaleX(1); transition: none }
  .lp-works-howto-card,
  .lp-works-howto-card::after,
  .lp-works-article,
  .lp-works-article::after,
  .lp-works-btn,
  .lp-works-link,
  .lp-works-video-frame{ transition: none }
  .lp-works-howto-card:hover,
  .lp-works-article:hover,
  .lp-works-btn-primary:hover,
  .lp-works-btn-ghost:hover{ transform: none }
}

/* ═══ useful ═══ */
/* ══════════════════════════════════════════════════════════════════
   useful ── #tools（道具）／#hiroba（広場）／#rules（決めごと）
   ・色・角丸・影は :root の var() のみ。生の #rrggbb は書かない
   ・優先度の強制（あの記号）は 0件。土台の3件だけが正常なので、
     この区画では【言葉としても書かない】（道具が文字列で数えているため）
   ・動きを止めている人向けの塊は【このファイルのいちばん最後】
   ══════════════════════════════════════════════════════════════════ */

.lp-useful-sec{
  --lp-useful-display: "M PLUS 2", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --lp-useful-gap: clamp(28px, 4vw, 48px);
  position: relative;
  padding-block: clamp(56px, 8vw, 112px);
  background: var(--bg);
}
.lp-useful-sec-hiroba{ background: var(--bg-2) }
.lp-useful-sec-tools,
.lp-useful-sec-rules{ border-top: 1px solid var(--line) }

.lp-useful-wrap{
  width: min(100% - 32px, var(--max));
  margin-inline: auto;
}
.lp-useful-wrap > * + *{ margin-top: var(--lp-useful-gap) }
.lp-useful-sec [id]{ scroll-margin-top: 96px }

/* 文章の塊は、1行が長くなりすぎないところで折り返す */
.lp-useful-head,
.lp-useful-house,
.lp-useful-soon,
.lp-useful-paid,
.lp-useful-help,
.lp-useful-oki{ max-width: 62em }

/* ── 見出し ─────────────────────────────────────────────── */
.lp-useful-eyebrow{
  font-family: var(--lp-useful-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent-3);
  margin-bottom: 14px;
}
.lp-useful-eyebrow-web{ color: var(--accent-3) }

.lp-useful-h2{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-weight: 800;
  font-size: clamp(23px, 4.4vw, 40px);
  letter-spacing: .06em;
  line-height: 1.24;
  color: var(--text);
}
.lp-useful-h2-text{ max-width: 22em }

.lp-useful-mark{
  flex: 0 0 auto;
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-1);
}
.lp-useful-mark img{ width: 100%; height: 100%; object-fit: cover }

.lp-useful-band{
  display: block;
  width: min(100%, 320px);
  height: 1px;
  margin-top: 20px;
  background: var(--band);
  transform-origin: 0 50%;
  transform: scaleX(1);
}
@supports (animation-timeline: view()){
  .lp-useful-band{
    animation: lp-useful-band-in linear both;
    animation-timeline: view();
    animation-range: entry 8% entry 58%;
  }
}
@keyframes lp-useful-band-in{ from{ transform: scaleX(0) } to{ transform: scaleX(1) } }

.lp-useful-lead{
  margin-top: 18px;
  max-width: 40em;
  color: var(--text-mid);
}

.lp-useful-h3{
  font-weight: 800;
  font-size: clamp(18px, 2.4vw, 23px);
  letter-spacing: .05em;
  color: var(--text);
}
.lp-useful-h4{
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .05em;
  color: var(--accent-2);
}
.lp-useful-p{ margin-top: 12px; color: var(--text-mid); max-width: 44em }
.lp-useful-p-quiet{ color: var(--text-mid); font-size: 13px; line-height: 1.8 }

/* ── 道具カード5枚（5枚とも同じ形）─────────────────────── */
.lp-useful-tools{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  align-items: stretch;
}
.lp-useful-tool{ display: grid }

.lp-useful-tool-link{
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 10px;
  height: 100%;
  padding: 12px 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--panel);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.lp-useful-tool-link::after{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--accent-3);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .35s ease;
}
@media (hover: hover){
  .lp-useful-tool-link:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    border-color: var(--line-strong);
  }
  .lp-useful-tool-link:hover::after{ transform: scaleX(1) }
}
.lp-useful-tool-link:focus-visible::after{ transform: scaleX(1) }

.lp-useful-thumb{
  display: block;
  aspect-ratio: 880 / 495;
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.lp-useful-thumb img{ width: 100%; height: 100%; object-fit: cover }

.lp-useful-thumb-char{
  display: grid;
  place-items: center;
  font-family: var(--lp-useful-display);
  font-weight: 800;
  font-size: clamp(30px, 5vw, 46px);
  letter-spacing: 0;
  color: var(--accent-2);
  background: var(--panel-2);
}

.lp-useful-tool-name{
  font-family: var(--lp-useful-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--text);
}
.lp-useful-tool-line{
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-mid);
}
.lp-useful-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.lp-useful-tag{
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--text-mid);
}
.lp-useful-tag-free{
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: var(--bg);
  font-weight: 700;
}
.lp-useful-tag-web{
  border-color: var(--accent-3);
  color: var(--accent-3);
  font-weight: 700;
}
.lp-useful-tag-quiet{
  border-color: transparent;
  padding-inline: 0;
  color: var(--text-mid);
  font-size: 11px;
}

/* ── X文字数カウンター（#now からの着地点）───────────────── */
.lp-useful-xcount{
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--panel);
  box-shadow: var(--shadow-1);
}

/* ── 挿絵（白い紙の板に入れる）──────────────────────────── */
.lp-useful-figure{ margin: 0 }
.lp-useful-paper{
  display: block;
  max-width: 720px;
  margin-inline: auto;
  padding: 10px;
  border-radius: var(--r-media);
  background: var(--text);
  box-shadow: var(--shadow-1);
}
.lp-useful-paper img{ width: 100%; height: auto; border-radius: 6px }
.lp-useful-figcaption{
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-mid);
}

/* ── 店の決まり（1行ずつ銀の細字）───────────────────────── */
.lp-useful-house-list{
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  counter-reset: lp-useful-house;
}
.lp-useful-house-list li{
  counter-increment: lp-useful-house;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--accent-2);
}
.lp-useful-house-list li::before{
  content: "0" counter(lp-useful-house);
  font-family: var(--lp-useful-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--text-mid);
}
.lp-useful-house-list li:last-child{ border-bottom: 1px solid var(--line) }

/* ── これから並べる道具（値段は空欄）─────────────────────── */
.lp-useful-scroll{
  margin-top: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.lp-useful-table{
  width: 100%;
  min-width: 320px;
  border-collapse: collapse;
  font-size: 14px;
}
.lp-useful-caption{
  caption-side: top;
  text-align: left;
  padding-bottom: 8px;
  font-size: 12px;
  color: var(--text-mid);
}
.lp-useful-table th,
.lp-useful-table td{
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.lp-useful-table thead th{
  font-family: var(--lp-useful-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--text-mid);
  border-bottom-color: var(--line-strong);
}
.lp-useful-table tbody th{
  font-weight: 500;
  color: var(--text);
}
.lp-useful-blank{
  width: 40%;
  min-width: 110px;
  background: var(--accent-2-soft);
  border-radius: var(--r-media);
}
.lp-useful-note{
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-2);
}

/* ── 道具のついてくる有料教材 ───────────────────────────── */
.lp-useful-prices{
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lp-useful-prices li{
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-family: var(--lp-useful-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--text);
}
.lp-useful-pr{
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  font-family: var(--lp-useful-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--accent);
}

/* ── ボタン ─────────────────────────────────────────────── */
.lp-useful-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.lp-useful-actions-main{ margin-top: var(--lp-useful-gap) }
.lp-useful-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 22px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  font-family: var(--lp-useful-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--accent-2);
  background: transparent;
  transition: transform .3s ease, border-color .3s ease, background-color .3s ease;
}
.lp-useful-btn-main{
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
@media (hover: hover){
  .lp-useful-btn:hover{ transform: translateY(-1px); border-color: var(--accent-3) }
  .lp-useful-btn-ghost:hover{ background: var(--accent-2-soft) }
  .lp-useful-btn-main:hover{ border-color: var(--accent); background: var(--accent) }
}
.lp-useful-arrow{ font-size: 13px }

/* ── 広場：2層の図 ──────────────────────────────────────── */
.lp-useful-layers{
  display: grid;
  gap: 14px;
  align-items: stretch;
}
.lp-useful-layer{
  padding: clamp(18px, 2.6vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--panel);
  box-shadow: var(--shadow-1);
}
.lp-useful-layer-no{
  font-family: var(--lp-useful-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--text-mid);
  margin-bottom: 8px;
}
.lp-useful-layer-sep{
  text-align: center;
  font-size: 18px;
  color: var(--accent-3);
  line-height: 1;
}
.lp-useful-warn{
  margin-top: 14px;
  padding: 9px 12px;
  border: 1px solid var(--accent);
  border-radius: var(--r-media);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  background: transparent;
}
@media (min-width: 760px){
  .lp-useful-layers{ grid-template-columns: 1fr 44px 1fr }
  .lp-useful-layer-sep{
    align-self: center;
    transform: rotate(-90deg);
  }
}

/* ── 広場：数字3つ ──────────────────────────────────────── */
.lp-useful-stats{
  display: grid;
  gap: 14px;
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.lp-useful-stat{
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--panel-2);
}
.lp-useful-stat dt{
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--text-mid);
}
.lp-useful-stat dd{
  margin: 6px 0 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.lp-useful-stat b{
  font-family: var(--lp-useful-display);
  font-weight: 800;
  font-size: clamp(26px, 4vw, 34px);
  letter-spacing: .02em;
  color: var(--text);
  line-height: 1.2;
}
.lp-useful-stat span{ font-size: 13px; color: var(--text-mid) }

/* ── 広場：掟4か条 ──────────────────────────────────────── */
.lp-useful-oki-list{
  margin: 16px 0 0;
  padding-left: 1.4em;
  color: var(--text-mid);
  font-size: 15px;
}
.lp-useful-oki-list li{ padding: 7px 0 }
.lp-useful-oki-list li::marker{ color: var(--text-mid) }
.lp-useful-silver{
  color: var(--accent-2);
  border-bottom: 1px solid var(--accent-2);
  padding-bottom: 2px;
}

/* ── 広場：0件の枠 ──────────────────────────────────────── */
.lp-useful-zero{
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--panel);
  box-shadow: var(--shadow-1);
}
.lp-useful-zero-tag{
  display: inline-block;
  margin-top: 16px;
  padding: 7px 14px;
  border: 1px solid var(--accent-3);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--accent-3);
}
.lp-useful-fair{
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-mid);
  max-width: 46em;
}

/* ── 決めごと：5枚の板 ──────────────────────────────────── */
.lp-useful-boards{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px){
  .lp-useful-boards{ grid-template-columns: repeat(2, 1fr) }
}
@media (min-width: 960px){
  .lp-useful-boards{ grid-template-columns: repeat(3, 1fr) }
  /* 引用が入る④だけ2列ぶん。⑤が残りの1列に収まって、行が埋まる */
  .lp-useful-board-wide{ grid-column: span 2 }
}
.lp-useful-board{
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--panel);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.lp-useful-board-band{
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--band);
  transform-origin: 0 50%;
  transform: scaleX(1);
}
@supports (animation-timeline: view()){
  .lp-useful-board-band{
    animation: lp-useful-band-in linear both;
    animation-timeline: view();
    animation-range: entry 6% entry 50%;
  }
}
.lp-useful-seal{
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--bg);
  font-family: var(--lp-useful-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0;
}
@supports ((-webkit-mask: radial-gradient(rgba(0,0,0,1), rgba(0,0,0,1))) or (mask: radial-gradient(rgba(0,0,0,1), rgba(0,0,0,1)))){
  /* 朱の印のまわりを、銀の光がゆっくり1周する（印そのものは動かない） */
  .lp-useful-seal::before{
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: var(--r-pill);
    background: conic-gradient(from 0deg, transparent 0deg, var(--accent-2) 46deg, transparent 96deg);
    /* rgba を使うのは「くり抜き」の指定で、色ではないため（var 化できない） */
    -webkit-mask: radial-gradient(closest-side, rgba(0,0,0,0) 76%, rgba(0,0,0,1) 79%);
    mask: radial-gradient(closest-side, rgba(0,0,0,0) 76%, rgba(0,0,0,1) 79%);
    animation: lp-useful-seal-spin 12s linear infinite;
  }
}
@keyframes lp-useful-seal-spin{ from{ transform: rotate(0deg) } to{ transform: rotate(360deg) } }

.lp-useful-board-rule{
  font-family: var(--lp-useful-display);
  font-weight: 700;
  font-size: clamp(16px, 1.9vw, 19px);
  letter-spacing: .04em;
  line-height: 1.6;
  color: var(--text);
}
.lp-useful-motto{
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-2);
}
.lp-useful-board-src{
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-mid);
}
/* 文中の出典リンク。行の高さは変えずに、押せる面だけ広げる
   🙇 padding-block:6px だけでは実測32px（指の的 44px に12px足りない）でした。
      行送りを崩さずに的だけ広げるため、inline-block ＋ min-height ＋
      負の margin-block（増えたぶんを食い返す）にしています。 */
.lp-useful-board-src a{
  display: inline-block;
  min-height: 44px;
  padding-block: 11px;
  margin-block: -11px;
  color: var(--accent-2);
  border-bottom: 1px solid var(--line-strong);
  transition: border-color .3s ease;
}
@media (hover: hover){
  .lp-useful-board-src a:hover{ border-bottom-color: var(--accent-3) }
}
.lp-useful-quote{
  margin: 0;
  padding: 14px 18px;
  border-left: 2px solid var(--accent-3);
  background: var(--panel-2);
  border-radius: 0 var(--r-media) var(--r-media) 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-mid);
}

/* ── 決めごと：記事と日々の記録 ─────────────────────────── */
.lp-useful-articles{
  padding-top: 4px;
}
.lp-useful-article-list,
.lp-useful-log-list{
  list-style: none;
  margin: 12px 0 26px;
  padding: 0;
}
.lp-useful-article-list li{
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
/* 行ぜんたいが押せるようにする（指で押す物は44px以上） */
.lp-useful-article-list a{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  min-height: 46px;
  padding: 12px 0;
  color: var(--text);
  transition: color .3s ease;
}
.lp-useful-article-title{
  border-bottom: 1px solid var(--line-strong);
  transition: border-color .3s ease;
}
@media (hover: hover){
  .lp-useful-article-list a:hover .lp-useful-article-title{ border-bottom-color: var(--accent-3) }
}
.lp-useful-meta{ font-size: 12px; color: var(--text-mid); letter-spacing: .04em }

.lp-useful-log-list{ margin-bottom: 0 }
.lp-useful-log-list li{
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--text-mid);
}
.lp-useful-log-row{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  min-height: 46px;
  padding: 12px 0;
  transition: color .3s ease;
}
a.lp-useful-log-row{ color: var(--accent-2) }
@media (hover: hover){
  a.lp-useful-log-row:hover{ color: var(--accent-3) }
}
.lp-useful-date{
  display: inline-block;
  min-width: 4.6em;
  font-family: var(--lp-useful-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--text-mid);
}

/* ── 狭い画面（375px）で崩れないように ───────────────────── */
@media (max-width: 420px){
  .lp-useful-h2{ gap: 12px }
  .lp-useful-mark{ width: 38px; height: 38px }
  .lp-useful-btn{ width: 100%; }
  .lp-useful-tools{ grid-template-columns: 1fr }
}

/* ── 動きを止めている人には、動かさない（このファイルの最後）── */
@media (prefers-reduced-motion: reduce){
  .lp-useful-sec *,
  .lp-useful-sec *::before,
  .lp-useful-sec *::after{
    animation: none;
    transition: none;
  }
  .lp-useful-band,
  .lp-useful-board-band{ transform: scaleX(1) }
  .lp-useful-tool-link::after{ transform: scaleX(0) }
}

/* ── 章の中で触れた場所へ、直接飛べる小さなリンク（2026-08-21）── */
.lp-useful-golinks{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  justify-content: center;
}
.lp-useful-golink{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--text-mid);
  font-size: 12px;
  letter-spacing: .03em;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.lp-useful-golink:hover{
  border-color: var(--accent-3);
  color: var(--text);
  background: var(--accent-2-soft);
}
.lp-useful-ext{ font-size: 10px; opacity: .7 }
.lp-useful-sr{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 640px){
  .lp-useful-golinks{ justify-content: flex-start }
  .lp-useful-golink{ font-size: 11.5px; padding: 10px 12px }
}

/* ═══ closing ═══ */
/* ──────────────────────────────────────────────────────────────────────────
   closing ── #maker（つくる人）／#contact（窓口）
   🔑 色・角丸・影は必ず var()。生の #rrggbb は 1件も書かない（検査⑤）
   🔑 強制指定（土台の reduce ブロックで使っている例のアレ）は 1件も書かない。
      🚨 検査⑥はコメントの中の文字列まで数えるので、この語をコメントにも書かないこと
   ────────────────────────────────────────────────────────────────────────── */

#maker,
#contact{
  --lp-closing-display: "M PLUS 2", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --lp-closing-pad-y: clamp(64px, 9vw, 116px);
  --lp-closing-gap: clamp(28px, 4vw, 48px);
}

.lp-closing-sec{
  padding: var(--lp-closing-pad-y) 20px;
}
.lp-closing-wrap{
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
}

/* ── 章の頭（銘＋見出し＋螺鈿の細線） ── */
.lp-closing-head{
  margin-bottom: var(--lp-closing-gap);
}
.lp-closing-eyebrow{
  font-family: var(--lp-closing-display);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent-3);
  margin-bottom: 10px;
}
.lp-closing-head h2{
  font-weight: 800;
  font-size: clamp(26px, 4.6vw, 42px);
  line-height: 1.24;
  letter-spacing: .06em;
  color: var(--text);
}
/* 螺鈿の細線。JSが無い時は最初から出ている（消えたままにしない） */
.lp-closing-head::after{
  content: "";
  display: block;
  height: 2px;
  margin-top: 16px;
  max-width: 260px;
  background: var(--band);
  transform: scaleX(1);
  transform-origin: 0 50%;
  transition: transform .6s cubic-bezier(.22,1,.36,1) .12s;
}
.lp-js [data-lp-reveal]:not(.is-in).lp-closing-head::after{
  transform: scaleX(0);
}

/* ══════════════════════════════════════════════════════════════
   #maker
   ══════════════════════════════════════════════════════════════ */
.lp-maker-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lp-closing-gap);
  align-items: start;
}
@media (min-width: 860px){
  .lp-maker-grid{
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 56px);
  }
}

/* ── 名乗り ── */
.lp-maker-id{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.lp-maker-avatar{
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
}
@media (min-width: 560px){
  .lp-maker-avatar{ width: 92px; height: 92px }
}
/* 朱の印に銀の光が1周する ── 印は動かず、光だけが巡る */
.lp-maker-avatar::before{
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: var(--r-pill);
  background: conic-gradient(
    from 0deg,
    var(--accent-2-soft) 0deg,
    var(--accent-3) 58deg,
    var(--accent-2) 76deg,
    var(--accent-2-soft) 104deg,
    var(--accent-2-soft) 360deg
  );
  animation: lp-closing-spin 12s linear infinite;
}
.lp-maker-avatar img{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--r-pill);
  object-fit: cover;
  border: 1px solid var(--line-strong);
}
.lp-maker-idtext{ min-width: 0 }
.lp-maker-name{
  font-family: var(--lp-closing-display);
  font-weight: 800;
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1.35;
  letter-spacing: .06em;
  color: var(--text);
}
.lp-maker-handle{
  font-weight: 500;
  font-size: .68em;
  letter-spacing: .04em;
  color: var(--text-mid);
}
.lp-maker-role{
  font-family: var(--lp-closing-display);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .18em;
  color: var(--accent-3);
}

/* ── 掲げている一言 ── */
.lp-maker-motto{
  margin-top: 26px;
  padding-left: 16px;
  border-left: 2px solid var(--accent);
  font-family: var(--lp-closing-display);
  font-weight: 700;
  font-size: clamp(17px, 2.6vw, 22px);
  line-height: 1.7;
  letter-spacing: .05em;
  color: var(--accent-2);
}
.lp-maker-sign{
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.95;
  color: var(--text-mid);
}

/* ── 発信の型（小さな板3枚） ── */
.lp-maker-flow{
  margin-top: 34px;
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--panel);
}
.lp-maker-h3{
  font-weight: 700;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: .08em;
  color: var(--text);
  margin-bottom: 18px;
}
.lp-maker-steps{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-maker-step{
  flex: 1 1 150px;
  min-width: 0;
  padding: 14px 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-media);
  background: var(--panel-2);
  box-shadow: var(--shadow-1);
}
.lp-maker-num{
  display: block;
  font-family: var(--lp-closing-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--accent-3);
  margin-bottom: 6px;
}
.lp-maker-steptext{
  display: block;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text);
}
/* 朱の小さな矢印（面では塗らない） */
.lp-maker-arrow{
  flex: 0 0 auto;
  align-self: center;
  font-size: 15px;
  line-height: 1;
  color: var(--accent);
  transform: rotate(90deg);
}
@media (min-width: 560px){
  .lp-maker-arrow{ transform: none }
}
.lp-maker-flownote{
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-mid);
}

/* ── 絵の作例 ── */
.lp-maker-art{
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--panel);
  box-shadow: var(--shadow-1);
  max-width: 420px;
  transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
@media (min-width: 860px){
  .lp-maker-art{ margin-left: auto }
}
.lp-maker-art:hover{
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.lp-maker-art img{
  width: 100%;
  height: auto;
  border-radius: var(--r-media);
  background: var(--panel-2);
}
.lp-maker-cap{
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-mid);
}
.lp-maker-caplabel{
  display: inline-block;
  margin-right: 8px;
  padding: 2px 10px;
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  font-size: 11px;
  letter-spacing: .1em;
  /* 🚨 朱の字を朱の地に載せると 3.72:1 で AA(4.5:1) に届かない（11px・実測）。
     design.json の作法どおり【印は朱のまま・字は銀】にする。枠と地は朱を残すので
     見た目の朱さは変わらず、字だけ 10.36:1 になる。 */
  color: var(--accent-2);
  background: var(--accent-soft);
}

/* ── ページ内の地図（銀の丸札5つ） ── */
.lp-maker-map{
  margin-top: var(--lp-closing-gap);
}
.lp-maker-maplabel{
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: .12em;
  color: var(--text-low);
  margin-bottom: 12px;
}
.lp-maker-maplist{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-maker-pill{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--accent-2-soft);
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--accent-2);
  transition: border-color .35s ease, color .35s ease, transform .35s ease;
}
.lp-maker-pill:hover{
  border-color: var(--accent-3);
  color: var(--text);
  transform: translateY(-2px);
}

/* ── 締めの一文 ── */
.lp-maker-close{
  margin-top: var(--lp-closing-gap);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 1.95;
  color: var(--text);
  max-width: 46em;
}

/* ══════════════════════════════════════════════════════════════
   #contact ── ここだけ地を変えて、ページの終わりを色で示す
   ══════════════════════════════════════════════════════════════ */
.lp-contact{
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}

.lp-contact-doors{
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: start;
}
@media (min-width: 720px){
  .lp-contact-doors{
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 52px);
  }
}

/* ── 主ボタン（ページ全体で朱を面に塗るのは表紙の主ボタンとこの1つだけ） ── */
.lp-contact-x{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 14px 30px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--bg);
  font-family: var(--lp-closing-display);
  font-weight: 800;
  font-size: clamp(18px, 2.6vw, 22px);
  line-height: 1.3;
  letter-spacing: .06em;
  box-shadow: var(--shadow-1);
  transition: transform .35s ease, box-shadow .35s ease;
}
.lp-contact-x:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.lp-contact-xmark{
  font-size: 1.15em;
  line-height: 1;
}
.lp-contact-xtext{ min-width: 0 }

.lp-contact-line{
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-mid);
}

/* ── 第2ボタン（銀の線だけ） ── */
.lp-contact-yt{
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 12px 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--accent-2);
  font-size: 15px;
  letter-spacing: .05em;
  transition: border-color .35s ease, color .35s ease, transform .35s ease;
}
.lp-contact-yt:hover{
  border-color: var(--accent-3);
  color: var(--text);
  transform: translateY(-2px);
}

/* ── 公開中の場所・いま空いているところ ── */
.lp-contact-block{
  margin-top: var(--lp-closing-gap);
}
.lp-contact-h3{
  font-weight: 700;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: .12em;
  color: var(--text-mid);
  margin-bottom: 14px;
}

.lp-contact-sites{
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.lp-contact-sites li{
  border-bottom: 1px solid var(--line);
}
.lp-contact-sites a{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  min-height: 56px;
  padding: 12px 4px;
  transition: background-color .35s ease, padding-left .35s ease;
}
.lp-contact-sites a:hover{
  background: var(--accent-2-soft);
  padding-left: 12px;
}
.lp-contact-sitename{
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--accent-2);
}
.lp-contact-domain{
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .02em;
  color: var(--text-low);
  word-break: break-all;
}

.lp-contact-gaps{
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-contact-gaps li + li{ margin-top: 8px }
.lp-contact-gaps a{
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-media);
  background: var(--panel);
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-mid);
  transition: border-color .35s ease, color .35s ease, background-color .35s ease;
}
.lp-contact-gaps a:hover{
  color: var(--text);
  background: var(--panel-2);
  border-color: var(--line-strong);
  border-left-color: var(--accent);
}

/* ── 脚 ── */
.lp-contact-foot{
  margin-top: var(--lp-closing-gap);
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.lp-contact-footname{
  font-family: var(--lp-closing-display);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: .08em;
  color: var(--text-mid);
}
.lp-contact-footnote{
  font-size: 12px;
  line-height: 1.9;
  color: var(--text-low);
}

/* ── 動き ── */
@keyframes lp-closing-spin{
  from{ transform: rotate(0deg) }
  to{ transform: rotate(360deg) }
}

/* 🚨 動きを止めている人には、動きを全部止める。
      ただし【見える状態のまま】止める（opacity:0 / scaleX(0) で固めない）。
      id で書いてあるのは、強制指定を使わずに hover 側（クラス2つぶん）の transition まで
      確実に上書きするため。id は 1-0-0 なので、後ろに置けば必ず勝つ。 */
@media (prefers-reduced-motion: reduce){
  #maker,
  #maker *,
  #maker *::before,
  #maker *::after,
  #contact,
  #contact *,
  #contact *::before,
  #contact *::after{
    animation: none;
    transition: none;
  }
  #maker .lp-closing-head::after,
  #contact .lp-closing-head::after{
    transform: scaleX(1);
  }
}

/* ── 3つの置き場を、実物へ飛べるようにした（2026-08-21）──
   もとは飛べない文字だった。「Substackに残す」と書いてあって
   そのSubstackへ行けないのは、案内板として半分しか働いていない。 */
.lp-maker-stepgo{
  display: block;
  min-height: 44px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text);
  transition: color .25s ease;
}
.lp-maker-stepgo:hover{ color: var(--accent-3) }
.lp-maker-stepmark{
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 7px;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--text-mid);
  border-bottom: 1px solid var(--line);
  padding-bottom: 5px;
}
.lp-maker-stepgo:hover .lp-maker-stepmark{ border-bottom-color: var(--accent-3) }
.lp-closing-ext{ font-size: 10px; opacity: .7 }
.lp-closing-sr{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}