/* =====================================================================
   v6（2026-10-05）：ファーストビュー再設計＋動き
   色の役割：黒＝メイン文字／緑＝口コミ・成果・成長／青＝仕組み・IT・業務改善／黄＝重要ポイント（マーカー）
   メインコピーは太いゴシック（Zen Kaku Gothic New 900）。重要語だけ大きさ・色・手描き線で強調する
   ===================================================================== */
:root { --fv-g: #15a05a; --fv-b: #1662d8; --fv-y: #ffd93b; --fv-lime: #9bd23c; }

/* 見出しは全体を太いゴシックへ戻す（明朝はやめる） */
.ttl h2, #kuchikomi .ttl h2, #lark .ttl h2, .cta4 h2, .cta h2, .feat-lead, .person-name { font-family: var(--font-d); font-weight: 900; letter-spacing: .02em; }
.ttl h2 { font-size: clamp(27px, 7vw, 44px); }

/* ============ ファーストビュー ============ */
.fv { position: relative; overflow: hidden; padding: 26px 0 56px; }
.fv .hv-grid { position: relative; z-index: 1; }
.fv-deco span { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; }
.fv-deco .d1 { width: 220px; height: 220px; right: -70px; top: 70px; border: 2px dashed #cfe3f9; animation: spin 60s linear infinite; }
.fv-deco .d2 { width: 14px; height: 14px; left: 8%; top: 46%; background: var(--fv-y); animation: floaty 6s ease-in-out infinite; }
.fv-deco .d3 { width: 10px; height: 10px; right: 12%; bottom: 18%; background: var(--fv-lime); animation: floaty 7s ease-in-out infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes floaty { 50% { transform: translateY(-12px); } }

/* ① 何の会社か */
.fv-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-family: var(--font-d); font-weight: 900; font-size: 14px; letter-spacing: .04em; }
.fv-who-g, .fv-who-b { padding: 5px 11px; border-radius: 4px; color: #fff; }
.fv-who-g { background: var(--fv-g); }
.fv-who-b { background: var(--fv-b); }
.fv-x { color: var(--ink3); font-weight: 700; }
.fv-who-t { flex-basis: 100%; font-size: 12.5px; font-weight: 700; color: var(--ink3); letter-spacing: .1em; }

/* ② 何が変わるのか：メインコピー */
.hv .fv-catch { margin-top: 18px; font-family: var(--font-d); font-weight: 900; color: var(--ink); font-size: clamp(27px, 8vw, 50px); line-height: 1.22; letter-spacing: .01em; }
.fv-catch .row { display: block; }
.fv-catch .r3 { margin-top: .32em; }
.fv-catch .w { position: relative; display: inline-block; font-size: 1.62em; line-height: 1.05; letter-spacing: -.01em; }
.fv-catch .w-kuchi { color: var(--fv-g); padding: 0 .1em; }
.fv-catch .w-shisan { color: var(--ink); z-index: 0; }
.fv-catch .w-shikumi { color: var(--fv-b); }
.fv-catch .t { font-size: 1em; }
/* 手描きの線（SVG）：文字が主役、線は補助 */
.hand { position: absolute; pointer-events: none; overflow: visible; }
.hand path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.hand.circle { left: -12%; top: -14%; width: 124%; height: 128%; }
.hand.circle path { stroke: var(--fv-lime); stroke-width: 3.2; vector-effect: non-scaling-stroke; }
.hand.marker { left: -3%; bottom: -.02em; width: 106%; height: .5em; z-index: -1; }
.hand.marker path { stroke: var(--fv-y); stroke-width: 26; vector-effect: non-scaling-stroke; opacity: .95; }
.hand.line { left: -2%; bottom: -.32em; width: 104%; height: .42em; }
.hand.line path { stroke: var(--fv-b); stroke-width: 3.4; vector-effect: non-scaling-stroke; }
.hand.line path + path { stroke: var(--fv-lime); stroke-width: 2.6; }
.hand.spark { right: -.5em; top: -.42em; width: .5em; height: .5em; }
.hand.spark path { stroke: var(--fv-y); stroke-width: 3; vector-effect: non-scaling-stroke; }

/* ③ 何をやっているか */
.fv-svc { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fv-svc li { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 9px; align-items: center; padding: 10px 10px; background: #fff; border: 1px solid var(--hair); border-radius: 8px; }
.fv-svc img { grid-row: span 2; width: 34px; height: 34px; border-radius: 8px; }
.fv-svc b { font-family: var(--font-d); font-weight: 900; font-size: 15px; color: var(--ink); line-height: 1.25; }
.fv-svc span { font-size: 11.5px; color: var(--ink3); font-weight: 700; line-height: 1.35; }
.fv-svc li:first-child { border-left: 4px solid var(--fv-g); }
.fv-svc li:last-child { border-left: 4px solid var(--fv-b); }

/* ④ 数字：数字 → 内容 → 補足 */
.fv-stats { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.st { position: relative; padding: 12px 10px 12px; border-radius: 8px; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 3px; }
.st b { font-family: var(--font-n); font-weight: 800; font-size: 46px; line-height: .95; letter-spacing: -.03em; }
.st i { font-style: normal; font-family: var(--font-d); font-weight: 900; font-size: 15px; }
.st span { grid-column: 1 / -1; margin-top: 6px; font-size: 10.5px; line-height: 1.45; color: var(--ink2); font-weight: 700; }
.st-g { background: #e8f6ee; } .st-g b, .st-g i { color: var(--fv-g); }
.st-b { background: #fff; border: 1.5px solid var(--fv-b); } .st-b b, .st-b i { color: var(--fv-b); }
.st-y { background: var(--fv-y); } .st-y b, .st-y i { color: var(--ink); }

/* ⑤ 相談ボタン */
.fv-cta { margin-top: 22px; display: grid; gap: 10px; }
.fv-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; border-radius: 10px; font-family: var(--font-d); font-weight: 900; font-size: 17px; letter-spacing: .04em; text-decoration: none; position: relative; transition: transform .2s, box-shadow .2s, background-color .2s; }
.fv-btn svg { width: 20px; height: 20px; transition: transform .2s; }
.fv-btn:hover svg { transform: translateX(4px); }
.fv-btn-main { background: var(--fv-b); color: #fff; box-shadow: 0 10px 24px -10px rgba(22,98,216,.7); }
.fv-btn-main:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(22,98,216,.75); }
.fv-btn-tag { background: var(--fv-y); color: var(--ink); font-size: 12.5px; padding: 3px 8px; border-radius: 4px; letter-spacing: .06em; }
.fv-btn-sub { background: #fff; color: var(--ink); border: 1.5px solid var(--ink); min-height: 52px; font-size: 15px; }
.fv-btn-sub:hover { background: var(--ink); color: #fff; }

@media (min-width: 1040px) {
  .fv { padding: 54px 0 84px; }
  .fv .hv-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 56px; align-items: center; }
  .hv .fv-catch { font-size: min(52px, 3.7vw); margin-top: 22px; }
  .fv-who { font-size: 15px; }
  .fv-who-t { flex-basis: auto; margin-left: 6px; }
  .fv-svc { max-width: 560px; margin-top: 30px; }
  .fv-stats { max-width: 560px; gap: 10px; }
  .st { padding: 16px 16px 14px; }
  .st b { font-size: 56px; }
  .st span { font-size: 11.5px; }
  .fv-cta { grid-template-columns: auto auto; justify-content: start; gap: 12px; }
  .fv-btn { padding: 0 30px; min-height: 64px; }
  .fv-btn-sub { min-height: 64px; }
  .fv-deco .d1 { width: 420px; height: 420px; right: -140px; top: -60px; }
}

/* ============ ファーストビューの登場アニメーション（順番：コピー→重要語→線→数字→CTA） ============ */
html.js .fv-who, html.js .fv-catch .row, html.js .fv-svc li, html.js .st, html.js .fv-btn, html.js .fv .sl { opacity: 0; }
html.js .fv.go .fv-who { animation: up .6s cubic-bezier(.2,.7,.2,1) .05s forwards; }
html.js .fv.go .r1 { animation: rise .7s cubic-bezier(.2,.7,.2,1) .2s forwards; }
html.js .fv.go .r2 { animation: rise .7s cubic-bezier(.2,.7,.2,1) .34s forwards; }
html.js .fv.go .r3 { animation: rise .7s cubic-bezier(.2,.7,.2,1) .5s forwards; }
html.js .fv.go .r4 { animation: rise .7s cubic-bezier(.2,.7,.2,1) .64s forwards; }
html.js .fv.go .w { animation: pop .55s cubic-bezier(.3,1.5,.5,1) both; }
html.js .fv.go .r1 .w { animation-delay: .32s; } html.js .fv.go .r2 .w { animation-delay: .46s; } html.js .fv.go .r4 .w { animation-delay: .76s; }
html.js .fv.go .hand.circle path { animation: draw .9s cubic-bezier(.5,.1,.3,1) 1.0s forwards; }
html.js .fv.go .hand.marker path { animation: draw .55s cubic-bezier(.6,.1,.3,1) 1.25s forwards; }
html.js .fv.go .hand.line path { animation: draw .6s cubic-bezier(.5,.1,.3,1) 1.45s forwards; }
html.js .fv.go .hand.line path + path { animation-delay: 1.6s; }
html.js .fv.go .hand.spark path { animation: draw .25s ease-out 1.85s forwards; }
html.js .fv.go .hand.spark path:nth-child(2) { animation-delay: 1.92s; } html.js .fv.go .hand.spark path:nth-child(3) { animation-delay: 1.99s; }
html.js .fv.go .fv-svc li { animation: up .6s cubic-bezier(.2,.7,.2,1) forwards; }
html.js .fv.go .fv-svc li:nth-child(1) { animation-delay: 1.5s; } html.js .fv.go .fv-svc li:nth-child(2) { animation-delay: 1.6s; }
html.js .fv.go .st { animation: up .6s cubic-bezier(.2,.7,.2,1) forwards; }
html.js .fv.go .st:nth-child(1) { animation-delay: 1.75s; } html.js .fv.go .st:nth-child(2) { animation-delay: 1.85s; } html.js .fv.go .st:nth-child(3) { animation-delay: 1.95s; }
html.js .fv.go .fv-btn { animation: lift .7s cubic-bezier(.2,.9,.3,1.2) forwards; }
html.js .fv.go .fv-btn-main { animation-delay: 2.15s; } html.js .fv.go .fv-btn-sub { animation-delay: 2.25s; }
html.js .fv.go .sl { animation: slidein .9s cubic-bezier(.2,.7,.2,1) .9s forwards; }
@keyframes rise { from { opacity: 0; transform: translateY(.45em); clip-path: inset(-80% -60% 100% -60%); } to { opacity: 1; transform: none; clip-path: inset(-80% -60% -80% -60%); } }
@keyframes up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { transform: scale(.86); } to { transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes lift { 0% { opacity: 0; transform: translateY(16px); } 70% { opacity: 1; transform: translateY(-3px); } 100% { opacity: 1; transform: none; } }
@keyframes slidein { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
/* CTAは表示後に一度だけ光の輪で視線を集める */
.fv-btn-main::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(22,98,216,.45); }
html.js .fv.go .fv-btn-main::after { animation: ring 1.4s ease-out 3s 2; }
@keyframes ring { to { box-shadow: 0 0 0 14px rgba(22,98,216,0); } }

/* ============ スクロール時の動き ============ */
html.js .ttl { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
html.js .ttl.is-in { opacity: 1; transform: none; }
html.js .rv-l { opacity: 0; transform: translateX(-36px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
html.js .rv-r { opacity: 0; transform: translateX(36px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
html.js .rv-l.is-in, html.js .rv-r.is-in { opacity: 1; transform: none; }
/* 並んだカードは順番に */
html.js .stagger > .rv:nth-child(2) { transition-delay: .08s; }
html.js .stagger > .rv:nth-child(3) { transition-delay: .16s; }
html.js .stagger > .rv:nth-child(4) { transition-delay: .24s; }
html.js .stagger > .rv:nth-child(5) { transition-delay: .32s; }
html.js .stagger > .rv:nth-child(6) { transition-delay: .4s; }
/* セクション見出しの下線を描く */
.ttl h2 { position: relative; display: inline-block; }
.ttl h2::after { content: ""; display: block; height: 4px; width: 56px; margin: 14px auto 0; background: linear-gradient(90deg, var(--fv-b) 50%, var(--fv-g) 50%); border-radius: 2px; transform: scaleX(0); transition: transform .8s cubic-bezier(.2,.7,.2,1) .35s; }
.ttl-l h2::after { margin-left: 0; }
.ttl.is-in h2::after { transform: none; }
/* 締めのCTA帯：視線を集める軽い動き */
.cta4 .b3-blue { position: relative; }
.cta4.is-in .b3-blue { animation: nudge 1.6s ease-in-out .6s 2; }
@keyframes nudge { 0%, 100% { transform: none; } 50% { transform: translateY(-4px); } }

/* スマホは控えめに：描画は残し、浮遊や回転は止める */
@media (max-width: 699px) {
  .fv-deco .d1 { animation: none; }
  html.js .rv-l, html.js .rv-r { transform: translateY(16px); }
  html.js .fv.go .sl { animation-delay: .2s; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .fv-who, html.js .fv-catch .row, html.js .fv-svc li, html.js .st, html.js .fv-btn, html.js .fv .sl, html.js .ttl, html.js .rv-l, html.js .rv-r { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hand path { stroke-dashoffset: 0 !important; animation: none !important; }
  .fv-deco span { animation: none !important; }
}
.fv-catch .w { letter-spacing: -.04em; } .fv-catch .w-kuchi { padding: 0 .14em 0 .06em; }
main { overflow-x: hidden; overflow-x: clip; }

/* ===== v6.1 ===== */
/* 集客資産のマーカーは単語の幅ぴったり（「に。」に掛からない）、丸囲みは「を」に掛からない */
.hand.marker { left: 0; width: 100%; height: .46em; bottom: .02em; }
.hand.marker path { stroke-width: 22; }
.fv-catch .w-shisan { margin-right: .06em; }
.hand.circle { left: -7%; width: 112%; top: -12%; height: 124%; }
.fv-catch .w-kuchi { margin-right: .12em; }

/* 右側の余白に、実際に起きることを小さなカードで見せる（口コミが届く→Larkにタスク登録） */
.fv-catch .row { position: relative; }
.pop { position: absolute; right: 0; top: 50%; display: flex; align-items: center; gap: 7px; width: 132px; padding: 8px 9px; background: #fff; border-radius: 10px; box-shadow: 0 10px 24px -10px rgba(22,25,31,.35), 0 0 0 1px rgba(22,25,31,.06); font-family: var(--font-d); font-weight: 700; font-size: 10.5px; line-height: 1.35; color: var(--ink2); letter-spacing: 0; transform: translateY(-50%); opacity: 0; }
.pop > span { display: block; }
.pop b { display: block; font-size: 11px; color: var(--ink); letter-spacing: .02em; }
.pop-a b { color: #f2a10a; letter-spacing: .06em; }
.pop .pg { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: var(--font-n); font-weight: 800; font-size: 14px; color: #fff; background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); }
.pop img { flex: none; width: 26px; height: 26px; }
.pop-b b { color: var(--fv-b); }
.pop::after { content: ""; position: absolute; right: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--fv-g); box-shadow: 0 0 0 0 rgba(21,160,90,.5); }
.pop-b::after { background: var(--fv-b); }
html:not(.js) .pop { opacity: 1; }
html.js .fv.go .pop-a { animation: popin .6s cubic-bezier(.3,1.4,.5,1) 2.5s forwards, bob 4s ease-in-out 3.2s infinite; }
html.js .fv.go .pop-b { animation: popin .6s cubic-bezier(.3,1.4,.5,1) 3.1s forwards, bob 4s ease-in-out 3.8s infinite; }
html.js .fv.go .pop::after { animation: ping 2s ease-out 3.4s infinite; }
@keyframes popin { from { opacity: 0; transform: translate(14px, -50%) scale(.85); } to { opacity: 1; transform: translate(0, -50%); } }
@keyframes bob { 0%, 100% { opacity: 1; transform: translate(0, -50%); } 50% { opacity: 1; transform: translate(0, calc(-50% - 5px)); } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(21,160,90,.5); } 100% { box-shadow: 0 0 0 10px rgba(21,160,90,0); } }
@media (min-width: 1040px) { .pop { width: 168px; font-size: 12px; padding: 10px 12px; } .pop b { font-size: 12.5px; } .pop .pg, .pop img { width: 30px; height: 30px; } }
@media (max-width: 359px) { .pop { display: none; } }
@media (prefers-reduced-motion: reduce) { .pop { opacity: 1 !important; animation: none !important; } }

/* 代表メッセージ：写真を大きく、会社サイトらしく */
.person { grid-template-columns: 1fr; padding: 0; overflow: hidden; gap: 0; }
.person-ph { width: 100%; height: 0; padding-bottom: 92%; border-radius: 0; border: 0; position: relative; margin: 0; background: #f2f2f0; }
.person-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.person > div:last-child { padding: 26px 22px 28px; }
.person-head { margin-top: 12px; font-family: var(--font-d); font-weight: 900; font-size: clamp(21px, 5.6vw, 30px); line-height: 1.5; color: var(--ink); }
.person-name { margin-top: 18px; font-size: 22px; }
.person-name small { display: block; font-family: var(--font-n); font-weight: 500; font-size: 12px; letter-spacing: .2em; color: var(--ink3); margin-top: 2px; }
.person-msg { font-size: 15px; }
@media (min-width: 900px) { .person { grid-template-columns: 400px 1fr; align-items: stretch; } .person-ph { padding-bottom: 0; height: 100%; min-height: 460px; } .person > div:last-child { padding: 48px 52px; align-self: center; } }
.hand.spark { display: none; }
.inds-ttl { margin-top: 56px; text-align: center; font-size: 20px; font-weight: 900; } .inds-ttl + .inds { margin-top: 18px; }

/* 2026-10-05 清水さん指示：口コミは緑→オレンジ（ロゴの朱色）。FV内の「口コミ」関連をオレンジに揃える */
:root { --fv-o: #f25a0c; --fv-o-l: #ffa26b; --fv-o-bg: #fff1e8; }
.fv-catch .w-kuchi { color: var(--fv-o); }
.hand.circle path { stroke: var(--fv-o-l); }
.fv-who-g { background: var(--fv-o); }
.fv-svc li:first-child { border-left-color: var(--fv-o); }
.st-g { background: var(--fv-o-bg); }
.st-g b, .st-g i { color: var(--fv-o); }
.pop-a::after { background: var(--fv-o); }
/* 2026-10-05 清水さん指示：「口コミ」を囲む手描きの丸だけ赤に（文字はオレンジのまま） */
.hand.circle path { stroke: #e0262b; }