/* ===================================================================
   Digital Partner — design tokens
   =================================================================== */
:root{
  --navy:#0B2545;
  --deep:#061A33;
  --emerald:#0FAE84;
  --amber:#F0A868;
  --bg:#FFFFFF;
  --bg-alt:#F4F7FA;
  --ink:#0B2545;
  --body:#3A4A5C;
  --note:#7A8A9A;
  --line:#DCE4EC;
  --line-dark:rgba(255,255,255,.16);
  --maxw:1120px;
  --herow:1340px;
  --pad:clamp(20px,5vw,40px);
  --sec-y:clamp(56px,9vw,120px);
  --jp:"Zen Kaku Gothic New",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --mincho:"Zen Old Mincho","Hiragino Mincho ProN",serif;
  --num:"Archivo","Zen Kaku Gothic New",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:var(--jp);font-size:17px;line-height:1.9;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4,.lead,.c-btn,summary{word-break:auto-phrase;text-wrap:balance}
h1,h2,h3,h4{color:var(--ink);margin:0;font-weight:700;line-height:1.45}
p{margin:0 0 1.4em}
p:last-child{margin-bottom:0}
::selection{background:var(--emerald);color:#fff}
:focus-visible{outline:2px solid var(--emerald);outline-offset:3px}

.l-wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.l-sec{padding-block:var(--sec-y);position:relative}
.l-sec--alt{background:var(--bg-alt)}
.l-sec--dark{background:var(--deep);color:rgba(255,255,255,.82)}
/* 装飾レイヤーを持つセクションだけクリップする（sticky を壊さないため全体には掛けない） */
.l-sec--clip{overflow:hidden}
.l-sec--dark h2,.l-sec--dark h3{color:#fff}

/* 署名モチーフ：見出しの前の小さな円 —— サイト全体で反復する */
.c-eyebrow{
  display:flex;align-items:center;gap:11px;
  font-family:var(--num);font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--emerald);margin:0 0 18px;
}
.c-eyebrow::before{
  content:"";width:15px;height:15px;border:1.5px solid currentColor;border-radius:50%;
  flex:none;position:relative;
}
.c-eyebrow__num{color:var(--note);font-weight:400}
.l-sec--dark .c-eyebrow__num{color:rgba(255,255,255,.45)}

/* 装飾レイヤー — 必ずコンテンツの背面（z-index:0）／白背景素材は multiply で敷く */
.l-deco{
  position:absolute;z-index:0;pointer-events:none;
  mix-blend-mode: multiply;opacity:.13;
}
.l-deco img{width:100%;height:100%;object-fit:cover;display:block}
.l-deco--grid{right:0;top:0;width:min(46vw,540px);aspect-ratio:1}
.l-deco--mark{left:-4%;bottom:-8%;width:min(38vw,420px);aspect-ratio:1;opacity:.1}
.l-deco--diag{right:-3%;bottom:-6%;width:min(34vw,380px);aspect-ratio:1;opacity:.09}
.l-sec > .l-wrap{position:relative;z-index:1}
.l-deco--grain{inset:0;width:auto;aspect-ratio:auto;opacity:.5}

.c-h2{font-size:clamp(26px,4vw,38px);letter-spacing:.01em;margin:0 0 22px}
.c-lede{font-size:clamp(16px,1.6vw,18px);max-width:44em}

/* ボタン：全ページ共通サイズ */
.c-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:62px;padding:0 34px;border-radius:2px;border:1.5px solid transparent;
  font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;
  transition:transform .25s ease,background-color .25s ease,color .25s ease,border-color .25s ease;
  white-space:nowrap;
}
.c-btn--primary{background:var(--emerald);color:#04241B;border-color:var(--emerald)}
.c-btn--primary:hover{background:#0C9873;border-color:#0C9873;transform:translateY(-2px)}
.c-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.c-btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.c-btn--outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.c-btn--outline:hover{background:var(--navy);color:#fff}
.c-btn__arrow{font-family:var(--num);font-weight:600}
.c-btn-note{display:block;margin-top:12px;font-size:13px;color:var(--note)}

/* ===================================================================
   HEADER — 透明 → スクロールで白（parts: header-01）
   =================================================================== */
.c-header{
  position:fixed;inset:0 0 auto;z-index:100;
  transition:background-color .35s ease,box-shadow .35s ease,border-color .35s ease;
  border-bottom:1px solid transparent;
}
.c-header__inner{
  width:100%;max-width:var(--herow);margin-inline:auto;padding:0 var(--pad);
  height:82px;display:flex;align-items:center;gap:24px;
}
.c-header__logo{display:flex;align-items:center;gap:13px;text-decoration:none;flex:none}
.c-header__mark{width:40px;height:40px;flex:none;display:block}
/* ロゴマークは 輪＝ネイビー／点＝エメラルド。
   暗い下地（透明ヘッダー・フッター）では「輪だけ」白く抜き、点は緑のまま残す。
   以前は filter:brightness(0) invert(1) でマーク全体を白く潰しており、
   緑のアクセントごと消えていた。SVGを直に書いて部位ごとに色を当てる。 */
.c-mark__ring{stroke:var(--navy);transition:stroke .35s ease}
.c-mark__dot{fill:var(--emerald)}
.c-header:not(.is-stuck) .c-mark__ring{stroke:#fff}
.c-footer .c-mark__ring{stroke:#fff}
.c-header__name{display:flex;flex-direction:column;line-height:1.15}
.c-header__name b{
  font-family:var(--num);font-size:19px;font-weight:800;letter-spacing:.005em;
  color:#fff;transition:color .35s ease;line-height:1.1;
}
.c-header__name span{
  font-size:10px;letter-spacing:.03em;color:rgba(255,255,255,.58);
  transition:color .35s ease;margin-top:2px;
}
.c-header__nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.c-header__nav > li{list-style:none;position:relative}
.c-header__nav a{
  text-decoration:none;font-size:14px;font-weight:500;color:rgba(255,255,255,.9);
  transition:color .3s ease;white-space:nowrap;
}
.c-header__nav a:hover{color:var(--emerald)}
.c-header__list{display:flex;align-items:center;gap:26px;margin:0;padding:0}
.c-header__sub{
  position:absolute;top:100%;left:50%;transform:translate(-50%,8px);
  min-width:230px;background:#fff;border:1px solid var(--line);
  padding:10px 0;margin:0;list-style:none;
  opacity:0;visibility:hidden;transition:opacity .25s ease,transform .25s ease,visibility .25s;
  box-shadow:0 18px 40px rgba(6,26,51,.12);
}
.c-header__item:hover .c-header__sub,.c-header__item:focus-within .c-header__sub{
  opacity:1;visibility:visible;transform:translate(-50%,0);
}
.c-header__sub a{display:block;padding:9px 22px;color:var(--body);font-size:14px}
.c-header__sub a:hover{background:var(--bg-alt);color:var(--navy)}
.c-header__cta{
  display:inline-flex;align-items:center;justify-content:center;
  height:46px;padding:0 22px;background:var(--emerald);color:#04241B;
  font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;border-radius:2px;
  transition:background-color .25s ease;
}
.c-header__cta:hover{background:#0C9873;color:#04241B}
.c-header__burger{display:none}

.c-header.is-stuck{background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom-color:var(--line)}
.c-header.is-stuck .c-header__name b{color:var(--navy)}
.c-header.is-stuck .c-header__name span{color:var(--note)}
.c-header.is-stuck .c-header__nav a{color:var(--navy)}
.c-header.is-stuck .c-header__nav a:hover{color:var(--emerald)}

/* スマホドロワー（parts: spmenu-01） */
.c-drawer{
  position:fixed;inset:0;z-index:99;visibility:hidden;pointer-events:none;
}
.c-drawer__veil{
  position:absolute;inset:0;background:rgba(6,26,51,.5);opacity:0;transition:opacity .35s ease;
}
.c-drawer__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(86vw,360px);background:#fff;
  transform:translateX(100%);transition:transform .38s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;padding:96px 28px 48px;
}
.c-drawer.is-open{visibility:visible;pointer-events:auto}
.c-drawer.is-open .c-drawer__veil{opacity:1}
.c-drawer.is-open .c-drawer__panel{transform:translateX(0)}
.c-drawer__list{list-style:none;margin:0;padding:0}
.c-drawer__list li{border-bottom:1px solid var(--line)}
.c-drawer__list a{display:block;padding:17px 2px;text-decoration:none;color:var(--navy);font-weight:500}
.c-drawer__acc > summary{
  padding:17px 2px;cursor:pointer;list-style:none;color:var(--navy);font-weight:500;
  display:flex;align-items:center;justify-content:space-between;
}
.c-drawer__acc > summary::-webkit-details-marker{display:none}
.c-drawer__acc > summary::after{content:"+";font-family:var(--num);color:var(--emerald);font-size:20px}
.c-drawer__acc[open] > summary::after{content:"−"}
.c-drawer__acc ul{list-style:none;margin:0 0 10px;padding:0 0 0 16px}
.c-drawer__acc ul a{padding:12px 2px;font-size:14px;color:var(--body);font-weight:400}
.c-drawer__foot{margin-top:32px}
.c-drawer__foot .c-btn{width:100%}
.c-drawer__nap{margin-top:26px;font-size:13px;color:var(--note);line-height:1.85}

body.is-locked{overflow:hidden}

/* ===================================================================
   HERO — fv-06 Vortex 移植
   =================================================================== */
/* design-rules: .hero は width: 100% でフルブリード。max-width を持たせない */
.hero{width: 100%;max-width:none}
.c-hero{
  position:relative;width: 100%;min-height:760px;height:100svh;
  display:flex;align-items:center;overflow:hidden;background:var(--deep);
  padding-top:82px;
}
.c-hero__bg{position:absolute;inset:0;z-index:0}
.c-hero__bg img{
  width:100%;height:100%;object-fit:cover;object-position:center 60%;
  filter:brightness(.88) saturate(.94);
  animation:dp-brighten 11s cubic-bezier(.33,.7,.28,1) .4s forwards;
}
@keyframes dp-brighten{to{filter:brightness(1.14) saturate(1.1)}}
/* 左からのネイビーグラデ。文字の可読性を担保する固定レイヤー（明るくなっても薄めない） */
.c-hero__veil{
  position:absolute;inset:0;z-index:1;
  background:
    /* 上部：明けたあともヘッダーのナビが読めるように常に効かせる */
    linear-gradient(to bottom,rgba(6,26,51,.62) 0%,rgba(6,26,51,.28) 9%,rgba(6,26,51,0) 20%),
    linear-gradient(100deg,rgba(6,26,51,.92) 0%,rgba(6,26,51,.78) 26%,rgba(6,26,51,.34) 58%,rgba(6,26,51,.14) 100%),
    linear-gradient(to top,rgba(6,26,51,.62) 0%,rgba(6,26,51,0) 44%);
}
/* 夜の名残。これが消えることで「夜が明ける」 */
.c-hero__night{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,16,34,.72) 0%,rgba(4,16,34,.46) 55%,rgba(4,16,34,.62) 100%);
  animation:dp-daybreak 11s cubic-bezier(.33,.7,.28,1) .4s forwards;
}
/* 昇ってくる陽 */
.c-hero__sun{
  position:absolute;z-index:2;left:46%;bottom:4%;
  width:min(76vw,880px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  transform:translate(-50%,42%) scale(.72);opacity:0;
  background:radial-gradient(circle,
    rgba(255,214,158,.72) 0%,
    rgba(240,168,104,.42) 26%,
    rgba(240,168,104,.16) 48%,
    rgba(240,168,104,0) 68%);
  animation:dp-sunrise 11s cubic-bezier(.33,.7,.28,1) .4s forwards;
}
/* 差し込む光の帯 */
.c-hero__rays{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(104deg,rgba(255,214,158,0) 38%,rgba(255,214,158,.16) 62%,rgba(255,214,158,0) 86%);
  animation:dp-rays 11s cubic-bezier(.33,.7,.28,1) 1.6s forwards;
}
@keyframes dp-daybreak{to{opacity:0}}
@keyframes dp-sunrise{
  0%{opacity:0;transform:translate(-50%,42%) scale(.72)}
  35%{opacity:.85}
  100%{opacity:1;transform:translate(-50%,6%) scale(1)}
}
@keyframes dp-rays{to{opacity:1}}
.c-hero__inner{
  position:relative;z-index:3;width:100%;max-width:var(--herow);
  margin-inline:auto;padding:0 var(--pad);
  display:grid;grid-template-columns:45% 55%;align-items:center;gap:0;
}
.c-hero__copy{padding-block:40px}
.c-hero__eyebrow{
  display:flex;align-items:center;gap:11px;margin:0 0 26px;
  font-family:var(--num);font-size:12px;font-weight:600;letter-spacing:.18em;
  color:var(--emerald);text-transform:uppercase;
}
.c-hero__eyebrow::before{content:"";width:15px;height:15px;border:1.5px solid currentColor;border-radius:50%}
.c-hero__h1{
  font-size:clamp(40px,6.4vw,72px);line-height:1.24;letter-spacing:.005em;
  color:#fff;margin:0;font-weight:700;
}
.c-hero__h1 span{display:block;white-space:nowrap}
.c-hero__rule{
  width:70px;height:2px;background:var(--emerald);margin:26px 0;border:0;
}
.c-hero__sub{
  font-size:clamp(18px,2.2vw,28px);font-weight:500;color:#fff;margin:0 0 20px;line-height:1.5;
}
.c-hero__note{
  font-size:clamp(14px,1.5vw,17px);color:rgba(255,255,255,.86);margin:0 0 38px;max-width:30em;line-height:1.85;
}
.c-hero__acts{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.c-hero__hint{
  margin:16px 0 0;font-size:13px;color:rgba(255,255,255,.7);letter-spacing:.02em;
}

/* Vortex：円形交差点＝署名モチーフ①。CSSで回すのでJSが無くても動く */
.c-hero__vortex{
  position:relative;height:100%;min-height:420px;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
}
/* GSAPが自由にtransformできるよう、CSS側では transform を持たせない（flexで中央寄せ） */
.c-vortex{position:relative;width:min(72vh,620px);max-width:100%;aspect-ratio:1}
.c-vortex__ring{
  position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.22);
  animation:dp-spin 46s linear infinite;
}
.c-vortex__ring--inner{
  inset:19%;border-color:rgba(15,174,132,.5);border-style:dashed;
  animation-duration:34s;animation-direction:reverse;
}
.c-vortex__ring--outer{inset:-13%;border-color:rgba(255,255,255,.1);animation-duration:70s}
.c-vortex__hub{
  position:absolute;top:50%;left:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;
  border-radius:50%;background:var(--emerald);box-shadow:0 0 0 9px rgba(15,174,132,.18);
}
.c-vortex__orbit{
  position:absolute;inset:0;animation:dp-spin 46s linear infinite;
}
/* 語は top/left の % で円周上に置く（親サイズ基準）。transform の % は自身基準になるため使わない */
.c-vortex__word{
  position:absolute;top:var(--t);left:var(--l);
  font-size:clamp(11px,1.15vw,15px);font-weight:500;letter-spacing:.06em;
  color:rgba(255,255,255,.94);white-space:nowrap;
  padding:7px 15px;border:1px solid rgba(255,255,255,.28);border-radius:999px;
  background:rgba(6,26,51,.42);backdrop-filter:blur(3px);
  transform:translate(-50%,-50%);
  animation:dp-counter 46s linear infinite;
}
.c-vortex__word[data-i="0"]{--t:8%;--l:50%}
.c-vortex__word[data-i="1"]{--t:29%;--l:86.4%}
.c-vortex__word[data-i="2"]{--t:71%;--l:86.4%}
.c-vortex__word[data-i="3"]{--t:92%;--l:50%}
.c-vortex__word[data-i="4"]{--t:71%;--l:13.6%}
.c-vortex__word[data-i="5"]{--t:29%;--l:13.6%}
.c-vortex__word em{font-style:normal;color:var(--emerald)}
/* 語のカウンターローテーション：親が回っても文字は水平を保つ */
@keyframes dp-spin{to{transform:rotate(360deg)}}
@keyframes dp-counter{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(-360deg)}
}

.c-hero__scroll{
  position:absolute;left:var(--pad);bottom:26px;z-index:3;
  font-family:var(--num);font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.6);
  display:flex;align-items:center;gap:10px;
}
.c-hero__scroll::after{content:"";width:52px;height:1px;background:rgba(255,255,255,.4)}

@media (prefers-reduced-motion:reduce){
  .c-vortex__ring,.c-vortex__orbit,.c-vortex__word{animation:none!important}
  /* 演出は行わず、最初から「明けたあと」の状態で見せる */
  .c-hero__bg img,.c-hero__night,.c-hero__sun,.c-hero__rays{animation:none!important}
  .c-hero__bg img{filter:brightness(1.14) saturate(1.1)}
  .c-hero__night{opacity:0}
  .c-hero__sun{opacity:1;transform:translate(-50%,6%) scale(1)}
  .c-hero__rays{opacity:1}
  html{scroll-behavior:auto}
}

/* ===================================================================
   03 LEAD — マニフェスト・行リベール（sec-intro-04）
   =================================================================== */
.c-lead{background:var(--bg)}
.c-lead__body{max-width:31em;margin-left:auto;margin-right:0}
.c-lead__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,80px);align-items:start}
.c-lead__line{
  display:block;font-size:clamp(18px,2.3vw,25px);line-height:1.85;color:var(--ink);
  font-weight:500;margin:0 0 .55em;
}
.c-lead__line--small{font-size:clamp(15px,1.6vw,17px);color:var(--body);font-weight:400;line-height:1.95;margin-bottom:1.1em}
.c-lead__line em{font-style:normal;color:var(--emerald);font-weight:700}
.c-lead__mark{
  font-family:var(--mincho);font-size:clamp(56px,10vw,112px);line-height:1;color:var(--line);
  display:block;margin-bottom:8px;
}
.c-lead__aside{font-size:15px;color:var(--note);border-left:2px solid var(--emerald);padding-left:18px}

/* ===================================================================
   04 WORRY — お悩みランキング（sec-empathy-01）
   =================================================================== */
.c-worry{background:var(--bg-alt)}
.c-worry__list{list-style:none;margin:38px 0 0;padding:0;border-top:1px solid var(--line)}
.c-worry__item{
  border-bottom:1px solid var(--line);padding:clamp(24px,3.4vw,38px) 0;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:start;
}
.c-worry__no{
  font-family:var(--num);font-size:clamp(38px,5.4vw,60px);font-weight:800;line-height:.9;
  color:var(--navy);opacity:.16;
}
.c-worry__h{font-size:clamp(19px,2.3vw,25px);margin:0 0 12px}
.c-worry__t{margin:0;font-size:16px;max-width:40em}
.c-worry__ico{width:46px;height:46px;object-fit:contain;margin-bottom:16px;opacity:.85}
.c-worry__close{
  margin:36px 0 0;font-size:clamp(17px,2.1vw,21px);font-weight:700;color:var(--navy);
  padding-left:clamp(0px,3vw,26px);border-left:3px solid var(--emerald);padding-left:20px;
}

/* ===================================================================
   05 FLOW — 円環ステップ（sec-process-04）＝署名モチーフ②
   =================================================================== */
.c-flow{background:var(--deep);color:rgba(255,255,255,.82);overflow:hidden}
.c-flow::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.5;
  background:radial-gradient(120% 90% at 78% 50%,rgba(15,174,132,.16),transparent 62%);
}
.c-flow .l-wrap{position:relative;z-index:1}
.c-flow__grid{display:grid;grid-template-columns:35% 65%;gap:clamp(30px,5vw,60px);align-items:center}
.c-flow__text .c-h2{color:#fff}
.c-flow__h2{font-size:clamp(24px,3.4vw,33px)}
.c-flow__h2 span{display:block;white-space:nowrap}
.c-flow__text p{color:rgba(255,255,255,.8)}
.c-flow__origin{
  margin-top:26px;padding:20px 22px;border:1px solid var(--line-dark);
  font-size:15px;line-height:1.85;background:rgba(255,255,255,.03);
}
.c-flow__origin b{color:var(--emerald);font-weight:700}

.c-flow__dial{position:relative;width:100%;aspect-ratio:1;max-width:540px;margin-inline:auto}
.c-flow__circle{
  position:absolute;inset:14%;border:1px solid rgba(255,255,255,.2);border-radius:50%;
}
.c-flow__circle::after{
  content:"";position:absolute;inset:12%;border:1px dashed rgba(15,174,132,.4);border-radius:50%;
}
.c-flow__center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;width:44%;
}
.c-flow__center b{display:block;font-family:var(--num);font-size:11px;letter-spacing:.18em;color:var(--emerald);margin-bottom:6px}
.c-flow__center span{display:block;font-size:clamp(14px,1.5vw,17px);color:#fff;font-weight:700;line-height:1.5}
/* ノードも top/left の % で円周上に配置（半径38%） */
.c-flow__node{
  position:absolute;top:var(--t);left:var(--l);width:clamp(104px,15vw,150px);
  transform:translate(-50%,-50%);text-align:center;
}
.c-flow__node b{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--emerald);
  font-family:var(--num);font-size:13px;font-weight:700;color:var(--emerald);
  background:var(--deep);margin-bottom:9px;
}
.c-flow__node strong{display:block;font-size:15px;color:#fff;font-weight:700;margin-bottom:4px;line-height:1.5}
.c-flow__node span{display:block;font-size:12px;color:rgba(255,255,255,.62);line-height:1.7}
.c-flow__close{margin:clamp(30px,5vw,52px) 0 0;font-size:clamp(16px,1.9vw,19px);color:#fff;font-weight:500;max-width:36em}

/* ===================================================================
   06 REASONS — 左sticky＋特大番号リスト（sec-reasons-02）
   =================================================================== */
.c-reasons__grid{display:grid;grid-template-columns:32% 68%;gap:clamp(28px,5vw,64px);align-items:start}
.c-reasons__side{position:sticky;top:120px}
/* 3つの姿勢。狭い左カラムでも見出しと説明が読める縦並び。
   丸マーカーはロゴと同じ「円＋点」の構造にして署名モチーフを踏襲する */
.c-creed{list-style:none;margin:clamp(28px,3.6vw,36px) 0 0;padding:0}
.c-creed > li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;
  padding:16px 0;border-top:1px solid var(--line);align-items:start;
}
.c-creed > li:last-child{border-bottom:1px solid var(--line)}
.c-creed__no{
  position:relative;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;border:1.5px solid rgba(15,174,132,.55);
  font-family:var(--num);font-size:12px;font-weight:800;color:var(--emerald);
}
.c-creed__no::after{
  content:"";position:absolute;top:-2.5px;left:50%;margin-left:-3.5px;
  width:7px;height:7px;border-radius:50%;background:var(--emerald);
}
.c-creed b{display:block;font-size:15.5px;color:var(--ink);margin-bottom:6px;line-height:1.5}
.c-creed span span{display:block;font-size:12.5px;line-height:1.8;color:var(--body)}
.c-reasons__list{list-style:none;margin:0;padding:0}
.c-reasons__item{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3vw,36px);
  padding:clamp(26px,3.6vw,40px) 0;border-top:1px solid var(--line);align-items:start;
}
.c-reasons__item:first-child{border-top:0;padding-top:0}
.c-reasons__no{
  font-family:var(--num);font-size:clamp(44px,6.6vw,78px);font-weight:800;line-height:.85;
  color:var(--emerald);
}
.c-reasons__h{font-size:clamp(19px,2.3vw,26px);margin:0 0 12px}
.c-reasons__body{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:clamp(20px,3vw,32px);align-items:start}
.c-reasons__pic{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.c-reasons__fact{
  margin-top:clamp(24px,3.4vw,36px);padding:22px 24px;background:var(--bg-alt);
  font-size:15px;color:var(--body);border-left:3px solid var(--navy);
}

/* ===================================================================
   07 MESSAGE — マガジン見開き・ドロップキャップ（sec-message-03）
   =================================================================== */
.c-message{position:relative;background:var(--deep);color:rgba(255,255,255,.86);overflow:hidden}
.c-message__bg{position:absolute;inset:0;z-index:0}
.c-message__bg img{width:100%;height:100%;object-fit:cover;opacity:.3}
.c-message__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(6,26,51,.95) 0%,rgba(6,26,51,.88) 45%,rgba(6,26,51,.66) 100%);
}
.c-message .l-wrap{position:relative;z-index:1}
.c-message__grid{display:grid;grid-template-columns:40% 60%;gap:clamp(28px,5vw,64px);align-items:start}
.c-message__figure{margin:0}
.c-message__figure img{width:100%;aspect-ratio:1/1.1;object-fit:cover;object-position:center top}
.c-message__cap{
  margin-top:14px;font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.6);
  border-top:1px solid var(--line-dark);padding-top:12px;
}
.c-message__body{font-family:var(--mincho);font-size:clamp(16px,1.7vw,18px);line-height:2.15;color:rgba(255,255,255,.9)}
.c-message__body h2{
  font-family:var(--mincho);color:#fff;font-weight:600;
  font-size:clamp(24px,3.6vw,36px);line-height:1.6;margin:0 0 30px;
}
.c-message__body p:first-of-type::first-letter{
  float:left;font-size:3.6em;line-height:.86;padding:.06em .14em 0 0;color:var(--emerald);font-weight:600;
}
.c-message__sign{
  margin-top:34px;padding-top:20px;border-top:1px solid var(--line-dark);
  font-family:var(--mincho);font-size:16px;color:#fff;
}
.c-message__sign small{display:block;font-family:var(--jp);font-size:12px;color:rgba(255,255,255,.6);letter-spacing:.08em;margin-bottom:6px}
.c-message__more{margin-top:26px;font-family:var(--jp)}
.c-message__more a{
  display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;
  color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);
  padding-bottom:4px;transition:color .25s ease,border-color .25s ease;
}
.c-message__more a::after{content:"→";font-family:var(--num)}
.c-message__more a:hover{color:var(--emerald);border-color:var(--emerald)}

