@charset "UTF-8";
/* ==========================================================================
   RYZ ONE, LLC  —  style.css
   1. tokens / 2. reset / 3. base / 4. layout / 5. parts
   6. header / 7. drawer / 8. fixed cta / 9. footer / 10. sections
   ========================================================================== */

/* ==========================================================================
   1. tokens
   ========================================================================== */
:root{
  /* ink */
  --ink:          #121317;
  --ink-deep:     #0B0C0E;
  --ink-soft:     #2A2D33;
  --ink-muted:    #5E636B;

  /* gold */
  --gold:         #C4953D;
  --gold-deep:    #946618;
  --gold-light:   #E6B858;
  --gold-tint:    rgba(196,149,61,.08);
  --gold-line:    rgba(196,149,61,.45);

  /* paper */
  --paper:        #FFFFFF;
  --paper-2:      #F7F5F1;
  --line:         #E4E0D9;

  /* dark surface lines */
  --line-dark:    rgba(255,255,255,.14);
  --ink-dim:      rgba(255,255,255,.72);

  /* fonts */
  --font-serif: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-sans:  "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --font-en:    "Jost", "Helvetica Neue", Arial, sans-serif;

  /* space */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10:128px; --sp-11:160px;

  /* type scale */
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-base:15px;
  --fs-md:  16px;
  --fs-lg:  clamp(20px, 2.2vw, 26px);
  --fs-xl:  clamp(24px, 3.0vw, 34px);
  --fs-2xl: clamp(28px, 4.0vw, 44px);
  --fs-3xl: clamp(30px, 4.6vw, 54px);   /* 設計書 5-4 の定義（下層ページ用に保持） */
  /* トップの主見出しは 13文字 × 2行を維持するため上限を絞った実効値を使う（下記 S1 参照） */
  --fs-hero:clamp(30px, 2.9vw, 38px);
  --fs-num: clamp(28px, 3.4vw, 40px);

  /* misc */
  --radius:      2px;
  --radius-btn:  2px;
  --dur:         .32s;
  --ease:        cubic-bezier(.22,.61,.36,1);
  --border:      1px solid var(--line);
  --border-gold: 1px solid var(--gold-line);
  --z-header:    100;
  --z-drawer:    200;
  --z-fixedcta:  90;

  --bar-h: calc(60px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 900px){
  :root{ --fs-base:16px; --fs-md:18px; }
}

/* ==========================================================================
   2. reset
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:60px; }
@media (min-width: 900px){ html{ scroll-padding-top:84px; } }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; }
h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
img,svg,video{ display:block; }
img{ max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
address{ font-style:normal; }
table{ border-collapse:collapse; }
[hidden]{ display:none !important; }

/* ==========================================================================
   3. base
   ========================================================================== */
body{
  font-family:var(--font-sans);
  font-weight:400;
  font-size:var(--fs-base);
  line-height:1.9;
  color:var(--ink);
  background:var(--paper);
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
  word-break:normal;
  line-break:strict;
}
:focus-visible{
  outline:2px solid var(--gold-deep);
  outline-offset:3px;
}
.on-dark :focus-visible{ outline-color:var(--gold-light); }

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:#fff;
  padding:12px 20px; z-index:300; font-size:14px;
}
.skip-link:focus{ left:0; }

.visually-hidden{
  position:absolute !important; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ==========================================================================
   4. layout
   ========================================================================== */
.container{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  padding-inline:20px;
}
@media (min-width: 600px){ .container{ padding-inline:40px; } }
@media (min-width: 900px){ .container{ padding-inline:64px; } }

.section{ padding-block:var(--sp-8); }
@media (min-width: 600px){ .section{ padding-block:var(--sp-9); } }
@media (min-width: 900px){ .section{ padding-block:var(--sp-10); } }

.section--tint{ background:var(--paper-2); }

/* section heading : english label + japanese title */
.sec-label{
  font-family:var(--font-en);
  font-weight:500;
  font-size:var(--fs-xs);
  line-height:1.4;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-deep);
}
.sec-label::after{
  content:""; display:block;
  width:40px; height:1px;
  background:var(--gold);
  margin-top:12px;
}
.sec-title{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:var(--fs-xl);
  line-height:1.5;
  letter-spacing:.04em;
  margin-top:20px;
}
.sec-lead{
  margin-top:24px;
  color:var(--ink-soft);
  max-width:44em;
}

/* ==========================================================================
   5. parts : buttons / links / icons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:14px;
  min-height:56px;
  padding:0 32px;
  font-family:var(--font-sans);
  font-weight:500;
  font-size:15px;
  line-height:1.4;
  letter-spacing:.04em;
  border-radius:var(--radius-btn);
  border:1px solid transparent;
  transition:background-color var(--dur) var(--ease),
             color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.btn .ico-arrow{ flex:none; }

.btn--primary{ background:var(--ink); color:#fff; }
.btn--primary .ico-arrow{ color:var(--gold-light); }
.btn--primary:hover{ background:var(--ink-soft); }

.btn--gold-frame{
  min-height:44px; padding:0 22px;
  font-size:14px;
  /* 枠線しかボタンの手がかりがないため WCAG 1.4.11（3:1）を満たす --gold-deep を使う */
  border-color:var(--gold-deep);
  color:var(--ink);
  background:transparent;
}
.btn--gold-frame:hover{ background:var(--gold-tint); }

.btn--on-dark{
  border-color:var(--gold-light);
  color:var(--gold-light);
  background:transparent;
}
.btn--on-dark:hover{ background:var(--gold-light); color:var(--ink-deep); }
.btn--on-dark .ico-arrow{ color:currentColor; }

.btn--block{ display:flex; width:100%; }
@media (min-width: 600px){ .btn--block{ display:inline-flex; width:auto; } }

.link-arrow{
  display:inline-flex; align-items:center; gap:10px;
  min-height:44px;
  font-weight:500; font-size:15px; letter-spacing:.04em;
}
.link-arrow .ico-arrow{ color:var(--gold-deep); transition:transform var(--dur) var(--ease); }
.link-arrow > span{ border-bottom:1px solid transparent; transition:border-color var(--dur) var(--ease); }
.link-arrow:hover > span{ border-color:var(--ink); }
.link-arrow:hover .ico-arrow{ transform:translateX(4px); }

.tel-link{ font-family:var(--font-en); letter-spacing:.02em; }

/* inline text link inside body copy */
.txt-link,
.flow__text a{
  border-bottom:1px solid var(--gold-line);
  transition:border-color var(--dur) var(--ease);
}
.txt-link:hover,
.flow__text a:hover{ border-bottom-color:var(--ink); }

