/* site.css — joint-elements.com 刷新版（C7）。全ページ共通の殻と下層の部品。
   値は DESIGN.md の Must/Should をここの変数に写したもの。ページの中に色・余白を直接書かない。 */
:root{
  --kinari:#f6f3ee; --bg:#f4f1ea; --paper:#fbf9f5; --sumi:#2b2a28; --ink:#1d1c1a; --or:#fa9100; --teal:#1f4e5a;
  --gray:#63615f; --lg:#9e9e9f; --line:#e2dbcf; --line2:#d8d1c4; --body:#3d3b37; --sub:#5a5752;
  --on-dark:#f6f3ee; --on-dark-2:rgba(246,243,238,.78);
  --e-out:cubic-bezier(.16,1,.3,1); --e-pop:cubic-bezier(.17,.88,.3,1.28);
  --gut:56px; --hd-h:78px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
body{font-family:"Noto Sans JP",sans-serif;color:var(--sumi);background:var(--bg);font-size:16px;line-height:1.9;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
.skip{position:absolute;left:-9999px;top:8px;z-index:999;background:var(--ink);color:#fff;padding:8px 14px}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.en{font-family:"Jost",sans-serif;letter-spacing:.22em;text-transform:uppercase;font-size:12px;font-weight:500}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:960px}
.h2{font-weight:900;font-size:clamp(26px,2.6vw,40px);line-height:1.45;word-break:auto-phrase;text-wrap:balance}
.h3{font-weight:700;font-size:clamp(19px,1.5vw,23px);line-height:1.55}
.lbl{display:inline-flex;align-items:center;gap:10px;color:var(--teal);margin-bottom:14px;letter-spacing:.3em}
.ic-arr{width:18px;height:18px;flex:0 0 auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- header ---------- */
.hd{position:fixed;inset:0 0 auto;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:22px 48px;transition:background .5s,padding .5s,box-shadow .5s}
.hd .logo img{height:30px;width:auto}
.hd .lg-c{display:none}
.nav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:500}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--or)}
.nav a:not(.pill):hover{color:var(--or)}
.hd:not(.scrolled) .nav{color:var(--on-dark);text-shadow:0 1px 10px rgba(0,0,0,.55)}
.hd:not(.scrolled) .nav .pill{color:var(--ink);text-shadow:none}
.hd.scrolled{background:rgba(246,243,238,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:14px 48px;box-shadow:0 1px 0 rgba(43,42,40,.08)}
.hd.scrolled .lg-w{display:none}.hd.scrolled .lg-c{display:block}
.hd.scrolled .nav{color:var(--sumi)}
.hd-light .hd .lg-w{display:none}.hd-light .hd .lg-c{display:block}
.hd-light .hd:not(.scrolled) .nav{color:var(--sumi);text-shadow:none}
.menu-btn{display:none}

/* ---------- buttons / links ---------- */
.pill{display:inline-flex;align-items:center;gap:14px;border-radius:999px;padding:15px 28px;font-weight:700;font-size:15px;letter-spacing:.05em;border:0;cursor:pointer;transition:transform .45s var(--e-pop),background .3s,box-shadow .45s,color .3s}
.pill:hover{transform:translateY(-3px)}
.pill-or{background:var(--or);color:var(--ink);box-shadow:0 12px 26px -12px rgba(250,145,0,.8)}
.pill-line{border:1.5px solid var(--sumi);background:transparent;color:var(--sumi)}
.pill-line:hover{background:var(--sumi);color:var(--kinari)}
.pill-ghost{border:1px solid rgba(246,243,238,.7);color:var(--on-dark);background:rgba(255,255,255,.06);backdrop-filter:blur(4px)}
.hd .pill{padding:11px 22px;font-size:13.5px}
.cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.more{display:inline-flex;align-items:center;gap:12px;margin-top:30px;font-weight:700;transition:color .3s}
.more i{width:40px;height:40px;border-radius:50%;background:var(--or);color:var(--ink);display:grid;place-items:center;transition:transform .45s var(--e-pop)}
.more:hover{color:var(--or)}
.more:hover i{transform:scale(1.12)}

/* ---------- photo sections (shared with top) ---------- */
section,header.phead{position:relative}
.photo{color:var(--on-dark);overflow:clip;background:var(--ink)}
.photo .bg,.photo .ph-bg{position:absolute;inset:0;overflow:hidden}
.photo .bg img,.photo .ph-bg img{width:100%;height:100%;object-fit:cover;will-change:transform}
.shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,19,18,.8) 0%,rgba(20,19,18,.5) 45%,rgba(20,19,18,.15) 80%)}
.photo .lbl{color:rgba(246,243,238,.75)}
.photo .h2{color:#fff}
.vline{position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--or);transform-origin:top}