/* ===================================================================
   08 SERVICES — ベントーグリッド 3×2（sec-services-01）※見出し左揃え・ボタンなし
   =================================================================== */
.c-services__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:40px;
}
.c-services__cell{
  background:#fff;padding:clamp(24px,2.8vw,34px);text-decoration:none;color:inherit;
  display:flex;flex-direction:column;min-height:288px;position:relative;
  transition:background-color .3s ease;
}
a.c-services__cell:hover{background:var(--bg-alt)}
.c-services__thumb{width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:20px}
.c-services__no{font-family:var(--num);font-size:12px;font-weight:600;color:var(--emerald);letter-spacing:.12em;margin-bottom:9px}
.c-services__h{font-size:19px;margin:0 0 10px}
.c-services__t{font-size:14.5px;line-height:1.85;margin:0}
.c-services__more{
  margin-top:auto;padding-top:16px;font-size:13px;font-weight:700;color:var(--navy);
  display:inline-flex;align-items:center;gap:7px;
}
.c-services__more::after{content:"→";font-family:var(--num)}
a.c-services__cell:hover .c-services__more{color:var(--emerald)}
.c-services__none{margin-top:auto;padding-top:16px;font-size:12px;color:var(--note)}

/* ===================================================================
   09 WORKS — インタビュー＋アーカイブ索引（sec-voice-13）
   =================================================================== */
