/* =========================================================
   FLUXEL corporate site — interim build
   英字=Geist / 和文=Noto Sans JP（font-familyの優先順で混植）
   ========================================================= */

:root{
  --ink:#0b1b33;
  --body:#2c3a55;
  --accent:#2a5fe6;
  --accent-deep:#173a9c;
  --line:rgba(11,27,51,.10);
  --line-strong:rgba(11,27,51,.16);

  --font:'Geist','Noto Sans JP',system-ui,sans-serif;

  --maxw:1248px;
  --gutter:clamp(20px,5vw,96px);
  --section:clamp(64px,9vw,96px);
  --gap-section:clamp(112px,13vw,176px);
  --header-h:88px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--header-h); background:#fff; }
body{
  font-family:var(--font); color:var(--body); background:transparent;
  line-height:2; font-size:16px; font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; position:relative;
}
/* fixed gradient stage — stays put while glass sections scroll over it */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(50% 48% at 80% 14%, rgba(70,168,255,.32), transparent 62%),
    radial-gradient(42% 44% at 96% 4%, rgba(42,95,230,.24), transparent 60%),
    radial-gradient(52% 52% at 4% 28%, rgba(106,92,224,.18), transparent 66%),
    radial-gradient(56% 50% at 80% 98%, rgba(70,168,255,.16), transparent 66%),
    linear-gradient(168deg,#f3f8ff 0%, #e8f0ff 46%, #eef4ff 100%);
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer}

/* ---------- layout ---------- */
.container{ width:100%; max-width:calc(var(--maxw) + var(--gutter)*2); margin-inline:auto; padding-inline:var(--gutter); }
.hairline{ border:0; height:1px; background:var(--line); margin:0; }

/* sections = frosted-glass panes over the fixed gradient. Real glass only
   BLURS + slightly lightens — it must NOT shift hue, so NO saturate() (that was
   turning the blue gradient green). No divider line either; the frost edge is
   the only seam as content passes behind the pane (like text behind the header). */
