/*
Theme Name: PD (Protocol Deal)
Theme URI: https://pd.protocol.ooo/
Description: BtoB決済・資金化サービス「PD」のサイトテーマ。Twenty Twenty-Five の子テーマ。
Author: PROTOCOL
Template: twentytwentyfive
Version: 4.0.0
License: GNU General Public License v2 or later
Text Domain: pd
*/

*{box-sizing:border-box}
:root{
  --paper:#F7F6F3; --ink:#0B0D10; --dim:#6A6F78; --faint:#9AA0A8;
  --rule:#DCDAD4; --rule-s:#E8E6E1;
  --blue:#1F3FE0; --teal:#00A38A;
  --jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium",Meiryo,sans-serif;
  --lt:"Inter",var(--jp);
  --maxw:1240px; --pad:40px;
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--jp);font-size:16px;
  line-height:1.95;font-feature-settings:"palt" 1;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.lt{font-family:var(--lt)}

/* ---------------- header ---------------- */
.hd{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--ink)}
.hd__in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);height:76px;display:flex;align-items:center;gap:40px}
.brand{font-family:var(--lt);font-weight:800;font-size:19px;letter-spacing:-.005em;word-spacing:.12em;white-space:nowrap}
.nav{display:flex;gap:30px;margin-left:auto;font-size:13px;font-weight:700}
.nav a{position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--ink);transition:width .28s cubic-bezier(.2,.7,.3,1)}
.nav a:hover::after{width:100%}
.hdbtn{font-family:var(--lt);font-size:11.5px;font-weight:800;letter-spacing:.16em;
  border:1px solid var(--ink);padding:11px 18px;white-space:nowrap;transition:background-color .2s,color .2s}
.hdbtn:hover{background:var(--ink);color:var(--paper)}
.burger{display:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--ink);background:none;
  cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:17px;height:1.5px;background:var(--ink)}
.mob{display:none;border-bottom:1px solid var(--ink);padding:10px var(--pad) 24px}
.mob a{display:block;padding:14px 0;border-bottom:1px solid var(--rule-s);font-weight:700;font-size:15px}
.mob .m2{display:grid;gap:10px;margin-top:18px}
.mob .m2 a{border:1px solid var(--ink);text-align:center;padding:14px;font-family:var(--lt);
  font-size:12px;font-weight:800;letter-spacing:.14em}
@media(max-width:1040px){.nav,.hdbtn{display:none}.burger{display:flex}.mob:not([hidden]){display:block}}

/* ---------------- ヘッダー（トップページ home.css と同じデザイン。/contact/ で使用） ---------------- */
.site{position:sticky;top:0;z-index:60;background:rgba(247,246,243,.82);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--rule)}
.site__in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);height:72px;display:flex;align-items:center;gap:38px}
.site .brand{display:inline-flex;align-items:center;line-height:0}
.site .brand .pdmark{height:34px;width:auto;display:block}
.site .nav{font-weight:400}
.site .nav a::after{background:var(--blue)}
.site .cta-btn{font-size:13px;font-weight:700;padding:11px 20px;border-radius:999px;background:var(--ink);color:#fff;
  transition:transform .2s,background .2s}
.site .cta-btn:hover{transform:translateY(-2px);background:var(--blue)}
@media(max-width:1040px){.site .nav,.site .cta-btn{display:none}}

/* ---------------- shared type ---------------- */
.idx{display:block;font-family:var(--lt);font-size:11px;font-weight:800;letter-spacing:.3em;
  color:var(--faint);margin-bottom:26px}
.idx b{color:var(--ink);font-weight:800}
h1{font-size:clamp(30px,5.6vw,80px);line-height:1.08;letter-spacing:-.058em;font-weight:800;margin:0}
h2{font-size:clamp(25px,4.4vw,54px);line-height:1.18;letter-spacing:-.05em;font-weight:800;margin:0}
h3{font-size:20px;line-height:1.55;letter-spacing:-.025em;font-weight:800;margin:0}
.dek{font-size:15.5px;line-height:2.05;color:var(--dim);margin:22px 0 0;max-width:52ch}
.rule{border:0;border-top:1px solid var(--ink);margin:0}
.rule--s{border-top:1px solid var(--rule)}