/* ---------- page head (lower pages) ---------- */
.phead.photo{min-height:max(460px,64vh);display:flex;align-items:flex-end}
.phead.photo .shade{background:linear-gradient(180deg,rgba(20,19,18,.6) 0,rgba(20,19,18,0) 30%),linear-gradient(90deg,rgba(20,19,18,.82) 0%,rgba(20,19,18,.55) 45%,rgba(20,19,18,.2) 85%),linear-gradient(0deg,rgba(20,19,18,.5),rgba(20,19,18,0) 45%)}
.ph-in{position:relative;width:100%;padding-top:calc(var(--hd-h) + 40px);padding-bottom:clamp(48px,9vh,96px)}
.ph-in>*:not(.vline){margin-left:34px}
.ph-in .vline{left:var(--gut);top:calc(var(--hd-h) + 40px);bottom:clamp(48px,9vh,96px)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:12.5px;color:rgba(246,243,238,.65);margin-bottom:26px}
.crumbs a:hover{color:var(--or)}
.ph-h{font-weight:700;font-size:clamp(30px,3.4vw,52px);line-height:1.35;color:#fff;max-width:900px;word-break:auto-phrase;text-wrap:balance}
.ph-lead{margin-top:18px;max-width:640px;color:var(--on-dark-2);font-size:15.5px;line-height:1.95}
.phead.plain{background:var(--bg);color:var(--sumi);border-bottom:1px solid var(--line)}
.phead.plain .crumbs{color:var(--gray)}
.phead.plain .ph-h{color:var(--sumi)}
.phead.plain .ph-lead{color:var(--body)}
.phead.plain .ph-in{padding-bottom:56px}
.phead.plain .ph-in .vline{bottom:56px}

/* ---------- lower page body ---------- */
.lower{background:var(--bg)}
.intro{padding:clamp(64px,9vw,120px) 0 0}
.intro .lead-l{font-size:clamp(18px,1.55vw,22px);font-weight:700;line-height:1.8;max-width:44em;word-break:auto-phrase}
.intro .lead-l+p,.intro p+p{margin-top:18px;max-width:44em;color:var(--body)}
.sec{padding:clamp(64px,8vw,120px) 0;border-top:1px solid var(--line)}
.sec:first-child{border-top:0}
.sec-g{display:grid;grid-template-columns:minmax(220px,.34fr) 1fr;gap:clamp(32px,5vw,80px);align-items:start}
.sec-h{position:sticky;top:calc(var(--hd-h) + 24px)}
.sec-h .en{display:block;color:var(--teal);letter-spacing:.3em;margin-bottom:12px}
.sec-h .h2{font-size:clamp(22px,2vw,31px);font-weight:700;line-height:1.5}
.sec-h .no{display:block;font-family:"Jost",sans-serif;font-size:14px;letter-spacing:.2em;color:var(--or);margin-bottom:8px}
.sec-full .h2{margin-bottom:26px}
.prose{max-width:46em;color:var(--body)}
.prose>*+*{margin-top:1.1em}
.prose p b,.prose li b{color:var(--sumi)}
.prose .lead{font-size:18px;color:var(--sumi);font-weight:500}
.prose h3,.h3.sub{font-size:clamp(18px,1.4vw,21px);font-weight:700;color:var(--sumi);line-height:1.6;margin-top:2em}
.prose h3:first-child{margin-top:0}
.ul{list-style:none;display:grid;gap:10px}
.ul>li{position:relative;padding-left:26px}
.ul>li::before{content:"";position:absolute;left:0;top:.9em;width:12px;height:2px;background:var(--or)}
.ol-n{list-style:none;counter-reset:n;display:grid;gap:14px}
.ol-n>li{counter-increment:n;position:relative;padding-left:44px}
.ol-n>li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:.1em;font-family:"Jost",sans-serif;font-size:15px;letter-spacing:.1em;color:var(--or);font-weight:600}
.src-note,.note-s{font-size:13px;color:var(--gray);line-height:1.8}
.quote{font-weight:900;color:var(--sumi);font-size:clamp(19px,1.6vw,24px);line-height:1.7;word-break:auto-phrase}