.sec{
  padding-block:clamp(56px,7vw,88px);
  background:rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.sec:first-of-type{ padding-top:var(--section); }
#contact{ padding-top:clamp(56px,7vw,88px); }

/* ---------- type ---------- */
.kicker{ font-weight:500; font-size:13px; letter-spacing:.08em; color:var(--accent); line-height:1.2; display:block; }
.page-title,.sec-title{ font-weight:900; font-size:clamp(28px,4.5vw,40px); line-height:1.35; letter-spacing:.02em; color:var(--ink); }
.title-block{ padding-block:96px 0; }
.title-block .page-title{ margin-top:12px; }
.title-block + *{ margin-top:45px; }
.sec-head{ margin-bottom:40px; }
.sec-head .sec-title{ margin-top:12px; }
strong{ font-weight:700; color:var(--ink); }
.em-ink{ color:var(--ink); font-weight:700; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50; height:var(--header-h);
  background:transparent; border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.site-header.scrolled{
  background:rgba(255,255,255,.66);
  backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom-color:var(--line);
  box-shadow:0 6px 24px rgba(11,27,51,.07);
}
.site-header .container{ height:100%; display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:18px; color:var(--ink); letter-spacing:.01em; }
.nav{ display:flex; align-items:center; gap:34px; }
.nav a:not(.btn-pill){ font-weight:500; font-size:13px; color:#2c3a55; transition:color .15s; }
.nav a:not(.btn-pill):hover{ color:var(--accent); }
.btn-pill{
  display:inline-flex; align-items:center; justify-content:center; height:40px; padding-inline:24px;
  border-radius:999px; background:var(--accent); color:#fff; font-weight:700; font-size:13px; letter-spacing:.03em;
  box-shadow:0 4px 14px rgba(42,95,230,.35); transition:background .15s,transform .15s,box-shadow .15s;
}
.btn-pill:hover{ background:var(--accent-deep); transform:translateY(-1px); box-shadow:0 7px 18px rgba(42,95,230,.45); }
.nav-toggle{ display:none; }

/* ---------- footer ---------- */
.site-footer{ position:relative; z-index:1; background:var(--ink); color:#eaf0fb; padding-block:77px; margin-top:var(--section); }
/* home: CONTACT is a glass pane — its frosted bottom padding meets the footer directly
   (no margin gap that would expose a vivid clear band between frost and the dark footer) */
.hero ~ .site-footer{ margin-top:0; }
.site-footer .container{ display:grid; grid-template-columns:1fr auto; gap:40px; }
.site-footer .brand{ color:#eaf0fb; font-size:20px; }
.foot-tag{ color:#92a6c8; font-size:14px; margin-top:18px; line-height:1.8; }
.foot-tag .en{ color:#5c8fff; font-weight:500; font-size:13px; }
.foot-mail{ color:#92a6c8; font-weight:500; font-size:13px; margin-top:14px; }
.foot-nav{ display:grid; gap:12px; text-align:right; }
.foot-nav a{ color:#eaf0fb; font-weight:500; font-size:13px; transition:color .15s; }
.foot-nav a:hover{ color:#5c8fff; }
.foot-nav .small{ color:#92a6c8; font-size:12px; }
.foot-bottom{ grid-column:1/-1; border-top:1px solid rgba(255,255,255,.12); margin-top:40px; padding-top:18px; color:#92a6c8; font-size:12px; }

/* ---------- buttons / links ---------- */
.ext{ display:inline-flex; align-items:center; gap:6px; color:var(--accent); font-weight:500; }
.ext svg{ width:16px; height:16px; flex:none; }
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; height:52px; padding-inline:32px;
  border-radius:999px; background:var(--accent); color:#fff; font-weight:700; font-size:15px; border:0;
  transition:background .15s,transform .15s; }
.btn-primary:hover{ background:var(--accent-deep); transform:translateY(-1px); }

/* back to top */
.to-top{
  position:fixed; right:clamp(18px,3vw,36px); bottom:clamp(18px,3vw,36px); z-index:60;
  width:46px; height:46px; border-radius:999px; border:0; cursor:pointer;
  background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(42,95,230,.34);
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, background .15s;
}
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background:var(--accent-deep); transform:translateY(-2px); }
.to-top svg{ width:22px; height:22px; }

/* ---------- HERO (glass pane over the fixed gradient, same as every section) ---------- */
/* HERO is a FIXED backdrop layer: it stays put while content rides up over it */
.hero{ position:fixed; top:0; left:0; right:0; height:100svh; z-index:0; overflow:hidden; background:transparent; display:flex; align-items:center; }
.hero .container{ position:relative; z-index:1; width:100%; display:flex; flex-direction:column; justify-content:center; padding-block:calc(var(--header-h) + 24px) 120px; will-change:opacity,transform; transition:opacity .6s ease, transform .6s ease; }
/* 下にスクロール（スナップ）でHero文字をふわっと消す。最上部に戻るとふわっと再表示 */
.hero.faded .container{ opacity:0; transform:translateY(-18px); pointer-events:none; }
/* content scrolls above the fixed hero; the fixed gradient (body::before) shows through everywhere */
main{ position:relative; z-index:1; background:transparent; }
/* push main below the viewport ONLY when a fixed hero precedes it (index). Lower pages have no hero. */
.hero + main{ margin-top:100svh; }
.hero .meta-brand{ font-weight:500; font-size:13px; color:var(--body); letter-spacing:.04em; }
.hero h1{ font-weight:900; font-size:clamp(40px,8vw,68px); line-height:1.26; letter-spacing:.02em; color:var(--ink); margin-top:24px; }
.hero .tagline{ font-family:'Geist'; font-weight:500; font-size:clamp(15px,2.4vw,19px); color:var(--accent-deep); margin-top:20px; letter-spacing:.01em; }
.hero .hmeta{ margin-top:40px; font-size:clamp(12px,2vw,14px); color:var(--body); }

/* ---------- ABOUT ---------- */
.about .statement{ font-weight:900; font-size:clamp(26px,4.2vw,40px); line-height:1.35; letter-spacing:.02em; color:var(--ink); max-width:none; }
.about p{ margin-top:24px; max-width:1000px; }
.about .close{ font-weight:700; font-size:20px; line-height:1.5; color:var(--ink); margin-top:40px; max-width:1100px; }
.about .tagline{ font-family:'Geist'; color:var(--accent-deep); font-weight:500; margin-top:24px; }

/* ---------- ISSUES ---------- */
.issues .lead{ font-weight:900; font-size:clamp(26px,4.2vw,40px); line-height:1.35; letter-spacing:.02em; color:var(--ink); margin-bottom:48px; }
.issue-table{ display:grid; gap:0; }
.issue-row{ display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); column-gap:24px; padding-block:24px; border-top:1px solid var(--line); }
.issue-row:last-of-type{ border-bottom:1px solid var(--line); }
.issue-head{ display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); column-gap:24px; padding-bottom:12px; }
.issue-head span{ font-weight:700; font-size:13px; letter-spacing:.06em; }
.issue-head .q{ color:var(--body); }
.issue-head .a{ color:var(--accent); }
.issue-q{ color:var(--body); font-weight:400; font-size:15px; line-height:1.4; }
.issue-a{ color:var(--ink); font-weight:700; font-size:18px; line-height:1.4; }
.issues .close{ margin-top:36px; font-weight:400; font-size:16px; line-height:1.6; }

/* ---------- WHY ---------- */
.why .lead{ font-weight:900; font-size:clamp(26px,4.2vw,40px); line-height:1.35; letter-spacing:.02em; color:var(--ink); max-width:none; }
.why p{ margin-top:24px; max-width:1000px; }
.why .formula{ margin-top:40px; font-family:'Geist','Noto Sans JP'; font-weight:700; color:var(--ink); font-size:clamp(18px,2.6vw,24px); line-height:1.5; }
.why .formula b{ color:var(--accent); font-weight:700; }
.why .close{ font-weight:400; font-size:18px; line-height:1.5; color:var(--body); margin-top:24px; }
.why .close .em-ink{ font-weight:700; color:var(--ink); }

/* ---------- SERVICE (top grid) ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(24px,4vw,40px) clamp(40px,6vw,80px); }
.svc-card{ position:relative; display:block; padding:20px 22px; margin:-20px -22px; border-radius:16px; transition:background .2s, transform .2s, box-shadow .2s; }
a.svc-card:hover{ background:#fff; transform:translateY(-3px); box-shadow:0 18px 40px rgba(11,27,51,.08); }
a.svc-card:hover h3{ color:var(--accent); }
a.svc-card .arrow{ position:absolute; top:22px; right:22px; width:18px; height:18px; color:var(--accent); opacity:0; transform:translateX(-4px); transition:opacity .2s, transform .2s; }
a.svc-card:hover .arrow{ opacity:1; transform:none; }
.svc-card .num{ font-family:'Geist'; font-weight:600; font-size:14px; color:var(--accent); letter-spacing:.04em; }
.svc-card h3{ font-weight:700; font-size:clamp(17px,2.4vw,19px); line-height:1.5; color:var(--ink); margin-top:8px; transition:color .2s; }
.svc-card p{ margin-top:12px; font-size:14px; line-height:1.85; }
.svc-more{ margin-top:40px; }

/* ---------- SERVICE detail (service.html) ---------- */
/* inter-block gap matches the home section gap (88+88=176px, divider centered) */
.svc-detail{ position:relative; padding-block:0 clamp(56px,7vw,88px); }
.svc-detail + .svc-detail{ border-top:1px solid var(--line); padding-top:clamp(56px,7vw,88px); }
.svc-detail .idx{ position:absolute; top:-8px; right:0; font-family:'Geist'; font-weight:600; font-size:clamp(64px,12vw,120px); line-height:1; color:rgba(42,95,230,.10); pointer-events:none; }
.svc-detail h2{ font-weight:700; font-size:clamp(24px,3.4vw,30px); line-height:1.35; color:var(--ink); margin-top:12px; }
.svc-detail .sub{ margin-top:14px; max-width:1100px; }
.svc-detail .cols{ display:grid; grid-template-columns:minmax(0,460px) minmax(0,1fr); gap:clamp(32px,6vw,90px); margin-top:40px; padding-top:32px; border-top:1px solid var(--line); }
.svc-detail .col-label{ font-weight:700; font-size:13px; }
.svc-detail .col-label.q{ color:var(--body); }
.svc-detail .col-label.a{ color:var(--accent); }
.svc-detail .consults{ margin-top:16px; display:grid; gap:18px; }
.svc-detail .consults li{ position:relative; padding-left:16px; font-size:15px; line-height:1.6; }
.svc-detail .consults li::before{ content:""; position:absolute; left:0; top:.4em; width:3px; height:1.1em; background:var(--accent); border-radius:2px; }
.svc-detail .approach{ margin-top:16px; }
.svc-detail .approach p + p{ margin-top:24px; }

/* ---------- WORKS ---------- */
.works-intro p{ max-width:1100px; }
.works-caps{ margin-top:40px; display:grid; gap:24px; max-width:1100px; }
.works-caps li{ position:relative; padding-left:18px; color:var(--ink); }
.works-caps li::before{ content:""; position:absolute; left:0; top:.45em; width:3px; height:1.1em; background:var(--accent); border-radius:2px; }
.works-close{ margin-top:40px; }
.feature{ margin-top:clamp(56px,7vw,88px); }
.feature .kicker{ margin-bottom:14px; }
.feature .ftitle{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.feature .ftitle .name{ font-family:'Geist'; font-weight:700; font-size:clamp(24px,4vw,28px); color:var(--ink); display:inline-flex; align-items:center; gap:8px; }
.feature .ftitle .name a{ display:inline-flex; }
.feature .ftitle .name svg{ width:16px; height:16px; color:var(--accent); }
.feature .ftitle .divider{ width:1px; height:18px; background:var(--line-strong); }
.feature .ftitle .voiq{ font-size:16px; color:var(--body); display:inline-flex; align-items:center; gap:8px; }
.feature .ftitle .voiq svg{ width:16px; height:16px; color:var(--accent); }
.feature .badge{ display:inline-flex; margin-top:14px; padding:6px 14px; border:1px solid rgba(42,95,230,.22); border-radius:999px; color:var(--accent); font-weight:500; font-size:13px; background:#fff; }
.feature .shot{ margin-top:28px; border-radius:14px; overflow:hidden; border:1px solid var(--line-strong);
  box-shadow:0 30px 64px rgba(11,27,51,.13),0 6px 16px rgba(11,27,51,.10); }
.feature .fbody{ margin-top:36px; max-width:920px; }
.feature .fbody .phases{ margin-top:36px; color:var(--body); }
.feature .fbody .close{ margin-top:14px; }

/* ---------- COMPANY ---------- */
.gaiyo{ display:grid; gap:0; max-width:900px; }
.gaiyo .row{ display:grid; grid-template-columns:200px 1fr; gap:24px; padding-block:20px; border-top:1px solid var(--line); }
.gaiyo .row:last-child{ border-bottom:1px solid var(--line); }
.gaiyo .row dt{ font-size:14px; color:var(--body); line-height:1.5; }
.gaiyo .row dd{ font-size:16px; color:var(--ink); line-height:1.7; }
.message .mtitle{ font-weight:900; font-size:clamp(24px,4vw,40px); line-height:1.35; color:var(--ink); }
.message .mbody{ margin-top:45px; max-width:900px; }
.message .mbody p + p{ margin-top:24px; }
.message .sign{ margin-top:40px; }
.message .sign .name{ font-weight:700; font-size:15px; color:var(--ink); }
.message .sign .en{ font-family:'Geist'; font-weight:500; font-size:13px; color:var(--body); margin-top:2px; }

/* ---------- NEWS accordion ---------- */
.news-list{ max-width:1100px; }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-head{ width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(16px,4vw,48px); padding-block:24px; background:none; border:0; text-align:left; }
.acc-head .date{ font-family:'Geist'; font-weight:500; font-size:14px; color:var(--body); letter-spacing:.02em; white-space:nowrap; }
.acc-head .ttl{ font-weight:500; font-size:clamp(15px,2.4vw,17px); color:var(--ink); line-height:1.5; }
.acc-head .chev{ width:20px; height:20px; color:var(--body); transition:transform .25s,color .25s; flex:none; }
.acc-item.open .acc-head .chev{ transform:rotate(180deg); color:var(--accent); }
.acc-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.acc-body > div{ overflow:hidden; }
.acc-item.open .acc-body{ grid-template-rows:1fr; }
.acc-body .inner{ padding:4px 0 28px; max-width:920px; }

/* ---------- CONTACT form ---------- */
.contact-grid{ display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:clamp(40px,7vw,96px); }
.contact-grid .c-title{ font-weight:900; font-size:clamp(28px,4.5vw,40px); line-height:1.35; color:var(--ink); margin-top:12px; }
.contact-grid .lead-col p{ margin-top:24px; }
.form{ display:grid; gap:22px; }
.field{ display:grid; gap:8px; }
.field .lab{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14px; color:var(--ink); font-weight:500; }
.field .mark{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:4px; }
.field .mark.req{ color:var(--accent); background:rgba(42,95,230,.10); }
.field .mark.opt{ color:var(--body); background:rgba(44,58,85,.08); }
.input,.select,.textarea{
  width:100%; font:inherit; font-size:15px; color:var(--ink); background:#fff;
  border:1px solid var(--line-strong); border-radius:8px; padding:13px 14px; line-height:1.6; transition:border-color .15s,box-shadow .15s;
}
.input::placeholder,.textarea::placeholder{ color:#9aa7bd; }
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(42,95,230,.12); }
.textarea{ min-height:140px; resize:vertical; }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
/* 連結input：枠1つに2セル・中央にインセット区切り線（上下は枠に届かない） */
.joined{ display:grid; grid-template-columns:1fr 1fr; background:#fff; border:1px solid var(--line-strong); border-radius:8px; position:relative; transition:border-color .15s, box-shadow .15s; }
.joined:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(42,95,230,.12); }
.joined .input{ border:0; border-radius:0; background:transparent; }
.joined .input:focus{ box-shadow:none; }
.joined::before{ content:""; position:absolute; top:11px; bottom:11px; left:50%; width:1px; background:rgba(11,27,51,.14); transform:translateX(-.5px); pointer-events:none; }
.select{ appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232c3a55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 12px center; padding-right:40px; }
.form .submit-row{ display:flex; justify-content:flex-end; margin-top:6px; }
/* Turnstile（左）と送信ボタン（右）を1段に */
.form-actions{ display:flex; align-items:center; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; margin-top:8px; }
.form-actions .btn-primary{ flex:none; }
/* custom select（種別）：開いたリストもブランド準拠で装飾 */
.cselect{ position:relative; }
.cselect-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; font:inherit; font-size:15px; color:var(--ink); background:#fff; border:1px solid var(--line-strong); border-radius:8px; padding:13px 14px; line-height:1.6; text-align:left; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.cselect-btn:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(42,95,230,.12); }
.cselect.open .cselect-btn{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(42,95,230,.12); }
.cselect.invalid .cselect-btn{ border-color:#c0392b; }
.cselect-val.placeholder{ color:#9aa7bd; }
.cselect-chev{ width:20px; height:20px; color:var(--body); flex:none; transition:transform .2s, color .2s; }
.cselect.open .cselect-chev{ transform:rotate(180deg); color:var(--accent); }
.cselect-list{ position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30; list-style:none; margin:0; padding:6px; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 18px 44px rgba(11,27,51,.16); max-height:288px; overflow:auto; opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .16s ease, transform .16s ease; }
.cselect.open .cselect-list{ opacity:1; transform:none; pointer-events:auto; }
.cselect-list li{ padding:11px 12px; border-radius:7px; font-size:14.5px; color:var(--ink); line-height:1.5; cursor:pointer; transition:background .12s, color .12s; }
.cselect-list li:hover,.cselect-list li.active{ background:rgba(42,95,230,.08); color:var(--accent); }
.cselect-list li[aria-selected="true"]{ font-weight:700; color:var(--accent); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } /* honeypot */
.form-note{ font-size:13px; color:var(--body); margin-top:10px; text-align:center; }
.form-status{ font-size:14px; margin-top:14px; display:none; text-align:center; }
.form-status.show{ display:block; }
.form-status.ok{ color:#1a7f4b; }
.form-status.err{ color:#c0392b; }

/* ---------- scroll reveal / stagger / divider ---------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); will-change:opacity,transform; }
.reveal.in{ opacity:1; transform:none; }
.stagger > *{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.stagger.in > *{ opacity:1; transform:none; }
.draw{ transform:scaleX(0); transform-origin:left center; transition:transform .9s cubic-bezier(.22,.61,.36,1); }
.draw.in{ transform:scaleX(1); }
@media (prefers-reduced-motion:reduce){
  .reveal,.stagger>*,.draw{ opacity:1!important; transform:none!important; transition:none!important }
  html{ scroll-behavior:auto }
}

/* ---------- privacy / policy ---------- */
.policy{ max-width:1040px; }
.policy > h2{ font-size:17px; font-weight:700; color:var(--ink); line-height:1.5; margin-top:40px; }
.policy > p, .policy > ul{ margin-top:12px; }
.policy > p:first-child{ margin-top:0; }
.policy li{ position:relative; padding-left:1.15em; }
.policy li::before{ content:"・"; position:absolute; left:0; }
.policy .meta{ font-size:14px; line-height:1.8; margin-top:40px; }

/* ---------- responsive ---------- */
@media (max-width:840px){
  :root{ --header-h:64px; }
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0; flex-direction:column; align-items:flex-start; gap:0;
    background:#fff; border-bottom:1px solid var(--line); padding:8px var(--gutter) 16px;
    transform:translateY(-130%); transition:transform .25s ease; box-shadow:0 12px 24px rgba(11,27,51,.06);
  }
  .nav.open{ transform:translateY(0); }
  .nav a{ width:100%; padding:14px 0; font-size:15px; border-bottom:1px solid var(--line); }
  .nav .btn-pill{ margin-top:14px; width:100%; height:46px; }
  .nav-toggle{ display:inline-flex; flex-direction:column; gap:5px; width:40px; height:40px; align-items:center; justify-content:center; background:none; border:0; }
  .nav-toggle span{ width:22px; height:2px; background:var(--ink); border-radius:2px; transition:.2s; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .title-block{ padding-block:64px 0; }
  .title-block + *{ margin-top:32px; }

  .svc-grid{ grid-template-columns:1fr; }
  .issue-row,.issue-head{ grid-template-columns:1fr; gap:6px; }
  .issue-head{ display:none; }
  .issue-row{ gap:10px; }
  .issue-q::before{ content:"課題："; color:var(--body); font-weight:700; font-size:12px; }
  .issue-a::before{ content:"FLUXELの答え："; color:var(--accent); font-weight:700; font-size:12px; display:block; margin-bottom:2px; }
  .svc-detail .cols{ grid-template-columns:1fr; gap:28px; }
  .svc-detail .idx{ font-size:64px; top:-4px; opacity:.8; }
  .feature .fbody{ grid-template-columns:1fr; gap:28px; }
  .gaiyo .row{ grid-template-columns:1fr; gap:4px; padding-block:16px; }
  .gaiyo .row dt{ font-weight:700; }
  .contact-grid{ grid-template-columns:1fr; gap:32px; }
  .two{ grid-template-columns:1fr; }
  .site-footer .container{ grid-template-columns:1fr; }
  .foot-nav{ text-align:left; grid-template-columns:repeat(2,auto); justify-content:start; gap:12px 40px; }
  .acc-head{ grid-template-columns:auto 1fr auto; gap:14px; }
}
@media (max-width:520px){
  .hero h1{ font-size:clamp(32px,9vw,40px); }
  .acc-head{ grid-template-columns:1fr auto; row-gap:4px; }
  .acc-head .date{ grid-column:1; }
  .acc-head .chev{ grid-row:1/3; grid-column:2; align-self:center; }
  .acc-head .ttl{ grid-column:1; }
}