/* お問い合わせ（contact_page_template_v1.html から自動生成・build_wp_v1.py） */
/* ============================================================
   ヒバナ トップページ デザイン案 v2（2026-10-21）
   色＝ヒバナオレンジ #F18E00 と墨 #1A1410 の2色＋無彩色だけ
   器＝max 1200px＋左右 clamp(20px,4vw,40px)／上下 clamp(52px,7.5vw,96px)
   ============================================================ */
:root{
  --or:#F18E00; --or-d:#DE8200;
  --ink:#1A1410; --ink2:#3E352B; --sub:#6B5F50;
  --ln:#E9E3D9; --cream:#FAF7F2; --dark:#1A1410;
  --w:1200px; --pad:clamp(20px,4vw,40px); --gap:clamp(52px,7.5vw,96px);
  --r:18px;
  --sh:0 1px 2px rgba(60,35,0,.05), 0 10px 26px rgba(60,35,0,.07);
  --sh-h:0 2px 6px rgba(60,35,0,.07), 0 22px 46px rgba(60,35,0,.12);
  --jp:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --disp:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
  --en:"Inter","Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{margin:0; background:#fff; color:var(--ink2); font-family:var(--jp); font-size:16px; line-height:2; letter-spacing:.03em; -webkit-font-smoothing:antialiased}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--disp); color:var(--ink); font-weight:700; letter-spacing:.02em}
h1,h2,h3,p,li,.btn{word-break:auto-phrase}
.inner{width:100%; max-width:var(--w); margin-inline:auto; padding-inline:var(--pad)}
.sec{padding-block:var(--gap)}
.sec--cream{background:var(--cream)}
.pc{display:inline} .sp{display:none}
.nw{white-space:nowrap}

/* ---------- 英字の小見出し（今のサイトの ABOUT／SERVICE の作法を借りる） ---------- */
.eyebrow{display:flex; align-items:center; gap:12px; margin-bottom:18px; font-family:var(--en); font-size:13.5px; font-weight:700; letter-spacing:.22em; color:var(--or); text-transform:uppercase; line-height:1}
.eyebrow::before{content:""; width:26px; height:2px; border-radius:2px; background:var(--or)}
.h2{font-size:clamp(26px,3vw,40px); line-height:1.5; margin-bottom:clamp(18px,2.2vw,26px)}
.intro{max-width:720px; font-size:clamp(15px,1.25vw,17px); color:var(--ink2)}
.sec-head{margin-bottom:clamp(34px,4vw,52px)}

/* ---------- ボタン（錠剤型・矢印つき） ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:56px; padding:0 30px; border-radius:100px; font-size:16px; font-weight:700; letter-spacing:.06em; text-decoration:none; line-height:1.4; transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease}
.btn .ar{font-family:var(--en); font-weight:700; transition:transform .25s ease}
.btn:hover .ar{transform:translateX(4px)}
.btn--pri{background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink)}  /* D 線のボタン（2026-10-24 神林さん選定。オレンジのにじんだ影と暗いオレンジをやめた） */
.btn--pri .ar{color:var(--or-d)}
.btn--pri:hover{background:var(--or); color:#fff; box-shadow:inset 0 0 0 1.5px var(--or); transform:translateY(-2px)}  /* 載せるとオレンジ地に白い文字（2026-10-24 神林さん。前は墨で塗っていた） */
.btn--pri:hover .ar{color:#fff}
.btn--sec{background:#fff; color:var(--ink); border:1px solid #CFC6B8}
.btn--sec:hover{border-color:var(--ink); transform:translateY(-2px)}
.btn--ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.3); font-weight:500}  /* 濃い地で主ボタン（白い線）より控えめに */
.btn--ghost:hover{border-color:#fff; transform:translateY(-2px)}
/* 濃い地の上の主ボタン：白い線 → 載せるとオレンジ地に白い文字（明るい地と同じ） */
.cta .btn--pri,.ai-band .btn--pri,.period .btn--pri,.price-note .btn--pri,.facts .btn--pri{background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8)}
.cta .btn--pri .ar,.ai-band .btn--pri .ar,.period .btn--pri .ar,.price-note .btn--pri .ar,.facts .btn--pri .ar{color:var(--or)}
.cta .btn--pri:hover,.ai-band .btn--pri:hover,.period .btn--pri:hover,.price-note .btn--pri:hover,.facts .btn--pri:hover{background:var(--or); color:#fff; box-shadow:inset 0 0 0 1.5px var(--or)}
.cta .btn--pri:hover .ar,.ai-band .btn--pri:hover .ar,.period .btn--pri:hover .ar,.price-note .btn--pri:hover .ar,.facts .btn--pri:hover .ar{color:#fff}
.btn--sm{min-height:48px; padding:0 24px; font-size:15px}
.tlink{display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--ink); text-decoration:none; padding-bottom:3px; border-bottom:1px solid var(--ink); line-height:1.5}
.tlink .ar{font-family:var(--en); color:var(--or); transition:transform .25s ease}
.tlink:hover .ar{transform:translateX(3px)}

/* ---------- ヘッダー ---------- */
.hd{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--ln)}
.hd .inner{display:flex; align-items:center; gap:32px; height:76px}
.hd-logo{display:flex; align-items:center; flex:none}
.hd-logo img{height:38px; width:auto}
.hd-nav{display:flex; gap:30px; margin-left:auto; font-size:15px; font-weight:500; letter-spacing:.04em}
.hd-nav a{text-decoration:none; color:var(--ink); line-height:1.5}
.hd-nav a:hover{color:var(--or-d)}
.hd-nav .ext{font-family:var(--en); font-size:13.5px; color:var(--sub); margin-left:3px}
.hd-cta{min-height:46px; padding:0 24px; font-size:15px}
.hd-menu{display:none; margin-left:auto; align-items:center; gap:10px; height:44px; padding:0 4px; background:none; border:0; font:inherit; font-size:14px; font-weight:700; color:var(--ink); cursor:pointer}
.hd-menu i{display:grid; gap:5px; width:22px}
.hd-menu i::before,.hd-menu i::after,.hd-menu i b{content:""; display:block; height:2px; border-radius:2px; background:var(--ink)}
.mnav{display:none; border-top:1px solid var(--ln); background:#fff}
.mnav[data-open="1"]{display:block}
.mnav a{display:block; padding:16px var(--pad); border-bottom:1px solid var(--ln); text-decoration:none; color:var(--ink); font-weight:500; line-height:1.6}
.mnav .btn{display:flex; margin:20px var(--pad) 24px; border-bottom:0}

/* ---------- T01 ヒーロー ---------- */
.hero{padding-top:clamp(40px,6vw,84px); padding-bottom:var(--gap)}
.hero .inner{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:clamp(40px,5.5vw,76px); align-items:center}
.hero-kicker{display:flex; align-items:center; gap:12px; margin-bottom:26px; font-size:15px; font-weight:700; color:var(--ink); letter-spacing:.06em; line-height:1.5}
.hero-kicker img{width:26px; height:26px}
.hero h1{font-size:clamp(36px,4.2vw,54px); line-height:1.42; font-weight:900; letter-spacing:.03em; margin-bottom:clamp(22px,2.6vw,32px)}
.hero h1 em{font-style:normal; color:var(--or)}
.hero-lead{font-size:clamp(15px,1.3vw,17px); line-height:2.05; color:var(--ink2); max-width:540px}
.hero-act{display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(30px,3.4vw,40px)}
.hero-note{margin-top:18px; font-size:14px; color:var(--sub); line-height:1.8}
.hero-fig{position:relative; margin:0}
.hero-photo{border-radius:var(--r); overflow:hidden; aspect-ratio:5/4; box-shadow:var(--sh-h); background:#eee}
.hero-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 30%}
.hero-spark{position:absolute; width:clamp(78px,8vw,108px); right:clamp(-22px,-1.6vw,-14px); top:clamp(-36px,-2.6vw,-24px); filter:drop-shadow(0 6px 14px rgba(241,142,0,.25))}
.hero-cap{position:absolute; left:clamp(14px,1.8vw,22px); bottom:clamp(14px,1.8vw,22px); padding:12px 18px; background:#fff; border-radius:12px; box-shadow:var(--sh); font-size:13.5px; line-height:1.6; color:var(--ink2)}
.hero-cap b{display:block; font-family:var(--en); font-size:13.5px; letter-spacing:.14em; color:var(--or)}

/* ---------- カード共通 ---------- */
.card{background:#fff; border:1px solid var(--ln); border-radius:var(--r); box-shadow:var(--sh); transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-4px); box-shadow:var(--sh-h)}

/* ---------- T02 困りごと＋AIへの入口 ---------- */
.prob{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,24px)}
.prob .card{padding:clamp(28px,3vw,38px) clamp(24px,2.6vw,32px)}
.num{display:block; font-family:var(--en); font-size:15px; font-weight:700; letter-spacing:.12em; color:var(--or); line-height:1; margin-bottom:20px}
.prob h3{font-size:clamp(19px,1.7vw,22px); line-height:1.6; margin-bottom:12px}
.prob p{font-size:15px; line-height:1.95}
.ai-band{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); margin-top:clamp(28px,3.4vw,44px); background:var(--dark); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-h)}
.ai-band-txt{padding:clamp(34px,4.4vw,60px) clamp(26px,4vw,56px)}
.ai-band .label{display:block; font-size:14px; font-weight:700; letter-spacing:.08em; color:var(--or); margin-bottom:16px; line-height:1.5}
.ai-band h3{color:#fff; font-size:clamp(24px,2.5vw,34px); line-height:1.55; margin-bottom:18px}
.ai-band p{color:#DCD3C5; font-size:15px; line-height:2}
.ai-band .btn{margin-top:clamp(26px,3vw,34px)}
.ai-band-fig{position:relative; min-height:320px}
.ai-band-fig img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ai-band-fig figcaption{position:absolute; right:16px; bottom:14px; padding:6px 14px; border-radius:100px; background:rgba(26,20,16,.72); color:#fff; font-size:13.5px; line-height:1.5}

/* ---------- T03 サービス ---------- */
.svc{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(16px,2vw,24px)}
.svc .card{display:flex; flex-direction:column; padding:clamp(28px,3vw,38px) clamp(24px,2.6vw,32px); grid-column:span 2}
.svc .card--lg{grid-column:span 3; padding:clamp(32px,3.6vw,46px) clamp(26px,3.2vw,42px)}
.svc .cat{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:13.5px; line-height:1.6; color:var(--sub); margin-bottom:16px}
.svc .cat b{color:var(--or-d); font-weight:700; letter-spacing:.06em}
.svc h3{font-size:clamp(20px,1.8vw,23px); line-height:1.55; margin-bottom:12px}
.svc .card--lg h3{font-size:clamp(22px,2.1vw,28px)}
.svc p{font-size:15px; line-height:1.95}
.svc .go{margin-top:auto; padding-top:26px}
.tag{display:inline-block; margin-left:10px; padding:2px 10px; border:1px solid #CFC6B8; border-radius:100px; font-family:var(--jp); font-size:13.5px; font-weight:500; color:var(--sub); letter-spacing:.04em; vertical-align:middle; line-height:1.6}
.sec-foot{margin-top:clamp(34px,4vw,48px)}

/* ---------- T04 3つのコツ ---------- */
.steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,24px); counter-reset:s}
.steps .card{position:relative; padding:clamp(30px,3.2vw,40px) clamp(24px,2.6vw,32px)}
.step-no{display:flex; align-items:baseline; gap:14px; margin-bottom:18px; line-height:1}
.step-no b{font-family:var(--en); font-size:clamp(32px,3.4vw,46px); font-weight:700; color:var(--or); letter-spacing:.02em}
.step-no span{font-size:14px; font-weight:700; color:var(--sub); letter-spacing:.1em}
.steps h3{font-size:clamp(20px,1.8vw,23px); line-height:1.55; margin-bottom:12px}
.steps p{font-size:15px; line-height:1.95}
.steps .card:not(:last-child)::after{content:"→"; position:absolute; top:50%; right:calc(-1 * clamp(16px,2vw,24px) / 2); transform:translate(50%,-50%); display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#fff; border:1px solid var(--ln); box-shadow:var(--sh); font-family:var(--en); font-size:15px; font-weight:700; color:var(--or); z-index:2}

/* ---------- T05 お知らせ ---------- */
.news{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(28px,4vw,56px); align-items:start}
.news-list{margin:0; padding:0; list-style:none; border-top:1px solid var(--ln)}
.news-list li{border-bottom:1px solid var(--ln)}
.news-row{display:grid; grid-template-columns:110px auto minmax(0,1fr) auto; gap:clamp(14px,2vw,28px); align-items:center; padding:clamp(18px,2vw,24px) 6px; color:inherit; text-decoration:none; transition:background-color .25s ease}
.news-row:hover{background:var(--cream)}
.news-row time{font-family:var(--en); font-size:14px; font-weight:700; letter-spacing:.08em; color:var(--sub); line-height:1.5}
.news-row .ntag{display:inline-block; padding:2px 12px; border:1px solid #CFC6B8; border-radius:100px; font-size:12.5px; font-weight:700; color:var(--or-d); letter-spacing:.04em; line-height:1.6; white-space:nowrap}
.news-row .ntitle{font-size:clamp(15px,1.2vw,16.5px); font-weight:700; color:var(--ink); line-height:1.7}
.news-row .ar{font-family:var(--en); color:var(--or); font-weight:700; transition:transform .25s ease; justify-self:end}
.news-row:hover .ar{transform:translateX(3px)}
.news-side{padding-top:6px}

/* ---------- T06 会社の姿勢 ---------- */
.mission .inner{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(40px,6vw,88px); align-items:center}
.mission h2{font-size:clamp(30px,3.6vw,48px); font-weight:900; line-height:1.4; margin-bottom:clamp(22px,2.6vw,30px)}
.mission p{font-size:clamp(15px,1.25vw,17px); line-height:2.1; max-width:560px}
.mission .tlink{margin-top:clamp(26px,3vw,34px)}
.mission-fig{margin:0; justify-self:end; width:min(100%,420px)}
.mission-photo{border-radius:var(--r); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--sh-h)}
.mission-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 25%}
.mission-fig figcaption{display:flex; align-items:baseline; gap:12px; margin-top:18px; line-height:1.5}
.mission-fig figcaption span{font-size:13.5px; color:var(--sub)}
.mission-fig figcaption b{font-family:var(--disp); font-size:20px; color:var(--ink); letter-spacing:.12em}

/* ---------- T07 相談の入口（濃い帯） ---------- */
.cta{position:relative; overflow:hidden; background:var(--dark); color:#fff; padding-block:clamp(64px,8.5vw,112px)}
.cta .inner{position:relative; z-index:1}
.cta .eyebrow{color:var(--or)}
.cta h2{color:#fff; font-size:clamp(30px,3.9vw,52px); font-weight:900; line-height:1.4; margin-bottom:clamp(20px,2.4vw,28px)}
.cta p{color:#DCD3C5; font-size:clamp(15px,1.25vw,17px); line-height:2.05; max-width:620px}
.cta-act{display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(30px,3.6vw,42px)}
.cta-spark{position:absolute; z-index:0; width:clamp(280px,34vw,460px); right:clamp(-150px,-8vw,-60px); top:50%; transform:translateY(-50%); opacity:.92}

/* ---------- フッター ---------- */
.ft{padding-block:clamp(44px,5vw,64px) 28px; border-top:1px solid var(--ln)}
.ft .inner{display:grid; grid-template-columns:auto 1fr; gap:24px 48px; align-items:start}
.ft-brand img{height:34px; width:auto}
.ft-brand p{margin-top:14px; font-size:14px; line-height:1.8; color:var(--sub)}
.ft-nav{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px 30px; font-size:14px; font-weight:500; padding-top:6px}
.ft-nav a{text-decoration:none; color:var(--ink); line-height:1.6}
.ft-nav a:hover{color:var(--or-d)}
.ft small{grid-column:1/-1; display:block; padding-top:24px; margin-top:12px; border-top:1px solid var(--ln); font-family:var(--en); font-size:13.5px; letter-spacing:.08em; color:var(--sub)}

/* ---------- 画面幅ごとの組み替え ---------- */
@media (max-width:1024px){
  .hd-nav{gap:22px; font-size:14px}
  .svc .card,.svc .card--lg{grid-column:span 3}
  .svc .card:last-child{grid-column:1/-1}
}
@media (max-width:900px){
  .hd-nav,.hd-cta{display:none}
  .hd-menu{display:flex}
  .hero .inner{grid-template-columns:1fr}
  .hero-fig{max-width:620px}
  .ai-band{grid-template-columns:1fr}
  .ai-band-fig{min-height:0; aspect-ratio:16/10; order:-1}
  .prob{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .steps .card:not(:last-child)::after{content:"↓"; top:auto; right:auto; bottom:calc(-1 * clamp(16px,2vw,24px) / 2); left:50%; transform:translate(-50%,50%)}
  .mission .inner{grid-template-columns:1fr}
  .mission-fig{justify-self:start; width:min(100%,360px)}
  .ft .inner{grid-template-columns:1fr}
  .ft-nav{justify-content:flex-start}
  .cta-spark{width:210px; right:-76px; top:-64px; transform:none; opacity:.9}
}
@media (max-width:640px){
  body{font-size:15px}
  .pc{display:none} .sp{display:inline}
  .hd .inner{height:64px}
  .hd-logo img{height:32px}
  .hero-act,.cta-act{flex-direction:column}
  .hero-act .btn,.cta-act .btn{width:100%}
  .svc{grid-template-columns:1fr}
  .svc .card,.svc .card--lg,.svc .card:last-child{grid-column:auto}
  .news{grid-template-columns:1fr}
  .news-side{padding-top:0}
  .news-row{grid-template-columns:auto auto; grid-template-rows:auto auto; row-gap:6px; padding:18px 4px}
  .news-row time{grid-column:1} .news-row .ntag{grid-column:2; justify-self:start} .news-row .ntitle{grid-column:1 / -1} .news-row .ar{display:none}
  .hero-cap{font-size:13.5px; padding:10px 14px}
  .hero-spark{width:66px; right:-8px; top:-24px}
  .ai-band .btn{width:100%; padding:0 20px; font-size:15px; letter-spacing:.03em}
  .cta-spark{width:160px; right:-64px; top:-50px; transform:none; opacity:.9}
}
@media (max-width:400px){
  .hero h1{font-size:min(36px,9.2vw)}
  .ai-band .btn{font-size:14px; padding:0 16px; gap:10px}
}
@media (max-width:340px){
  .ai-band .btn{font-size:13.5px; letter-spacing:0}
  .xs-hide{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important; animation:none!important; scroll-behavior:auto!important}}

/* v2: original illustration system; orange + ink + neutral fills. */
.hero-fig--illustration{align-self:center; padding-block:10px}
.hero-art{width:100%; background:var(--cream); border-radius:28px; padding:12px 4px 0; border:1px solid var(--ln)}
.hero-art img{width:100%; height:auto}
.hero-message{position:relative; margin:-14px 26px 0 auto; padding:14px 20px; width:max-content; background:#fff; border:1px solid var(--ln); border-radius:12px; box-shadow:var(--sh); font-family:var(--disp); font-size:18px; line-height:1.65; font-weight:700; color:var(--ink); transform:rotate(-3deg)}
.problem-top{display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px}
.problem-top .num{margin:0; font-size:20px}
.problem-art{width:112px; height:84px; flex:none}
.problem-art img{width:100%; height:100%; object-fit:contain}
.card-art{height:112px; width:160px; margin-bottom:26px; flex:none}
.card-art img{width:100%; height:100%; object-fit:contain}
.svc .card--lg .card-art{width:192px; height:134px}
.step-art{width:140px; height:98px; margin-bottom:24px}
.step-art img{width:100%; height:100%; object-fit:contain}
.svc .card,.svc .card--lg{position:relative}
.svc .card--lg{padding-top:32px}
.steps .card{padding-top:28px}
.prob .card{padding-top:24px}
@media(max-width:900px){
 .hero-fig--illustration{max-width:560px; width:100%; justify-self:center}
 .problem-top{margin-bottom:14px}
 .prob .card{padding-top:22px}
 .step-art{width:120px;height:84px;margin-bottom:22px}
}
@media(max-width:640px){
 .hero .inner{gap:38px}
 .hero-art{border-radius:22px;padding:12px 0 0}
 .hero-message{font-size:16px;margin:-6px 18px 0 auto;padding:12px 18px}
 .problem-art{width:104px;height:73px}
 .card-art,.svc .card--lg .card-art{width:144px;height:101px;margin-bottom:22px}
 .svc .card,.svc .card--lg{padding-top:26px}
}


/* Version 4: illustration assets are selected through a separate style mapping. */
.hero-art {padding:12px 6px 0;}
.problem-art {width:154px;height:116px;}
.card-art {width:100%;max-width:300px;height:180px;}
.svc .card--lg .card-art {width:100%;max-width:340px;height:205px;}
.step-art {width:100%;max-width:280px;height:180px;}
.card-art img,.step-art img,.problem-art img {object-fit:contain;object-position:left center;}
@media(max-width:640px) {
  .problem-art {width:150px;height:112px;}
  .card-art,.svc .card--lg .card-art {width:min(100%,240px);height:180px;margin-bottom:22px;}
  .step-art {width:min(100%,224px);height:168px;margin-bottom:22px;}
}


/* Center only the illustration frames and their contained images. */
.card-art,.svc .card--lg .card-art,.step-art {margin-inline:auto;}
.problem-top {position:relative;justify-content:center;}
.problem-top .num {position:absolute;left:0;top:50%;transform:translateY(-50%);}
.problem-art {margin-inline:auto;}
.hero-art img,.problem-art img,.card-art img,.step-art img {object-position:center center;}


/* ========== 下層ページ共通（あいう・WEB制作・ヒバナについて／2026-10-23） ========== */
/* 薄い強調色の地・片側だけの色線は使わない（白地＋影／ベタ塗り／線だけ） */
summary,dt,dd,th,td,.catch{word-break:auto-phrase}
h1,h2,h3,dt,dd,summary,.catch{text-wrap:balance}
/* 段落は行の長さをそろえない（Safari の text-wrap:pretty は全行が短くそろって右に空きが出た・2026-10-24）。Chrome だけの最終行の調整は phrase_breaks.py の CSS で */
.crumb{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; font-size:13.5px; color:var(--sub); line-height:1.6}
.crumb a{color:var(--sub); text-decoration:none} .crumb a:hover{color:var(--or-d)}
.crumb span::before{content:"/"; margin-right:8px; color:#CFC6B8}
.hero--sub{padding-top:clamp(28px,4vw,56px)}
.hero--sub h1{font-size:clamp(32px,3.8vw,50px)}
@media (min-width:901px){ .hero .inner{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)} }
.dl{margin:20px 0 0; display:grid; gap:10px}
.dl div{display:grid; grid-template-columns:7.5em minmax(0,1fr); gap:14px; padding-top:12px; border-top:1px dashed var(--ln)}
.dl dt{font-size:13.5px; font-weight:700; letter-spacing:.04em; color:var(--ink); line-height:1.85}
.dl dd{margin:0; font-size:14.5px; line-height:1.85; color:var(--ink2)}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none}
.chips li{padding:5px 14px; border:1px solid var(--or); border-radius:100px; background:#fff; font-size:13.5px; font-weight:700; color:var(--or-d); line-height:1.6}
.faq{display:grid; gap:12px}
.faq details{background:#fff; border:1px solid var(--ln); border-radius:14px; box-shadow:var(--sh)}
.faq summary{display:flex; align-items:center; gap:14px; padding:18px 22px; cursor:pointer; list-style:none; font-weight:700; font-size:15.5px; line-height:1.7}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q"; flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--or); color:var(--ink); font-family:var(--en); font-size:14px; font-weight:700}
.faq summary::after{content:"＋"; margin-left:auto; color:var(--sub); font-size:18px}
.faq details[open] summary::after{content:"－"}
.faq .a{padding:0 22px 20px 66px; font-size:14.5px; line-height:1.95; color:var(--ink2)}
.cta .cta-sub{margin-top:14px; font-size:14px; color:#B9AE9E}
@media (max-width:640px){
  .dl div{grid-template-columns:minmax(0,1fr); gap:2px}
  .faq .a{padding-left:22px}
}
/* ========== v2 追加（お問い合わせ・プライバシーポリシー・404／2026-10-23） ========== */
/* フッター最下段：コピーライトの右に「お問い合わせ」「プライバシーポリシー」 */
.ft-bottom{grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 28px; padding-top:24px; margin-top:12px; border-top:1px solid var(--ln)}
.ft-bottom small{padding:0; margin:0; border:0}
.ft-sub{display:flex; flex-wrap:wrap; gap:8px 26px; font-size:13.5px; font-weight:500; line-height:1.6}
.ft-sub a{color:var(--sub); text-decoration:none} .ft-sub a:hover{color:var(--or-d)}
.ft-sub a[aria-current]{color:var(--ink)}
@media (max-width:640px){ .ft-bottom{flex-direction:column-reverse; align-items:flex-start} }
/* ---------- お問い合わせ ---------- */
.ct-hero{padding-bottom:clamp(48px,6vw,80px)}
.ct-form .inner{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(28px,4vw,40px)}
@media (min-width:901px){
  .ct-hero .inner,.ct-form .inner{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(36px,5vw,72px)}
  .ct-form .inner{align-items:start}
  .ct-side{position:sticky; top:108px}
}
/* 冒頭左：見出しの下の挿絵（2026-10-24 神林さん「作戦会議をはじめましょう！の余白にキャラクター挿絵」）。スマホでは見出しとご相談の流れのあいだ */
.ct-art{margin-top:clamp(20px,2.6vw,32px)}
.ct-art img{display:block; width:min(100%,420px); height:auto}
@media (max-width:900px){ .ct-art img{width:min(86%,360px); margin-inline:auto} }
/* 冒頭右：ご相談の流れ */
.ct-flow{padding:clamp(26px,3vw,36px) clamp(24px,2.8vw,36px) clamp(14px,1.6vw,20px); background:#fff; border:1px solid var(--ln); border-radius:var(--r); box-shadow:var(--sh-h)}
.ct-flow .ttl{display:flex; align-items:center; gap:12px; margin-bottom:4px; font-family:var(--en); font-size:13.5px; font-weight:700; letter-spacing:.22em; color:var(--or); text-transform:uppercase; line-height:1.6}
.ct-flow .ttl::before{content:""; width:26px; height:2px; border-radius:2px; background:var(--or)}
.ct-flow .ttl span{font-family:var(--jp); font-size:14px; letter-spacing:.06em; color:var(--ink); text-transform:none}
.ct-flow ol{margin:0; padding:0; list-style:none}
.ct-flow li{display:grid; grid-template-columns:52px minmax(0,1fr); gap:18px; align-items:center; padding:16px 0}
.ct-flow li + li{border-top:1px dashed var(--ln)}
.ct-flow .n{display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--ink); font-family:var(--en); font-size:17px; font-weight:700; color:var(--or); line-height:1}
.ct-flow .st{font-family:var(--disp); font-size:clamp(16px,1.4vw,18px); font-weight:700; color:var(--ink); line-height:1.6}
.ct-flow .st small{display:block; font-family:var(--jp); font-size:13.5px; font-weight:500; color:var(--sub); letter-spacing:.03em}
/* フォームの左：見出しと注意 */
.ct-side p.lead{font-size:clamp(15px,1.25vw,16.5px); line-height:2.05}
.ct-warn{margin-top:clamp(22px,2.6vw,30px); padding:18px 20px; background:#fff; border:1px solid var(--ln); border-radius:14px; box-shadow:var(--sh)}
.ct-warn .wt{display:flex; align-items:center; gap:10px; margin-bottom:6px; font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.6}
.ct-warn .wt::before{content:"!"; flex:none; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--or); font-family:var(--en); font-size:13px; font-weight:700; color:var(--ink); line-height:1}
.ct-warn p{font-size:14.5px; line-height:1.9; color:var(--ink2)}
.ct-notes{margin:18px 0 0; padding:0; list-style:none; display:grid; gap:10px}
.ct-notes li{position:relative; padding-left:16px; font-size:14px; line-height:1.85; color:var(--ink2)}
.ct-notes li::before{content:""; position:absolute; left:0; top:.78em; width:6px; height:6px; border-radius:50%; background:#CFC6B8}
.ct-notes a{color:var(--ink); font-weight:700; text-underline-offset:3px}
.form-card{padding:clamp(26px,3.2vw,40px) clamp(22px,3vw,40px); background:#fff; border:1px solid var(--ln); border-radius:var(--r); box-shadow:var(--sh-h)}

/* ---------- CF7 フォーム（ここから下を子テーマの style.css へ。CF7 が出すHTMLにそのまま当たる） ---------- */
/* 埋め込み：[contact-form-7 id="…" title="お問い合わせ" html_class="hb-form"] を <div class="form-card"> で包む */
.hb-form p{margin:0}
.hb-form .row > p,.hb-form .agree > p,.hb-form .submit > p{display:contents}  /* CF7 の自動段落 <p> があっても無くても同じ見た目に */
.hb-form .row{display:grid; gap:8px; margin:0 0 24px; padding:0; border:0; min-width:0}
.hb-form .row > label,.hb-form legend,.hb-form .row > p > label{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; padding:0; font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.6}
.hb-form legend{float:left; width:100%}  /* 枠の上辺に乗らず、ほかの項目と同じ並びにする */
.hb-form .req,.hb-form .opt{display:inline-block; padding:0 8px; border-radius:100px; background:#fff; font-size:12px; font-weight:700; line-height:1.6; letter-spacing:.04em}
.hb-form .req{border:1px solid var(--or); color:var(--or-d)}
.hb-form .opt{border:1px solid #CFC6B8; color:var(--sub)}
.hb-form .hint{font-size:13px; font-weight:500; color:var(--sub); line-height:1.7}
.hb-form legend .hint{margin-left:4px}
.hb-form .wpcf7-form-control-wrap{display:block}
.hb-form input[type="text"],.hb-form input[type="email"],.hb-form input[type="tel"],.hb-form textarea{display:block; width:100%; min-height:52px; margin:0; padding:12px 16px; border:1px solid #CFC6B8; border-radius:10px; background:#FCFBF8; font:inherit; font-size:16px; line-height:1.7; letter-spacing:.03em; color:var(--ink); box-shadow:none; appearance:none; -webkit-appearance:none; transition:border-color .2s ease, background-color .2s ease}
.hb-form textarea{min-height:176px; resize:vertical}
.hb-form [data-name="your-note"] textarea{min-height:112px}
.hb-form ::placeholder{color:#9A8F80; opacity:1}
.hb-form input:hover,.hb-form textarea:hover{border-color:#B3A898}
.hb-form input[type="text"]:focus,.hb-form input[type="email"]:focus,.hb-form input[type="tel"]:focus,.hb-form textarea:focus{outline:2px solid var(--or); outline-offset:1px; border-color:var(--or); background:#fff}
/* ご相談の内容：丸い札から1つ選ぶ（選んだ札は墨のベタ塗り） */
.hb-form .wpcf7-radio{display:flex; flex-wrap:wrap; gap:10px}
.hb-form .wpcf7-list-item{margin:0}
.hb-form .wpcf7-radio label{position:relative; display:block; cursor:pointer}
.hb-form .wpcf7-radio input{position:absolute; left:0; top:0; width:1px; height:1px; margin:0; opacity:0}
.hb-form .wpcf7-radio .wpcf7-list-item-label{display:flex; align-items:center; min-height:44px; padding:8px 18px; border:1px solid #CFC6B8; border-radius:100px; background:#fff; font-size:14.5px; font-weight:500; line-height:1.5; color:var(--ink); transition:border-color .2s ease, background-color .2s ease, color .2s ease}
.hb-form .wpcf7-list-item-label::before,.hb-form .wpcf7-list-item-label::after{content:none}
.hb-form .wpcf7-radio label:hover .wpcf7-list-item-label{border-color:var(--ink)}
.hb-form .wpcf7-radio input:checked + .wpcf7-list-item-label{border-color:var(--ink); background:var(--ink); color:#fff; font-weight:700}
.hb-form .wpcf7-radio input:focus-visible + .wpcf7-list-item-label{outline:2px solid var(--or); outline-offset:2px}
/* 同意の印 */
.hb-form .agree{margin:6px 0 26px}
.hb-form .wpcf7-acceptance .wpcf7-list-item{display:block}
.hb-form .wpcf7-acceptance label{display:flex; align-items:flex-start; gap:12px; font-size:15px; font-weight:500; line-height:1.7; color:var(--ink); cursor:pointer}
.hb-form .wpcf7-acceptance input{flex:none; display:grid; place-items:center; width:22px; height:22px; margin:2px 0 0; border:1px solid #B3A898; border-radius:6px; background:#fff; appearance:none; -webkit-appearance:none; cursor:pointer}
.hb-form .wpcf7-acceptance input:checked{border-color:var(--ink); background:var(--ink)}
.hb-form .wpcf7-acceptance input:checked::after{content:""; width:6px; height:11px; border:solid #fff; border-width:0 2px 2px 0; transform:translateY(-1px) rotate(45deg)}
.hb-form .wpcf7-acceptance input:focus-visible{outline:2px solid var(--or); outline-offset:2px}
.hb-form .wpcf7-acceptance a{color:var(--ink); font-weight:700; text-underline-offset:3px}
.hb-form .wpcf7-acceptance .req{margin-left:8px; vertical-align:1px}
/* 送信ボタン（CF7 は <input> なので、矢印は外側の箱に付ける） */
.hb-form .submit{position:relative}
/* Cloudflare Turnstile（迷惑な送信を防ぐ確認の部品）：CF7 はフォームの先頭に入れるので、「同意」と「送信」のあいだへ並べ替える（2026-10-24） */
.wpcf7 form.hb-form{display:flex; flex-direction:column}
.hb-form > *{min-width:0}
.hb-form .wpcf7-turnstile{order:1; display:flex; justify-content:center; margin:0 0 20px; contain:inline-size}  /* 部品（幅300px固定）が列の幅を押し広げないように */  /* 送信ボタンのすぐ上・中央（2026-10-24 神林さん） */
.hb-form .submit{order:2}
.wpcf7 form.hb-form .wpcf7-response-output{order:3}
@media (max-width:380px){ .hb-form .wpcf7-turnstile{transform:scale(.8); transform-origin:center top; margin-bottom:6px} }  /* 部品は幅300pxで縮まらないので、狭い画面では見た目だけ縮める */
.hb-form .wpcf7-submit{display:block; width:100%; min-height:60px; margin:0; padding:0 56px 0 28px; border:0; border-radius:100px; background:#fff; font:inherit; font-size:16.5px; font-weight:700; letter-spacing:.08em; color:var(--ink); cursor:pointer; box-shadow:inset 0 0 0 1.5px var(--ink); appearance:none; -webkit-appearance:none; transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease}
.hb-form .submit::after{content:"→"; position:absolute; top:50%; left:calc(50% + 37px); transform:translateY(-50%); font-family:var(--en); font-size:16.5px; font-weight:700; color:var(--or-d); pointer-events:none; transition:transform .25s ease}
.hb-form .wpcf7-submit:hover{background:var(--or); color:#fff; box-shadow:inset 0 0 0 1.5px var(--or); transform:translateY(-2px)}  /* D 線のボタン。載せるとオレンジ地に白い文字（2026-10-24） */
.hb-form .submit:hover::after{color:#fff; transform:translate(4px,calc(-50% - 2px))}
.hb-form .wpcf7-submit:disabled{background:#E9E3D9; color:var(--sub); box-shadow:none; transform:none; cursor:not-allowed}
.hb-form .submit:has(.wpcf7-submit:disabled)::after{color:var(--sub); transform:translateY(-50%)}
.hb-form .wpcf7-spinner{position:absolute; right:22px; top:50%; margin:-12px 0 0; background-color:var(--ink)}
/* 未入力の印・送信後の表示（CF7 標準の赤・緑・黄の線を、オレンジと墨に置き換える） */
.hb-form input.wpcf7-not-valid,.hb-form textarea.wpcf7-not-valid{border-color:var(--or); background:#fff; box-shadow:0 0 0 1px var(--or)}
.hb-form .wpcf7-not-valid-tip{display:flex; align-items:center; gap:8px; margin-top:8px; font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.6}
.hb-form .wpcf7-not-valid-tip::before{content:"!"; flex:none; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--or); font-family:var(--en); font-size:12px; font-weight:700; color:var(--ink); line-height:1}
.wpcf7 form.hb-form .wpcf7-response-output{margin:22px 0 0; padding:16px 20px; border:1px solid var(--or); border-radius:12px; background:#fff; font-size:14.5px; font-weight:700; line-height:1.8; color:var(--ink); word-break:auto-phrase}
.wpcf7 form.hb-form.sent .wpcf7-response-output{border-color:var(--ink); background:var(--ink); color:#fff}
.wpcf7 form.hb-form.failed .wpcf7-response-output,.wpcf7 form.hb-form.aborted .wpcf7-response-output,.wpcf7 form.hb-form.spam .wpcf7-response-output{border:2px solid var(--ink)}
@media (max-width:640px){
  .hb-form .wpcf7-radio{display:grid; grid-template-columns:minmax(0,1fr); gap:8px}
  .hb-form .wpcf7-radio .wpcf7-list-item-label{padding:10px 18px; border-radius:12px}
}
@media (max-width:900px){ .ct-side{position:static} }

/* 文節で折り返す（本文に BudouX で <wbr> を入れてある・phrase_breaks.py）。Safari は auto-phrase が効かないため（2026-10-24） */
main :is(h1,h2,h3,h4,p,li,dt,dd,th,td,summary,blockquote,figcaption):has(wbr){word-break:keep-all; overflow-wrap:anywhere; line-break:strict}
/* :has(wbr)＝切れ目を入れた要素だけ。お知らせの題名やフォームなど、WordPress が後から出す文は今までどおり */
/* 最終行に1〜2文字だけ残さない指定は Chrome だけに効かせる（Safari の text-wrap:pretty は全行を短くそろえ、右に空きが出るため） */
@supports (word-break:auto-phrase){ main :is(p,li,dd,td,figcaption,blockquote){text-wrap:pretty} }
/* 項目の頭の番号（::before の 01 など）は折らない。keep-all の保険（どこでも折る）が効いて「0／1」と縦に割れたため */
main :is(li,p,dt,dd,h2,h3)::before{white-space:nowrap; overflow-wrap:normal}