.c-works{background:var(--bg-alt)}
.c-works__list{list-style:none;margin:38px 0 0;padding:0;border-top:1px solid var(--line)}
.c-works__row{
  border-bottom:1px solid var(--line);padding:clamp(22px,3vw,32px) 0;
  display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(20px,3.4vw,40px);align-items:center;
}
.c-works__row img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:2px}
.c-works__tag{
  font-family:var(--num);font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--emerald);
  display:block;margin-bottom:8px;
}
.c-works__h{font-size:clamp(17px,2vw,21px);margin:0 0 12px}
.c-works__meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-top:14px}
.c-works__meta div{border-top:1px solid var(--line);padding-top:10px}
.c-works__meta dt{font-size:11px;letter-spacing:.1em;color:var(--note);margin-bottom:5px}
.c-works__meta dd{margin:0;font-size:14px;line-height:1.75;color:var(--body)}
.c-voices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3.4vw,40px);margin-top:clamp(38px,5vw,60px)}
.c-voices__item{display:flex;flex-direction:column;gap:16px}
.c-voices__q{
  font-size:15.5px;line-height:1.95;color:var(--ink);margin:0;
  padding-left:18px;border-left:2px solid var(--emerald);
}
.c-voices__who{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--note)}
.c-voices__who img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.c-works__note{margin-top:30px;font-size:13px;color:var(--note)}

