/* 記事・一覧ページ（Cocoon の型）に重ねる頭と足（build_wp_v1.py が AIページの見た目から抜き出し） */
:is(.hd,.mnav,.ft,.cta,.hb-archive-head){font-family:var(--jp); font-size:16px; line-height:2; letter-spacing:.03em; color:var(--ink2); -webkit-font-smoothing:antialiased}
:is(.hd,.mnav,.ft,.cta) *,:is(.hd,.mnav,.ft,.cta) *::before,:is(.hd,.mnav,.ft,.cta) *::after{box-sizing:border-box}
:is(.hd,.mnav,.ft,.cta) img{display:block; max-width:100%; height:auto}
:is(.hd,.mnav,.ft,.cta) a{color:inherit}
:is(.hd,.ft,.cta,.hb-archive-head) p{margin:0}
:is(.cta,.hb-archive-head) :is(h1,h2){font-family:var(--disp); color:var(--ink); font-weight:700; letter-spacing:.02em; margin:0; padding:0; border:0; background:none}
: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;}
:where(.hd,.mnav,.ft,.cta,.hb-archive-head) .btn{word-break:auto-phrase}
:where(.hd,.mnav,.ft,.cta,.hb-archive-head) .inner{width:100%; max-width:var(--w); margin-inline:auto; padding-inline:var(--pad)}
:where(.hd,.mnav,.ft,.cta,.hb-archive-head) .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}
:where(.hd,.mnav,.ft,.cta,.hb-archive-head) .eyebrow::before{content:""; width:26px; height:2px; border-radius:2px; background:var(--or)}
:where(.hd,.mnav,.ft,.cta,.hb-archive-head) .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}
:where(.hd,.mnav,.ft,.cta,.hb-archive-head) .btn .ar{font-family:var(--en); font-weight:700; transition:transform .25s ease}
:where(.hd,.mnav,.ft,.cta,.hb-archive-head) .btn:hover .ar{transform:translateX(4px)}
:where(.hd,.mnav,.ft,.cta,.hb-archive-head) .btn--pri{background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink)}
:where(.hd,.mnav,.ft,.cta,.hb-archive-head) .btn--pri .ar{color:var(--or-d)}
:where(.hd,.mnav,.ft,.cta,.hb-archive-head) .btn--pri:hover{background:var(--or); color:#fff; box-shadow:inset 0 0 0 1.5px var(--or); transform:translateY(-2px)}
:where(.hd,.mnav,.ft,.cta,.hb-archive-head) .btn--pri:hover .ar{color:#fff}
:where(.hd,.mnav,.ft,.cta,.hb-archive-head) .btn--sec{background:#fff; color:var(--ink); border:1px solid #CFC6B8}
:where(.hd,.mnav,.ft,.cta,.hb-archive-head) .btn--sec:hover{border-color:var(--ink); transform:translateY(-2px)}
:where(.hd,.mnav,.ft,.cta,.hb-archive-head) .btn--ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.3); font-weight:500}
:where(.hd,.mnav,.ft,.cta,.hb-archive-head) .btn--ghost:hover{border-color:#fff; transform:translateY(-2px)}
.cta .btn--pri{background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8)}
.cta .btn--pri .ar{color:var(--or)}
.cta .btn--pri:hover{background:var(--or); color:#fff; box-shadow:inset 0 0 0 1.5px var(--or)}
.cta .btn--pri:hover .ar{color:#fff}
:where(.hd,.mnav,.ft,.cta,.hb-archive-head) .btn--sm{min-height:48px; padding:0 24px; font-size:15px}
.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}
.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}
}
@media (max-width:900px){
  .hd-nav,.hd-cta{display:none}
  .hd-menu{display:flex}
  .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){
  .hd .inner{height:64px}
  .hd-logo img{height:32px}
  .cta-act{flex-direction:column}
  .cta-act .btn{width:100%}
  .cta-spark{width:160px; right:-64px; top:-50px; transform:none; opacity:.9}
}
.cta--form .inner{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(36px,5vw,72px); align-items:start}
.cta-steps{margin:clamp(24px,3vw,32px) 0 0; padding:0; list-style:none; counter-reset:c}
.cta-steps li{counter-increment:c; display:flex; gap:14px; align-items:baseline; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.14); color:#fff; font-size:15px; line-height:1.7}
.cta-steps li::before{content:counter(c,decimal-leading-zero); font-family:var(--en); font-weight:700; color:var(--or); letter-spacing:.08em}
.cta-small{margin-top:18px; font-size:13.5px; color:#B9AE9E; line-height:1.8}
@media (max-width:900px){
  .cta--form .inner{grid-template-columns:minmax(0,1fr)}
}
.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}
}