@charset "UTF-8";
/* ==========================================================================
   web.css — /web/（ホームページ制作）固有
   並び：ページFV → 目次 → PROMISE → PLANS → TEMPLATES → SUPPORT → FLOW → FAQ
   各ブロックの中で「ベース → 1024px以下 → 768px以下 → 480px以下」
   ========================================================================== */

/* 文章の改行：文節で折り返す（未対応のブラウザは通常の改行） */
.wfv__lead, .checks li > span, .terms dd, .promise__title, .promise__body, .tplrow__copy, .tplrow__sub, .qa__text, .qa__a p, .step__title, .step__body, .support__catch, .unseen__title {
  word-break: auto-phrase;
}


/* ==========================================================================
   ページFV
   ========================================================================== */
.wfv { position: relative; padding: calc(var(--header-h) + clamp(24px, 4vw, 56px)) var(--m) 0; overflow-x: clip; }
.wfv__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  transform: translate(var(--px, 0px), var(--py, 0px));
  transition: transform .9s var(--ease-out);
}
.wfv__copy { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 28px); }
.wfv__label { min-height: 1.8em; font-size: 12px; line-height: 1.8; letter-spacing: .24em; color: var(--c-accent); }
.wfv__label [data-decode] { display: inline-block; white-space: pre; }

.wfv__title { display: flex; flex-direction: column; gap: 14px; font-weight: 700; }
.wfv__en { display: block; font-size: clamp(60px, 10vw, 156px); line-height: .88; letter-spacing: -.045em; }
.wfv__word { display: block; }
.js .wfv__word .char > span { transform: translateY(110%); transition: transform .75s var(--ease-out) calc(var(--i) * 40ms); }
.wfv.is-intro-1 .wfv__word .char > span { transform: none; }

/* 「design.」：黄色いカーソルが左から走り、輪郭の文字を描いていく */
.wfv__draw { position: relative; display: inline-block; }
.wfv__outline { display: block; color: transparent; -webkit-text-stroke: 1.5px var(--c-text); }
.wfv__caret { position: absolute; top: 4%; bottom: 0; left: 0; width: 3px; background: var(--c-accent); opacity: 0; pointer-events: none; }
.js .wfv__outline { clip-path: inset(-4% 100% -4% 0); }
.wfv.is-intro-2 .wfv__outline { clip-path: inset(-4% -2% -4% 0); transition: clip-path .9s cubic-bezier(.6, 0, .25, 1); }
.wfv.is-intro-2 .wfv__caret { animation: caret .9s cubic-bezier(.6, 0, .25, 1) forwards; }
@keyframes caret {
  0%   { left: 0; opacity: 1; }
  90%  { left: 100%; opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.wfv__ja { display: block; font-size: clamp(18px, 1.8vw, 26px); letter-spacing: .08em; }
.wfv__ja .char { overflow: visible; }
.js .wfv__ja .char > span { opacity: 0; filter: blur(10px); transition: opacity .6s ease calc(var(--i) * 45ms), filter .7s ease calc(var(--i) * 45ms); }
.wfv.is-intro-3 .wfv__ja .char > span { opacity: 1; filter: none; }

.wfv__lead { max-width: 34em; font-size: clamp(15px, 1.15vw, 17px); line-height: 2.1; color: var(--c-sub); }
.js .wfv__lead { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .9s var(--ease-out); }
.wfv.is-intro-3 .wfv__lead { opacity: 1; transform: none; }

/* 3つの数字：枠線が引かれ、数字がスロットのように回って止まる */
/* 数字は改行させず、枠（.facts）の幅に合わせて文字の大きさを決める（cqi＝枠の幅の1%） */
.facts { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); container-type: inline-size; }
.facts::before, .facts::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--c-line); transform-origin: left; }
.facts::before { top: 0; }
.facts::after { bottom: 0; }
.js .facts::before, .js .facts::after { transform: scaleX(0); transition: transform 1s var(--ease-io) .2s; }
.wfv.is-intro-3 .facts::before, .wfv.is-intro-3 .facts::after { transform: none; }
.fact { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 2vw, 28px) clamp(12px, 1.6vw, 24px); }
.fact + .fact { border-left: 1px solid var(--c-line); }
.fact dt { font-size: 11px; letter-spacing: .16em; color: var(--c-mute); }
.fact__plus { margin-right: 6px; color: var(--c-accent); font-weight: 700; }
.fact dd { display: flex; flex-direction: column; gap: 6px; }
.fact__v { font-size: clamp(20px, 4.6cqi, 44px); font-weight: 700; line-height: 1; letter-spacing: -.03em; white-space: nowrap; }
.fact__v--accent { color: var(--c-accent); }
.fact__note { font-size: 12px; color: var(--c-gray); }
.fact__from { margin-left: 2px; font-size: .5em; letter-spacing: 0; }
.js .fact { opacity: 0; transform: translateY(20px); transition: opacity .6s ease calc(.3s + var(--i) * 120ms), transform .8s var(--ease-out) calc(.3s + var(--i) * 120ms); }
.wfv.is-intro-3 .fact { opacity: 1; transform: none; }