/* 見出しの強調：文字の下にラインを敷く（グリフに重ねない） */
.mark{position:relative;white-space:nowrap;display:inline-block;padding-bottom:.1em}
.mark::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.055em;background:var(--blue)}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;font-weight:800;font-size:14px;
  padding:18px 30px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  transition:background-color .22s,color .22s,transform .22s}
.btn:hover{transform:translateY(-2px)}
.btn--o{background:transparent;color:var(--ink)}
.btn--o:hover{background:var(--ink);color:var(--paper)}
.btn--i{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--io{background:transparent;color:var(--paper);border-color:rgba(255,255,255,.4)}
.btn--io:hover{background:var(--paper);color:var(--ink)}

/* ---------------- hero ---------------- */
.hero{padding:72px 0 0}
.hero__cols{display:grid;grid-template-columns:1.45fr 1fr;gap:70px;padding:48px 0 64px;
  border-top:1px solid var(--rule);margin-top:52px}
.hero__lead{font-size:16.5px;line-height:2.05;margin:26px 0 0;max-width:56ch;color:var(--dim)}
.hero__side{font-size:13.5px;line-height:2.1;color:var(--dim)}
.acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
@media(max-width:960px){.hero{padding:60px 0 0}.hero__cols{grid-template-columns:1fr;gap:34px}}

/* flow : 罫線ベースの図 */
.flow{border-top:1px solid var(--ink);display:grid;grid-template-columns:1fr 1fr;position:relative}
.flow__c{padding:38px 0 42px;padding-right:46px;min-width:0}
.flow__c+.flow__c{border-left:1px solid var(--rule);padding-left:46px}
.flow__l{font-family:var(--lt);font-size:11px;font-weight:800;letter-spacing:.22em;margin-bottom:18px;display:block}
.flow__c--p .flow__l{color:var(--blue)}
.flow__c--u .flow__l{color:var(--teal)}
.flow__d{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.chip{border:1px solid var(--ink);padding:11px 16px;font-size:13px;font-weight:800;white-space:nowrap}
.chip--f{background:var(--ink);color:var(--paper)}
.flow__a{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.flow__a span{font-size:11.5px;font-weight:800;letter-spacing:.02em}
.flow__c--p .flow__a span{color:var(--blue)}
.flow__c--u .flow__a span{color:var(--teal)}
.flow__t{font-size:13.5px;line-height:2;color:var(--dim);margin:0}
@media(max-width:820px){.flow{grid-template-columns:1fr}
  .flow__c+.flow__c{border-left:0;border-top:1px solid var(--rule);padding-left:0}}

/* ---------------- section frame ---------------- */
.sec{padding:104px 0}
.sec__h{max-width:62ch}
.sec--tight{padding:88px 0}

/* ---------------- problems ---------------- */
.probs{display:grid;grid-template-columns:1fr 1fr;margin-top:56px;border-top:1px solid var(--ink)}
.prob{padding:40px 0 44px}
.prob+.prob{border-left:1px solid var(--rule);padding-left:52px}
.prob__l{font-family:var(--lt);font-size:11px;font-weight:800;letter-spacing:.22em;display:block;margin-bottom:8px}
.prob--p .prob__l{color:var(--blue)}
.prob--u .prob__l{color:var(--teal)}
.prob__n{font-size:17px;font-weight:800;letter-spacing:-.02em;margin:0 0 24px}
.plist{list-style:none;margin:0;padding:0}
.plist li{font-size:14.5px;line-height:1.85;color:var(--dim);padding:15px 0 15px 34px;
  border-top:1px solid var(--rule-s);position:relative}
.plist li:first-child{border-top:0;padding-top:0}
.plist li::before{content:"";position:absolute;left:0;top:1.42em;width:18px;height:1px;background:var(--ink);opacity:.35}
.plist li:first-child::before{top:.9em}
@media(max-width:820px){.probs{grid-template-columns:1fr}
  .prob+.prob{border-left:0;border-top:1px solid var(--rule);padding-left:0}}

/* ---------------- steps ---------------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border-top:1px solid var(--ink)}
.step{padding:38px 30px 46px 0}
.step+.step{border-left:1px solid var(--rule);padding-left:30px}
.step__n{font-family:var(--lt);font-size:52px;font-weight:800;letter-spacing:-.05em;line-height:1;
  color:var(--rule);display:block;margin-bottom:22px}
.step h3{font-size:17px;margin-bottom:12px}
.step p{font-size:13px;line-height:1.95;color:var(--dim);margin:0}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}
  .step:nth-child(3){border-left:0}.step:nth-child(n+3){border-top:1px solid var(--rule);padding-top:34px}}
@media(max-width:560px){.steps{grid-template-columns:1fr}
  .step+.step{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:34px}}

/* ---------------- benefits (inverted) ---------------- */
.ben{background:var(--ink);color:var(--paper)}
.ben .idx{color:rgba(255,255,255,.42)}
.ben h2{color:var(--paper)}
.ben .dek{color:rgba(255,255,255,.6)}
.bcols{display:grid;grid-template-columns:1fr 1fr;margin-top:56px;border-top:1px solid rgba(255,255,255,.28)}
.bcol{padding:42px 0 48px}
.bcol+.bcol{border-left:1px solid rgba(255,255,255,.18);padding-left:52px}
.bcol__l{font-family:var(--lt);font-size:11px;font-weight:800;letter-spacing:.22em;display:block;margin-bottom:14px}
.bcol--p .bcol__l{color:#7E9BFF}
.bcol--u .bcol__l{color:#3FD9BC}
.bcol h3{font-size:23px;line-height:1.5;margin-bottom:30px;letter-spacing:-.03em}
.blist{list-style:none;margin:0;padding:0}
.blist li{padding:20px 0;border-top:1px solid rgba(255,255,255,.14);display:grid;
  grid-template-columns:auto 1fr;gap:18px;align-items:baseline}
.blist li:first-child{border-top:0;padding-top:0}
.blist em{font-style:normal;font-family:var(--lt);font-size:11px;font-weight:800;letter-spacing:.14em;
  color:rgba(255,255,255,.38)}
.blist b{display:block;font-size:15px;font-weight:800;margin-bottom:5px;letter-spacing:-.01em}
.blist span{display:block;font-size:13px;line-height:1.9;color:rgba(255,255,255,.55)}
@media(max-width:820px){.bcols{grid-template-columns:1fr}
  .bcol+.bcol{border-left:0;border-top:1px solid rgba(255,255,255,.18);padding-left:0}}

/* ---------------- lineup ---------------- */
.lineup{margin-top:56px;border-top:1px solid var(--ink)}
.lrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) auto;gap:46px;align-items:center;
  padding:44px 0;border-bottom:1px solid var(--rule);transition:padding .3s cubic-bezier(.2,.7,.3,1)}
.lrow:hover{padding-left:14px}
.lname{font-family:var(--lt);font-size:clamp(30px,3.6vw,46px);font-weight:800;letter-spacing:-.05em;line-height:1;margin:0}
.lname span{color:var(--blue)}
/* サービスロゴが用意されている行は画像に差し替える（PD for HR は独自字形のため） */
.lname--logo{line-height:0}
.lname--logo img{display:block;width:auto;height:clamp(30px,3.6vw,46px)}
.lrow--u .lname span{color:var(--teal)}
.lcat{font-size:12.5px;color:var(--faint);margin:12px 0 0;letter-spacing:.04em}
.ltxt{font-size:14.5px;line-height:2;color:var(--dim);margin:0}
.llinks{display:grid;gap:9px;min-width:210px}
.llink{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:13px;font-weight:800;
  padding:12px 0;border-bottom:1px solid var(--rule);transition:border-color .2s,color .2s}
.llink:hover{border-color:var(--ink)}
.llink--p{color:var(--blue)}
.llink--u{color:var(--teal)}
.more{font-size:13px;color:var(--faint);margin:26px 0 0}
@media(max-width:960px){.lrow{grid-template-columns:1fr;gap:22px}.llinks{min-width:0}}

/* ---------------- cases ---------------- */
.cases{display:grid;grid-template-columns:1fr 1fr;margin-top:56px;border-top:1px solid var(--ink)}
.case{padding:44px 0 48px}
.case+.case{border-left:1px solid var(--rule);padding-left:52px}
.case__m{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--faint);margin-bottom:24px}
.case__tag{font-family:var(--lt);font-size:10.5px;font-weight:800;letter-spacing:.14em;
  border:1px solid var(--ink);padding:5px 10px;color:var(--ink)}
.case q{quotes:none;display:block;font-size:22px;font-weight:800;line-height:1.55;letter-spacing:-.03em;margin-bottom:20px}
.case p{font-size:13.5px;line-height:2;color:var(--dim);margin:0 0 32px}
.metric{display:flex;align-items:baseline;gap:14px;border-top:1px solid var(--rule);padding-top:24px}
.metric b{font-family:var(--lt);font-size:56px;font-weight:800;letter-spacing:-.055em;line-height:1}
.case--p .metric b{color:var(--blue)}
.case--u .metric b{color:var(--teal)}
.metric span{font-size:12.5px;color:var(--faint);letter-spacing:.04em}
@media(max-width:820px){.cases{grid-template-columns:1fr}
  .case+.case{border-left:0;border-top:1px solid var(--rule);padding-left:0}}

/* ---------------- faq ---------------- */
.faq{margin-top:52px;border-top:1px solid var(--ink)}
.q{border-bottom:1px solid var(--rule)}
.q summary{list-style:none;cursor:pointer;padding:26px 56px 26px 0;position:relative;
  font-size:16px;font-weight:800;letter-spacing:-.015em;transition:color .2s}
.q summary::-webkit-details-marker{display:none}
.q summary:hover{color:var(--blue)}
.q summary::after,.q summary::before{content:"";position:absolute;right:8px;top:50%;background:var(--ink);transition:transform .25s,opacity .2s}
.q summary::before{width:15px;height:1.5px;margin-top:-.75px}
.q summary::after{width:1.5px;height:15px;margin-top:-7.5px;right:14.75px}
.q[open] summary::after{transform:rotate(90deg);opacity:0}
.q__a{margin:0;padding:0 60px 30px 0;font-size:14px;line-height:2.05;color:var(--dim)}

/* ---------------- cta ---------------- */
.cta{background:var(--ink);color:var(--paper);padding:110px 0}
.cta h2{color:var(--paper);max-width:20ch}
.cta p{color:rgba(255,255,255,.6);font-size:15.5px;margin:26px 0 0;max-width:46ch;line-height:2.05}
.cta .acts{margin-top:44px}
.cta .idx{color:rgba(255,255,255,.42)}

/* ---------------- footer ---------------- */
.ft{background:var(--ink);color:rgba(255,255,255,.62);padding:0 0 44px}
.ft__t{display:grid;grid-template-columns:1.2fr 1fr auto;gap:44px;padding:56px 0;
  border-top:1px solid rgba(255,255,255,.18)}
.ft .brand{color:var(--paper);font-size:20px}
.ft__tag{font-size:13px;line-height:2;margin:16px 0 0;max-width:32ch}
.ft__n{display:grid;align-content:start;gap:12px;font-size:13.5px;font-weight:700}
.ft__n a:hover{color:var(--paper)}
.ft__b{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  padding-top:26px;border-top:1px solid rgba(255,255,255,.14);font-size:12px;color:rgba(255,255,255,.4)}
@media(max-width:820px){.ft__t{grid-template-columns:1fr;gap:30px}}

/* ---------------- motion ---------------- */
@media(prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(20px);
    transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
  .js .rv.in{opacity:1;transform:none}
  .rv[data-d="1"]{transition-delay:.09s}
  .rv[data-d="2"]{transition-delay:.18s}
  .rv[data-d="3"]{transition-delay:.27s}
}

/* =========================================================
   フロー図の矢印（CSSで描画。SVGだと横伸縮で歪むため）
   ========================================================= */
.ln{display:block;position:relative;height:9px;width:100%}
.ln::before{content:"";position:absolute;left:0;right:8px;top:3.7px;height:1.5px;background:currentColor}
.ln::after{content:"";position:absolute;right:0;top:0;width:0;height:0;
  border-left:9px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.ln--d::before{background:repeating-linear-gradient(90deg,currentColor 0 7px,transparent 7px 12px)}
.flow__c--p .ln{color:var(--blue)}
.flow__c--u .ln{color:var(--teal)}

/* STEP見出しは1行/2行が混在するため高さを揃え、説明文の開始位置を合わせる */
.step h3{min-height:calc(1.55em * 2)}

/* 2カラム分割の左側に右余白を入れ、本文や罫線が区切り線にぶつからないようにする */
.probs > .prob:first-child,
.cases > .case:first-child{padding-right:52px}
.bcols > .bcol:first-child{padding-right:52px}
@media(max-width:820px){
  .probs > .prob:first-child,
  .cases > .case:first-child,
  .bcols > .bcol:first-child{padding-right:0}
}
/* =========================================================
   ヒーロー：立場別の2分割（中央にPDを据える）
   ========================================================= */
.split{margin-top:52px;border-top:1px solid var(--ink);position:relative}
/* 中央の縦罫。PDマークの背後を貫く */
.split::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--rule)}

.split__row{display:grid;grid-template-columns:1fr 1fr}
.split__c{padding:44px 58px 0 0;min-width:0}
.split__row>.split__c+.split__c{padding:44px 0 0 58px}
.split__row--head .split__c{padding-bottom:38px}

.split__l{display:flex;align-items:center;gap:11px;font-family:var(--lt);font-size:10.5px;
  font-weight:800;letter-spacing:.22em;margin-bottom:20px}
.split__l i{width:7px;height:7px;flex:none;border-radius:50%}
.split__l em{font-style:normal;font-family:var(--jp);font-size:11.5px;letter-spacing:.06em;
  font-weight:700;color:var(--faint)}
.split__c--p .split__l{color:var(--blue)} .split__c--p .split__l i{background:var(--blue)}
.split__c--u .split__l{color:var(--teal)} .split__c--u .split__l i{background:var(--teal)}

.split__h{font-size:clamp(22px,2.7vw,34px);line-height:1.4;letter-spacing:-.045em;font-weight:800;margin:0}
.split__u{position:relative;display:inline-block;padding-bottom:.08em;white-space:nowrap}
.split__u::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.07em}
.split__c--p .split__u::after{background:var(--blue)}
.split__c--u .split__u::after{background:var(--teal)}

