/* =========================================================
   Visual Direction v1  — 上書き専用レイヤー
   Apple の余白 × 無印の静けさ × Stripe の精密さを少量
   base(anchor_lp.css) は一切変更していない。ここだけで上書きする。
   ========================================================= */

/* --- 1. 背景トーン：うすい青 → ニュートラル ------------------- */
:root{ --bgsoft:#f7f8f9; --v1-hair:#e6eaef; --v1-ink:#1b1f24; --v1-sub:#5a626d; }

/* --- 2. 余白：情報は減らさず、間に空気を入れる ---------------- */
.sec{padding:120px 0}
.worry{padding:120px 0 132px}
.voice{padding:120px 0 124px}
.midcta{padding:78px 0}
.hero{padding:96px 0 56px}
.stitle{margin-bottom:68px}
.aboutbox{padding:60px 56px}
.disclose{padding:52px 0 56px}
.certband{padding:26px 0}
@media(max-width:1080px){
  .sec{padding:88px 0}.worry{padding:88px 0 96px}.voice{padding:88px 0 92px}
  .hero{padding:64px 0 40px}.stitle{margin-bottom:48px}.aboutbox{padding:36px 26px}
}
@media(max-width:760px){ .hero{padding:56px 0 28px} .tagband{padding:2px 0} }

/* --- 3. 影：8種 → 2種（境界用 / 強調用） ---------------------- */
.svc,.mcard,.vcard,.specbox,.aboutbox,.worry .w,.formwrap,.cta .formwrap{
  box-shadow:0 1px 2px rgba(16,32,64,.05) !important;
}
.svc,.mcard,.vcard,.specbox,.worry .w{ border:1px solid var(--v1-hair) }
.svc:hover,.mcard:hover,.vcard:hover{
  transform:none !important;
  box-shadow:0 2px 12px rgba(16,32,64,.09) !important;
}
.offer{ box-shadow:none !important }
.cta .mail:hover{ transform:none !important; box-shadow:0 2px 12px rgba(16,32,64,.12) !important }
.btn-fill:hover,.btn-line:hover,.midcta .bigbtn:hover{ transform:none !important }

/* --- 4. 角丸：11種 → small 6 / medium 12 / pill 999 ---------- */
.svc,.specbox,.aboutbox,.offer,.vcard,.formwrap{ border-radius:12px !important }
.mcard,.worry .w,.cta .mail,.midcta .bigbtn,.btn,.ceo img,.frow input,.frow textarea,.frow select{
  border-radius:6px !important;
}

/* --- 5. サービスカード：4色グラデ → 白地＋単色アクセント ------- */
.svc .top{
  background:#fff !important; color:var(--v1-ink) !important;
  border-top:2px solid var(--blue); border-bottom:1px solid var(--v1-hair);
  padding:30px 26px 26px !important;
}
.svc .top b{ color:var(--v1-ink) }
.svc .top svg{ stroke:var(--blue) !important }
.mcard{ border-top-width:2px !important }

/* --- 6. CTA：全幅の青ベタ → 白地（導線・文言・ボタンは不変） --- */
.cta{ background:#fff !important; color:var(--v1-ink) !important; padding:112px 0 }
.cta h2{ color:var(--v1-ink) }
.cta p{ color:var(--v1-sub) !important }
.cta .tel,.cta small,.cta .note{ color:var(--v1-sub) !important }
.cta a{ color:var(--blue) }
.cta .mail{ background:var(--blue) !important; color:#fff !important }
.cta .formwrap{ border:1px solid var(--v1-hair) }

/* --- 7. タグ帯：自動横スクロールを止め、静かに置く ------------- */
.tagband{ -webkit-mask-image:none !important; mask-image:none !important; padding:6px 0 }
.tagrow{ animation:none !important; width:auto !important; flex-wrap:wrap; justify-content:center; gap:10px }
.tagrow .tag:nth-child(n+11){ display:none }
.tag{ background:transparent; border:1px solid var(--v1-hair); font-weight:500; color:var(--v1-sub) }

/* --- 8. 常時動くものを止める（reduced-motion 対応は base を維持） */
.hvz-ring,.hvz-dot,.hvz-ic,.hvz-sc,.d1,.d2,.d3{ animation:none !important }

/* --- 9. hero 右：静かな円構図（唯一の動き＝60秒の破線） -------- */
/* ===== ONE FLOW：heroを1枚の空間として扱う背景レイヤー ===== */
.hero{ position:relative; overflow:hidden }
.hero > .wrap{ position:relative; z-index:1 }
.flowbg{ position:absolute; inset:0; z-index:0; pointer-events:none }
.flowbg svg{ width:100%; height:100%; display:block; transform:scale(1.06) translateY(-54px); transform-origin:50% 50% }
/* 唯一の動き：流れの中の光が90秒かけて先へ移動する */
@keyframes flowlight{ from{ stroke-dashoffset:0 } to{ stroke-dashoffset:-100 } }
.flowbg .flow-light{ animation:flowlight 90s linear infinite }
@media (prefers-reduced-motion:reduce){ .flowbg .flow-light{ animation:none; opacity:0 } }
/* タブレット：合流〜本流が本文の背後〜右に来るように寄せる */
@media(max-width:1080px){
  .flowbg svg{ transform:scale(1.14) translate(-150px,-70px); transform-origin:50% 50% }
  .flowbg{ opacity:.92 }
}
/* モバイル：造形の大半を画面外へ送り、本文背後〜右下だけを残す */
@media(max-width:760px){
  /* 流れ全体を縮小し、Mission〜説明文の背後へ置く（下半分はcropせず、そもそも下に置かない） */
  .flowbg{ opacity:.9; display:block }
  .flowbg svg{ width:196%; height:auto; margin-left:-58%; margin-top:44px; transform:none }
}

/* 追補（v3再構成時に落ちた指定の復帰） */
.circleart .stage svg,.circleart.heroseq .stage svg{ width:100% !important; height:100% !important }
.circleart::before{ display:none !important }
.heroseq .glow,.heroseq .beat,.heroseq .blink,.hvz-core,.hvz-stage{ display:none !important }
.tagrow .tag:nth-child(n+9){ display:none }
/* 狭い画面ではSVGが縮むぶん、ラベルだけ実寸を保つ */

/* ============================================================
   STEP 7-S ｜段階1（preview実装）
   ① 導入の流れの青ベタ廃止 ② 影の全廃＋hover漏れ ③ 色の出どころ整理
   Hero(.hero / .flowbg / .tagband / .tag) と Footer には触れない
   ============================================================ */

/* ── ① 導入の流れ：全幅の青ベタを廃し、青は「点」だけに残す ── */
.sec.band{ background:var(--bgsoft) !important; color:var(--v1-ink) !important }
.sec.band::before{ display:none !important }                 /* 白のストライプ＋光の重ね地を消す */
.sec.band .stitle h2{ color:var(--v1-ink) }
.sec.band .stitle .en{ color:var(--blue) }
.sec.band .step .n{ border-color:var(--blue); color:var(--blue); background:transparent }
.sec.band .step b{ color:var(--v1-ink) }
.sec.band .step p{ color:var(--v1-sub) }
.sec.band .step+.step::before{ border-left-color:var(--v1-hair) }

/* ── ② 影の全廃（v1で border は付与済みなので輪郭は保たれる）── */
.svc,.mcard,.vcard,.specbox,.aboutbox,.formwrap,.cta .formwrap,.worry .w{
  box-shadow:none !important;
}
.svc:hover,.mcard:hover,.vcard:hover{ box-shadow:none !important }
/* v1で塞ぎ漏れていた hover 2件 */
.fsubmit button:hover{ transform:none !important; box-shadow:none !important }
.offer:hover{ box-shadow:none !important }

/* ── ③ 色の出どころを1つに：媒体色は上罫1本だけに残す ── */
.midcta{ background:#fff !important }                        /* 7-S2: 薄灰 → 白。面の切替でセクション境界を作る */
.mcard .chip{
  background:transparent !important; color:var(--v1-sub) !important;
  border:1px solid var(--v1-hair);
}
.mcard .mhead svg path:first-child{ fill:#8FA3BC }           /* 媒体色のハート → 無彩色 */
.mcard .bd .go{ color:var(--blue) !important }               /* 記事を読む → Anchor Blue に統一 */

/* ============================================================
   STEP 7-T1 ｜お困りごと：白いカード → 罫線で整理された一覧
   6項目・コピー・順序・HTMLは一切変更しない（CSSのみ）
   ============================================================ */
.worry .list{
  gap:0 56px !important;                        /* 行の隙間を罫線に置き換え、列間は広げる */
  border-bottom:1px solid var(--v1-hair);       /* 一覧の下端を1本で閉じる（1列/2列とも有効）*/
}
.worry .w{
  background:transparent !important;            /* 白い面をやめる */
  border:0 !important;
  border-top:1px solid var(--v1-hair) !important;
  border-radius:0 !important;                   /* 角丸を0へ */
  padding:27px 2px 27px 0 !important;   /* 一覧に十分な重みを与える */
  grid-template-columns:22px 1fr !important;
  gap:0 12px !important;
  align-items:start !important;
}
.worry .w .ck{
  width:22px !important; height:22px !important;
  background:transparent !important;            /* 橙の円を廃止＝橙の面積を0へ */
  border-radius:0 !important;
  margin-top:3px;
}
.worry .w p{ font-weight:600 }                  /* 一覧として読ませる（太さのみ・文言不変）*/
.worry .list{ max-width:1000px !important }     /* 行が1行に収まる幅を確保 */
@media(max-width:760px){
  .worry .w{ padding:20px 2px 20px 0 !important }   /* mobileは詰めて高さを圧縮 */
}