/* スロット（数字の列）。JSが帯を作る。JSなしでは data-d の数字をそのまま表示 */
.slots { display: inline-flex; align-items: baseline; }
.slot { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: top; }
.slot::before { content: attr(data-d); }
.slot.is-built::before { content: none; }
.slot__col { display: flex; flex-direction: column; transform: translateY(0); }
.slot__col span { display: block; height: 1em; line-height: 1; }
.is-spun .slot__col { transform: translateY(calc(var(--to) * -1em)); transition: transform var(--dur) cubic-bezier(.15, .85, .25, 1) var(--delay); }
.slot-s { display: inline-block; line-height: 1; }

@media (max-width: 1024px) {
  .wfv__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact__v { font-size: clamp(24px, 6.4cqi, 40px); }
  .fact:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--c-line); }
}
@media (max-width: 480px) {
  .sec-title { font-size: 12vw; }
  .wfv__en { font-size: 19vw; }
  /* 3つとも1列。各行は「項目名」と「数字」を左右に */
  .facts { grid-template-columns: minmax(0, 1fr); }
  .fact { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; padding: 16px 4px; }
  .fact + .fact { border-left: 0; border-top: 1px solid var(--c-line); }
  .fact:nth-child(3) { grid-column: auto; }
  .fact dd { align-items: flex-end; text-align: right; }
  .fact__v { font-size: 28px; }
}

/* ==========================================================================
   目次：スクロールすると上に固定。今いるセクションを黄色で示し、下の線で進み具合を表示
   ========================================================================== */
.toc {
  position: sticky;
  top: 0;
  z-index: 30;
  margin-top: clamp(48px, 6vw, 96px);
  background: rgba(13, 13, 15, .86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  transition: top .5s var(--ease-out);
}
/* ヘッダーが出ているときは、その下に並べる */
html:has(.site-header.is-scrolled:not(.is-hidden)) .toc { top: var(--header-h); }
.toc__list { display: flex; margin: 0; padding: 0 var(--m); list-style: none; overflow-x: auto; scrollbar-width: none; }
.toc__list::-webkit-scrollbar { display: none; }
.toc__list li { flex: 1 0 auto; }
.toc__list a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 0 16px;
  font-size: 13px;
  letter-spacing: .14em;
  text-decoration: none;
  color: var(--c-gray);
  transition: color .3s;
}
.toc__list li + li a { border-left: 1px solid var(--c-line); }
.toc__no { font-size: 11px; color: var(--c-mute); transition: color .3s; }
.toc__list a::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 14px;
  height: 1px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease-io);
}
.toc__list a.is-current { color: var(--c-text); }
.toc__list a.is-current .toc__no { color: var(--c-accent); }
.toc__list a.is-current::after { transform: scaleX(1); transform-origin: left; }
@media (hover: hover) {
  .toc__list a:hover { color: var(--c-text); }
}
.toc__bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--c-accent); transform: scaleX(var(--progress, 0)); transform-origin: left; }