/* ---- 中央のPDとお金の流れ ---- */
.hub{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:26px;padding:34px 0 38px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.hub__side{display:flex;align-items:center;gap:16px;min-width:0}
.hub__side--p{justify-content:flex-start}
.hub__side--u{justify-content:flex-end}
.hub__a{flex:1;display:flex;flex-direction:column;gap:7px;min-width:0}
.hub__a>span{font-size:11.5px;font-weight:800;letter-spacing:.02em}
.hub__side--p .hub__a>span{color:var(--blue);text-align:right}
.hub__side--u .hub__a>span{color:var(--teal)}
.hub__side--p .ln{color:var(--blue)}
.hub__side--u .ln{color:var(--teal)}
/* PDマーク：黒の正方形。左右の流れがここで交わる */
.hub__mark{width:92px;height:92px;display:grid;place-items:center;background:var(--ink);color:var(--paper);
  font-family:var(--lt);font-weight:800;font-size:29px;letter-spacing:-.04em;position:relative;z-index:1}
.hub__cap{grid-column:1/-1;margin:22px 0 0;text-align:center;font-size:11.5px;
  letter-spacing:.08em;color:var(--faint)}

.split__t{font-size:13.5px;line-height:2;color:var(--dim);margin:0 0 26px}
.split__list{list-style:none;margin:0 0 30px;padding:0}
.split__list li{font-size:14px;line-height:1.8;padding:13px 0 13px 26px;
  border-top:1px solid var(--rule-s);position:relative}
.split__list li:first-child{border-top:0;padding-top:0}
.split__list li::before{content:"";position:absolute;left:0;top:1.28em;width:13px;height:1px;
  background:currentColor;opacity:.45}
.split__list li:first-child::before{top:.86em}

.split__link{display:inline-flex;align-items:center;gap:12px;font-size:13.5px;font-weight:800;
  padding-bottom:7px;border-bottom:1px solid currentColor;transition:gap .25s cubic-bezier(.2,.7,.3,1)}
.split__link:hover{gap:18px}
.split__c--p .split__link{color:var(--blue)}
.split__c--u .split__link{color:var(--teal)}
.split__row:last-child .split__c{padding-bottom:52px}

/* 左向き矢印（中央のPDから外へ／外から中央へ） */
.ln--l::before{left:8px;right:0}
.ln--l::after{left:0;right:auto;border-left:0;border-right:9px solid currentColor}

.split__f{display:none}
.acts--center{justify-content:center;margin-top:44px}

@media(max-width:900px){
  .split::before{display:none}
  .split{display:flex;flex-direction:column}
  .split__row{display:contents}
  .sc-p1{order:1}.sc-p2{order:2}.sc-u1{order:3}.sc-u2{order:4}
  .hub{display:none}
  .split__f{display:flex;align-items:center;gap:14px;margin-bottom:24px}
  .split__f .hub__a>span{color:inherit}
  .split__c--p .split__f .ln{color:var(--blue)}
  .split__c--u .split__f .ln{color:var(--teal)}
  .split__c--p .split__f .hub__a>span{color:var(--blue);text-align:left}
  .split__c--u .split__f .hub__a>span{color:var(--teal)}
  .split__row{grid-template-columns:minmax(0,1fr)}
  .split__c{padding:36px 0 0}
  .split__row>.split__c+.split__c{padding:36px 0 0;border-top:1px solid var(--rule)}
  .split__row--head .split__c{padding-bottom:26px}
  .split__row:last-child .split__c{padding-bottom:36px}
  .hub{grid-template-columns:minmax(0,1fr);gap:20px;padding:30px 0 32px}
  .hub__side--u{justify-content:flex-start}
  .hub__mark{width:72px;height:72px;font-size:23px;justify-self:center}
  .hub__side--p .hub__a>span{text-align:left}
}
@media(max-width:420px){
  .hub__side{gap:10px}
  .hub .chip{padding:9px 11px;font-size:12px}
  .hub__a>span{font-size:10.5px}
  .acts--center{justify-content:stretch}
  .acts--center .btn{width:100%}
}


/* =========================================================
   日本語の折り返し品質
   ========================================================= */
/* 意味の切れ目以外で折り返さない単位 */
.nw{white-space:nowrap}
.idx__sep{opacity:.5;margin:0 .5em}
/* 文節単位で折り返す（対応ブラウザのみ。非対応でも従来通り） */
h1,h2,h3,.split__h,.dek,.hero__lead,.split__t,.case q,.cta p,.step p,.prob__n,.bcol h3,.ltxt,.case p{
  word-break:auto-phrase;
}
/* ラベルはモバイルで字間を詰めて収める */
@media(max-width:520px){
  .idx{font-size:10px;letter-spacing:.16em;line-height:2}
}


/* ---- CTAの線画（黒背景） ---- */
.cta__in{display:block}
.cta__i{margin:56px 0 0;color:rgba(255,255,255,.5);border-top:1px solid rgba(255,255,255,.16);padding-top:44px}
.cta__i svg{width:100%;max-width:520px;height:auto;display:block}
@media(max-width:640px){.cta__i{margin-top:40px;padding-top:32px}}

/* =========================================================
   図解（実データ構造を持つグラフ）
   ========================================================= */
.bcol__i{margin:0 0 34px}
.bcol__i svg{width:100%;height:auto;display:block;overflow:visible}
.bcol__i svg text{font-family:var(--jp)}
.fig__cap{font-family:var(--lt);font-size:10px;letter-spacing:.14em;
  color:rgba(255,255,255,.35);margin:16px 0 0}


/* =========================================================
   お問い合わせページ
   ========================================================= */
.hero--page{padding:72px 0 0}
.hero--page h1{font-size:clamp(30px,5vw,48px)}
.hero--page .hero__lead{margin-bottom:0}
.sec--form{padding:72px 0 110px}

/* 送信結果の通知 */
.note{border-top:2px solid var(--ink);padding:32px 0 36px;margin:0 0 48px;max-width:64ch}
.note--err{border-top-color:#C0392B}
.note__t{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:0 0 10px}
.note--err .note__t{color:#C0392B}
.note__d{font-size:14.5px;line-height:2;color:var(--dim);margin:0 0 26px}
.note--ok .note__d{margin-bottom:30px}

/* ハニーポット（人には見せない） */
.pd-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* <legend>はfieldsetのpadding-topを無視して罫線をまたぐ位置に描画されるブラウザが多いため、
   罫線→legendの余白は.formのpadding-topで確保する（fieldset側では制御しない）。 */
.form{max-width:760px;border-top:1px solid var(--ink);padding-top:48px}
.f-set{border:0;padding:0 0 16px;margin:0}
.f-legend{font-size:15px;font-weight:800;letter-spacing:-.01em;padding:0;margin-bottom:20px}
.req,.opt{font-family:var(--lt);font-size:10px;font-weight:800;letter-spacing:.14em;
  padding:3px 7px;margin-left:9px;vertical-align:2px}
.req{background:var(--ink);color:var(--paper)}
.opt{border:1px solid var(--rule);color:var(--faint)}

.f-radios{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:700px){.f-radios{grid-template-columns:minmax(0,1fr)}}
.f-radio{cursor:pointer;display:block}
.f-radio input{position:absolute;opacity:0;width:0;height:0}
.f-radio__box{display:block;border:1px solid var(--rule);padding:20px 22px;transition:border-color .2s,background-color .2s}
.f-radio:hover .f-radio__box{border-color:var(--ink)}
.f-radio input:checked+.f-radio__box{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.f-radio input:focus-visible+.f-radio__box{outline:2px solid var(--blue);outline-offset:2px}
.f-radio__l{display:block;font-size:15px;font-weight:800;margin-bottom:7px}
.f-radio input:checked+.f-radio__box .f-radio__l{color:var(--blue)}
.f-radio__d{display:block;font-size:12.5px;line-height:1.8;color:var(--dim)}

.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
@media(max-width:700px){.f-grid{grid-template-columns:minmax(0,1fr);gap:0}}
.f-row{margin:0;padding:30px 0 0}
.f-label{display:block;font-size:14px;font-weight:800;margin-bottom:12px;letter-spacing:-.01em}
.f-input{width:100%;font:inherit;font-size:15px;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:12px 2px;
  transition:border-color .2s}
.f-input::placeholder{color:#B9B6AE}
.f-input:hover{border-bottom-color:var(--faint)}
.f-input:focus{outline:0;border-bottom-color:var(--blue);border-bottom-width:2px;padding-bottom:11px}
.f-textarea{border:1px solid var(--rule);padding:16px;line-height:1.95;resize:vertical}
.f-textarea:focus{border-color:var(--blue);border-width:1px;box-shadow:inset 0 0 0 1px var(--blue);padding-bottom:16px}

.f-agree{margin:40px 0 0;padding:26px 0 0;border-top:1px solid var(--rule)}
.f-agree label{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;
  font-size:13.5px;line-height:1.95;color:var(--dim);cursor:pointer}
.f-agree input{width:19px;height:19px;margin:2px 0 0;accent-color:var(--blue);flex:none}

.form .acts{margin-top:38px}
.form .btn{cursor:pointer;font-family:inherit}

/* 取扱メニューは PD for AD に属する補足なので、ADの行と地続きの子行として見せる。
   独立した注記にすると、下の「その他の業界」の一文と区別がつかなくなる。 */
.lrow--sub{border-bottom:0;padding-bottom:16px}
.lsub{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) auto;gap:46px;
  align-items:center;padding:0 0 34px;border-bottom:1px solid var(--rule)}
.lsub__k{font-family:var(--lt);font-size:10.5px;font-weight:800;letter-spacing:.24em;
  color:var(--faint);margin:0;display:flex;align-items:center;gap:13px}
.lsub__k::before{content:"";width:26px;height:1px;background:var(--rule)}
.lsub__t{font-size:13.5px;line-height:1.95;color:var(--dim);margin:0}
.lsub .llinks{min-width:210px}
@media(max-width:960px){
  .lrow--sub{padding-bottom:22px}
  .lsub{grid-template-columns:1fr;gap:14px;padding-bottom:26px}
  .lsub__k::before{display:none}
}

/* =========================================================
   トップを各LPのデザイン感に寄せる（2026-07 方針転換）
   ・エディトリアル（罫線＋大型タイポ）から、LPと同じ
     カード基調・●ラベル・丸角ボタンへ。
   ・LPが white/カード/角丸/影 なので、それに合わせる。
   ========================================================= */
:root{--cardline:#E5E8EC;--bg2:#F5F7F9;--cardsh:0 2px 16px rgba(20,40,70,.05)}
body{background:#fff}

/* ---- ●ラベル（LPの .adlabel 相当） ---- */
.idx{display:inline-flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.16em;
  color:var(--ink);margin-bottom:20px}
.idx::before{content:"";width:11px;height:11px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 35%,#8AA6FF,var(--blue))}
.ben .idx{color:#fff}
.ben .idx::before{background:radial-gradient(circle at 35% 35%,#9FE7D6,var(--teal))}

/* ---- 丸角ボタン（LPの .adbtn 相当） ---- */
.btn{border-radius:999px;border:0;background:var(--blue);color:#fff;padding:17px 34px;
  box-shadow:0 8px 22px rgba(31,63,224,.24)}
.btn:hover{background:#1a35c0}
.btn--o{background:#fff;color:var(--ink);border:1.6px solid var(--ink);box-shadow:none}
.btn--o:hover{background:var(--ink);color:#fff}
.btn--i{background:#fff;color:var(--ink);border:0;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.btn--io{background:transparent;color:#fff;border:1.6px solid rgba(255,255,255,.5);box-shadow:none}
.hdbtn{border-radius:999px;background:var(--ink);color:#fff;border:0;letter-spacing:.1em;padding:12px 22px}
.hdbtn:hover{background:var(--blue)}

/* ---- PROBLEM をカードに ---- */
.probs{border-top:0;gap:22px;margin-top:44px}
.prob{background:#fff;border:1px solid var(--cardline);border-radius:16px;
  padding:30px 30px 34px;box-shadow:var(--cardsh)}
.prob+.prob{border-left:0;padding-left:30px}
.plist li::before{background:var(--blue);opacity:1;height:2px;width:14px;top:1.5em}
.prob--u .plist li::before{background:var(--teal)}

/* ---- MECHANISM ステップをカードに ---- */
.steps{border-top:0;gap:16px;margin-top:44px}
.step{background:#fff;border:1px solid var(--cardline);border-radius:16px;
  padding:28px 26px 32px;box-shadow:var(--cardsh)}
.step+.step{border-left:0;padding-left:26px}
.step__n{color:var(--blue);font-size:34px;opacity:.92}
@media(max-width:900px){.step:nth-child(3){border-left:0}
  .step:nth-child(n+3){border-top:0;padding-top:28px}}
@media(max-width:560px){.step+.step{border-top:0;padding-top:28px}}

/* ---- BENEFITS カラムをカード（濃色面の上に一段明るいカード）に ---- */
.bcols{border-top:0;gap:20px;margin-top:44px}
.bcol{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:16px;padding:30px 30px 34px}
.bcol+.bcol{border-left:0;padding-left:30px}

/* ---- FAQ を余白付きで ---- */
.faq{margin-top:40px}

/* PDロゴ（面取り字形をSVGで描き起こし・解像度非依存）。色は文字色に追従 */
.brand{display:inline-flex;align-items:center;line-height:0}
.brand .pdmark{height:23px;width:auto;display:block}
.ft .brand{color:var(--paper)}
.ft .brand .pdmark{height:26px}

/* 新着記事（トップ・KNOWLEDGE） */
.cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px;margin-top:52px}
.col{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:16px;overflow:hidden;
  background:#fff;transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s}
.col:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(20,30,60,.10)}
.col__th{display:block;aspect-ratio:1200/630;background-size:cover;background-position:center;
  border-bottom:1px solid var(--rule-s)}
.col__b{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.col__meta{font-family:var(--lt);font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--faint)}
.col__t{font-size:16px;font-weight:800;line-height:1.62;letter-spacing:-.01em;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.col__more{margin-top:auto;font-size:13px;font-weight:800;color:var(--blue)}
@media(max-width:560px){.cols{grid-template-columns:1fr}}