/* H案 まちと、ひとと、前へ。：白×オレンジ×空色×チャコール／行ごとに色を変えるコピー・線画の人々／角丸8px／影なし */
/* 色と書体は forwards.jp に合わせる：文字 #353535／地 #F9F9F9・#F2F2F2／オレンジ #EAA13C・#F2A154／グレー #787878／差し色 #7FC8A9／Figtree＋Noto Sans JP */
:root{--bg:#F9F9F9;--or:#EAA13C;--or2:#F2A154;--sky:#7FC8A9;--ink:#353535;--pale:#F2F2F2;--txt:#555555;--gray:#787878;--line:#E2E2E2;--r:4px;--hd:84px}
body{background:var(--bg);color:var(--ink);font:400 17px/1.95 "Noto Sans JP",sans-serif;letter-spacing:.05em}

/* ───── ヘッダー ───── */
.hd{position:sticky;top:0;z-index:50;background:rgba(249,249,249,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hd-in{max-width:var(--cw);margin:0 auto;padding:0 var(--gut);height:var(--hd);display:flex;align-items:center;gap:24px}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:52px;width:auto}
.logo-t{font-size:12px;font-weight:700;line-height:1.4;color:var(--gray);white-space:nowrap}
.pcnav{margin-left:auto}
.gnav{display:flex}
.gnav>li>a{display:block;padding:10px 14px;font-weight:700;font-size:15px;white-space:nowrap;position:relative}
.gnav>li>a::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.gnav>li.open>a::after{transform:none}
.hd-cta{display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:var(--r);background:var(--ink);color:#fff;font-weight:700;font-size:14px;position:relative;overflow:hidden;isolation:isolate;white-space:nowrap}
.hd-cta::before{content:"";position:absolute;inset:0;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);z-index:-1}
.menu-btn{display:none}
.qnav{display:none}

/* メガメニュー：縦タブ切替型 */
.mega{position:fixed;left:0;right:0;top:var(--hd);background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-top:1px solid var(--line);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s .35s}
.gnav>li.open .mega{opacity:1;visibility:visible;transition:opacity .35s var(--ease)}
.mega-in{max-width:var(--cw);margin:0 auto;padding:36px var(--gut) 40px;display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px}
.vt-tabs{border-right:1px solid var(--line);padding-right:24px}
.vt-tabs button{display:flex;align-items:center;gap:14px;width:100%;padding:12px 14px;font-weight:700;font-size:16px;border-radius:var(--r);text-align:left;transition:background .3s,color .3s}
.vt-tabs button span{font:700 13px/1 Figtree,sans-serif;color:var(--gray)}
.vt-tabs button.on{background:var(--ink);color:#fff}
.vt-tabs button.on span{color:var(--or)}
.vt-body{position:relative;min-height:330px}
.vt-pane{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr) minmax(0,.8fr);gap:40px;opacity:0;visibility:hidden;transition:opacity .4s var(--ease)}
.vt-pane.on{opacity:1;visibility:visible}
.vt-en{font:700 13px/1 Figtree,sans-serif;letter-spacing:.2em;color:var(--or)}
.vt-ttl{font-size:26px;font-weight:900;margin:10px 0 18px;line-height:1.3}
.vt-top{display:inline-flex;align-items:center;gap:8px;font-weight:700;border-bottom:2px solid var(--or)}
.vt-top .ic{width:16px;height:16px;display:block}
.vt-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2px 28px;align-content:start}
.vt-links a{display:block;padding:9px 0 9px 20px;position:relative;font-weight:700;font-size:15px;border-bottom:1px solid var(--line);text-wrap:balance}
.vt-links a::before{content:"";position:absolute;left:2px;top:50%;width:8px;height:9px;background:var(--or);clip-path:polygon(0 0,100% 50%,0 100%);translate:0 -50%;transition:translate .3s var(--ease)}
.vt-ft img{border-radius:var(--r);aspect-ratio:4/3;object-fit:cover;width:100%}
.vt-ft figcaption{font-weight:700;font-size:14px;margin-top:10px;line-height:1.7;text-wrap:balance}

/* ───── FV ───── */
.fv{position:relative;height:calc(100svh - var(--hd));min-height:680px;overflow:hidden}
.fv-photo{position:absolute;left:38%;right:0;top:0;bottom:150px;border-radius:0 0 0 var(--r)}
.fp-cap{position:absolute;right:28px;top:24px;z-index:3;background:#fff;border-radius:var(--r);padding:6px 14px;display:flex;gap:10px;align-items:center;font-weight:700;font-size:14px}
.fp-l{font:700 11px/1 Figtree,sans-serif;letter-spacing:.2em;color:var(--sky)}
.fv-copy{position:absolute;z-index:3;left:max(calc(var(--gut) + 40px),calc((100vw - var(--cw)) / 2 + var(--gut) + 40px));top:13%}
.fv-h{display:grid;gap:4px;font:700 clamp(50px,5.3vw,96px)/1.18 "Noto Sans JP",sans-serif;letter-spacing:.06em}
.l1{color:var(--or)}.l2{color:var(--sky)}.l3{color:var(--ink)}
.fv-sub{margin-top:20px;font-weight:700;font-size:18px;display:flex;align-items:center;gap:12px}
.fv-sub::before{content:"";width:28px;height:2px;background:var(--ink)}
.fv-inset{position:absolute;z-index:4;left:calc(38% - 150px);bottom:182px;width:clamp(200px,17vw,280px);background:#fff;padding:8px 8px 10px;border-radius:var(--r);}
.fi-sl{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden}
.fi-cap{text-wrap:balance;display:grid;gap:2px;padding:8px 4px 0;font-weight:700;font-size:13px;line-height:1.4}
.fi-l{font:700 10px/1 Figtree,sans-serif;letter-spacing:.18em;color:var(--or)}
@keyframes fl{0%,100%{translate:0 0}50%{translate:0 -10px}}
.fv-people{position:absolute;z-index:2;left:max(calc(var(--gut) + 20px),calc((100vw - var(--cw)) / 2 + var(--gut) + 20px));bottom:172px;width:min(33%,620px);height:auto}
.fv-vert{position:absolute;left:clamp(14px,2vw,32px);top:40px;writing-mode:vertical-rl;font:700 11px/1 Figtree,sans-serif;letter-spacing:.3em;color:var(--gray)}
.fv-fon{position:absolute;z-index:4;left:calc(38% - 46px);top:22px;height:92px;width:auto;transform-origin:50% 100%;animation:hop 1.8s var(--ease) infinite}
@keyframes hop{0%,100%{transform:translateY(0)}40%,60%{transform:translateY(-10px) rotate(4deg)}}
.bns{position:absolute;z-index:4;left:0;right:0;bottom:22px;max-width:var(--cw);margin:0 auto;padding:0 var(--gut) 0 calc(var(--gut) + 30px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.bn a{display:grid;grid-template-columns:46% minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:0 14px;background:#fff;border-radius:var(--r);padding:10px;box-shadow:inset 0 0 0 1px var(--line);height:120px;align-content:center}
.bn figure{grid-row:span 3;overflow:hidden;border-radius:var(--r);aspect-ratio:16/10;align-self:center}
.bn img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.bn-en{font:700 10px/1 Figtree,sans-serif;letter-spacing:.18em;color:var(--sky);align-self:end}
.bn:nth-child(odd) .bn-en{color:var(--or)}
.bn-t{font-weight:900;font-size:16px;line-height:1.45;margin-top:6px;text-wrap:balance}
.bn-s{text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere;font-size:12.5px;color:var(--gray);line-height:1.5;margin-top:2px}
.fv .scroll{bottom:auto;top:calc(100% - 330px);z-index:3}

/* ───── FEATURE（上が弧を描く） ───── */
.feature{position:relative;background:var(--pale);padding:120px 0 104px;margin-top:40px;overflow-x:clip}
.feature::before{content:"";position:absolute;left:-10%;right:-10%;top:-60px;height:140px;background:var(--pale);border-radius:50%}
.fe-hd{position:relative;text-align:center;max-width:860px;margin:0 auto 56px;padding:0 var(--gut)}
.fe-en{font:500 clamp(40px,4.4vw,64px)/1 Figtree,sans-serif;letter-spacing:.14em}
.feature h2{font-size:18px;font-weight:700;color:var(--or);margin-top:10px}
.fe-lead{margin-top:22px;color:var(--txt);text-wrap:balance}
.fts{position:relative;max-width:var(--cw);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.fe-i{position:relative;padding-top:88px}
.fe-no{position:absolute;left:0;top:0;z-index:2;width:72px;height:72px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink);display:grid;place-items:center;font:500 24px/1 Figtree,sans-serif;background:var(--pale)}
.fe-i figure{border-radius:var(--r);overflow:hidden}
.fe-i img{width:100%;aspect-ratio:4/3;object-fit:cover}
.fe-tx{margin-top:22px}
.fe-sub{font-weight:700;font-size:14px;color:var(--or)}
.fe-i h3{font-size:22px;font-weight:900;line-height:1.5;margin:6px 0 10px}
.fe-tx p:not(.fe-sub){color:var(--txt);font-size:16px}
.f1{margin-top:56px}

/* ───── NEWS ───── */
.news{position:relative;padding:96px 0 0;overflow:hidden}
.news-in{max-width:var(--cw);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:260px minmax(0,1fr);gap:64px}
.news-side{position:relative;padding-left:64px}
.news-v{position:absolute;left:0;top:0;writing-mode:vertical-rl;font:500 56px/1 Figtree,sans-serif;letter-spacing:.14em;color:var(--sky)}
.news-side h2{font-size:22px;font-weight:900}
.news-tab{margin-top:20px;display:grid;gap:8px}
.news-tab li{font-weight:700;font-size:15px;color:var(--gray);display:flex;align-items:center;gap:10px}
.news-tab li::before{content:"";width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor}
.news-tab li.on{color:var(--ink)}
.news-tab li.on::before{background:var(--or);box-shadow:none}
.nws{border-top:1px solid var(--line)}
.nws a{display:grid;grid-template-columns:110px 150px minmax(0,1fr) 20px;align-items:center;gap:16px;padding:20px 4px;border-bottom:1px solid var(--line);transition:color .3s}
.nw-d{font:600 15px/1 Figtree,sans-serif;color:var(--gray)}
.nw-c{font-size:12px;font-weight:700;text-align:center;padding:4px 8px;border-radius:var(--r);background:var(--pale);white-space:nowrap}
.nw-t{font-weight:700;text-wrap:balance}
.nws .ic{width:18px;height:18px;display:block;color:var(--or);transition:transform .4s var(--ease)}
.more{display:inline-flex;align-items:center;gap:14px;font-weight:700;margin-top:28px}
.more span{background:linear-gradient(var(--ink),var(--ink)) no-repeat 0 100%/0 2px;transition:background-size .5s var(--ease);padding-bottom:2px}
.more i{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--ink);position:relative;overflow:hidden;isolation:isolate}
.more i::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--or);transform:scale(0);transition:transform .5s var(--ease);z-index:-1}
.more .ic{width:18px;height:18px;display:block}
.news-people{display:block;width:min(1200px,92%);height:auto;margin:56px auto 0}

/* ───── フッター ───── */
.ft{background:var(--ink);color:#fff;padding:56px 0 28px}
.ft-in{max-width:var(--cw);margin:0 auto;padding:0 var(--gut);display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.ft-l img{width:80px;height:auto}
.ft-c{font-size:26px;font-weight:900;margin-top:14px}
.ft-ad{font-size:14px;color:#ccc;margin-top:6px}
.ft-r{display:grid;gap:6px;justify-items:start}
.ft-tel,.ft-mail{display:inline-flex;align-items:center;gap:10px;font:800 26px/1.3 Figtree,sans-serif}
.ft-mail{font-size:20px}
.ft .ic{width:22px;height:22px;display:block;color:var(--or)}
.ft-copy{max-width:var(--cw);margin:36px auto 0;padding:0 var(--gut);font-size:12px;color:#aaa}

/* 固定バナー */
.fbn{--fbn-h:92px;padding:0 16px 12px}
.fbn-in{max-width:720px;margin:0 auto;height:76px;background:var(--ink);color:#fff;border-radius:var(--r);display:flex;align-items:center;gap:18px;padding:0 58px 0 72px;position:relative;overflow:hidden}
.fbn-ch{display:none}
.fbn-in::before{content:"";position:absolute;left:-14px;top:50%;width:60px;height:60px;translate:0 -50%;background:var(--or);clip-path:polygon(20% 8%,92% 50%,20% 92%)}
.fbn-l{font-size:12px;font-weight:500;color:var(--or2)}
.fbn-c{font-size:20px;font-weight:900;line-height:1.3}
.fbn-b1{margin-left:auto;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 20px;border-radius:var(--r);background:var(--or);color:#fff;font-weight:700;font-size:15px;white-space:nowrap}
.fbn-b1 .ic{width:16px;height:16px;display:block}
.fbn-x{position:absolute;right:12px;top:50%;translate:0 -50%;width:36px;height:36px;display:grid;place-items:center;color:#fff}
.fbn-x .ic{width:20px;height:20px;display:block}
.totop{background:var(--ink);color:#fff;border-radius:50%}

/* 引き出し */
.drawer{position:fixed;inset:0;z-index:70;background:rgba(46,46,46,.4);opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.drawer-open .drawer{opacity:1;visibility:visible;transition:opacity .4s}
.dr-in{position:absolute;right:0;top:0;bottom:0;width:min(420px,88vw);background:var(--bg);padding:72px 24px 32px;overflow:auto;transform:translateX(100%);transition:transform .5s var(--ease)}
.drawer-open .dr-in{transform:none}
.dr-x{position:absolute;right:12px;top:12px;width:48px;height:48px;display:grid;place-items:center}
.dr-x .ic{width:24px;height:24px;display:block}
.dr-list>li{border-bottom:1px solid var(--line)}
.dr-list>li>a,.acc>button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:16px 4px;font-weight:700;font-size:17px;text-align:left}
.acc>button i{width:12px;height:12px;position:relative}
.acc>button i::before,.acc>button i::after{content:"";position:absolute;left:0;top:5px;width:12px;height:2px;background:var(--or);transition:transform .3s}
.acc>button i::after{transform:rotate(90deg)}
.acc.open>button i::after{transform:none}
.acc ul{display:none;padding:0 0 12px 12px}
.acc.open ul{display:block}
.acc ul a{display:block;padding:8px 0;font-size:16px;color:var(--txt)}
.dr-tel{margin-top:24px;display:grid;gap:4px;font:800 22px/1.3 Figtree,sans-serif}
.dr-tel .ic{width:20px;height:20px;color:var(--or)}
.dr-tel small{font:500 13px/1.5 "Noto Sans JP"}

@media (hover:hover) and (pointer:fine){
  .hd-cta:hover::before{transform:none}
  .fbn-b1:hover .ic,.vt-top:hover .ic,.more:hover .ic{animation:arw .6s var(--ease)}
  .bn a:hover img,.fe-i:hover img{transform:scale(1.065)}
  .fe-i img{transition:transform 1.2s var(--ease)}
  .bn a:hover .bn-t{color:var(--or)}
  .nws a:hover{color:var(--or)}
  .nws a:hover .ic{transform:translateX(4px)}
  .more:hover span{background-size:100% 2px}
  .more:hover i::before{transform:scale(1)}
  .vt-links a:hover{color:var(--or)}
  .vt-links a:hover::before{translate:4px -50%}
  .gnav>li>a:hover::after{transform:none}
}
@keyframes arw{0%{transform:none}45%{transform:translateX(120%);opacity:0}46%{transform:translateX(-120%);opacity:0}100%{transform:none;opacity:1}}

@media (max-width:1280px){
  .logo-t{display:none}
  .news-side{padding-left:0}
  .news-v{position:static;writing-mode:horizontal-tb;font-size:40px;margin-bottom:6px}
  .gnav>li>a{padding:10px 10px;font-size:14px}
  .bn a{grid-template-columns:1fr;height:auto}
  .bn figure{grid-row:auto;margin-bottom:8px}
  .fv-photo{bottom:220px}
  .fv-people{bottom:240px;width:min(26%,620px)}
  .fv-inset{bottom:250px;left:calc(38% - 60px)}
  .fv .scroll{display:none}
}
@media (max-width:1023px){
  :root{--hd:64px}
  .pcnav,.hd-cta{display:none}
  .hd-in{justify-content:space-between}
  .logo img{height:44px}
  .menu-btn{display:grid;align-content:center;gap:5px;width:50px;height:46px;border-radius:var(--r);background:var(--ink);padding:0 14px}
  .menu-btn i{height:2px;background:#fff;display:block}
  .qnav{display:block;background:#fff;border-top:1px solid var(--line)}
  .qnav ul{display:grid;grid-template-columns:repeat(5,1fr)}
  .qnav a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 7px;font-size:12px;font-weight:700;line-height:1.2}
  .qnav .ic{width:22px;height:22px;display:block;color:var(--or)}
  .fv{height:auto;min-height:0;padding-bottom:28px}
  .fv-photo{position:relative;left:auto;right:auto;top:auto;bottom:auto;height:clamp(280px,56vw,440px);margin-left:var(--gut);border-radius:var(--r) 0 0 var(--r)}
  .fp-cap{display:none}
  .fv-copy{position:relative;left:auto;top:auto;padding:30px var(--gut) 0}
  .fv-people{position:relative;left:auto;bottom:auto;width:calc(100% - var(--gut) * 2);margin:22px var(--gut) 0}
  .fv-vert{display:none}
  .fv-fon{left:calc(var(--gut) - 10px);top:-6px;height:70px}
  .fv-inset{left:auto;right:16px;bottom:auto;top:calc(clamp(280px,56vw,440px) - 90px);width:150px;padding:6px 6px 8px}
  .fi-cap{font-size:11px}
  .fv-copy{padding-right:170px}
  .bns{position:relative;bottom:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px;padding:0 var(--gut)}
  .fts{grid-template-columns:1fr;gap:36px;max-width:640px}
  .f1{margin-top:0}
  .news-in{grid-template-columns:1fr;gap:24px}
  .news-tab{display:flex;flex-wrap:wrap;gap:8px 18px}
}
@media (max-width:767px){
  body{font-size:16px}
  .fbn-in{height:70px;padding:0 42px 0 50px}
  .fbn-in::before{width:44px;height:44px;left:-10px}
  .fv-h{font-size:clamp(40px,11.4vw,46px)}
  .fv-copy{padding-right:var(--gut)}
  .fv-inset{top:calc(clamp(280px,56vw,440px) - 60px);width:132px}
  .fv-sub{font-size:16px}
  .bn a{padding:8px}

  .bn-t{font-size:15px}
  .bn-s{font-size:12px}
  .feature{padding:80px 0 64px}
  .feature::before{top:-30px;height:70px}
  .fe-en{font-size:38px}
  .fe-hd{margin-bottom:36px;text-align:left}
  .fe-i h3{font-size:19px}
  .news{padding-top:60px}
  .news-side{padding-left:0}
  .news-v{position:static;writing-mode:horizontal-tb;font-size:40px;margin-bottom:6px}
  .nws a{grid-template-columns:auto 1fr 20px;gap:6px 12px;padding:16px 2px}
  .nw-d{grid-column:1}
  .nw-c{grid-column:2;justify-self:start}
  .nw-t{grid-column:1/span 2;font-size:15px}
  .nws .ic{grid-column:3;grid-row:1/span 2}
  .ft-c{font-size:21px}
  .ft-tel{font-size:22px}
  .fbn{--fbn-h:88px;padding:0 10px 10px}
  .fbn-in{height:72px;padding:0 42px 0 80px;gap:10px}
  .fbn-ch{height:80px;left:14px}
  .fbn-l{display:none}
  .fbn-c{font-size:15px}
  .fbn-b1{height:44px;padding:0 12px;font-size:14px}
  .fbn-b1 .ic{display:none}
  .fbn-x{right:4px}
}

/* ───── OUR FIELD（B案の5領域をH案の組み方で 10/10） ───── */
.field{position:relative;padding:112px 0 104px}
.fd-hd{text-align:center;max-width:900px;margin:0 auto 56px;padding:0 var(--gut)}
.field h2,.svc h2{font-size:18px;font-weight:700;color:var(--or);margin-top:10px}
.fd-catch{margin-top:18px;font-size:clamp(28px,3vw,42px);font-weight:900;line-height:1.45;letter-spacing:.06em}
.fd-catch b{font:500 1.35em/1 Figtree,sans-serif;color:var(--or);margin:0 .06em;font-variant-numeric:tabular-nums}
.nw{display:inline-block}
.fds{max-width:var(--cw);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px}
.fd a{display:block}
.fd figure{border-radius:var(--r);overflow:hidden}
.fd img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.2s var(--ease)}
.fd-en{margin-top:18px;font:600 14px/1 Figtree,sans-serif;letter-spacing:.12em;color:var(--or)}
.fd h3{font-size:20px;font-weight:900;line-height:1.4;margin-top:8px}
.fd-n{display:flex;align-items:baseline;gap:4px;margin-top:6px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.fd-n b{font:500 48px/1.05 Figtree,sans-serif;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--or)}
.fd-n small{font-weight:700;font-size:14px;color:var(--gray)}
.fd-d{margin-top:12px;font-size:14px;line-height:1.8;color:var(--txt);word-break:keep-all;overflow-wrap:anywhere}
.fd-more{text-align:center;margin-top:44px}

/* ───── SERVICE（8事業の2列一覧） ───── */
.svc{position:relative;background:var(--pale);padding:104px 0 112px}
.svc-in{max-width:var(--cw);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);gap:72px;align-items:start}
.svc-side{position:sticky;top:calc(var(--hd) + 40px);padding-left:64px}
.svc .svc-v{color:var(--sky)}
.svc h2{margin-top:0}
.svc-catch{margin-top:12px;font-size:clamp(26px,2.3vw,34px);font-weight:900;line-height:1.5;letter-spacing:.04em}
.svc-lead{margin-top:16px;color:var(--txt);font-size:16px;word-break:keep-all;overflow-wrap:anywhere}
.svs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.sv a{display:grid;grid-template-columns:56px minmax(0,1fr) 20px;grid-template-rows:auto auto;gap:2px 18px;align-items:center;padding:24px 18px 24px 4px;border-bottom:1px solid var(--line);position:relative}
.sv:nth-child(odd) a{border-right:1px solid var(--line)}
.sv:nth-child(even) a{padding-left:24px}
.sv-ic{grid-row:span 2;width:56px;height:56px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink);display:grid;place-items:center;color:var(--or);background:var(--bg);transition:background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease)}
.sv-ic svg{width:26px;height:26px;display:block}
.sv-no{position:absolute;right:18px;top:14px;font:600 12px/1 Figtree,sans-serif;letter-spacing:.12em;color:var(--gray)}
.sv-t{grid-column:2;align-self:end;font-weight:900;font-size:19px;line-height:1.4}
.sv-s{grid-column:2;align-self:start;font-size:14px;line-height:1.6;color:var(--gray);word-break:keep-all;overflow-wrap:anywhere}
.sv .ic{grid-column:3;grid-row:1/span 2;width:18px;height:18px;display:block;color:var(--or);transition:transform .4s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .fd a:hover img{transform:scale(1.065)}
  .fd a:hover h3{color:var(--or)}
  .sv a:hover .sv-ic{background:var(--or);color:#fff;box-shadow:inset 0 0 0 1.5px var(--or)}
  .sv a:hover .ic{transform:translateX(4px)}
  .sv a:hover .sv-t{color:var(--or)}
}
@media (max-width:1280px){
  .fds{grid-template-columns:repeat(3,minmax(0,1fr))}
  .svc-in{grid-template-columns:1fr;gap:36px}
  .svc-side{position:static;padding-left:0}
}
@media (max-width:900px){
  .svs{grid-template-columns:1fr}
  .sv:nth-child(odd) a{border-right:0}
  .sv:nth-child(even) a{padding-left:4px}
}
@media (max-width:767px){
  .field{padding:72px 0 64px}
  .fd-hd{text-align:left;margin-bottom:32px}
  .fd-catch{font-size:25px;line-height:1.6}
  .fds{grid-template-columns:1fr;gap:20px}
  .fd a{display:grid;grid-template-columns:120px minmax(0,1fr);grid-template-rows:auto auto auto auto;column-gap:16px}
  .fd figure{grid-row:1/span 4;align-self:start}
  .fd img{aspect-ratio:1/1}
  .fd-en{margin-top:2px;font-size:12px}
  .fd h3{font-size:17px;margin-top:4px}
  .fd-n{margin-top:0;padding-bottom:6px}
  .fd-n b{font-size:34px}
  .fd-d{font-size:13px;margin-top:6px;line-height:1.7}
  .fd-more{text-align:left;padding:0 var(--gut);margin-top:28px}
  .svc{padding:64px 0 72px}
  .svc-catch{font-size:24px}
  .sv a{grid-template-columns:48px minmax(0,1fr) 18px;gap:2px 14px;padding:18px 4px}
  .sv-ic{width:48px;height:48px}
  .sv-ic svg{width:22px;height:22px}
  .sv-t{font-size:17px}
}

/* ───── 書体とロゴを forwards.jp に合わせる（10/10）─────
   英字：Figtree の斜体（大見出しは 800 で淡いオレンジ〜黄のグラデ文字＝forwards.jp の OUR FIELD/SERVICE と同じ）
   和文の小見出し：斜体 700＋左下からの飾り線（forwards.jp の section-title-sub）
   数字：Figtree 斜体 700 のオレンジ（forwards.jp の制作実績の数字） */
.logo img{height:64px;width:auto}
.ft-l img{width:88px;height:auto}
.fe-en,.news-v,.svc .svc-v{font:italic 800 clamp(64px,9.4vw,150px)/1 Figtree,sans-serif;letter-spacing:0;
  background:linear-gradient(86deg,rgba(242,183,133,.21) 0%,rgba(233,232,70,.21) 48%,rgba(242,183,133,.21) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;white-space:nowrap;padding-right:.08em}
.news-v,.svc .svc-v{position:static;writing-mode:horizontal-tb;font-size:clamp(56px,6.4vw,104px);margin:0 0 -.18em -.04em}
.news-side,.svc-side{padding-left:0}
.fe-hd .fe-en,.fd-hd .fe-en{margin-bottom:-.2em}
h2.sub{position:relative;display:inline-block;z-index:1;margin-top:0;padding:0 8px 6px 40px;font-size:24px;font-weight:700;font-style:italic;letter-spacing:.04em;color:var(--ink)}
h2.sub::after{content:"";position:absolute;left:-36px;bottom:-12px;z-index:-1;width:370px;max-width:calc(100% + 36px);height:55px;background:url(../img/fj_title_deco.webp) no-repeat left bottom/contain}
.fe-hd h2.sub,.fd-hd h2.sub{padding-left:28px}
.fd-catch{margin-top:28px}
.fe-lead{margin-top:22px}
.fp-l,.fi-l,.bn-en,.vt-en,.fd-en,.sv-no,.fv-vert{font-style:italic;font-weight:600}
.fd-en{font-size:16px;letter-spacing:.04em}
.bn-en{color:var(--or2)}
.fp-l{color:var(--or2)}
.fe-no{font:italic 700 26px/1 Figtree,sans-serif;color:var(--or)}
.fd-n b,.fd-catch b{font-style:italic;font-weight:700;color:#E29D3F}
.nw-d{font-style:italic}
.ft-tel,.ft-mail,.dr-tel{font-style:italic}
@media (max-width:1023px){
  .logo img{height:50px}
}
@media (max-width:767px){
  .fe-en{font-size:clamp(52px,16vw,72px)}
  .news-v,.svc .svc-v{font-size:clamp(50px,15vw,64px)}
  h2.sub{font-size:20px;padding-left:28px}
  h2.sub::after{width:280px;left:-20px;bottom:-10px;height:44px}
}

/* ───── WORKS（FEATURE の代わり 10/10）：forwards.jp の実績とサムネイル ───── */
.wks{position:relative;max-width:var(--cw);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 36px}
.wk a{display:block}
.wk figure{border-radius:var(--r);overflow:hidden;background:#fff}
.wk img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 1.2s var(--ease)}
.wk-c{margin-top:18px;display:inline-block;font-size:12px;font-weight:700;line-height:1;padding:6px 10px;border-radius:var(--r);background:#fff;color:var(--or)}
.wk h3{font-size:19px;font-weight:900;line-height:1.5;margin-top:10px;transition:color .3s}
.wk-d{margin-top:4px;font-size:14px;color:var(--txt);line-height:1.7}
.wk-foot{position:relative;max-width:var(--cw);margin:56px auto 0;padding:0 var(--gut);display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap}
.wk-foot .more{margin-top:0}
.wk-cats{display:flex;flex-wrap:wrap;gap:10px}
.wk-cats a{display:inline-flex;align-items:baseline;gap:8px;padding:9px 14px;border-radius:var(--r);background:#fff;font-size:14px;font-weight:700;line-height:1.2;transition:background .3s,color .3s}
.wk-cats small{font:italic 700 13px/1 Figtree,sans-serif;color:var(--or)}
@media (hover:hover) and (pointer:fine){
  .wk a:hover img{transform:scale(1.05)}
  .wk a:hover h3{color:var(--or)}
  .wk-cats a:hover{background:var(--ink);color:#fff}
}
@media (max-width:1023px){
  .wks{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}
}
@media (max-width:767px){
  .wks{grid-template-columns:1fr;gap:32px}
  .wk h3{font-size:17px}
  .wk-foot{margin-top:40px}
  .wk-cats a{font-size:13px;padding:8px 11px}
}

/* 固定バナー：小さなフォンくんがのぞく形に戻す（社長「このデザインがいい」10/10） */
.fbn-in{padding-left:112px}
.fbn-in::before{display:none}
.fbn-ch{display:block;position:absolute;left:30px;bottom:6px;height:96px;width:auto;transform-origin:50% 100%;animation:fbnHop 2.4s var(--ease) infinite}
@keyframes fbnHop{0%,70%,100%{transform:none}80%{transform:translateY(-6px) rotate(-4deg)}90%{transform:translateY(0) rotate(2deg)}}
@media (prefers-reduced-motion:reduce){.fbn-ch{animation:none}}
@media (max-width:1023px){
  .fbn-in{padding-left:92px}
  .fbn-ch{left:20px;height:84px}
}
@media (max-width:767px){
  .fbn-in{padding-left:74px}
  .fbn-ch{left:10px;height:74px;bottom:4px}
}
/* 背景の大きな英字に和文を重ねない（英字の下に余白をとって並べる） */
.fe-hd .fe-en,.fd-hd .fe-en{margin-bottom:14px}
.news-v,.svc .svc-v{margin:0 0 14px -.04em}
.logo img{height:72px}
@media (max-width:1023px){.logo img{height:52px}}

/* 縦長の画面でFVが伸びすぎないように（写真は横1.2：縦1より縦長にしない） 10/10 */
@media (min-width:1024px){
  .fv{max-height:calc(52vw + 150px)}
}
/* 小見出しの下の飾り線は使わない（社長指示 10/10） */
h2.sub::after{display:none}
h2.sub,.fe-hd h2.sub,.fd-hd h2.sub{padding:0}
/* 英字見出しは大きくせず、普通のオレンジの小さな英字に（社長指示 10/10） */
.fe-en,.news-v,.svc .svc-v{font:italic 700 18px/1 Figtree,sans-serif;letter-spacing:.14em;background:none;-webkit-text-fill-color:currentColor;color:var(--or);padding:0;margin:0 0 12px}
@media (max-width:767px){.fe-en,.news-v,.svc .svc-v{font-size:16px}}
/* FVの高さ上限：1024px前後でコピーと小窓がぶつからないよう最低820px */
@media (min-width:1024px){.fv{max-height:max(calc(52vw + 150px),820px)}}

/* 見出し：英字は大きめのオレンジ、和文は普通の太字（斜体にしない） 10/10 */
.fe-en,.news-v,.svc .svc-v{font:italic 700 clamp(40px,4vw,60px)/1 Figtree,sans-serif;letter-spacing:.04em;margin:0 0 14px}
h2.sub{font-style:normal;font-weight:700;font-size:18px;letter-spacing:.08em}
@media (max-width:767px){
  .fe-en,.news-v,.svc .svc-v{font-size:38px}
  h2.sub{font-size:16px}
}
/* お知らせの下の余白と、フッターの下に地色がはみ出す崩れを解消 */
.news{padding-bottom:104px}
body.has-fbn{padding-bottom:0}
.has-fbn .ft{padding-bottom:calc(28px + 96px)}
@media (max-width:767px){
  .news{padding-bottom:72px}
  .has-fbn .ft{padding-bottom:calc(24px + 88px)}
}

/* 各セクションの上下の余白を半分に（社長指示 10/10） */
.works{padding:60px 0 52px;margin-top:20px}
.field{padding:56px 0 52px}
.svc{padding:52px 0 56px}
.news{padding:48px 0 52px}
.feature::before{top:-30px;height:70px}
@media (max-width:767px){
  .works{padding:40px 0 32px}
  .field{padding:36px 0 32px}
  .svc{padding:32px 0 36px}
  .news{padding:30px 0 36px}
}

/* ───── フッター（プロ仕様 10/10）─────
   相談の帯（フォーム・電話・LINE）→ 会社情報＋サイトマップ5列 → 規約類と著作権 */
.ft{display:none}
.pf{background:var(--ink);color:#fff}
.pf a{transition:color .3s}
.pf-cta{border-bottom:1px solid rgba(255,255,255,.12)}
.pf-cta-in{max-width:var(--cw);margin:0 auto;padding:56px var(--gut);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center}
.pf-en{font:italic 700 clamp(40px,4vw,60px)/1 Figtree,sans-serif;letter-spacing:.04em;color:var(--or)}
.pf-catch{margin-top:14px;font-size:clamp(24px,2.2vw,32px);font-weight:900;line-height:1.4}
.pf-lead{margin-top:12px;font-size:15px;color:#cfcfcf;line-height:1.9}
.pf-ways{display:grid;gap:12px}
.pf-way{display:grid;grid-template-columns:28px minmax(0,1fr) 20px;align-items:center;gap:18px;padding:20px 24px;border-radius:var(--r);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-weight:700;font-size:18px;line-height:1.3;transition:background .35s var(--ease),border-color .35s}
.pf-way small{display:block;font-size:12px;font-weight:500;color:#bdbdbd;margin-bottom:4px}
.pf-way b{font:italic 800 26px/1.1 Figtree,sans-serif;letter-spacing:.02em}
.pf-way .ic{width:24px;height:24px;display:block;color:var(--or)}
.pf-way>.ic:last-child{width:18px;height:18px;transition:transform .4s var(--ease)}
.pf-form{background:var(--or);border-color:var(--or)}
.pf-form .ic,.pf-form small{color:#fff}
.pf-main{max-width:var(--cw);margin:0 auto;padding:56px var(--gut) 44px;display:grid;grid-template-columns:260px minmax(0,1fr);gap:56px}
.pf-co img{width:96px;height:auto}
.pf-name{margin-top:16px;font-weight:700;font-size:16px}
.pf-ad{margin-top:6px;font-size:13px;line-height:1.8;color:#bdbdbd}
.pf-sns{display:flex;gap:16px;margin-top:18px}
.pf-sns a{font:italic 600 13px/1 Figtree,sans-serif;letter-spacing:.06em;color:#e6e6e6;padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.3)}
.pf-map{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.pf-h{font-size:15px;font-weight:700;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.16)}
.pf-col ul{display:grid;gap:8px}
.pf-col li a{font-size:13px;color:#bdbdbd;line-height:1.6}
.pf-bot{max-width:var(--cw);margin:0 auto;padding:20px var(--gut) 24px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap}
.pf-legal{display:flex;flex-wrap:wrap;gap:6px 22px}
.pf-legal a{font-size:12px;color:#bdbdbd}
.pf-copy{font:500 12px/1 Figtree,sans-serif;letter-spacing:.06em;color:#9a9a9a}
.has-fbn .pf{padding-bottom:96px}
@media (hover:hover) and (pointer:fine){
  .pf-way:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
  .pf-form:hover{background:var(--or2);border-color:var(--or2)}
  .pf-way:hover>.ic:last-child{transform:translateX(4px)}
  .pf-col a:hover,.pf-legal a:hover,.pf-h a:hover{color:var(--or)}
  .pf-sns a:hover{color:var(--or);border-color:var(--or)}
}
@media (max-width:1280px){
  .pf-main{grid-template-columns:1fr;gap:40px}
  .pf-map{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}
}
@media (max-width:1023px){
  .pf-cta-in{grid-template-columns:1fr;gap:28px}
}
@media (max-width:767px){
  .pf-cta-in{padding:40px var(--gut)}
  .pf-en{font-size:38px}
  .pf-catch{font-size:22px}
  .pf-lead{font-size:14px}
  .pf-way{padding:16px 16px;gap:14px;font-size:16px}
  .pf-way b{font-size:22px}
  .pf-main{padding:40px var(--gut) 32px;gap:32px}
  .pf-map{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}
  .pf-col:nth-child(n+2) ul{display:none}
  .pf-col:first-child{grid-column:1/-1}
  .pf-col:first-child ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-h{margin-bottom:0;padding-bottom:10px}
  .pf-col:first-child .pf-h{margin-bottom:12px}
  .pf-bot{flex-direction:column;align-items:flex-start}
  .has-fbn .pf{padding-bottom:88px}
}
/* FV「ひとと、」は水色（オレンジ #EAA13C と相性のよい、少し深めの空色） 10/10 */
.fv-h .l2{color:#4FA9D6}
/* SCROLL はノートPCで画面のいちばん下あたり（下から28px）。1024〜1280 でも出す 10/10 */
.fv .scroll{top:auto;bottom:28px}
@media (min-width:1024px) and (max-width:1280px){.fv .scroll{display:flex;left:12px}}

/* ═════ トンマナの統一（社長「いろいろ言ったので一度合わせて」10/10）═════
   ・色：オレンジ #EAA13C（数字・英字・タグ）／差し色は水色 #4FA9D6 の1色だけ（ミントは使わない）／文字 #353535／本文 #555
   ・見出し：英字＝Figtree斜体700オレンジ（40〜60px）→ 和文＝18px太字 → キャッチ＝同じ大きさ（26〜36px・900）→ 本文 16px
   ・タグ：12px太字オレンジ・角丸4px・地は白（灰色地のとき）／淡灰（白地のとき）
   ・数字：Figtree斜体700オレンジ */
:root{--sky:#4FA9D6}
.fv-h .l2{color:var(--sky)}
.fd-n b,.fd-catch b{color:var(--or)}
.fd-catch,.svc-catch,.pf-catch{font-size:clamp(26px,2.5vw,36px);font-weight:900;line-height:1.5;letter-spacing:.05em}
.fd-catch{margin-top:20px}
.svc-catch{margin-top:14px}
.fe-lead,.svc-lead,.pf-lead{font-size:16px;line-height:1.95}
.fe-lead{margin-top:16px}
.nw-c{color:var(--or);background:var(--pale)}
.wk-c{background:#fff}
.news-side h2,.field h2,.svc h2,.works h2{font-size:18px}
.fv .scroll{bottom:max(28px,calc(100% - 100svh + var(--hd) + 28px))}
@media (max-width:767px){
  .fd-catch,.svc-catch,.pf-catch{font-size:24px;line-height:1.6}
  .fe-lead,.svc-lead,.pf-lead{font-size:15px}
}

/* ───── ロゴは forwards.jp と同じ大きさ・位置（149×104、左23px・上26px）、後ろの光（logo_deco）もそのまま 10/10 ─────
   スクロールしたらヘッダーは白地になり、ロゴは forwards.jp の追従ヘッダーと同じ 80×56 に縮む */
.hd{transition:background .4s var(--ease)}
body:not(.scrolled) .hd{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.hd-glow{position:absolute;top:-95px;left:-205px;width:523px;height:auto;z-index:2;pointer-events:none}
.hd-in{position:static}
.logo{position:static;display:block;width:150px;height:var(--hd);flex:none}
.logo img{position:absolute;top:26px;left:23px;width:149px;height:104px;transition:top .4s var(--ease),left .4s var(--ease),width .4s var(--ease),height .4s var(--ease)}
.scrolled .logo img{top:14px;left:60px;width:80px;height:56px}
.logo-t{position:absolute;left:192px;top:28px;font-size:13px;line-height:1.55;color:var(--ink);transition:opacity .3s}
.scrolled .logo-t{opacity:0;pointer-events:none}
.fv-vert{top:96px}
@media (max-width:960px){
  .hd-glow{top:-50px;left:-130px;width:348px}
  .logo img{width:100px;height:70px;top:16px;left:16px}
}
@media (max-width:1023px){
  .logo{width:120px}
  .scrolled .logo img{top:8px;left:16px;width:68px;height:48px}
}
@media (max-width:767px){
  .hd-glow{opacity:.9;top:-15px;left:-55px;width:174px}
  .logo img{top:20px;left:16px;width:auto;height:40px}
  .scrolled .logo img{top:12px;height:40px;width:auto;left:16px}
}

/* ═════ FVの大きな写真をプロ仕様に（10/10）═════
   ・読み込み時に写真が右から左へ開く（clip-path）
   ・右下を地色で切り欠いたページャー：番号／写真の説明／進むバー（6秒）／前へ・次へ
   ・写真の下は PICK UP のカルーセル（ゆっくり流れ続け、触れると止まる・一時停止ボタンあり） */
.fp-cap{display:none}
.fv-photo{clip-path:inset(0 0 0 100%);animation:fpOpen 1.5s .15s cubic-bezier(.77,0,.18,1) forwards;border-radius:0 0 0 var(--r)}
@keyframes fpOpen{to{clip-path:inset(0 0 0 0 round 0 0 0 var(--r))}}
.fp-pager{position:absolute;z-index:4;right:0;bottom:150px;width:min(440px,34vw);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;padding:18px 28px 16px 26px;background:var(--bg);border-radius:var(--r) 0 0 0}
.fp-pager::before{content:"";position:absolute;right:0;bottom:100%;width:16px;height:16px;background:radial-gradient(circle at 0 0,transparent 15.5px,var(--bg) 16px)}
.fp-pager::after{content:"";position:absolute;right:100%;bottom:0;width:16px;height:16px;background:radial-gradient(circle at 0 0,transparent 15.5px,var(--bg) 16px)}
.fp-no{display:flex;align-items:baseline;gap:6px;font:italic 700 15px/1 Figtree,sans-serif;color:var(--gray)}
.fp-no b{font-size:34px;color:var(--ink);font-variant-numeric:tabular-nums}
.fp-cap2{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-cap2 .fp-l{font:italic 600 11px/1 Figtree,sans-serif;letter-spacing:.16em;color:var(--or)}
.fp-bar{display:block;position:relative;height:2px;margin-top:10px;background:var(--line);overflow:hidden}
.fp-bar::after{content:"";position:absolute;inset:0;background:var(--or);transform:scaleX(0);transform-origin:left}
.fp-bar.run::after{animation:fpBar 6s linear forwards}
@keyframes fpBar{to{transform:none}}
.fp-ctl{display:flex;gap:8px}
.fp-ctl button{width:42px;height:42px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink);display:grid;place-items:center;transition:background .3s,color .3s,box-shadow .3s}
.fp-ctl button:first-child .ic{transform:scaleX(-1)}
.fp-ctl .ic{width:16px;height:16px;display:block}

/* PICK UP カルーセル */
.bns{display:none}
.pk{position:absolute;z-index:4;left:0;right:0;bottom:16px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:stretch;padding-left:max(var(--gut),calc((100vw - var(--cw)) / 2 + var(--gut)))}
.pk-hd{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 22px 0 0;margin-right:4px;background:var(--bg)}
.pk-en{font:italic 700 22px/1 Figtree,sans-serif;letter-spacing:.04em;color:var(--or);white-space:nowrap}
.pk-n{font:italic 600 12px/1 Figtree,sans-serif;letter-spacing:.08em;color:var(--gray)}
.pk-pause{margin-top:6px;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink);display:flex;align-items:center;justify-content:center;gap:4px}
.pk-pause i{width:2px;height:11px;background:var(--ink)}
.pk.paused .pk-pause i:first-child{width:0;height:0;background:none;border-left:9px solid var(--ink);border-top:6px solid transparent;border-bottom:6px solid transparent}
.pk.paused .pk-pause i:last-child{display:none}
.pk-vp{overflow:hidden}
.pk-track{display:flex;gap:16px;width:max-content;animation:pkFlow 60s linear infinite}
.pk:hover .pk-track,.pk:focus-within .pk-track,.pk.paused .pk-track{animation-play-state:paused}
@keyframes pkFlow{to{transform:translateX(calc(-50% - 8px))}}
.pk-c{flex:none;width:330px;display:grid;grid-template-columns:44% minmax(0,1fr);gap:0 14px;align-items:center;padding:10px;background:#fff;border:1px solid var(--line);border-radius:var(--r);transition:border-color .35s,transform .45s var(--ease)}
.pk-c figure{overflow:hidden;border-radius:var(--r);aspect-ratio:16/10}
.pk-c img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.pk-tx{display:grid;gap:4px;min-width:0}
.pk-l{font:italic 600 10px/1 Figtree,sans-serif;letter-spacing:.16em;color:var(--or)}
.pk-t{font-weight:900;font-size:15px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-s{font-size:12px;color:var(--gray);line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
@media (hover:hover) and (pointer:fine){
  .fp-ctl button:hover{background:var(--ink);color:#fff}
  .pk-c:hover{border-color:var(--or);transform:translateY(-4px)}
  .pk-c:hover img{transform:scale(1.07)}
  .pk-c:hover .pk-t{color:var(--or)}
}
@media (prefers-reduced-motion:reduce){
  .fv-photo{animation:none;clip-path:none}
  .pk-track{animation:none}
  .pk-vp{overflow-x:auto}
}
@media (max-width:1280px){
  .fp-pager{bottom:220px;width:min(400px,44vw)}
  .pk{bottom:20px}
  .fv .pk ~ .scroll{bottom:max(28px,calc(100% - 100svh + var(--hd) + 28px))}
}
@media (max-width:1023px){
  .fv-photo{animation:none;clip-path:none}
  .fp-pager{position:relative;right:auto;bottom:auto;width:auto;margin:0 0 0 var(--gut);padding:12px var(--gut) 0 0;border-radius:0}
  .fp-pager::before,.fp-pager::after{display:none}
  .pk{position:relative;bottom:auto;margin-top:24px;grid-template-columns:1fr;gap:12px;padding-left:var(--gut)}
  .pk-hd{flex-direction:row;align-items:center;gap:12px;padding:0;margin:0;background:none}
  .pk-pause{margin:0 0 0 auto;margin-right:var(--gut)}
  .pk-c{width:290px}
}
@media (max-width:767px){
  .fp-no b{font-size:26px}
  .fp-ctl button{width:36px;height:36px}
  .pk-c{width:260px}
  .pk-t{font-size:14px}
}
@media (min-width:1024px) and (max-width:1280px){
  .fv-photo{bottom:150px}
  .fp-pager{bottom:150px}
  .fv-inset{bottom:182px}
}
.pk{padding-left:max(calc(var(--gut) + 28px),calc((100vw - var(--cw)) / 2 + var(--gut)))}
.pk-s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1023px){.fp-pager{display:none}}
@media (max-width:1023px){.pk{padding-left:var(--gut)}}

/* 2つめのセクション（WORKS）：灰色の曲線はやめ、FVの地色から灰色へグラデーションでつなぐ 10/10 */
.feature::before,.works::before{display:none}
.works{margin-top:0;background:linear-gradient(180deg,var(--bg) 0,var(--pale) 220px,var(--pale) 100%)}
@media (max-width:767px){.works{background:linear-gradient(180deg,var(--bg) 0,var(--pale) 140px,var(--pale) 100%)}}

/* ═════ トップ完成：追加セクション（10/10）═════
   地色の並び：FV(#F9) → PROBLEM(グラデで灰) → SERVICE(#F9) → WORKS(灰) → FIELD(#F9) → CLIENT(白) → 相談帯(チャコール)
              → REASON(#F9) → MESSAGE(灰) → FLOW(#F9) → FAQ(灰) → RESOURCES(#F9) → NEWS(灰) → フッター */
.sec-hd{position:relative;text-align:center;max-width:900px;margin:0 auto 44px;padding:0 var(--gut)}
.problem{position:relative;padding:60px 0 64px;background:linear-gradient(180deg,var(--bg) 0,var(--pale) 220px,var(--pale) 100%)}
.svc{background:var(--bg)}
.works{background:var(--pale)}
.news{background:var(--pale)}

/* PROBLEM：共感 → 答え */
.pbs{max-width:1180px;margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pb{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:16px;padding:22px 24px;background:#fff;border-radius:var(--r)}
.pb .ic{width:44px;height:44px;padding:10px;border-radius:50%;background:var(--pale);color:var(--or);display:block}
.pb p{font-weight:700;font-size:16px;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
.pb-ans{position:relative;max-width:900px;margin:48px auto 0;padding:0 var(--gut);text-align:center}
.pb-catch{font-size:clamp(26px,2.5vw,36px);font-weight:900;line-height:1.5;letter-spacing:.05em}
.pb-catch .nw:last-child{color:var(--or)}
.pb-lead{margin-top:12px;color:var(--txt);font-size:16px;line-height:1.95}
.pb-arrow{display:block;width:1px;height:56px;margin:28px auto 0;background:var(--or);position:relative}
.pb-arrow::after{content:"";position:absolute;left:50%;bottom:0;width:10px;height:10px;border-right:1px solid var(--or);border-bottom:1px solid var(--or);transform:translate(-50%,0) rotate(45deg)}

/* CLIENT：ロゴの面 */
.client{background:#fff;padding:56px 0 60px}
.cls{max-width:1280px;margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.cls li{border:1px solid var(--line);border-radius:var(--r);background:#fff;display:grid;place-items:center;padding:6px 10px}
.cls img{width:100%;max-width:150px;height:auto;aspect-ratio:468/402;object-fit:contain}

/* 途中の相談帯（チャコール） */
.mcta{background:var(--ink);color:#fff}
.mcta-in{max-width:var(--cw);margin:0 auto;padding:52px var(--gut);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center}
.mcta-en{font:italic 700 18px/1 Figtree,sans-serif;letter-spacing:.12em;color:var(--or)}
.mcta-catch{margin-top:12px;font-size:clamp(26px,2.5vw,36px);font-weight:900;line-height:1.5}
.mcta-lead{margin-top:10px;color:#cfcfcf;font-size:16px;line-height:1.9}

/* REASON：大きな番号と数字 */
.reason{padding:60px 0 64px}
.rss{max-width:var(--cw);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;counter-reset:rs}
.rs{position:relative;display:flex;flex-direction:column;padding:36px 32px 30px;background:#fff;border-radius:var(--r);border-top:3px solid var(--or)}
.rs-no{position:absolute;right:24px;top:16px;font:italic 700 64px/1 Figtree,sans-serif;color:var(--pale)}
.rs-tag{position:relative;font-size:13px;font-weight:700;color:var(--or)}
.rs h3{position:relative;margin-top:8px;font-size:22px;font-weight:900;line-height:1.5}
.rs-d{margin-top:12px;font-size:15px;line-height:1.9;color:var(--txt)}
.rs-num{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.rs-d+.rs-num{margin-top:22px}
.rs-num b{font:italic 700 44px/1 Figtree,sans-serif;color:var(--or)}
.rs-num span{font-size:14px;font-weight:700;color:var(--gray)}

/* MESSAGE：代表 */
.msg{background:var(--pale);padding:60px 0 64px}
.msg-in{max-width:1180px;margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:center}
.msg-ph{border-radius:var(--r);overflow:hidden}
.msg-ph img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 20%}
.msg-tx .fe-en{margin-bottom:12px}
.msg-catch{margin:16px 0 18px;font-size:clamp(24px,2.3vw,34px);font-weight:900;line-height:1.5}
.msg-tx>p[data-jpb]{color:var(--txt);font-size:16px;line-height:2}
.msg-tx>p[data-jpb]+p[data-jpb]{margin-top:12px}
.msg-name{margin-top:22px;display:grid;gap:2px}
.msg-name span{font-size:12px;font-weight:700;color:var(--gray)}
.msg-name b{font-size:22px;font-weight:900;letter-spacing:.12em}
.msg-name small{font:italic 600 13px/1.2 Figtree,sans-serif;letter-spacing:.08em;color:var(--or)}

/* FLOW：7つのステップを1列に（線でつなぐ） */
.flow{padding:60px 0 64px}
.fls{max-width:var(--cw);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;position:relative}
.fl{position:relative;padding:22px 16px 20px;background:#fff;border-radius:var(--r);text-align:center}
.fl:not(:last-child)::after{content:"";position:absolute;right:-12px;top:50%;width:12px;height:1px;background:var(--or)}
.fl-no{font:italic 600 11px/1 Figtree,sans-serif;letter-spacing:.14em;color:var(--or)}
.fl-no b{display:block;margin-top:4px;font-size:30px;font-weight:700}
.fl h3{margin-top:10px;font-size:16px;font-weight:900;line-height:1.45;word-break:keep-all;overflow-wrap:anywhere}
.fl p{margin-top:6px;font-size:13px;line-height:1.7;color:var(--txt);word-break:keep-all;overflow-wrap:anywhere}

/* FAQ：アコーディオン */
.faq{background:var(--pale);padding:60px 0 64px}
.faq-in{max-width:1180px;margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:280px minmax(0,1fr);gap:56px;align-items:start}
.faq-side .fe-en{margin-bottom:12px}
.faq-lead{margin-top:14px;font-size:15px;color:var(--txt)}
.fqs{display:grid;gap:10px}
.fq{background:#fff;border-radius:var(--r)}
.fq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:32px minmax(0,1fr) 20px;align-items:center;gap:14px;padding:18px 22px;font-weight:700;font-size:16px;line-height:1.6}
.fq summary::-webkit-details-marker{display:none}
.fq-q{font:italic 700 22px/1 Figtree,sans-serif;color:var(--or)}
.fq summary i{position:relative;width:16px;height:16px}
.fq summary i::before,.fq summary i::after{content:"";position:absolute;left:0;top:50%;width:16px;height:2px;background:var(--ink);transition:transform .35s var(--ease)}
.fq summary i::after{transform:rotate(90deg)}
.fq[open] summary i::after{transform:rotate(0)}
.fq-a{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;padding:0 22px 20px}
.fq-a .fq-q{color:var(--sky)}
.fq-a p{font-size:15px;line-height:1.9;color:var(--txt);border-top:1px solid var(--line);padding-top:14px}
.fq-a .fq-q{padding-top:14px}

/* RESOURCES：無料ツールとコラム */
.res{padding:60px 0 64px}
.res-in{max-width:1180px;margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.res-box{background:#fff;border-radius:var(--r);padding:28px 30px 26px}
.res-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;font-size:20px;font-weight:900;padding-bottom:14px;border-bottom:1px solid var(--line)}
.res-h span{font:italic 700 13px/1 Figtree,sans-serif;letter-spacing:.12em;color:var(--or);width:100%}
.res-h b{font:italic 700 34px/1 Figtree,sans-serif;color:var(--or);margin-left:4px}
.rts a,.rcs a{display:grid;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line);font-size:15px;font-weight:700;line-height:1.55;transition:color .3s}
.rts a{grid-template-columns:28px minmax(0,1fr) 16px}
.rt-no{font:italic 600 13px/1 Figtree,sans-serif;color:var(--gray)}
.rts .ic{width:16px;height:16px;display:block;color:var(--or)}
.rcs a{grid-template-columns:1fr}
.rc-d{font:italic 600 13px/1 Figtree,sans-serif;color:var(--gray)}
.rc-t{word-break:keep-all;overflow-wrap:anywhere}
.res-box .more{margin-top:20px}

@media (hover:hover) and (pointer:fine){
  .rts a:hover,.rcs a:hover,.fq summary:hover .fq-t{color:var(--or)}
  .pb{transition:transform .4s var(--ease)}
  .pb:hover{transform:translateY(-3px)}
}
@media (max-width:1280px){
  .fls{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .fl:nth-child(4n)::after{display:none}
}
@media (max-width:1023px){
  .pbs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mcta-in{grid-template-columns:1fr;gap:24px}
  .rss{grid-template-columns:1fr;max-width:680px}
  .msg-in{grid-template-columns:1fr;gap:32px;max-width:680px}
  .msg-ph{max-width:420px}
  .faq-in{grid-template-columns:1fr;gap:28px}
  .res-in{grid-template-columns:1fr;max-width:680px}
}
@media (max-width:767px){
  .sec-hd{text-align:left;margin-bottom:28px}
  .problem,.reason,.msg,.flow,.faq,.res{padding:40px 0 44px}
  .client{padding:40px 0 44px}
  .pbs{grid-template-columns:1fr;gap:10px}
  .pb{padding:16px 18px;gap:14px;grid-template-columns:40px minmax(0,1fr)}
  .pb .ic{width:40px;height:40px;padding:9px}
  .pb p{font-size:15px}
  .pb-ans{text-align:left;margin-top:32px}
  .pb-catch{font-size:24px}
  .pb-arrow{margin-left:0}
  .cls{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .cls li{padding:4px}
  .mcta-in{padding:40px var(--gut)}
  .mcta-catch{font-size:24px}
  .rs{padding:28px 22px 24px}
  .rs h3{font-size:19px}
  .rs-no{font-size:52px}
  .msg-catch{font-size:22px}
  .fls{grid-template-columns:1fr;gap:10px}
  .fl{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;text-align:left;padding:16px 18px}
  .fl-no{grid-row:1/span 2;align-self:center;text-align:center}
  .fl h3{margin-top:0}
  .fl p{margin-top:2px}
  .fl:not(:last-child)::after{display:block;right:auto;left:50px;top:auto;bottom:-10px;width:1px;height:10px}
  .fl:nth-child(4n)::after{display:block}
  .fq summary{grid-template-columns:26px minmax(0,1fr) 16px;gap:10px;padding:16px;font-size:15px}
  .fq-a{grid-template-columns:26px minmax(0,1fr);gap:10px;padding:0 16px 16px}
  .res-box{padding:22px 18px}
  .rts a,.rcs a{font-size:14px}
}
/* 理由の番号は見出しに重ねず、上の行に置く */
.rs-no{position:static;font:italic 700 40px/1 Figtree,sans-serif;color:var(--or);opacity:.35;margin-bottom:10px}
@media (max-width:767px){.rs-no{font-size:34px}}
.fl-no span{display:block}
.fq-t,.rc-t{word-break:keep-all;overflow-wrap:anywhere}
.fp-pager{width:min(500px,38vw)}
@media (min-width:1024px) and (max-width:1280px){.fp-pager{width:min(460px,46vw);gap:16px;padding-left:22px;padding-right:20px}.fp-cap2 .fp-l{display:none}}

/* ═════ 10/10 追加修正 ═════ */
/* FVの写真は左へスライド（次の写真が右から入り、いまの写真は左へ抜ける） */
.fv-slide>figure{opacity:1;transform:translateX(100%);transition:none;z-index:0}
.fv-slide>figure.on{transform:none;transition:transform 1.2s cubic-bezier(.77,0,.18,1);z-index:2}
.fv-slide>figure.prev{transform:translateX(-100%);transition:transform 1.2s cubic-bezier(.77,0,.18,1);z-index:1}
.fv-slide>figure:first-child.on{transition:none}
.fv-slide video{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);display:block}
@media (prefers-reduced-motion:reduce){.fv-slide>figure{transition:none!important}}

/* PROBLEM を外したので、FV → SERVICE は同じ地色のまま */
.svc{padding-top:60px}

/* CLIENT：ロゴが2段で左右逆向きに流れ続ける（触れると止まる・端はまっすぐ切る） */
.cl-rows{display:grid;gap:14px;overflow:hidden}
.cl-row{overflow:hidden}
.cl-track{display:flex;gap:14px;width:max-content;animation:clFlow 50s linear infinite}
.cl-row.rev .cl-track{animation-direction:reverse;animation-duration:56s}
.cl-rows:hover .cl-track{animation-play-state:paused}
@keyframes clFlow{to{transform:translateX(calc(-50% - 7px))}}
.cl-track li{flex:none;width:190px;height:150px;border:1px solid var(--line);border-radius:var(--r);background:#fff;display:grid;place-items:center;padding:8px 16px;transition:border-color .35s,transform .45s var(--ease)}
.cl-track img{width:100%;height:100%;object-fit:contain;transition:transform .6s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cl-track li:hover{border-color:var(--or);transform:translateY(-4px)}
  .cl-track li:hover img{transform:scale(1.06)}
}
@media (prefers-reduced-motion:reduce){.cl-track{animation:none}.cl-row{overflow-x:auto}}
@media (max-width:767px){.cl-track li{width:132px;height:108px;padding:6px 10px}.cl-track,.cl-rows{gap:10px}@keyframes clFlow{to{transform:translateX(calc(-50% - 5px))}}}

/* RESOURCES：左にツールの大きな数字と流れる名前、右にサムネイル付きのコラム6枚 */
.res-grid{max-width:var(--cw);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2.4fr);gap:24px;align-items:stretch}
.res-tool{position:relative;display:flex;flex-direction:column;background:var(--ink);color:#fff;border-radius:var(--r);padding:32px 28px 28px;overflow:hidden}
.rtl-en{font:italic 700 15px/1 Figtree,sans-serif;letter-spacing:.14em;color:var(--or)}
.rtl-num{display:flex;align-items:flex-end;gap:12px;margin-top:18px}
.rtl-num b{font:italic 700 clamp(84px,7vw,120px)/.85 Figtree,sans-serif;color:var(--or);font-variant-numeric:tabular-nums}
.rtl-num span{font-size:16px;font-weight:700;line-height:1.5;padding-bottom:6px}
.rtl-d{margin-top:18px;font-size:14px;line-height:1.9;color:#cfcfcf}
.rtl-flow{margin:22px -28px 0;overflow:hidden;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);padding:12px 0}
.rtl-track{display:flex;gap:10px;width:max-content;animation:clFlow 40s linear infinite}
.rtl-track li{flex:none;font-size:13px;font-weight:700;padding:7px 12px;border-radius:var(--r);background:rgba(255,255,255,.08);white-space:nowrap}
.rtl-btn{margin-top:auto;padding-top:24px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:700}
.rtl-btn span{flex:1;padding:14px 18px;border-radius:var(--r);background:var(--or);color:#fff;transition:background .3s}
.rtl-btn .ic{display:none}
.rcs2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 20px}
.rc a{display:block}
.rc figure{position:relative;overflow:hidden;border-radius:var(--r);background:#fff;aspect-ratio:16/10}
.rc img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.rc figure::after{content:"";position:absolute;inset:0;background:var(--or);transform:scaleX(1);transform-origin:right;transition:transform .9s cubic-bezier(.77,0,.18,1)}
.rcs2.in .rc figure::after{transform:scaleX(0)}
.rcs2 .rc:nth-child(1) figure::after{transition-delay:.05s}.rcs2 .rc:nth-child(2) figure::after{transition-delay:.17s}.rcs2 .rc:nth-child(3) figure::after{transition-delay:.29s}
.rcs2 .rc:nth-child(4) figure::after{transition-delay:.41s}.rcs2 .rc:nth-child(5) figure::after{transition-delay:.53s}.rcs2 .rc:nth-child(6) figure::after{transition-delay:.65s}
.rc-meta{display:flex;align-items:center;gap:10px;margin-top:12px}
.rc-tag{font-size:11px;font-weight:700;color:var(--or);background:#fff;padding:4px 8px;border-radius:var(--r)}
.rc .rc-d{font:italic 600 12px/1 Figtree,sans-serif;color:var(--gray)}
.rc .rc-t{margin-top:8px;font-size:15px;font-weight:700;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere;transition:color .3s}
.res-more{text-align:center;margin-top:36px}
.res-in{display:none}
@media (hover:hover) and (pointer:fine){
  .rc a:hover img{transform:scale(1.07)}
  .rc a:hover .rc-t{color:var(--or)}
  .rtl-btn:hover span{background:var(--or2)}
}
@media (prefers-reduced-motion:reduce){.rc figure::after{display:none}.rtl-track{animation:none}}
@media (max-width:1280px){.res-grid{grid-template-columns:1fr}.res-tool{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:28px}.rtl-en,.rtl-num{grid-column:1}.rtl-d,.rtl-flow,.rtl-btn{grid-column:1/-1}}
@media (max-width:1023px){.rcs2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){
  .res-tool{display:flex;padding:26px 20px 22px}
  .rtl-flow{margin:20px -20px 0}
  .rcs2{grid-template-columns:1fr;gap:20px}
  .rc .rc-t{font-size:14px}
}

/* 事業案内のアイコン：1つずつの3Dアイコン（Microsoft Fluent Emoji 3D・MITライセンス）を淡いオレンジの丸に */
.sv-3d{background:#FDF1E3;box-shadow:none;overflow:visible}
.sv-3d img{width:72%;height:72%;object-fit:contain;display:block;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
@media (hover:hover) and (pointer:fine){
  .sv a:hover .sv-3d{background:#FBE3C7;box-shadow:none}
  .sv a:hover .sv-3d img{transform:translateY(-4px) rotate(-6deg) scale(1.12)}
}
/* 無料ツールの名前を3段で左右交互に流し、パネルの中ほどを埋める */
.rtl-flows{display:grid;gap:10px;margin:22px -28px 0;padding:14px 0;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.rtl-flows .rtl-flow{margin:0;padding:0;border:0}
.rtl-flow.rev .rtl-track{animation-direction:reverse;animation-duration:46s}
.rtl-flow:nth-child(3) .rtl-track{animation-duration:52s}
@media (max-width:767px){.rtl-flows{margin:20px -20px 0}}
.rtl-flows{margin-top:auto;margin-bottom:auto}
.rtl-d{margin-bottom:22px}
.rtl-btn{margin-top:0}
@media (max-width:1280px){.rtl-flows{margin-top:0;margin-bottom:0}}
.rtl-num{margin-top:30px}
.rtl-num b{line-height:1}
/* 固定バナーのフォンくんの頭が切れないように（はみ出しを許す） */
.fbn-in{overflow:visible}

/* ═════ REASON（プロ仕様に作り直し 10/10）═════
   左：見出しと 01〜03 の目次（スクロールに合わせて光る・追従）／右：理由を大きく3つ。数字が数え上がり、左の線が上から引かれる */
.rss,.rs{display:none}
.reason{padding:72px 0 80px;background:var(--bg)}
.rs2-in{max-width:1280px;margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:72px;align-items:start}
.rs2-side{position:sticky;top:calc(var(--hd) + 48px)}
.rs2-side .fe-en{margin-bottom:12px}
.rs2-lead{margin-top:16px;font-size:16px;line-height:1.95;color:var(--txt)}
.rs2-nav{margin-top:32px;border-top:1px solid var(--line)}
.rs2-nav li{display:flex;align-items:center;gap:16px;padding:16px 4px;border-bottom:1px solid var(--line);font-weight:700;font-size:16px;color:var(--gray);cursor:pointer;transition:color .4s var(--ease),padding .4s var(--ease)}
.rs2-nav li span{font:italic 700 14px/1 Figtree,sans-serif;letter-spacing:.06em}
.rs2-nav li.on{color:var(--ink);padding-left:14px}
.rs2-nav li.on span{color:var(--or)}
.rs2-list{display:grid;gap:28px}
.rs2{position:relative;padding:40px 44px 40px 52px;background:#fff;border-radius:var(--r);overflow:hidden}
.rs2-line{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--line)}
.rs2-line::after{content:"";position:absolute;inset:0;background:var(--or);transform:scaleY(0);transform-origin:top;transition:transform 1.1s cubic-bezier(.77,0,.18,1)}
.rs2.act .rs2-line::after,.rs2.in .rs2-line::after{transform:none}
.rs2-num{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.rs2-num b{font:italic 700 clamp(84px,8vw,128px)/.95 Figtree,sans-serif;color:var(--or);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.rs2-num span{font-size:16px;font-weight:700;color:var(--gray)}
.rs2-tag{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:14px;font-weight:700;color:var(--or)}
.rs2-tag span{font:italic 700 12px/1 Figtree,sans-serif;letter-spacing:.14em;color:var(--ink);padding:6px 10px;border:1px solid var(--ink);border-radius:var(--r)}
.rs2 h3{margin-top:12px;font-size:clamp(24px,2.2vw,32px);font-weight:900;line-height:1.45}
.rs2-d{margin-top:14px;font-size:16px;line-height:2;color:var(--txt);max-width:620px}
.rs2{opacity:.45;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rs2.act{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rs2{opacity:1;transform:none}.rs2-line::after{transform:none;transition:none}}
@media (max-width:1023px){
  .rs2-in{grid-template-columns:1fr;gap:28px}
  .rs2-side{position:static}
  .rs2-nav{display:none}
  .rs2{opacity:1;transform:none}
}
@media (max-width:767px){
  .reason{padding:44px 0 48px}
  .rs2{padding:28px 22px 28px 28px}
  .rs2-num b{font-size:72px}
  .rs2 h3{font-size:22px}
  .rs2-d{font-size:15px}
}
/* 固定バナー：Macを持ったフォンくん（ChatGPTで生成・透過） */
.fbn-ch{height:104px;bottom:4px;left:22px}
@media (max-width:767px){.fbn-ch{height:80px;left:8px}}

/* ═════ 無料ツールのパネルを磨く（10/10）═════ */
.res-tool{background:radial-gradient(circle at 92% 6%,rgba(234,161,60,.28),transparent 42%),radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px) 0 0/16px 16px,var(--ink);padding:34px 30px 30px}
.rtl-num{margin-top:22px;align-items:center;gap:16px}
.rtl-num b{font-size:clamp(96px,8vw,136px);line-height:1;text-shadow:0 10px 30px rgba(234,161,60,.25)}
.rtl-num span{font-size:17px;line-height:1.5;padding:0}
.rtl-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.rtl-badges li{font-size:12px;font-weight:700;padding:6px 12px;border-radius:var(--r);border:1px solid rgba(234,161,60,.6);color:var(--or2)}
.rtl-d{margin-top:14px;margin-bottom:20px}
.rtl-flows{margin:0 -30px;margin-top:0;margin-bottom:0;padding:14px 0;gap:8px}
.rtl-track li{background:transparent;border:1px solid rgba(255,255,255,.16);display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 10px;color:#e8e8e8;font-weight:500}
.rtl-track li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--or)}
.rtl-pick{margin-top:22px}
.rtl-pick-h{font-size:12px;font-weight:700;color:#bdbdbd;letter-spacing:.08em;margin-bottom:8px}
.rtl-pick a{display:grid;grid-template-columns:28px minmax(0,1fr) 16px;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid rgba(255,255,255,.12);font-weight:700;font-size:15px;transition:color .3s,padding .35s var(--ease)}
.rp-no{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:italic 700 13px/1 Figtree,sans-serif;background:rgba(255,255,255,.1);color:var(--or)}
.rtl-pick .ic{width:16px;height:16px;display:block;color:var(--or);transition:transform .4s var(--ease)}
.rtl-btn{margin-top:auto;padding-top:24px}
.rtl-btn span{display:flex;align-items:center;justify-content:space-between;font-size:16px;padding:16px 20px}
.rtl-btn span::after{content:"→";font-family:Figtree,sans-serif;font-weight:700;transition:transform .4s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .rtl-pick a:hover{color:var(--or);padding-left:8px}
  .rtl-pick a:hover .ic{transform:translateX(4px)}
  .rtl-btn:hover span::after{transform:translateX(4px)}
  .rtl-track li:hover{border-color:var(--or)}
}
@media (max-width:1280px){.rtl-badges,.rtl-pick{grid-column:1/-1}}
@media (max-width:767px){.res-tool{padding:26px 20px 22px}.rtl-flows{margin:0 -20px}.rtl-num b{font-size:96px}}

/* フッターの背景に forwards.jp「私たちについて」の動画を薄く（10/10） */
.pf{position:relative;overflow:hidden;isolation:isolate}
.pf-bgv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.16;z-index:-1;pointer-events:none;filter:grayscale(.2)}
.pf::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(53,53,53,.55),rgba(53,53,53,.2) 40%,rgba(53,53,53,.75))}
.pf-way{background:rgba(53,53,53,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pf-form{background:var(--or)}
@media (prefers-reduced-motion:reduce){.pf-bgv{display:none}}
/* FVのスライドにフェードを足す（入る写真は薄い→濃い、抜ける写真は濃い→薄い） */
.fv-slide>figure{opacity:0}
.fv-slide>figure.on{opacity:1;transition:transform 1.2s cubic-bezier(.77,0,.18,1),opacity 1.2s ease}
.fv-slide>figure.prev{opacity:0;transition:transform 1.2s cubic-bezier(.77,0,.18,1),opacity 1s ease}
.fv-slide>figure:first-child.on{transition:none}
.fv-slide>figure:first-child.on{transition:transform 1.2s cubic-bezier(.77,0,.18,1),opacity 1.2s ease}

/* ───── ヘッダー右上：多摩地域（日野市）のきょうの天気（Open-Meteo・10/10）───── */
.wx{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.7);line-height:1.15;white-space:nowrap;opacity:0;transition:opacity .5s,border-color .3s}
.wx.wx-on{opacity:1}
.wx.wx-off{display:none}
.wx-ic{width:34px;height:34px;display:block}
.wx-tx small,.wx-p small{display:block;font-size:10px;font-weight:700;color:var(--gray)}
.wx-t{font:italic 700 15px/1.1 Figtree,sans-serif}
.wx-t b{color:var(--or);font-size:17px}
.wx-t i{margin:0 3px;color:var(--gray);font-style:normal}
.wx-min{color:var(--sky)}
.wx-p{padding-left:10px;margin-left:2px;border-left:1px solid var(--line);font:italic 700 15px/1.1 Figtree,sans-serif}
@media (hover:hover) and (pointer:fine){.wx:hover{border-color:var(--or)}}
@media (max-width:1366px){.wx-p{display:none}}
@media (max-width:1180px){.wx{display:none}}
/* 資料カードの行間が広がらないように（左のパネルが高くても上下にそろえる） */
.rcs2{align-content:space-between}
/* PICK UP のカード：枠線をやめ、写真を左端いっぱいに（白い面だけで見せる） 10/10 */
.pk-c{border:0;padding:0;overflow:hidden;gap:0 16px;grid-template-columns:46% minmax(0,1fr);background:#fff;border-radius:var(--r)}
.pk-c figure{border-radius:0;aspect-ratio:16/10}
.pk-tx{padding:10px 14px 10px 0}
@media (hover:hover) and (pointer:fine){.pk-c:hover{border-color:transparent}}

/* ═════ WORKS（プロ仕様・10/10）：小さめのサムネを4列で16件、種類で絞り込み、ホバーで帯がせり上がる ═════ */
.wks,.wk-foot{display:none}
.wk2-box{max-width:var(--cw);margin:0 auto;padding:0 var(--gut)}
.wk2-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 4px;margin-bottom:32px;border-bottom:1px solid var(--line)}
.wk2-tabs button{position:relative;display:inline-flex;align-items:baseline;gap:6px;padding:12px 14px;font-weight:700;font-size:14px;color:var(--gray);transition:color .3s}
.wk2-tabs button small{font:italic 700 12px/1 Figtree,sans-serif;color:var(--or)}
.wk2-tabs button::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.wk2-tabs button.on{color:var(--ink)}
.wk2-tabs button.on::after{transform:none}
.wk2s{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 22px}
.wk2{transition:opacity .45s var(--ease),transform .55s var(--ease)}
.wk2.fl-out{opacity:0;transform:translateY(14px) scale(.97)}
.wk2.fl-in{opacity:1;transform:none}
.wk2[hidden]{display:none}
.wk2 a{display:block}
.wk2 figure{position:relative;overflow:hidden;border-radius:var(--r);background:#fff;aspect-ratio:16/10}
.wk2 img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.wk2-ov{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--ink);color:#fff;font-weight:700;font-size:14px;transform:translateY(100%);transition:transform .45s var(--ease)}
.wk2-ov .ic{width:16px;height:16px;display:block;color:var(--or)}
.wk2-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:12px}
.wk2-tags span{font-size:11px;font-weight:700;color:var(--or);background:#fff;padding:4px 8px;border-radius:var(--r)}
.wk2 h3{margin-top:8px;font-size:15px;font-weight:900;line-height:1.55;word-break:keep-all;overflow-wrap:anywhere;transition:color .3s}
.wk2-foot{text-align:center;margin-top:40px}
@media (hover:hover) and (pointer:fine){
  .wk2 a:hover img{transform:scale(1.08)}
  .wk2 a:hover .wk2-ov{transform:none}
  .wk2 a:hover h3{color:var(--or)}
  .wk2-tabs button:hover{color:var(--ink)}
}
@media (max-width:1280px){.wk2s{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1023px){.wk2s{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}}
@media (max-width:767px){
  .wk2-tabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:0 calc(var(--gut) * -1) 24px;padding:0 var(--gut);scrollbar-width:none}
  .wk2-tabs::-webkit-scrollbar{display:none}
  .wk2-tabs button{white-space:nowrap;padding:10px 10px}
  .wk2s{gap:20px 12px}
  .wk2 h3{font-size:13px}
  .wk2-tags span{font-size:10px;padding:3px 6px}
}
/* 16件は 0.05秒刻みで出す（共通の0.42秒刻みだと最後が7秒後になる） */
.wk2s>.wk2.stg{transition-delay:calc(var(--i,0) * .05s)!important}
.wk2s>.wk2.fl-out,.wk2s>.wk2.fl-in{transition-delay:0s!important}
.pf-credit{width:100%;font-size:11px;color:#8a8a8a;line-height:1.6}
.pf-credit a{text-decoration:underline}
.pk-c{width:360px;grid-template-columns:42% minmax(0,1fr)}
@media (max-width:1023px){.pk-c{width:300px}}
@media (max-width:767px){.pk-c{width:270px}}
@media (max-width:767px){.pk-c{width:290px;grid-template-columns:40% minmax(0,1fr);gap:0 12px}.pk-t{font-size:13px}}
@media (max-width:767px){.pk-t{white-space:normal;word-break:keep-all;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35}}

/* ═════ FLOW（見てわかる流れに・10/10）═════
   7つの3Dアイコンを1本の線でつなぎ、画面に入ると線が左からオレンジに伸び、アイコンが順に弾む。案内役はハッシー先生（1回だけ） */
.fls{display:none}
.fl2-wrap{max-width:var(--cw);margin:0 auto;padding:0 var(--gut)}
.fl2-guide{display:flex;align-items:flex-end;gap:14px;margin:0 0 8px 8px}
.fl2-guide img{width:96px;height:auto;display:block}
.fl2-bubble{position:relative;margin-bottom:26px;padding:12px 18px;background:#fff;border-radius:var(--r);font-weight:700;font-size:15px;line-height:1.6}
.fl2-bubble::before{content:"";position:absolute;left:-8px;bottom:14px;border:8px solid transparent;border-left:0;border-right-color:#fff}
.fl2s{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;padding-top:4px}
.fl2s::before,.fl2s::after{content:"";position:absolute;left:calc(100% / 14);right:calc(100% / 14);top:46px;height:3px;border-radius:2px;background:var(--line)}
.fl2s::after{background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform 2.6s cubic-bezier(.65,0,.35,1) .2s}
.fl2s.in::after{transform:none}
.fl2{position:relative;z-index:1;text-align:center}
.fl2-ic{position:relative;width:92px;height:92px;margin:0 auto;border-radius:50%;background:#fff;box-shadow:0 0 0 6px var(--bg);display:grid;place-items:center;transform:scale(.6);opacity:0;transition:transform .6s cubic-bezier(.34,1.56,.64,1),opacity .4s ease;transition-delay:calc(.25s + var(--i) * .36s)}
.fl2s.in .fl2-ic{transform:none;opacity:1}
.fl2-ic img{width:58%;height:58%;object-fit:contain;display:block;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.fl2-free{position:absolute;left:50%;top:-12px;translate:-50% 0;white-space:nowrap;font-size:11px;font-weight:700;color:#fff;background:var(--or);padding:3px 8px;border-radius:var(--r)}
.fl2-no{margin-top:16px;font:italic 600 12px/1 Figtree,sans-serif;letter-spacing:.12em;color:var(--or)}
.fl2-no b{font-size:20px;font-weight:700}
.fl2 h3{margin-top:8px;font-size:16px;font-weight:900;line-height:1.45;word-break:keep-all;overflow-wrap:anywhere}
.fl2-d{margin-top:6px;font-size:13px;line-height:1.75;color:var(--txt);word-break:keep-all;overflow-wrap:anywhere}
@media (hover:hover) and (pointer:fine){.fl2:hover .fl2-ic img{transform:translateY(-4px) scale(1.12) rotate(-6deg)}}
@media (prefers-reduced-motion:reduce){.fl2s::after{transform:none;transition:none}.fl2-ic{transform:none;opacity:1;transition:none}}
@media (max-width:1023px){
  .fl2s{grid-template-columns:1fr;gap:0;max-width:560px;margin:0 auto}
  .fl2s::before,.fl2s::after{left:45px;right:auto;top:46px;bottom:46px;width:3px;height:auto}
  .fl2s::after{transform:scaleY(0);transform-origin:top}
  .fl2s.in::after{transform:none}
  .fl2{display:grid;grid-template-columns:92px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:18px;text-align:left;padding-bottom:22px}
  .fl2-ic{grid-row:1/span 3}
  .fl2-no{margin-top:14px}
  .fl2 h3{margin-top:4px}
  .fl2-guide{max-width:560px;margin:0 auto 12px}
}
@media (max-width:767px){
  .fl2-guide img{width:76px}
  .fl2-bubble{font-size:14px;margin-bottom:18px}
  .fl2{grid-template-columns:72px minmax(0,1fr);column-gap:14px}
  .fl2-ic{width:72px;height:72px}
  .fl2s::before,.fl2s::after{left:35px;top:36px;bottom:36px}
}
.fl2-guide{margin-bottom:28px}
@media (max-width:1023px){.fl2-guide{margin-bottom:26px}}

/* ═════ 10/10 まとめて修正 ═════ */
/* FV左：うっすらグラデの太陽（コピーの奥でゆっくり呼吸） */
.fv-sun{position:absolute;z-index:1;left:-160px;top:-140px;width:min(760px,62vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,206,120,.55) 0%,rgba(242,161,84,.32) 28%,rgba(242,161,84,.12) 52%,rgba(242,161,84,0) 70%);animation:sunBreath 9s ease-in-out infinite}
.fv-sun::after{content:"";position:absolute;inset:18%;border-radius:50%;background:repeating-conic-gradient(rgba(242,161,84,.10) 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(circle,transparent 30%,#000 32%,transparent 70%);mask:radial-gradient(circle,transparent 30%,#000 32%,transparent 70%);animation:sunSpin 80s linear infinite}
@keyframes sunBreath{50%{transform:scale(1.06);opacity:.85}}
@keyframes sunSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.fv-sun,.fv-sun::after{animation:none}}
@media (max-width:1023px){.fv-sun{left:-140px;top:auto;bottom:-80px;width:520px}}

/* 天気カード（写真の右上・大きめ） */
.wx{display:none!important}
.wx2{position:absolute;z-index:5;right:24px;top:20px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px 12px 12px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--r);min-width:330px;opacity:0;transform:translateY(-8px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.wx2.wx-on{opacity:1;transform:none}
.wx2.wx-off{display:none}
.wx2-now{width:68px;height:68px}
.wx2-now img,.wx2-next img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 4px 4px rgba(0,0,0,.12))}
.wx2-main{display:grid;gap:2px;min-width:0}
.wx2-place{font-size:11px;font-weight:700;color:var(--gray)}
.wx2-temp{display:flex;align-items:baseline;gap:2px;line-height:1}
.wx2-temp b{font:italic 700 40px/1 Figtree,sans-serif;color:var(--or)}
.wx2-temp small{font-size:15px;font-weight:700}
.wx2-sub{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:12px;font-weight:700;color:var(--gray)}
.wx2-hi{color:#E2643A}.wx2-lo{color:var(--sky)}
.wx2-say{margin-top:4px;padding-top:4px;border-top:1px dashed var(--line);font-size:12.5px;font-weight:700;color:var(--ink)}
.wx2-next{display:grid;justify-items:center;gap:1px;padding:8px 10px;border-radius:var(--r);background:#EEF6FB;line-height:1.1}
.wx2-next small{font-size:11px;font-weight:700;color:var(--sky)}
.wx2-next img{width:36px;height:36px}
.wx2-next b{font:italic 700 14px/1 Figtree,sans-serif;color:#E2643A}
.wx2-next em{font:italic 600 12px/1 Figtree,sans-serif;color:var(--sky)}
@media (hover:hover) and (pointer:fine){.wx2:hover{background:#fff}}
@media (max-width:1023px){.wx2{top:12px;right:12px;min-width:0;grid-template-columns:auto auto;padding:8px 10px;gap:8px}.wx2-next,.wx2-say,.wx2-sub{display:none}.wx2-now{width:44px;height:44px}.wx2-temp b{font-size:28px}}

/* 途中の相談帯：forwards.jp の橋の写真を薄く */
.mcta{background:linear-gradient(rgba(53,53,53,.86),rgba(53,53,53,.86)),url(../img/fj_pres_bg.webp) center 60%/cover no-repeat}

/* 無料ツールのパネルを少し短く（コラムの1段目と2段目が離れないように） */
.res-tool{padding:28px 26px 24px}
.rtl-num{margin-top:22px}
.rtl-badges{margin-top:14px;margin-bottom:18px}
.rtl-flows{padding:10px 0}
.rtl-pick{margin-top:16px}
.rtl-pick a{padding:9px 2px;font-size:14px}
.rtl-btn{padding-top:18px}
.rtl-btn span{padding:13px 18px}
.rcs2{align-content:start}
/* 固定バナー：ノートパソコンを見せてウインクするフォンくん（足もとはバナーの下端にそろえる） */
.fbn-ch{height:112px;bottom:0;left:18px}
.fbn-in{padding-left:128px}
@media (max-width:767px){.fbn-ch{height:84px;left:6px}.fbn-in{padding-left:84px}}

/* 英字の見出し：左から長めのフェードでシュッと（出だしは速く、最後はゆっくり止まる）10/10 */
.en-fx{opacity:0;transform:translateX(-72px);clip-path:inset(-10% 100% -10% 0);filter:blur(6px);will-change:transform,opacity,clip-path}
.en-fx.en-in{opacity:1;transform:none;clip-path:inset(-10% -4% -10% 0);filter:none;
  transition:transform 1.6s cubic-bezier(.16,1,.3,1),opacity 1.8s cubic-bezier(.33,1,.68,1),clip-path 1.3s cubic-bezier(.16,1,.3,1),filter 1.4s ease}
@media (prefers-reduced-motion:reduce){.en-fx{opacity:1;transform:none;clip-path:none;filter:none}}

/* 天気カード：スタイリッシュに（背景が70％透ける暗めのガラス・白い文字・細い区切り線）10/10 */
.wx2{background:rgba(40,40,40,.3);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border:1px solid rgba(255,255,255,.28);color:#fff;gap:14px;padding:12px 16px 12px 12px;min-width:0}
.wx2-now{width:56px;height:56px}
.wx2-place{color:rgba(255,255,255,.8);font:600 10px/1 Figtree,"Noto Sans JP",sans-serif;letter-spacing:.14em}
.wx2-temp b{color:#fff;font-weight:600;font-size:38px;letter-spacing:-.01em}
.wx2-temp small{color:rgba(255,255,255,.85);font-weight:500}
.wx2-sub{color:rgba(255,255,255,.85);font-weight:500;gap:2px 10px}
.wx2-hi,.wx2-lo{color:#fff}
.wx2-say{border-top:1px solid rgba(255,255,255,.25);color:#fff;font-weight:500;font-size:12px}
.wx2-next{background:transparent;border-left:1px solid rgba(255,255,255,.25);border-radius:0;padding:2px 2px 2px 14px}
.wx2-next small{color:rgba(255,255,255,.8);font-weight:500;letter-spacing:.1em}
.wx2-next b{color:#fff;font-weight:600}
.wx2-next em{color:rgba(255,255,255,.75)}
.wx2,.wx2 *{text-shadow:0 1px 6px rgba(0,0,0,.18)}
@media (hover:hover) and (pointer:fine){.wx2:hover{background:rgba(40,40,40,.42)}}
/* 流れ：ハッシー先生を外したので、見出しの下に詰めて並べる（「相談無料」の札の分だけ上をあける） */
.flow .sec-hd{margin-bottom:36px}
.fl2s{padding-top:16px}
@media (min-width:1024px){.fl2s::before,.fl2s::after{top:60px}}
@media (max-width:1023px){.fl2s{padding-top:12px}.fl2s::before,.fl2s::after{top:58px}}
@media (max-width:767px){.fl2s::before,.fl2s::after{top:48px}}

/* ═════════════ 下層ページ（10/10）═════════════ */
/* オープニング：チャコールの地にロゴが組み上がる（トップのみ・1回の訪問で1度） */
.op{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#2E2E2E;transition:opacity .8s ease,visibility 0s .8s}
html.op-out .op{opacity:0;visibility:hidden}
html.op-on body{overflow:hidden}
.op-logo{width:min(220px,46vw);height:auto;overflow:visible}
.op-logo .op-g:nth-of-type(1){transform-origin:30% 25%;animation:opMark 1.1s cubic-bezier(.16,1,.3,1) .15s both}
.op-logo .op-in{animation:opIn .9s cubic-bezier(.16,1,.3,1) .55s both}
.op-logo .op-g:nth-of-type(2){animation:opTx .9s cubic-bezier(.16,1,.3,1) .9s both}
.op-logo .op-g:nth-of-type(3){animation:opTx .9s cubic-bezier(.16,1,.3,1) 1.1s both}
.op-line{position:absolute;left:50%;top:calc(50% + min(130px,28vw));width:min(220px,46vw);height:2px;translate:-50% 0;background:rgba(255,255,255,.12);overflow:hidden}
.op-line::after{content:"";position:absolute;inset:0;background:#EAA13C;transform:scaleX(0);transform-origin:left;animation:opBar 1.9s cubic-bezier(.65,0,.35,1) .2s forwards}
@keyframes opMark{from{opacity:0;transform:translateX(-60px) scale(.9)}to{opacity:1;transform:none}}
@keyframes opIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes opTx{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes opBar{to{transform:none}}

/* ページの見出し（パンくず・英字・h1・リード・右に絵） */
.phero{position:relative;padding:56px 0 52px;background:linear-gradient(180deg,var(--bg),var(--pale));overflow:hidden}
.phero-in{max-width:var(--cw);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:center}
.bc ol{display:flex;flex-wrap:wrap;gap:4px 0;font-size:12px;color:var(--gray);margin-bottom:22px}
.bc li+li::before{content:"/";margin:0 8px;color:var(--line)}
.bc a{text-decoration:underline;text-underline-offset:3px}
.phero .fe-en{margin-bottom:10px}
.phero-h{font-size:clamp(32px,3.6vw,52px);font-weight:900;line-height:1.3;letter-spacing:.04em}
.phero-lead{margin-top:16px;font-size:16px;line-height:2;color:var(--txt);max-width:640px}
.phero-vis{position:relative;min-height:220px;display:grid;place-items:center}
.phero-ic{width:150px;height:150px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 12px rgba(234,161,60,.08);animation:phFloat 5s ease-in-out infinite}
.phero-ic img{width:60%;height:60%;object-fit:contain}
.phero-ic.big{width:170px;height:170px;position:relative;z-index:2}
.phero-th{position:absolute;width:44%;border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(53,53,53,.10)}
.phero-th img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.phero-th.t0{left:0;top:6%;rotate:-4deg}
.phero-th.t1{right:0;bottom:4%;rotate:3deg}
.phero-num{display:flex;align-items:baseline;gap:10px}
.phero-num b{font:italic 700 clamp(90px,9vw,150px)/1 Figtree,sans-serif;color:var(--or)}
.phero-num span{font-size:16px;font-weight:700}
.phero-chara{width:200px;height:auto}
.phero-pils{display:grid;gap:10px;width:100%;max-width:360px}
.phero-pils li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;padding:14px 16px;background:#fff;border-radius:var(--r)}
.phero-pils span{font:italic 700 20px/1 Figtree,sans-serif;color:var(--or)}
.phero-pils b{font-size:17px}
.phero-pils small{font:italic 600 11px/1 Figtree,sans-serif;letter-spacing:.12em;color:var(--gray)}
@keyframes phFloat{50%{transform:translateY(-8px)}}
.sec-hd.is-left{text-align:left;margin-left:0;padding:0;max-width:none}
.sub section{scroll-margin-top:100px}

/* 私たちについて */
.ab-hero{position:relative;min-height:min(78vh,720px);display:flex;align-items:center;overflow:hidden;background:#1f1f1f;color:#fff}
.ab-hero-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.ab-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(30,30,30,.75),rgba(30,30,30,.15))}
.ab-hero-in{position:relative;z-index:2;max-width:var(--cw);width:100%;margin:0 auto;padding:60px var(--gut)}
.ab-hero .bc ol{color:rgba(255,255,255,.75)}
.ab-hero-h{font-size:clamp(34px,4.4vw,64px);font-weight:900;line-height:1.35;letter-spacing:.04em;margin-top:8px}
.ab-hero-h em{font-style:normal;color:var(--or)}
.ab-hero-lead{margin-top:18px;max-width:620px;font-size:16px;line-height:2;color:rgba(255,255,255,.88)}
.ab-hero .scroll{color:#fff}
.ab-mission{padding:72px 0}
.ab-mission-in{max-width:1280px;margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:start}
.ab-big{margin-top:22px;font-size:clamp(30px,3.4vw,50px);font-weight:900;line-height:1.45}
.ab-or{color:var(--or)}
.ab-mission-tx p{font-size:16px;line-height:2.05;color:var(--txt)}
.ab-mission-tx p+p{margin-top:14px}
.ab-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px}
.ab-3 li{padding:18px 16px;background:#fff;border-radius:var(--r);border-top:3px solid var(--or)}
.ab-3 b{display:block;font-size:20px;font-weight:900}
.ab-3 span{font-size:13px;color:var(--gray)}
.ab-str{padding:64px 0;background:var(--pale)}
.ab-sts{max-width:var(--cw);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.ab-st{background:#fff;border-radius:var(--r);padding:28px 24px}
.ab-st-ic{width:64px;height:64px;border-radius:50%;background:#FDF1E3;display:grid;place-items:center}
.ab-st-ic img{width:64%;height:64%;object-fit:contain}
.ab-st-tag{margin-top:16px;font-size:13px;font-weight:700;color:var(--or)}
.ab-st h3{margin-top:6px;font-size:19px;font-weight:900;line-height:1.5}
.ab-st p:last-child{margin-top:10px;font-size:14px;line-height:1.9;color:var(--txt)}
.ab-logo{padding:72px 0}
.ab-logo-in{max-width:1280px;margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.ab-logo-vis{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end;padding:28px;background:#fff;border-radius:var(--r)}
.ab-logo-vis img{width:100%;height:auto;display:block}
.ab-logo-tx p{font-size:16px;line-height:2.05;color:var(--txt);margin-top:14px}
.ab-msg{padding:72px 0;background:var(--pale)}
.ab-msg-in{max-width:1180px;margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:center}
.ab-msg-ph{border-radius:var(--r);overflow:hidden}
.ab-msg-ph img{width:100%;height:auto;display:block}
.ab-msg-catch{margin:20px 0 14px;font-size:clamp(24px,2.4vw,34px);font-weight:900;line-height:1.5}
.ab-msg-tx>p[data-jpb]{font-size:16px;line-height:2;color:var(--txt)}
.ab-msg-tx>p[data-jpb]+p[data-jpb]{margin-top:12px}
.ab-msg-name{margin-top:22px;display:grid;justify-items:start;gap:4px}
.ab-msg-name span{font-size:12px;font-weight:700;color:var(--gray)}
.ab-sign{width:200px;height:auto;filter:invert(1) brightness(.25)}
.ab-msg-name small{font:italic 600 13px/1.2 Figtree,sans-serif;letter-spacing:.08em;color:var(--or)}
.ab-career{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.ab-career li{font-size:13px;font-weight:700;padding:7px 12px;background:#fff;border-radius:var(--r)}
.ab-roots{padding:72px 0}
.rts2{max-width:var(--cw);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;counter-reset:rt}
.rt{position:relative}
.rt-no{font:italic 700 34px/1 Figtree,sans-serif;color:var(--or)}
.rt figure{margin-top:10px;border-radius:var(--r);overflow:hidden}
.rt img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.rt figcaption{padding:8px 2px 0;font-size:12px;font-weight:700;color:var(--gray)}
.rt p{margin-top:10px;font-size:14px;line-height:1.95;color:var(--txt)}
.ab-roots-end{max-width:860px;margin:40px auto 0;padding:0 var(--gut);text-align:center;font-size:17px;font-weight:700;line-height:2}
.ab-team{padding:72px 0;background:var(--pale)}
.tms{max-width:var(--cw);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.tm{background:#fff;border-radius:var(--r);padding:16px 16px 22px}
.tm figure{border-radius:var(--r);overflow:hidden}
.tm img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.tm-role{margin-top:14px;font-size:12px;font-weight:700;color:var(--or)}
.tm h3{margin-top:4px;font-size:20px;font-weight:900;letter-spacing:.08em}
.tm-en{font:italic 600 12px/1.2 Figtree,sans-serif;color:var(--gray);letter-spacing:.06em}
.tm-d{margin-top:10px;font-size:13px;line-height:1.85;color:var(--txt)}
.tm-home{margin-top:8px;font-size:12px;color:var(--gray)}

/* 会社概要 */
.co{padding:56px 0 72px}
.co-in{max-width:1180px;margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:start}
.co-tb{width:100%;border-collapse:collapse;border-top:1px solid var(--line)}
.co-tb th,.co-tb td{padding:18px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:15px;line-height:1.9}
.co-tb th{width:30%;font-weight:700;color:var(--gray)}
.co-tb a{text-decoration:underline;text-underline-offset:3px}
.co-list{display:grid;gap:2px}
.co-map iframe{width:100%;aspect-ratio:4/3;border:0;border-radius:var(--r);display:block;background:var(--pale)}
.co-acc{margin-top:10px;font-size:14px;color:var(--txt)}

/* 事業案内トップ */
.pil-nav{position:sticky;top:var(--hd);z-index:20;background:rgba(249,249,249,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.pil-nav ul{max-width:var(--cw);margin:0 auto;padding:0 var(--gut);display:flex;gap:4px}
.pil-nav a{display:flex;align-items:baseline;gap:8px;padding:14px 16px;font-weight:700;font-size:15px}
.pil-nav span{font:italic 700 13px/1 Figtree,sans-serif;color:var(--or)}
.pil{padding:64px 0}
.pil:nth-of-type(even){background:var(--pale)}
.pil-in{max-width:var(--cw);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,2fr);gap:48px;align-items:start}
.pil-hd{position:sticky;top:calc(var(--hd) + 80px)}
.pil-no{font:italic 700 64px/1 Figtree,sans-serif;color:var(--or);opacity:.3}
.pil-hd .fe-en{margin-top:8px;margin-bottom:6px}
.pil-h{font-size:30px;font-weight:900}
.pil-c{margin-top:10px;font-size:17px;font-weight:700}
.pil-lead{margin-top:10px;font-size:15px;line-height:1.95;color:var(--txt)}
.svc2s{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.svc2 a{position:relative;display:flex;flex-direction:column;height:100%;padding:26px 26px 22px;background:#fff;border-radius:var(--r);transition:transform .45s var(--ease)}
.pil:nth-of-type(even) .svc2 a{background:#fff}
.svc2-ic{width:62px;height:62px;border-radius:50%;background:#FDF1E3;display:grid;place-items:center}
.svc2-ic img{width:66%;height:66%;object-fit:contain;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.svc2-en{margin-top:16px;font:italic 700 12px/1 Figtree,sans-serif;letter-spacing:.14em;color:var(--or)}
.svc2 h3{margin-top:6px;font-size:21px;font-weight:900;line-height:1.45}
.svc2-c{margin-top:6px;font-size:15px;font-weight:700;color:var(--txt)}
.svc2-items{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;margin-bottom:16px}
.svc2-items li{font-size:12px;font-weight:700;padding:5px 9px;border-radius:var(--r);background:var(--pale)}
.svc2-more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
.svc2-more .ic{width:16px;height:16px;color:var(--or);transition:transform .4s var(--ease)}
.combo{padding:64px 0}
.cbs{max-width:var(--cw);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cb{background:#fff;border-radius:var(--r);padding:26px}
.cb-h{font-size:19px;font-weight:900}
.cb-sv{display:grid;gap:8px;margin-top:14px}
.cb-sv a{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;padding:8px 10px;border-radius:var(--r);background:var(--pale);transition:color .3s}
.cb-sv img{width:30px;height:30px}
.cb-d{margin-top:14px;font-size:14px;line-height:1.9;color:var(--txt)}

/* 事業の詳細 */
.sd-in{max-width:1180px;margin:0 auto;padding:0 var(--gut)}
.sd-wr{padding:48px 0}
.sd-catch{font-size:clamp(24px,2.6vw,36px);font-weight:900;line-height:1.5}
.sd-catch span{display:inline-block;margin-right:12px;font-size:13px;font-weight:700;color:#fff;background:var(--or);padding:4px 10px;border-radius:var(--r);vertical-align:middle}
.sd-wr-box{margin-top:24px;padding:24px 28px;background:#fff;border-radius:var(--r)}
.sd-wr-h{font-weight:900;font-size:17px}
.sd-wrs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.sd-wrs li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;align-items:start;font-size:15px;font-weight:700;line-height:1.7}
.sd-wrs .ic{width:22px;height:22px;color:var(--or);margin-top:2px}
.sd-items,.sd-flow,.sd-with{padding:56px 0}
.sd-str,.sd-works{padding:56px 0;background:var(--pale)}
.its{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.it{padding:24px 22px;background:#fff;border-radius:var(--r);border-top:3px solid var(--or)}
.it-no{font:italic 700 14px/1 Figtree,sans-serif;color:var(--or)}
.it h3{margin-top:8px;font-size:18px;font-weight:900;line-height:1.5}
.it p{margin-top:8px;font-size:14px;line-height:1.9;color:var(--txt)}
.sgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sg{padding:28px 24px;background:#fff;border-radius:var(--r)}
.sg-no{font:italic 700 13px/1 Figtree,sans-serif;letter-spacing:.14em;color:var(--or)}
.sg-sub{margin-top:12px;font-size:13px;font-weight:700;color:var(--gray)}
.sg h3{margin-top:2px;font-size:22px;font-weight:900}
.sg p:last-child{margin-top:10px;font-size:14px;line-height:1.9;color:var(--txt)}
.sd-voice,.sd-ach{padding:56px 0}
.sd-voice blockquote{margin-top:4px;padding:28px 32px;background:#fff;border-left:4px solid var(--or);border-radius:var(--r)}
.vc-h{font-size:22px;font-weight:900;line-height:1.5}
.sd-voice blockquote p:not(.vc-h){margin-top:12px;font-size:15px;line-height:2;color:var(--txt)}
.sd-voice cite{display:block;margin-top:14px;font-style:normal;font-weight:700;font-size:14px;color:var(--or)}
.sd-ach ul{display:flex;flex-wrap:wrap;gap:10px}
.sd-ach li{padding:12px 18px;background:#fff;border-radius:var(--r);font-weight:700}
.sfs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;counter-reset:sf}
.sfs li{position:relative;padding:18px 14px;background:#fff;border-radius:var(--r);text-align:center}
.sfs li:not(:last-child)::after{content:"";position:absolute;right:-8px;top:50%;width:8px;height:2px;background:var(--or)}
.sf-no{display:block;font:italic 700 12px/1 Figtree,sans-serif;letter-spacing:.1em;color:var(--or)}
.sfs b{display:block;margin-top:8px;font-size:15px;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
.sd-works .wk2s{grid-template-columns:repeat(4,minmax(0,1fr))}
.wths{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.wths a{display:grid;grid-template-columns:44px minmax(0,1fr) 16px;align-items:center;gap:12px;padding:16px;background:#fff;border-radius:var(--r);font-weight:700;font-size:15px;line-height:1.4}
.wths img{width:44px;height:44px}
.wths small{display:block;font:italic 600 11px/1.2 Figtree,sans-serif;letter-spacing:.1em;color:var(--or)}
.wths .ic{width:16px;height:16px;color:var(--or)}
.pcta{margin-top:0}

/* 実績一覧・お知らせ・コラム・ツール */
.wl{padding:48px 0 64px}
.wl-more{text-align:center;margin-top:36px}
.wl-btn{padding:14px 40px;border-radius:var(--r);background:var(--ink);color:#fff;font-weight:700;transition:background .3s}
.wl-more[hidden]{display:none}
.wk2.over{display:none}
.nl{padding:48px 0 64px}
.nl-in{max-width:1080px;margin:0 auto;padding:0 var(--gut)}
.nls{border-top:1px solid var(--line)}
.nls a{display:grid;grid-template-columns:160px 110px minmax(0,1fr) 18px;align-items:center;gap:20px;padding:16px 4px;border-bottom:1px solid var(--line)}
.nls figure{border-radius:var(--r);overflow:hidden;background:#fff}
.nls img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;transition:transform .9s var(--ease)}
.nl-d{font:italic 600 14px/1 Figtree,sans-serif;color:var(--gray)}
.nl-t{font-weight:700;font-size:16px;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere;transition:color .3s}
.nls .ic{width:18px;height:18px;color:var(--or)}
.cl{padding:48px 0 64px}
.cl-in{max-width:var(--cw);margin:0 auto;padding:0 var(--gut)}
.cl-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.cl-grid .rc figure::after{display:none}
.tls-s{padding:48px 0 64px}
.tls-in{max-width:var(--cw);margin:0 auto;padding:0 var(--gut)}
.tls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.tl a{position:relative;display:flex;flex-direction:column;height:100%;padding:24px 22px 20px;background:#fff;border-radius:var(--r);transition:transform .45s var(--ease)}
.tl-no{position:absolute;right:18px;top:18px;font:italic 700 13px/1 Figtree,sans-serif;color:var(--gray)}
.tl-en{font:italic 700 12px/1 Figtree,sans-serif;letter-spacing:.12em;color:var(--or)}
.tl h3{margin-top:8px;font-size:17px;font-weight:900;line-height:1.5}
.tl-d{margin-top:8px;margin-bottom:14px;font-size:13px;line-height:1.85;color:var(--txt)}
.tl-go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px}
.tl-go .ic{width:16px;height:16px;color:var(--or);transition:transform .4s var(--ease)}

/* お問い合わせ */
.ct{padding:48px 0 72px}
.ct-in{max-width:1180px;margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px;align-items:start}
.ct-form{background:#fff;border-radius:var(--r);padding:32px}
.ct-note{font-size:13px;font-weight:700;color:#C2410C;background:#FFF3E8;padding:10px 14px;border-radius:var(--r);margin-bottom:20px}
.fm{display:grid;gap:8px;margin-bottom:20px;border:0;padding:0}
.fm label,.fm legend{font-weight:700;font-size:15px}
.fm em{font-style:normal;margin-left:8px;font-size:11px;color:#fff;background:var(--or);padding:2px 6px;border-radius:var(--r);vertical-align:2px}
.fm input:not([type=checkbox]),.fm textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:var(--r);font:inherit;font-size:16px;background:var(--bg)}
.fm input:focus,.fm textarea:focus{outline:2px solid var(--or);outline-offset:1px;background:#fff}
.ct-kinds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.ct-kinds label{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);font-weight:500;font-size:14px;cursor:pointer}
.ct-kinds input,.fm-ag input{width:18px;height:18px;accent-color:var(--or)}
.fm-ag label{display:flex;align-items:center;gap:8px;font-weight:500}
.fm-ag a{text-decoration:underline;color:var(--or)}
.ct-send{display:inline-flex;align-items:center;gap:12px;padding:16px 28px;border-radius:var(--r);background:var(--or);color:#fff;font-weight:700;font-size:16px}
.ct-send .ic{width:18px;height:18px}
.ct-send:disabled{opacity:.5}
.ct-done{margin-top:14px;font-weight:700;color:var(--or)}
.ct-side{display:grid;gap:14px}
.ct-box{background:#fff;border-radius:var(--r);padding:22px}
.ct-bh{font-size:13px;font-weight:700;color:var(--gray);margin-bottom:6px}
.ct-tel{display:flex;align-items:center;gap:8px;font:italic 700 26px/1.2 Figtree,sans-serif}
.ct-tel .ic{width:22px;height:22px;color:var(--or)}
.ct-box p:not(.ct-bh){font-size:13px;color:var(--txt)}
.ct-box a[href^=mailto]{font-weight:700;text-decoration:underline}
.ct-steps{display:grid;gap:6px;counter-reset:cs;font-size:14px}
.ct-steps li{counter-increment:cs;display:flex;gap:8px}
.ct-steps li::before{content:counter(cs);flex:none;width:22px;height:22px;border-radius:50%;background:var(--pale);display:grid;place-items:center;font:italic 700 12px/1 Figtree,sans-serif;color:var(--or)}

@media (hover:hover) and (pointer:fine){
  .svc2 a:hover,.tl a:hover{transform:translateY(-4px)}
  .svc2 a:hover .svc2-ic img{transform:translateY(-3px) scale(1.12) rotate(-6deg)}
  .svc2 a:hover .svc2-more .ic,.tl a:hover .tl-go .ic{transform:translateX(4px)}
  .svc2 a:hover h3,.tl a:hover h3,.nls a:hover .nl-t,.cb-sv a:hover,.wths a:hover{color:var(--or)}
  .nls a:hover img{transform:scale(1.06)}
  .wl-btn:hover{background:var(--or)}
  .pil-nav a:hover{color:var(--or)}
}
@media (max-width:1280px){
  .ab-sts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tms{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rts2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tls,.cl-grid,.sd-works .wk2s,.wths{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sfs{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr))}
  .sfs li:nth-child(4n)::after{display:none}
}
@media (max-width:1023px){
  .phero-in,.ab-mission-in,.ab-logo-in,.ab-msg-in,.co-in,.pil-in,.ct-in{grid-template-columns:1fr;gap:28px}
  .phero-vis{min-height:180px}
  .pil-hd{position:static}
  .its,.sgs,.cbs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sd-wrs{grid-template-columns:1fr}
  .tls,.cl-grid,.sd-works .wk2s,.wths{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-msg-ph{max-width:420px}
}
@media (max-width:767px){
  .phero{padding:36px 0 32px}
  .phero-h{font-size:30px}
  .phero-lead{font-size:15px}
  .phero-vis{min-height:140px}
  .phero-ic{width:110px;height:110px}.phero-ic.big{width:120px;height:120px}
  .phero-th{width:42%}
  .phero-num b{font-size:84px}
  .phero-chara{width:130px}
  .ab-hero-in{padding:48px var(--gut)}
  .ab-hero-h{font-size:30px}
  .ab-mission,.ab-str,.ab-logo,.ab-msg,.ab-roots,.ab-team,.pil,.combo{padding:44px 0}
  .ab-3{grid-template-columns:1fr}
  .ab-sts,.tms,.rts2,.svc2s,.its,.sgs,.cbs,.tls,.wths{grid-template-columns:1fr}
  .cl-grid,.sd-works .wk2s{grid-template-columns:1fr}
  .sfs{grid-template-columns:1fr}
  .sfs li::after{display:none}
  .pil-nav ul{overflow-x:auto;scrollbar-width:none}
  .pil-nav a{white-space:nowrap;padding:12px 10px;font-size:14px}
  .nls a{grid-template-columns:96px minmax(0,1fr) 16px;gap:4px 14px}
  .nls figure{grid-row:span 2}
  .nl-d{grid-column:2}
  .nl-t{grid-column:2;font-size:15px}
  .nls .ic{grid-column:3;grid-row:1/span 2}
  .ct-form{padding:22px 18px}
  .ct-kinds{grid-template-columns:1fr}
  .co-tb th{width:34%}
  .co-tb th,.co-tb td{font-size:14px;padding:14px 6px}
}
/* 泣き別れ対策（短い見出しは行をそろえ、本文は最後の行が短くなりすぎないように） */
.vt-top{white-space:nowrap}
.vc-h,.wk2 h3,.tl h3,.nl-t,.sd-voice cite,.svc2 h3,.wths a span,.it h3,.sg h3{text-wrap:balance}
.phero-lead,.cb-d,.co-acc,.rt figcaption,.rt p,.sd-wrs span,.it p,.sg p,.tl-d,.tm-d,.ab-st p,.svc2-c,.pil-lead{text-wrap:pretty}
.sd-wrs span{word-break:keep-all;overflow-wrap:anywhere}

/* ═════ 固定バナー：左下の小さなカード（スタイリッシュに）10/10 ═════ */
.fbn{left:24px;right:auto;bottom:24px;width:min(360px,calc(100% - 48px));padding:0;--fbn-h:0px}
.fbn-in{max-width:none;height:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:16px 40px 16px 96px;border-radius:var(--r);
  background:rgba(38,38,38,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 40px rgba(0,0,0,.2)}
.fbn-tx{display:grid;gap:2px}
.fbn-l{font-size:11px;letter-spacing:.08em}
.fbn-c{font-size:16px;line-height:1.4}
.fbn-b1{margin-left:0;justify-content:space-between;height:40px;padding:0 14px;font-size:14px;transition:background .3s}
.fbn-x{right:6px;top:8px;translate:none;width:30px;height:30px;color:rgba(255,255,255,.7)}
.fbn-x .ic{width:16px;height:16px}
.fbn-ch{left:6px;bottom:0;height:118px}
.fbn-on .totop{bottom:24px}
.has-fbn .pf{padding-bottom:0}
@media (hover:hover) and (pointer:fine){.fbn-b1:hover{background:var(--or2)}.fbn-x:hover{color:#fff}}
@media (max-width:767px){
  .fbn{left:10px;right:10px;bottom:10px;width:auto}
  .fbn-in{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:10px 38px 10px 78px}
  .fbn-l{display:block;font-size:10px}
  .fbn-c{font-size:14px}
  .fbn-b1{height:38px;padding:0 12px;font-size:13px}
  .fbn-b1 .ic{display:none}
  .fbn-ch{height:92px;left:4px}
  .fbn-on .totop{bottom:96px}
}

/* SCROLL：細い線の上を、オレンジの短い線が上から下へすべり落ちる */
.scroll::after{width:1px;height:84px;background:linear-gradient(var(--or),var(--or)) 0 -40px/1px 36px no-repeat,rgba(53,53,53,.18);animation:sclDrop 2.4s cubic-bezier(.65,0,.35,1) infinite;transform:none}
.ab-hero .scroll::after{background:linear-gradient(var(--or),var(--or)) 0 -40px/1px 36px no-repeat,rgba(255,255,255,.3)}
@keyframes sclDrop{0%{background-position:0 -40px,0 0}70%,100%{background-position:0 90px,0 0}}
@media (prefers-reduced-motion:reduce){.scroll::after{animation:none;background:rgba(53,53,53,.3)}}
.fbn-in{padding-left:120px}
@media (max-width:767px){.fbn-in{padding-left:84px}}
@media (max-width:767px){.fbn-in{padding-left:92px}.fbn-ch{height:84px}}
/* オープニング：forwards.jp のロゴ動画をチャコールの地に（白だけ抜いて canvas に描く） */
.op{background:#2E2E2E}
.op-v{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.op-cv{width:min(820px,86vw);height:auto;display:block}
.op-logo,.op-line{display:none}
/* 見えない動画はブラウザが止めるので、実寸のままほぼ透明で canvas の後ろに置く */
.op{position:fixed}
.op-v{position:absolute;inset:0;margin:auto;width:min(1600px,100vw);height:auto;opacity:.01;z-index:0}
.op-cv{position:relative;z-index:1}

/* OUR MISSION 右側をスタイリッシュに：リードに縦線、3つは枠なしで大きな番号と英字＋矢印でつなぐ */
.ab-mission-tx{padding-top:8px}
.ab-mission-tx .ab-lead{position:relative;padding-left:26px;font-size:18px;line-height:2.05;font-weight:700;color:var(--ink)}
.ab-mission-tx .ab-lead::before{content:"";position:absolute;left:0;top:.5em;bottom:.5em;width:3px;border-radius:2px;background:var(--or)}
.ab-mission-tx p:not(.ab-lead){padding-left:26px}
.ab-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.ab-3 li{position:relative;padding:0 20px 0 26px;background:none;border:0;border-radius:0}
.ab-3 li+li{border-left:1px solid var(--line)}
.ab-3 li:not(:last-child)::after{content:"";position:absolute;right:-7px;top:46px;width:12px;height:12px;background:var(--bg);border-top:1.5px solid var(--or);border-right:1.5px solid var(--or);transform:rotate(45deg);z-index:1}
.ab-3-no{display:block;font:italic 700 46px/1 Figtree,sans-serif;color:var(--or);opacity:.9}
.ab-3 b{display:block;margin-top:12px;font-size:24px;font-weight:900;letter-spacing:.06em}
.ab-3-en{display:block;margin-top:2px;font:italic 600 11px/1.4 Figtree,sans-serif;letter-spacing:.2em;color:var(--gray)}
.ab-3-d{display:block;margin-top:10px;font-size:13px;color:var(--txt)}
@media (max-width:767px){
  .ab-mission-tx .ab-lead{font-size:16px;padding-left:18px}
  .ab-mission-tx p:not(.ab-lead){padding-left:18px}
  .ab-3{grid-template-columns:1fr;gap:18px;padding-top:20px}
  .ab-3 li{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:12px;padding:0}
  .ab-3 li+li{border-left:0;border-top:1px solid var(--line);padding-top:18px}
  .ab-3 li::after{display:none}
  .ab-3-no{grid-row:1/span 3;font-size:40px}
  .ab-3 b{margin-top:0;font-size:20px}
}

/* ═════ 私たちについて：STRENGTH（チャコールの地・4列・大きな番号）／ROOTS（左右交互の物語＋引用）10/10 ═════ */
.ab-str,.ab-sts{display:none}
.ab-str2{position:relative;padding:80px 0;background:#2E2E2E;color:#fff;overflow:hidden}
.ab-str2::before{content:"";position:absolute;right:-180px;top:-180px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(234,161,60,.22),transparent 65%);pointer-events:none}
.ab-str2-hd{position:relative;max-width:var(--cw);margin:0 auto 48px;padding:0 var(--gut);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;column-gap:48px}
.ab-str2-hd .fe-en{grid-column:1;margin-bottom:6px}
.ab-str2-hd .sub{grid-column:1;color:#fff}
.ab-str2-lead{grid-column:2;grid-row:1/span 2;align-self:end;font-size:clamp(22px,2.2vw,32px);font-weight:900;line-height:1.5;color:#fff;text-align:right}
.ab-st2s{position:relative;max-width:var(--cw);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.14)}
.ab-st2{position:relative;padding:36px 28px 8px;border-right:1px solid rgba(255,255,255,.14);transition:background .5s var(--ease)}
.ab-st2:first-child{border-left:1px solid rgba(255,255,255,.14)}
.ab-st2::before{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.ab-st2-no{position:absolute;right:20px;top:22px;font:italic 800 64px/1 Figtree,sans-serif;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22)}
.ab-st2-ic{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.06)}
.ab-st2-ic img{width:66%;height:66%;object-fit:contain;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.ab-st2-en{margin-top:26px;font:italic 700 30px/1 Figtree,sans-serif;letter-spacing:.02em;color:var(--or)}
.ab-st2-ja{margin-top:8px;font-size:13px;font-weight:700;color:rgba(255,255,255,.7);letter-spacing:.1em}
.ab-st2 h3{margin-top:14px;font-size:19px;font-weight:900;line-height:1.55}
.ab-st2-d{margin-top:12px;font-size:14px;line-height:1.95;color:rgba(255,255,255,.75)}
@media (hover:hover) and (pointer:fine){
  .ab-st2:hover{background:rgba(255,255,255,.04)}
  .ab-st2:hover::before{transform:none}
  .ab-st2:hover .ab-st2-ic img{transform:translateY(-3px) scale(1.12) rotate(-6deg)}
}
.ab-st2s.in .ab-st2::before{animation:stLine 1.2s var(--ease) both}
.ab-st2s.in .ab-st2:nth-child(2)::before{animation-delay:.15s}.ab-st2s.in .ab-st2:nth-child(3)::before{animation-delay:.3s}.ab-st2s.in .ab-st2:nth-child(4)::before{animation-delay:.45s}
@keyframes stLine{0%{transform:scaleX(0)}55%{transform:none;transform-origin:left}56%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}

.rts2{display:none}
.rt2s{position:relative;max-width:1180px;margin:0 auto;padding:0 var(--gut);display:grid;gap:72px}
.rt2s::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(var(--line),var(--line)) center/1px 100% no-repeat}
.rt2{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.rt2::before{content:"";position:absolute;left:50%;top:50%;width:13px;height:13px;border-radius:50%;background:var(--or);box-shadow:0 0 0 6px var(--bg),0 0 0 7px var(--or);translate:-50% -50%}
.rt2.rev .rt2-ph{order:2}
.rt2-ph{position:relative;border-radius:var(--r);overflow:hidden;transform:translateY(30px);opacity:0;transition:transform 1.1s var(--ease),opacity 1s ease}
.rt2-ph img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.rt2-ph figcaption{position:absolute;left:0;bottom:0;padding:8px 14px;background:rgba(46,46,46,.82);color:#fff;font-size:12px;font-weight:700;border-radius:0 var(--r) 0 0}
.rt2-tx{transform:translateY(30px);opacity:0;transition:transform 1.1s var(--ease) .15s,opacity 1s ease .15s}
.rt2.in .rt2-ph,.rt2.in .rt2-tx{transform:none;opacity:1}
.rt2-no{font:italic 600 13px/1 Figtree,sans-serif;letter-spacing:.18em;color:var(--gray)}
.rt2-no b{font-size:44px;font-weight:700;color:var(--or);letter-spacing:0;margin-left:6px;vertical-align:-6px}
.rt2 h3{margin-top:14px;font-size:clamp(22px,2.2vw,30px);font-weight:900;line-height:1.5}
.rt2-d{margin-top:12px;font-size:15px;line-height:2.05;color:var(--txt)}
.rt2-q{position:relative;margin-top:20px;padding:18px 22px 18px 52px;background:#fff;border-radius:var(--r);font-size:17px;font-weight:900;line-height:1.7}
.rt2-q::before{content:"“";position:absolute;left:14px;top:4px;font:italic 800 54px/1 Figtree,serif;color:var(--or)}
.ab-roots-end{max-width:900px;margin:64px auto 0;padding:32px var(--gut) 0;border-top:1px solid var(--line);text-align:center;font-size:18px;font-weight:700;line-height:2}
@media (prefers-reduced-motion:reduce){.rt2-ph,.rt2-tx{transform:none;opacity:1}}
@media (max-width:1280px){.ab-st2s{grid-template-columns:repeat(2,minmax(0,1fr))}.ab-st2{border-bottom:1px solid rgba(255,255,255,.14)}.ab-st2:nth-child(3){border-left:1px solid rgba(255,255,255,.14)}}
@media (max-width:1023px){
  .ab-str2-hd{grid-template-columns:1fr;row-gap:6px}.ab-str2-lead{grid-column:1;grid-row:auto;text-align:left;margin-top:14px}
  .rt2s::before{left:calc(var(--gut) + 6px)}
  .rt2{grid-template-columns:1fr;gap:20px;padding-left:36px}
  .rt2::before{left:6px;top:14px;translate:0 0}
  .rt2.rev .rt2-ph{order:0}
}
@media (max-width:767px){
  .ab-str2{padding:48px 0}
  .ab-st2s{grid-template-columns:1fr}
  .ab-st2{border-left:1px solid rgba(255,255,255,.14);padding:28px 22px 22px}
  .ab-st2-no{font-size:48px}
  .rt2s{gap:44px}
  .rt2-q{font-size:15px;padding:14px 16px 14px 42px}
  .rt2-q::before{font-size:42px;left:10px}
}

/* スマホのクイックナビ：アイコンなし。英字（小）＋和文、区切りは細い縦線、相談だけオレンジの面（10/10） */
@media (max-width:1023px){
  .qnav{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .qnav ul{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.15fr)}
  .qnav li+li a{border-left:1px solid var(--line)}
  .qnav a{gap:3px;padding:9px 2px 10px;justify-content:center}
  .qnav a small{font:italic 700 9px/1 Figtree,sans-serif;letter-spacing:.14em;color:var(--or)}
  .qnav a span{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--ink)}
  .qnav .qn-cta a{background:var(--or);border-left:0}
  .qnav .qn-cta a small{color:rgba(255,255,255,.85)}
  .qnav .qn-cta a span{color:#fff}
  .qnav .ic{display:none}
}
/* ページ見出し：スマホは右の絵を出さず、文字だけで詰める */
@media (max-width:767px){.phero-vis{display:none}.phero-in{gap:0}}

/* よくある質問：日本地図（日野市にピン・波紋）と「日本全国に対応」 10/10 */
.faq-area{margin-top:26px;padding:20px 20px 18px;background:#fff;border-radius:var(--r)}
.jp-map{display:block;width:100%;max-width:240px;height:auto;margin:0 auto}
.jp-land{fill:#F4E3CC;stroke:#E7C9A2;stroke-width:1;stroke-linejoin:round}
.jp-dot{fill:var(--or);stroke:#fff;stroke-width:5}
.jp-ring{fill:none;stroke:var(--or);stroke-width:4;transform-box:fill-box;transform-origin:center;animation:jpRing 2.6s ease-out infinite}
.jp-ring.r2{animation-delay:1.3s}
@keyframes jpRing{0%{transform:scale(.6);opacity:.9}100%{transform:scale(4.2);opacity:0}}
.fa-tx{margin-top:12px;display:grid;gap:4px;text-align:center}
.fa-tx b{font-size:17px;font-weight:900;color:var(--or)}
.fa-tx span{font-size:13px;line-height:1.8;color:var(--txt)}
@media (prefers-reduced-motion:reduce){.jp-ring{animation:none;opacity:0}}
@media (max-width:1023px){.faq-area{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:center}.fa-tx{text-align:left;margin-top:0}}

/* ═════ 制作実績の詳細（forwards.jp の詳細をそのまま取り込み、H案のトンマナで）10/10 ═════ */
.wd{padding:40px 0 64px}
.wd-in{max-width:1280px;margin:0 auto;padding:0 var(--gut)}
.wd .fe-en{margin-bottom:12px}
.wd-cats{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:28px}
.wd-cats a{font-size:12px;font-weight:700;color:var(--or);background:#fff;padding:5px 10px;border-radius:var(--r)}
.wd-date{margin-left:6px;font:italic 600 13px/1 Figtree,sans-serif;color:var(--gray)}
.wd .single-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:48px;align-items:center;margin-bottom:56px}
.wd .single-head.is-rich{align-items:start;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.wd .tit h1{font-size:clamp(24px,2.4vw,34px);font-weight:900;line-height:1.5;letter-spacing:.04em}
.wd .tit-pre{display:block;font-size:.55em;color:var(--gray);letter-spacing:.08em}
.wd .tit-name{display:inline}
.wd .time-tit{margin-bottom:24px}
.wd .time-tit>a{display:inline-block;margin-top:10px;font:italic 700 15px/1.4 Figtree,sans-serif;color:var(--gray);word-break:break-all}
.wd .case-catch{margin-top:14px;font-size:18px;font-weight:700;line-height:1.9}
.wd .single-head-info .sec{font-size:16px;font-weight:700;line-height:1.8}
.wd .single-head-info .sec .tit h2,.wd #single-portfolio .tit h2{font:italic 700 13px/1 Figtree,sans-serif;letter-spacing:.16em;color:var(--or);margin-bottom:10px}
.wd .case-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.wd .case-tags span{padding:3px 10px;border:1px solid var(--line);border-radius:var(--r);font-size:12px;color:var(--gray);background:#fff}
.wd .case-meta{display:grid;grid-template-columns:6em 1fr;gap:8px 12px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;line-height:1.7}
.wd .case-meta dt{color:var(--gray)}
.wd .case-sitebtn{margin-top:26px}
.wd .wd-site{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:var(--r);background:var(--ink);color:#fff;font-weight:700;font-size:14px;transition:background .3s}
.wd .wd-site::after{content:"→";font-family:Figtree,sans-serif}
.wd #single-works{background:#fff;border-radius:var(--r);overflow:hidden}
.wd #single-works p{margin:0}
.wd #single-works img{display:block;width:100%;height:auto;transition:transform 1.2s var(--ease)}
.wd #single-works>a{display:block;overflow:hidden}
.wd #single-portfolio{margin-top:8px}
.wd #single-portfolio .sec{margin-bottom:40px;font-size:16px;line-height:2;color:var(--txt);max-width:860px}
.wd .case-sec{position:relative;padding:56px 0;border-top:1px solid var(--line)}
.wd .case-label{margin-bottom:6px;font:italic 700 13px/1 Figtree,sans-serif;letter-spacing:.14em;color:var(--or)}
.wd .case-no{margin-right:12px}
.wd .case-h{margin-bottom:22px;font-size:24px;font-weight:900;line-height:1.6}
.wd .case-text{max-width:760px;font-size:16px;line-height:2;color:var(--txt)}
.wd .case-sum{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink)}
.wd .case-sum>div{padding:20px 24px 0 0}
.wd .case-sum>div+div{padding-left:24px;border-left:1px solid var(--line)}
.wd .case-sum b{display:block;margin-bottom:6px;font-size:13px;color:var(--or);letter-spacing:.14em}
.wd .case-sum p{font-size:15px;line-height:1.9}
.wd .case-two{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.wd .case-two.is-single{grid-template-columns:1fr}
.wd .case-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:2px solid var(--ink);list-style:none}
.wd .case-steps li{padding:16px 16px 0 0;font-size:15px;line-height:1.7}
.wd .case-steps li span{display:block;font-size:22px;font-weight:700;color:var(--or);font-style:italic}
.wd .case-gal-screen{display:grid;grid-template-columns:1fr 22%;gap:24px;align-items:start}
.wd .case-gal-screen.is-single{grid-template-columns:1fr}
.wd .case-gal-screen figure,.wd .case-gal-print figure{margin:0}
.wd .case-gal-screen img,.wd .case-gal-print img{display:block;width:100%;height:auto;border-radius:var(--r);background:#fff}
.wd .case-gal-screen figcaption{margin-top:8px;font-size:12px;color:var(--gray);letter-spacing:.1em}
.wd .case-gal-print{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}
.wd .case-gal-movie{margin-top:32px}
.wd .case-gal-movie iframe{width:100%;height:auto;aspect-ratio:16/9}
.wd .case-care{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.wd .case-care b{display:block;margin-bottom:8px;padding-left:12px;border-left:2px solid var(--or);font-size:16px}
.wd .case-care p{font-size:14px;line-height:1.9;color:var(--txt)}
/* 画面のプレビュー：縦長のページ画像を、枠の中で上→下→上へ自動スクロール（forwards.jp と同じ） */
.wd .case-screen{overflow:hidden;border-radius:var(--r);background:#fff}
.wd .case-screen.is-scroll.is-pc{aspect-ratio:16/10}
.wd .case-screen.is-scroll.is-sp{aspect-ratio:375/812}
.wd .case-screen img{display:block;width:100%;height:auto;border-radius:0}
.wd .case-screen.is-scroll img{height:100%;object-fit:cover;object-position:50% 0;animation:case-screen-scroll var(--scroll-dur,20s) ease-in-out infinite}
.wd .case-screen.is-scroll:hover img{animation-play-state:paused}
@keyframes case-screen-scroll{0%,8%{object-position:50% 0}46%,54%{object-position:50% 100%}92%,100%{object-position:50% 0}}
.wd .case-catch,.wd .case-meta dd,.wd .case-sum p,.wd .case-text,.wd .case-steps li,.wd .case-care p{word-break:keep-all;overflow-wrap:anywhere;text-wrap:pretty}
.wd-pns{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px;padding-top:28px;border-top:1px solid var(--line)}
.wd-pn{display:grid;gap:4px;padding:16px 20px;background:#fff;border-radius:var(--r);transition:color .3s}
.wd-pn.next{text-align:right;grid-column:2}
.wd-pn small{font:italic 700 12px/1 Figtree,sans-serif;letter-spacing:.12em;color:var(--or)}
.wd-pn span{font-weight:700;font-size:15px;line-height:1.5}
@media (hover:hover) and (pointer:fine){.wd .wd-site:hover{background:var(--or)}.wd #single-works a:hover img{transform:scale(1.03)}.wd-pn:hover{color:var(--or)}}
@media (prefers-reduced-motion:reduce){.wd .case-screen.is-scroll img{animation:none}}
@media (max-width:1023px){.wd .single-head,.wd .single-head.is-rich{grid-template-columns:1fr;gap:24px}.wd #single-works{order:-1}}
@media (max-width:767px){
  .wd .case-sec{padding:40px 0}.wd .case-h{font-size:20px}
  .wd .case-sum,.wd .case-two,.wd .case-care{grid-template-columns:1fr;gap:20px}
  .wd .case-sum>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:16px}
  .wd .case-gal-screen{grid-template-columns:1fr;gap:20px}.wd .case-gal-screen figure.is-sp{width:56%}
  .wd .case-gal-print{grid-template-columns:1fr 1fr;gap:12px}
  .wd-pns{grid-template-columns:1fr}.wd-pn.next{grid-column:auto}
}

/* ═════ アクセシビリティ：明るい地のオレンジ文字は読める濃さに（10/10 axe WCAG2.2AA）。暗い地では元の #EAA13C ═════ */
:root{--or-tx:#EAA13C;--or-lg:#EAA13C}
.pf,.mcta,.ab-str2,.res-tool,.fbn,.ab-hero,.op,.wx2,.qn-cta{--or-tx:#EAA13C;--or-lg:#EAA13C}
.vt-tabs button.on span,
.vt-en,
.l1,
.fi-l,
.bn:nth-child(odd) .bn-en,
.feature h2,
.fe-sub,
.nws .ic,
.ft .ic,
.fbn-l,
.dr-tel .ic,
.bn a:hover .bn-t,
.nws a:hover,
.vt-links a:hover,
.qnav .ic,
.field h2,.svc h2,
.fd-catch b,
.fd-en,
.sv-ic,
.sv .ic,
.fd a:hover h3,
.sv a:hover .sv-t,
.bn-en,
.fp-l,
.fe-no,
.fd-n b,.fd-catch b,
.wk-c,
.wk-cats small,
.wk a:hover h3,
/* 英字見出しは大きくせず、普通のオレンジの小さな英字に（社長指示 10/10） */
.fe-en,.news-v,.svc .svc-v,
.pf-way .ic,
.pf-col a:hover,.pf-legal a:hover,.pf-h a:hover,
.pf-sns a:hover,
.fd-n b,.fd-catch b,
.nw-c,
.fp-cap2 .fp-l,
.pk-en,
.pk-l,
.pk-c:hover .pk-t,
.pb .ic,
.pb-catch .nw:last-child,
.mcta-en,
.rs-tag,
.msg-name small,
.fl-no,
.fq-q,
.res-h span,
.rts .ic,
.rts a:hover,.rcs a:hover,.fq summary:hover .fq-t,
.rtl-en,
.rc-tag,
.rc a:hover .rc-t,
.rs2-nav li.on span,
.rs2-tag,
.rtl-badges li,
.rp-no,
.rtl-pick .ic,
.rtl-pick a:hover,
.wx-t b,
.wk2-tabs button small,
.wk2-ov .ic,
.wk2-tags span,
.wk2 a:hover h3,
.fl2-no,
.phero-pils span,
.ab-hero-h em,
.ab-or,
.ab-st-tag,
.ab-msg-name small,
.tm-role,
.pil-nav span,
.svc2-en,
.svc2-more .ic,
.sd-wrs .ic,
.it-no,
.sg-no,
.sd-voice cite,
.sf-no,
.wths small,
.wths .ic,
.nls .ic,
.tl-en,
.tl-go .ic,
.fm-ag a,
.ct-done,
.ct-tel .ic,
.ct-steps li::before,
.svc2 a:hover h3,.tl a:hover h3,.nls a:hover .nl-t,.cb-sv a:hover,.wths a:hover,
.pil-nav a:hover,
.qnav a small,
.fa-tx b,
.wd-cats a,
.wd .single-head-info .sec .tit h2,.wd #single-portfolio .tit h2,
.wd .case-label,
.wd .case-sum b,
.wd .case-steps li span,
.wd-pn small,
.wd-pn:hover{color:var(--or-tx)}
.fd-n b,
.pf-en,
.rs-num b,
.res-h b,
/* 理由の番号は見出しに重ねず、上の行に置く */
.rs-no,
.rtl-num b,
.rs2-num b,
.wx2-temp b,
.phero-num b,
.rt-no,
.pil-no,
.ab-3-no,
.ab-st2-en,
.rt2-no b,
.rt2-q::before{color:var(--or-lg)}
/* オレンジの面の上の文字は白ではなくチャコール（白はコントラスト2.2で読みにくい） */
.pf-form,.pf-form small,.pf-form .ic,.fbn-b1,.fbn-b1 .ic,.qn-cta a span,.qn-cta a small,.rtl-btn span,.fl2-free,.sd-catch span,.fm em,.ct-send,.ct-send .ic,.wk-c{color:var(--ink)!important}
.qnav .qn-cta a small{color:rgba(46,46,46,.75)!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ロゴへの想い：F と反転した F がくっつき（1.4秒）、外側の矢印が消えて H だけが浮かび上がる（10/10） */
.lgx{display:block;padding:32px 28px 24px;background:#fff;border-radius:var(--r);text-align:center}
.lgx-svg{display:block;width:100%;max-width:440px;height:auto;margin:0 auto;overflow:visible}
.lgx .lg-out{fill:#E29D3F}
.lgx .lg-in{fill:#EEC686}
.lgx-a,.lgx-b{transform-box:view-box}
.lgx-a{transform:translateX(-70px)}
.lgx-b{transform:translateX(70px)}
.lgx .lg-out,.lgx .lg-in{transition:fill .9s ease,opacity .9s ease,filter .9s ease}
.lgx.go .lgx-a,.lgx.go .lgx-b{transform:none;transition:transform 1.4s cubic-bezier(.65,0,.35,1) .2s}
.lgx.go .lg-out{opacity:.1;transition-delay:1.9s}
.lgx.go .lg-in{fill:#EAA13C;filter:drop-shadow(0 6px 14px rgba(234,161,60,.45));transition-delay:2.1s}
.lgx.go .lgx-svg{animation:lgxPop .9s cubic-bezier(.34,1.56,.64,1) 2.1s both}
@keyframes lgxPop{0%{transform:none}45%{transform:scale(1.05)}100%{transform:none}}
.lgx.done .lgx-a,.lgx.done .lgx-b{transform:none}.lgx.done .lg-out{opacity:.1}.lgx.done .lg-in{fill:#EAA13C}
.lgx-re{margin-top:14px;font-size:12px;font-weight:700;color:var(--gray);text-decoration:underline;text-underline-offset:3px}
.lgx-cap{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font:600 12px/1.6 Figtree,"Noto Sans JP",sans-serif;color:var(--gray)}
.lgx-cap li{display:flex;align-items:center;gap:6px}
.lgx-sw{width:12px;height:12px;border-radius:50%}
.ab-logo-vis.lgx{grid-template-columns:none}
@media (prefers-reduced-motion:reduce){.lgx-a,.lgx-b{transform:none}.lgx .lg-out{opacity:.1}.lgx .lg-in{fill:#EAA13C}}
/* はじまりは左右に離れて置く（反転したFが左、元のFが右）→ 中央でくっつく */
.lgx-a{transform:translateX(95px);opacity:0}
.lgx-b{transform:translateX(-95px);opacity:0}
.lgx.go .lgx-a,.lgx.go .lgx-b{opacity:1;transition:transform 1.4s cubic-bezier(.65,0,.35,1) .5s,opacity .5s ease}
.lgx.done .lgx-a,.lgx.done .lgx-b{opacity:1}
.lgx-svg{max-width:340px}
.lgx{overflow:hidden}
.lgx-a{transform:translateX(60px)}.lgx-b{transform:translateX(-60px)}
.lgx-svg{max-width:300px}

/* ═════ 言語の切り替え（JA / EN / 中文）・英語と中国語の書体 10/10 ═════ */
.lng{display:flex;align-items:center;gap:2px;margin-left:auto;margin-right:16px;padding:3px;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.7)}
.lng a{padding:5px 9px;border-radius:calc(var(--r) - 1px);font:700 12px/1 Figtree,"Noto Sans SC","Noto Sans JP",sans-serif;letter-spacing:.06em;color:var(--gray);transition:background .3s,color .3s}
.lng a.on{background:var(--ink);color:#fff}
.lng-dr{margin:0 0 18px;width:max-content}
@media (hover:hover) and (pointer:fine){.lng a:not(.on):hover{color:var(--ink);background:var(--pale)}}
@media (max-width:1023px){.hd .lng{margin-right:10px}.hd .lng a{padding:5px 7px;font-size:11px}}
@media (max-width:420px){.hd .lng{display:none}}
:lang(zh-CN) body,:lang(zh-CN){font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei","Noto Sans JP",sans-serif}
:lang(en) .fv-h,:lang(zh-CN) .fv-h{letter-spacing:.01em}
:lang(en) .bx,:lang(en) [data-jpb]{word-break:normal;overflow-wrap:break-word}
/* 補足の灰色文字も読める濃さに（#787878 → #666666） */
:root{--gray:#666666}
/* 理由のカード：まだ画面中央に来ていないカードも薄くしない（読めるまま。動きは位置だけ） */
.rs2{opacity:1}
.qnav .qn-cta a small{color:var(--ink)!important}
/* 英語：FVの見出しは単語が長いので一回り小さく、写真と重ねない／ロゴ横のコピーは広い画面だけ */
:lang(en) .fv-h{font-size:clamp(40px,4.1vw,74px);line-height:1.12}
:lang(en) .fv-copy{max-width:calc(38% - 60px)}
:lang(en) .fv-sub{font-size:16px}
:lang(en) .logo-t,:lang(zh-CN) .logo-t{font-size:11.5px;line-height:1.5;max-width:200px;white-space:normal}
@media (max-width:1680px){:lang(en) .logo-t{display:none}}
@media (max-width:1500px){:lang(zh-CN) .logo-t{display:none}}
:lang(en) .fv-h{font-size:clamp(30px,3.3vw,64px)}
:lang(en) .fv-sub,:lang(zh-CN) .fv-sub{max-width:230px;align-items:flex-start;line-height:1.5}
:lang(en) .fv-sub::before,:lang(zh-CN) .fv-sub::before{flex:none;margin-top:.7em}
@media (max-width:1023px){:lang(en) .fv-h{font-size:clamp(34px,9vw,46px)}:lang(en) .fv-copy{max-width:none}:lang(en) .fv-sub,:lang(zh-CN) .fv-sub{max-width:none}}
:lang(en) .fv-h,:lang(zh-CN) .fv-h{justify-items:start}
:lang(en) .fv-h{font-size:clamp(30px,3vw,56px)}
/* 泣き別れの仕上げ（10/10） */
.lng a{white-space:nowrap}
.tm-home,.wd p,.wd .sec,.wd .case-text,.wd #single-portfolio .sec{word-break:keep-all;overflow-wrap:anywhere;text-wrap:pretty}
@media (min-width:1281px){.sfs b{font-size:14px;white-space:nowrap}}
.pil-no{opacity:1;color:var(--or-lg)}
/* 見出し・大きな数字のオレンジは元の #EAA13C に戻す（社長指示 10/10）。小さい文字だけ読める濃さのまま */
:root{--or-lg:#EAA13C}
.pil-no{opacity:.35}
/* 英字見出し・大きな数字は元のオレンジ（明るい地でも） */
.fe-en,.news-v,.svc .svc-v,.pf-en,.mcta-en,.pk-en,.rtl-en,.fd-n b,.fd-catch b,.rs2-num b,.phero-num b,.rt2-no b,.ab-3-no,.ab-st2-en,.pil-no,.rs-num b,.fl2-no b,.it-no,.fq-q,.wd-pn small{color:#EAA13C}

/* トップの WORKS：代表作8件を2段で左右交互に流す（触れると止まる・一時停止ボタンあり） 10/10 */
.wkc{position:relative;display:grid;gap:22px;overflow:hidden;padding:4px 0}
.wkc-row{overflow:hidden}
.wkc-track{display:flex;gap:22px;width:max-content;animation:wkcFlow 70s linear infinite}
.wkc-row.rev .wkc-track{animation-direction:reverse;animation-duration:76s}
.wkc:hover .wkc-track,.wkc:focus-within .wkc-track,.wkc.paused .wkc-track{animation-play-state:paused}
@keyframes wkcFlow{to{transform:translateX(calc(-50% - 11px))}}
.wkc-c{flex:none;width:clamp(260px,24vw,380px)}
.wkc-c a{display:block}
.wkc-c figure{position:relative;overflow:hidden;border-radius:var(--r);background:#fff;aspect-ratio:16/10}
.wkc-c img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.wkc-c h3{margin-top:8px;font-size:15px;font-weight:900;line-height:1.55;transition:color .3s;word-break:keep-all;overflow-wrap:anywhere}
.wkc-pause{position:absolute;right:max(var(--gut),calc((100vw - var(--cw)) / 2 + var(--gut)));top:-58px;width:38px;height:38px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink);display:flex;align-items:center;justify-content:center;gap:4px;background:var(--pale)}
.wkc-pause i{width:2px;height:12px;background:var(--ink)}
.wkc.paused .wkc-pause i:first-child{width:0;height:0;background:none;border-left:10px solid var(--ink);border-top:6px solid transparent;border-bottom:6px solid transparent}
.wkc.paused .wkc-pause i:last-child{display:none}
.wkc{overflow:visible}
@media (hover:hover) and (pointer:fine){.wkc-c a:hover img{transform:scale(1.07)}.wkc-c a:hover .wk2-ov{transform:none}.wkc-c a:hover h3{color:var(--or-tx)}}
@media (prefers-reduced-motion:reduce){.wkc-track{animation:none}.wkc-row{overflow-x:auto}}
@media (max-width:767px){.wkc-c{width:240px}.wkc,.wkc-track{gap:14px}@keyframes wkcFlow{to{transform:translateX(calc(-50% - 7px))}}.wkc-pause{top:-50px}}

/* 下層の最後は NEWS（フッターの相談帯と重複させない） 10/10 */
.pnews{padding:56px 0 64px;background:var(--pale)}
.pnews-in{max-width:1180px;margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;align-items:start}
.pnews-hd .fe-en{margin-bottom:10px}
.pnews-hd .more{margin-top:20px}
.pnews-list{border-top:1px solid var(--line)}
.pnews-list a{display:grid;grid-template-columns:110px minmax(0,1fr) 18px;align-items:center;gap:16px;padding:18px 4px;border-bottom:1px solid var(--line);transition:color .3s}
.pnews-list .nw-d{font:italic 600 14px/1 Figtree,sans-serif;color:var(--gray)}
.pnews-list .nw-t{font-weight:700;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
.pnews-list .ic{width:18px;height:18px;color:var(--or)}
@media (hover:hover) and (pointer:fine){.pnews-list a:hover{color:var(--or-tx)}}
@media (max-width:1023px){.pnews-in{grid-template-columns:1fr;gap:20px}}
@media (max-width:767px){.pnews{padding:40px 0 44px}.pnews-list a{grid-template-columns:minmax(0,1fr) 16px;gap:4px 12px}.pnews-list .nw-d{grid-column:1}.pnews-list .nw-t{grid-column:1}.pnews-list .ic{grid-column:2;grid-row:1/span 2}}

/* ヘッダー右上の「資料請求・お問い合わせ」はオレンジ（文字はチャコールで読みやすく） */
.hd-cta{background:var(--or);color:var(--ink)}
.hd-cta::before{background:var(--ink)}
@media (hover:hover) and (pointer:fine){.hd-cta:hover{color:#fff!important}}

/* パンくず（デザイン版 10/10）：家のアイコン＋細い斜線の区切り、現在のページは太字とオレンジの点 */
.bc ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin-bottom:22px;font-size:12px;letter-spacing:.06em;color:var(--gray)}
.bc li{display:inline-flex;align-items:center}
.bc li+li::before{content:"";display:inline-block;width:1px;height:12px;margin:0 12px;background:currentColor;opacity:.45;transform:rotate(22deg)}
.bc a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--gray);padding:4px 0;position:relative;transition:color .3s}
.bc a::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.bc-home{width:15px;height:15px;display:block}
.bc li[aria-current]{position:relative;padding-left:12px;font-weight:700;color:var(--ink)}
.bc li[aria-current]::after{content:"";position:absolute;left:0;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--or)}
.bc li+li[aria-current]::before{margin-right:14px}
.bc li[aria-current]{padding-left:0}
.bc li[aria-current]::after{left:auto;position:static;margin:0 0 0 0;order:-1;display:inline-block;margin-right:8px}
@media (hover:hover) and (pointer:fine){.bc a:hover{color:var(--ink)}.bc a:hover::after{transform:none}}
.ab-hero .bc a,.ab-hero .bc ol{color:rgba(255,255,255,.75)}
.ab-hero .bc li[aria-current]{color:#fff}
@media (max-width:767px){.bc ol{font-size:11px}.bc li+li::before{margin:0 9px}}
.bc li+li::before{order:-2}

/* ═════ お知らせ：縦に長い一覧をやめ、横並びのカードに（10/10）═════ */
.pnews-in{display:block;max-width:var(--cw)}
.pnews-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
.pnews-hd .more{margin-top:0}
.ncs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.nc a{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:var(--r);overflow:hidden;transition:transform .45s var(--ease)}
.nc figure{overflow:hidden;aspect-ratio:16/10;background:var(--pale)}
.nc img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.nc-meta{display:flex;align-items:center;gap:10px;margin:14px 16px 0}
.nc-d{font:italic 600 13px/1 Figtree,sans-serif;color:var(--gray)}
.nc-cat{font-size:11px;font-weight:700;padding:3px 8px;border-radius:var(--r);background:var(--pale);color:var(--or-tx)}
.nc-t{margin:8px 16px 18px;font-size:15px;font-weight:700;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere;transition:color .3s}
.nl2{padding:40px 0 72px}
.nl2-in{max-width:var(--cw);margin:0 auto;padding:0 var(--gut)}
.nf{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);background:#fff;border-radius:var(--r);overflow:hidden;margin-bottom:28px}
.nf figure{overflow:hidden;aspect-ratio:16/10}
.nf img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.nf-tx{display:flex;flex-direction:column;justify-content:center;padding:32px 40px}
.nf-new{align-self:flex-start;font:italic 700 12px/1 Figtree,sans-serif;letter-spacing:.14em;color:var(--ink);background:var(--or);padding:6px 10px;border-radius:var(--r)}
.nf-tx .nc-meta{margin:16px 0 0}
.nf-t{margin-top:12px;font-size:clamp(22px,2.1vw,30px);font-weight:900;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
.nf-ex{margin-top:12px;font-size:15px;line-height:1.9;color:var(--txt)}
.nf-more{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-weight:700}
.nf-more .ic{width:16px;height:16px;color:var(--or);transition:transform .4s var(--ease)}
.ncs-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.nls{display:none}
@media (hover:hover) and (pointer:fine){.nc a:hover{transform:translateY(-4px)}.nc a:hover img,.nf:hover img{transform:scale(1.06)}.nc a:hover .nc-t,.nf:hover .nf-t{color:var(--or-tx)}.nf:hover .nf-more .ic{transform:translateX(4px)}}
@media (max-width:1280px){.ncs,.ncs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ncs>li:nth-child(4){display:none}.ncs-grid>li:nth-child(4){display:block}}
@media (max-width:1023px){.nf{grid-template-columns:1fr}.nf-tx{padding:24px}.ncs,.ncs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ncs>li:nth-child(4){display:block}}
@media (max-width:767px){
  .pnews .ncs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gut) * -1);padding:0 var(--gut) 6px;gap:14px;scrollbar-width:none}
  .pnews .ncs::-webkit-scrollbar{display:none}
  .pnews .nc{flex:none;width:72%;scroll-snap-align:start}
  .ncs-grid{grid-template-columns:1fr 1fr;gap:12px}
  .ncs-grid .nc-t{font-size:13px;margin:6px 12px 14px}.ncs-grid .nc-meta{margin:10px 12px 0;flex-wrap:wrap;gap:4px 8px}
  .pnews-hd{flex-direction:column;align-items:flex-start}
}
/* FVの見出し：まちと、＝元のオレンジ／ひとと、＝グレー（社長指示 10/10） */
.fv-h .l1{color:#EAA13C}
.fv-h .l2{color:#787878}
.faq-area{margin-top:22px}
.fv-h .l1{color:#EAA13C!important}
.fv-h .l2{color:#787878!important}
/* グロナビ：メニューは右寄せ（ロゴ横のコピーと重ならないように）。狭い画面ではコピーを隠す */
.pcnav{margin-left:auto}
.hd-in .lng{margin-left:20px}
@media (max-width:1400px){.logo-t{display:none}}
/* RESOURCES：「もっと読む」は右寄せ、上下を詰める */
.res-more{text-align:right;margin-top:18px;max-width:var(--cw);margin-left:auto;margin-right:auto;padding:0 var(--gut)}
.res{padding-bottom:48px}
/* FAQ：左（見出し＋地図）と右（質問）の天地をそろえる */
.faq-in{align-items:stretch}
.faq-side{display:flex;flex-direction:column}
.faq-area{flex:1;display:flex;flex-direction:column;justify-content:center}
@media (max-width:1023px){.faq-area{display:grid}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-err{margin-top:14px;font-weight:700;color:#B42318}
.phero-ph{width:100%;max-width:520px;border-radius:var(--r);overflow:hidden}
.phero-ph img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 30%;display:block}

/* ═════ hover：左から右へ塗られる（10/10）═════ */
/* 実績カードの「詳しく見る」帯：せり上がったあと、オレンジが左から右へ */
.wk2-ov{isolation:isolate;overflow:hidden}
.wk2-ov::before{content:"";position:absolute;inset:0;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease) .12s;z-index:-1}
.wk2-ov,.wk2-ov .ic{transition:transform .45s var(--ease),color .3s ease .25s}
@media (hover:hover) and (pointer:fine){
  .wk2 a:hover .wk2-ov::before,.wkc-c a:hover .wk2-ov::before{transform:none}
  .wk2 a:hover .wk2-ov,.wkc-c a:hover .wk2-ov,.wk2 a:hover .wk2-ov .ic,.wkc-c a:hover .wk2-ov .ic{color:var(--ink)}
}
/* 相談の3つの入口：色はそのまま。触れると左から塗られる（オレンジの面はチャコール、暗い面はオレンジ） */
.pf-way{position:relative;isolation:isolate;overflow:hidden}
.pf-way::before{content:"";position:absolute;inset:0;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);z-index:-1}
.pf-form::before{background:var(--ink)}
.pf-way,.pf-way small,.pf-way b,.pf-way .ic{transition:color .35s ease}
@media (hover:hover) and (pointer:fine){
  .pf-way:hover{background:rgba(53,53,53,.55)}
  .pf-form:hover{background:var(--or)}
  .pf-way:hover::before{transform:none}
  .pf-way:not(.pf-form):hover,.pf-way:not(.pf-form):hover small,.pf-way:not(.pf-form):hover b,.pf-way:not(.pf-form):hover .ic{color:var(--ink)!important}
  .pf-form:hover,.pf-form:hover small,.pf-form:hover .ic,.pf-form:hover span{color:#fff!important}
}
/* 私たちについての大見出し：「あいだに、」で改行。パンくずは上に置き、文字の塊を画面の上下中央に */
.ab-hero{min-height:min(calc(100svh - var(--hd)),760px)}
.ab-hero .bc{position:absolute;top:28px;left:0;right:0;max-width:var(--cw);margin:0 auto;padding:0 var(--gut);z-index:3}
.ab-hero-in{padding-top:72px;padding-bottom:72px}
.ab-hero-h{line-height:1.3}
@media (max-width:767px){.ab-hero{min-height:520px}.ab-hero .bc{top:18px}.ab-hero-in{padding-top:64px;padding-bottom:56px}}

/* ═════ 事業案内：右の 01/02/03 と事業カードを作り込む（10/10）═════ */
.phero-pils{display:grid;gap:0;width:100%;max-width:440px;border-top:1px solid var(--ink)}
.phero-pils li{display:block;padding:0;background:none;border-radius:0}
.phero-pils a{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:62px minmax(0,1fr) auto 36px;align-items:center;gap:14px;padding:18px 6px;border-bottom:1px solid var(--line);transition:color .35s}
.phero-pils a::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);z-index:-1}
.pp-no{font:italic 700 40px/1 Figtree,sans-serif;color:#EAA13C;letter-spacing:-.01em}
.pp-tx{display:grid;gap:3px}
.pp-tx small{font:italic 700 11px/1 Figtree,sans-serif;letter-spacing:.18em;color:var(--gray);transition:color .35s}
.pp-tx b{font-size:18px;font-weight:900}
.pp-n{font:italic 700 22px/1 Figtree,sans-serif;color:var(--ink);transition:color .35s}
.pp-n i{font-style:normal;font-size:11px;font-weight:700;margin-left:3px;color:var(--gray)}
.pp-ar{width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink);display:grid;place-items:center;transition:box-shadow .35s,transform .45s var(--ease)}
.pp-ar .ic{width:14px;height:14px;transform:rotate(90deg)}
@media (hover:hover) and (pointer:fine){
  .phero-pils a:hover::before{transform:none}
  .phero-pils a:hover,.phero-pils a:hover .pp-n,.phero-pils a:hover .pp-n i,.phero-pils a:hover .pp-tx small{color:#fff}
  .phero-pils a:hover .pp-ar{box-shadow:inset 0 0 0 1.5px #EAA13C;color:#EAA13C;transform:translateY(3px)}
}

.svc2s{gap:24px}
.svc2 a{position:relative;isolation:isolate;overflow:hidden;padding:30px 30px 0;border-radius:var(--r);background:#fff;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.svc2 a::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:#EAA13C;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.svc2-no{position:absolute;right:24px;top:18px;font:italic 800 58px/1 Figtree,sans-serif;color:transparent;-webkit-text-stroke:1px #E2D3BE;transition:-webkit-text-stroke-color .4s}
.svc2-ic{width:72px;height:72px;background:linear-gradient(135deg,#FDF1E3,#FBE3C7)}
.svc2-en{margin-top:20px;letter-spacing:.18em}
.svc2 h3{font-size:22px;margin-top:8px}
.svc2-c{margin-top:8px;font-size:15px;color:var(--ink)}
.svc2-items{display:block;margin:14px 0 22px;padding-top:14px;border-top:1px dashed var(--line);font-size:13px;line-height:1.9;color:var(--txt)}
.svc2-items i{font-style:normal;margin:0 6px;color:#D8C3A5}
.svc2-more{display:flex;align-items:center;justify-content:space-between;margin:auto -30px 0;padding:16px 30px;border-top:1px solid var(--line);font-size:14px;font-weight:700;position:relative;isolation:isolate;overflow:hidden;transition:color .35s}
.svc2-more::before{content:"";position:absolute;inset:0;background:#EAA13C;transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);z-index:-1}
.svc2-more i{width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink);display:grid;place-items:center}
.svc2-more .ic{width:14px;height:14px;color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .svc2 a:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(53,53,53,.10)}
  .svc2 a:hover::after{transform:none}
  .svc2 a:hover .svc2-no{-webkit-text-stroke-color:#EAA13C}
  .svc2 a:hover .svc2-more::before{transform:none}
  .svc2 a:hover h3{color:var(--ink)}
}
@media (max-width:767px){.svc2 a{padding:24px 22px 0}.svc2-more{margin:auto -22px 0;padding:14px 22px}.svc2-no{font-size:46px}.phero-pils a{grid-template-columns:48px minmax(0,1fr) auto 32px;gap:10px}.pp-no{font-size:32px}}
@media (max-width:767px){.phero-vis .phero-pils{display:none}}
.pp-tx b{font-style:normal;color:var(--ink);transition:color .35s}
@media (hover:hover) and (pointer:fine){.phero-pils a:hover .pp-tx b{color:#fff}}
.svc2-items .nw{display:inline-block}
/* ロゴの後ろの光彩：既存サイトと同じく、暗い見出し画像の上にも重ねる（ヘッダーより手前・クリックは通す） */
.hd-glow{z-index:49}
.hd{z-index:50}
.phero-lead{text-wrap:pretty;word-break:keep-all;overflow-wrap:anywhere}

/* ハッシーbot：PCだけ右に固定。押すと「とりあえずLINEして！笑」 */
.hbot{display:none}
@media (min-width:1024px){
  .hbot{display:block;position:fixed;right:24px;bottom:96px;z-index:60}
  .hbot-btn{position:relative;display:block;width:76px;height:76px;padding:0;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--or),0 12px 28px rgba(0,0,0,.18);cursor:pointer;animation:hbotBob 3.2s ease-in-out infinite}
  .hbot-btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;border-radius:50%;transform:scale(1.12);transform-origin:50% 30%;clip-path:circle(44.6% at 50% 50%)}
  .hbot-btn::after{content:"";position:absolute;right:2px;top:4px;width:14px;height:14px;border-radius:50%;background:#06C755;border:2px solid #fff}
  .hbot-tip{position:absolute;right:calc(100% + 14px);top:50%;translate:0 -50%;white-space:nowrap;padding:8px 14px;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;letter-spacing:.06em;opacity:0;transform:translateX(8px);transition:opacity .3s,transform .3s;pointer-events:none}
  .hbot-btn:hover .hbot-tip,.hbot-btn:focus-visible .hbot-tip{opacity:1;transform:none}
  .hbot.on .hbot-btn{animation:hbotLaugh .6s ease-in-out 2}
  .hbot.on .hbot-tip{opacity:0}
  .hbot-bl{position:absolute;right:0;bottom:calc(100% + 18px);width:268px;padding:20px 20px 18px;background:#fff;border-radius:var(--r);box-shadow:0 18px 44px rgba(0,0,0,.18);transform-origin:90% 100%}
  .hbot-bl::after{content:"";position:absolute;right:28px;bottom:-9px;width:18px;height:18px;background:#fff;transform:rotate(45deg)}
  .hbot-bl:not([hidden]){animation:hbotPop .45s cubic-bezier(.2,1.4,.4,1)}
  .hbot-t{margin:0 0 14px;font-size:17px;font-weight:700;line-height:1.55;color:var(--ink)}
  .hbot-ln{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;background:#06C755;color:#fff;font-size:14px;font-weight:700;text-decoration:none;transition:background .3s}
  .hbot-ln .ic{display:block;width:16px;height:16px}
  .hbot-ln:hover{background:#05a948}
  .hbot-x{position:absolute;right:6px;top:6px;width:30px;height:30px;display:grid;place-items:center;border:0;background:none;color:var(--gray);cursor:pointer}
  .hbot-x .ic{display:block;width:14px;height:14px}
  .totop{z-index:61}
}
@keyframes hbotBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes hbotLaugh{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg) scale(1.06)}75%{transform:rotate(10deg) scale(1.06)}}
@keyframes hbotPop{0%{opacity:0;transform:scale(.6) translateY(10px)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hbot-btn,.hbot.on .hbot-btn,.hbot-bl:not([hidden]){animation:none}}

/* 白抜き（線だけ）の数字はやめて、塗りのオレンジ数字に */
.svc2-no{top:24px;font-size:44px;color:#EAA13C;-webkit-text-stroke:0;transition:transform .5s var(--ease)}
.ab-st2-no{font-size:48px;color:#EAA13C;-webkit-text-stroke:0}
@media (hover:hover) and (pointer:fine){.svc2 a:hover .svc2-no{-webkit-text-stroke:0;transform:translateX(-4px)}}

/* 下層ヒーロー：旧forwards.jpのFV背景動画（街の空撮）を、旧サイトと同じく白いベールで淡く敷く */
.phero{background:#fff}
.phero-bg{position:absolute;inset:0;z-index:0}
.phero-bg video{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(1.85) contrast(.72) saturate(.7)}
.phero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,253,248,.82) 0%,rgba(255,252,246,.62) 50%,rgba(255,252,246,.42) 100%)}
.phero-in{position:relative;z-index:1}
@media (max-width:767px){.phero-bg::after{background:rgba(255,253,248,.72)}}
@media (prefers-reduced-motion:reduce){.phero-bg video{display:none}.phero-bg{background:url(../img/kv_2026_poster.jpg) center/cover;filter:brightness(1.85) contrast(.72) saturate(.7)}}

/* ヘッダーの「資料請求・お問い合わせ」は白文字 */
.hd-cta,.hd-cta:hover{color:#fff!important}

/* 黒いセクションでカーソルを追う、ろうそくの灯り（旧forwards.jpから移植） */
.candlelight{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .7s ease;mix-blend-mode:screen;will-change:background;
  background:radial-gradient(circle var(--candle-r,300px) at var(--candle-x,50%) var(--candle-y,50%),
    rgba(255,214,152,calc(.46*var(--candle-i,1))) 0%,rgba(255,194,122,calc(.30*var(--candle-i,1))) 18%,
    rgba(255,172,92,calc(.165*var(--candle-i,1))) 36%,rgba(255,154,74,calc(.078*var(--candle-i,1))) 55%,
    rgba(255,142,62,calc(.028*var(--candle-i,1))) 74%,rgba(255,136,56,0) 100%)}
.candlelight.is-lit{opacity:1}

/* メガメニュー：項目が多くても枠からはみ出さないよう2列に */
.vt-links{grid-template-columns:repeat(2,minmax(0,1fr))}

/* FVの小さな写真のキャプション：スマホで「サッ／カー」と割れないよう1行に */
@media (max-width:767px){#ficap{white-space:nowrap;font-size:11px;letter-spacing:0}}

/* 自社サービス CLUBO（事業案内トップ）：左に説明、右にパソコンとスマホの画面 */
.prd{padding:88px 0;background:var(--ink);color:#fff;position:relative;overflow:hidden}
.prd-in{max-width:var(--cw);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:64px;align-items:center}
.prd-h{display:grid;gap:10px;margin-top:6px}
.prd-logo{font:italic 800 clamp(48px,5vw,72px)/1 Figtree,sans-serif;letter-spacing:.02em;color:#fff}
.prd-sub{font-size:15px;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.75)}
.prd-c{margin-top:26px;font-size:clamp(22px,2vw,28px);font-weight:900;line-height:1.5}
.prd-lead{margin-top:14px;font-size:15px;line-height:2;color:rgba(255,255,255,.85)}
.prd-pts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:26px}
.prd-pts li{padding:14px 16px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r);display:grid;gap:4px}
.prd-pts b{font-size:15px;color:#EAA13C}
.prd-pts span{font-size:13px;line-height:1.6;color:rgba(255,255,255,.8)}
.prd-btn{display:inline-flex;align-items:center;gap:14px;margin-top:30px;height:54px;padding:0 26px;border-radius:var(--r);background:#EAA13C;color:#fff;font-weight:700;position:relative;overflow:hidden;isolation:isolate}
.prd-btn::before{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);z-index:-1}
.prd-btn .ic{display:block;width:18px;height:18px;transition:transform .4s var(--ease)}
.prd-note{margin-top:12px;font-size:12px;color:rgba(255,255,255,.6)}
.prd-vis{position:relative;display:block;padding:0 0 40px 0}
.prd-pc{width:100%;height:auto;display:block;border-radius:var(--r);box-shadow:0 24px 60px rgba(0,0,0,.45);border:6px solid #1b1b1b;transition:transform .6s var(--ease)}
.prd-sp{position:absolute;right:-12px;bottom:0;width:24%;height:auto;border-radius:14px;border:5px solid #1b1b1b;box-shadow:0 18px 40px rgba(0,0,0,.5);transition:transform .6s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .prd-btn:hover{color:var(--ink)}.prd-btn:hover::before{transform:none}.prd-btn:hover .ic{transform:translateX(4px)}
  .prd-vis:hover .prd-pc{transform:translateY(-6px)}.prd-vis:hover .prd-sp{transform:translateY(-12px)}
}
@media (max-width:1023px){.prd-in{grid-template-columns:1fr;gap:40px}.prd-vis{max-width:680px}}
@media (max-width:767px){.prd{padding:56px 0}.prd-pts{grid-template-columns:1fr}.prd-sp{right:0;width:28%}.prd-btn{width:100%;justify-content:space-between}}