/* 収まらないときの左右ボタン：端をぼかして「続きがある」ことも見せる */
.toc__nav {
  position: absolute;
  top: 0; bottom: 0;
  z-index: 1;
  width: 56px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 0;
  color: var(--c-text);
  font-size: 16px;
  cursor: pointer;
}
.toc__nav[hidden] { display: none; }
.toc__nav--prev { left: 0; justify-content: flex-start; background: linear-gradient(to right, #0D0D0F 45%, rgba(13, 13, 15, 0)); }
.toc__nav--next { right: 0; justify-content: flex-end; background: linear-gradient(to left, #0D0D0F 45%, rgba(13, 13, 15, 0)); }
.toc__nav span { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--c-line-2); border-radius: 50%; background: var(--c-bg); transition: border-color .3s, color .3s; }
@media (hover: hover) {
  .toc__nav:hover span { border-color: var(--c-accent); color: var(--c-accent); }
}
.toc__nav:focus-visible { outline: none; }
.toc__nav:focus-visible span { outline: 2px solid var(--c-accent); outline-offset: 2px; }

@media (max-width: 768px) {
  .toc__list { padding: 0; }
  .toc__list a { min-height: 52px; padding: 0 14px; font-size: 12px; }
  .toc__list a::after { left: 14px; right: 14px; bottom: 12px; }
}

/* 目次の分、各セクションの位置を下げてから止める */
.sec { scroll-margin-top: calc(var(--header-h) + 60px); }
.sec--first { border-top: 0; }

/* ==========================================================================
   01 PROMISE：線が伸び、輪郭の番号が描かれ、見出しと本文が続く
   ========================================================================== */
.promises { margin: 0; padding: 0; list-style: none; }
.promise {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, .6fr) minmax(0, 1.2fr) minmax(0, 2fr);
  gap: clamp(16px, 3vw, 48px);
  align-items: start;
  padding: clamp(28px, 3.6vw, 52px) 0;
}
.promise::before, .promise:last-child::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--c-line); transform-origin: left; }
.promise::before { top: 0; }
.promise:last-child::after { bottom: 0; }
.js .promise::before, .js .promise:last-child::after { transform: scaleX(0); transition: transform 1.1s var(--ease-io); }
.promise.is-inview::before, .promise.is-inview:last-child::after { transform: none; }

.outline-no { width: clamp(84px, 9vw, 132px); height: auto; overflow: visible; }
.outline-no text {
  font-family: var(--font-en);
  font-size: 120px;
  font-weight: 700;
  letter-spacing: -6px;
  fill: transparent;
  stroke: var(--c-accent);
  stroke-width: 1.2;
  stroke-dasharray: 700;
  stroke-dashoffset: 0;
  transition: fill .5s ease;
}
.js .promise .outline-no text { stroke-dashoffset: 700; transition: stroke-dashoffset 1.8s cubic-bezier(.4, 0, .2, 1) .2s, fill .5s ease; }
.promise.is-inview .outline-no text { stroke-dashoffset: 0; }

.promise__title { font-size: clamp(22px, 2.4vw, 34px); line-height: 1.4; }
.promise__body { font-size: 15px; line-height: 2; color: var(--c-gray); }
.js .promise__title, .js .promise__body { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .9s var(--ease-out); }
.js .promise__title { transition-delay: .35s; }
.js .promise__body { transition-delay: .5s; }
.promise.is-inview .promise__title, .promise.is-inview .promise__body { opacity: 1; transform: none; }

@media (hover: hover) {
  .promise:hover .outline-no text { fill: var(--c-accent); }
}