/* ===================================================================
   10 PRICE — 横並び比較マトリクス（sec-pricing-03）※罫線・箱を使わない
   =================================================================== */
.c-price__init{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;
  margin-top:34px;padding-bottom:20px;border-bottom:2px solid var(--navy);
}
.c-price__init dt{font-size:15px;font-weight:700;color:var(--navy)}
.c-price__init dd{margin:0;font-family:var(--num);font-size:clamp(26px,3.4vw,36px);font-weight:800;color:var(--navy)}
.c-price__init small{font-size:13px;color:var(--note);font-family:var(--jp);font-weight:400}
.c-price__scroll{overflow-x:auto;margin-top:0;-webkit-overflow-scrolling:touch}
.c-price__table{width:100%;min-width:680px;border-collapse:collapse;text-align:left}
.c-price__table th,.c-price__table td{
  padding:20px 18px;border-bottom:1px solid var(--line);vertical-align:top;font-size:15px;
}
.c-price__table thead th{border-bottom:1px solid var(--navy);padding-top:26px}
.c-price__table thead th:first-child{width:150px}
.c-price__plan{font-size:18px;color:var(--ink);margin:0 0 6px;display:flex;align-items:center;gap:9px}
.c-price__plan::before{content:"";width:11px;height:11px;border:1.5px solid var(--emerald);border-radius:50%;flex:none}
.c-price__amount{font-family:var(--num);font-size:clamp(28px,3.8vw,40px);font-weight:800;color:var(--navy);line-height:1.1}
.c-price__amount small{font-family:var(--jp);font-size:14px;font-weight:400;color:var(--note);margin-left:4px}
.c-price__rowhead{font-weight:700;color:var(--navy);font-size:14px}
.c-price__other{margin-top:clamp(34px,4.6vw,52px)}
.c-price__other h3{font-size:19px;margin:0 0 16px}
.c-price__other dl{margin:0;border-top:1px solid var(--line)}
.c-price__other div{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.c-price__other dt{font-weight:700;color:var(--ink);font-size:15px}
.c-price__other dd{margin:0;font-size:15px}
.c-price__notes{margin-top:24px;font-size:13px;color:var(--note);line-height:1.9}

/* ===================================================================
   11 STEPS — 役割分担スイムレーン（sec-process-14）
   =================================================================== */
.c-steps{background:var(--bg-alt)}
.c-steps__head{
  display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,1fr) 120px;gap:0;
  margin-top:38px;border-bottom:1px solid var(--navy);
}
.c-steps__head span{
  padding:0 16px 12px;font-size:12px;letter-spacing:.1em;font-weight:700;color:var(--navy);
}
.c-steps__head span:first-child{padding-left:0}
.c-steps__row{
  display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,1fr) 120px;gap:0;
  border-bottom:1px solid var(--line);align-items:start;
}
.c-steps__no{
  padding:26px 16px 26px 0;font-family:var(--num);font-size:clamp(24px,3vw,32px);
  font-weight:800;color:var(--emerald);line-height:1;
}
.c-steps__cell{padding:26px 16px}
.c-steps__cell b{display:block;font-size:16px;color:var(--ink);margin-bottom:6px}
.c-steps__cell p{font-size:14.5px;margin:0;line-height:1.8}
.c-steps__cell--us{background:rgba(15,174,132,.05)}
.c-steps__when{padding:26px 0 26px 16px;font-size:13px;color:var(--note);text-align:right}
.c-steps__free{color:var(--emerald);font-weight:700}

/* ===================================================================
   12 FAQ — アコーディオン（罫線インデックス風・sec-faq-01）
   =================================================================== */
.c-steps__band{display:flex;gap:clamp(10px,1.8vw,20px);margin-top:0}
.c-steps__band figure{flex:1;margin:0;min-width:0}
.c-steps__band img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px}
.c-steps__band figcaption{
  margin-top:12px;font-size:13px;color:var(--note);
  display:flex;align-items:center;gap:8px;
}
.c-steps__band figcaption b{
  display:inline-flex;align-items:center;flex:none;
  color:var(--emerald);font-weight:700;font-size:12px;
  border:1px solid currentColor;border-radius:999px;padding:1px 9px;
}
.c-steps__overview{
  margin:clamp(28px,4vw,42px) 0 14px;font-size:14px;font-weight:700;
  color:var(--navy);letter-spacing:.02em;
}
.c-steps__detail{
  margin:clamp(26px,3.4vw,36px) 0 0;font-size:15px;color:var(--body);
  padding-left:18px;border-left:2px solid var(--line);
}
.c-faq__list{margin-top:38px;border-top:1px solid var(--line)}
.c-faq__item{border-bottom:1px solid var(--line)}
.c-faq__item > summary{
  list-style:none;cursor:pointer;padding:clamp(20px,2.6vw,28px) 46px clamp(20px,2.6vw,28px) 0;
  position:relative;font-size:clamp(16px,1.9vw,19px);font-weight:700;color:var(--ink);line-height:1.7;
}
.c-faq__item > summary::-webkit-details-marker{display:none}
.c-faq__item > summary::before{
  content:"Q";font-family:var(--num);font-weight:800;color:var(--emerald);margin-right:14px;font-size:.9em;
}
.c-faq__item > summary::after{
  content:"";position:absolute;right:6px;top:50%;width:15px;height:15px;
  margin-top:-7px;border-right:1.5px solid var(--navy);border-bottom:1.5px solid var(--navy);
  transform:rotate(45deg);transition:transform .3s ease;
}
.c-faq__item[open] > summary::after{transform:rotate(-135deg)}
.c-faq__a{padding:0 46px clamp(24px,3vw,32px) 0;font-size:16px;max-width:52em}
.c-faq__a p{margin:0}

