/*
 * しくみLP（/how/、page-how.php）専用 v3。
 * 画面を縦に二分：左＝受け取る側（紺）、右＝払う側（青緑）、真ん中＝PD（金）。
 * 写真は2色に染め分け（.hw-duo）、見出しは明朝、番号と英字は Inter。
 * body に .hw が付くので、子要素のクラスは必ず hw- で始める。
 */
.hw{
  --bg:#fbfaf7; --ink:#1b2530; --muted:#5b6670; --faint:#8d969d; --line:#e0ddd4; --tint:#f3f1ea;
  --l:#1c3366; --l2:#122449; --l-soft:#edf0f7; --r:#0e7d70; --r2:#09584f; --r-soft:#e7f3f0;
  --gold:#a8822f; --mark:#f2dd9b; --night:#0e1c38;
  --min:'Shippori Mincho','YuMincho','Hiragino Mincho ProN',serif;
  --sans:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;
  --en:Inter,'Helvetica Neue',Arial,sans-serif;
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.85;
}
.hw *, .hw *::before, .hw *::after{ box-sizing:border-box; }
.hw a{ color:inherit; text-decoration:none; }
.hw img{ max-width:100%; height:auto; display:block; }
.hw :focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.hw h1, .hw h2{ font-family:var(--min); font-weight:500; margin:0; line-height:1.5; word-break:auto-phrase; }
.hw p{ margin:0; }
.hw-wrap{ max-width:1160px; width:calc(100% - 64px); margin-inline:auto; }
.hw-c-l{ color:var(--l); } .hw-c-r{ color:var(--r); }
.hw-sp{ display:none; }
.hw-en{ font-family:var(--en); font-size:11px; font-weight:600; letter-spacing:.32em; }

/* 写真を色で染める */
.hw-duo{ position:absolute; inset:0; overflow:hidden; background:var(--l); }
.hw-duo--r{ background:var(--r); }
.hw-duo img{ width:100%; height:100% !important; object-fit:cover; filter:grayscale(1) contrast(1.1) brightness(1.15); mix-blend-mode:multiply; opacity:.85; transition:transform 1.2s cubic-bezier(.2,.8,.2,1); }
.hw-duo::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,14,26,.55) 0%,transparent 55%); }