.ico{ fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
.ico-arrow{ width:18px; height:8px; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }

/* scroll reveal (only when JS is available) */
.js .reveal{
  opacity:0;
  transform:translateY(8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   6. header
   ========================================================================== */
.site-header{
  position:sticky; top:0;
  z-index:var(--z-header);
  height:60px;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  transition:height var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.site-header__inner{
  height:100%;
  display:flex; align-items:center;
}
.site-logo{ display:flex; align-items:center; min-height:44px; }
.site-logo img{ height:30px; width:auto; }

@media (min-width: 900px){
  .site-header{ height:84px; }
  .site-header.is-scrolled{
    height:64px;
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
  }
  .site-logo img{ height:40px; transition:height var(--dur) var(--ease); }
  .site-header.is-scrolled .site-logo img{ height:32px; }
}

.gnav{ display:none; }
@media (min-width: 900px){
  .gnav{ display:flex; align-items:center; gap:34px; margin-left:auto; }
}
.gnav a{
  position:relative;
  display:inline-flex; align-items:center;
  min-height:44px;
  font-weight:500; font-size:15px; letter-spacing:.04em;
}
.gnav a::after{
  content:""; position:absolute;
  left:0; right:100%; bottom:9px;
  height:1px; background:var(--gold);
  transition:right var(--dur) var(--ease);
}
.gnav a:hover::after,
.gnav a[aria-current="page"]::after{ right:0; }

.header-tail{ display:none; }
@media (min-width: 900px){
  .header-tail{ display:flex; align-items:center; gap:22px; margin-left:36px; }
}
.header-tel{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px;
  font-family:var(--font-en); font-weight:500; font-size:15px; letter-spacing:.02em;
}
.header-tel .ico{ width:15px; height:15px; color:var(--gold-deep); flex:none; }

/* hamburger */
.hamburger{
  display:inline-flex; flex-direction:column; justify-content:center; align-items:center;
  gap:6px;
  width:44px; height:44px;
  margin-left:auto;
}
.hamburger span{
  display:block; width:22px; height:1px; background:var(--ink);
  transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (min-width: 900px){ .hamburger{ display:none; } }

/* ==========================================================================
   7. drawer
   ========================================================================== */
.drawer-overlay{
  position:fixed; inset:0;
  background:rgba(11,12,14,.42);
  opacity:0; visibility:hidden;
  z-index:199;
  /* visibility は補間せず、開くときは即時／閉じるときは遅延させる */
  transition:opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.drawer-overlay.is-open{
  opacity:1; visibility:visible;
  transition:opacity var(--dur) var(--ease), visibility 0s linear 0s;
}

.drawer{
  position:fixed; top:0; right:0; bottom:0;
  width:min(86vw, 340px);
  background:var(--paper);
  border-left:1px solid var(--line);
  z-index:var(--z-drawer);
  display:flex; flex-direction:column;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  transform:translateX(100%);
  visibility:hidden;
  transition:transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.drawer.is-open{
  transform:none; visibility:visible;
  transition:transform var(--dur) var(--ease), visibility 0s linear 0s;
}
@media (min-width: 900px){
  .drawer, .drawer-overlay{ display:none; }
}
.drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  height:60px; padding-inline:20px 12px;
  border-bottom:1px solid var(--line);
}
.drawer__head img{ height:28px; width:auto; }
.drawer__close{
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
}
.drawer__close .ico{ width:18px; height:18px; }

.drawer__nav{ padding:8px 20px 0; }
.drawer__nav a{
  display:flex; align-items:center;
  min-height:56px;
  font-size:18px; font-weight:500; letter-spacing:.04em;
  border-bottom:1px solid var(--line);
}
.drawer__nav .en{
  font-family:var(--font-en); font-size:11px; letter-spacing:.16em;
  color:var(--gold-deep); margin-left:12px; text-transform:uppercase;
}
.drawer__foot{
  margin-top:auto;
  padding:28px 20px calc(28px + env(safe-area-inset-bottom, 0px));
  display:grid; gap:12px;
}
.drawer__foot .btn{ width:100%; }
.drawer__tel{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:56px;
  border:1px solid var(--line);
  line-height:1.3;
}
.drawer__tel .num{ font-family:var(--font-en); font-weight:600; font-size:21px; letter-spacing:.02em; }
.drawer__tel .cap{ font-size:var(--fs-xs); color:var(--ink-muted); letter-spacing:.08em; }

body.is-locked{ overflow:hidden; }

/* ==========================================================================
   8. fixed cta bar (SP)
   ========================================================================== */
.cta-bar{
  position:fixed; left:0; right:0; bottom:0;
  z-index:var(--z-fixedcta);
  display:grid; grid-template-columns:1fr 1fr;
  height:var(--bar-h);
  padding-bottom:env(safe-area-inset-bottom, 0px);
  border-top:1px solid var(--gold);
  transform:translateY(110%);
  /* 画面外に退避している間は visibility でフォーカスも切る（ドロワーと同じ手法） */
  visibility:hidden;
  transition:transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.cta-bar.is-visible{
  transform:none; visibility:visible;
  transition:transform var(--dur) var(--ease), visibility 0s linear 0s;
}
@media (min-width: 900px){ .cta-bar{ display:none; } }

.cta-bar a{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-size:15px; font-weight:500; letter-spacing:.04em;
}
.cta-bar__tel{ background:var(--ink); color:#fff; }
.cta-bar__tel .ico{ width:16px; height:16px; color:var(--gold-light); }
.cta-bar__form{ background:var(--paper); color:var(--ink); border-left:1px solid var(--gold); }
.cta-bar a:focus-visible{ outline-offset:-4px; }
.cta-bar__tel:focus-visible{ outline-color:var(--gold-light); }
.cta-bar__form .ico{ width:16px; height:16px; color:var(--gold-deep); }

/* ==========================================================================
   9. footer
   ========================================================================== */
.site-footer{
  background:var(--paper-2);
  padding-top:var(--sp-8);
  /* 固定CTAバーはフッター到達時に隠れるため、バー高さぶんの予約は不要 */
  padding-bottom:28px;
}
@media (min-width: 900px){
  .site-footer{ padding-top:var(--sp-9); padding-bottom:0; }
}
.footer__top{ display:grid; gap:40px; }
@media (min-width: 900px){
  .footer__top{ grid-template-columns:minmax(0,1fr) auto; gap:64px; align-items:start; }
}
.footer__logo img{ height:38px; width:auto; }
@media (min-width: 900px){ .footer__logo img{ height:44px; } }

.footer__info{ margin-top:22px; font-size:14px; line-height:2; color:var(--ink-soft); }
.footer__info dl{
  display:grid; grid-template-columns:auto 1fr;
  gap:0 16px; margin-top:6px; align-items:center;
}
.footer__info dt{
  font-family:var(--font-en); font-size:var(--fs-xs); letter-spacing:.14em;
  color:var(--gold-deep); text-transform:uppercase;
}
.footer__info dd a{
  display:inline-flex; align-items:center;
  min-height:44px;  /* タップ領域は維持したまま、下線は文字に密着させる */
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-decoration-color:var(--gold-line);
  text-underline-offset:4px;
  transition:text-decoration-color var(--dur) var(--ease);
}
.footer__info dd a:hover{ text-decoration-color:var(--ink); }

/* SP は縦積み（左列に空セルを作らない）。PC で 2 カラムに切り替える */
.footer__nav{ display:flex; flex-direction:column; }
.footer__nav > div{ display:flex; flex-direction:column; }
@media (min-width: 900px){
  .footer__nav{ display:grid; grid-template-columns:repeat(2, auto); gap:0 56px; justify-items:start; }
  .footer__nav > div{ display:block; }
}
.footer__nav a{
  display:flex; align-items:center;
  min-height:48px;
  font-size:14px; font-weight:500; letter-spacing:.04em;
}
.footer__nav a:hover{ color:var(--gold-deep); }

.footer__bottom{
  margin-top:var(--sp-7);
  border-top:1px solid var(--gold-line);
  padding-block:22px;
}
.footer__copy{
  font-family:var(--font-en); font-weight:400; font-size:var(--fs-xs);
  letter-spacing:.06em; color:var(--ink-muted);
}

/* ==========================================================================
   10. sections
   ========================================================================== */

/* --- S1 hero ------------------------------------------------------------ */
.hero{ background:var(--paper); }
.hero__visual{ position:relative; height:42vh; min-height:260px; overflow:hidden; }
.hero__visual img{
  /* 元画像の左右端にある白フチを外すため 3% ずつ外側へ逃がす */
  position:absolute; inset:0 -3%;
  width:106%; height:100%;
  object-fit:cover; object-position:48% 44%;
}
.hero__body{ padding:40px 20px 48px; }
@media (min-width: 600px){ .hero__body{ padding:48px 40px 56px; } }
.hero__text{ position:relative; padding-left:24px; }
.br-sp{ display:none; }

.hero__title{
  position:relative;
  font-family:var(--font-serif);
  font-weight:500;
  font-size:var(--fs-hero);
  line-height:1.55;
  letter-spacing:.04em;
  margin-top:22px;
}
.hero__title::before{
  content:""; position:absolute;
  left:-24px; top:.18em; bottom:.18em;
  width:1px; background:var(--gold);
}
.hero__title-em{ font-size:1.15em; }
/* 480px 未満は主見出しの折り返し位置を固定し、2行目の拡大をやめて行末の孤立を防ぐ */
@media (max-width: 479px){
  .br-sp{ display:inline; }
  .hero__title-em{ font-size:1em; }
  .hero__title{ letter-spacing:.02em; }
  .hero__text{ padding-left:18px; }
  .hero__title::before{ left:-18px; }
}

.hero__lead{
  margin-top:24px;
  font-size:var(--fs-md);
  line-height:1.9;
  color:var(--ink-soft);
}
.hero__note{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:var(--fs-sm);
  letter-spacing:.04em;
  color:var(--ink-muted);
}
.hero__actions{
  margin-top:32px;
  display:flex; flex-direction:column; align-items:flex-start; gap:18px;
}
@media (min-width: 600px){
  .hero__actions{ flex-direction:row; align-items:center; gap:32px; }
}
@media (min-width: 900px){
  /* col1 = コンテナ左ガター（100% はスクロールバーを含まない body 幅なので .container と厳密に一致する） */
  .hero{
    display:grid;
    grid-template-columns:
      minmax(64px, calc((100% - 1180px) / 2 + 64px))
      minmax(0, 1fr)
      38%;
    align-items:center;
    min-height:min(88vh, 720px);
  }
  .hero__visual{ grid-area:1 / 3; align-self:stretch; height:auto; min-height:0; }
  .hero__visual img{ object-position:50% 38%; }
  .hero__body{ grid-area:1 / 2; padding:64px 36px 64px 0; }
}
@media (min-width: 1200px){
  .hero{ grid-template-columns:
      minmax(64px, calc((100% - 1180px) / 2 + 64px))
      minmax(0, 1fr)
      44%; }
  .hero__body{ padding-right:48px; }
}

/* --- S2 four strengths --------------------------------------------------- */
.strengths{ padding-block:var(--sp-8); }
@media (min-width: 900px){ .strengths{ padding-block:var(--sp-9); } }

.strengths__grid{ display:grid; grid-template-columns:1fr 1fr; }
.strength{
  text-align:center;
  padding:24px 6px 26px;
  border-bottom:1px solid var(--line);
}
.strength:nth-last-child(-n+2){ border-bottom:0; }
.strength .ico{ width:28px; height:28px; color:var(--gold); margin:0 auto; }
.strength h3{
  margin-top:16px;
  font-weight:600; font-size:16px; letter-spacing:.04em; line-height:1.6;
}
.strength p{
  margin-top:8px;
  font-size:14px; line-height:1.8; color:var(--ink-muted);
}
@media (min-width: 900px){
  .strengths__grid{ grid-template-columns:repeat(4, 1fr); }
  .strength{ position:relative; padding:0 30px; border-bottom:0; }
  .strength + .strength::before{
    content:""; position:absolute; left:0; top:50%;
    transform:translateY(-50%);
    width:1px; height:72px; background:var(--gold-line);
  }
}

/* --- S3 services --------------------------------------------------------- */
.section--services{ padding-bottom:0; }
.services__list{ margin-top:var(--sp-7); }
@media (min-width: 900px){ .services__list{ margin-top:var(--sp-8); } }

/* 写真素材が支給されるまで画像枠は置かない（空き枠に見えるため）。
   下層 /service/ の .svc-detail と同じ「罫線＋番号＋見出し」の組みに統一する。 */
.svc{ border-top:1px solid var(--gold-line); padding-top:30px; }
.svc + .svc{ margin-top:var(--sp-8); }
@media (min-width: 900px){
  .svc{
    display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr);
    gap:48px; padding-top:40px; align-items:start;
  }
  .svc + .svc{ margin-top:var(--sp-9); }
}

.svc__num{
  font-family:var(--font-en); font-weight:500; font-size:40px;
  line-height:1; letter-spacing:.02em;
  color:var(--gold-deep);
}
.svc__title{
  margin-top:14px;
  font-family:var(--font-serif); font-weight:600;
  font-size:clamp(21px, 2.1vw, 26px); line-height:1.6; letter-spacing:.04em;
}
.svc__text{ margin-top:18px; line-height:1.9; color:var(--ink-soft); }
@media (min-width: 900px){ .svc__text{ margin-top:0; } }
.svc__body .link-arrow{ margin-top:14px; }

.svc-band{
  background:var(--paper-2);
  margin-top:var(--sp-8);
  padding-block:var(--sp-8);
}
@media (min-width: 900px){
  .svc-band{ margin-top:var(--sp-9); padding-block:var(--sp-9); }
}

/* --- S4 reasons ---------------------------------------------------------- */
.reasons{ margin-top:var(--sp-7); border-top:1px solid var(--line); }
@media (min-width: 900px){ .reasons{ margin-top:var(--sp-8); } }
.reasons > div{ padding-block:26px; border-bottom:1px solid var(--line); }
.reasons dt{
  font-weight:600; font-size:var(--fs-base); line-height:1.8; letter-spacing:.02em;
  padding-left:14px; border-left:2px solid var(--gold);
}
.reasons dd{ margin-top:12px; line-height:1.9; color:var(--ink-soft); }
@media (min-width: 900px){
  .reasons > div{
    display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr);
    gap:48px; padding-block:34px; align-items:start;
  }
  .reasons dt{ padding-left:0; border-left:0; }
  .reasons dd{ margin-top:0; }
}

/* --- S5 area ------------------------------------------------------------- */
.area{ display:grid; gap:40px; }
@media (min-width: 900px){
  .area{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:80px; align-items:start; }
}
.area__note{
  margin-top:24px; padding-top:18px;
  border-top:1px solid var(--line);
  font-size:var(--fs-sm); color:var(--ink-muted);
}
.area__panel{
  background:var(--paper-2);
  border-top:1px solid var(--gold);
  padding:8px 24px 16px;
}
@media (min-width: 600px){ .area__panel{ padding:8px 40px 24px; } }
.area__panel > div{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:4px 20px;
  padding-block:20px;
}
.area__panel > div + div{ border-top:1px solid var(--line); }
.area__panel dt{
  font-size:var(--fs-sm); letter-spacing:.08em; color:var(--ink-muted);
  display:flex; align-items:center; gap:12px;
}
.area__panel dd{
  font-family:var(--font-serif); font-weight:600;
  font-size:clamp(17px, 1.6vw, 20px); letter-spacing:.04em; line-height:1.6;
}
.dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.dot--fill{ background:var(--gold); }
.dot--ring{ border:1px solid var(--gold); }

/* --- S6 flow ------------------------------------------------------------- */
.flow{
  position:relative;
  margin-top:var(--sp-7);
  padding-left:28px;
  max-width:840px;
}
@media (min-width: 900px){ .flow{ margin-top:var(--sp-8); padding-left:36px; } }
.flow::before{
  content:""; position:absolute; left:0; top:10px; bottom:14px;
  width:1px; background:var(--gold-line);
}
.flow__item{ position:relative; padding-bottom:var(--sp-7); }
.flow__item:last-child{ padding-bottom:0; }
.flow__item::before{
  content:""; position:absolute; left:-32px; top:9px;
  width:9px; height:9px; border-radius:50%; background:var(--gold);
}
@media (min-width: 900px){ .flow__item::before{ left:-40px; } }
.flow__step{
  font-family:var(--font-en); font-weight:500; font-size:13px;
  letter-spacing:.12em; line-height:1.4; color:var(--gold-deep);
}
.flow__title{
  margin-top:8px;
  font-family:var(--font-serif); font-weight:600;
  font-size:clamp(19px, 1.9vw, 23px); line-height:1.6; letter-spacing:.04em;
}
.flow__text{ margin-top:10px; line-height:1.9; color:var(--ink-soft); }

/* --- S7 company ---------------------------------------------------------- */
.company{ display:grid; gap:32px; }
@media (min-width: 900px){
  .company{ grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:64px; align-items:start; }
}
.company__dl > div{
  padding-block:18px;
  border-bottom:1px solid var(--line);
}
.company__dl > div:first-child{ border-top:1px solid var(--line); }
.company__dl dt{
  font-weight:500; font-size:var(--fs-sm); letter-spacing:.1em;
  color:var(--ink-muted); line-height:1.8;
}
.company__dl dd{ margin-top:2px; line-height:1.9; }
@media (min-width: 600px){
  .company__dl > div{
    display:grid; grid-template-columns:140px minmax(0,1fr);
    gap:0 24px; padding-block:22px; align-items:baseline;
  }
  .company__dl dd{ margin-top:0; }
}
.company__more{ margin-top:24px; display:flex; justify-content:flex-end; }

/* --- S8 corporate CTA ---------------------------------------------------- */
.cta-box{
  position:relative;
  max-width:760px; margin-inline:auto;
  background:var(--paper);
  border:1px solid var(--gold);
  padding:56px 24px 44px;
  text-align:center;
}
@media (min-width: 600px){ .cta-box{ padding:64px 56px 52px; } }
.cta-box__mark{
  position:absolute; top:0; left:50%;
  transform:translate(-50%, -50%);
  background:var(--paper);
  padding-inline:18px;
}
.cta-box__mark img{ width:72px; height:auto; }
.cta-box__title{
  font-family:var(--font-serif); font-weight:600;
  font-size:clamp(21px, 2.4vw, 30px); line-height:1.6; letter-spacing:.04em;
}
.cta-box__text{ margin-top:20px; line-height:1.9; color:var(--ink-soft); text-align:left; }
@media (min-width: 600px){ .cta-box__text{ text-align:center; } }
.cta-box__contact{
  margin-top:36px; padding-top:32px;
  border-top:1px solid var(--line);
  display:grid; gap:6px; justify-items:center;
}
.cta-box__tel{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-en); font-weight:600;
  font-size:30px; line-height:1.2; letter-spacing:.02em;
  min-height:48px;
}
@media (min-width: 600px){ .cta-box__tel{ font-size:34px; } }
.cta-box__tel .ico{ width:22px; height:22px; color:var(--gold-deep); flex:none; }
.cta-box__mail{
  font-family:var(--font-en); font-size:15px; letter-spacing:.02em; color:var(--ink-soft);
  min-height:44px; display:inline-flex; align-items:center;
}
.cta-box__mail:hover{ color:var(--ink); border-bottom:1px solid var(--ink); }
.cta-box .btn{ margin-top:28px; }

/* --- S9 recruit (dark, full bleed) --------------------------------------- */
.recruit{
  background:var(--ink-deep);
  color:#fff;
  border-top:1px solid var(--gold);
  border-bottom:1px solid var(--gold);
  padding-block:var(--sp-8);
}
@media (min-width: 900px){ .recruit{ padding-block:var(--sp-10); } }
.recruit__inner{ display:grid; gap:36px; }
@media (min-width: 900px){
  .recruit__inner{
    grid-template-columns:minmax(0,1fr) minmax(0,42%);
    gap:64px; align-items:center;
  }
  .recruit__visual{ order:2; }
}
.recruit .sec-label{ color:var(--gold-light); }
.recruit .sec-label::after{ background:var(--gold-light); }
.recruit__catch{
  margin-top:20px;
  font-weight:800; font-size:clamp(18px, 1.9vw, 22px);
  letter-spacing:.04em; line-height:1.6; color:var(--gold-light);
}
.recruit__title{
  margin-top:6px;
  font-family:var(--font-sans); font-weight:800;
  font-size:clamp(30px, 3.4vw, 44px); line-height:1.4; letter-spacing:.04em;
}
.recruit__checks{ margin-top:26px; }
.recruit__checks li{
  display:flex; align-items:flex-start; gap:14px;
  padding-block:7px;
  color:var(--ink-dim); line-height:1.8;
}
.recruit__checks .box{
  flex:none; width:20px; height:20px;
  border:1px solid var(--gold-light);
  display:grid; place-items:center;
  margin-top:.3em;
}
.recruit__checks .box svg{ width:11px; height:9px; color:var(--gold-light); }
.recruit__conds{ margin-top:26px; display:flex; flex-wrap:wrap; gap:8px; }
.recruit__conds li{
  border:1px solid var(--line-dark);
  padding:9px 14px;
  font-size:13px; line-height:1.4; letter-spacing:.06em;
  color:var(--gold-light);
}
.recruit .btn{ margin-top:32px; }
.recruit__visual img{ width:100%; height:auto; }

/* ==========================================================================
   11. 下層ページ 共通パーツ（Sprint 4–7 追記／1–849行は変更していない）
   ========================================================================== */

/* --- breadcrumb ---------------------------------------------------------- */
.breadcrumb{ padding-top:8px; }
.breadcrumb ol{
  display:flex; flex-wrap:wrap; align-items:center; gap:0 10px;
  font-size:var(--fs-xs); letter-spacing:.04em; color:var(--ink-muted);
}
.breadcrumb li{ display:flex; align-items:center; gap:10px; }
.breadcrumb li + li::before{
  content:""; flex:none; width:12px; height:1px; background:var(--gold-line);
}
.breadcrumb a{ display:inline-flex; align-items:center; min-height:44px; }
.breadcrumb a:hover{ color:var(--ink); }
.breadcrumb [aria-current]{ display:inline-flex; align-items:center; min-height:44px; color:var(--ink-soft); }

/* --- page head（下層の見出し。ヒーロー画像は使わない） -------------------- */
.page-head{ padding-top:24px; }
@media (min-width: 900px){ .page-head{ padding-top:48px; } }
.page-head__inner{ position:relative; padding-left:24px; max-width:820px; }
.page-head__inner::before{
  content:""; position:absolute; left:0; top:4px; bottom:4px;
  width:1px; background:var(--gold);
}
.page-title{
  margin-top:20px;
  font-family:var(--font-serif); font-weight:600;
  font-size:var(--fs-2xl); line-height:1.5; letter-spacing:.04em;
}
.page-lead{ margin-top:24px; font-size:var(--fs-md); line-height:1.9; color:var(--ink-soft); }

/* --- 汎用の本文ブロック --------------------------------------------------- */
.prose{ max-width:44em; }
.prose p{ line-height:1.9; color:var(--ink-soft); }
.prose p + p{ margin-top:20px; }

/* --- /service/ サービス詳細（罫線・番号・余白で構成する） ----------------- */
.svc-detail{ border-top:1px solid var(--gold-line); padding-top:30px; }
.svc-detail + .svc-detail{ margin-top:var(--sp-8); }
@media (min-width: 900px){
  .svc-detail{
    display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr);
    gap:48px; padding-top:40px;
  }
  .svc-detail + .svc-detail{ margin-top:var(--sp-9); }
}
.svc-detail__num{
  font-family:var(--font-en); font-weight:500; font-size:40px;
  line-height:1; letter-spacing:.02em; color:var(--gold-deep);
}
.svc-detail__title{
  margin-top:14px;
  font-family:var(--font-serif); font-weight:600;
  font-size:clamp(20px, 2.0vw, 24px); line-height:1.6; letter-spacing:.04em;
}
.svc-detail__text{ margin-top:20px; line-height:1.9; color:var(--ink-soft); }
@media (min-width: 900px){ .svc-detail__text{ margin-top:0; } }

.case-list{ margin-top:26px; }
.case-list__label{
  font-size:var(--fs-sm); letter-spacing:.1em; color:var(--ink-muted);
}
.case-list ul{ margin-top:10px; }
.case-list li{ position:relative; padding-left:22px; padding-block:5px; line-height:1.9; }
.case-list li::before{
  content:""; position:absolute; left:0; top:calc(.95em + 5px);
  width:12px; height:1px; background:var(--gold);
}
.svc-foot{
  margin-top:var(--sp-7); padding-top:26px;
  border-top:1px solid var(--line);
  font-size:var(--fs-sm); color:var(--ink-muted); line-height:1.9;
}

/* --- 補足の定義リスト（保険・許認可などの受け皿） ------------------------- */
.note-dl > div{ padding-block:18px; border-bottom:1px solid var(--line); }
.note-dl > div:first-child{ border-top:1px solid var(--line); }
.note-dl dt{ font-weight:500; font-size:var(--fs-sm); letter-spacing:.1em; color:var(--ink-muted); }
.note-dl dd{ margin-top:2px; line-height:1.9; }
@media (min-width: 600px){
  .note-dl > div{
    display:grid; grid-template-columns:180px minmax(0,1fr);
    gap:0 24px; padding-block:22px; align-items:baseline;
  }
  .note-dl dd{ margin-top:0; }
}

/* --- /about/ 代表メッセージ・アクセス ------------------------------------ */
.message{ max-width:720px; }
.message__title{
  font-family:var(--font-serif); font-weight:600;
  font-size:clamp(20px, 2.2vw, 26px); line-height:1.7; letter-spacing:.04em;
}
.message__body{ margin-top:26px; }
.message__sign{ margin-top:28px; font-size:var(--fs-sm); color:var(--ink-muted); letter-spacing:.06em; }

.access__map{ margin-top:32px; border:1px solid var(--gold); }
.access__map iframe{
  display:block; width:100%; height:260px; border:0;
  filter:grayscale(.25);
}
@media (min-width: 900px){ .access__map iframe{ height:400px; } }
.access__cap{ margin-top:14px; font-size:var(--fs-sm); color:var(--ink-muted); }

/* --- 黒地ページ（/recruit/ 系のみ） -------------------------------------- */
body.page-dark{ background:var(--ink-deep); }
.main-dark{
  background:var(--ink-deep); color:#fff;
  border-top:1px solid var(--gold);
  border-bottom:1px solid var(--gold);
}
.main-dark :focus-visible{ outline-color:var(--gold-light); }
.main-dark .sec-label{ color:var(--gold-light); }
.main-dark .sec-label::after{ background:var(--gold-light); }
.main-dark .sec-title,
.main-dark .page-title{ font-family:var(--font-sans); font-weight:800; letter-spacing:.04em; }
.main-dark .sec-lead,
.main-dark .page-lead,
.main-dark .prose p{ color:var(--ink-dim); }
.main-dark .breadcrumb ol{ color:var(--ink-dim); }
.main-dark .breadcrumb a:hover{ color:#fff; }
.main-dark .breadcrumb [aria-current]{ color:#fff; }
.main-dark .breadcrumb li + li::before{ background:var(--gold-light); }
.main-dark .page-head__inner::before{ background:var(--gold-light); }

/* --- 金ベタのボタン（採用面のみ許可） ------------------------------------ */
.btn--gold-fill{
  background:var(--gold-light); color:var(--ink-deep);
  border-color:var(--gold-light); font-weight:700;
}
.btn--gold-fill:hover{ background:var(--gold); }
.btn--gold-fill .ico-arrow{ color:var(--ink-deep); }

/* --- /recruit/ ヒーロー -------------------------------------------------- */
.rec-hero{ padding-block:var(--sp-8); }
@media (min-width: 900px){ .rec-hero{ padding-block:var(--sp-9); } }
.rec-hero__inner{ display:grid; gap:32px; }
@media (min-width: 900px){
  .rec-hero__inner{
    grid-template-columns:minmax(0,1fr) minmax(0,44%);
    gap:64px; align-items:center;
  }
  .rec-hero__visual{ order:2; }
}
.rec-hero__visual img{ width:100%; height:auto; }
.rec-hero__catch{
  margin-top:20px;
  font-weight:800; font-size:clamp(18px, 1.9vw, 22px);
  line-height:1.6; letter-spacing:.04em; color:var(--gold-light);
}
.rec-hero__title{
  margin-top:6px;
  font-family:var(--font-sans); font-weight:800;
  font-size:clamp(32px, 4.2vw, 52px); line-height:1.35; letter-spacing:.04em;
}
.rec-hero__actions{ margin-top:34px; display:grid; gap:12px; }
@media (min-width: 600px){
  .rec-hero__actions{ grid-auto-flow:column; justify-content:start; gap:16px; }
}

/* --- /recruit/ 条件4点 --------------------------------------------------- */
.rec-conds{
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
}
.rec-conds li{ text-align:center; padding:24px 6px; }
.rec-conds li:nth-child(-n+2){ border-bottom:1px solid var(--line-dark); }
.rec-conds .ico{ width:30px; height:30px; color:var(--gold-light); margin:0 auto; }
.rec-conds span{
  display:block; margin-top:14px;
  font-weight:700; font-size:15px; line-height:1.6; letter-spacing:.04em;
}
@media (min-width: 900px){
  .rec-conds{ grid-template-columns:repeat(4, 1fr); }
  .rec-conds li{ position:relative; padding:10px 24px; border-bottom:0; }
  .rec-conds li + li::before{
    content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
    width:1px; height:72px; background:var(--gold-line);
  }
}

/* --- /recruit/ 働く3つのこと --------------------------------------------- */
.rec-points{ margin-top:var(--sp-7); }
@media (min-width: 900px){ .rec-points{ margin-top:var(--sp-8); } }
.rec-point + .rec-point{
  margin-top:var(--sp-7); padding-top:var(--sp-7);
  border-top:1px solid var(--line-dark);
}
@media (min-width: 900px){
  .rec-point{ display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:48px; }
}
.rec-point__num{
  font-family:var(--font-en); font-weight:600; font-size:34px;
  line-height:1; letter-spacing:.02em; color:var(--gold-light);
}
.rec-point__title{
  margin-top:12px;
  font-weight:800; font-size:clamp(19px, 2.0vw, 22px);
  line-height:1.6; letter-spacing:.04em;
}
.rec-point__text{ margin-top:14px; line-height:1.9; color:var(--ink-dim); }
@media (min-width: 900px){ .rec-point__text{ margin-top:0; } }

/* --- /recruit/ 募集要項 -------------------------------------------------- */
.req-dl{ margin-top:var(--sp-7); }
.req-dl > div{ padding-block:18px; border-bottom:1px solid var(--line-dark); }
.req-dl > div:first-child{ border-top:1px solid var(--line-dark); }
.req-dl dt{ font-weight:500; font-size:var(--fs-sm); letter-spacing:.1em; color:var(--gold-light); }
.req-dl dd{ margin-top:2px; line-height:1.9; }
@media (min-width: 600px){
  .req-dl > div{
    display:grid; grid-template-columns:160px minmax(0,1fr);
    gap:0 24px; padding-block:22px; align-items:baseline;
  }
  .req-dl dd{ margin-top:0; }
}
.req-note{ margin-top:24px; font-size:var(--fs-sm); line-height:1.9; color:var(--ink-dim); }

/* --- /recruit/ 中間CTA --------------------------------------------------- */
.rec-strip{
  margin-top:var(--sp-7);
  border:1px solid var(--line-dark);
  padding:24px; display:grid; gap:16px; align-items:center;
}
@media (min-width: 600px){
  .rec-strip{ grid-template-columns:minmax(0,1fr) auto; gap:24px; padding:26px 32px; }
}
.rec-strip p{ font-weight:700; line-height:1.7; letter-spacing:.02em; }

/* --- /recruit/ FAQ（details/summary。JSなしでキーボード操作できる） ------ */
.faq{ margin-top:var(--sp-7); border-top:1px solid var(--line-dark); }
.faq__item{ border-bottom:1px solid var(--line-dark); }
.faq__q{
  display:flex; align-items:flex-start; gap:14px;
  min-height:64px; padding-block:18px;
  font-weight:700; line-height:1.7; letter-spacing:.02em;
  cursor:pointer; list-style:none;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::before{
  content:"Q"; flex:none;
  font-family:var(--font-en); font-weight:600; color:var(--gold-light);
}
.faq__mark{ position:relative; flex:none; width:16px; height:16px; margin-left:auto; margin-top:.35em; }
.faq__mark::before,
.faq__mark::after{ content:""; position:absolute; background:var(--gold-light); }
.faq__mark::before{ left:0; top:7px; width:16px; height:1px; }
.faq__mark::after{
  left:7px; top:0; width:1px; height:16px;
  transition:transform var(--dur) var(--ease);
}
.faq__item[open] .faq__mark::after{ transform:scaleY(0); }
.faq__a{
  display:flex; gap:14px; padding-bottom:22px;
  line-height:1.9; color:var(--ink-dim);
}
.faq__a::before{
  content:"A"; flex:none;
  font-family:var(--font-en); font-weight:600; color:var(--gold-light);
}

/* --- /recruit/ 応募CTA --------------------------------------------------- */
.rec-cta{
  max-width:760px; margin-inline:auto;
  border:1px solid var(--gold-light);
  padding:44px 24px; text-align:center;
}
@media (min-width: 600px){ .rec-cta{ padding:56px; } }
.rec-cta__title{
  font-weight:800; font-size:clamp(21px, 2.4vw, 30px);
  line-height:1.6; letter-spacing:.04em;
}
.rec-cta__text{ margin-top:20px; line-height:1.9; color:var(--ink-dim); text-align:left; }
@media (min-width: 600px){ .rec-cta__text{ text-align:center; } }
.rec-cta .btn{ margin-top:32px; }
.rec-cta__tel{
  margin-top:30px; padding-top:26px;
  border-top:1px solid var(--line-dark);
  display:grid; justify-items:center; gap:2px;
}
.rec-cta__tel a{
  display:inline-flex; align-items:center; gap:12px; min-height:48px;
  font-family:var(--font-en); font-weight:600; font-size:30px;
  line-height:1.2; letter-spacing:.02em; color:var(--gold-light);
}
@media (min-width: 600px){ .rec-cta__tel a{ font-size:34px; } }
.rec-cta__tel .ico{ width:22px; height:22px; flex:none; }
.rec-cta__tel .cap{ font-size:var(--fs-xs); letter-spacing:.08em; color:var(--ink-dim); }

/* --- /contact/ 入口の分岐 ------------------------------------------------ */
.branch{ margin-top:var(--sp-7); display:grid; gap:16px; }
@media (min-width: 900px){ .branch{ grid-template-columns:1fr 1fr; gap:24px; } }
.branch__box{
  display:block; border:1px solid var(--gold); padding:28px 24px;
  transition:background-color var(--dur) var(--ease);
}
@media (min-width: 600px){ .branch__box{ padding:32px; } }
.branch__box:hover{ background:var(--gold-tint); }
.branch__label{
  font-family:var(--font-en); font-weight:500; font-size:var(--fs-xs);
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep);
}
.branch__title{
  margin-top:12px;
  font-family:var(--font-serif); font-weight:600;
  font-size:clamp(19px, 1.9vw, 23px); line-height:1.6; letter-spacing:.04em;
}
.branch__text{ margin-top:10px; font-size:14px; line-height:1.8; color:var(--ink-muted); }
.branch__go{
  margin-top:18px; display:inline-flex; align-items:center; gap:10px;
  font-weight:500; font-size:15px; letter-spacing:.04em;
}
.branch__go .ico-arrow{ color:var(--gold-deep); }

/* --- 電話ブロック -------------------------------------------------------- */
.tel-block{
  margin-top:var(--sp-7);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding-block:32px;
  display:grid; justify-items:center; gap:4px; text-align:center;
}
.tel-block__label{ font-size:var(--fs-sm); letter-spacing:.08em; color:var(--ink-muted); }
.tel-block a{
  display:inline-flex; align-items:center; gap:12px; min-height:48px;
  font-family:var(--font-en); font-weight:600; font-size:30px;
  line-height:1.2; letter-spacing:.02em;
}
@media (min-width: 600px){ .tel-block a{ font-size:34px; } }
.tel-block .ico{ width:22px; height:22px; color:var(--gold-deep); flex:none; }
.main-dark .tel-block{ border-color:var(--line-dark); }
.main-dark .tel-block__label{ color:var(--ink-dim); }
.main-dark .tel-block a{ color:var(--gold-light); }
.main-dark .tel-block .ico{ color:var(--gold-light); }

/* ==========================================================================
   12. フォーム（Netlify Forms）
   ========================================================================== */
.form{ margin-top:var(--sp-7); max-width:720px; }
.form__note{ font-size:14px; line-height:1.9; color:var(--ink-muted); }
.hp{ display:none; }

.field{ margin-top:28px; }
.field__head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.field__label{ font-weight:500; font-size:15px; line-height:1.6; letter-spacing:.04em; }
.badge{
  font-size:11px; line-height:1; letter-spacing:.1em;
  padding:5px 8px; border:1px solid var(--line); color:var(--ink-muted);
}
.badge--req{ border-color:var(--gold); color:var(--gold-deep); }
.field__hint{ margin-top:6px; font-size:13px; line-height:1.7; color:var(--ink-muted); }

.input,
.textarea,
.select{
  display:block; width:100%; margin-top:10px;
  min-height:52px; padding:14px 16px;
  font-family:inherit; font-size:16px; line-height:1.6;
  color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius);
  appearance:none; -webkit-appearance:none;
  transition:border-color var(--dur) var(--ease);
}
.textarea{ min-height:132px; resize:vertical; }
.textarea--sm{ min-height:104px; }
.select{
  padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23946618' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:12px 8px;
}
.input:focus,
.textarea:focus,
.select:focus{
  border-color:var(--gold);
  outline:2px solid var(--gold-tint); outline-offset:0;
}
.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible{ outline-color:var(--gold-deep); }
.input::placeholder,
.textarea::placeholder{ color:#8A9099; }

.choices{ margin-top:10px; display:grid; gap:8px; }
@media (min-width: 600px){
  .choices--row{ grid-auto-flow:column; grid-auto-columns:max-content; gap:12px; }
}
.choice{
  display:flex; align-items:center; gap:12px;
  min-height:52px; padding:8px 18px;
  border:1px solid var(--line); cursor:pointer; line-height:1.6;
  transition:border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.choice input{
  appearance:none; -webkit-appearance:none;
  width:20px; height:20px; margin:0; flex:none;
  border:1px solid var(--ink-muted); border-radius:50%;
  display:grid; place-items:center;
}
.choice input::after{
  content:""; width:10px; height:10px; border-radius:50%;
  background:var(--gold-deep); transform:scale(0);
  transition:transform var(--dur) var(--ease);
}
.choice input:checked{ border-color:var(--gold-deep); }
.choice input:checked::after{ transform:scale(1); }
.choice:has(input:checked){ border-color:var(--gold); background:var(--gold-tint); }
.choice span{ font-size:15px; }

.consent{ margin-top:34px; padding-top:26px; border-top:1px solid var(--line); }
.consent__label{
  display:flex; align-items:flex-start; gap:14px;
  min-height:44px; padding-block:8px; cursor:pointer; line-height:1.9;
}
.consent input{
  appearance:none; -webkit-appearance:none;
  width:20px; height:20px; margin:0; margin-top:.4em; flex:none;
  border:1px solid var(--ink-muted);
  display:grid; place-items:center;
}
.consent input::after{
  content:""; width:11px; height:6px; margin-top:-3px;
  border-left:1.5px solid var(--gold-deep); border-bottom:1.5px solid var(--gold-deep);
  transform:rotate(-45deg) scale(0);
  transition:transform var(--dur) var(--ease);
}
.consent input:checked{ border-color:var(--gold); }
.consent input:checked::after{ transform:rotate(-45deg) scale(1); }

.field__error{
  margin-top:10px; padding-left:14px;
  border-left:2px solid var(--gold);
  font-weight:700; font-size:14px; line-height:1.7; color:var(--ink);
}
.field__error:empty{ display:none; }
.field.is-error .input,
.field.is-error .textarea,
.field.is-error .select,
.field.is-error .choice{ border-color:var(--gold-deep); }

.form__submit{ margin-top:36px; }
.form__submit .btn{ width:100%; }
@media (min-width: 600px){ .form__submit .btn{ width:auto; min-width:300px; } }
.btn[disabled]{ opacity:.62; cursor:default; }
.form__privacy{ margin-top:20px; font-size:14px; line-height:1.9; color:var(--ink-muted); }

/* --- 黒地のフォーム ------------------------------------------------------ */
.main-dark .form__note,
.main-dark .field__hint,
.main-dark .form__privacy{ color:var(--ink-dim); }
.main-dark .input,
.main-dark .textarea,
.main-dark .select{
  background-color:rgba(255,255,255,.04);
  border-color:var(--line-dark); color:#fff;
}
.main-dark .select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23E6B858' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
}
.main-dark .input::placeholder,
.main-dark .textarea::placeholder{ color:rgba(255,255,255,.46); }
.main-dark .input:focus,
.main-dark .textarea:focus,
.main-dark .select:focus{ border-color:var(--gold-light); outline-color:rgba(230,184,88,.22); }
.main-dark .input:focus-visible,
.main-dark .textarea:focus-visible,
.main-dark .select:focus-visible{ outline-color:var(--gold-light); }
.main-dark .badge{ border-color:var(--line-dark); color:var(--ink-dim); }
.main-dark .badge--req{ border-color:var(--gold-light); color:var(--gold-light); }
.main-dark .choice{ border-color:var(--line-dark); }
.main-dark .choice input{ border-color:rgba(255,255,255,.5); }
.main-dark .choice input::after{ background:var(--gold-light); }
.main-dark .choice input:checked{ border-color:var(--gold-light); }
.main-dark .choice:has(input:checked){ border-color:var(--gold-light); background:rgba(230,184,88,.1); }
.main-dark .consent{ border-top-color:var(--line-dark); }
.main-dark .consent input{ border-color:rgba(255,255,255,.5); }
.main-dark .consent input::after{ border-left-color:var(--gold-light); border-bottom-color:var(--gold-light); }
.main-dark .consent input:checked{ border-color:var(--gold-light); }
.main-dark .field__error{ color:#fff; border-left-color:var(--gold-light); }
.main-dark .field.is-error .input,
.main-dark .field.is-error .textarea,
.main-dark .field.is-error .select,
.main-dark .field.is-error .choice{ border-color:var(--gold-light); }
.main-dark .txt-link{ border-bottom-color:var(--gold-light); }
.main-dark .txt-link:hover{ border-bottom-color:#fff; }

/* ==========================================================================
   13. サンクス / privacy / 404
   ========================================================================== */
.thanks{ max-width:660px; }
.thanks__mark{
  width:56px; height:56px; border:1px solid var(--gold);
  display:grid; place-items:center;
}
.thanks__mark .ico{ width:24px; height:18px; color:var(--gold-deep); }
.thanks__title{
  margin-top:28px;
  font-family:var(--font-serif); font-weight:600;
  font-size:var(--fs-xl); line-height:1.6; letter-spacing:.04em;
}
.thanks__text{ margin-top:22px; line-height:1.9; color:var(--ink-soft); }
.thanks__text + .thanks__text{ margin-top:16px; }
.thanks__actions{ margin-top:40px; display:grid; gap:16px; justify-items:start; }
.main-dark .thanks__mark{ border-color:var(--gold-light); }
.main-dark .thanks__mark .ico{ color:var(--gold-light); }
.main-dark .thanks__title{ font-family:var(--font-sans); font-weight:800; }
.main-dark .thanks__text{ color:var(--ink-dim); }

.legal{ max-width:720px; }
.legal h2{
  margin-top:var(--sp-7); padding-left:16px;
  border-left:2px solid var(--gold);
  font-family:var(--font-serif); font-weight:600;
  font-size:clamp(18px, 1.8vw, 21px); line-height:1.6; letter-spacing:.04em;
}
.legal h2:first-of-type{ margin-top:var(--sp-6); }
.legal p{ margin-top:16px; font-size:15px; line-height:2; color:var(--ink-soft); }
.legal ul{ margin-top:14px; }
.legal li{
  position:relative; padding-left:22px; padding-block:4px;
  font-size:15px; line-height:2; color:var(--ink-soft);
}
.legal li::before{
  content:""; position:absolute; left:0; top:calc(1em + 4px);
  width:12px; height:1px; background:var(--gold);
}
.legal__meta{
  margin-top:var(--sp-7); padding-top:26px;
  border-top:1px solid var(--line);
  font-size:14px; line-height:2; color:var(--ink-muted);
}
.legal__meta dl{ display:grid; grid-template-columns:auto 1fr; gap:0 20px; }
.legal__meta dt{ color:var(--ink-soft); }
.legal__date{ margin-top:26px; font-size:var(--fs-sm); color:var(--ink-muted); }

.nf{ max-width:640px; margin-inline:auto; text-align:center; padding-block:var(--sp-8); }
@media (min-width: 900px){ .nf{ padding-block:var(--sp-9); } }
.nf__num{
  font-family:var(--font-en); font-weight:500;
  font-size:clamp(56px, 10vw, 96px); line-height:1;
  letter-spacing:.06em; color:var(--gold-deep);
}
.nf__title{
  margin-top:24px;
  font-family:var(--font-serif); font-weight:600;
  font-size:var(--fs-xl); line-height:1.6; letter-spacing:.04em;
}
.nf__text{ margin-top:20px; line-height:1.9; color:var(--ink-soft); }
.nf__links{ margin-top:36px; display:grid; gap:10px; justify-items:center; }

/* ==========================================================================
   14. 固定CTAバー（採用面バリエーション）／ナビの現在地
   ========================================================================== */
.cta-bar--recruit{ grid-template-columns:1fr; border-top-color:var(--gold-light); }
.cta-bar__entry{ background:var(--gold-light); color:var(--ink-deep); font-weight:700; }
.cta-bar__entry .ico-arrow{ color:var(--ink-deep); }
.gnav a[aria-current]::after{ right:0; }
.drawer__nav a[aria-current]{ color:var(--gold-deep); }
.footer__nav a[aria-current]{ color:var(--gold-deep); }

/* --- 余白ユーティリティ（下層ページ用） ---------------------------------- */
.u-mt-6{ margin-top:var(--sp-6); }
.u-mt-7{ margin-top:var(--sp-7); }
.u-mt-8{ margin-top:var(--sp-8); }
.consent__label .badge{ margin-left:10px; vertical-align:middle; }

/* ==========================================================================
   15. 監査指摘の反映（レン）
   ========================================================================== */
/* ヒーロー副CTA「サービスを見る」は既定で下線を出す。
   hover でしか下線が出ないとスマホでは永久にリンクだと分からない。 */
.hero__actions .link-arrow > span{ border-bottom-color:var(--ink); }

/* 会社概要・プライバシーの定義リスト内のリンクは「文中のリンク」ではなく
   単独の値なので、タップ領域 44px を確保する。 */
.company__dl dd a,
.legal__meta dd a{
  display:inline-flex; align-items:center; min-height:44px;
}
.rec-hero__visual picture{ display:block; }

/* fieldset のブラウザ既定枠は「意図しない囲み枠」に見えるため落とす。
   グルーピングの意味（legend との関連付け）は保つ。 */
.form fieldset{ margin:0; padding:0; border:0; min-width:0; }
.form legend{ padding:0; }

/* 黒地の矢印リンク：--gold-deep は黒地で沈むため --gold-light に差し替える */
.main-dark .link-arrow .ico-arrow{ color:var(--gold-light); }
.main-dark .link-arrow:hover > span{ border-color:#fff; }

/* ==========================================================================
   16. /recruit/example/ 実際の稼働例（2026-09-15 追記／既存の定義は変更していない）
   ========================================================================== */

/* --- /recruit/ から稼働例への入口 ---------------------------------------- */
.section--link{ padding-top:0; }
.rec-example{
  border:1px solid var(--gold-light);
  padding:32px 24px;
  display:grid; gap:24px;
}
@media (min-width: 600px){ .rec-example{ padding:40px; } }
@media (min-width: 900px){
  .rec-example{ grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:56px; align-items:center; padding:48px 56px; }
}
.rec-example__title{
  margin-top:18px;
  font-weight:800; font-size:clamp(24px, 2.8vw, 34px);
  line-height:1.4; letter-spacing:.04em;
}
.rec-example__pay{
  margin-top:10px;
  font-weight:700; font-size:clamp(17px, 1.8vw, 20px);
  line-height:1.6; letter-spacing:.04em; color:var(--gold-light);
}
.rec-example__text{ margin-top:12px; line-height:1.9; color:var(--ink-dim); }
.rec-example__links{ border-top:1px solid var(--line-dark); }
.rec-example__links a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:60px; padding-block:10px;
  border-bottom:1px solid var(--line-dark);
  font-weight:700; line-height:1.5; letter-spacing:.04em;
}
.rec-example__links a:hover{ color:var(--gold-light); }
.rec-example__links .ico-arrow{ color:var(--gold-light); flex:none; transition:transform var(--dur) var(--ease); }
.rec-example__links a:hover .ico-arrow{ transform:translateX(4px); }
.rec-example__links .rec-example__all{ color:var(--gold-light); }

/* --- ページ見出し・目次 -------------------------------------------------- */
.ex-catch{
  margin-top:20px;
  font-weight:800; font-size:clamp(16px, 1.7vw, 19px);
  line-height:1.6; letter-spacing:.06em; color:var(--gold-light);
}
.ex-title{ margin-top:6px; }

.ex-toc{ margin-top:var(--sp-7); }
.ex-toc ol{
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line-dark);
}
.ex-toc a{
  display:flex; align-items:center; gap:10px;
  min-height:60px; padding:10px 14px;
  border-bottom:1px solid var(--line-dark);
  font-weight:700; font-size:15px; line-height:1.5; letter-spacing:.02em;
}
.ex-toc li:nth-child(2n) a{ border-left:1px solid var(--line-dark); }
.ex-toc a:hover{ color:var(--gold-light); }
.ex-toc .num{
  flex:none;
  font-family:var(--font-en); font-weight:600; font-size:12px;
  letter-spacing:.08em; color:var(--gold-light);
}
.ex-toc .ico{ flex:none; width:12px; height:8px; margin-left:auto; color:var(--gold-light); stroke-width:1.5; }
@media (min-width: 900px){
  .ex-toc ol{ grid-template-columns:repeat(3, 1fr); }
  .ex-toc li:nth-child(2n) a{ border-left:0; }
  .ex-toc li:not(:nth-child(3n+1)) a{ border-left:1px solid var(--line-dark); }
  .ex-toc a{ padding-inline:20px; }
}

/* 連続するセクションは上余白を持たず、罫線で区切る */
.ex-sec{ padding-top:0; }
.ex-sec > .container::before{
  content:""; display:block; height:1px;
  background:var(--line-dark);
  margin-bottom:var(--sp-8);
}
@media (min-width: 900px){ .ex-sec > .container::before{ margin-bottom:var(--sp-9); } }

/* --- 本文 ---------------------------------------------------------------- */
.ex-body{ margin-top:28px; max-width:44em; }
.ex-body p{ line-height:1.9; color:var(--ink-dim); }
.ex-body > * + *{ margin-top:16px; }
.ex-body strong{ color:#fff; font-weight:700; }
.ex-note{ margin-top:20px; font-size:var(--fs-sm); line-height:1.8; color:var(--ink-dim); }
.ex-note + .ex-note{ margin-top:4px; }
.ex-body p.ex-note{ margin-top:20px; font-size:var(--fs-sm); line-height:1.8; }

/* --- 日当 ---------------------------------------------------------------- */
.ex-pay{
  margin-top:var(--sp-6);
  border-top:1px solid var(--gold-light);
  border-bottom:1px solid var(--line-dark);
  padding-block:24px;
}
.ex-pay__num{
  /* スマホで末尾の「円」だけが次の行に落ちないよう、画面幅に比例させて1行に収める */
  display:flex; flex-wrap:nowrap; white-space:nowrap; align-items:baseline; gap:0 .12em;
  font-family:var(--font-en); font-weight:600;
  font-size:clamp(28px, 9vw, 76px); line-height:1.15; letter-spacing:.01em;
  font-variant-numeric:tabular-nums; color:#fff;
}
.ex-pay__num .u{ font-family:var(--font-sans); font-weight:700; font-size:.4em; }
.ex-pay__num .sep{ font-family:var(--font-sans); font-size:.5em; color:var(--gold-light); padding-inline:.1em; }

/* 矢印でつなぐ3段（役職／日当） */
.ex-steps{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  column-gap:28px; max-width:600px;
}
.ex-body .ex-steps{ margin-block:18px; }
.ex-steps li{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:52px; padding:8px 4px;
  border:1px solid var(--line-dark);
  text-align:center; color:#fff;
}
.ex-steps li:last-child{ border-color:var(--gold-light); color:var(--gold-light); }
.ex-steps li + li::before{
  content:""; position:absolute; left:-21px; top:50%;
  width:14px; height:1px; background:var(--gold-light);
}
.ex-steps li + li::after{
  content:""; position:absolute; left:-12px; top:calc(50% - 3px);
  width:6px; height:6px;
  border-top:1px solid var(--gold-light); border-right:1px solid var(--gold-light);
  transform:rotate(45deg);
}
.ex-steps--role li{ font-weight:700; font-size:clamp(14px, 1.6vw, 16px); line-height:1.4; letter-spacing:.02em; }
.ex-steps--num li{
  font-family:var(--font-en); font-weight:600;
  font-size:clamp(17px, 2.2vw, 24px); line-height:1.3;
  font-variant-numeric:tabular-nums;
}

/* --- 1日の流れ ----------------------------------------------------------- */
.day{ margin-top:var(--sp-7); max-width:820px; border-top:1px solid var(--line-dark); }
.day__item{ padding:22px 0; border-bottom:1px solid var(--line-dark); }
@media (min-width: 600px){
  .day__item{ display:grid; grid-template-columns:170px minmax(0,1fr); gap:0 24px; align-items:baseline; padding-block:26px; }
}
.day__time{
  font-family:var(--font-en); font-weight:600;
  font-size:18px; line-height:1.6; letter-spacing:.02em;
  font-variant-numeric:tabular-nums; color:var(--gold-light);
}
.day__title{
  margin-top:2px;
  font-weight:800; font-size:clamp(18px, 1.9vw, 21px);
  line-height:1.6; letter-spacing:.04em;
}
@media (min-width: 600px){ .day__title{ margin-top:0; } }
.day__text{ margin-top:6px; line-height:1.9; color:var(--ink-dim); }
.day__item.is-free{
  padding-inline:18px;
  background:rgba(230,184,88,.08);
  border-left:2px solid var(--gold-light);
}

/* --- 月の収入例 ---------------------------------------------------------- */
.ex-gas{ margin-top:24px; max-width:560px; border-top:1px solid var(--line-dark); }
.ex-gas > div{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:2px 16px; padding-block:14px;
  border-bottom:1px solid var(--line-dark);
}
.ex-gas dt{ font-weight:700; letter-spacing:.04em; }
.ex-gas dd{ margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums; color:var(--gold-light); }

.ex-cases{ margin-top:var(--sp-7); }
@media (min-width: 900px){ .ex-cases{ margin-top:var(--sp-8); } }
.ex-case{ border-top:1px solid var(--gold-light); padding-top:28px; }
.ex-case + .ex-case{ margin-top:var(--sp-8); }
@media (min-width: 900px){
  .ex-case{ display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:48px; padding-top:40px; }
  .ex-case + .ex-case{ margin-top:var(--sp-9); }
}
.ex-case__label{
  font-family:var(--font-en); font-weight:600; font-size:13px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-light);
}
.ex-case__name{
  margin-top:10px;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
  font-weight:800; font-size:clamp(24px, 2.6vw, 30px); line-height:1.4; letter-spacing:.04em;
}
.ex-case__days{
  padding:4px 12px;
  border:1px solid var(--gold-light);
  font-size:15px; font-weight:700; line-height:1.4; letter-spacing:.06em;
  color:var(--gold-light);
}
.ex-case__quote{ margin-top:16px; font-weight:700; line-height:1.8; }
.ex-case__meta{ margin-top:6px; font-size:var(--fs-sm); color:var(--ink-dim); }
.ex-case__comment{ margin-top:20px; line-height:1.9; color:var(--ink-dim); }

.ex-calc{ margin-top:24px; }
@media (min-width: 900px){ .ex-case .ex-calc{ margin-top:0; } }
.ex-calc > div{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:2px 16px; padding-block:14px;
  border-bottom:1px solid var(--line-dark);
}
.ex-calc dt{ font-weight:500; line-height:1.6; letter-spacing:.02em; }
.ex-calc dt small{ display:block; font-size:13px; font-weight:400; color:var(--ink-dim); letter-spacing:.02em; }
.ex-calc dd{
  margin-left:auto; text-align:right;
  font-family:var(--font-en); font-weight:600;
  font-size:clamp(20px, 2.2vw, 24px); line-height:1.4;
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
}
.ex-calc .is-minus dd{ font-size:clamp(17px, 1.8vw, 20px); color:var(--ink-dim); }
.ex-calc .is-total{ border-bottom:0; padding-top:18px; }
.ex-calc .is-total dt{ font-weight:800; color:var(--gold-light); }
.ex-calc .is-total dd{ font-size:clamp(28px, 3.4vw, 38px); color:var(--gold-light); }

.ex-up{
  margin-top:24px;
  padding:18px 18px 4px;
  background:rgba(230,184,88,.07);
  border-left:2px solid var(--gold-light);
}
@media (min-width: 600px){ .ex-up{ padding:22px 24px 6px; } }
.ex-up__lead{ font-weight:700; line-height:1.7; }
.ex-up .ex-calc{ margin-top:6px; }
/* 枠の内側は狭いので、合計額を一段小さくする */
.ex-up .ex-calc .is-total dd{ font-size:clamp(24px, 3vw, 34px); }
/* 金額の範囲は「〜」の位置でだけ折り返す */
.nw{ white-space:nowrap; }

/* --- 戸建て案件 ---------------------------------------------------------- */
.ex-body p.ex-formula{
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px 16px;
  padding:16px 22px;
  border:1px solid var(--gold-light);
  font-weight:800; font-size:clamp(17px, 1.9vw, 21px); line-height:1.5; letter-spacing:.04em;
  color:#fff;
}
.ex-formula .op{ font-family:var(--font-en); font-weight:500; color:var(--gold-light); }

/* --- ステップアップ ------------------------------------------------------ */
.ex-career{ margin-top:28px; max-width:600px; }
.ex-career li{ position:relative; padding:20px 22px; border:1px solid var(--line-dark); }
.ex-career li:last-child{ border-color:var(--gold-light); }
.ex-career li + li{ margin-top:36px; }
.ex-career li + li::before{
  content:""; position:absolute; left:32px; top:-28px;
  width:1px; height:18px; background:var(--gold-light);
}
.ex-career li + li::after{
  content:""; position:absolute; left:29px; top:-15px;
  width:6px; height:6px;
  border-right:1px solid var(--gold-light); border-bottom:1px solid var(--gold-light);
  transform:rotate(45deg);
}
.ex-career__step{
  font-family:var(--font-en); font-weight:600; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-light);
}
.ex-career__role{ margin-top:4px; font-weight:800; font-size:clamp(19px, 2vw, 22px); line-height:1.6; letter-spacing:.04em; }
.ex-career__desc{ margin-top:4px; line-height:1.8; color:var(--ink-dim); }

/* --- 車両リース ---------------------------------------------------------- */
.ex-lease{
  margin-top:var(--sp-6);
  display:grid; justify-items:start; gap:2px;
  max-width:560px; padding:26px 24px;
  border:1px solid var(--gold-light);
}
@media (min-width: 600px){ .ex-lease{ padding:32px 36px; } }
.ex-lease__label{ font-weight:700; letter-spacing:.08em; color:var(--gold-light); }
.ex-lease__price{
  font-family:var(--font-en); font-weight:600;
  font-size:clamp(40px, 5.4vw, 56px); line-height:1.2;
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
}
.ex-lease__price .u{ font-family:var(--font-sans); font-weight:700; font-size:.36em; margin-inline:.15em; }
.ex-lease__inc{
  margin-top:8px; padding:4px 12px;
  border:1px solid var(--gold-light); color:var(--gold-light);
  font-weight:700; font-size:14px; line-height:1.5; letter-spacing:.06em;
}

/* --- 未経験歓迎・締め ---------------------------------------------------- */
.ex-checks{ margin-top:24px; }
.ex-cta__brand{
  font-family:var(--font-en); font-weight:600; font-size:13px;
  letter-spacing:.24em; color:var(--gold-light);
  margin-bottom:14px;
}
.ex-back{ margin-top:36px; text-align:center; }

.ex-cta__sub{ margin-top:12px; font-size:var(--fs-sm); line-height:1.8; color:var(--ink-dim); }
.ex-mid-cta{ margin-top:var(--sp-7); }