/*
Theme Name: D2C Marketing LP
Theme URI: https://d2cmarketing.co.jp/
Author: 合同会社D2Cマーケティング
Description: 合同会社D2Cマーケティング コーポレート / LP テーマ。単一ページ構成のLPをフロントページとして表示します。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: d2cmarketing
*/


/* ============================================================
   TOKENS — クリーン・モダン（白基調＋ブラック＋確信のある赤）
   ============================================================ */
:root{
  --ink:        #16181C;   /* 見出し・本文（ほぼ黒） */
  --ink-2:      #45494F;   /* 二次テキスト */
  --ink-3:      #8A8F96;   /* 弱テキスト */
  --line:       #E9E4E3;   /* 白地のヘアライン（ごく僅かに赤み） */
  --paper:      #FFFFFF;   /* 主背景 */
  --paper-2:    #FBF5F4;   /* 交互セクション背景（うっすら赤＝薄い赤基調） */
  --black:      #0A0B0D;   /* ヘッダーバー・フッター・FV */
  --black-2:    #131418;
  --red:        #C0303A;   /* ブランド赤（白地・やや落ち着いた赤） */
  --red-dark:   #9E2630;   /* 赤ホバー */
  --red-bright: #D6404C;   /* アクセント */
  --red-soft:   #F4E7E7;   /* 薄い赤の面 */
  --on-dark:    #F3F1EC;   /* 暗地のテキスト */
  --on-dark-2:  #A7A39B;   /* 暗地の弱テキスト */

  /* FV（ファーストビューのみ緑系：緑ロゴ＋宇宙ビジュアルに合わせる） */
  --fv-green:   #84C098;   /* 暗地に映えるセージミント（見出しアクセント） */
  --fv-green-2: #A9D6B7;
  --logo-green: #6FA882;   /* ロゴ "D2C" の緑（白地でも暗地でも可読） */
  --green-ink:  #2C7A54;   /* 白地に映える深いグリーン（白背景セクションの差し色） */
  --green-soft: #E8F2EB;   /* 淡い緑の面（比較表など） */

  --font-jp:    "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --font-head:  "Noto Sans JP", "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; /* 太いゴシック見出し */
  --font-latin: "Archivo", "Inter", system-ui, sans-serif;

  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:92px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; font-family:var(--font-jp); background:var(--paper); color:var(--ink);
  line-height:1.9; font-feature-settings:"palt" 1; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
::selection{ background:var(--green-ink); color:#fff; }
:focus-visible{ outline:2px solid var(--green-ink); outline-offset:3px; border-radius:2px; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.sec{ position:relative; padding-block:clamp(50px, 7vw, 92px); }
.sec--alt{ background:var(--paper-2); }

/* 見出しシステム */
.kicker{ display:inline-flex; align-items:center; gap:12px; margin-bottom:22px; }
.kicker::before{ content:""; width:26px; height:2px; background:var(--red); }
.kicker span{ font-family:var(--font-latin); font-size:.82rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--red); }
.kicker em{ font-style:normal; font-size:.78rem; letter-spacing:.1em; color:var(--ink-3); margin-left:2px; }
.h2{ font-family:var(--font-head); font-weight:900; line-height:1.4; letter-spacing:.01em; font-size:clamp(1.7rem, 3.6vw, 2.7rem); margin:0; color:var(--ink); }
.lead{ font-size:clamp(1rem,1.3vw,1.08rem); color:var(--ink-2); max-width:42em; line-height:2; }
.accent{ color:var(--red); }

.btn{ display:inline-flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.04em; padding:15px 30px; border-radius:3px; transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.btn__arr{ transition:transform .3s var(--ease); }
.btn:hover .btn__arr{ transform:translateX(5px); }
.btn--red{ background:var(--red); color:#fff; }
.btn--red:hover{ background:var(--red-dark); transform:translateY(-2px); }
.btn--ghost-dark{ color:var(--ink); border:1.5px solid var(--ink); }
.btn--ghost-dark:hover{ background:var(--ink); color:#fff; }

/* ============================================================
   HEADER（ロゴ＋JA/EN＋ハンバーガー / FV上は透過→白地でソリッド）
   ============================================================ */
.header{ position:fixed; inset-block-start:0; inset-inline:0; z-index:100; transition:background .4s var(--ease), box-shadow .4s var(--ease), transform .5s var(--ease); will-change:transform; }
.header__inner{ max-width:1480px; margin-inline:auto; padding:18px var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.logo{ display:inline-flex; align-items:center; line-height:0; }
.logo__img{ display:block; height:30px; width:auto; }
.logo__img--dark{ display:none; }
.header.is-solid .logo__img--light{ display:none; }
.header.is-solid .logo__img--dark{ display:block; }
.logo__text{ display:none; flex-direction:column; line-height:.92; color:#fff; font-family:var(--font-latin); font-weight:800; font-size:1.32rem; letter-spacing:.01em; }
.logo__text span{ color:var(--logo-green); }
.logo__text b{ font-weight:800; }
.header.is-solid .logo__text{ color:var(--ink); }
.logo.is-fallback .logo__img{ display:none !important; }
.logo.is-fallback .logo__text{ display:flex; }
.header__right{ display:flex; align-items:center; gap:clamp(14px,2vw,26px); }
.lang{ display:flex; align-items:center; gap:10px; font-family:var(--font-latin); font-weight:700; font-size:.82rem; letter-spacing:.06em; }
.lang a{ color:#fff; opacity:.6; transition:opacity .25s, color .4s var(--ease); padding:3px 7px; border-radius:3px; }
.lang a.is-active{ opacity:1; background:#fff; color:var(--black); }
.lang a:hover{ opacity:1; }
.burger{ width:46px; height:38px; border:none; background:transparent; position:relative; flex:none; }
.burger span{ position:absolute; left:8px; right:8px; height:2px; background:#fff; transition:transform .4s var(--ease), opacity .2s, background .4s var(--ease); }
.burger span:nth-child(1){ top:13px; } .burger span:nth-child(2){ top:24px; }
/* 白地スクロール時 */
.header.is-solid{ background:rgba(255,255,255,.86); backdrop-filter:blur(14px) saturate(1.5); -webkit-backdrop-filter:blur(14px) saturate(1.5); box-shadow:0 1px 0 var(--line); }
.header.is-solid .logo{ color:var(--ink); }
.header.is-solid .lang a{ color:var(--ink); }
.header.is-solid .lang a.is-active{ background:var(--ink); color:#fff; }
.header.is-solid .burger span{ background:var(--ink); }

/* フルスクリーン・オーバーレイメニュー */
.overlay{ position:fixed; inset:0; z-index:99; background:var(--black); color:var(--on-dark); display:flex; flex-direction:column; justify-content:center; padding:clamp(40px,8vw,90px) var(--gutter); transform:translateY(-100%); opacity:0; visibility:hidden; overflow-y:auto; transition:transform .6s var(--ease-out), opacity .4s, visibility .4s; }
.overlay__grid{ max-width:1480px; margin-inline:auto; width:100%; display:grid; grid-template-columns:1.4fr 1fr; gap:60px; align-items:center; }
.overlay__nav{ list-style:none; margin:0; padding:0; }
.overlay__nav li{ overflow:hidden; }
.overlay__nav a{ display:flex; align-items:baseline; gap:20px; padding:9px 0; font-family:var(--font-head); font-weight:900; font-size:clamp(1.5rem,4.4vw,2.5rem); color:#fff; transition:color .25s, padding-left .35s var(--ease); }
.overlay__nav a:hover{ color:var(--red-bright); padding-left:14px; }
.overlay__nav .n{ font-family:var(--font-latin); font-size:.8rem; font-weight:700; color:var(--red-bright); letter-spacing:.1em; }
.overlay__side{ border-left:1px solid rgba(243,241,236,.14); padding-left:48px; }
.overlay__side h4{ font-family:var(--font-latin); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--on-dark-2); margin:0 0 16px; }
.overlay__side p{ font-size:.9rem; color:var(--on-dark-2); margin:0 0 24px; line-height:1.9; }
.overlay__cta{ display:inline-flex; align-items:center; gap:12px; background:var(--red); color:#fff; padding:15px 30px; border-radius:3px; font-weight:700; letter-spacing:.04em; transition:background .25s, transform .25s; }
.overlay__cta:hover{ background:var(--red-bright); transform:translateY(-2px); }
.overlay.is-open{ transform:translateY(0); opacity:1; visibility:visible; }
/* メニュー展開中はヘッダーのロゴを隠してnav先頭との重なりを防ぐ（PC/モバイル共通） */
body:has(.overlay.is-open) .header .logo{ opacity:0; pointer-events:none; transition:opacity .25s var(--ease); }

/* ============================================================
   HERO / FV（シネマティック）
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--black); isolation:isolate; }
.hero__bg{
  position:absolute; inset:0; z-index:-2; transform-origin:60% 50%;
  /* 下のグラデーションは画像未配置時のプレースホルダー。実画像は下のメディアクエリで指定 */
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(225,43,67,.22), transparent 52%),
    radial-gradient(90% 80% at 18% 96%, rgba(40,60,120,.20), transparent 55%),
    linear-gradient(155deg, #15171E 0%, #0C0D12 50%, #08090C 100%);
  background-size:cover; background-position:center;
  /* 現状の赤系画像を緑寄りに補正。緑/宇宙系の画像に差し替える場合は hue-rotate を 0deg に */
  filter:hue-rotate(120deg) saturate(.95) brightness(1.04) contrast(1.05);
  animation:kenburns 22s var(--ease-out) forwards;
}
@keyframes kenburns{ from{ transform:scale(1.02) translate3d(0,0,0); } to{ transform:scale(1.16) translate3d(-2.2%,-1.6%,0); } }

/* 生きた緑グロー（FVの光源を増幅。緑ロゴ・宇宙ビジュアルに合わせる） */
.hero__glow{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(54% 46% at 80% 30%, rgba(96,170,116,.40), rgba(96,170,116,0) 60%);
  mix-blend-mode:screen; will-change:opacity,transform;
  animation:heroGlow 7.5s var(--ease) infinite alternate; }
@keyframes heroGlow{ 0%{ opacity:.4; transform:scale(1); } 100%{ opacity:1; transform:scale(1.2) translate(-2%,3%); } }

/* ===== FV背景の出し分け（PC=横16:9 / SP=縦9:16）=====
   PC=横長(images/hero__bg.jpg) / SP=縦長(images/hero__bg.png) を割当て済み。差し替え時はURLを変更。 */
@media (min-width:768px){
  .hero__bg{
    background-image:url('images/hero__bg.jpg');  /* 横長 16:9 */
  }
}
@media (max-width:767px){
  .hero__bg{
    background-image:url('images/hero__bg.png');  /* 縦長 9:16（スマホ） */
    background-position:center top;
  }
}
.hero__scrim{ position:absolute; inset:0; z-index:-1; background:
  linear-gradient(180deg, rgba(8,9,12,.34) 0%, rgba(8,9,12,.03) 32%, rgba(8,9,12,.28) 62%, rgba(8,9,12,.92) 100%),
  linear-gradient(90deg, rgba(8,9,12,.62) 0%, rgba(8,9,12,.12) 55%, transparent 100%); }
.hero__grain{ position:absolute; inset:0; z-index:-1; opacity:.05; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.hero__inner{ position:relative; width:100%; padding-block:0 clamp(64px,9vw,120px); padding-top:140px; }
.hero__eyebrow{ display:inline-flex; align-items:center; gap:12px; margin-bottom:22px; opacity:0; animation:fadeUp .8s var(--ease-out) .15s forwards; }
.hero__eyebrow::before{ content:""; width:30px; height:2px; background:var(--fv-green); }
.hero__eyebrow span{ font-family:var(--font-latin); font-weight:700; font-size:.82rem; letter-spacing:.22em; text-transform:uppercase; color:var(--on-dark); }
.hero__title{ font-family:var(--font-head); font-weight:900; color:#fff; font-size:clamp(1.55rem, 3.4vw, 3rem); line-height:1.5; letter-spacing:.01em; margin:0 0 26px; max-width:17em; text-shadow:0 2px 30px rgba(0,0,0,.4); opacity:0; animation:fadeUp 1s var(--ease-out) .25s forwards; }
.hero__title .hl{ color:var(--fv-green); }
.hero__lead{ color:var(--on-dark); font-size:clamp(.96rem,1.4vw,1.12rem); max-width:40em; line-height:2; opacity:0; animation:fadeUp .9s var(--ease-out) .7s forwards; }
.hero__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:38px; opacity:0; animation:fadeUp .9s var(--ease-out) .85s forwards; }
.hero__btn{ display:inline-flex; align-items:center; gap:14px; color:#fff; border:1.5px solid rgba(243,241,236,.7); padding:16px 34px; border-radius:3px; font-weight:700; letter-spacing:.04em; transition:background .3s var(--ease), border-color .3s var(--ease), transform .25s var(--ease); }
.hero__btn:hover{ background:rgba(111,168,130,.9); border-color:var(--fv-green); transform:translateY(-2px); }
.hero__btn .a{ transition:transform .3s var(--ease); }
.hero__btn:hover .a{ transform:translateX(5px); }
.hero__link{ display:inline-flex; align-items:center; gap:8px; color:var(--on-dark); font-size:.92rem; font-weight:500; letter-spacing:.04em; border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color .25s, color .25s; }
.hero__link:hover{ color:#fff; border-color:var(--fv-green); }

@keyframes rise{ to{ transform:translateY(0); } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(20px); filter:blur(7px); } to{ opacity:1; transform:none; filter:blur(0); } }

/* スクロールキュー */
.hero__cue{ position:absolute; left:var(--gutter); bottom:26px; z-index:2; display:flex; align-items:center; gap:12px; font-family:var(--font-latin); font-size:.7rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--on-dark-2); opacity:0; animation:fadeUp 1s var(--ease-out) 1.1s forwards; }
.hero__cue .bar{ width:48px; height:1px; background:rgba(243,241,236,.3); position:relative; overflow:hidden; }
.hero__cue .bar::after{ content:""; position:absolute; inset:0; background:var(--fv-green); animation:sweep 2.4s var(--ease) infinite; }
@keyframes sweep{ 0%{ transform:translateX(-100%);} 50%{ transform:translateX(0);} 100%{ transform:translateX(100%);} }

@media (prefers-reduced-motion: reduce){
  .hero__bg{ animation:none; }
  .hero__glow{ animation:none; opacity:.7; }
  .hero__title{ opacity:1; animation:none; }
  .hero__eyebrow,.hero__lead,.hero__actions,.hero__cue{ opacity:1; animation:none; }
  .hero__cue .bar::after{ animation:none; }
}

/* ============================================================
   INTRO / ポジショニング
   ============================================================ */
.intro__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,90px); align-items:start; }
.intro__title{ font-family:var(--font-head); font-weight:900; font-size:clamp(1.6rem,3.2vw,2.4rem); line-height:1.55; margin:0; letter-spacing:.01em; }
.intro__title em{ font-style:normal; color:var(--red); }
.intro__body{ margin-top:24px; color:var(--ink-2); line-height:1.95; }
.intro__note{ display:inline-block; margin-top:18px; font-size:.84rem; color:var(--ink-3); border-left:2px solid var(--line); padding-left:14px; line-height:1.8; }
.triad{ display:grid; gap:0; }
.triad__row{ display:grid; grid-template-columns:auto 1fr; gap:22px; padding-block:22px; border-top:1px solid var(--line); }
.triad__row:last-child{ border-bottom:1px solid var(--line); }
.triad__no{ font-family:var(--font-latin); font-weight:700; font-size:1.1rem; color:var(--red); padding-top:4px; }
.triad__name{ font-family:var(--font-head); font-weight:700; font-size:1.12rem; margin:0 0 4px; }
.triad__desc{ font-size:.92rem; color:var(--ink-2); margin:0; line-height:1.8; }

/* ============================================================
   SERVICES
   ============================================================ */
.svc__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:22px; margin-bottom:clamp(40px,5vw,60px); }
.svc__head .h2{ max-width:16em; }
.svc__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.card{ background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:clamp(28px,3vw,40px); position:relative; transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px)); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.sec--alt .card{ background:#fff; }
.card:hover{ --ty:-4px; box-shadow:0 24px 50px -32px rgba(22,24,28,.28); border-color:#D8D5CF; }
.card__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:20px; }
.card__label{ display:flex; align-items:center; gap:14px; }
.card__tag{ flex:none; width:34px; height:34px; border-radius:4px; background:var(--ink); color:#fff; display:grid; place-items:center; font-family:var(--font-latin); font-weight:700; font-size:1rem; }
.card:hover .card__tag{ background:var(--red); }
.card__title{ font-family:var(--font-head); font-weight:700; font-size:1.18rem; line-height:1.45; margin:0; }
.card__icon{ color:var(--ink-3); flex:none; transition:color .35s var(--ease); }
.card:hover .card__icon{ color:var(--red); }
.card__list{ list-style:none; margin:0; padding:0; }
.card__list li{ position:relative; padding-left:18px; padding-block:7px; font-size:.93rem; color:var(--ink); border-top:1px solid var(--line); }
.card__list li:first-child{ border-top:0; }
.card__list li::before{ content:""; position:absolute; left:1px; top:15px; width:6px; height:6px; background:var(--red); border-radius:1px; }
.svc__foot{ margin-top:20px; padding-left:18px; font-size:.86rem; color:var(--ink-3); }

/* ============================================================
   PROCESS / 支援フェーズ
   ============================================================ */
.proc__list{ display:grid; gap:0; margin-top:clamp(36px,5vw,52px); border-top:1px solid var(--line); }
.step{ display:grid; grid-template-columns:104px 1fr; gap:clamp(20px,4vw,52px); padding-block:clamp(26px,3.4vw,38px); border-bottom:1px solid var(--line); align-items:start; }
.step__no{ font-family:var(--font-latin); font-weight:700; font-size:clamp(2.2rem,4.6vw,3.4rem); line-height:1; color:var(--ink); position:relative; }
.step__no::after{ content:attr(data-tag); position:absolute; left:2px; top:calc(100% + 8px); font-family:var(--font-latin); font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--red); }
.step__title{ font-family:var(--font-head); font-weight:700; font-size:clamp(1.15rem,2.2vw,1.5rem); margin:0 0 8px; }
.step__desc{ color:var(--ink-2); font-size:.96rem; margin:0; line-height:1.95; max-width:48em; }

/* ============================================================
   WORKS / 制作実績
   ============================================================ */
.work{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,72px); align-items:center; }
.work__shot{ position:relative; border-radius:8px; overflow:hidden; background:var(--black-2); aspect-ratio:4/3; box-shadow:0 40px 80px -50px rgba(22,24,28,.4); border:1px solid var(--line); }
.work__shot img{ width:100%; height:100%; object-fit:contain; transition:transform .9s var(--ease); }
.work:hover .work__shot img{ transform:scale(1.03); }
.shot-ph{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; gap:10px; color:var(--on-dark-2); background:radial-gradient(120% 100% at 70% 12%, rgba(225,43,67,.18), transparent 55%), linear-gradient(155deg,#1A1C22,#0C0D12); }
.shot-ph__latin{ font-family:var(--font-latin); font-weight:700; font-size:1.6rem; letter-spacing:.04em; color:#fff; }
.shot-ph__note{ font-size:.72rem; letter-spacing:.08em; }
.work__name{ font-family:var(--font-latin); font-weight:700; font-size:clamp(2rem,4.4vw,3rem); letter-spacing:.01em; line-height:1; margin:0 0 10px; }
.work__role{ font-size:.94rem; letter-spacing:.04em; color:var(--red); margin:0 0 22px; }
.work__desc{ color:var(--ink-2); margin:0 0 26px; }
.work__meta{ list-style:none; margin:0 0 28px; padding:0; border-top:1px solid var(--line); }
.work__meta li{ display:flex; gap:14px; padding-block:11px; border-bottom:1px solid var(--line); font-size:.9rem; }
.work__meta .k{ flex:none; width:7em; color:var(--ink-3); font-size:.82rem; letter-spacing:.04em; }
.work__link{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-latin); font-weight:600; font-size:1.02rem; letter-spacing:.02em; color:var(--ink); border-bottom:1.5px solid var(--line); padding-bottom:5px; transition:color .25s, border-color .25s; }
.work__link:hover{ color:var(--red); border-color:var(--red); }
.work__more{ margin-top:32px; font-size:.84rem; color:var(--ink-3); display:flex; align-items:center; gap:12px; }
.work__more::before{ content:""; width:24px; height:1px; background:var(--line); }

/* ============================================================
   VOICE / お客様の声
   ============================================================ */
.voice__shot{ position:relative; border-radius:8px; overflow:hidden; aspect-ratio:16/9; border:1px solid var(--line); box-shadow:0 40px 80px -54px rgba(22,24,28,.35); margin-bottom:clamp(34px,4vw,48px); }
.voice__shot.reveal{ opacity:1; transform:none; }
.voice__shot img{ width:100%; height:100%; object-fit:cover; clip-path:inset(0 0 100% 0); transform:scale(1.06); translate:0 var(--vpar,0px); transition:clip-path 1.15s var(--ease-out), transform 1.6s var(--ease-out); }
.voice__shot.is-visible img{ clip-path:inset(0 0 0 0); transform:scale(1.1); }
/* 見出しのワイプ演出は共通 .ttl-wipe（FINISHINGブロック）で適用 */
.voice__shot .shot-ph{ background:radial-gradient(120% 100% at 30% 18%, rgba(225,43,67,.14), transparent 55%), linear-gradient(150deg,#1C1E24,#0C0D12); }
.voice__shot-cap{ position:absolute; left:20px; bottom:16px; font-family:var(--font-latin); font-weight:600; font-size:.74rem; letter-spacing:.14em; color:#fff; text-transform:uppercase; background:rgba(8,9,12,.5); padding:7px 14px; border-radius:3px; backdrop-filter:blur(4px); }
.voice__body{ max-width:54em; }
.voice__qmark{ font-family:var(--font-latin); font-weight:700; font-size:4rem; color:var(--red); line-height:.5; height:.4em; display:block; }
.voice__quote{ font-family:var(--font-head); font-weight:700; color:var(--ink); font-size:clamp(1.3rem,2.1vw,1.6rem); line-height:1.6; letter-spacing:.01em; margin:18px 0 0; }
.voice__quote em{ font-style:normal; color:var(--red); }
.voice__paras{ display:grid; gap:16px; margin-top:24px; }
.voice__paras p{ color:var(--ink-2); font-size:.96rem; line-height:2; margin:0; }
.voice__attr{ margin-top:34px; padding-top:28px; border-top:1px solid var(--line); display:flex; align-items:center; gap:18px; }
.voice__avatar{ flex:none; width:62px; height:62px; border-radius:50%; overflow:hidden; background:var(--ink); display:grid; place-items:center; color:#fff; font-family:var(--font-latin); font-weight:700; font-size:1.1rem; }
.voice__avatar img{ width:100%; height:100%; object-fit:cover; }
.voice__name{ font-family:var(--font-head); font-weight:700; font-size:1.14rem; margin:0; }
.voice__name span{ font-family:var(--font-latin); font-weight:500; font-size:.76rem; letter-spacing:.08em; color:var(--ink-3); margin-left:10px; }
.voice__role{ font-size:.84rem; color:var(--ink-3); margin:3px 0 0; line-break:strict; word-break:auto-phrase; }

/* ============================================================
   MEMBERS
   ============================================================ */
.members__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(32px,4.5vw,60px); margin-top:clamp(40px,5vw,56px); }
.member{ display:grid; grid-template-columns:clamp(104px,12vw,138px) 1fr; grid-template-areas:"photo head" "bio bio"; column-gap:clamp(18px,2.2vw,26px); row-gap:clamp(18px,2vw,24px); align-items:center; align-content:start; }
.member__photo{ grid-area:photo; width:100%; aspect-ratio:1; border-radius:4px; overflow:hidden; background:var(--paper-2); border:1px solid var(--line); position:relative; }
.member__photo img{ width:100%; height:100%; object-fit:cover; }
.member__photo .ph{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-latin); font-weight:700; font-size:1.6rem; color:var(--ink-3); background:linear-gradient(150deg,#F0EEE9,#E6E3DD); }
.member__head{ grid-area:head; }
.member__name{ font-family:var(--font-head); font-weight:700; font-size:clamp(1.25rem,2vw,1.5rem); margin:0; line-height:1.3; }
.member__name span{ display:block; font-family:var(--font-latin); font-weight:500; font-size:.76rem; letter-spacing:.1em; color:var(--ink-3); margin:6px 0 0; }
.member__role{ font-size:.84rem; color:var(--red); margin:11px 0 0; line-height:1.6; }
.member__bio{ grid-area:bio; font-size:.93rem; color:var(--ink-2); margin:0; line-height:1.95; padding-top:clamp(18px,2vw,22px); border-top:1px solid var(--line); }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(36px,5vw,72px); align-items:start; }
.faq__intro .lead{ margin-top:16px; }
.faq__list{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{ list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:16px; padding:22px 0; font-family:var(--font-head); font-weight:700; font-size:clamp(1rem,1.6vw,1.16rem); color:var(--ink); transition:color .25s; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--red); }
.faq__q{ font-family:var(--font-latin); font-weight:700; font-size:1.05rem; color:var(--red); flex:none; line-height:1.5; }
.faq__tog{ margin-left:auto; flex:none; width:20px; height:20px; position:relative; margin-top:4px; }
.faq__tog::before,.faq__tog::after{ content:""; position:absolute; background:var(--ink-3); transition:transform .35s var(--ease), background .25s; }
.faq__tog::before{ left:0; right:0; top:50%; height:2px; transform:translateY(-50%); }
.faq__tog::after{ top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%); }
.faq__item[open] .faq__tog::after{ transform:translateX(-50%) scaleY(0); }
.faq__item[open] summary{ color:var(--red); }
.faq__item[open] .faq__tog::before{ background:var(--red); }
.faq__a p{ margin:0; padding:0 0 24px 34px; color:var(--ink-2); font-size:.94rem; line-height:1.95; max-width:46em; }
.faq__a{ overflow:hidden; }

/* ============================================================
   CONTACT（フォーム埋め込み）
   ============================================================ */
.contact__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,5vw,72px); align-items:start; }
.contact__intro .lead{ margin-top:16px; }
.contact__points{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:10px; }
.contact__points li{ display:flex; gap:12px; align-items:flex-start; font-size:.92rem; color:var(--ink); }
.contact__points li::before{ content:""; flex:none; width:7px; height:7px; margin-top:9px; background:var(--red); border-radius:1px; }
.contact__note{ margin-top:26px; font-size:.8rem; color:var(--ink-3); border-left:2px solid var(--line); padding-left:14px; line-height:1.8; }

/* === フォーム埋め込み枠（ここに実フォームを差し込む） === */
.contact__form{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:clamp(26px,3vw,40px); box-shadow:0 24px 60px -44px rgba(22,24,28,.3); }
.form-flag{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-latin); font-weight:700; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--red); border:1px dashed var(--red); border-radius:100px; padding:5px 14px; margin-bottom:22px; }
/* 以下はレイアウト確認用ダミー（実フォーム埋め込み時は丸ごと置換） */
.dform{ display:grid; gap:16px; }
.dform__row{ display:grid; gap:7px; }
.dform__row.is-2{ grid-template-columns:1fr 1fr; gap:16px; }
.dform label{ font-size:.84rem; font-weight:500; color:var(--ink); display:flex; align-items:center; gap:8px; }
.dform .req{ font-size:.66rem; color:#fff; background:var(--red); padding:2px 7px; border-radius:2px; letter-spacing:.04em; }
.dform .opt{ font-size:.66rem; color:var(--ink-3); border:1px solid var(--line); padding:2px 7px; border-radius:2px; }
.dform input,.dform textarea{ width:100%; font:inherit; font-size:.92rem; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:4px; padding:12px 14px; }
.dform textarea{ min-height:96px; resize:none; }
.dform__submit{ margin-top:6px; display:inline-flex; align-items:center; justify-content:center; gap:10px; background:var(--red); color:#fff; font-weight:700; letter-spacing:.04em; padding:15px 22px; border-radius:4px; border:none; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--black); color:var(--on-dark-2); padding-block:clamp(56px,7vw,80px) 34px; }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1.4fr; gap:clamp(32px,5vw,64px); padding-bottom:46px; border-bottom:1px solid rgba(243,241,236,.12); }
.footer__brand .logo{ color:#fff; margin-bottom:18px; }
.footer__desc{ font-size:.9rem; color:var(--on-dark-2); line-height:1.95; max-width:26em; margin:0; }
.footer__col h5{ font-family:var(--font-latin); font-weight:700; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--on-dark); margin:0 0 18px; }
.footer__nav{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.footer__nav a{ font-size:.9rem; transition:color .25s; }
.footer__nav a:hover{ color:#fff; }
.footer__info{ display:grid; }
.footer__info .row{ display:flex; gap:14px; padding-block:9px; border-top:1px solid rgba(243,241,236,.1); font-size:.85rem; }
.footer__info .row:first-child{ border-top:0; }
.footer__info .k{ flex:none; width:5.5em; color:var(--on-dark-2); font-size:.78rem; }
.footer__info .v{ color:var(--on-dark); }
.footer__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px; padding-top:26px; font-size:.78rem; }
.footer__copy{ font-family:var(--font-latin); letter-spacing:.06em; }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; } .reveal[data-d="2"]{ transition-delay:.16s; } .reveal[data-d="3"]{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; }
  .voice__shot img{ clip-path:none !important; transform:none !important; translate:none !important; } }

/* ============================================================
   FINISHING ── 仕上げの演出・微細インタラクション
   ============================================================ */
/* スクロール進捗バー */
.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:130; pointer-events:none; }
.progress span{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--green-ink), var(--fv-green)); box-shadow:0 0 12px rgba(111,168,130,.5); }

/* ヘッダー：下スクロールで退避、上スクロールで復帰 */
.header.is-hidden{ transform:translateY(-102%); }

/* 見出しは各セクションの親 .reveal のフェードで確実に表示する（クリップ演出は表示不具合の原因になり得たため不使用） */
.ttl-wipe{ clip-path:none; }
.ttl-wipe.is-visible{ clip-path:none; }

/* キッカー：赤い線が引かれてから文字 */
.reveal .kicker::before, .kicker.reveal::before{ transform:scaleX(0); transform-origin:left; transition:transform .8s var(--ease-out) .25s; }
.reveal.is-visible .kicker::before, .kicker.reveal.is-visible::before{ transform:scaleX(1); }

/* カード：カーソル追従スポットライト */
.card::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s var(--ease);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,40%), rgba(192,31,46,.08), transparent 62%); }
.card:hover::after{ opacity:1; }

/* ボタン：シャインスイープ */
.hero__btn,.overlay__cta,.dform__submit{ position:relative; overflow:hidden; }
.hero__btn::before,.overlay__cta::before,.dform__submit::before{ content:""; position:absolute; top:-10%; bottom:-10%; left:-140%; width:55%; transform:skewX(-22deg); background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transition:left .65s var(--ease); pointer-events:none; }
.hero__btn:hover::before,.overlay__cta:hover::before,.dform__submit:hover::before{ left:170%; }

/* ヒーロー：タイトルの赤にグロー、マウス視差、火の粉 */
.hero__title .hl{ text-shadow:0 0 38px rgba(111,168,130,.5); }
.hero__glow{ translate:calc(var(--px,0)*22px) calc(var(--py,0)*14px); transition:translate .7s var(--ease-out); }
.hero__title{ translate:calc(var(--px,0)*-7px) calc(var(--py,0)*-4px); transition:translate .8s var(--ease-out); }
.hero__embers{ position:absolute; inset:0; z-index:0; pointer-events:none; mix-blend-mode:screen; }

/* プロセス：番号が"灯る"／行ホバーの薄いスイープ */
.step{ position:relative; }
.step::after{ content:""; position:absolute; inset:0 -18px; background:linear-gradient(90deg, rgba(192,31,46,.05), transparent 65%); opacity:0; transition:opacity .35s var(--ease); pointer-events:none; }
.step:hover::after{ opacity:1; }
.step .step__no{ color:#D8D5CF; transition:color .9s var(--ease) .25s; }
.step.is-visible .step__no{ color:var(--ink); }

/* フッター：リンク下線スライド */
.footer__nav a{ position:relative; }
.footer__nav a::after{ content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background:rgba(243,241,236,.55); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease); }
.footer__nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* オーバーレイメニュー：リンクが順に立ち上がる */
.overlay__nav li{ opacity:0; transform:translateY(28px); transition:opacity .45s var(--ease-out), transform .6s var(--ease-out); }
.overlay.is-open .overlay__nav li{ opacity:1; transform:none; }
.overlay.is-open .overlay__nav li:nth-child(1){ transition-delay:.10s; }
.overlay.is-open .overlay__nav li:nth-child(2){ transition-delay:.16s; }
.overlay.is-open .overlay__nav li:nth-child(3){ transition-delay:.22s; }
.overlay.is-open .overlay__nav li:nth-child(4){ transition-delay:.28s; }
.overlay.is-open .overlay__nav li:nth-child(5){ transition-delay:.34s; }
.overlay.is-open .overlay__nav li:nth-child(6){ transition-delay:.40s; }
.overlay.is-open .overlay__nav li:nth-child(7){ transition-delay:.46s; }
.overlay.is-open .overlay__nav li:nth-child(8){ transition-delay:.52s; }
.overlay__side{ opacity:0; transform:translateY(20px); transition:opacity .5s var(--ease-out) .46s, transform .6s var(--ease-out) .46s; }
.overlay.is-open .overlay__side{ opacity:1; transform:none; }

/* カスタムカーソル（マウス環境のみ） */
.cur-dot,.cur-ring{ display:none; }
@media (hover:hover) and (pointer:fine){
  .cur-dot{ display:block; position:fixed; top:0; left:0; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:var(--red-bright); z-index:9999; pointer-events:none; }
  .cur-ring{ display:block; position:fixed; top:0; left:0; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; border:1.5px solid rgba(225,43,67,.5); z-index:9998; pointer-events:none; transition:width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); }
  .cur-ring.is-link{ width:56px; height:56px; margin:-28px 0 0 -28px; border-color:rgba(225,43,67,.95); background:rgba(225,43,67,.07); }
}

@media (max-width:600px){ .step::after{ inset:0 -8px; } }

/* 動きを抑える設定を尊重 */
@media (prefers-reduced-motion: reduce){
  .ttl-wipe{ clip-path:none !important; }
  .reveal .kicker::before, .kicker.reveal::before{ transform:scaleX(1) !important; }
  .card{ transform:none !important; }
  .hero__glow,.hero__title{ translate:none !important; }
  .overlay__nav li,.overlay__side{ opacity:1 !important; transform:none !important; transition:none !important; }
  .step .step__no{ color:var(--ink); }
  .cur-dot,.cur-ring{ display:none !important; }
  .hero__embers{ display:none; }
  .header.is-hidden{ transform:none; opacity:0; visibility:hidden; pointer-events:none; }
}

/* ============================================================
   追加コンポーネント（v3改修：とは／課題／考え方／支援領域3本柱／フェーズ／ご相談／比較表／会社概要）
   ============================================================ */
/* セクション導入ブロック */
.sec__intro{ max-width:50em; }
.sec__intro .lead{ margin-top:18px; }

/* 3カラムのサービスカード */
.svc__grid--3{ grid-template-columns:repeat(3,1fr); }

/* よくある課題 */
.issues{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:clamp(28px,3.5vw,40px); }
.issue{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:clamp(18px,2vw,26px); display:flex; gap:18px; align-items:flex-start; transition:border-color .35s var(--ease), box-shadow .35s var(--ease); }
.issue:hover{ border-color:#E4C9CB; box-shadow:0 18px 40px -30px rgba(22,24,28,.22); }
.issue__no{ flex:none; font-family:var(--font-latin); font-weight:700; font-size:1.05rem; color:var(--red); width:1.6em; line-height:1.5; }
.issue__t{ font-family:var(--font-head); font-weight:700; font-size:1.04rem; margin:0 0 7px; line-height:1.5; }
.issue__d{ font-size:.9rem; color:var(--ink-2); margin:0; line-height:1.85; }

/* よくあるご相談（concern cards） */
.concerns{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:clamp(30px,4vw,44px); }
.concern{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:clamp(24px,2.6vw,32px); }
.concern__mark{ font-family:var(--font-latin); font-weight:700; font-size:2.4rem; color:var(--red); opacity:.45; line-height:.5; height:.45em; display:block; }
.concern__t{ font-family:var(--font-head); font-weight:700; font-size:1.02rem; margin:16px 0 10px; line-height:1.55; color:var(--ink); }
.concern__d{ font-size:.9rem; color:var(--ink-2); margin:0; line-height:1.85; }

/* 顧客の声：事例ミニカード */
.voice__case{ margin-top:clamp(34px,4vw,48px); padding-top:clamp(28px,3vw,40px); border-top:1px solid var(--line); display:grid; grid-template-columns:210px 1fr; gap:clamp(22px,3vw,40px); align-items:center; }
.voice__case .work__shot{ aspect-ratio:2187/1338; box-shadow:0 24px 50px -38px rgba(22,24,28,.4); }
.voice__case-label{ font-family:var(--font-latin); font-weight:700; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--red); margin:0 0 10px; }
.voice__case-name{ font-family:var(--font-latin); font-weight:700; font-size:1.4rem; margin:0 0 6px; letter-spacing:.01em; }
.voice__case-role{ font-size:.86rem; color:var(--ink-2); margin:0 0 14px; word-break:auto-phrase; line-break:strict; letter-spacing:.03em; }
.voice__case-meta{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; padding:0; list-style:none; }
.voice__case-meta li{ font-size:.78rem; color:var(--ink-2); background:var(--paper-2); border:1px solid var(--line); border-radius:100px; padding:4px 13px; }
.voice__case-link{ font-family:var(--font-latin); font-weight:600; font-size:.92rem; color:var(--ink); border-bottom:1.5px solid var(--line); padding-bottom:3px; transition:color .25s,border-color .25s; }
.voice__case-link:hover{ color:var(--red); border-color:var(--red); }

/* 他社との違い（比較表） */
/* 他社との違い（比較表）— シンプルな罫線テーブル（装飾を排し、当社は太字＋緑ラベルで素直に強調） */
.cmp-wrap{ margin-top:clamp(36px,5vw,52px); border-top:2px solid var(--ink); }
.cmp{ width:100%; border-collapse:collapse; font-size:.95rem; }
.cmp th,.cmp td{ text-align:left; padding:18px 24px 18px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.cmp thead th{ font-family:var(--font-jp); font-weight:500; font-size:.8rem; color:var(--ink-3); padding-top:15px; padding-bottom:15px; }
.cmp thead th.cmp__us{ color:var(--green-ink); font-weight:700; }
.cmp tbody th[scope=row]{ font-family:var(--font-head); font-weight:700; color:var(--ink); width:12em; font-size:.96rem; }
.cmp td{ color:var(--ink-2); }
.cmp td.cmp__us{ color:var(--ink); font-weight:700; }
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{ border-bottom:0; }
@media (max-width:720px){
  .cmp thead{ display:none; }
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{ display:block; width:100%; }
  .cmp th,.cmp td{ padding:0; border:0; }
  .cmp tr{ padding:22px 0; border-bottom:1px solid var(--line); }
  .cmp tbody tr:last-child{ border-bottom:0; }
  .cmp tbody th[scope=row]{ font-family:var(--font-head); font-weight:700; font-size:1.06rem; color:var(--ink); width:auto; margin-bottom:14px; }
  .cmp td{ padding:0; color:var(--ink-2); font-size:.95rem; line-height:1.7; display:grid; grid-template-columns:7.5em 1fr; gap:12px; align-items:baseline; }
  .cmp td + td{ margin-top:10px; }
  .cmp td::before{ content:attr(data-label); font-family:var(--font-jp); font-weight:500; font-size:.78rem; color:var(--ink-3); }
  .cmp td.cmp__us{ color:var(--ink); font-weight:700; }
  .cmp td.cmp__us::before{ color:var(--green-ink); font-weight:700; }
}
/* PC：デザイン重視の比較表（罫線は最小・当社列を角丸グリーンパネルで強調）。モバイルは上の現行スタック表示を維持 */
@media (min-width:721px){
  .cmp-wrap{ border-top:0; }                                   /* 重い黒罫を撤去 */
  .cmp{ border-collapse:separate; border-spacing:0; font-size:.96rem; }
  .cmp th,.cmp td{ padding:20px 28px; border:0; border-bottom:1px solid var(--line); background:transparent; vertical-align:middle; }

  /* ヘッダー行：面色なし・小さめラベル調、下に一本だけ罫 */
  .cmp thead th{ padding:14px 28px; font-family:var(--font-jp); font-weight:600; font-size:.78rem; letter-spacing:.04em; color:var(--ink-3); border-bottom:1px solid var(--ink); }

  /* 行ラベル（左列）：太字・面色なし */
  .cmp tbody th[scope=row]{ font-family:var(--font-head); font-weight:700; font-size:1.02rem; color:var(--ink); width:13.5em; }

  /* 一般的な支援会社（右列）：ミュート */
  .cmp td{ color:var(--ink-2); }

  /* 当社列：罫線なしの連続した角丸グリーンパネル＋上端アクセント */
  .cmp .cmp__us{ background:var(--green-soft); border-bottom:0; }
  .cmp td.cmp__us{ color:var(--ink); font-weight:700; }
  .cmp thead th.cmp__us{ color:var(--green-ink); font-family:var(--font-head); font-size:.86rem; letter-spacing:0; border-top:3px solid var(--green-ink); border-top-left-radius:12px; border-top-right-radius:12px; }
  .cmp tbody tr:last-child td.cmp__us{ border-bottom-left-radius:12px; border-bottom-right-radius:12px; }

  /* 最終行は左列/右列の下罫を消してすっきり */
  .cmp tbody tr:last-child th[scope=row],.cmp tbody tr:last-child td{ border-bottom:0; }
}

/* 会社概要 */
.profile{ max-width:760px; margin:clamp(34px,4vw,46px) 0 0; border-top:1px solid var(--line); }
.profile__row{ display:grid; grid-template-columns:11em 1fr; gap:24px; padding:17px 4px; border-bottom:1px solid var(--line); }
.profile__row dt{ font-family:var(--font-head); font-weight:700; font-size:.9rem; color:var(--ink); margin:0; }
.profile__row dd{ margin:0; color:var(--ink-2); font-size:.94rem; line-height:1.85; }
@media (max-width:600px){ .profile__row{ grid-template-columns:1fr; gap:5px; } }

/* 支援フェーズ：注力ポイントのチップ */
.step__focus{ display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; padding:0; list-style:none; }
.step__focus li{ font-size:.78rem; color:var(--ink-2); background:var(--paper); border:1px solid var(--line); border-radius:100px; padding:5px 13px; }
.sec--alt .step__focus li{ background:#fff; }

@media (max-width:760px){
  .svc__grid--3{ grid-template-columns:1fr; }
  .issues{ grid-template-columns:1fr; }
  .concerns{ grid-template-columns:1fr; }
  .voice__case{ grid-template-columns:1fr; }
  .voice__case .work__shot{ max-width:300px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .overlay__grid{ grid-template-columns:1fr; gap:40px; }
  .overlay__side{ border-left:0; border-top:1px solid rgba(243,241,236,.14); padding-left:0; padding-top:32px; }
  .intro__grid{ grid-template-columns:1fr; }
  .svc__grid{ grid-template-columns:1fr; }
  .work{ grid-template-columns:1fr; }
  .voice__body{ grid-template-columns:1fr; }
  .members__grid{ grid-template-columns:1fr; }
  .faq{ grid-template-columns:1fr; }
  .contact__grid{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
}
@media (max-width:600px){
  .sec{ padding-block:clamp(38px,9vw,58px); }
  .hero__inner{ padding-top:120px; }
  .step{ grid-template-columns:1fr; gap:10px; }
  .step__no::after{ position:static; display:inline-block; margin-left:12px; }
  .dform__row.is-2{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; }
  .voice__attr{ gap:14px; margin-top:24px; padding-top:22px; align-items:center; }
  .voice__attr > div{ min-width:0; }
  .voice__avatar{ width:56px; height:56px; }
  .faq__a p{ padding-left:0; }
  .faq__q{ display:none; }
  .lang{ display:none; }
  .member{ grid-template-columns:80px 1fr; column-gap:16px; row-gap:16px; }
  .member__bio{ padding-top:16px; }
}
/* ===================================================================
   調整パッチ：改行制御 / CTA改行 / グリーンの差し色 / Phase縦ナビ / モバイルFV
   =================================================================== */

/* --- 日本語の改行制御 --- */
/* 主要見出しは keep-all で文字途中の改行を禁止し、HTML内の <wbr>（意味の切れ目）でのみ改行する（Safari/WebKitでも確実に効く） */
.h2, .hero__title{ text-wrap:balance; word-break:keep-all; overflow-wrap:normal; line-break:strict; }
/* 補助的な短い見出しは従来の自動調整（Chromium）＋strict */
.step__title, .phase__step-title, .member__name, .card__title{
  text-wrap:balance; word-break:auto-phrase; line-break:strict;
}
.lead, .hero__lead, .intro__body, .issue__d, .concern__d, .member__bio, .triad__desc,
.step__desc, .phase__step-desc, .faq__a p, .contact__points li, .svc__foot,
.voice__quote, .voice__paras p, .profile__row dd, .card__list li{
  word-break:auto-phrase; line-break:strict; letter-spacing:.03em;
}
.lead, .hero__lead, .intro__body, .issue__d, .concern__d, .member__bio, .triad__desc,
.step__desc, .phase__step-desc, .voice__quote, .voice__paras p{ text-wrap:pretty; }

/* --- 見出しのトラッキング：文字間隔8%（PC/モバイル共通） --- */
.hero__title, .h2, .kicker em, .issue__t, .concern__t, .triad__name, .card__title, .phase__step-title, .flowcard__t, .member__name{ letter-spacing:.08em; }

/* --- CTA：句のかたまりで折り返す（「戦略設計を相談する」で改行） --- */
.cta-txt > span{ display:inline-block; }

/* --- グリーンの差し色：白背景セクションはFVの緑をアクセントに（赤一辺倒の単調さを解消） --- */
.sec:not(.sec--alt) .kicker span,
.sec:not(.sec--alt) .accent,
.sec:not(.sec--alt) .triad__no,
.sec:not(.sec--alt) .step__no::after,
.sec:not(.sec--alt) .faq__q{ color:var(--green-ink); }
.sec:not(.sec--alt) .kicker::before{ background:var(--green-ink); }

/* --- Phase：縦3分割スクロールナビ --- */
.phase{ display:grid; grid-template-columns:clamp(54px,15vw,208px) 1fr; gap:clamp(16px,3vw,48px); margin-top:clamp(36px,5vw,56px); align-items:start; }
.phase__rail{ position:sticky; top:24vh; align-self:start; height:50vh; min-height:330px; }
.phase__line{ position:absolute; left:11px; top:8px; bottom:8px; width:2px; background:var(--line); border-radius:2px; overflow:hidden; }
.phase__fill{ position:absolute; left:0; top:0; width:100%; height:0%; background:var(--green-ink); transition:height .45s var(--ease-out); }
.phase__nodes{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; }
.phase__node{ display:flex; align-items:center; gap:14px; background:none; border:0; padding:4px 0; cursor:pointer; text-align:left; }
.phase__node .dot{ flex:none; width:24px; height:24px; border-radius:50%; background:var(--paper); border:2px solid var(--line); display:grid; place-items:center; font-family:var(--font-latin); font-weight:700; font-size:.72rem; color:var(--ink-3); transition:all .4s var(--ease); position:relative; z-index:1; }
.phase__node .nlabel{ display:flex; flex-direction:column; line-height:1.2; }
.phase__node .nlabel b{ font-family:var(--font-head); font-weight:700; font-size:.96rem; color:var(--ink-3); transition:color .4s; }
.phase__node .nlabel em{ font-style:normal; font-family:var(--font-latin); font-weight:700; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-top:2px; }
.phase__node.is-done .dot{ border-color:var(--green-ink); color:var(--green-ink); }
.phase__node.is-active .dot{ background:var(--green-ink); border-color:var(--green-ink); color:#fff; transform:scale(1.14); box-shadow:0 4px 16px rgba(44,122,84,.3); }
.phase__node.is-active .nlabel b{ color:var(--ink); }
.phase__node.is-active .nlabel em{ color:var(--green-ink); }
.phase__steps{ display:flex; flex-direction:column; gap:clamp(44px,9vw,86px); }
.phase__step{ scroll-margin-top:96px; }
.phase__step-tag{ font-family:var(--font-latin); font-weight:700; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--green-ink); margin:0 0 12px; }
.phase__step-title{ font-family:var(--font-head); font-weight:900; font-size:clamp(1.4rem,3vw,2rem); margin:0 0 14px; color:var(--ink); }
.phase__step-desc{ color:var(--ink-2); font-size:1rem; line-height:1.95; margin:0; max-width:42em; }
.phase__step .step__focus{ margin-top:18px; }
@media (prefers-reduced-motion: reduce){ .phase__fill{ transition:none; } }
@media (max-width:600px){
  .phase{ grid-template-columns:42px 1fr; gap:16px; }
  .phase__rail{ top:16vh; height:44vh; min-height:280px; }
  .phase__line{ left:9px; }
  .phase__node .dot{ width:20px; height:20px; font-size:.62rem; }
  .phase__node .nlabel{ display:none; }
}

/* --- モバイルFVの洗練（余白・字組・全幅CTA） --- */
@media (max-width:600px){
  .hero__inner{ padding-top:clamp(100px,20vh,150px); padding-bottom:clamp(96px,16vh,140px); }
  .hero__eyebrow{ margin-bottom:24px; }
  .hero__eyebrow::before{ width:24px; }
  .hero__eyebrow span{ font-size:.7rem; letter-spacing:.2em; }
  .hero__title{ font-size:clamp(1.72rem,7vw,2.2rem); line-height:1.46; margin-bottom:22px; }
  .hero__lead{ font-size:1rem; line-height:1.95; max-width:30em; }
  .hero__actions{ margin-top:32px; gap:16px; width:100%; }
  .hero__btn{ width:100%; justify-content:space-between; padding:18px 22px; }
  .hero__link{ font-size:.9rem; }
}
/* ===== VOICE：前半ネガティブ（暗）→後半ポジティブ（明パネル）のコントラスト ===== */
#voice{ background:var(--black-2); }
#voice .voice__intro .h2{ color:#fff; }
#voice .voice__intro .lead{ color:#C6C3BD; }
#voice .voice__intro .kicker em{ color:var(--on-dark-2); }
#voice .voice__intro .kicker span{ color:var(--red-bright); }
#voice .voice__intro .kicker::before{ background:var(--red-bright); }
/* お悩みカード：暗い面を基調に、カーソルを当てると赤へ変化（不安が立ち上がる） */
#voice .concern{ background:rgba(255,255,255,.035); border:1px solid rgba(243,241,236,.14); border-radius:10px; transition:background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease); }
#voice .concern:hover{ background:rgba(214,64,76,.16); border-color:rgba(214,64,76,.55); transform:translateY(-5px); }
#voice .concern__mark{ color:var(--red-bright); opacity:.5; transition:opacity .4s; }
#voice .concern__t{ color:#fff; transition:color .4s; }
#voice .concern__d{ color:#D4D1CB; }
#voice .concern:hover .concern__mark{ opacity:.95; }
#voice .concern:hover .concern__t{ color:var(--red-bright); }
/* 明転パネル（ポジティブ）：暗い面に浮かぶ明るいカード＝緑のアクセント */
#voice .voice__panel{ background:var(--paper); border-radius:8px; padding:clamp(26px,4vw,56px); margin-top:clamp(32px,4vw,52px); box-shadow:0 60px 120px -60px rgba(0,0,0,.7); }
#voice .voice__panel .kicker span{ color:var(--green-ink); }
#voice .voice__panel .kicker::before{ background:var(--green-ink); }
#voice .voice__qmark{ color:var(--green-ink); }
#voice .voice__quote em{ color:var(--green-ink); }
#voice .voice__case-label{ color:var(--green-ink); }
#voice .voice__case-link:hover{ color:var(--green-ink); border-color:var(--green-ink); }
@media (max-width:600px){ #voice .voice__panel{ padding:clamp(22px,6vw,30px) clamp(18px,5vw,24px); } }
/* VOICE：写真左・本文右の横組みで縦幅を圧縮（名前は写真の下） */
.voice__main{ display:grid; grid-template-columns:minmax(0,.92fr) 1.3fr; gap:clamp(28px,3.6vw,54px); align-items:start; }
.voice__aside .voice__shot{ margin-bottom:16px; aspect-ratio:4/3; }
.voice__aside .voice__attr{ display:block; margin-top:0; padding:2px 0 2px 16px; border-top:none; border-left:3px solid var(--green-ink); }
@media (max-width:820px){
  .voice__main{ grid-template-columns:1fr; gap:clamp(20px,5vw,28px); }
  .voice__aside .voice__shot{ aspect-ratio:16/9; }
}
@media (min-width:821px){
  .voice__main{ align-items:stretch; }
  .voice__aside{ display:flex; flex-direction:column; }
  .voice__aside .voice__shot{ flex:1 1 auto; min-height:300px; aspect-ratio:auto; }
}
/* PRINCIPLE：獲得→継続の3カード（gridで等高）＋ LTV/CPA/Unit Economics バランス図 */
.principle__intro{ max-width:760px; }
.principle__grid{ display:grid; gap:clamp(34px,4.5vw,52px); margin-top:clamp(36px,4vw,52px); }
.flowcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,20px); margin-top:clamp(26px,3vw,34px); }
.flowcard{ background:var(--green-soft); border:1px solid #D6E7DD; border-radius:14px; padding:clamp(22px,2.6vw,30px) clamp(16px,2vw,22px); display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; }
.flowcard__ic{ width:48px; height:48px; border-radius:50%; background:#fff; display:grid; place-items:center; color:var(--green-ink); box-shadow:0 8px 22px -12px rgba(44,122,84,.5); }
.flowcard__ic svg{ width:26px; height:26px; }
.flowcard__t{ font-family:var(--font-head); font-weight:700; font-size:clamp(.95rem,1.25vw,1.05rem); line-height:1.65; color:var(--ink); margin:0; }
@media (max-width:600px){
  .flowcards{ grid-template-columns:1fr; gap:10px; }
  .flowcard{ flex-direction:row; text-align:left; justify-content:flex-start; gap:16px; padding:16px 18px; }
  .flowcard__ic{ flex:0 0 auto; }
  .flowcard__t br{ display:none; }
}
.lcv{ position:relative; width:min(440px,86%); aspect-ratio:1; margin:0 auto; }
@media (min-width:1000px){
  .principle__grid{ grid-template-columns:1.04fr .96fr; align-items:center; gap:clamp(46px,5vw,74px); }
  .principle__col .h2{ font-size:clamp(1.6rem,2vw,1.9rem); line-height:1.35; }
  .principle__col .flowcards{ grid-template-columns:1fr; gap:10px; margin-top:clamp(20px,2.2vw,26px); }
  .principle__col .flowcard{ flex-direction:row; align-items:center; text-align:left; justify-content:flex-start; gap:13px; padding:10px 16px; background:#F3F3F4; border-color:#E6E6E8; }
  .principle__col .flowcard__ic{ flex:0 0 auto; width:38px; height:38px; box-shadow:none; border:1px solid #E6E6E8; }
  .principle__col .flowcard__ic svg{ width:20px; height:20px; }
  .principle__col .flowcard__t{ font-size:clamp(.9rem,1.05vw,.98rem); }
  .principle__col .flowcard__t br{ display:none; }
  .principle__viz .lcv{ width:min(380px,100%); margin:0 auto; }
  .principle__viz .lcv__cap{ margin-top:clamp(16px,1.8vw,24px); max-width:24em; }
}
.lcv__ring{ position:absolute; inset:16%; border-radius:50%; border:2px dashed #BFD8C9; }
.lcv__center{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:30%; aspect-ratio:1; border-radius:50%; background:#fff; border:1px solid var(--line); box-shadow:0 12px 30px -16px rgba(0,0,0,.25); display:grid; place-content:center; text-align:center; z-index:1; }
.lcv__center span{ font-family:var(--font-head); font-weight:700; font-size:clamp(.74rem,1.5vw,.98rem); line-height:1.4; color:var(--ink); }
.lcv__node{ position:absolute; width:35%; aspect-ratio:1; border-radius:50%; display:grid; place-content:center; text-align:center; color:#fff; padding:4px; z-index:2; box-shadow:0 18px 42px -22px rgba(0,0,0,.4); }
.lcv__node--ltv{ top:-1.5%; left:50%; transform:translateX(-50%); background:var(--green-ink); }
.lcv__node--cpa{ bottom:15.5%; left:3%; background:var(--black-2); }
.lcv__node--ue{ bottom:15.5%; right:3%; background:var(--black-2); }
.lcv__k{ display:block; font-family:var(--font-latin); font-weight:800; font-size:clamp(1.05rem,2.6vw,1.6rem); line-height:1.08; letter-spacing:.01em; }
.lcv__node--ue .lcv__k{ font-size:clamp(.72rem,1.7vw,1.02rem); }
.lcv__s{ display:block; font-size:clamp(.58rem,1.05vw,.72rem); opacity:.82; margin-top:4px; }
.lcv__cap{ text-align:center; color:var(--ink-2); font-size:clamp(.9rem,1.3vw,1.02rem); line-height:1.9; max-width:30em; margin:clamp(30px,4vw,42px) auto 0; word-break:keep-all; overflow-wrap:normal; }
/* ===== ISSUES：ネガティブ要素にふさわしい暗いトーン（課題＝緊張感） ===== */
#issues{ background:var(--black-2); }
#issues .sec__intro .h2{ color:#fff; }
#issues .sec__intro .lead{ color:#C6C3BD; }
#issues .sec__intro .kicker em{ color:var(--on-dark-2); }
#issues .sec__intro .kicker span{ color:var(--red-bright); }
#issues .sec__intro .kicker::before{ background:var(--red-bright); }
#issues .accent{ color:var(--red-bright); }
#issues .issue{ background:rgba(255,255,255,.035); border:1px solid rgba(243,241,236,.14); box-shadow:none; transition:background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease); }
#issues .issue:hover{ background:rgba(214,64,76,.13); border-color:rgba(214,64,76,.5); box-shadow:0 22px 48px -32px rgba(0,0,0,.6); transform:translateY(-4px); }
#issues .issue__no{ color:var(--red-bright); transition:color .4s; }
#issues .issue__t{ color:#fff; transition:color .4s; }
#issues .issue__d{ color:#D4D1CB; }
#issues .issue:hover .issue__t{ color:var(--red-bright); }
/* ===== BRIDGE：Issues(暗)→Principle(明)の橋渡し（単色ダークの結び＋フェードで緩急を和らげる） ===== */
.bridge{ background:var(--black-2); text-align:center; padding:clamp(64px,10vw,116px) var(--gutter) clamp(60px,9vw,104px); }
.bridge__line{ font-family:var(--font-head); font-weight:700; font-size:clamp(1.22rem,2.7vw,1.85rem); color:#fff; line-height:1.85; letter-spacing:.01em; margin:0 auto; max-width:26em; }
.bridge__line em{ font-style:normal; color:var(--fv-green); }
.bridge__fade{ height:clamp(70px,11vw,132px); background:linear-gradient(180deg, var(--black-2) 0%, #fff 100%); }

/* ===== VOICE：控えめCTA＋証言へのブリッジ文（暗所） ===== */
.voice__bridge{ margin:clamp(42px,5.5vw,66px) 0 0; max-width:40em; color:#D4D1CB; font-size:1rem; line-height:1.95; text-align:left; }
.voice__bridge em{ font-style:normal; color:var(--fv-green); font-weight:700; }
/* ===================================================================
   FINAL POLISH：質感・空気感・ディテールの最終仕上げ（文言変更なし）
   =================================================================== */

/* --- 基礎仕上げ --- */
*{ -webkit-tap-highlight-color:transparent; }
@media (pointer:fine){
  ::-webkit-scrollbar{ width:11px; }
  ::-webkit-scrollbar-track{ background:transparent; }
  ::-webkit-scrollbar-thumb{ background:#C9C5BF; border-radius:8px; border:3px solid #fff; }
  ::-webkit-scrollbar-thumb:hover{ background:var(--ink-3); }
}

/* --- 暗部セクションの空気感（光のドラマ：課題=赤の緊張 → 声=赤から緑へ） --- */
#issues{ background:
  radial-gradient(58% 46% at 86% -4%, rgba(214,64,76,.11), transparent 60%),
  var(--black-2); }
#voice{ background:
  radial-gradient(48% 38% at 10% 4%, rgba(214,64,76,.09), transparent 58%),
  radial-gradient(56% 40% at 84% 98%, rgba(111,168,130,.10), transparent 62%),
  var(--black-2); }
.bridge{ position:relative; background:
  radial-gradient(46% 70% at 50% 46%, rgba(111,168,130,.12), transparent 65%),
  var(--black-2); }
.footer{ position:relative; }

/* --- フィルムグレイン（暗部に均一な質感を重ねる） --- */
#issues::after, #voice::after, .bridge::after, .footer::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- 明パネル（顧客の声）の精密なエッジ --- */
#voice .voice__panel{ border:1px solid rgba(255,255,255,.08); box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 60px 120px -60px rgba(0,0,0,.75); }

/* --- Phase進行バーの先端グロー --- */
.phase__fill{ box-shadow:0 0 10px rgba(44,122,84,.4); }

/* --- 白地セクションの赤残り→緑へ統一（FAQ開閉・Contact箇条書き） --- */
.sec:not(.sec--alt) .faq__item summary:hover{ color:var(--green-ink); }
.sec:not(.sec--alt) .faq__item[open] summary{ color:var(--green-ink); }
.sec:not(.sec--alt) .faq__item[open] .faq__tog::before{ background:var(--green-ink); }
.sec:not(.sec--alt) .contact__points li::before{ background:var(--green-ink); }

/* --- 事例カードの写真：ホバーでわずかに寄る --- */
@media (hover:hover){
  .voice__case:hover .work__shot img{ transform:scale(1.04); }
}

/* --- リビールの追従ディレイを拡張（多要素グリッドの波） --- */
.reveal[data-d="4"]{ transition-delay:.32s; } .reveal[data-d="5"]{ transition-delay:.40s; }
/* --- 追従ハンバーガー（スクロールで出現／全幅で共通・メニューだけが生きる） --- */
.navfab{ position:fixed; top:clamp(14px,2.4vw,22px); right:clamp(14px,4vw,28px); width:48px; height:48px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.9); backdrop-filter:blur(12px) saturate(1.4); -webkit-backdrop-filter:blur(12px) saturate(1.4); display:grid; place-items:center; z-index:120; opacity:0; visibility:hidden; transform:translateY(-10px) scale(.94); transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s, background .25s, border-color .25s; box-shadow:0 14px 34px -16px rgba(22,24,28,.45); cursor:pointer; }
.navfab.show{ opacity:1; visibility:visible; transform:none; }
.navfab span{ position:absolute; left:14px; right:14px; height:2px; border-radius:2px; background:var(--ink); transition:transform .4s var(--ease), background .3s; }
.navfab span:nth-child(1){ top:18px; } .navfab span:nth-child(2){ top:28px; }
.navfab.is-open{ background:var(--ink); border-color:var(--ink); }
.navfab.is-open span{ background:#fff; }
.navfab.is-open span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.navfab.is-open span:nth-child(2){ transform:translateY(-5px) rotate(-45deg); }

/* --- モバイル：細い追従CTAバー（顔なし・下げられる） --- */
.mcta{ position:fixed; left:0; right:0; bottom:0; z-index:96; display:none; }
.mcta__bar{ display:flex; align-items:center; gap:10px; background:var(--black-2); border-top:1px solid rgba(243,241,236,.12); padding:9px clamp(13px,4vw,18px) calc(9px + env(safe-area-inset-bottom)); box-shadow:0 -14px 34px -22px rgba(0,0,0,.6); transform:translateY(112%); transition:transform .42s var(--ease); }
.mcta.show .mcta__bar{ transform:none; }
.mcta.show.is-min .mcta__bar{ transform:translateY(112%); }
.mcta__txt{ flex:1; min-width:0; font-size:.82rem; line-height:1.35; letter-spacing:.01em; color:var(--on-dark); }
.mcta__txt b{ font-weight:700; color:#fff; }
.mcta__btn{ flex:none; display:inline-flex; align-items:center; gap:5px; background:var(--red); color:#fff; font-family:var(--font-jp); font-weight:700; font-size:.84rem; padding:9px 15px; border-radius:100px; white-space:nowrap; transition:background .25s; }
.mcta__btn:active{ background:var(--red-dark); }
.mcta__btn span{ transition:transform .3s var(--ease); }
.mcta__min{ flex:none; width:30px; height:30px; border:none; background:transparent; color:var(--on-dark-2); display:grid; place-items:center; cursor:pointer; border-radius:8px; transition:color .2s, background .2s; }
.mcta__min:active{ color:#fff; background:rgba(255,255,255,.08); }
.mcta__handle{ position:absolute; right:clamp(13px,4vw,18px); bottom:calc(13px + env(safe-area-inset-bottom)); display:none; align-items:center; gap:6px; background:var(--black-2); color:var(--on-dark); border:1px solid rgba(243,241,236,.16); border-radius:100px; padding:8px 15px; font-family:var(--font-jp); font-weight:700; font-size:.8rem; box-shadow:0 14px 32px -16px rgba(0,0,0,.55); cursor:pointer; }
.mcta__handle svg{ stroke:var(--red-bright); }
.mcta.show.is-min .mcta__handle{ display:inline-flex; }
@media (max-width:860px){ .mcta{ display:block; } }

/* --- PC：右下フローティングカード（代表がご対応） --- */
.repcta{ position:fixed; right:clamp(18px,2vw,30px); bottom:clamp(18px,2vw,30px); z-index:96; width:290px; display:none; gap:12px; align-items:center; background:var(--black-2); border:1px solid rgba(243,241,236,.12); border-radius:16px; padding:14px 16px 14px 14px; box-shadow:0 26px 64px -24px rgba(0,0,0,.62); opacity:0; visibility:hidden; transform:translateY(18px) scale(.98); transition:opacity .45s var(--ease), transform .45s var(--ease), visibility .45s; }
.repcta.show{ opacity:1; visibility:visible; transform:none; }
.repcta.is-dismissed{ opacity:0!important; visibility:hidden!important; transform:translateY(18px)!important; pointer-events:none; }
.repcta__face{ position:relative; width:56px; height:56px; border-radius:50%; overflow:hidden; flex:none; background:#22252b; }
.repcta__face img{ width:100%; height:100%; object-fit:cover; display:block; }
.repcta__ph{ display:none; position:absolute; inset:0; place-items:center; color:#6c7177; }
.repcta__face.is-ph img{ display:none; }
.repcta__face.is-ph .repcta__ph{ display:grid; }
.repcta__body{ flex:1; min-width:0; }
.repcta__eyebrow{ display:inline-flex; align-items:center; gap:6px; font-size:.7rem; font-weight:700; letter-spacing:.02em; color:var(--on-dark-2); margin:0 0 4px; }
.repcta__dot{ width:7px; height:7px; border-radius:50%; background:var(--fv-green); box-shadow:0 0 0 0 rgba(132,192,152,.55); animation:repPulse 2.4s var(--ease) infinite; }
@keyframes repPulse{ 0%{ box-shadow:0 0 0 0 rgba(132,192,152,.5); } 70%{ box-shadow:0 0 0 7px rgba(132,192,152,0); } 100%{ box-shadow:0 0 0 0 rgba(132,192,152,0); } }
.repcta__copy{ margin:0 0 9px; font-size:.86rem; line-height:1.4; color:var(--on-dark); }
.repcta__btn{ display:inline-flex; align-items:center; gap:6px; background:var(--red); color:#fff; font-family:var(--font-jp); font-weight:700; font-size:.8rem; padding:8px 15px; border-radius:100px; transition:background .25s, transform .25s; }
.repcta__btn:hover{ background:var(--red-dark); transform:translateY(-1px); }
.repcta__btn span{ transition:transform .3s var(--ease); }
.repcta__btn:hover span{ transform:translateX(3px); }
.repcta__close{ position:absolute; top:7px; right:9px; width:24px; height:24px; border:none; background:transparent; color:var(--on-dark-2); display:grid; place-items:center; border-radius:50%; cursor:pointer; transition:color .2s, background .2s; }
.repcta__close:hover{ color:#fff; background:rgba(255,255,255,.08); }
@media (min-width:861px){ .repcta{ display:flex; } }
@media (prefers-reduced-motion: reduce){
  .navfab,.repcta{ transition:opacity .3s, visibility .3s; transform:none; }
  .navfab.show,.repcta.show{ transform:none; }
  .mcta__bar{ transition:transform .01s; }
  .repcta__dot{ animation:none; }
}


/* ============================================================
   Contact Form 7 ― .dform レイアウトをそのまま使うための調整
   ( ショートコードに html_class="dform" を付与している前提 )
   ============================================================ */
.dform .wpcf7-form-control-wrap{ display:block; width:100%; }
.dform input.wpcf7-form-control,
.dform textarea.wpcf7-form-control{ pointer-events:auto; }
.dform .wpcf7-not-valid-tip{ color:var(--red); font-size:.74rem; margin-top:5px; }
.dform .wpcf7-response-output{ margin:16px 0 0; padding:12px 14px; border-radius:4px; font-size:.84rem; border:1px solid var(--line); }
.dform .wpcf7-spinner{ margin:0 0 0 10px; }