/* tables */
.tblw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:15px;background:transparent}
.tbl th,.tbl td{padding:18px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line2);line-height:1.8}
.tbl tr:first-child th,.tbl tr:first-child td{border-top:1px solid var(--line2)}
.tbl th{width:32%;font-weight:700;color:var(--sumi);background:rgba(236,230,219,.55)}
.tbl td{color:var(--body)}
.tbl.th-narrow th{width:22%}
.tbl.cmp thead th{background:#ece6db;width:auto;font-size:14.5px}
.tbl.cmp tbody th{width:130px}
.tbl.cmp .us{background:#fff6e6;color:var(--sumi);font-weight:700;border-left:3px solid var(--or)}
.tbl.cmp thead .us{background:var(--or);color:var(--ink);font-family:"Jost",sans-serif;letter-spacing:.14em;font-size:18px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{background:#fff;padding:28px 28px 26px;border-top:3px solid var(--sumi)}
.card.or{border-top-color:var(--or)}
.card h3{font-size:18px;font-weight:700;line-height:1.55;color:var(--sumi)}
.card p{margin-top:10px;font-size:14.5px;color:var(--body);line-height:1.85}
.card .k{display:block;font-family:"Jost",sans-serif;letter-spacing:.2em;font-size:12px;color:var(--or);margin-bottom:8px}

/* link rows (to services / next pages) */
.links{display:grid;gap:12px;margin-top:8px}
.lk{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 4px;border-bottom:1px solid var(--line2);font-weight:700;transition:color .3s,padding .3s}
.lk small{display:block;font-weight:500;color:var(--gray);font-size:13.5px;margin-top:4px}
.lk .ic-arr{color:var(--or);transition:transform .3s}
.lk:hover{color:var(--or);padding-left:12px}

.lk:hover .ic-arr{transform:translateX(4px)}
.lk.soon{background:transparent;border:1.5px dashed var(--line2);color:var(--gray);font-weight:500}
.lk.soon:hover{background:transparent;color:var(--lg);padding-left:26px}

/* closing band (each page's own closing section) and the shared band */
.closing,.band{padding:clamp(110px,14vw,190px) 0}
.closing{background:var(--ink);color:var(--on-dark)}
.closing .h2,.band .h2{color:#fff;font-weight:700;font-size:clamp(26px,2.6vw,42px)}
.closing p,.band p{margin-top:20px;color:var(--on-dark-2);max-width:620px}
.closing .lbl,.band .lbl{color:rgba(246,243,238,.72)}
.band .shade{background:linear-gradient(90deg,rgba(20,19,18,.82),rgba(20,19,18,.5) 55%,rgba(20,19,18,.2))}
.band-in{position:relative}
.closing .pill-line,.band .pill-line{border-color:rgba(246,243,238,.7);color:var(--on-dark)}
.closing .pill-line:hover{background:var(--kinari);color:var(--ink)}

/* shared 5-step flow figure */
.flowfig{margin-top:10px}
.ff{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
.ff li{position:relative;padding:26px 18px 6px 0}
.ff li::before{content:"";position:absolute;left:0;top:-7px;width:12px;height:12px;border-radius:50%;background:var(--or);box-shadow:0 0 0 5px var(--bg)}
.ff .sn{display:block;font-family:"Jost",sans-serif;font-size:13px;letter-spacing:.25em;color:var(--or)}
.ff b{display:block;margin-top:6px;font-size:17px;line-height:1.5}
.ff small{display:block;margin-top:6px;font-size:13.5px;color:var(--sub);line-height:1.75}

/* reveal (lower pages:登場だけ) */
.js [data-motion="lower"] .reveal{opacity:0;transform:translateY(24px)}
.js [data-motion="lower"] .reveal.in{opacity:1;transform:none;transition:opacity .9s var(--e-out),transform .9s var(--e-out)}

.js [data-motion="lower"] .phead .ph-in>*:not(.vline){opacity:0}
.js [data-motion="lower"] .phead .vline{transform:scaleY(0)}
.nojs-fallback .reveal,.nojs-fallback .phead .ph-in>*{opacity:1!important;transform:none!important}
.nojs-fallback .phead .vline{transform:none!important}

/* ---------- footer ---------- */
.ft{background:var(--sumi);color:rgba(246,243,238,.66);padding:88px 0 44px;font-size:13.5px}
.ft-row{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap}
.ft-co .lg{height:28px;width:auto;margin-bottom:16px}
.ft-co p{line-height:1.9}
.ft-nav{display:grid;grid-template-columns:repeat(4,auto);gap:10px 48px}
.ft-nav div{display:flex;flex-direction:column;gap:9px}
.ft-nav .en{color:var(--or);font-size:11px;margin-bottom:4px}
.ft-nav a:hover{color:#fff}
.ft-bye{display:flex;align-items:center;gap:16px;margin-top:64px;color:var(--kinari);font-weight:700;font-size:15px}
.ft-bye img{width:56px;height:56px;border-radius:50%;background:#fff}
.ft-copy{margin-top:26px;font-size:12px;opacity:.7}

/* ---------- voices (/voice/) ---------- */
.vindex{padding:clamp(64px,8vw,110px) var(--gut)}
.vgroup+.vgroup{margin-top:64px}
.vg-note{margin-top:6px;font-size:14px;color:var(--gray)}
.vlist{display:grid;gap:12px;margin-top:22px}
.vc{display:grid;grid-template-columns:64px 1fr auto;gap:18px;align-items:center;background:#fff;padding:18px 24px;transition:background .3s}
.vc:hover{background:#fff6e6}
.vc-av{width:64px;height:64px;border-radius:50%;overflow:hidden;background:#efe9df}
.vc-av img{width:100%;height:100%;object-fit:cover}
.vc-noimg{background:#efe9df url("../img/joel_face.png") center/60% no-repeat;opacity:.55}
.vc-t b{display:block;font-size:17px;line-height:1.55}
.vc-t small{display:block;font-size:13px;color:var(--gray);line-height:1.6;margin-top:4px}
.vc .ic-arr{color:var(--or)}
.voice-article{padding:clamp(64px,8vw,110px) var(--gut)}
.v-photo{float:right;width:min(260px,36%);margin:0 0 20px 32px}
.v-photo img{width:100%;aspect-ratio:1;object-fit:cover}
.v-intro{font-size:14.5px;color:var(--gray);line-height:1.9;padding:18px 22px;background:#ece6db}
.v-body{margin-top:30px}
.v-body p{font-size:16.5px;line-height:2.05;color:var(--sumi)}
.v-body p+p{margin-top:1.2em}
.v-note,.v-svc{clear:both;margin-top:28px;font-size:13.5px;color:var(--gray)}
.v-svc a{color:var(--teal);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.v-back{margin-top:10px}

/* ---------- forms ---------- */
.form{display:grid;gap:22px;max-width:760px}
.fld label,.fld .fl{display:block;font-weight:700;font-size:15px;margin-bottom:8px}
.fld .req{display:inline-block;margin-left:8px;font-size:11.5px;background:var(--or);color:var(--ink);padding:1px 8px;border-radius:3px;vertical-align:2px}
.fld .opt{display:inline-block;margin-left:8px;font-size:11.5px;color:var(--gray)}
.fld input[type=text],.fld input[type=email],.fld select,.fld textarea{width:100%;font:inherit;font-size:16px;padding:14px 16px;border:1px solid var(--line2);background:#fff;border-radius:6px;color:var(--sumi)}
.fld textarea{min-height:150px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--or);outline-offset:0;border-color:transparent}
.fld .hint{font-size:13px;color:var(--gray);margin-top:6px}
.chk{display:flex;flex-wrap:wrap;gap:10px 22px}
.chk label{font-weight:500;display:inline-flex;gap:8px;align-items:center;margin:0}
.hp{position:absolute;left:-9999px}

@media (max-width:1100px){.ft-nav{grid-template-columns:repeat(2,auto)}}
@media (max-width:900px){
  :root{--gut:20px;--hd-h:62px}
  .hd,.hd.scrolled{padding:14px 20px}
  .menu-btn{display:inline-flex;align-items:center;gap:10px;background:none;border:1.5px solid currentColor;border-radius:999px;padding:7px 14px;cursor:pointer;color:var(--on-dark);position:relative;z-index:2}
  .menu-btn .en{font-size:11px;font-weight:600}
  .menu-btn i{width:14px;height:8px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transition:transform .3s}
  .hd.scrolled .menu-btn,.hd-light .menu-btn{color:var(--sumi)}
  .nav{position:fixed;inset:0;z-index:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:22px;padding:90px 32px 40px;background:var(--ink);color:var(--kinari)!important;font-size:19px;font-weight:700;text-shadow:none!important;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
  .nav .pill{margin-top:10px;font-size:15px}
  .menu-open .nav{opacity:1;visibility:visible}
  .menu-open .menu-btn{color:var(--kinari)}
  .menu-open .hd .lg-c{display:none}.menu-open .hd .lg-w{display:block}.menu-open .hd .logo{position:relative;z-index:2}
  .ph-in>*:not(.vline){margin-left:22px}
  .ph-h{font-size:clamp(23px,6.4vw,32px)}
  .sec-g{grid-template-columns:1fr;gap:22px}
  .sec-h{position:relative;top:auto}
  .tbl th,.tbl td{padding:14px 14px;font-size:14.5px}
  .tbl.stack tr{display:block;border-top:1px solid var(--line2)}
  .tbl.stack th,.tbl.stack td{display:block;width:auto;border:0}
  .tbl.stack td{padding-top:4px}
  .tbl.cmp{min-width:640px}
  .ff{grid-template-columns:1fr;border-top:0;border-left:2px solid var(--or);margin-left:6px}
  .ff li{padding:0 0 22px 26px}
  .ff li::before{left:-7px;top:6px}
  .ft-nav{grid-template-columns:1fr 1fr;gap:28px 24px}
  .v-photo{float:none;width:160px;margin:0 0 20px}
  .vc{grid-template-columns:52px 1fr auto;padding:16px}
  .vc-av{width:52px;height:52px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.js [data-motion] .reveal{opacity:1!important;transform:none!important}}

/* drafts / legal / links in text */
.draft-note{background:#fff6e6;border-left:3px solid var(--or);padding:14px 18px;font-size:14px;color:var(--sumi);margin-bottom:34px}
.legal h2{margin-top:2.2em}
.ul-link{color:var(--teal);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.ul-link:hover{color:var(--or)}
.form-err{background:#fdf0ef;border-left:3px solid #b3261e;padding:12px 16px;font-weight:700;color:#8a1c14}
.sec-lbl{display:block;color:var(--teal);letter-spacing:.3em;margin-bottom:12px}

/* inline arrow for → ⇒ inside copy */
.ia{display:inline-block;width:1em;height:1em;vertical-align:-.12em;margin:0 .1em}

/* ---------- submenu (hover / keyboard focus) ---------- */
.nv-g{position:relative;display:flex;align-items:center}
.nv-g>.nv::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);opacity:.7}
.nv-sub{position:absolute;top:100%;left:-22px;padding-top:16px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .25s,transform .25s,visibility .25s;z-index:5}
.nv-g:hover .nv-sub,.nv-g:focus-within .nv-sub{opacity:1;visibility:visible;transform:none}
.nv-sub.wide{left:50%;margin-left:-280px}
.sub-in{min-width:280px;background:var(--kinari);color:var(--sumi);text-shadow:none;padding:22px 0 0;box-shadow:0 24px 48px -18px rgba(20,19,18,.35)}
.sub-cols{display:flex;gap:8px;padding:0 10px 14px}
.sub-g{min-width:260px}
.sub-h{font-size:12px;font-weight:700;letter-spacing:.14em;color:#8a5a1c;padding:0 14px 8px;margin:0}
.nv-sub a{display:block;padding:9px 14px;font-size:14px;font-weight:500;line-height:1.5;color:var(--sumi)}
.nv-sub a b{font-weight:700}
.nv-sub a small{display:block;font-size:12px;color:#5f5a54;margin-top:2px;font-weight:400}
.nv-sub a:hover,.nv-sub a:focus-visible{background:#ece6db;color:var(--sumi)}
.nv-sub a.sub-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px;font-size:13px;font-weight:700;background:#ece6db}
.nv-sub a.sub-top svg{width:15px;height:15px;transition:transform .25s}
.nv-sub a.sub-top:hover{background:#e3dbcd}
.nv-sub a.sub-top:hover svg{transform:translateX(4px)}
@media (max-width:1100px){
  .nv-g{display:block}
  .nv-g>.nv::after{display:none}
  .nv-sub{position:static;opacity:1;visibility:inherit;transform:none;padding:4px 0 6px 14px}
  .nv-sub.wide{margin-left:0}
  .sub-in{background:transparent;box-shadow:none;border:0;padding:0;min-width:0}
  .sub-cols{display:block;padding:0}
  .sub-g{min-width:0;margin-bottom:6px}
  .sub-h{color:rgba(246,243,238,.5);font-size:11px;padding:6px 0 2px}
  .nv-sub a{color:rgba(246,243,238,.78);font-size:14px;padding:5px 0}
  .nv-sub a small{display:none}
  .nv-sub a:hover{background:transparent;color:var(--or)}
  .nv-sub a.sub-top{display:none}
  .nav{overflow-y:auto;justify-content:flex-start;gap:14px}
}

/* v2 (2026-09-27): 下層ページの頭の縦線をやめる（AIがよく使う片側の色線）。文字は左に揃えるだけ */
.phead .vline{display:none}
.ph-in>*:not(.vline){margin-left:0}
.phead.photo{min-height:max(480px,70vh)}
.ph-h{font-size:clamp(32px,3.8vw,60px);font-weight:900}
.phead .lbl{letter-spacing:.24em}

/* v2 (2026-09-27): 下層ページのAIっぽさ除去（調査レポート 2026-09-27_ai-design-tells #3 #4 #5）
   - 英大文字の小ラベル「01 — Seven types」等を出さない
   - 全章「見出し左・本文右」の2カラムをやめ、見出しを本文の上に置く */
.lower .sec-h .en,.lower .sec-lbl,.lower .sec-h .no,.phead .lbl{display:none}
.lower .sec-g{grid-template-columns:1fr;gap:clamp(22px,3vw,36px)}
.lower .sec-h{position:relative;top:auto}
.lower .sec-h .h2{font-size:clamp(26px,2.8vw,42px);font-weight:900;line-height:1.45;word-break:auto-phrase;text-wrap:balance}
.tbl.cmp .us{border-left:0}
.card{border-top:0;border:1px solid var(--line2)}
.draft-note{border-left:0;border:1px solid #f0d9b5}
/* v2 (2026-09-27): 下層の章は「読む列」を中央に置く。本文が左に寄って横幅の2/3で終わり、右が空く形をやめる */
.lower .sec-g{max-width:880px;margin-left:auto;margin-right:auto}
.lower .sec-g .prose{max-width:none}

/* v3 (2026-09-27): 画面幅1100px以下はメニューをボタンに畳む（それより広くても項目が折り返してロゴに重なっていた） */
@media (max-width:1100px){
  .hd,.hd.scrolled{padding-left:28px;padding-right:28px}
  .menu-btn{display:inline-flex;align-items:center;gap:10px;background:none;border:1.5px solid currentColor;border-radius:999px;padding:7px 14px;cursor:pointer;color:var(--on-dark);position:relative;z-index:2}
  .menu-btn .en{font-size:11px;font-weight:600}
  .menu-btn i{width:14px;height:8px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transition:transform .3s}
  .hd.scrolled .menu-btn,.hd-light .menu-btn{color:var(--sumi)}
  .nav{position:fixed;inset:0;z-index:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:22px;padding:90px 32px 40px;background:var(--ink);color:var(--kinari)!important;font-size:19px;font-weight:700;text-shadow:none!important;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
  .nav .pill{margin-top:10px;font-size:15px}
  .menu-open .nav{opacity:1;visibility:visible}
  .menu-open .menu-btn{color:var(--kinari)}
  .menu-open .hd .lg-c{display:none}.menu-open .hd .lg-w{display:block}.menu-open .hd .logo{position:relative;z-index:2}
}

/* ヘッダーの項目は折り返さない。1101〜1320px は間隔と文字を少し詰める */
.nav .nv,.nav .pill{white-space:nowrap}
@media (min-width:1101px) and (max-width:1320px){.hd,.hd.scrolled{padding-left:32px;padding-right:32px}.nav{gap:20px;font-size:13.5px}.nav .pill{padding-left:20px;padding-right:20px}}
@media (max-width:1100px){.nav{overflow-y:auto;justify-content:flex-start;gap:14px}}
@media (max-width:900px){.hd,.hd.scrolled{padding:14px 20px}}
/* v3: ぼかし（backdrop-filter）を付けたヘッダーの中では、全画面のメニュー（position:fixed）がヘッダーの高さに閉じ込められる。
   スクロール後に MENU を押しても開かなかった原因。メニューを畳む幅では、ぼかしをやめて塗りの背景にする */
@media (max-width:1100px){.hd.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(246,243,238,.98)}}
.menu-open .hd{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.menu-open .hd .menu-btn{color:var(--kinari)!important}.menu-open .hd.scrolled{background:transparent;box-shadow:none}
html.menu-open,html.menu-open body{overflow:hidden}

/* C8: 同意のチェックボックスを押しやすく（公開前50項目 #27・24px 以上）。全フォーム共通 */
input[type=checkbox],.lpform input[type=checkbox]{width:24px!important;height:24px;min-width:24px;margin:0 6px 0 0;vertical-align:-5px;accent-color:var(--sumi)}

/* C8: スマホのメニューが画面より長いと上下が切れてスクロールもできなかった。収まるときは中央、はみ出すときは上から並べて指でスクロール */
@media (max-width:1100px){.nav{justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.nav>:first-child{margin-top:auto}.nav>:last-child{margin-bottom:auto}}
/* C8: メニューをスクロールしたとき、項目がロゴと MENU ボタンの後ろに透けないよう、開いている間は上の帯を塗る */
@media (max-width:1100px){.menu-open .hd,.menu-open .hd.scrolled{background:var(--ink)!important}}
/* C8: メニューのスクロール範囲はロゴと MENU ボタンの帯（下端は最大 59px）より下から。項目が帯に重ならない */
@media (max-width:1100px){.nav{top:64px;padding-top:24px}}