/* ===================================================================
   13 NEWS — 左見出し×サムネ点線リスト（sec-news-03）
   =================================================================== */
.c-news__grid{display:grid;grid-template-columns:28% minmax(0,1fr);gap:clamp(26px,4vw,56px);align-items:start}
.c-news__list{list-style:none;margin:0;padding:0;border-top:1px dashed var(--line)}
.c-news__item{border-bottom:1px dashed var(--line)}
.c-news__item a{
  display:grid;grid-template-columns:132px minmax(0,1fr);gap:22px;align-items:center;
  padding:20px 0;text-decoration:none;color:inherit;transition:opacity .25s ease;
}
.c-news__item a:hover{opacity:.68}
.c-news__item img{width:100%;aspect-ratio:16/10;object-fit:cover}
.c-news__date{font-family:var(--num);font-size:12px;color:var(--note);letter-spacing:.06em;display:block;margin-bottom:6px}
.c-news__cat{
  display:inline-block;font-size:11px;letter-spacing:.08em;color:var(--emerald);
  border:1px solid currentColor;padding:1px 9px;margin-left:10px;
}
.c-news__h{font-size:16.5px;margin:0;line-height:1.7;font-weight:500;color:var(--ink)}

/* ===================================================================
   14 COMPANY — 罫線インデックス会社概要（sec-about-02）
   =================================================================== */
.c-company__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,60px);align-items:start}
.c-company__dl{margin:34px 0 0;border-top:1px solid var(--line)}
.c-company__dl > div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;padding:15px 0;border-bottom:1px solid var(--line)}
.c-company__dl dt{font-size:14px;color:var(--note);font-weight:500}
.c-company__dl dd{margin:0;font-size:15.5px;color:var(--ink)}
.c-company__map{margin-top:34px}
.c-company__map iframe{width:100%;height:100%;min-height:340px;border:0;display:block;filter:grayscale(.3)}

/* ===================================================================
   15 CTA — 全幅＋動く光（sec-cta-01）
   =================================================================== */
/* ヒーローと同じ「夜が明ける」演出。画面外にあるので、
   スクロールで入ったときに .is-lit が付いてトランジションが走る（JS無しなら最初から明るい状態） */