/* イラストは白い丸 */
.hw-ill{ flex:none; width:110px; height:110px; display:grid; place-items:center; border-radius:50%; background:#fff; border:1px solid var(--line); padding:14px; overflow:hidden; }
.hw-ill img{ width:100%; height:100%; object-fit:contain; }

/* ===== 左右の顔 =====
 * 印（PD）は上の帯だけ、文字はその下から左右同じ高さで始める。印と文字が同じ高さに来ないので重ならない。
 * 縦書きは外側の端。文字の外側の余白は縦書きの幅ぶん空けて、ぶつけない。 */
.hw-hero{ --tate:clamp(64px,7.4vw,132px); --seal:clamp(128px,12vw,172px); --top:calc(var(--seal) + 84px);
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); background:var(--night); }
.hw-hero__side{ position:relative; overflow:hidden; display:flex; align-items:flex-start; color:#fff; min-width:0; padding:var(--top) 0 170px; }
.hw-hero__side--l{ justify-content:flex-end; padding-left:calc(var(--tate) + 64px); padding-right:clamp(28px,4vw,56px); }
.hw-hero__side--r{ justify-content:flex-start; padding-right:calc(var(--tate) + 64px); padding-left:clamp(28px,4vw,56px); }
.hw-hero__tate{ position:absolute; top:40px; z-index:1; writing-mode:vertical-rl; font-family:var(--min); font-size:var(--tate); line-height:1; letter-spacing:.06em; color:rgba(255,255,255,.92); }
.hw-hero__side--l .hw-hero__tate{ left:36px; }
.hw-hero__side--r .hw-hero__tate{ right:36px; }
.hw-hero__txt{ position:relative; z-index:1; width:100%; max-width:420px; }
.hw-hero__side--l .hw-hero__txt{ text-align:right; }
.hw-hero__txt .hw-en{ color:var(--mark); }
.hw-hero__who{ margin-top:10px !important; font-family:var(--min); font-size:22px; letter-spacing:.12em; }
.hw-hero__who small{ display:block; font-family:var(--sans); font-size:12px; letter-spacing:.08em; opacity:.75; }
.hw-hero__t{ margin-top:18px !important; font-family:var(--min); font-size:clamp(20px,2.4vw,34px); line-height:1.45; letter-spacing:.04em; white-space:nowrap; }
.hw-hero__d{ margin-top:14px !important; font-size:13px; line-height:1.8; color:rgba(255,255,255,.82); }
.hw-seal{ position:absolute; left:50%; top:40px; z-index:3; width:var(--seal); height:var(--seal); transform:translateX(-50%); display:grid; place-items:center; border-radius:50%; background:var(--gold); box-shadow:0 0 0 10px rgba(255,255,255,.12),0 30px 60px -20px rgba(0,0,0,.6); }
.hw-seal img{ width:40%; }
.hw-seal__ring{ position:absolute; inset:6px; width:calc(100% - 12px); height:calc(100% - 12px); animation:hw-spin 28s linear infinite; }
.hw-seal__ring text{ font-family:var(--en); font-size:11.5px; font-weight:600; letter-spacing:.24em; fill:rgba(255,255,255,.88); }
@keyframes hw-spin{ to{ transform:rotate(360deg); } }

/* 見出しの白い札（写真に重ねる） */
.hw-lede{ position:relative; z-index:4; margin-top:-120px; }
.hw-lede__in{ max-width:960px; margin:0 auto; padding:52px 64px 48px; background:#fff; text-align:center; box-shadow:0 40px 80px -50px rgba(14,28,56,.55); }
.hw-lede__in::before{ content:""; display:block; width:56px; height:3px; margin:0 auto 22px; background:linear-gradient(90deg,var(--l) 0 50%,var(--r) 50% 100%); }
.hw-lede__k{ font-size:13px; font-weight:700; letter-spacing:.18em; color:var(--gold); }
.hw-lede h1{ margin-top:12px; font-size:clamp(26px,3.3vw,42px); letter-spacing:.04em; }
.hw-lede__d{ margin:20px auto 0 !important; max-width:40em; font-size:15px; color:var(--muted); }
.hw-lede__acts{ margin-top:28px !important; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:14px 28px; }
.hw .hw-btn{ display:inline-flex; gap:10px; align-items:center; padding:17px 36px; background:var(--night); color:#fff; font-weight:700; border-radius:999px; transition:background .2s,transform .2s; }
.hw .hw-btn:hover{ background:var(--l); transform:translateY(-2px); }
.hw .hw-link{ font-weight:700; color:var(--night); border-bottom:1px solid currentColor; padding-bottom:2px; }

/* ===== 節の見出し ===== */
.hw-sec{ padding:130px 0; }
.hw-sec--first{ padding-top:110px; }
.hw-sec--tint{ background:var(--tint); }
.hw-head{ text-align:center; margin-bottom:56px; }
.hw-head__no{ display:inline-flex; align-items:center; gap:14px; margin-bottom:16px !important; }
.hw-head__no span{ font-family:var(--en); font-size:14px; font-weight:700; color:var(--gold); }
.hw-head__no span::after{ content:""; display:inline-block; vertical-align:middle; width:36px; height:1px; margin-left:14px; background:var(--gold); }
.hw-head__no i{ font-style:normal; font-family:var(--en); font-size:11px; font-weight:600; letter-spacing:.32em; color:var(--faint); }
.hw-head h2{ font-size:clamp(28px,3.2vw,42px); letter-spacing:.05em; }
.hw-head__d{ margin-top:14px !important; color:var(--muted); font-size:15px; }

/* ===== No.01 2×2 ===== */
.hw-ba__cols, .hw-ba__row{ display:grid; grid-template-columns:150px minmax(0,1fr) minmax(0,1fr); gap:18px; }
.hw-ba__cols{ margin-bottom:12px; font-family:var(--min); font-size:20px; letter-spacing:.14em; text-align:center; }
.hw-ba__row--after{ position:relative; margin-top:54px; }
.hw-ba__row--after::before{ content:""; position:absolute; left:168px; right:0; top:-40px; height:26px; background:no-repeat center/26px 26px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8822f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M5 13l7 7 7-7'/%3E%3C/svg%3E"); }
.hw-ba__lab{ display:flex; flex-direction:column; justify-content:center; gap:4px; padding-right:8px; border-right:1px solid var(--line); font-family:var(--min); font-size:17px; }
.hw-ba__lab span{ font-family:var(--en); font-size:24px; font-weight:700; letter-spacing:.06em; color:transparent; -webkit-text-stroke:1px var(--faint); }
.hw-ba__row--after .hw-ba__lab span{ -webkit-text-stroke:1px var(--gold); }
.hw-ba__cell{ display:flex; align-items:center; gap:22px; padding:26px 28px; background:#fff; border:1px dashed var(--line); min-width:0; }
.hw-ba__cell p{ font-family:var(--min); font-size:19px; line-height:1.6; }
.hw-ba__row--before .hw-ba__cell p{ color:var(--muted); }
.hw-ba__row--before .hw-ill{ filter:grayscale(1); opacity:.75; }
.hw-ba__cell--l{ border:0; box-shadow:inset 0 4px 0 var(--l),0 24px 50px -36px rgba(14,28,56,.5); }
.hw-ba__cell--r{ border:0; box-shadow:inset 0 4px 0 var(--r),0 24px 50px -36px rgba(14,28,56,.5); }

/* ===== No.02 しくみ ===== */
.hw-cols{ display:grid; grid-template-columns:minmax(0,1fr) 170px minmax(0,1fr); margin-bottom:16px; font-family:var(--min); font-size:20px; letter-spacing:.14em; }
.hw-cols .hw-c-l{ text-align:right; }
.hw-steps{ position:relative; margin:0; padding:0; list-style:none; display:grid; gap:24px; }
.hw-steps::before{ content:""; position:absolute; left:50%; top:-10px; bottom:-10px; width:2px; margin-left:-1px; background:var(--gold); opacity:.5; }
.hw-step{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) 170px minmax(0,1fr); align-items:center; margin:0; }
.hw-step__l, .hw-step__r{ display:flex; align-items:center; gap:22px; padding:24px 28px; background:#fff; min-width:0; }
.hw-step__l{ flex-direction:row-reverse; text-align:right; box-shadow:inset -4px 0 0 var(--l); }
.hw-step__r{ box-shadow:inset 4px 0 0 var(--r); }
.hw-step__l p, .hw-step__r p{ font-size:16px; font-weight:700; line-height:1.7; }
.hw-step .hw-ill{ width:92px; height:92px; padding:12px; }
.hw-step__c{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:8px; }
.hw-step__c b{ width:70px; height:70px; display:grid; place-items:center; border-radius:50%; background:var(--tint); border:1px solid var(--gold); color:var(--gold); font-family:var(--en); font-weight:600; font-size:22px; letter-spacing:.04em; box-shadow:0 0 0 8px var(--tint); }
.hw-step:nth-child(3) .hw-step__c b{ background:var(--gold); color:#fff; }
.hw-step__c span{ padding:0 10px; background:var(--tint); font-family:var(--min); font-size:16px; white-space:nowrap; }

/* ===== No.03 お金の流れ（夜の紺） ===== */
.hw-flow{ position:relative; background:var(--night); color:#fff; overflow:hidden; }
.hw-flow::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%); mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%); }
.hw-flow .hw-wrap{ position:relative; }
.hw-flow .hw-head__no i{ color:rgba(255,255,255,.5); }
.hw-map{ display:grid; grid-template-columns:190px minmax(0,1fr) 150px minmax(0,1fr) 190px; grid-template-rows:auto auto; align-items:center; column-gap:16px; row-gap:44px; padding:20px 0 10px; }
.hw-map__node{ grid-row:1 / 3; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; }
.hw-map__node--l{ grid-column:1; } .hw-map__node--r{ grid-column:5; }
.hw-map__node .hw-ill{ width:130px; height:130px; border:0; }
.hw-map__node--l .hw-ill{ box-shadow:0 0 0 6px var(--l),0 0 0 7px rgba(255,255,255,.3); }
.hw-map__node--r .hw-ill{ box-shadow:0 0 0 6px var(--r),0 0 0 7px rgba(255,255,255,.3); }
.hw-map__node b{ margin-top:12px; font-family:var(--min); font-weight:500; font-size:21px; letter-spacing:.1em; }
.hw-map__node small{ font-size:12px; color:rgba(255,255,255,.6); }
.hw-map__top{ grid-column:2 / 5; grid-row:1; }
.hw-map__pd{ grid-column:3; grid-row:2; justify-self:center; width:136px; height:136px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 12px rgba(168,130,47,.18),0 0 60px rgba(242,221,155,.25); }
.hw-map__pd img{ width:62px; }
.hw-map__pd small{ font-family:var(--en); font-size:9px; font-weight:600; letter-spacing:.3em; }
.hw-map__a1{ grid-column:2; grid-row:2; } .hw-map__a2{ grid-column:4; grid-row:2; }
.hw-map p{ margin-top:12px !important; text-align:center; font-size:12px; line-height:1.6; color:rgba(255,255,255,.6); }
.hw-map p b{ display:block; font-family:var(--min); font-weight:500; font-size:18px; color:#fff; letter-spacing:.06em; }
.hw-arrow{ position:relative; display:block; height:2px; margin:0 8px; background:rgba(255,255,255,.45); }
.hw-arrow::after{ content:""; position:absolute; top:50%; transform:translateY(-50%); border-top:7px solid transparent; border-bottom:7px solid transparent; }
.hw-arrow--r::after{ right:-2px; border-left:13px solid rgba(255,255,255,.6); }
.hw-arrow--l::after{ left:-2px; border-right:13px solid var(--mark); }
.hw-arrow--gold{ background:linear-gradient(90deg,var(--mark),rgba(242,221,155,.4)); }
/* 流れる粒：サービスとお金が実際に動いて見えるように */
.hw-arrow i{ position:absolute; top:50%; width:14px; height:14px; margin-top:-7px; border-radius:50%; background:#fff; box-shadow:0 0 16px 4px rgba(255,255,255,.5); animation:hw-run-r 2.8s cubic-bezier(.45,.05,.55,.95) infinite; }
.hw-arrow--gold i{ background:var(--mark); box-shadow:0 0 16px 4px rgba(242,221,155,.6); animation-name:hw-run-l; }
.hw-map__a1 .hw-arrow i{ animation-delay:1.4s; }
@keyframes hw-run-r{ 0%{ left:0; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ left:calc(100% - 14px); opacity:0; } }
@keyframes hw-run-l{ 0%{ left:calc(100% - 14px); opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ left:0; opacity:0; } }

/* ===== 波で切った写真の帯 ===== */
.hw-band{ position:relative; height:380px; overflow:hidden; background:var(--night); }
.hw-band__ph{ position:absolute; inset:0; width:100%; height:100% !important; object-fit:cover; opacity:.55; }
.hw-wave{ position:absolute; left:0; width:100%; height:60px; z-index:2; }
.hw-wave--t{ top:-1px; fill:var(--night); }
.hw-wave--b{ bottom:-1px; fill:var(--bg); }
.hw-loop{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); z-index:1; overflow:hidden; }
.hw-loop__in{ display:flex; width:max-content; animation:hw-loop 36s linear infinite; }
.hw-loop span{ padding-right:80px; font-family:var(--min); font-size:clamp(56px,7vw,104px); line-height:1.3; letter-spacing:.06em; white-space:nowrap; color:transparent; -webkit-text-stroke:1.2px rgba(255,255,255,.9); }
@keyframes hw-loop{ to{ transform:translateX(-50%); } }

/* ===== No.04 よいところ：左右の面 ===== */
.hw-merit{ padding-top:120px; }
.hw-merit__split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.hw-merit__side{ display:flex; padding:80px 56px 90px; }
.hw-merit__side--l{ justify-content:flex-end; background:var(--l-soft); }
.hw-merit__side--r{ background:var(--r-soft); }
.hw-merit__in{ width:100%; max-width:480px; }
.hw-merit__side--l .hw-en{ color:var(--l); } .hw-merit__side--r .hw-en{ color:var(--r); }
.hw-merit__t{ margin-top:12px !important; font-family:var(--min); font-size:clamp(22px,2.3vw,30px); line-height:1.55; letter-spacing:.04em; }
.hw-merit ol{ margin:34px 0 0; padding:0; list-style:none; border-top:1px solid rgba(27,37,48,.18); }
.hw-merit li{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:6px; padding:22px 0; margin:0; border-bottom:1px solid rgba(27,37,48,.12); font-size:14px; color:var(--muted); }
.hw-merit li span{ font-family:var(--en); font-size:34px; font-weight:300; line-height:1.1; }
.hw-merit__side--l li span{ color:var(--l); } .hw-merit__side--r li span{ color:var(--r); }
.hw-merit li b{ display:block; font-size:17px; color:var(--ink); margin-bottom:2px; }

/* ===== No.05 業界ごと ===== */
.hw-inds{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.hw-ind{ --c:#00A9CE; display:flex; flex-direction:column; min-width:0; background:#fff; border:1px solid var(--line); transition:box-shadow .3s,transform .3s; }
.hw-ind--ad{ --c:#CB1A1D; } .hw-ind--fc{ --c:#0E8A5F; }
.hw-ind:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -40px rgba(14,28,56,.55); }
.hw-ind__ph{ position:relative; display:block; aspect-ratio:4 / 3; overflow:hidden; background:var(--night); }
.hw-ind__ph img{ width:100%; height:100% !important; object-fit:cover; opacity:.9; transition:transform 1s cubic-bezier(.2,.8,.2,1); }
.hw-ind:hover .hw-ind__ph img{ transform:scale(1.05); }
.hw-ind__ph::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,14,26,.75) 0%,transparent 60%); }
.hw-ind__name{ position:absolute; left:24px; bottom:18px; z-index:1; display:flex; flex-direction:column; color:#fff; font-family:var(--min); font-size:28px; line-height:1.3; }
.hw-ind__name small{ font-family:var(--en); font-size:11px; font-weight:700; letter-spacing:.2em; opacity:.9; }
.hw-ind__name::before{ content:""; width:28px; height:3px; margin-bottom:10px; background:var(--c); }
.hw-ind__row{ display:grid; grid-template-columns:72px minmax(0,1fr); column-gap:12px; padding:16px 24px; border-top:1px solid var(--line); }
.hw-ind__row small{ grid-row:1 / 3; align-self:start; padding:2px 0; font-size:11px; font-weight:700; text-align:center; color:#fff; background:var(--l); }
.hw-ind__row--r small{ background:var(--r); }
.hw-ind__row b{ font-size:12px; color:var(--muted); }
.hw-ind__row em{ font-style:normal; font-weight:700; font-size:15px; line-height:1.6; }
.hw-ind__go{ margin-top:auto; padding:14px 24px 18px; text-align:right; font-size:13px; font-weight:700; color:var(--c); border-top:1px solid var(--line); }
.hw-note{ margin-top:22px !important; text-align:center; font-size:13px; color:var(--muted); }

/* ===== No.06 費用と条件／No.07 よくある質問 ===== */
.hw-terms, .hw-faq{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; }
.hw-terms__side{ margin:0; }
.hw-terms__who{ padding-bottom:14px; margin-bottom:4px !important; font-family:var(--min); font-size:22px; letter-spacing:.14em; border-bottom:3px solid var(--l); color:var(--l); }
.hw-terms__side--r .hw-terms__who, .hw-faq__side--r .hw-terms__who{ border-color:var(--r); color:var(--r); }
.hw-terms__side div{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; padding:20px 0; border-bottom:1px solid var(--line); }
.hw-terms dt{ font-weight:700; }
.hw-terms dd{ margin:0; font-size:14px; color:var(--muted); }
.hw-faq details{ border-bottom:1px solid var(--line); }
.hw-faq summary{ list-style:none; cursor:pointer; position:relative; padding:20px 40px 20px 0; font-weight:700; line-height:1.6; }
.hw-faq summary::-webkit-details-marker{ display:none; }
.hw-faq summary::after{ content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-family:var(--en); font-size:22px; font-weight:300; color:var(--gold); }
.hw-faq details[open] summary::after{ content:"−"; }
.hw-faq details p{ padding:0 0 20px; font-size:14px; color:var(--muted); }

/* ===== 相談の入口 ===== */
.hw-ask{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.hw .hw-ask__side{ position:relative; display:flex; align-items:flex-end; min-height:380px; color:#fff; overflow:hidden; }
.hw-ask__side--r{ justify-content:flex-end; }
.hw-ask__side:hover .hw-duo img{ transform:scale(1.05); }
.hw-ask__in{ position:relative; z-index:1; display:flex; flex-direction:column; gap:12px; padding:56px; }
.hw-ask__side--r .hw-ask__in{ align-items:flex-end; text-align:right; }
.hw-ask__in .hw-en{ color:var(--mark); }
.hw-ask__t{ font-family:var(--min); font-size:clamp(24px,2.6vw,34px); line-height:1.45; letter-spacing:.04em; color:#fff; }
.hw-ask__go{ margin-top:8px; display:inline-flex; gap:10px; align-items:center; width:max-content; padding:15px 28px; border-radius:999px; background:var(--mark); color:#14202e; font-weight:700; font-size:15px; transition:transform .2s; }
.hw-ask__side:hover .hw-ask__go{ transform:translateX(4px); }

/* ===== 幅が狭いとき ===== */
@media (max-width:1000px){
  .hw-step__l, .hw-step__r{ flex-direction:column; text-align:center; gap:12px; padding:20px 16px; }
  .hw-map{ grid-template-columns:120px minmax(0,1fr) 100px minmax(0,1fr) 120px; }
  .hw-map__node .hw-ill{ width:96px; height:96px; }
  .hw-map__pd{ width:100px; height:100px; } .hw-map__pd img{ width:48px; }
  .hw-inds{ grid-template-columns:minmax(0,1fr); max-width:560px; margin-inline:auto; }
  .hw-terms, .hw-faq{ grid-template-columns:minmax(0,1fr); }
  .hw-merit__side{ padding:64px 32px 72px; }
}
@media (max-width:640px){
  .hw-sp{ display:inline; }
  .hw-wrap{ width:calc(100% - 32px); }
  /* スマホ：縦書きと印は上の帯、文字はその下。左右の外側の余白は詰める */
  .hw-hero{ --tate:38px; --seal:76px; --top:206px; }
  .hw-hero__side--l, .hw-hero__side--r{ padding-left:12px; padding-right:12px; padding-bottom:120px; }
  .hw-hero__tate{ top:24px; }
  .hw-hero__side--l .hw-hero__tate{ left:14px; } .hw-hero__side--r .hw-hero__tate{ right:14px; }
  .hw-hero__who{ font-size:15px; } .hw-hero__who small{ font-size:10px; }
  .hw-hero__t{ font-size:15px; }
  .hw-hero__d{ display:none; }
  .hw-hero__txt .hw-en{ font-size:9px; letter-spacing:.2em; }
  .hw-seal{ top:40px; box-shadow:0 0 0 6px rgba(255,255,255,.12); }
  .hw-seal__ring{ display:none; }
  .hw-lede{ margin-top:-90px; }
  .hw-lede__in{ padding:36px 22px 32px; text-align:left; }
  .hw-lede__in::before{ margin-left:0; }
  .hw-lede h1{ font-size:24px; }
  .hw-lede__d{ font-size:14px; }
  .hw-lede__acts{ justify-content:flex-start; }
  .hw-sec{ padding:84px 0; }
  .hw-head{ margin-bottom:36px; }
  .hw-head h2{ font-size:25px; }
  .hw-ba__cols{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; font-size:15px; }
  .hw-ba__cols span{ display:none; }
  .hw-ba__row{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
  .hw-ba__lab{ grid-column:1 / -1; flex-direction:row; align-items:baseline; gap:10px; border:0; padding:0; font-size:15px; }
  .hw-ba__lab span{ font-size:20px; }
  .hw-ba__row--after{ margin-top:40px; }
  .hw-ba__row--after::before{ left:0; top:-34px; }
  .hw-ba__cell{ flex-direction:column; text-align:center; gap:12px; padding:18px 12px; }
  .hw-ba__cell .hw-ill{ width:80px; height:80px; padding:10px; }
  .hw-ba__cell p{ font-size:14px; }
  .hw-cols{ grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr); font-size:15px; }
  .hw-cols .hw-c-l, .hw-cols .hw-c-r{ text-align:center; }
  .hw-step{ grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr); align-items:stretch; }
  .hw-step__l, .hw-step__r{ padding:14px 8px; }
  .hw-step__l p, .hw-step__r p{ font-size:13px; }
  .hw-step .hw-ill{ width:64px; height:64px; padding:8px; }
  .hw-step__c{ justify-content:center; }
  .hw-step__c b{ width:38px; height:38px; font-size:14px; box-shadow:0 0 0 5px var(--tint); }
  .hw-step__c span{ writing-mode:vertical-rl; padding:6px 0; font-size:13px; letter-spacing:.1em; }
  .hw-map{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto; row-gap:28px; }
  .hw-map__node{ grid-row:1; }
  .hw-map__node--l{ grid-column:1; } .hw-map__node--r{ grid-column:2; }
  .hw-map__node .hw-ill{ width:88px; height:88px; padding:10px; }
  .hw-map__node b{ font-size:17px; }
  .hw-map__top{ grid-column:1 / 3; grid-row:2; }
  .hw-map__pd{ grid-column:1 / 3; grid-row:3; width:96px; height:96px; }
  .hw-map__a1{ grid-column:1; grid-row:4; } .hw-map__a2{ grid-column:2; grid-row:4; }
  .hw-map p b{ font-size:15px; }
  .hw-band{ height:240px; }
  .hw-merit{ padding-top:84px; }
  .hw-merit__split{ grid-template-columns:minmax(0,1fr); }
  .hw-merit__side{ padding:48px 20px 52px; }
  .hw-terms__side div{ grid-template-columns:minmax(0,1fr); gap:4px; }
  .hw-ask{ grid-template-columns:minmax(0,1fr); }
  .hw .hw-ask__side{ min-height:280px; }
  .hw-ask__in{ padding:32px 22px; }
}
@media (prefers-reduced-motion:reduce){
  .hw-seal__ring, .hw-arrow i, .hw-loop__in{ animation:none; }
  .hw-arrow i{ display:none; }
}


/* 呼び名を「サービスを提供する会社／利用する会社」にした分の調整（2026-11-08） */
.hw-hero__who{ font-size:20px; letter-spacing:.08em; }
.hw-ind__row{ grid-template-columns:minmax(0,1fr); row-gap:4px; }
.hw-ind__row small{ grid-row:auto; justify-self:start; padding:2px 10px; }
@media (max-width:640px){
  .hw-hero__who{ font-size:12px; letter-spacing:.02em; }
  .hw-ba__cols, .hw-cols{ font-size:12px; letter-spacing:.04em; }
  .hw-map__node b{ font-size:15px; }
}

/* トップ（front-page.php）で使うとき */
.hw-top{ background:transparent; }
/* 白い札は置かず、3業界の入口を写真の下端に重ねる（hub.css の margin-top:-96px のまま） */
.hw-top .hw-hero__side{ padding-bottom:150px; }
.hw-sr{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* お金の流れ：スマホは「だれが → だれに → 何を」を1行ずつ（.hw-map-sp）。PCは .hw-map */
.hw-map-sp{ display:none; margin:0; padding:0; list-style:none; }
.hw-arrow--r.hw-arrow--gold::after{ left:auto; right:-2px; border-right:0; border-left:13px solid var(--mark); }
.hw-arrow--r.hw-arrow--gold i{ animation-name:hw-run-r; }
@media (max-width:640px){
  .hw-map{ display:none; }
  .hw-map-sp{ display:grid; gap:14px; }
  .hw-map-sp li{ display:grid; grid-template-columns:72px minmax(0,1fr) 72px; align-items:center; gap:8px; margin:0; padding:18px 12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); }
  .hw-map-sp__who{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
  .hw-map-sp__who b{ font-family:var(--min); font-weight:500; font-size:12px; line-height:1.4; }
  .hw-map-sp .hw-ill{ width:56px; height:56px; padding:7px; border:0; }
  .hw-map-sp__who--l .hw-ill{ box-shadow:0 0 0 3px var(--l),0 0 0 4px rgba(255,255,255,.35); }
  .hw-map-sp__who--r .hw-ill{ box-shadow:0 0 0 3px var(--r),0 0 0 4px rgba(255,255,255,.35); }
  .hw-map-sp__pd{ width:56px; height:56px; display:grid; place-items:center; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(168,130,47,.25); }
  .hw-map-sp__pd img{ width:30px; }
  .hw-map-sp__what{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; min-width:0; }
  .hw-map-sp__what b{ font-family:var(--min); font-weight:500; font-size:15px; color:#fff; line-height:1.3; }
  .hw-map-sp__what small{ font-size:10.5px; line-height:1.5; color:rgba(255,255,255,.6); }
  .hw-map-sp__what .hw-arrow{ width:calc(100% - 8px); margin:4px 0; }
  .hw-map-sp__n{ font-family:var(--en); font-size:10px; font-weight:700; letter-spacing:.2em; color:var(--mark); }
}

/* 業界ごと：M&A を足して4枚（2026-11-08） */
.hw-inds{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.hw-ind--ma{ --c:#3B5BDB; }
.hw-ind__name{ font-size:24px; }
@media (max-width:1180px){ .hw-inds{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:none; } }
@media (max-width:640px){ .hw-inds{ grid-template-columns:minmax(0,1fr); } }

/* トップの「PDが間に入る。それだけ。」に置くお金の流れ（front-page.php、2026-11-08）。
   トップは明るい地なので、/how/ の夜の紺の図を白い地の版にする（紺の箱だけ浮いて見えると指摘された） */
.hw.top-flow{ position:relative; margin-top:44px; padding:44px 40px 36px; background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:4px; overflow:hidden; font-size:16px; box-shadow:0 30px 60px -48px rgba(14,28,56,.45); }
.hw.top-flow::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(22,41,74,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(22,41,74,.05) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(ellipse at center,#000 25%,transparent 75%); mask-image:radial-gradient(ellipse at center,#000 25%,transparent 75%); }
.hw.top-flow > *{ position:relative; }
.hw.top-flow .hw-map{ padding:0; }
.top-flow .hw-map__node b{ color:var(--ink); }
.top-flow .hw-map__node small{ color:var(--muted); }
.top-flow .hw-map__node--l .hw-ill{ box-shadow:0 0 0 5px var(--l),0 0 0 6px rgba(28,51,102,.15); }
.top-flow .hw-map__node--r .hw-ill{ box-shadow:0 0 0 5px var(--r),0 0 0 6px rgba(14,125,112,.15); }
.top-flow .hw-map p{ color:var(--muted); }
.top-flow .hw-map p b{ color:var(--ink); }
.top-flow .hw-arrow{ background:rgba(22,41,74,.28); }
.top-flow .hw-arrow--r::after{ border-left-color:rgba(22,41,74,.45); }
.top-flow .hw-arrow i{ background:var(--l); box-shadow:0 0 12px 3px rgba(28,51,102,.25); }
.top-flow .hw-arrow--gold{ background:linear-gradient(90deg,var(--gold),rgba(168,130,47,.3)); }
.top-flow .hw-arrow--gold.hw-arrow--l::after{ border-right-color:var(--gold); }
.top-flow .hw-arrow--gold.hw-arrow--r::after{ border-left-color:var(--gold); }
.top-flow .hw-arrow--gold i{ background:var(--gold); box-shadow:0 0 12px 3px rgba(168,130,47,.35); }
.top-flow .hw-map__pd{ box-shadow:0 0 0 10px rgba(168,130,47,.12); }
.top-flow .hw-map-sp li{ background:var(--bg); border-color:var(--line); }
.top-flow .hw-map-sp__what b{ color:var(--ink); }
.top-flow .hw-map-sp__what small{ color:var(--muted); }
.top-flow .hw-map-sp__n{ color:var(--gold); }
.top-flow .hw-map-sp__who b{ color:var(--ink); }
@media (max-width:640px){ .hw.top-flow{ padding:20px 12px; margin-top:32px; } }

/* ===== v4 試作（body.hw-v4。?v=4 のときだけ）2026-11-12 本人「このページももっとオシャレに」 =====
 * 線画アイコンをやめ、金の大きな引用符・明朝・英字ラベルで見せる。業界の節の下に「そのほかの業界も」の帯。 */
.hw-v4 .hw-ba__cell{ position:relative; display:block; padding:34px 30px 30px 74px; min-height:140px; }
.hw-v4 .hw-ba__cell::before{ content:"“"; position:absolute; left:22px; top:10px; font-family:var(--min); font-size:84px; line-height:1; color:var(--line); }
.hw-v4 .hw-ba__row--after .hw-ba__cell::before{ color:var(--gold); }
.hw-v4 .hw-ba__cell p{ font-size:21px; line-height:1.65; letter-spacing:.02em; }
.hw-v4 .hw-ba__row--after .hw-ba__cell p{ color:var(--ink); font-weight:600; }
.hw-v4 .hw-ba__row--before .hw-ba__cell{ background:transparent; }
.hw-v4 .hw-step__l, .hw-v4 .hw-step__r{ display:block; padding:30px 32px; }
.hw-v4 .hw-step__l p, .hw-v4 .hw-step__r p{ font-family:var(--min); font-size:19px; font-weight:600; line-height:1.65; letter-spacing:.02em; }
.hw-v4 .hw-step__c small{ font-family:var(--en); font-size:10px; font-weight:600; letter-spacing:.3em; color:var(--faint); }
.hw-v4 .hw-step__c b{ width:78px; height:78px; font-size:24px; }

/* そのほかの業界も、物の代金も */
.hw-any{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:36px; margin-top:28px; padding:40px 48px; overflow:hidden; background:var(--night); color:#fff; }
.hw-any::before{ content:"ANY"; position:absolute; right:-10px; bottom:-34px; font-family:var(--min); font-size:180px; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(242,221,155,.18); pointer-events:none; }
.hw-any__in{ position:relative; }
.hw-any .hw-en{ color:var(--mark); }
.hw-any__t{ margin-top:10px !important; font-family:var(--min); font-size:clamp(24px,2.8vw,34px); font-weight:500; line-height:1.45; letter-spacing:.04em; }
.hw-any__chips{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 0; padding:0; }
.hw-any__chips li{ margin:0; padding:6px 14px; border:1px solid rgba(242,221,155,.4); font-size:13px; font-weight:700; color:rgba(255,255,255,.88); }
.hw-any__acts{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.hw-any__btn{ display:inline-flex; align-items:center; gap:12px; padding:16px 30px; background:var(--mark); color:var(--night) !important; font-weight:700; }
.hw-any__link{ font-weight:700; color:#fff !important; border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:2px; }
@media (max-width:640px){
  .hw-v4 .hw-ba__cell{ padding:26px 16px 20px 52px; min-height:0; }
  .hw-v4 .hw-ba__cell::before{ left:12px; font-size:58px; }
  .hw-v4 .hw-ba__cell p{ font-size:16px; }
  .hw-v4 .hw-step__l, .hw-v4 .hw-step__r{ padding:18px 14px; }
  .hw-v4 .hw-step__l p, .hw-v4 .hw-step__r p{ font-size:15px; }
  .hw-any{ grid-template-columns:minmax(0,1fr); gap:22px; padding:30px 22px; }
  .hw-any::before{ font-size:110px; bottom:-20px; }
}
@media (max-width:640px){
  .hw-v4 .hw-ba__cell{ padding:14px 14px 16px; text-align:left; }
  .hw-v4 .hw-ba__cell::before{ position:static; display:block; height:30px; font-size:48px; line-height:1; }
  .hw-v4 .hw-ba__cell p{ font-size:15px; text-align:left; }
}

/* ===== v4 見出し（2026-11-12 本人「見出しをオシャレに」）：後ろに大きな番号の線画、上に英字、後半に金のマーカー、下に短い金線 ===== */
.hw-v4 .hw-head{ position:relative; padding-top:64px; margin-bottom:64px; }
.hw-v4 .hw-head__big{ position:absolute; left:50%; top:-28px; transform:translateX(-50%); font-family:var(--en); font-weight:200; font-size:clamp(120px,14vw,190px); line-height:1; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1px rgba(168,130,47,.42); pointer-events:none; user-select:none; }
.hw-v4 .hw-head__no{ position:relative; display:block; margin-bottom:14px !important; }
.hw-v4 .hw-head__no i{ font-family:var(--en); font-style:normal; font-size:11px; font-weight:600; letter-spacing:.5em; color:var(--gold); }
.hw-v4 .hw-head h2{ position:relative; font-size:clamp(30px,3.6vw,48px); line-height:1.5; letter-spacing:.06em; }
.hw-v4 .hw-head h2 em{ font-style:normal; background:linear-gradient(transparent 68%,rgba(242,221,155,.75) 68%,rgba(242,221,155,.75) 92%,transparent 92%); padding:0 .06em; }
.hw-v4 .hw-head h2::after{ content:""; display:block; width:44px; height:2px; margin:26px auto 0; background:var(--gold); }
.hw-v4 .hw-head__d{ position:relative; margin-top:18px !important; }
.hw-v4 .hw-flow .hw-head__big{ -webkit-text-stroke:1px rgba(242,221,155,.28); }
.hw-v4 .hw-flow .hw-head h2 em{ background:none; color:var(--mark); }

/* 白い札：売る側（紺）と買う側（青緑）を左右にずらして組む */
.hw-v4 .hw-lede__h{ display:grid; gap:14px; max-width:720px; margin:14px auto 0; font-size:clamp(26px,3.2vw,42px); letter-spacing:.04em; line-height:1.4; }
.hw-v4 .hw-lede__line{ display:block; }
.hw-v4 .hw-lede__line.is-l{ text-align:left; }
.hw-v4 .hw-lede__line.is-r{ text-align:right; }
.hw-v4 .hw-lede__line small{ display:block; margin-bottom:4px; font-family:var(--en); font-size:10.5px; font-weight:600; letter-spacing:.42em; }
.hw-v4 .hw-lede__line.is-l small, .hw-v4 .hw-lede__line.is-l b{ color:var(--l); }
.hw-v4 .hw-lede__line.is-r small, .hw-v4 .hw-lede__line.is-r b{ color:var(--r); }
.hw-v4 .hw-lede__line b{ font-weight:600; border-bottom:3px solid currentColor; padding-bottom:2px; }
.hw-v4 .hw-lede__in::before{ background:linear-gradient(90deg,var(--l) 0 50%,var(--r) 50% 100%); width:80px; }
@media (max-width:640px){
  .hw-v4 .hw-head{ padding-top:44px; margin-bottom:40px; }
  .hw-v4 .hw-head__big{ top:-14px; font-size:96px; }
  .hw-v4 .hw-head h2{ font-size:25px; }
  .hw-v4 .hw-lede__h{ font-size:20px; gap:12px; }
  .hw-v4 .hw-lede__line.is-r{ text-align:left; padding-left:1em; }
  .hw-v4 .hw-lede__line b{ border-bottom-width:2px; }
}