/* トップ（top_design_template_v5_お知らせ.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:500; color:var(--ink); letter-spacing:.06em; line-height:1.5}
.hero-kicker b{font-weight:700}  /* 読み込んでいる Noto Sans JP の一番太い 700。「大事」「継続」だけ太く（2026-10-24 神林さん）。ほかは細めにして差をつける */
.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}
.news-side .h2{white-space:nowrap}

/* ---------- 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:50%; overflow:hidden; aspect-ratio:1/1; box-shadow:var(--sh-h)}
.mission-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 22%}
.mission-fig figcaption{display:flex; justify-content:center; 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;}

/* 2026-10-23 夜：AIの帯は絵（生成りの台）・サービス名の横にマーク */
.ai-band-fig--illust{background:var(--cream); display:grid; place-items:center; padding:clamp(18px,2.4vw,30px)}
.ai-band-fig--illust img{position:static; width:100%; max-width:520px; height:auto; object-fit:contain}
.svc-name{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.svc-name h3{margin-bottom:0}
.svc-logo{flex:none; width:44px; height:auto}
.svc-logo--locaon{width:48px}  /* 透明な余白を切った写し（2026-10-24） */
@media (max-width:900px){ .ai-band-fig--illust{min-height:0; aspect-ratio:auto} }
@media (max-width:1024px){ .news{grid-template-columns:auto minmax(0,1fr)} }
@media (max-width:900px){ .news{grid-template-columns:minmax(0,1fr)} .news-side{padding-top:0} }  /* 641〜1023で一覧側に押されて見出し側が潰れ、「お知らせ一覧」が縦に並ぶのを防ぐ（10/23） */
@media (max-width:640px){ .svc{grid-template-columns:minmax(0,1fr)} }
@media (max-width:400px){ .svc-name{gap:10px} .svc-logo{width:38px} .svc-logo--locaon{width:42px} }  /* 狭い幅でもロゴと名前は横並び・縦の中心をそろえる（2026-10-24 神林さん） */

/* ========== 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} }

/* 文節で折り返す（本文に 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}