.c-cta{position:relative;overflow:hidden;background:var(--deep);color:rgba(255,255,255,.86);text-align:left}
.c-cta__bg{position:absolute;inset:0;z-index:0}
.c-cta__bg img{
  width:100%;height:100%;object-fit:cover;opacity:.58;
  filter:brightness(1.12) saturate(1.1);
  transition:opacity 3.6s cubic-bezier(.62,.02,.34,1),filter 3.6s cubic-bezier(.62,.02,.34,1);
}
.c-cta__bg::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(92deg,rgba(6,26,51,.9),rgba(6,26,51,.62) 62%,rgba(6,26,51,.34));
}
/* 夜の名残 */
.c-cta__night{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(4,16,34,.66),rgba(4,16,34,.48));
  transition:opacity 3.6s cubic-bezier(.62,.02,.34,1);
}
/* 昇ってくる陽 */
.c-cta__glow{
  position:absolute;bottom:-18%;right:-4%;width:min(62vw,660px);aspect-ratio:1;z-index:1;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,
    rgba(255,214,158,.5) 0%,rgba(240,168,104,.26) 30%,rgba(240,168,104,0) 64%);
  opacity:1;transform:translateY(0) scale(1);
  transition:opacity 3.6s cubic-bezier(.62,.02,.34,1),transform 3.6s cubic-bezier(.62,.02,.34,1);
}
/* JS がある間だけ「明ける前」の状態を用意する */
.j .c-cta:not(.is-lit) .c-cta__bg img{opacity:.3;filter:brightness(.4) saturate(.85)}
.j .c-cta:not(.is-lit) .c-cta__night{opacity:1}
.j .c-cta:not(.is-lit) .c-cta__glow{opacity:0;transform:translateY(34%) scale(.74)}
@media (prefers-reduced-motion:reduce){
  .j .c-cta:not(.is-lit) .c-cta__bg img{opacity:.58;filter:brightness(1.12) saturate(1.1)}
  .j .c-cta:not(.is-lit) .c-cta__night{opacity:0}
  .j .c-cta:not(.is-lit) .c-cta__glow{opacity:1;transform:none}
  .c-cta__bg img,.c-cta__night,.c-cta__glow{transition:none}
}
.c-cta .l-wrap{position:relative;z-index:2}
.c-cta__h{font-size:clamp(26px,4.2vw,42px);color:#fff;margin:0 0 26px}
.c-cta__t{max-width:38em;color:rgba(255,255,255,.86);font-size:16.5px}
.c-cta__t strong{color:#fff}
.c-cta__acts{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ===================================================================
   FOOTER — 大型サイトマップ＋SNS（parts: footer-01）
   =================================================================== */
.c-footer{background:#04162B;color:rgba(255,255,255,.66);position:relative;overflow:hidden}
/* 署名モチーフ⑤：巨大な円形罫 */
.c-footer::before{
  content:"";position:absolute;right:-160px;bottom:-260px;width:560px;height:560px;
  border:1px solid rgba(255,255,255,.07);border-radius:50%;pointer-events:none;
}
.c-footer::after{
  content:"";position:absolute;right:-60px;bottom:-160px;width:360px;height:360px;
  border:1px dashed rgba(15,174,132,.16);border-radius:50%;pointer-events:none;
}
.c-footer .l-wrap{position:relative;z-index:1}
.c-footer__top{padding-block:clamp(48px,7vw,80px);display:grid;grid-template-columns:34% minmax(0,1fr);gap:clamp(30px,5vw,60px)}
.c-footer__logo{display:flex;align-items:center;gap:12px;text-decoration:none;margin-bottom:20px}
.c-footer__logo img,.c-footer__logo .c-mark{width:42px;height:42px;flex:none;display:block}
.c-footer__logo b{font-family:var(--num);font-size:19px;font-weight:800;color:#fff;letter-spacing:.02em}
.c-footer__ent{font-size:14px;line-height:1.9;margin:0 0 22px;max-width:30em}
.c-footer__nap{font-size:13.5px;line-height:2;font-style:normal}
.c-footer__nap b{color:#fff;font-weight:700}
.c-footer__nap a{color:var(--emerald);text-decoration:none}
.c-footer__nap a:hover{text-decoration:underline}
.c-footer__sitemap{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:clamp(20px,3vw,32px)}
.c-footer__col h3{font-size:12px;letter-spacing:.14em;color:#fff;margin:0 0 14px;font-weight:700}
.c-footer__col ul{list-style:none;margin:0;padding:0}
.c-footer__col li{margin-bottom:10px}
.c-footer__col a{font-size:14px;text-decoration:none;color:rgba(255,255,255,.66);transition:color .25s ease}
.c-footer__col a:hover{color:var(--emerald)}
.c-footer__sns{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.c-footer__sns a{
  display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 16px;
  border:1px solid var(--line-dark);font-size:12px;letter-spacing:.08em;text-decoration:none;
  color:rgba(255,255,255,.78);transition:border-color .25s ease,color .25s ease;
}
.c-footer__sns a:hover{border-color:var(--emerald);color:var(--emerald)}
.c-footer__bottom{
  border-top:1px solid var(--line-dark);padding-block:22px;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;font-size:12.5px;
}
.c-footer__bottom a{color:rgba(255,255,255,.66);text-decoration:none}
.c-footer__bottom a:hover{color:var(--emerald)}

/* ===================================================================
   REVEAL（JSがある時だけ効かせる。JS無し＝最初から見える）
   =================================================================== */
.j .js-rv{opacity:0;transform:translateY(26px)}
.j .js-hero{opacity:0}
.j .c-vortex{opacity:0}
@media (prefers-reduced-motion:reduce){
  .j .js-rv,.j .js-hero,.j .c-vortex{opacity:1;transform:none}
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width:1024px){
  /* ナビをドロワーへ畳む境界。
     横並びナビは（ロゴ+6項目+CTAで）920px前後ないと収まらないのに対し、
     以前はここが768pxだったため、769〜1024pxでロゴとCTAが押し合っていた。
     本文の縮小（68pxヘッダー・16px本文）は従来どおり768pxのまま分けている */
  .c-header__nav{display:none}
  .c-header__burger{
    display:flex;flex-direction:column;justify-content:center;gap:6px;
    margin-left:auto;width:46px;height:46px;background:none;border:0;cursor:pointer;padding:0;
  }
  /* 1.5px だと3本の y 座標が小数になり、丸めで真ん中だけ太く描かれる。
     線幅を整数にし、合計高さも偶数（2*3+6*2=18px）にして位置を整数へ揃える */
  .c-header__burger span{
    display:block;width:26px;height:2px;background:#fff;margin-inline:auto;
    transform-origin:center;
    transition:transform .34s cubic-bezier(.4,0,.2,1),opacity .2s ease,background-color .35s ease;
  }
  /* 開いている間は背後が白いドロワーになるため、必ず濃色にする
     （これを忘れるとトップページで白線が白背景に溶けて「消えた」ように見える） */
  body.is-locked .c-header__burger span{background:var(--navy)}
  /* 開いたら × に変わる（線の間隔 2+6=8px ぶん寄せて交差させる） */
  .c-header__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .c-header__burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.3)}
  .c-header__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .c-header.is-stuck .c-header__burger span{background:var(--navy)}
  .c-lead__grid,.c-flow__grid,.c-reasons__grid,.c-message__grid,.c-news__grid,.c-company__grid{grid-template-columns:1fr}
  .c-reasons__side{position:static}
  .c-services__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c-lead__body{margin-left:0}
}
@media (max-width:768px){
  body{font-size:16px}
  .c-header__inner{height:68px}
  /* ナビの畳み込みとバーガーの見た目は 1024px のブロックへ移した
     （769〜1024px でも畳む必要があるため。ここは高さ・文字サイズの調整だけ残す） */
  .c-hero{padding-top:68px;height:auto;min-height:auto;padding-bottom:56px}
  .c-hero__inner{grid-template-columns:1fr}
  .c-hero__copy{padding-block:56px 34px}
  .c-hero__h1{font-size:clamp(32px,9vw,42px)}
  /* 変な改行対策：狭い幅では PC 用の強制改行を無効化し auto-phrase に任せる */
  .c-hero__note br,.c-cta__t br{display:none}
  .c-hero__acts{flex-direction:column;align-items:stretch}
  .c-hero__acts .c-btn{width:100%}
  .c-hero__vortex{min-height:320px;height:320px}
  .c-vortex{width:min(80vw,320px)}
  .c-vortex__word{font-size:10.5px;padding:5px 10px}
  .c-hero__scroll{display:none}
  .c-flow__dial{max-width:340px}
  .c-flow__node{width:96px}
  .c-flow__node span{display:none}
  .c-flow__node b{width:32px;height:32px;font-size:12px;margin-bottom:6px}
  .c-flow__node strong{font-size:12px}
  .c-flow__center{width:38%}
  .c-worry__item{grid-template-columns:1fr;gap:10px}
  .c-reasons__body{grid-template-columns:1fr}
  .c-reasons__pic{max-width:280px}
  /* SPでも横並びを保つ（縦積みだと本文前に画面3枚分の高さを取ってしまう） */
  .c-steps__band{gap:8px}
  .c-steps__band figcaption{font-size:11px;gap:5px;line-height:1.5;flex-wrap:wrap}
  .l-deco{display:none}
  .c-reasons__item{grid-template-columns:1fr;gap:10px}
  .c-services__grid{grid-template-columns:1fr}
  .c-services__cell{min-height:0}
  .c-works__row{grid-template-columns:1fr}
  .c-works__meta{grid-template-columns:1fr;gap:0}
  .c-works__meta div{border-top:1px solid var(--line);padding-block:10px}
  .c-voices{grid-template-columns:1fr;gap:30px}
  .c-steps__head{display:none}
  .c-steps__row{grid-template-columns:56px minmax(0,1fr);row-gap:0}
  .c-steps__no{padding:20px 12px 0 0}
  .c-steps__cell{padding:14px 0 0}
  /* 2カラム化したので、明示しないと1列目（56px幅）に落ちて文字が縦に潰れる */
  .c-steps__cell{grid-column:2}
  .c-steps__cell--us{
    grid-column:2;background:none;border-left:2px solid var(--emerald);
    padding-left:14px;margin-block:12px;
  }
  .c-steps__when{grid-column:2;padding:8px 0 20px;text-align:left}
  .c-news__item a{grid-template-columns:96px minmax(0,1fr);gap:16px}
  .c-footer__top{grid-template-columns:1fr}
  .c-footer__sitemap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c-company__map iframe{min-height:260px}
}
@media (max-width:420px){
  .c-footer__sitemap{grid-template-columns:1fr}
  .c-price__table{min-width:560px}
}

/* ===================================================================
   固定ページ用 — ページヒーロー（タイトル帯。FVは載せない）
   =================================================================== */
.c-phero{
  position:relative;background:var(--deep);color:#fff;overflow:hidden;
  padding:calc(82px + clamp(56px,7vw,96px)) 0 clamp(48px,6vw,80px);
}
.c-phero__bg{position:absolute;inset:0;z-index:0}
.c-phero__bg img{
  width:100%;height:100%;object-fit:cover;opacity:.88;
  filter:brightness(.40) saturate(.88);
  animation:dp-phero-dawn 5.2s cubic-bezier(.62,.02,.34,1) .35s forwards;
}
@keyframes dp-phero-dawn{to{filter:brightness(1.14) saturate(1.12)}}
/* 夜の名残。これが消えることで「開いたら明るくなる」 */
.c-phero__bg::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(4,16,34,.7) 0%,rgba(4,16,34,.5) 100%);
  animation:dp-phero-night 5.2s cubic-bezier(.62,.02,.34,1) .35s forwards;
}
@keyframes dp-phero-night{to{opacity:0}}
/* 左は文字が乗るので濃く、右へ抜けるほど写真を見せる（可読性の固定レイヤー） */
.c-phero__bg::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(96deg,rgba(6,26,51,.82) 0%,rgba(6,26,51,.58) 44%,rgba(6,26,51,.22) 76%,rgba(6,26,51,.08) 100%),
    linear-gradient(to bottom,rgba(6,26,51,.5) 0%,rgba(6,26,51,0) 26%);
}
/* 右上から差し込む光 */
.c-phero__light{
  position:absolute;z-index:1;pointer-events:none;
  right:-6%;top:-52%;width:min(74vw,760px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,216,164,.52) 0%,rgba(240,168,104,.24) 34%,rgba(240,168,104,0) 66%);
  opacity:0;transform:scale(.76);
  animation:dp-phero-light 5.2s cubic-bezier(.62,.02,.34,1) .5s forwards;
}
@keyframes dp-phero-light{to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  /* 演出は行わず、最初から「明るくなったあと」で見せる */
  .c-phero__bg img{animation:none;filter:brightness(1.14) saturate(1.12)}
  .c-phero__bg::before{animation:none;opacity:0}
  .c-phero__light{animation:none;opacity:1;transform:scale(1)}
}
.c-phero::before{
  content:"";position:absolute;right:-90px;top:-140px;width:340px;height:340px;
  border:1px solid rgba(255,255,255,.09);border-radius:50%;z-index:1;pointer-events:none;
}
.c-phero .l-wrap{position:relative;z-index:2}
.c-phero__crumb{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;list-style:none;margin:0 0 22px;padding:0;
  font-size:12px;color:rgba(255,255,255,.72);
}
.c-phero__crumb a{color:rgba(255,255,255,.72);text-decoration:none}
.c-phero__crumb a:hover{color:var(--emerald)}
.c-phero__crumb li+li::before{content:"/";margin-right:8px;color:rgba(255,255,255,.32)}
.c-phero__eyebrow{
  display:flex;align-items:center;gap:11px;margin:0 0 14px;
  font-family:var(--num);font-size:12px;font-weight:600;letter-spacing:.18em;
  color:var(--emerald);text-transform:uppercase;
}
.c-phero__eyebrow::before{content:"";width:15px;height:15px;border:1.5px solid currentColor;border-radius:50%}
.c-phero__h1{font-size:clamp(28px,4.6vw,44px);color:#fff;margin:0 0 16px;line-height:1.4}
.c-phero__t{margin:0;color:rgba(255,255,255,.9);font-size:clamp(15px,1.7vw,18px);max-width:40em}

/* 本文の汎用パーツ（固定ページ・記事で使う） */
.c-prose{max-width:44em}
.c-prose h2{font-size:clamp(22px,3.2vw,32px);margin:clamp(38px,5vw,60px) 0 18px}
.c-prose h2:first-child{margin-top:0}
.c-prose h3{font-size:clamp(18px,2.2vw,22px);margin:clamp(28px,3.6vw,40px) 0 12px}
.c-prose ul,.c-prose ol{margin:0 0 1.5em;padding-left:1.4em}
.c-prose li{margin-bottom:.55em}
.c-prose ul{list-style:none;padding-left:0}
.c-prose ul > li{position:relative;padding-left:1.5em}
.c-prose ul > li::before{
  content:"";position:absolute;left:0;top:.72em;width:8px;height:8px;
  border:1.5px solid var(--emerald);border-radius:50%;
}
.c-prose strong{color:var(--ink)}

.c-panel{
  border:1px solid var(--line);padding:clamp(22px,3vw,32px);margin:clamp(26px,3.4vw,40px) 0;
  background:var(--bg-alt);
}
.c-panel h3{margin-top:0;font-size:18px}
.c-panel--accent{background:#fff;border-left:3px solid var(--emerald)}

/* 罫線の定義リスト（会社概要・仕様・料金の考え方） */
.c-deflist{margin:0;border-top:1px solid var(--line)}
.c-deflist > div{display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.c-deflist dt{font-size:14.5px;color:var(--note);font-weight:500}
.c-deflist dd{margin:0;font-size:15.5px;color:var(--ink)}

/* 大きな連番のリスト（固定ページ用・カードにしない） */
.c-numlist{list-style:none;margin:34px 0 0;padding:0}
.c-numlist > li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,3vw,32px);
  padding:clamp(22px,3vw,32px) 0;border-top:1px solid var(--line);align-items:start;
}
.c-numlist > li:first-child{border-top:0;padding-top:0}
.c-numlist b{
  font-family:var(--num);font-size:clamp(32px,4.6vw,54px);font-weight:800;
  color:var(--emerald);line-height:.9;
}
.c-numlist h3{font-size:clamp(17px,2vw,21px);margin:0 0 10px}
.c-numlist p{margin:0;font-size:15.5px}

/* 無料診断レポートの中身（A4一枚に何が書かれているか） */
.c-report{list-style:none;counter-reset:rep;margin:26px 0 0;padding:0}
.c-report > li{
  counter-increment:rep;position:relative;
  padding:18px 0 18px 46px;border-top:1px solid var(--line);
}
.c-report > li:last-child{border-bottom:1px solid var(--line)}
.c-report > li::before{
  content:counter(rep);position:absolute;left:0;top:20px;
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;border:1.5px solid var(--emerald);
  font-family:var(--num);font-size:12px;font-weight:800;color:var(--emerald);
}
.c-report b{display:block;font-size:16px;color:var(--ink);margin-bottom:6px;line-height:1.5}
.c-report span{display:block;font-size:14.5px;line-height:1.85;color:var(--body)}

/* 2カラムの本文レイアウト */
.c-split{display:grid;grid-template-columns:32% minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
/* 見出しをセクション全幅に出したときの2カラム。左の写真と右の見出しを同じ行から始める */
.c-split--profile{margin-top:clamp(28px,3.6vw,40px)}
.c-split--profile figure{margin:0}
.c-split--profile .c-prose > h3:first-child{margin-top:0}
.c-split__side{position:sticky;top:120px}

/* 記事（blog） */
.c-article{max-width:46em;margin-inline:auto}
.c-article__meta{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  font-size:13px;color:var(--note);margin-bottom:26px;
  padding-bottom:20px;border-bottom:1px solid var(--line);
}
.c-article__meta time{font-family:var(--num)}
.c-article__hero{width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:clamp(28px,4vw,44px)}
.c-article__toc{border:1px solid var(--line);padding:22px 24px;margin-bottom:clamp(30px,4vw,44px)}
.c-article__toc h2{font-size:14px;margin:0 0 12px;letter-spacing:.06em}
.c-article__toc ol{margin:0;padding-left:1.3em;font-size:14.5px}
.c-article__toc a{color:var(--body);text-decoration:none}
.c-article__toc a:hover{color:var(--emerald)}
.c-article__back{margin-top:clamp(34px,4.6vw,52px);padding-top:24px;border-top:1px solid var(--line)}

/* 記事一覧カード（news.html） */
.c-postlist{list-style:none;margin:38px 0 0;padding:0;border-top:1px solid var(--line)}
.c-postlist > li{border-bottom:1px solid var(--line)}
.c-postlist a{
  display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(20px,3.4vw,36px);
  align-items:center;padding:clamp(20px,3vw,30px) 0;text-decoration:none;color:inherit;
  transition:opacity .25s ease;
}
.c-postlist a:hover{opacity:.7}
.c-postlist img{width:100%;aspect-ratio:16/10;object-fit:cover}
.c-postlist h2{font-size:clamp(17px,2.1vw,22px);margin:8px 0 10px}
.c-postlist p{margin:0;font-size:14.5px;color:var(--body)}

/* お問い合わせフォーム */
.c-form{margin-top:34px}
.c-form__row{margin-bottom:24px}
.c-form label{display:block;font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:8px}
.c-form .req{
  display:inline-block;margin-left:8px;font-size:11px;font-weight:400;letter-spacing:.06em;
  color:#fff;background:var(--emerald);padding:2px 8px;vertical-align:2px;
}
.c-form .opt{
  display:inline-block;margin-left:8px;font-size:11px;font-weight:400;letter-spacing:.06em;
  color:var(--note);border:1px solid var(--line);padding:1px 8px;vertical-align:2px;
}
.c-form input[type=text],.c-form input[type=email],.c-form input[type=tel],.c-form textarea{
  border:1px solid var(--line);padding:14px 16px;background:#fff;color:var(--ink);
  font-family:inherit;line-height:1.7;border-radius:2px;
}
.c-form input:focus,.c-form textarea:focus{border-color:var(--emerald);outline:none}
.c-form textarea{min-height:190px;resize:vertical}
.c-form__agree{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;font-weight:400}
.c-form__agree input{margin-top:5px;flex:none;width:auto}
.c-form__agree a{color:var(--navy)}
.c-form__submit{margin-top:12px}
.c-form__note{font-size:13px;color:var(--note);margin-top:18px;line-height:1.9}
.c-form__fallback{
  border:1px dashed var(--emerald);background:rgba(15,174,132,.05);
  padding:18px 20px;font-size:13.5px;color:var(--body);margin-bottom:30px;line-height:1.9;
}
.c-form__fallback b{color:var(--ink)}

@media (max-width:1024px){
  .c-split{grid-template-columns:1fr}
  .c-split__side{position:static}
}
@media (max-width:768px){
  .c-phero{padding-top:calc(68px + clamp(40px,7vw,64px))}
  .c-deflist > div{grid-template-columns:1fr;gap:6px;padding:14px 0}
  .c-numlist > li{grid-template-columns:1fr;gap:8px}
  .c-postlist a{grid-template-columns:1fr;gap:14px}
}

/* ===================================================================
   フォーム安全弁（素のフォームがモバイルではみ出さない保険）
   =================================================================== */
input,textarea,select{max-width:100%;box-sizing:border-box;}
input[type=text],input[type=email],input[type=tel],input[type=url],textarea,select{width:100%;font-size:16px;}

/* ===================================================================
   こんな方から（対象の明示）— お悩みセクションの下
   =================================================================== */
.c-target{
  margin-top:clamp(34px,4.4vw,48px);padding:clamp(24px,3vw,32px);
  background:#fff;border:1px solid var(--line);
}
.c-target__head{
  display:flex;align-items:center;gap:11px;margin:0 0 18px;
  font-size:14px;font-weight:700;color:var(--navy);letter-spacing:.02em;
}
.c-target__head::before{
  content:"";width:13px;height:13px;flex:none;
  border:1.5px solid var(--emerald);border-radius:50%;
}
.c-target ul.c-target__list{
  list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;
}
.c-target ul.c-target__list > li{
  position:static;font-size:14.5px;font-weight:500;color:var(--ink);
  border:1px solid var(--line);border-radius:999px;padding:7px 16px;margin:0;
}
.c-target ul.c-target__list > li::before{content:none}
.c-target__note{margin:18px 0 0;font-size:13.5px;color:var(--note)}
@media (max-width:768px){
  .c-target{padding:20px}
  .c-target ul.c-target__list{gap:8px}
  .c-target ul.c-target__list > li{font-size:13px;padding:6px 13px}
}

/* お悩みセクションの締め（Webのことを、全部知る必要はありません） */
.c-worry__lead{
  margin-top:clamp(24px,3vw,32px);max-width:44em;
  font-size:clamp(15px,1.6vw,17px);line-height:1.95;color:var(--body);
}
.c-worry__lead p{margin:0 0 1em}
.c-worry__lead p:last-child{margin-bottom:0}
.c-worry__lead strong{color:var(--ink)}

/* 理由の本文に添える小さな補足（料金など、理由そのものではない根拠） */
.c-reasons__sub{
  display:block;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line);
  font-size:13px;line-height:1.85;color:var(--note);
}

/* ===================================================================
   文節で折り返す（PCのみ）
   句点で文を区切り、「す。」だけが次行に落ちるのを防ぐ。
   SPでは通常の折り返しに戻す。
   =================================================================== */
@media (min-width:768px){
  .u-nb{display:inline-block}
}

/* ===================================================================
   代表メッセージ（写真なし版）— about.html
   同じカットがトップ・会社概要と重複するため、about では本文のみ。
   =================================================================== */
.c-message__grid--solo{grid-template-columns:1fr;max-width:840px}

/* ===================================================================
   ヒーロー：スマホでの見え方の調整
   PCは2カラムなので左からの横グラデで文字を守れるが、SPは1カラムに
   積み替わるため、同じ幕だと上半分が均一に暗くなり「ただ暗い画面」に見える。
   幕を縦方向に変え、写真の見える位置を上げて、街と日の出を1画面に入れる。
   =================================================================== */
@media (max-width:768px){
  .c-hero__bg img{object-position:center 78%}
  .c-hero__veil{
    background:
      linear-gradient(to bottom,
        rgba(6,26,51,.80) 0%,
        rgba(6,26,51,.66) 34%,
        rgba(6,26,51,.30) 62%,
        rgba(6,26,51,.16) 82%,
        rgba(6,26,51,.34) 100%);
  }
  .c-hero__copy{padding-block:44px 26px}
  .c-hero__vortex{min-height:270px;height:270px}
}


/* ===================================================================
   WordPress の wp_nav_menu が出すクラスを、元のデザインに接続する
   =================================================================== */
.c-header__list .sub-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  min-width:230px;background:#fff;border:1px solid var(--line);
  padding:10px 0;margin:0;list-style:none;
  opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease;
  box-shadow:0 18px 40px rgba(10,26,47,.10);
}
.c-header__list > li.menu-item-has-children{position:relative}
.c-header__list > li.menu-item-has-children:hover > .sub-menu,
.c-header__list > li.menu-item-has-children:focus-within > .sub-menu{opacity:1;visibility:visible}
.c-header__list .sub-menu a{display:block;padding:9px 20px;font-size:14px;white-space:nowrap}
.c-drawer__list .sub-menu{list-style:none;margin:6px 0 0;padding:0 0 0 14px}
body.is-locked{overflow:hidden}


/* ===================================================================
   制作事例ギャラリー（/cases/）。body の dp-page-cases で、このページだけに効かせる
   （動画には枠が焼き込まれていないので、ブラウザ枠と端末枠は CSS で付ける）
   =================================================================== */
.c-cases__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(56px,7vw,86px) clamp(28px,4vw,52px);
  margin-top:clamp(40px,5vw,60px);
}
.c-cases__item{margin:0;min-width:0}

/* PCモックアップの上にSPモックアップを重ねる台 */
.c-cases__stage{
  position:relative;padding-right:8%;
  /* SPモックアップが下にはみ出すぶんの逃げ。
     はみ出し量はカードの高さ（=カード幅）に比例するので、画面幅ではなくカード幅を基準にする。
     ％マージンはカード幅に対して解決されるため、1カラムでカードが広がっても破綻しない */
  margin-bottom:calc(9% + 14px);
  transition:transform .35s ease;
}
.c-cases__item:hover .c-cases__stage{transform:translateY(-3px)}

/* --- PC：ブラウザ枠 --- */
.c-cases__browser{
  background:#fff;border:1px solid var(--line);border-radius:2px;overflow:hidden;
  box-shadow:0 18px 40px rgba(6,26,51,.12),0 2px 6px rgba(6,26,51,.05);
  transition:box-shadow .35s ease;
}
.c-cases__item:hover .c-cases__browser{
  box-shadow:0 26px 54px rgba(6,26,51,.17),0 2px 6px rgba(6,26,51,.05);
}
.c-cases__bar{
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  background:var(--bg-alt);border-bottom:1px solid var(--line);
}
.c-cases__dots{display:flex;gap:5px;flex:none}
.c-cases__dots i{width:7px;height:7px;border-radius:50%}
.c-cases__dots i:nth-child(1){background:#FF5F57}
.c-cases__dots i:nth-child(2){background:#FEBC2E}
.c-cases__dots i:nth-child(3){background:#28C840}
.c-cases__url{flex:1;height:14px;background:#fff;border:1px solid var(--line);border-radius:999px}

/* --- 画面：動画を余白なく敷き詰める --- */
.c-cases__screen{position:relative;overflow:hidden;background:var(--deep)}
.c-cases__screen--pc{aspect-ratio:1440/900}
.c-cases__screen--sp{aspect-ratio:375/812;border-radius:6%/2.6%}
.c-cases__poster,.c-cases__vid{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.c-cases__vid{opacity:0;border:0;transition:opacity .45s ease}
.c-cases__vid.is-playing{opacity:1}
.c-cases__poster.is-static{position:static} /* SPは静止画のみ。高さを自分で確保する */

/* --- SP：PCの右下に重ねる
       .c-cases__phone の padding は % 指定なので、幅の確定した wrap を必ず親にする --- */
.c-cases__phonewrap{position:absolute;right:-1%;bottom:-13%;width:24%;min-width:92px;z-index:2}
.c-cases__phone{
  position:relative;width:100%;padding:5.5% 3.5% 3.5%;
  background:#fff;border:1px solid var(--line);border-radius:12%/5.5%;
  box-shadow:0 14px 32px rgba(6,26,51,.18);
}
.c-cases__speaker{
  position:absolute;top:2.2%;left:50%;transform:translateX(-50%);
  width:22%;height:3px;background:var(--line);border-radius:999px;
}

/* --- キャプション --- */
.c-cases__cap{border-top:1px solid var(--line);padding-top:16px}
.c-cases__no{
  display:block;margin-bottom:8px;
  font-family:var(--num);font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--emerald);
}
.c-cases__h{font-size:clamp(16px,1.9vw,19px);margin:0 0 8px}
.c-cases__desc{margin:0;font-size:14px;line-height:1.8;color:var(--note)}

/* ヒーロー写真だけの微調整。
   他ページのヒーローは夜景なので brightness(1.14) まで上げているが、
   この写真は紙と白の面が多く、同じ値だと白飛びして見出しと競る。明けきる手前で止める */
.dp-page-cases .c-phero__bg img{animation-name:dp-phero-dawn--paper}
@keyframes dp-phero-dawn--paper{to{filter:brightness(1) saturate(1.04)}}
@media (prefers-reduced-motion:reduce){
  .dp-page-cases .c-phero__bg img{filter:brightness(1) saturate(1.04)}
}

@media (max-width:768px){
  .c-cases__grid{grid-template-columns:1fr;gap:clamp(48px,11vw,64px)}
  .c-cases__stage{padding-right:10%}
  .c-cases__phonewrap{width:26%}
  .dp-page-cases .c-phero__crumb{font-size:11px;gap:6px}
  .dp-page-cases .c-phero__t{font-size:15px}
}