@media (max-width: 768px) {
  .promise { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .outline-no { width: 84px; }
}

/* ==========================================================================
   02 PLANS（比較表）：列が上から順に開く。PCはセルに乗せると行と列が光る
   ========================================================================== */
.cmp-wrap { border: 1px solid var(--c-line); }
/* 769px以上は横スクロールなしで収まるよう、列の幅は固定（はみ出す文字は折り返す） */
.cmp { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.cmp th, .cmp td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid #222227; transition: background-color .25s, color .25s; }
.cmp td, .cmp thead th + th { border-left: 1px solid var(--c-line); }
.cmp tbody tr:last-child > * { border-bottom: 0; }
.cmp tbody th { width: 20%; font-weight: 400; font-size: 13px; color: var(--c-gray); }
.cmp tbody tr:first-child td { font-weight: 700; }
.cmp__corner { width: 20%; padding: 24px 20px; font-weight: 400; font-size: 12px; letter-spacing: .16em; color: var(--c-mute); vertical-align: bottom !important; }
.cmp__plan { position: relative; padding: 24px 20px !important; border-bottom: 1px solid var(--c-line) !important; }
.cmp__plan::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c-line); transform-origin: left; }
.cmp__plan.is-pick::before { background: var(--c-accent); }
.cmp__en { display: block; margin-bottom: 8px; font-size: 11px; letter-spacing: .2em; color: var(--c-accent); }
.cmp__name { display: block; font-size: clamp(17px, 1.5vw, 21px); font-weight: 700; }
.cmp__lead { display: block; margin-top: 8px; font-size: 12px; font-weight: 400; color: var(--c-gray); line-height: 1.7; }
.cmp .is-pick { background: #141417; }

/* 出現：見出しの上の線が伸び、各列が上から順に見えてくる */
.js .cmp__plan::before { transform: scaleX(0); transition: transform .9s var(--ease-io) calc(.2s + var(--i) * 150ms); }
.cmp.is-inview .cmp__plan::before { transform: none; }
.js .cmp [data-col] { opacity: 0; transform: translateY(-10px); }
.cmp.is-inview [data-col] { opacity: 1; transform: none; transition: opacity .5s ease, transform .6s var(--ease-out), background-color .25s, color .25s; }
.cmp.is-inview [data-col="0"] { transition-delay: calc(.15s + var(--r, 0) * 30ms), calc(.15s + var(--r, 0) * 30ms), 0s, 0s; }
.cmp.is-inview [data-col="1"] { transition-delay: calc(.3s + var(--r, 0) * 30ms), calc(.3s + var(--r, 0) * 30ms), 0s, 0s; }
.cmp.is-inview [data-col="2"] { transition-delay: calc(.45s + var(--r, 0) * 30ms), calc(.45s + var(--r, 0) * 30ms), 0s, 0s; }

/* 十字ハイライト（JSが .is-hl を付ける） */
.cmp .is-hl { background: #1C1C21; color: var(--c-text); }
.cmp .is-pick.is-hl { background: #222228; }
.cmp .is-hl-cell { background: #26262C !important; box-shadow: inset 0 0 0 1px var(--c-accent); }

.cmp-note { margin-top: 16px; font-size: 12px; line-height: 1.9; color: var(--c-mute); }

@media (max-width: 1024px) {
  .cmp th, .cmp td { padding: 14px 14px; }
  .cmp__corner, .cmp tbody th { width: 18%; }
  .cmp__plan { padding: 20px 14px !important; }
}
/* 768px以下：表を「項目ごとのカード」に組み替える。同じ項目の3つのつくり方を上下に並べて比べる */
@media (max-width: 768px) {
  .cmp-wrap { border: 0; }
  .cmp, .cmp thead, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto !important; }
  .cmp { font-size: 14px; }
  /* 上：3つのつくり方の説明（481px以上は横3列、480px以下は縦） */
  .cmp thead tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
  .cmp__corner { display: none !important; }
  .cmp__plan { padding: 18px 14px 16px !important; border: 1px solid var(--c-line) !important; }
  .cmp thead th + th { border-left: 1px solid var(--c-line); }
  .cmp__name { font-size: 16px; }
  /* 項目ごとのカード */
  .cmp tbody { display: flex; flex-direction: column; gap: 8px; }
  .cmp tbody tr { border: 1px solid var(--c-line); }
  .cmp tbody th { padding: 12px 16px; border-bottom: 1px solid var(--c-line); background: var(--c-bg-2); font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--c-text); }
  .cmp tbody td { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 12px; padding: 11px 16px; border-left: 0 !important; border-bottom: 1px solid #222227; }
  .cmp tbody td:last-child { border-bottom: 0; }
  .cmp tbody td::before { content: attr(data-plan); font-size: 12px; font-weight: 400; color: var(--c-mute); }
  .cmp tbody td.is-pick::before { color: var(--c-accent); }
  .cmp tbody tr:first-child td { font-weight: 700; }
}
@media (max-width: 480px) {
  .cmp thead tr { grid-template-columns: minmax(0, 1fr); }
  .cmp__plan { display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 2px 12px; padding: 14px 14px 12px !important; }
  .cmp__en { grid-column: 1; margin: 0; }
  .cmp__name { grid-column: 2; }
  .cmp__lead { grid-column: 2; margin-top: 0; }
}

/* ==========================================================================
   03 TEMPLATES：画面が外側から開き、価格がカウントアップ。PCは乗せると色が付き、マウスで傾く
   ========================================================================== */
.tpl-intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: end; margin-bottom: clamp(48px, 6vw, 88px); }
.tpl-intro__body { display: flex; flex-direction: column; gap: 14px; font-size: 15px; line-height: 2; color: var(--c-sub); }
.tpl-intro__head { font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; line-height: 1.6; color: var(--c-text); }
.tpl-intro__note { font-size: 13px; color: var(--c-gray); }

.tpls { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 104px); }
.tplrow { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: center; }
.tplrow--rev .tplrow__media { order: 2; }

.tplrow__media { perspective: 1200px; }
.tplrow__frame {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--c-panel);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--ease-out), border-color .4s, box-shadow .5s;
}
.tplrow__dots { display: flex; align-items: center; gap: 5px; padding: 9px 12px; background: var(--c-bg-2); }
.tplrow__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-line-2); transition: background-color .3s; }
.tplrow__url { margin-left: 12px; font-size: 11px; letter-spacing: .06em; color: var(--c-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 画像もデモへのリンク。右下に「DEMO ↗」（PCは乗せたとき、スマホは常に） */
.tplrow__view {
  position: absolute;
  right: 14px; bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .4s var(--ease-out);
}
@media (hover: hover) {
  .tplrow__frame:hover .tplrow__view { opacity: 1; transform: none; }
}
@media (hover: none) {
  .tplrow__view { opacity: 1; transform: none; right: 10px; bottom: 10px; padding: 6px 12px; font-size: 11px; }
}
.tplrow__frame img { width: 100%; height: auto; aspect-ratio: 1536 / 1000; object-fit: cover; filter: grayscale(1) brightness(.75); transform: scale(1.04); transition: filter .5s ease, transform 1.2s var(--ease-out); }

/* 出現：画面が外側（行の端）から開く */
.js .tplrow__frame { clip-path: inset(0 0 0 100%); transition: clip-path 1.1s var(--ease-io), transform .5s var(--ease-out), border-color .4s, box-shadow .5s; }
.js .tplrow--rev .tplrow__frame { clip-path: inset(0 100% 0 0); }
.js .tplrow.is-inview .tplrow__frame { clip-path: inset(0 0 0 0 round 10px); }
.js .tplrow__body > * { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .8s var(--ease-out); }
.tplrow.is-inview .tplrow__body > * { opacity: 1; transform: none; }
.tplrow.is-inview .tplrow__body > :nth-child(1) { transition-delay: .45s; }
.tplrow.is-inview .tplrow__body > :nth-child(2) { transition-delay: .55s; }
.tplrow.is-inview .tplrow__body > :nth-child(3) { transition-delay: .65s; }
.tplrow.is-inview .tplrow__body > :nth-child(4) { transition-delay: .75s; }

/* 色が付く：PCは乗せたとき、スマホは画面の中央に来たとき（.is-active） */
.tplrow.is-active .tplrow__frame img { filter: none; transform: scale(1); }
.tplrow.is-active .tplrow__frame { border-color: var(--c-line-2); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.tplrow.is-active .tplrow__dots i:nth-child(1) { background: #FF5F57; }
.tplrow.is-active .tplrow__dots i:nth-child(2) { background: #FEBC2E; }
.tplrow.is-active .tplrow__dots i:nth-child(3) { background: #28C840; }
@media (hover: hover) {
  .tplrow:hover .tplrow__frame img { filter: none; transform: scale(1); }
  .tplrow:hover .tplrow__frame { border-color: var(--c-line-2); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
  .tplrow:hover .tplrow__dots i:nth-child(1) { background: #FF5F57; }
  .tplrow:hover .tplrow__dots i:nth-child(2) { background: #FEBC2E; }
  .tplrow:hover .tplrow__dots i:nth-child(3) { background: #28C840; }
  .tplrow:hover .tplrow__no { color: var(--c-accent); }
}

.tplrow__body { display: flex; flex-direction: column; gap: 14px; }
.tplrow__top { display: flex; align-items: baseline; gap: 16px; }
.tplrow__no { font-size: clamp(44px, 5vw, 72px); font-weight: 700; line-height: .8; letter-spacing: -.04em; transition: color .3s; }
.tplrow.is-active .tplrow__no { color: var(--c-accent); }
.tplrow__tag { padding: 5px 10px; border: 1px solid var(--c-accent); font-size: 12px; letter-spacing: .08em; color: var(--c-accent); }
.tplrow__copy { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.45; }
.tplrow__sub { font-size: 15px; line-height: 1.9; color: var(--c-gray); }
.tplrow__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid var(--c-line); }
.tplrow__price { font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tplrow__price small { margin-left: 6px; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--c-mute); }
.tplrow__demo { min-height: 48px; padding: 0 22px; font-size: 14px; }

/* テンプレートでも、見えないところまで */
.unseen {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  margin-top: clamp(64px, 8vw, 120px);
  padding: clamp(28px, 4vw, 56px);
  border: 1px solid var(--c-line);
}
.unseen__title { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.5; }
.unseen__title em { font-style: normal; color: var(--c-accent); }

/* チェック：線で描かれ、順に現れる */
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; }
.checks--col { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.checks li { display: flex; gap: 12px; font-size: 15px; line-height: 1.8; }
.check { flex: none; width: 20px; height: 20px; margin-top: 3px; overflow: visible; }
.check path { fill: none; stroke: var(--c-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .checks .check path { stroke-dashoffset: 1; transition: stroke-dashoffset .5s var(--ease-out) calc(.3s + var(--i) * 160ms); }
.js .checks li > span { opacity: 0; transform: translateX(-8px); transition: opacity .5s ease calc(.4s + var(--i) * 160ms), transform .6s var(--ease-out) calc(.4s + var(--i) * 160ms); }
.is-inview .checks .check path, .is-inview.checks .check path { stroke-dashoffset: 0; }
.is-inview .checks li > span { opacity: 1; transform: none; }

@media (max-width: 1024px) {
  .tplrow, .tplrow--rev { grid-template-columns: minmax(0, 1fr); }
  .tplrow--rev .tplrow__media { order: 0; }
  .js .tplrow--rev .tplrow__frame { clip-path: inset(0 0 0 100%); }
  .unseen { grid-template-columns: minmax(0, 1fr); }
  /* 1列になったら、1つずつ枠で囲んだカードにして区切りをはっきり。価格の上の線はなくす */
  .tpls { gap: 24px; }
  .tplrow { gap: 0; border: 1px solid var(--c-line); background: var(--c-bg-2); }
  .tplrow__frame, .tplrow:hover .tplrow__frame, .tplrow.is-active .tplrow__frame { border: 0; border-bottom: 1px solid var(--c-line); border-radius: 0; box-shadow: none; transform: none; }
  .js .tplrow.is-inview .tplrow__frame { clip-path: inset(0 0 0 0); }
  .tplrow__body { gap: 12px; padding: 24px 28px 28px; }
  .tplrow__foot { padding-top: 6px; border-top: 0; }
}
@media (max-width: 768px) {
  .tpl-intro { grid-template-columns: minmax(0, 1fr); }
  .checks { grid-template-columns: minmax(0, 1fr); }
  .tplrow__body { padding: 20px 18px 22px; }
}
@media (max-width: 480px) {
  .tplrow__foot { flex-direction: column; align-items: stretch; }
  .tplrow__demo { justify-content: space-between; }
  .tplrow__url { display: none; }
}

/* ==========================================================================
   04 SUPPORT：黄色い面が細い線から広がり、金額が回って止まる
   ========================================================================== */
.support { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.support__price {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(28px, 4vw, 56px);
  background: var(--c-accent);
  color: var(--c-on-accent);
}
.js .support__price { clip-path: inset(calc(50% - 1px) 0 calc(50% - 1px) 0); transition: clip-path 1.1s var(--ease-io); }
.support__price.is-inview { clip-path: inset(0); }
.js .support__price > *:not(.support__deco) { opacity: 0; transform: translateY(16px); transition: opacity .6s ease .7s, transform .8s var(--ease-out) .7s; }
.support__price.is-inview > * { opacity: 1 !important; transform: none !important; }
.support__head { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; }
.support__kicker { font-size: 13px; font-weight: 700; letter-spacing: .2em; }
.support__catch { font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; line-height: 1.6; }
.support__amount { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.support__num { font-size: clamp(64px, 8vw, 120px); font-weight: 700; line-height: .9; letter-spacing: -.05em; }
.support__unit { font-size: 15px; font-weight: 700; }
.support__same { position: relative; z-index: 1; font-size: 14px; line-height: 1.9; }
.support__deco {
  /* 飾り：ロゴを黒の薄い色で（隠しかけらと見分けがつくよう、かけら単体は使わない） */
  position: absolute;
  right: -8%; bottom: -26%;
  width: clamp(200px, 26vw, 380px);
  height: clamp(200px, 26vw, 380px);
  color: rgba(13, 13, 15, .07);
  --c-accent: currentColor;
  transform: rotate(-30deg);
  transition: transform 1.6s var(--ease-out) .4s;
}
.support__price.is-inview .support__deco { transform: none; }

.support__detail { display: flex; flex-direction: column; gap: 18px; padding: clamp(28px, 4vw, 56px); border: 1px solid var(--c-line); }
.support__cap { font-size: 12px; letter-spacing: .2em; color: var(--c-mute); }
.support__small { padding-left: 32px; font-size: 12px; line-height: 1.8; color: var(--c-mute); }
.support__small a { color: var(--c-sub); }
.support__box { padding: 16px 18px; background: var(--c-bg-2); font-size: 14px; line-height: 1.9; color: var(--c-sub); }

.option {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: 16px;
  padding: clamp(20px, 2.4vw, 32px) clamp(20px, 3vw, 40px);
  border: 1px solid var(--c-line);
}
.option::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px; background: var(--c-accent); transform-origin: top; }
.js .option::before { transform: scaleY(0); transition: transform .8s var(--ease-io) .2s; }
.option.is-inview::before { transform: none; }
.option__body { flex: 1 1 360px; display: flex; flex-direction: column; gap: 6px; }
.option__kicker { font-size: 12px; letter-spacing: .16em; color: var(--c-accent); }
.option h3 { font-size: 18px; }
.option__body p { font-size: 14px; line-height: 1.9; color: var(--c-gray); }
.option__price { font-size: clamp(30px, 3vw, 40px); font-weight: 700; letter-spacing: -.02em; color: var(--c-text) !important; }
.option__price small { margin-left: 8px; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--c-gray); }

.terms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 16px; background: var(--c-line); border: 1px solid var(--c-line); }
.terms > div { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.4vw, 32px); background: var(--c-bg); }
.terms dt { font-size: 12px; letter-spacing: .16em; color: var(--c-accent); }
.terms dd { font-size: 14px; line-height: 1.9; color: var(--c-sub); }
.js .terms > div > * { opacity: 0; transform: translateY(14px); transition: opacity .6s ease calc(var(--i) * 100ms), transform .7s var(--ease-out) calc(var(--i) * 100ms); }
.terms.is-inview > div > * { opacity: 1; transform: none; }

@media (max-width: 1024px) {
  .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .support { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .terms { grid-template-columns: minmax(0, 1fr); }
  .support__num { font-size: 22vw; }
}

/* ==========================================================================
   05 FLOW：スクロールに合わせて線が伸び、通過したステップが点灯（--flow：0〜1）
   ========================================================================== */
.flow { position: relative; --flow: 0; }
.flow__rail { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--c-line-2); }
.flow__fill { position: absolute; inset: 0; background: var(--c-accent); transform: scaleX(var(--flow)); transform-origin: left; }
.flow__list { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.step { position: relative; display: flex; flex-direction: column; gap: 14px; padding-top: 28px; }
.step__dot {
  position: absolute;
  left: 0; top: -6px;
  width: 11px; height: 11px;
  border: 2px solid var(--c-line-2);
  border-radius: 50%;
  background: var(--c-bg);
  transition: border-color .3s, background-color .3s, transform .5s cubic-bezier(.3, 1.6, .5, 1);
}
.step__no { font-size: 13px; letter-spacing: .2em; color: var(--c-mute); transition: color .4s; }
.step__title { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; transition: color .4s; }
.step__body { font-size: 13px; line-height: 1.95; color: var(--c-dim); transition: color .5s; }
.step.is-on .step__dot { border-color: var(--c-accent); transform: scale(1.25); }
.step.is-on .step__no { color: var(--c-accent); }
.step.is-on .step__body { color: var(--c-gray); }
.step--last.is-on .step__dot { background: var(--c-accent); }
.step--last.is-on .step__dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 1px solid var(--c-accent);
  border-radius: 50%;
  animation: ping 2s ease-out infinite;
}
@keyframes ping { to { transform: scale(3.2); opacity: 0; } }
.js .step:not(.is-on) .step__title { color: var(--c-gray); }

/* 隠し要素の置き場所（線の終わり） */
.piece-spot { right: -10px; top: -22px; }

.speed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: clamp(48px, 6vw, 80px); background: var(--c-line); border: 1px solid var(--c-line); }
.speed__item { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 12px; padding: 22px 24px; background: var(--c-bg); }
.speed__bar { grid-column: 1 / -1; position: relative; height: 6px; margin-bottom: 4px; background: #222227; overflow: hidden; }
.speed__bar span { position: absolute; inset: 0; background: var(--c-dim); transform: scaleX(var(--w)); transform-origin: left; }
.speed__item:nth-child(2) .speed__bar span { background: var(--c-text); }
.speed__item.is-fast .speed__bar span { background: var(--c-accent); }
.js .speed__bar span { transform: scaleX(0); transition: transform 1.2s var(--ease-out) calc(.2s + var(--i) * 150ms); }
.speed.is-inview .speed__bar span { transform: scaleX(var(--w)); }
.speed.is-inview .is-fast .speed__bar::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 18%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  animation: glint 2.4s ease-in-out 1.6s infinite;
}
@keyframes glint { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(180%); } }
.speed__k { font-size: 16px; font-weight: 700; }
.speed__v { justify-self: end; font-size: 14px; color: var(--c-gray); }
.is-fast .speed__v { color: var(--c-accent); }
.speed__note { margin-top: 12px; font-size: 12px; line-height: 1.9; color: var(--c-mute); }

@media (max-width: 1024px) {
  .flow__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; }
  .flow__rail { display: none; }
  .step { border-top: 1px solid var(--c-line-2); }
  .step::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-io); }
  .step.is-on::before { transform: none; }
}
/* スマホ：縦のタイムライン */
@media (max-width: 768px) {
  .flow__rail { display: block; left: 5px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .flow__fill { transform: scaleY(var(--flow)); transform-origin: top; }
  .flow__list { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .step { gap: 8px; padding: 0 0 32px 32px; border-top: 0; }
  .step::before { display: none; }
  .step__dot { left: 0; top: 4px; }
  .piece-spot { right: auto; left: -16px; top: auto; bottom: -34px; }
  .speed { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   06 FAQ：左に見出し（PCは固定）、右に3分類のアコーディオン
   ========================================================================== */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq__side { position: sticky; top: calc(var(--header-h) + 84px); display: flex; flex-direction: column; gap: 16px; }
.faq__side .sec-title { font-size: clamp(44px, 4.6vw, 72px); }
.faq__lead { font-size: 14px; line-height: 1.9; color: var(--c-gray); }
.faq__groups { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 56px); }
.faq__cat { display: flex; gap: 14px; margin-bottom: 12px; font-size: 12px; font-weight: 400; letter-spacing: .2em; color: var(--c-mute); }
.faq__cat span { color: var(--c-accent); }
.faq__group { border-bottom: 1px solid var(--c-line); }

.qa { border-top: 1px solid var(--c-line); }
.qa summary {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 14px 0;
  list-style: none;
  cursor: pointer;
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 700;
  line-height: 1.6;
}
.qa summary::-webkit-details-marker { display: none; }
.qa__q { flex: none; font-size: 13px; color: var(--c-accent); }
.qa__text { flex: 1; transition: color .3s, transform .45s var(--ease-out); }
.qa__icon { position: relative; flex: none; width: 30px; height: 30px; border: 1px solid var(--c-line-2); border-radius: 50%; transition: border-color .3s, transform .5s var(--ease-out), background-color .3s; }
.qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -.75px 0 0 -5px; background: var(--c-accent); transition: transform .45s var(--ease-out); }
.qa__icon::after { transform: rotate(90deg); }
.qa[open] .qa__icon { transform: rotate(180deg); border-color: var(--c-accent); }
.qa[open] .qa__icon::after { transform: rotate(0deg); }
.qa__a { overflow: hidden; }
.qa__a p { padding: 0 46px 22px 30px; font-size: 14px; line-height: 2; color: var(--c-sub); }
@media (hover: hover) {
  .qa summary:hover .qa__text { color: var(--c-accent); transform: translateX(6px); }
  .qa summary:hover .qa__icon { border-color: var(--c-accent); }
}

@media (max-width: 1024px) {
  .faq { grid-template-columns: minmax(0, 1fr); }
  .faq__side { position: static; }
}
@media (max-width: 480px) {
  .qa summary { gap: 12px; }
  .qa__a p { padding: 0 8px 20px 26px; }
}