:root{
--white:#FFFFFF; --ink:#171D2B; --gray:#5C6472; --gray-light:#8E96A4;
--line:#E4E9F2; --line-soft:#F0F3F9; --soft:#F4F7FD; --soft-deep:#DCE4F1;
--accent:#2F6BE4; --accent-deep:#1F52BC; --accent-soft:#E8F0FE;
--accent-warm:#BE7016; --accent-warm-soft:#FBEEDA;
--accent-green:#1B8265; --accent-green-soft:#DFF1EA;
--accent-rose:#C4436B; --accent-rose-soft:#FCE7EE;
--cream:#FBF7F0; --cream-line:#EDE3D4;
/* お問い合わせ枠の面。白文字の可読性の下限がここを決めている。
白 on #3A6DE2 でコントラスト比 4.75:1（WCAG AA が 4.5:1）。
これ以上明るくすると本文が読めなくなるので、下げないこと。 */
--panel-1:#3A6DE2; --panel-2:#3060D4; --panel-3:#2450BE;
}
/* ── 差し色の使い分け ─────────────────────────────────────────
* 色を増やすと散らかるので、色ごとに役割を固定している。
* 迷ったら青。装飾のために別の色を使わないこと。
*
* 青 accent … 導線。リンク、ボタン、現在地、進行中のもの
* 緑 accent-green … 検証できる事実。古物商許可、FBA、完了した工程
* 琥珀 accent-warm … 時間と条件。所要期間、取引条件、取扱商品カテゴリ
* 臙脂 accent-rose … 注意。必須項目、記入を促す箇所
*
* クリーム(--cream)は表の見出し面に使う。青系の淡色だと本文と同化するため。
*/
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans JP',sans-serif;color:var(--ink);background:var(--white);
line-height:1.9;letter-spacing:.02em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Zen Kaku Gothic New',sans-serif;font-weight:700}
img,svg{display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit}
table{border-collapse:collapse;width:100%}
.container{max-width:1080px;margin:0 auto;padding:0 28px}
.container-wide{max-width:1320px;margin:0 auto;padding:0 28px}
/* bits */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;
letter-spacing:.18em;color:var(--accent);margin-bottom:18px}
/* 見出しの前の点。単色だと全ページで同じ顔になるので、青から琥珀へ抜ける */
.eyebrow::before{content:'';width:8px;height:8px;border-radius:50%;
background:linear-gradient(135deg,var(--accent) 0%,var(--accent-warm) 100%)}
.sec-h{font-family:'Zen Kaku Gothic New';font-size:40px;font-weight:900;line-height:1.25}
.sec-h .ja{display:block;font-size:14.5px;font-weight:700;color:var(--gray);letter-spacing:.08em;margin-top:12px}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.btn{display:inline-flex;align-items:center;gap:14px;padding:17px 32px;font-size:14.5px;font-weight:700;
border-radius:999px;transition:transform .22s,background .22s,color .22s,border-color .22s}
.btn-fill{background:linear-gradient(180deg,#3B76EA 0%,#2A61DA 100%);color:#fff;
box-shadow:0 12px 26px -14px rgba(47,107,228,.85)}
.btn-fill:hover{background:linear-gradient(180deg,#2A61DA 0%,#1F52BC 100%);transform:translateY(-3px)}
.btn-white{background:#fff;color:var(--ink);box-shadow:0 12px 30px -16px rgba(23,29,43,.4)}
.btn-white:hover{transform:translateY(-3px)}
.btn-line{border:1.5px solid var(--line)}
.btn-line:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px)}
.btn .ar{width:18px;height:8px;flex-shrink:0}
.txt-link{display:inline-flex;align-items:center;gap:12px;font-size:13.5px;font-weight:700;color:var(--accent)}
.txt-link .ar{width:18px;height:8px;transition:transform .22s}
.txt-link:hover .ar{transform:translateX(5px)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:80;transition:background .3s,box-shadow .3s}
.site-header.solid{background:rgba(255,255,255,.95);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line-soft)}
.site-header .container-wide{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{font-family:'Zen Kaku Gothic New';font-weight:700;font-size:17px;line-height:1.25;letter-spacing:.06em}
.logo span{display:block;font-family:'Noto Sans JP';font-weight:400;font-size:9px;color:var(--gray-light);letter-spacing:.2em;margin-top:2px}
.nav{display:flex;align-items:center;gap:24px}
.nav a{font-size:13px;font-weight:500;position:relative;padding:4px 0}
.nav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--accent);border-radius:2px;transition:width .22s}
.nav a:hover::after,.nav a.cur::after{width:100%}
.nav a.cur{color:var(--accent)}
.header-cta a{font-size:12.5px;font-weight:700;background:var(--accent);color:#fff;padding:12px 24px;
border-radius:999px;transition:background .2s,transform .2s}
.header-cta a:hover{background:var(--accent-deep);transform:translateY(-2px)}
.menu-toggle{display:none}
.drawer{position:fixed;inset:0;background:#fff;z-index:90;padding:96px 28px 40px;transform:translateY(-100%);
transition:transform .4s cubic-bezier(.2,.7,.3,1);overflow-y:auto}
.drawer.open{transform:translateY(0)}
.drawer a{display:block;font-family:'Zen Kaku Gothic New';font-weight:700;font-size:19px;padding:18px 0;border-bottom:1px solid var(--line-soft)}
.drawer-close{position:absolute;top:22px;right:24px;font-size:28px;line-height:1}
/* hero (top) */
.hero{position:relative;padding-top:76px;background:#fff}
.hero-city{position:relative;width:100%;overflow:hidden}
.hero-city .cityframe{opacity:0;transform:scale(1.03);animation:cityIn 1.4s .1s cubic-bezier(.2,.7,.3,1) forwards;will-change:transform}
.hero-city .cityframe :is(svg,img){width:100%;height:auto;display:block}
@keyframes cityIn{to{opacity:1;transform:scale(1)}}
.hero-copy{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:min(660px,86vw);text-align:center;z-index:3}
.hero-copy h1{font-size:42px;font-weight:900;line-height:1.5;margin-bottom:20px}
.hero-copy h1 .ln{display:block;opacity:0;transform:translateY(22px);animation:lineUp .9s cubic-bezier(.2,.7,.3,1) forwards}
.hero-copy h1 .ln:nth-child(1){animation-delay:.3s}
.hero-copy h1 .ln:nth-child(2){animation-delay:.45s}
.hero-copy h1 em{font-style:normal;color:var(--accent)}
@keyframes lineUp{to{opacity:1;transform:translateY(0)}}
.hero-copy p{font-size:14px;color:var(--gray);margin-bottom:26px;opacity:0;animation:lineUp .9s .62s cubic-bezier(.2,.7,.3,1) forwards}
.hero-copy .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;opacity:0;animation:lineUp .9s .76s cubic-bezier(.2,.7,.3,1) forwards}
/* page hero (lower pages) */
.page-hero{padding:140px 0 44px;background:linear-gradient(180deg,var(--soft),#fff)}
.crumb{font-size:11.5px;color:var(--gray-light);margin-bottom:16px}
.crumb a:hover{color:var(--accent)}
.page-hero h1{font-family:'Zen Kaku Gothic New';font-size:40px;font-weight:900;line-height:1.3}
.page-hero .en{display:block;font-size:12px;font-weight:700;letter-spacing:.22em;color:var(--accent);margin-bottom:12px}
.page-hero p{font-size:14.5px;color:var(--gray);max-width:60ch;margin-top:18px}
/* sections */
.section{padding:80px 0}
.section.tight{padding:56px 0}
.section.pb-sm{padding-bottom:56px}
.section.pt-sm{padding-top:56px}
/* 一色の面より、ごく浅い階調の方が「作り込まれている」感じが出る。
上端の細い罫線がセクションの切り替わりを明確にする。 */
.soft-bg{background:linear-gradient(180deg,#F8FAFE 0%,#EFF4FC 100%);
border-top:1px solid #E7EDF8;border-bottom:1px solid #E7EDF8}
.sec-head{margin-bottom:42px}
.sec-head p.lead{font-size:14.5px;color:var(--gray);max-width:56ch;margin-top:18px}
.sec-head.center p.lead,.center .sec-head p.lead{margin-left:auto;margin-right:auto}
.sec-head.center,.center .sec-head{text-align:center}
.sec-head.center .eyebrow,.center .sec-head .eyebrow{justify-content:center}
/* credentials */
.cred-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cred-cell{background:linear-gradient(180deg,#fff 0%,#FBFCFE 100%);
border:1px solid var(--line);border-radius:18px;padding:26px;
box-shadow:0 22px 44px -34px rgba(23,29,43,.3)}
/* この3つは検証できる事実なので、ラベルにチェックを添える。装飾ではなく印。 */
/* ここは「確認できる事実」なので、導線の青ではなく検証の緑を当てる */
.cred-cell .lb{display:flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.18em;
color:var(--accent-green);font-weight:700;margin-bottom:10px}
.cred-cell .lb::before{content:'';flex:none;width:13px;height:13px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.6 8.4l3.2 3.2 7.6-7.6' fill='none' stroke='%231B8265' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
/* 角丸に沿って border-top を引くと両端が細って弓なりに見えるので、
内側に短い直線のバーを置く */
.cred-cell{position:relative;overflow:hidden}
.cred-cell::before{content:'';position:absolute;top:0;left:0;width:72px;height:3px;
background:var(--accent-green)}
.cred-cell .vl{font-family:'Zen Kaku Gothic New';font-size:18px;font-weight:700;line-height:1.5;margin-bottom:6px}
.cred-cell .nt{font-size:12px;color:var(--gray)}
/* statement + people */
.statement h2{font-size:30px;line-height:1.8;margin-bottom:24px}
.statement h2 em{font-style:normal;color:var(--accent)}
.statement .cols{display:flex;flex-direction:column;gap:20px;max-width:660px}
.statement .cols p{font-size:14.5px;color:var(--gray)}
.people-row{display:flex;align-items:flex-end;justify-content:center;gap:26px;margin-top:52px;border-bottom:2px solid var(--line)}
.people-row .pp :is(svg,img){height:168px;width:auto;max-width:100%}
.people-row .pp:nth-child(odd){animation:bob 6s ease-in-out infinite}
.people-row .pp:nth-child(even){animation:bob 6s ease-in-out infinite;animation-delay:-3s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
/* marquee */
/* 帯のタグライン。
カンプでは68pxの淡いゴーストだったが、和文フォントのラテン字形を巨大に
使っていたため字面が緩く、色も薄すぎて「意味のない飾り」に見えていた。
小さく詰めて字間を開き、上下に細い罫線を引いて、装飾ではなく組版として
置き直している。端はフェードさせ、切れずに消えるように。 */
.marquee{padding:30px 0;overflow:hidden;
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.marquee-inner{display:flex;width:max-content;animation:slide 26s linear infinite;will-change:transform}
.marquee-inner.is-live{animation:none}
.marquee span{display:inline-flex;align-items:center;font-family:'Noto Sans JP',sans-serif;
font-size:14px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;
color:var(--gray);white-space:nowrap;padding-right:0}
.marquee span::after{content:'';flex:none;width:5px;height:5px;border-radius:50%;
background:var(--accent);margin:0 54px 0 46px;opacity:.6}
@keyframes slide{to{transform:translateX(-50%)}}
/* Illustrations are external SVGs loaded as ![]()
. Each file carries width and
height attributes so the browser knows the aspect ratio before it downloads —
which also means `height` arrives as a presentational hint. `height:auto` is
what overrides that hint; without it a width-constrained figure keeps the
hinted height and the artwork stretches. */
/* service cards */
.svc-track{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.svc-card{background:#fff;border-radius:24px;padding:32px 28px;border:1px solid var(--line);
position:relative;transition:transform .3s,box-shadow .3s}
.svc-card:hover{transform:translateY(-8px);box-shadow:0 34px 60px -34px rgba(23,29,43,.35)}
.svc-card .num{position:absolute;right:24px;top:20px;font-family:'Zen Kaku Gothic New';font-size:13px;
font-weight:700;color:var(--gray-light)}
.svc-card .num b{color:var(--accent);font-size:22px}
.svc-fig{height:224px;display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.svc-fig :is(svg,img){max-height:212px;max-width:100%;width:auto;height:auto;transition:transform .35s}
.svc-card:hover .svc-fig :is(svg,img){transform:scale(1.06) translateY(-4px)}
.svc-card h3{font-size:19px;line-height:1.6;margin-bottom:12px}
.svc-card p{font-size:13.5px;color:var(--gray);margin-bottom:16px}
.svc-card ul li{font-size:12.5px;display:flex;gap:10px;padding:7px 0;border-top:1px solid var(--line-soft)}
.svc-card ul li:first-child{border-top:none}
/* 提供できることの列挙。淡い青の丸だと余白と区別がつかないので緑のチェックにする */
.svc-card ul li::before{content:'';width:14px;height:14px;flex-shrink:0;margin-top:7px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.6 8.4l3.2 3.2 7.6-7.6' fill='none' stroke='%231B8265' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
/* service detail rows */
.svc-row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:56px 0;border-bottom:1px solid var(--line)}
/* 最初の行はセクション上余白と重なるので、自前の上余白は持たせない */
.svc-row:first-child{padding-top:0}
.svc-row:last-child{border-bottom:none}
.svc-row.rev .svc-vis{order:-1}
.svc-vis{display:flex;align-items:center;justify-content:center;padding:16px 0}
.svc-vis :is(svg,img){max-height:324px;max-width:100%;width:auto;height:auto}
.svc-row .n{font-size:11.5px;font-weight:700;letter-spacing:.2em;color:var(--accent);margin-bottom:14px}
.svc-row h3{font-size:23px;line-height:1.6;margin-bottom:14px}
.svc-row>div>p{font-size:14px;color:var(--gray);margin-bottom:20px}
.pts li{font-size:13.5px;display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--line-soft)}
.pts li:last-child{border-bottom:1px solid var(--line-soft)}
.pts li::before{content:'';width:15px;height:15px;flex-shrink:0;margin-top:7px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.6 8.4l3.2 3.2 7.6-7.6' fill='none' stroke='%231B8265' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
/* Q&A */
.qa-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.qa-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;transition:transform .3s,box-shadow .3s}
.qa-card:hover{transform:translateY(-5px);box-shadow:0 28px 50px -34px rgba(23,29,43,.3)}
/* 懸念そのものを示すラベル。導線ではないので青から外す */
.qa-card .tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.16em;color:var(--accent-warm);
background:var(--accent-warm-soft);padding:5px 14px;border-radius:999px;margin-bottom:14px}
.qa-card .ans::before{content:'';display:inline-block;width:14px;height:2px;border-radius:2px;
background:var(--accent-green);vertical-align:middle;margin-right:9px}
.qa-card h3{font-size:17px;line-height:1.7;margin-bottom:8px}
.qa-card .sub{font-size:12.5px;color:var(--gray-light);padding-bottom:12px;margin-bottom:12px;border-bottom:1px dashed var(--line)}
.qa-card .ans{font-size:13.5px;color:var(--gray)}
/* flow */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.flow-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 22px 28px;
text-align:center;transition:transform .3s,box-shadow .3s}
.flow-card:hover{transform:translateY(-6px);box-shadow:0 28px 50px -34px rgba(23,29,43,.3)}
.flow-card .st{display:inline-block;font-family:'Zen Kaku Gothic New';font-size:11px;font-weight:700;
letter-spacing:.16em;color:#fff;background:var(--accent);padding:5px 16px;border-radius:999px;margin-bottom:16px}
/* 4ステップが同じ青だと「どこまで進んだか」が読めない。
相談(青) → 打合せ(青) → 成約(琥珀) → 継続(緑) と進むにつれて色を移す。 */
.flow > *:nth-child(3) .flow-card .st,.flow-card:nth-child(3) .st{background:var(--accent-warm)}
.flow > *:nth-child(4) .flow-card .st,.flow-card:nth-child(4) .st{background:var(--accent-green)}
.flow-fig{height:150px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:16px}
.flow-fig :is(svg,img){height:142px;width:auto;max-width:100%}
.flow-card h4{font-size:15.5px;margin-bottom:10px}
.flow-card p{font-size:12.5px;color:var(--gray)}
/* 所要期間は工程そのものではなく「時間」の情報なので、青と分ける */
.flow-card .term{font-size:11px;color:var(--accent-warm);margin-top:14px;padding-top:12px;
border-top:1px solid var(--line-soft);font-weight:700}
/* category */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cat-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px 24px;
transition:transform .3s,box-shadow .3s,border-color .3s}
.cat-card:hover{transform:translateY(-6px);border-color:var(--accent-soft);box-shadow:0 28px 50px -34px rgba(23,29,43,.3)}
.cat-fig{height:176px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.cat-card .no{color:var(--gray-light)}
.cat-fig :is(svg,img){max-height:160px;max-width:100%;width:auto;height:auto;transition:transform .35s}
.cat-card:hover .cat-fig :is(svg,img){transform:translateY(-6px) rotate(-2deg)}
.cat-card .no{font-size:10.5px;letter-spacing:.18em;font-weight:700;margin-bottom:6px;
color:var(--accent-warm)}
.cat-card:hover{border-color:var(--accent-warm-soft)}
.cat-card .name{font-family:'Zen Kaku Gothic New';font-size:16.5px;font-weight:700;margin-bottom:6px}
.cat-card .desc{font-size:12px;color:var(--gray);line-height:1.8}
/* representative's message */
.message{display:grid;grid-template-columns:298px 1fr;gap:56px;align-items:start}
.message-photo{border-radius:20px;overflow:hidden;background:var(--soft);border:1px solid var(--line);
aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;
box-shadow:0 26px 50px -34px rgba(23,29,43,.34)}
.message-photo img{width:100%;height:100%;object-fit:cover;display:block}
.message-photo .ph{display:flex;flex-direction:column;align-items:center;gap:12px;
text-align:center;font-size:11.5px;line-height:1.9;color:var(--gray-light);padding:22px}
.message-photo .ph svg{width:46px;height:46px;color:var(--line)}
.message-body h2{font-size:26px;line-height:1.7;margin-bottom:22px}
.message-body h2 em{font-style:normal;color:var(--accent)}
.message-body p{font-size:14.5px;color:var(--gray);margin-bottom:18px}
.message-body p:last-of-type{margin-bottom:0}
.message-sign{display:flex;align-items:baseline;gap:10px;margin-top:30px;padding-top:22px;
border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--gray-light)}
.message-sign strong{font-family:'Zen Kaku Gothic New',sans-serif;font-weight:700;
font-size:18px;color:var(--ink)}
/* spec table */
/* 見出し列はクリーム、本文列は白。青系の淡色どうしだと面の差が出ず、
9行が一枚の水色の板に見えてしまうため、色相ごと変えている。
左端の縦ラインは、表がどこから始まるかを示す目印。 */
.spec{position:relative;background:#fff;border:1px solid #C2CFE4;border-radius:22px;overflow:hidden;
box-shadow:0 16px 36px -24px rgba(23,29,43,.3)}
.spec tr{border-bottom:1px solid #D3DCEA}
.spec tr:last-child{border-bottom:none}
.spec th{position:relative;text-align:left;font-size:12.5px;font-weight:700;color:#6B5B45;width:220px;
padding:20px 24px 20px 32px;vertical-align:top;background:var(--cream);
border-right:1px solid var(--cream-line);letter-spacing:.04em}
/* 各行の見出しに短い色の印を置く。行の切れ目が縦に揃って見える。 */
.spec th::before{content:'';position:absolute;left:18px;top:27px;width:3px;height:14px;
border-radius:2px;background:var(--accent-warm);opacity:.55}
.spec td{font-size:14.5px;padding:20px 26px;color:var(--ink)}
/* 1行おきに薄く敷いて視線が横にずれないようにする */
.spec tr:nth-child(even) th{background:#F6F0E5}
.spec tr:nth-child(even) td{background:#FAFBFD}
.spec-note{font-size:12px;color:var(--gray-light);margin-top:18px}
/* news */
.news-tabs{display:flex;gap:10px;margin-bottom:26px;flex-wrap:wrap}
.news-tabs button{font-size:12.5px;font-weight:700;padding:9px 22px;border-radius:999px;border:1px solid var(--line);
transition:background .2s,color .2s,border-color .2s}
.news-tabs button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.news-list .row{background:#fff;border:1px solid var(--line);border-radius:16px;margin-bottom:12px;
transition:transform .25s,box-shadow .25s}
.news-list .row:hover{transform:translateX(6px);box-shadow:0 20px 40px -30px rgba(23,29,43,.35)}
.news-list .row a{display:grid;grid-template-columns:110px 110px 1fr 24px;gap:20px;align-items:center;padding:20px 26px}
.news-list time{font-size:12.5px;color:var(--gray-light)}
/* カテゴリの違いを色でも示す。青＝お知らせ、暖色＝取扱商品。 */
.news-list .cat{font-size:11px;font-weight:700;color:var(--accent);background:var(--accent-soft);
padding:4px 0;border-radius:999px;text-align:center}
.news-list .row[data-c="product"] .cat{color:var(--accent-warm);background:var(--accent-warm-soft)}
.news-list p{font-size:14.5px}
.news-list .ar{width:18px;height:8px;color:var(--accent);justify-self:end}
/* faq */
.faq-item{background:#fff;border:1px solid var(--line);border-radius:18px;margin-bottom:12px;overflow:hidden}
.faq-q{width:100%;display:grid;grid-template-columns:34px 1fr 20px;gap:16px;align-items:center;
padding:22px 26px;text-align:left;font-size:15.5px;font-weight:700}
.faq-q .mk{font-family:'Zen Kaku Gothic New';font-weight:900;font-size:15px;color:var(--accent)}
.faq-q .sign{position:relative;width:16px;height:16px}
.faq-q .sign::before,.faq-q .sign::after{content:'';position:absolute;background:var(--accent);border-radius:2px;
transition:transform .3s,opacity .3s}
.faq-q .sign::before{top:7.5px;left:0;width:16px;height:2px}
.faq-q .sign::after{left:7px;top:0;width:2px;height:16px}
.faq-item.open .sign::after{transform:rotate(90deg);opacity:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s}
.faq-item.open .faq-a{max-height:340px}
.faq-a .inner{display:grid;grid-template-columns:34px 1fr;gap:16px;padding:0 26px 24px}
/* Q は青、A は緑。開いた瞬間に「答えのほう」だと分かる */
.faq-a .mk{font-family:'Zen Kaku Gothic New';font-weight:900;font-size:15px;color:var(--accent-green)}
.faq-a p{color:var(--gray);font-size:14px}
/* form */
.form-wrap{background:#fff;border:1px solid var(--line);border-radius:24px;padding:44px}
.fld{margin-bottom:26px}
.fld label{display:block;font-size:13px;font-weight:700;margin-bottom:10px}
/* 必須は「注意」であって導線ではない。青のままだとボタンと同じ重みに見える */
.fld label .req{font-size:10.5px;color:#fff;background:var(--accent-rose);padding:3px 10px;border-radius:999px;margin-left:10px;font-weight:700}
.fld input,.fld textarea,.fld select{width:100%;font-family:inherit;font-size:14.5px;padding:14px 16px;
border:1px solid var(--line);border-radius:12px;background:var(--soft);transition:border-color .2s,background .2s}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--accent);background:#fff}
.fld textarea{min-height:170px;resize:vertical}
.form-note{font-size:12px;color:var(--gray-light);margin-top:6px}
.form-note a{color:var(--accent)}
.form-submit{text-align:center;margin-top:34px}
/* legal text */
.legal h2{font-size:19px;margin:40px 0 12px}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{font-size:14px;color:var(--gray)}
.legal ul{margin:10px 0 0 20px;list-style:disc}
.legal li{margin-bottom:6px}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--accent-deep)}
/* contact band */
/* サイト唯一の濃い面。ここが申し込み地点なので、色の強さを一点に集中させ、
他のセクションは白と淡色のまま静かに保っている。
（クライアント指定の「黒背景は使わない」は守り、ブランドの青で深くしている）
2026-08-24 にイラストを外し、横一列の帯に変えた。面の高さをイラストが
決めていたため、全ページの末尾が間延びしていたのが理由。
文言を左、導線を右に置き、視線が左から右へ一度で抜けるようにしている。 */
.contact-card{background:linear-gradient(120deg,var(--panel-1) 0%,var(--panel-2) 55%,var(--panel-3) 100%);
border-radius:24px;padding:34px 44px;
display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;
box-shadow:0 26px 54px -42px rgba(36,80,190,.6);position:relative;overflow:hidden}
/* 面が単調にならないよう、右上にごく淡い光を置く。
イラストが無くなった分、これが唯一の奥行きになる。 */
.contact-card::before{content:'';position:absolute;top:-70%;right:-6%;width:46%;height:240%;
background:radial-gradient(ellipse at center,rgba(255,255,255,.18),transparent 62%);
pointer-events:none}
.contact-card>*{position:relative}
.contact-copy{min-width:min(100%,340px);flex:1 1 auto}
/* 面を明るくした分、白文字を薄くする余地がなくなった。不透明度は上げてある */
.contact-card .eyebrow{color:rgba(255,255,255,.92);font-size:11px;margin-bottom:12px}
.contact-card .eyebrow::before{background:#F2C879}
.contact-card h2{font-size:24px;line-height:1.55;margin-bottom:10px;color:#fff}
.contact-card p{font-size:13px;line-height:1.85;color:rgba(255,255,255,.86);margin-bottom:0}
.contact-acts{display:flex;align-items:center;gap:18px;flex-wrap:wrap;flex:0 0 auto}
/* 同じ大きさのボタンが2つ並ぶと、どちらを押せばよいのか読めないうえ、
面の中でボタンだけが重くなる。押してほしい方だけを白い面で残し、
もう一方は文字リンクに落として、重みの差で順番を示している。
他のページのボタンには影響しない（.contact-card の中だけ）。 */
.contact-card .btn{padding:14px 28px;font-size:13px;gap:10px}
.contact-card .btn .ar{width:16px}
.contact-card .btn-fill{background:#fff;color:var(--ink);
box-shadow:0 10px 24px -14px rgba(0,0,0,.45)}
.contact-card .btn-fill:hover{background:#fff;transform:translateY(-2px);
box-shadow:0 16px 30px -14px rgba(0,0,0,.5)}
/* 副導線。枠を外し、下線が伸びることで押せると示す */
.contact-card .btn-line{position:relative;border:none;padding:14px 4px;
color:rgba(255,255,255,.88)}
.contact-card .btn-line::after{content:'';position:absolute;left:4px;right:4px;bottom:10px;
height:1px;background:currentColor;opacity:.5;
transform:scaleX(0);transform-origin:left center;
transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.contact-card .btn-line:hover{background:none;color:#fff;transform:none}
.contact-card .btn-line:hover::after{transform:scaleX(1)}
/* footer */
.site-footer{padding:66px 0 30px;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:52px;margin-bottom:48px}
.footer-brand p{font-size:12.5px;color:var(--gray);margin-top:16px}
.footer-col h5{font-size:10.5px;letter-spacing:.2em;color:var(--accent);margin-bottom:18px;font-weight:700}
.footer-col li{margin-bottom:11px;font-size:13.5px}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{display:flex;justify-content:space-between;padding-top:24px;border-top:1px solid var(--line-soft);
font-size:11px;color:var(--gray-light)}
/* sticky */
.sticky-cta{position:fixed;right:24px;bottom:24px;z-index:75;transform:translateY(140%);
transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.sticky-cta.show{transform:translateY(0)}
/* ── 読み進み表示 ────────────────────────────────────────
* ページ上端の細い線。長い下層ページで「あとどれくらいか」が分かる。 */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:95;pointer-events:none}
.scroll-progress span{display:block;height:100%;width:0;
background:linear-gradient(90deg,var(--accent) 0%,var(--accent-warm) 100%);
transform-origin:left center;transition:width .12s linear}
/* reveal */
.reveal{opacity:0;transform:translateY(26px) scale(.99);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:translateY(0) scale(1)}
.stagger>*{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.stagger.in>*{opacity:1;transform:translateY(0)}
.stagger.in>*:nth-child(1){transition-delay:.05s}
.stagger.in>*:nth-child(2){transition-delay:.14s}
.stagger.in>*:nth-child(3){transition-delay:.23s}
.stagger.in>*:nth-child(4){transition-delay:.32s}
.stagger.in>*:nth-child(5){transition-delay:.41s}
.stagger.in>*:nth-child(6){transition-delay:.5s}
/* ── 追加のうごき ────────────────────────────────────────
* 増やすときの基準：目的のある動きだけにする。「動いて楽しい」ではなく
* 「読む順番が分かる」「押せると分かる」動きに限る。
* すべて prefers-reduced-motion で止まるようにしておくこと。 */
/* 表は9行あるので、上から順に置かれると視線が自然に上から入る */
.reveal.in .spec tr{animation:rowIn .5s cubic-bezier(.2,.7,.3,1) both}
.reveal.in .spec tr:nth-child(1){animation-delay:.10s}
.reveal.in .spec tr:nth-child(2){animation-delay:.16s}
.reveal.in .spec tr:nth-child(3){animation-delay:.22s}
.reveal.in .spec tr:nth-child(4){animation-delay:.28s}
.reveal.in .spec tr:nth-child(5){animation-delay:.34s}
.reveal.in .spec tr:nth-child(6){animation-delay:.40s}
.reveal.in .spec tr:nth-child(7){animation-delay:.46s}
.reveal.in .spec tr:nth-child(8){animation-delay:.52s}
.reveal.in .spec tr:nth-child(9){animation-delay:.58s}
@keyframes rowIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* ボタンの上を一度だけ光がすべる。押せる面だと分かればよいので、
常時ではなくホバー時だけ動かす */
.btn-fill{position:relative;overflow:hidden}
.btn-fill>*{position:relative;z-index:1}
.btn-fill::after{content:'';position:absolute;top:0;left:-60%;width:45%;height:100%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
transform:skewX(-18deg);transition:left .55s cubic-bezier(.3,.7,.3,1)}
.btn-fill:hover::after{left:120%}
/* テキストリンクは下線が右へ伸びる。矢印だけだと動きが小さい */
.txt-link{position:relative}
.txt-link::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:1.5px;
background:currentColor;border-radius:2px;transition:width .3s cubic-bezier(.2,.7,.3,1)}
.txt-link:hover::after{width:calc(100% - 30px)}
/* 開いた答えが下から入る。高さが変わるだけだと「開いた」瞬間が読み取りにくい */
.faq-a .inner{opacity:0;transform:translateY(-6px);
transition:opacity .3s ease .08s,transform .3s ease .08s}
.faq-item.open .faq-a .inner{opacity:1;transform:none}
/* カードは浮くだけでなく、枠の色もわずかに動かす（既存の transform に足す） */
.qa-card,.faq-item,.news-list .row{transition:transform .3s cubic-bezier(.2,.7,.3,1),
box-shadow .3s,border-color .3s}
.faq-item:hover{border-color:var(--accent-soft)}
/* 事業者情報の年表は、点が置かれてから線が伸びる */
.career-list dt::before{animation:dotIn .45s cubic-bezier(.2,.7,.3,1) both}
@keyframes dotIn{from{transform:scale(0)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
.reveal,.stagger>*{opacity:1!important;transform:none!important;transition:none!important}
.marquee-inner,.people-row .pp{animation:none!important}
.hero-city .cityframe,.hero-copy h1 .ln,.hero-copy p,.hero-copy .acts{animation:none!important;opacity:1!important;transform:none!important}
.reveal.in .spec tr,.career-list dt::before{animation:none!important;opacity:1!important;transform:none!important}
.btn-fill::after,.txt-link::after{transition:none!important}
.faq-a .inner{opacity:1!important;transform:none!important;transition:none!important}
.scroll-progress{display:none}
html{scroll-behavior:auto}
}
@media (max-width:1100px){
.svc-track{grid-template-columns:1fr;max-width:560px;margin:0 auto}
.flow{grid-template-columns:repeat(2,1fr)}
.cat-grid{grid-template-columns:repeat(2,1fr)}
.nav{display:none}
.menu-toggle{display:block}
.svc-row{gap:40px}
}
@media (max-width:820px){
.header-cta{display:none}
.site-header .container-wide{height:64px}
.container,.container-wide{padding:0 20px}
/* hero */
.hero{padding-top:64px}
.hero-city{padding-bottom:8px}
.hero-city .cityframe{margin:0 -20px}
.hero-copy{position:static;transform:none;width:auto;padding:30px 20px 0;text-align:center}
.hero-copy h1{font-size:24px;line-height:1.6;margin-bottom:16px}
.hero-copy p{font-size:13px;line-height:1.85;margin-bottom:22px}
.hero-copy p br{display:none}
.hero-copy .acts{flex-direction:column;align-items:stretch;gap:10px}
.hero-copy .acts .btn{justify-content:center;width:100%}
/* type scale */
.sec-h{font-size:24px}
.sec-h .ja{font-size:12.5px;margin-top:10px}
.sec-head{margin-bottom:34px}
.sec-head p.lead{font-size:13.5px}
.section{padding:56px 0}
.section.tight{padding:40px 0}
.section.pb-sm{padding-bottom:28px}
.section.pt-sm{padding-top:28px}
.page-hero{padding:100px 0 40px}
.page-hero h1{font-size:25px}
.page-hero p{font-size:13.5px;margin-top:14px}
.crumb{font-size:11px}
.btn{padding:15px 24px;font-size:13.5px}
/* blocks */
.cred-grid{grid-template-columns:1fr;gap:14px}
.cred-cell{padding:22px 20px;border-radius:16px}
.cred-cell .vl{font-size:16.5px}
.statement h2{font-size:20px;line-height:1.75}
.statement .cols{gap:16px;max-width:none}
.statement .cols p{font-size:13.5px}
.people-row{gap:14px;margin-top:34px;overflow-x:auto;justify-content:flex-start;
padding:0 20px;margin-left:-20px;margin-right:-20px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.people-row::-webkit-scrollbar{display:none}
.people-row .pp{flex:0 0 auto}
.people-row .pp :is(svg,img){height:114px}
.marquee{padding:22px 0}
.marquee span{font-size:11.5px;letter-spacing:.26em}
.marquee span::after{margin:0 30px 0 26px;width:4px;height:4px}
.svc-track{grid-template-columns:1fr;max-width:none}
.svc-card{padding:24px 20px;border-radius:20px}
.svc-fig{height:188px;margin-bottom:18px}
.svc-fig :is(svg,img){max-height:178px}
.svc-card h3{font-size:17.5px}
.svc-card h3 br{display:none}
.svc-row{grid-template-columns:1fr;gap:26px;padding:34px 0}
.svc-row.rev .svc-vis{order:0}
.svc-vis{padding:8px 0}
.svc-vis :is(svg,img){max-height:238px}
.svc-row h3{font-size:19px}
.qa-grid{grid-template-columns:1fr;gap:14px}
.qa-card{padding:22px 20px;border-radius:16px}
.qa-card h3{font-size:16px}
.flow{grid-template-columns:1fr;gap:14px}
.flow-card{display:grid;grid-template-columns:110px 1fr;gap:16px;text-align:left;
align-items:center;padding:18px;border-radius:16px}
.flow-fig{height:auto;margin-bottom:0}
.flow-fig :is(svg,img){height:104px}
.flow-card .st{margin-bottom:8px}
.flow-card h4{font-size:15px;margin-bottom:6px}
.flow-card .term{margin-top:10px;padding-top:8px}
.cat-grid{grid-template-columns:1fr;gap:14px}
.cat-card{display:grid;grid-template-columns:106px 1fr;gap:16px;align-items:center;padding:18px;border-radius:16px}
.cat-fig{height:auto;margin-bottom:0}
.cat-fig :is(svg,img){max-height:94px;max-width:100%}
.cat-card .name{font-size:15px;margin-bottom:4px}
.cat-card .desc{font-size:11.5px;line-height:1.7}
.cat-card .no{margin-bottom:2px}
.message{grid-template-columns:1fr;gap:26px}
.message-photo{max-width:230px;margin:0 auto}
.message-body h2{font-size:19px;line-height:1.75}
.message-body h2 br{display:none}
.message-body p{font-size:13.5px}
.message-sign{margin-top:22px;padding-top:18px}
.message-sign strong{font-size:16px}
.spec{border-radius:16px}
/* 見出しが横幅いっぱいになり、行頭の印が文字に重なるので隠す */
.spec th{display:block;width:100%;padding:16px 18px 6px;font-size:12.5px;border-right:none}
.spec th::before{display:none}
.spec td{display:block;padding:0 18px 16px;font-size:14px}
.news-tabs button{padding:8px 18px;font-size:12px}
.news-list .row a{grid-template-columns:1fr;gap:6px;padding:18px 20px}
.news-list .cat{justify-self:start;padding:3px 14px;width:auto;min-width:88px}
.news-list p{font-size:14px}
.news-list .ar{display:none}
.news-list .row:hover{transform:none}
.faq-q{padding:18px 20px;font-size:14.5px;grid-template-columns:26px 1fr 18px;gap:12px}
.faq-a .inner{padding:0 20px 20px;grid-template-columns:26px 1fr;gap:12px}
.faq-a p{font-size:13.5px}
.faq-item.open .faq-a{max-height:520px}
.form-wrap{padding:26px 20px;border-radius:20px}
.fld input,.fld textarea,.fld select{font-size:16px;padding:13px 14px}
.fld{margin-bottom:20px}
.contact-card{padding:30px 22px;text-align:center;border-radius:20px;gap:22px;
flex-direction:column;align-items:stretch}
.contact-card h2{font-size:20px}
.contact-card h2 br{display:none}
.contact-card p{font-size:13px}
.contact-card p br{display:none}
.contact-copy{min-width:0}
.contact-acts{justify-content:center;flex-direction:column;gap:12px}
.contact-acts .btn{justify-content:center}
/* 指で押す幅が要るので、文字リンクにも面を戻す */
.contact-card .btn-line{border:1px solid rgba(255,255,255,.45);padding:13px 24px}
.contact-card .btn-line::after{display:none}
.site-footer{padding:48px 0 26px}
.footer-grid{grid-template-columns:1fr;gap:28px;margin-bottom:32px}
.footer-bottom{flex-direction:column;gap:8px;font-size:10.5px}
.sticky-cta{right:14px;bottom:14px}
body{padding-bottom:72px}
.sticky-cta .btn{padding:14px 20px;font-size:13px}
.drawer{padding:84px 20px 40px}
}
@media (max-width:359px){
.hero-copy h1{font-size:21px}
.sec-h{font-size:21px}
.flow-card,.cat-card{grid-template-columns:1fr;text-align:center}
.cat-fig :is(svg,img){max-height:124px}
}
/* ============================================================
WordPress additions
============================================================ */
/* a11y */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;top:12px;left:12px;z-index:200;width:auto;height:auto;clip:auto;
padding:12px 20px;background:#fff;border-radius:999px;box-shadow:0 12px 30px -16px rgba(23,29,43,.4);
font-size:13px;font-weight:700}
/* admin bar — the header is fixed, so the bar's offset has to be paid back by
the hero's top padding or it clips the top of the city illustration.
Below 600px WordPress stops pinning the bar, so both offsets go away again. */
.admin-bar .site-header{top:32px}
.admin-bar .hero{padding-top:108px}
@media screen and (max-width:782px){
.admin-bar .site-header{top:46px}
.admin-bar .hero{padding-top:110px}
}
@media screen and (max-width:600px){
.admin-bar .site-header{top:0}
.admin-bar .hero{padding-top:64px}
}
/* wp core alignment / caption */
.aligncenter{margin-left:auto;margin-right:auto}
.alignleft{float:left;margin:0 24px 18px 0}
.alignright{float:right;margin:0 0 18px 24px}
.wp-caption{max-width:100%}
.wp-caption-text,figcaption{font-size:12px;color:var(--gray-light);margin-top:8px;text-align:center}
/* news list */
.news-list .row a p{transition:color .2s}
.news-list .row a:hover p{color:var(--accent)}
.news-empty{background:#fff;border:1px dashed var(--line);border-radius:16px;padding:44px 26px;
text-align:center;font-size:13.5px;color:var(--gray-light)}
/* pagination */
.pagination{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:44px}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;
padding:0 14px;border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:700;
transition:background .2s,color .2s,border-color .2s}
.pagination .page-numbers:hover{border-color:var(--accent);color:var(--accent)}
.pagination .page-numbers.current{background:var(--accent);border-color:var(--accent);color:#fff}
.pagination .dots{border-color:transparent}
/* single post */
.post-head{margin-bottom:38px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.post-meta{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.post-meta time{font-size:12.5px;color:var(--gray-light)}
.post-meta .cat{font-size:11px;font-weight:700;color:var(--accent);background:var(--accent-soft);
padding:4px 14px;border-radius:999px}
.post-head h1{font-size:30px;line-height:1.5}
.post-thumb{border-radius:20px;overflow:hidden;margin-bottom:34px}
.post-thumb img{width:100%;height:auto}
.entry{font-size:14.5px;color:var(--gray)}
.entry>*+*{margin-top:22px}
.entry h2{font-family:'Zen Kaku Gothic New',sans-serif;font-size:21px;color:var(--ink);
margin-top:44px;padding-left:16px;border-left:4px solid var(--accent);line-height:1.6}
.entry h3{font-family:'Zen Kaku Gothic New',sans-serif;font-size:17.5px;color:var(--ink);margin-top:34px;line-height:1.7}
.entry h4{font-size:15.5px;color:var(--ink);margin-top:28px}
.entry a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.entry a:hover{color:var(--accent-deep)}
.entry img{max-width:100%;height:auto;border-radius:14px}
.entry ul,.entry ol{margin-left:22px}
.entry ul{list-style:disc}
.entry ol{list-style:decimal}
.entry li{margin-bottom:8px}
.entry blockquote{border-left:3px solid var(--line);padding:6px 0 6px 20px;color:var(--gray-light)}
.entry table{border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:13.5px}
.entry th,.entry td{border-bottom:1px solid var(--line-soft);padding:12px 16px;text-align:left}
.entry th{background:var(--soft);font-weight:700;color:var(--ink)}
.entry code{background:var(--soft);border-radius:6px;padding:2px 7px;font-size:.9em}
.entry hr{border:none;border-top:1px solid var(--line);margin:38px 0}
/* post navigation */
.post-nav{display:flex;justify-content:space-between;gap:16px;margin-top:52px;padding-top:26px;
border-top:1px solid var(--line);font-size:13px;font-weight:700}
.post-nav a{color:var(--accent)}
.post-nav a:hover{color:var(--accent-deep)}
.post-nav .to-list{color:var(--gray)}
/* 404 / search */
.notfound{text-align:center;padding:40px 0}
.notfound .code{font-family:'Zen Kaku Gothic New',sans-serif;font-size:78px;font-weight:900;
color:var(--accent-soft);line-height:1}
.notfound h1{font-size:24px;margin:10px 0 16px}
.notfound p{font-size:14px;color:var(--gray);margin-bottom:30px}
.search-form{display:flex;gap:10px;max-width:460px;margin:0 auto}
.search-form input[type=search]{flex:1;font-family:inherit;font-size:16px;padding:14px 16px;
border:1px solid var(--line);border-radius:999px;background:var(--soft)}
.search-form input[type=search]:focus{outline:none;border-color:var(--accent);background:#fff}
/* Contact Form 7 — makes the plugin markup match the .fld design */
.wpcf7 .wpcf7-form-control-wrap{display:block}
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],
.wpcf7 input[type=url],.wpcf7 input[type=date],.wpcf7 input[type=number],
.wpcf7 textarea,.wpcf7 select{width:100%;font-family:inherit;font-size:14.5px;padding:14px 16px;
border:1px solid var(--line);border-radius:12px;background:var(--soft);color:var(--ink);
transition:border-color .2s,background .2s}
.wpcf7 input:focus,.wpcf7 textarea:focus,.wpcf7 select:focus{outline:none;border-color:var(--accent);background:#fff}
.wpcf7 textarea{min-height:170px;resize:vertical}
/* CF7 renders the submit as , which cannot hold the arrow