@charset "UTF-8";

/* =========================================================
   CareerStep - style.css
   1ファイル構成。セクション順:
   1. カスタムプロパティ
   2. リセット / ベース
   3. レイアウト共通
   4. ボタン / CTA
   5. ヘッダー / フッター
   6. LPセクション
   7. FAQアコーディオン
   8. エントリーフォーム
   9. 記事 (guide)
   10. 法務・会社情報ページ
   11. ユーティリティ
   ========================================================= */

/* =========================================================
   1. カスタムプロパティ
   ========================================================= */
:root {
  /* 色 */
  --c-brand:        #123a5e;
  --c-brand-dark:   #0c2841;
  --c-brand-light:  #2b628f;
  --c-brand-pale:   #eef4f9;
  --c-accent:       #d9622e;
  --c-accent-dark:  #b84d1f;
  --c-accent-pale:  #fdf1ea;

  --c-ink:          #16202b;
  --c-ink-soft:     #45535f;
  --c-ink-mute:     #6b7883;
  --c-line:         #dde3e9;
  --c-line-soft:    #eceff3;
  --c-bg:           #ffffff;
  --c-bg-alt:       #f6f8fa;
  --c-bg-deep:      #0c2841;

  --c-ok:           #1c7a55;
  --c-ok-pale:      #eaf5f0;
  --c-ng:           #9a3b3b;
  --c-ng-pale:      #f8efef;

  /* フォント */
  --ff-base: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Kaku Gothic ProN",
             "Hiragino Sans", "Noto Sans JP", "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  --ff-num:  "Helvetica Neue", Arial, var(--ff-base);

  /* フォントサイズ */
  --fs-xs:   1.2rem;
  --fs-sm:   1.3rem;
  --fs-base: 1.5rem;
  --fs-md:   1.6rem;
  --fs-lg:   1.8rem;
  --fs-xl:   2.2rem;
  --fs-2xl:  2.6rem;
  --fs-3xl:  3.2rem;
  --fs-4xl:  4.0rem;

  /* 余白 */
  --sp-1: 0.4rem;
  --sp-2: 0.8rem;
  --sp-3: 1.2rem;
  --sp-4: 1.6rem;
  --sp-5: 2.4rem;
  --sp-6: 3.2rem;
  --sp-7: 4.8rem;
  --sp-8: 6.4rem;
  --sp-9: 9.6rem;

  /* その他 */
  --radius:    8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(18, 58, 94, .06), 0 2px 8px rgba(18, 58, 94, .06);
  --shadow-md: 0 2px 6px rgba(18, 58, 94, .08), 0 8px 24px rgba(18, 58, 94, .10);
  --wrap:      112rem;
  --wrap-narrow: 78rem;
  --header-h:  6.4rem;
}

@media (min-width: 768px) {
  :root {
    --fs-3xl: 3.8rem;
    --fs-4xl: 5.2rem;
    --header-h: 7.2rem;
  }
}

/* =========================================================
   2. リセット / ベース
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 62.5%; /* 1rem = 10px */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.6rem);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--ff-base);
  font-size: var(--fs-base);
  line-height: 1.8;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

@media (min-width: 768px) {
  body { font-size: var(--fs-md); }
}

h1, h2, h3, h4, h5 {
  margin: 0;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .01em;
}

p, ul, ol, dl, table, figure, blockquote { margin: 0; }

ul, ol { padding-left: 0; list-style: none; }

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
  color: var(--c-brand-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: var(--c-brand); }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

button { cursor: pointer; background: none; border: none; }

table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

[hidden] { display: none !important; }

/* スクリーンリーダー専用 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* スキップリンク */
.skip-link {
  position: absolute;
  top: -100px; left: var(--sp-3);
  z-index: 200;
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-brand);
  color: #fff;
  text-decoration: none;
  border-radius: 0 0 var(--radius) var(--radius);
}
.skip-link:focus { top: 0; color: #fff; }

/* =========================================================
   3. レイアウト共通
   ========================================================= */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}
@media (min-width: 768px) { .wrap { padding-inline: var(--sp-5); } }

.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--sp-7); }
@media (min-width: 768px) { .section { padding-block: var(--sp-9); } }

.section--alt { background: var(--c-bg-alt); }
.section--pale { background: var(--c-brand-pale); }

.section__head {
  text-align: center;
  margin-bottom: var(--sp-6);
}
@media (min-width: 768px) { .section__head { margin-bottom: var(--sp-7); } }

.section__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--c-accent);
  margin-bottom: var(--sp-2);
  font-family: var(--ff-num);
}

.section__title {
  font-size: var(--fs-2xl);
  letter-spacing: .02em;
}
@media (min-width: 768px) { .section__title { font-size: var(--fs-3xl); } }

.section__lead {
  margin-top: var(--sp-3);
  color: var(--c-ink-soft);
  font-size: var(--fs-base);
}
@media (min-width: 768px) { .section__lead { font-size: var(--fs-md); } }

.grid { display: grid; gap: var(--sp-4); }
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}
@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}

/* =========================================================
   4. ボタン / CTA
   ========================================================= */
.btn {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 var(--sp-2);
  min-height: 5.2rem;
  padding: var(--sp-3) var(--sp-6);
  border-radius: 999px;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--c-accent);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.btn--primary:hover { background: var(--c-accent-dark); color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--c-brand);
  border-color: var(--c-brand);
}
.btn--ghost:hover { background: var(--c-brand); color: #fff; }

.btn--ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.6);
}
.btn--ghost-light:hover { background: #fff; color: var(--c-brand-dark); }

.btn--lg { min-height: 6rem; font-size: var(--fs-lg); padding-inline: var(--sp-6); }
.btn--block { display: flex; width: 100%; }

.btn__note {
  /* 常にラベルの下段に回す */
  flex-basis: 100%;
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: 1.5;
  opacity: .9;
}

/* CTAブロック */
.ctaBlock {
  background: linear-gradient(135deg, var(--c-brand-dark) 0%, var(--c-brand) 60%, var(--c-brand-light) 100%);
  color: #fff;
  text-align: center;
  padding-block: var(--sp-7);
}
@media (min-width: 768px) { .ctaBlock { padding-block: var(--sp-8); } }

.ctaBlock__title {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-3);
}
@media (min-width: 768px) { .ctaBlock__title { font-size: var(--fs-2xl); } }

.ctaBlock__text {
  color: rgba(255,255,255,.88);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-base);
}

.ctaBlock__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
@media (min-width: 768px) {
  .ctaBlock__actions { flex-direction: row; justify-content: center; gap: var(--sp-4); }
}

.ctaBlock__meta {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.75);
}

/* 固定フッターCTA (SP) */
.stickyCta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -2px 12px rgba(18,58,94,.08);
  transform: translateY(110%);
  transition: transform .25s ease;
}
.stickyCta.is-visible { transform: translateY(0); }
.stickyCta .btn { min-height: 4.8rem; font-size: var(--fs-base); }

@media (min-width: 768px) {
  .stickyCta {
    left: auto; right: var(--sp-5); bottom: var(--sp-5);
    width: auto;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
  }
  .stickyCta .btn { min-height: 5.6rem; font-size: var(--fs-md); box-shadow: var(--shadow-md); }
}

body.has-sticky-cta { padding-bottom: 7.2rem; }
@media (min-width: 768px) { body.has-sticky-cta { padding-bottom: 0; } }

/* 記事ページはサイドバーにCTAがあるため、広い画面では追従CTAを重ねない */
@media (min-width: 1024px) {
  body.has-aside-cta .stickyCta { display: none; }
}

/* =========================================================
   5. ヘッダー / フッター
   ========================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--c-line-soft);
  backdrop-filter: saturate(180%) blur(8px);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: var(--header-h);
}

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
  text-decoration: none;
  color: var(--c-brand-dark);
  font-weight: 700;
  letter-spacing: .01em;
}
.logo__mark {
  font-size: var(--fs-lg);
  font-family: var(--ff-num);
}
@media (min-width: 768px) { .logo__mark { font-size: var(--fs-xl); } }
.logo__sub {
  font-size: var(--fs-xs);
  color: var(--c-ink-mute);
  font-weight: 500;
  display: none;
}
@media (min-width: 1024px) { .logo__sub { display: inline; } }

.nav { display: none; }
@media (min-width: 1024px) {
  .nav { display: flex; align-items: center; gap: var(--sp-5); }
}
.nav__list { display: flex; align-items: center; gap: var(--sp-5); }
.nav__link {
  text-decoration: none;
  color: var(--c-ink-soft);
  font-size: var(--fs-base);
  font-weight: 600;
  padding-block: var(--sp-2);
}
.nav__link:hover { color: var(--c-brand); }
.nav__link[aria-current="page"] { color: var(--c-brand); }

.header__cta { display: none; }
@media (min-width: 1024px) {
  .header__cta { display: inline-flex; min-height: 4.4rem; padding-inline: var(--sp-5); font-size: var(--fs-base); }
}

.navToggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 4.4rem; height: 4.4rem;
  padding: 0 1rem;
  border-radius: var(--radius);
}
@media (min-width: 1024px) { .navToggle { display: none; } }
.navToggle span {
  display: block;
  height: 2px;
  background: var(--c-brand-dark);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.navToggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navToggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navToggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 95;
  background: #fff;
  padding: var(--sp-5) var(--sp-4) var(--sp-8);
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .25s ease, visibility .25s ease;
}
.drawer.is-open { transform: translateX(0); visibility: visible; }
@media (min-width: 1024px) { .drawer { display: none; } }

.drawer__list { display: flex; flex-direction: column; }
.drawer__list a {
  display: block;
  padding: var(--sp-4) var(--sp-2);
  border-bottom: 1px solid var(--c-line-soft);
  text-decoration: none;
  color: var(--c-ink);
  font-weight: 600;
}
.drawer__cta { margin-top: var(--sp-6); }

.footer {
  background: var(--c-bg-deep);
  color: rgba(255,255,255,.72);
  padding-block: var(--sp-7) var(--sp-6);
  font-size: var(--fs-sm);
}
.footer a { color: rgba(255,255,255,.86); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }

.footer__top {
  display: grid;
  gap: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
@media (min-width: 768px) {
  .footer__top { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-7); }
}

.footer__brand .logo { color: #fff; }
.footer__brand p { margin-top: var(--sp-3); line-height: 1.9; }

.footer__navTitle {
  color: #fff;
  font-size: var(--fs-sm);
  letter-spacing: .08em;
  margin-bottom: var(--sp-3);
}
.footer__navList { display: flex; flex-direction: column; gap: var(--sp-2); }

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.55);
}
@media (min-width: 768px) {
  .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* =========================================================
   6. LPセクション
   ========================================================= */

/* --- ファーストビュー --- */
.hero {
  position: relative;
  background: linear-gradient(170deg, #f7fafd 0%, var(--c-brand-pale) 55%, #e3edf5 100%);
  padding-block: var(--sp-7) var(--sp-8);
  overflow: hidden;
}
@media (min-width: 768px) { .hero { padding-block: var(--sp-8) var(--sp-9); } }

.hero__inner { position: relative; z-index: 1; }
@media (min-width: 1024px) {
  .hero__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--sp-7); align-items: center; }
}

.hero__eyebrow {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-brand);
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(18,58,94,.16);
  border-radius: 999px;
  padding: .4rem 1.4rem;
  margin-bottom: var(--sp-4);
}

.hero__title {
  font-size: var(--fs-3xl);
  line-height: 1.32;
  letter-spacing: .01em;
  color: var(--c-brand-dark);
  text-wrap: balance;
}
@media (min-width: 768px) { .hero__title { font-size: 4.6rem; } }
@media (min-width: 1024px) { .hero__title { font-size: 4.4rem; } }

.hero__title em {
  font-style: normal;
  background: linear-gradient(transparent 62%, rgba(217,98,46,.28) 62%);
  padding-inline: .1em;
}

.hero__lead {
  margin-top: var(--sp-4);
  font-size: var(--fs-md);
  color: var(--c-ink-soft);
  line-height: 1.9;
}
@media (min-width: 768px) { .hero__lead { font-size: var(--fs-lg); } }

/* 年収レンジ・職種の明示ブロック */
.heroFacts {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(18,58,94,.12);
  border-radius: var(--radius-lg);
}
@media (min-width: 768px) { .heroFacts { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); padding: var(--sp-5); } }

.heroFacts__item { display: flex; flex-direction: column; gap: .2rem; }
.heroFacts__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--c-ink-mute);
}
.heroFacts__value {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-brand-dark);
  line-height: 1.5;
}
.heroFacts__value .num { font-family: var(--ff-num); font-size: var(--fs-xl); }

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
@media (min-width: 768px) {
  .hero__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
}

.hero__note {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-ink-mute);
}

.hero__visual { display: none; }
@media (min-width: 1024px) {
  .hero__visual { display: block; }
}
.hero__figure {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: #fff;
}
.hero__figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* --- 対象者 / 対象外 --- */
.scope { display: grid; gap: var(--sp-4); }
@media (min-width: 768px) { .scope { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } }

.scopeCard {
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  border: 1px solid var(--c-line);
  background: #fff;
}
.scopeCard--yes { border-color: rgba(28,122,85,.3); background: var(--c-ok-pale); }
.scopeCard--no  { border-color: rgba(154,59,59,.22); background: var(--c-ng-pale); }

.scopeCard__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-4);
}
.scopeCard--yes .scopeCard__title { color: var(--c-ok); }
.scopeCard--no  .scopeCard__title { color: var(--c-ng); }

.scopeCard__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem; height: 2.8rem;
  border-radius: 50%;
  font-size: var(--fs-md);
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.scopeCard--yes .scopeCard__icon { background: var(--c-ok); }
.scopeCard--no  .scopeCard__icon { background: var(--c-ng); }

.scopeList { display: flex; flex-direction: column; gap: var(--sp-3); }
.scopeList li {
  position: relative;
  padding-left: 2.4rem;
  font-size: var(--fs-base);
  line-height: 1.75;
}
.scopeList li::before {
  position: absolute;
  left: 0; top: 0;
  font-weight: 700;
}
.scopeCard--yes .scopeList li::before { content: "✓"; color: var(--c-ok); }
.scopeCard--no  .scopeList li::before { content: "−"; color: var(--c-ng); }

.scopeCard__note {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(0,0,0,.08);
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
}

/* --- よくある不満と解決 --- */
.painList { display: flex; flex-direction: column; gap: var(--sp-5); }

.painItem {
  display: grid;
  gap: var(--sp-4);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) {
  .painItem { grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-5); padding: var(--sp-6); }
}

.painItem__problem { }
.painItem__quote {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.7;
  margin-bottom: var(--sp-2);
}
.painItem__detail { font-size: var(--fs-sm); color: var(--c-ink-mute); }

.painItem__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-accent);
  font-size: var(--fs-xl);
  line-height: 1;
}
.painItem__arrow::before { content: "↓"; }
@media (min-width: 768px) {
  .painItem__arrow::before { content: "→"; }
}

.painItem__answer {
  background: var(--c-brand-pale);
  border-radius: var(--radius);
  padding: var(--sp-4);
}
.painItem__answerLabel {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--c-brand-light);
  margin-bottom: var(--sp-1);
}
.painItem__answerText {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--c-brand-dark);
  line-height: 1.75;
}

/* --- 支援の流れ --- */
.flow {
  display: grid;
  gap: var(--sp-4);
  counter-reset: flow;
}
@media (min-width: 768px) { .flow { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } }
@media (min-width: 1024px) { .flow { grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); } }

.flowStep {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  counter-increment: flow;
}
.flowStep::before {
  content: "STEP " counter(flow);
  position: absolute;
  top: -1.2rem; left: var(--sp-4);
  background: var(--c-brand);
  color: #fff;
  font-family: var(--ff-num);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  padding: .3rem 1.2rem;
  border-radius: 999px;
}
.flowStep__title {
  font-size: var(--fs-md);
  margin-bottom: var(--sp-2);
  color: var(--c-brand-dark);
}
.flowStep__text { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.flowStep__meta {
  display: inline-block;
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-ink-mute);
  background: var(--c-bg-alt);
  border-radius: 999px;
  padding: .2rem 1rem;
}

/* --- 成功事例 --- */
.caseGrid { display: grid; gap: var(--sp-4); }
@media (min-width: 768px) { .caseGrid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } }
@media (min-width: 1024px) { .caseGrid { grid-template-columns: repeat(3, 1fr); } }

.caseCard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}

.caseCard__head {
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-line-soft);
  margin-bottom: var(--sp-4);
}
.caseCard__role {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-brand-dark);
  line-height: 1.6;
}
.caseCard__person {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-ink-mute);
}

.caseSalary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.caseSalary__col { text-align: center; }
.caseSalary__label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-ink-mute);
}
.caseSalary__value {
  font-family: var(--ff-num);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-ink-soft);
}
.caseSalary__col--after .caseSalary__value { color: var(--c-accent); font-size: var(--fs-xl); }
.caseSalary__arrow { color: var(--c-ink-mute); font-size: var(--fs-md); }

.caseCard__dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
.caseCard__dl dt { color: var(--c-ink-mute); white-space: nowrap; }
.caseCard__dl dd { margin: 0; color: var(--c-ink); }

.caseCard__comment {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line-soft);
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  line-height: 1.8;
}

.caseNote {
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--c-ink-mute);
  text-align: center;
}

/* --- 在留資格サポート --- */
.visaSupport { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 1024px) { .visaSupport { grid-template-columns: 1fr 1fr; gap: var(--sp-7); } }

.visaSupport__points { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); }
.visaSupport__points li {
  position: relative;
  padding-left: 2.8rem;
  font-size: var(--fs-base);
}
.visaSupport__points li::before {
  content: "";
  position: absolute;
  left: 0; top: .7em;
  width: 1.6rem; height: 2px;
  background: var(--c-accent);
}

.guideTeaser { display: grid; gap: var(--sp-3); }
.guideTeaser__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--sp-4);
  text-decoration: none;
  color: var(--c-ink);
  font-size: var(--fs-base);
  font-weight: 600;
  transition: border-color .18s ease, transform .18s ease;
}
.guideTeaser__item:hover { border-color: var(--c-brand-light); transform: translateX(2px); color: var(--c-ink); }
.guideTeaser__item::after { content: "›"; color: var(--c-brand-light); font-size: var(--fs-lg); }

/* =========================================================
   7. FAQアコーディオン
   ========================================================= */
.faq {
  max-width: 84rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.faqItem {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
}

.faqItem__q {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-4);
  text-align: left;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.7;
}
@media (min-width: 768px) { .faqItem__q { padding: var(--sp-4) var(--sp-5); font-size: var(--fs-md); } }

.faqItem__q::before {
  content: "Q";
  flex-shrink: 0;
  font-family: var(--ff-num);
  color: var(--c-brand-light);
  font-size: var(--fs-md);
  line-height: 1.6;
}

.faqItem__icon {
  margin-left: auto;
  flex-shrink: 0;
  position: relative;
  width: 1.8rem; height: 1.8rem;
  margin-top: .4rem;
}
.faqItem__icon::before,
.faqItem__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 1.4rem; height: 2px;
  background: var(--c-brand-light);
  transform: translate(-50%, -50%);
  transition: transform .2s ease, opacity .2s ease;
}
.faqItem__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faqItem__q[aria-expanded="true"] .faqItem__icon::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; }

.faqItem__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .24s ease;
}
.faqItem__a.is-open { grid-template-rows: 1fr; }
.faqItem__aInner { overflow: hidden; }
.faqItem__aBody {
  padding: 0 var(--sp-4) var(--sp-4) calc(var(--sp-4) + 2.6rem);
  font-size: var(--fs-base);
  color: var(--c-ink-soft);
  line-height: 1.9;
}
@media (min-width: 768px) {
  .faqItem__aBody { padding: 0 var(--sp-5) var(--sp-5) calc(var(--sp-5) + 2.6rem); }
}
.faqItem__aBody p + p { margin-top: var(--sp-3); }

/* =========================================================
   8. エントリーフォーム
   ========================================================= */
.formPage { background: var(--c-bg-alt); min-height: 100vh; }

.formShell {
  max-width: 68rem;
  margin-inline: auto;
  padding-block: var(--sp-5) var(--sp-8);
}
@media (min-width: 768px) { .formShell { padding-block: var(--sp-7) var(--sp-9); } }

/* 進捗バー */
.progress { margin-bottom: var(--sp-5); }
.progress__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-ink-mute);
}
.progress__count { font-family: var(--ff-num); font-weight: 700; color: var(--c-brand); }
.progress__track {
  height: 6px;
  background: var(--c-line);
  border-radius: 999px;
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--c-brand-light), var(--c-accent));
  border-radius: 999px;
  transition: width .3s ease;
}

.formCard {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-4) var(--sp-6);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) { .formCard { padding: var(--sp-7) var(--sp-6); } }

.step { }
.step__label {
  display: block;
  font-family: var(--ff-num);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--c-accent);
  margin-bottom: var(--sp-2);
}
.step__title {
  font-size: var(--fs-xl);
  line-height: 1.5;
  color: var(--c-brand-dark);
}
@media (min-width: 768px) { .step__title { font-size: var(--fs-2xl); } }
.step__help {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-ink-mute);
}

.choices {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 2px solid var(--c-line);
  border-radius: var(--radius);
  cursor: pointer;
  background: #fff;
  transition: border-color .15s ease, background-color .15s ease;
}
.choice:hover { border-color: var(--c-brand-light); background: #fbfdff; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice__box {
  flex-shrink: 0;
  width: 2.2rem; height: 2.2rem;
  margin-top: .3rem;
  border: 2px solid var(--c-line);
  background: #fff;
  position: relative;
  transition: border-color .15s ease, background-color .15s ease;
}
.choice--radio .choice__box { border-radius: 50%; }
.choice--check .choice__box { border-radius: 5px; }
.choice__box::after {
  content: "";
  position: absolute;
  opacity: 0;
  transition: opacity .15s ease;
}
.choice--radio .choice__box::after {
  inset: 3px;
  border-radius: 50%;
  background: var(--c-brand);
}
.choice--check .choice__box::after {
  left: 6px; top: 1px;
  width: 6px; height: 12px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(42deg);
}
.choice input:checked ~ .choice__box { border-color: var(--c-brand); }
.choice--check input:checked ~ .choice__box { background: var(--c-brand); }
.choice input:checked ~ .choice__box::after { opacity: 1; }
.choice:has(input:checked) { border-color: var(--c-brand); background: var(--c-brand-pale); }
.choice input:focus-visible ~ .choice__box { outline: 3px solid var(--c-accent); outline-offset: 2px; }

.choice__body { flex: 1; }
.choice__text { font-size: var(--fs-base); font-weight: 600; line-height: 1.6; }
@media (min-width: 768px) { .choice__text { font-size: var(--fs-md); } }
.choice__sub { display: block; margin-top: .2rem; font-size: var(--fs-xs); color: var(--c-ink-mute); font-weight: 400; }

/* 入力フィールド */
.field { margin-top: var(--sp-5); }
.field__label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-base);
  font-weight: 700;
  margin-bottom: var(--sp-2);
}
.field__req {
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: .1rem .8rem;
  border-radius: 3px;
  background: var(--c-accent);
  color: #fff;
}
.field__opt {
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: .1rem .8rem;
  border-radius: 3px;
  background: var(--c-bg-alt);
  color: var(--c-ink-mute);
  border: 1px solid var(--c-line);
}
.field__help { font-size: var(--fs-xs); color: var(--c-ink-mute); margin-bottom: var(--sp-2); }

.input, .select, .textarea {
  display: block;
  width: 100%;
  min-height: 5.2rem;
  padding: var(--sp-3) var(--sp-4);
  border: 2px solid var(--c-line);
  border-radius: var(--radius);
  background: #fff;
  font-size: var(--fs-md);
  line-height: 1.6;
  transition: border-color .15s ease;
}
.input:hover, .select:hover, .textarea:hover { border-color: #c3ccd6; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--c-brand); outline: none; }
.textarea { min-height: 12rem; resize: vertical; padding-block: var(--sp-3); }
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-ink-soft) 50%),
                    linear-gradient(135deg, var(--c-ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 4.4rem;
}

.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--c-ng);
  background: #fffafa;
}

.field__error {
  display: none;
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ng);
}
.field__error.is-shown { display: block; }

/* honeypot */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* 同意 */
.consent {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.consent .choice { border: none; padding: 0; background: none; }
.consent .choice:hover { background: none; }
.consent .choice:has(input:checked) { background: none; }

/* フォームナビ */
.formNav {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.formNav .btn--primary { flex: 1; }
.formNav__back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 5.2rem;
  padding-inline: var(--sp-4);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--c-ink-mute);
  border-radius: 999px;
}
.formNav__back:hover { color: var(--c-brand); background: var(--c-bg-alt); }

.formError {
  display: none;
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--radius);
  background: var(--c-ng-pale);
  border: 1px solid rgba(154,59,59,.3);
  color: var(--c-ng);
  font-size: var(--fs-base);
  font-weight: 600;
}
.formError.is-shown { display: block; }

.formFoot {
  margin-top: var(--sp-5);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--c-ink-mute);
}

/* 結果画面（完了・終了） */
.result { text-align: center; padding-block: var(--sp-5) var(--sp-4); }
.result__icon {
  width: 6.4rem; height: 6.4rem;
  margin: 0 auto var(--sp-4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xl);
  color: #fff;
}
.result--done .result__icon { background: var(--c-ok); }
.result--closed .result__icon { background: var(--c-ink-mute); }
.result__title { font-size: var(--fs-xl); color: var(--c-brand-dark); margin-bottom: var(--sp-4); }
@media (min-width: 768px) { .result__title { font-size: var(--fs-2xl); } }
.result__text { font-size: var(--fs-base); color: var(--c-ink-soft); line-height: 1.9; }
.result__text + .result__text { margin-top: var(--sp-3); }
.result__actions { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; }
@media (min-width: 768px) { .result__actions { flex-direction: row; justify-content: center; } }

.formIntro { margin-bottom: var(--sp-5); }
.formIntro__title { font-size: var(--fs-2xl); color: var(--c-brand-dark); }
@media (min-width: 768px) { .formIntro__title { font-size: var(--fs-3xl); } }
.formIntro__lead { margin-top: var(--sp-3); color: var(--c-ink-soft); font-size: var(--fs-base); }

.formMeta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
}
.formMeta li { display: flex; align-items: center; gap: var(--sp-1); }
.formMeta li::before { content: "✓"; color: var(--c-ok); font-weight: 700; }

/* =========================================================
   9. 記事 (guide)
   ========================================================= */
.pageHead {
  background: var(--c-brand-pale);
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--c-line);
}
@media (min-width: 768px) { .pageHead { padding-block: var(--sp-7); } }
.pageHead__title { font-size: var(--fs-2xl); color: var(--c-brand-dark); }
@media (min-width: 768px) { .pageHead__title { font-size: var(--fs-3xl); } }
.pageHead__lead { margin-top: var(--sp-3); color: var(--c-ink-soft); max-width: 68rem; }

.breadcrumb {
  padding-block: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-ink-mute);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.breadcrumb li:not(:last-child)::after { content: "›"; margin-left: var(--sp-2); color: var(--c-line); }
.breadcrumb a { color: var(--c-ink-mute); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-brand); text-decoration: underline; }

/* 記事一覧 */
.guideCluster { margin-bottom: var(--sp-7); }
.guideCluster__head { margin-bottom: var(--sp-4); }
.guideCluster__title {
  font-size: var(--fs-lg);
  color: var(--c-brand-dark);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--c-brand);
  display: inline-block;
}
@media (min-width: 768px) { .guideCluster__title { font-size: var(--fs-xl); } }
.guideCluster__desc { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--c-ink-mute); }

.articleList { display: grid; gap: var(--sp-3); }
@media (min-width: 768px) { .articleList { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); } }

.articleCard {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--sp-4);
  text-decoration: none;
  color: var(--c-ink);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.articleCard:hover { border-color: var(--c-brand-light); box-shadow: var(--shadow-sm); color: var(--c-ink); }
.articleCard__tag {
  align-self: flex-start;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-brand-light);
  background: var(--c-brand-pale);
  border-radius: 3px;
  padding: .2rem .8rem;
}
.articleCard__title { font-size: var(--fs-md); font-weight: 700; line-height: 1.6; }
.articleCard__desc { font-size: var(--fs-sm); color: var(--c-ink-mute); line-height: 1.7; }

.articleCard--pillar {
  border-color: var(--c-brand);
  border-width: 2px;
  background: linear-gradient(180deg, #fff 0%, var(--c-brand-pale) 100%);
}
@media (min-width: 768px) { .articleCard--pillar { grid-column: 1 / -1; } }
.articleCard--pillar .articleCard__title { font-size: var(--fs-lg); }

/* 記事本文 */
.articleLayout { display: block; }
@media (min-width: 1024px) {
  .articleLayout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28rem;
    gap: var(--sp-7);
    align-items: start;
  }
}

.article { max-width: 72rem; }
.article__header { padding-bottom: var(--sp-5); border-bottom: 1px solid var(--c-line); margin-bottom: var(--sp-6); }
.article__title { font-size: var(--fs-2xl); line-height: 1.45; color: var(--c-brand-dark); }
@media (min-width: 768px) { .article__title { font-size: var(--fs-3xl); } }
.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--c-ink-mute);
}
.article__summary {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: var(--c-brand-pale);
  border-radius: var(--radius);
  font-size: var(--fs-base);
  line-height: 1.9;
}

.article__body { font-size: var(--fs-base); line-height: 1.95; }
@media (min-width: 768px) { .article__body { font-size: var(--fs-md); } }

.article__body h2 {
  font-size: var(--fs-xl);
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-4);
  padding-left: var(--sp-3);
  border-left: 4px solid var(--c-brand);
  color: var(--c-brand-dark);
  scroll-margin-top: calc(var(--header-h) + 2rem);
}
.article__body h3 {
  font-size: var(--fs-lg);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
  color: var(--c-ink);
  scroll-margin-top: calc(var(--header-h) + 2rem);
}
.article__body p { margin-bottom: var(--sp-4); }
.article__body ul, .article__body ol { margin-bottom: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.article__body ul li { position: relative; padding-left: 2rem; }
.article__body ul li::before {
  content: "";
  position: absolute; left: .4rem; top: .85em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-brand-light);
}
.article__body ol { counter-reset: ol; }
.article__body ol li { position: relative; padding-left: 3rem; counter-increment: ol; }
.article__body ol li::before {
  content: counter(ol);
  position: absolute; left: 0; top: .25em;
  width: 2.2rem; height: 2.2rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-brand); color: #fff;
  border-radius: 50%;
  font-family: var(--ff-num);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.article__body table {
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm);
  border: 1px solid var(--c-line);
}
.article__body th, .article__body td {
  padding: var(--sp-3);
  border: 1px solid var(--c-line);
  text-align: left;
  vertical-align: top;
}
.article__body th { background: var(--c-bg-alt); font-weight: 700; white-space: nowrap; }

.tableScroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--sp-5); }
.tableScroll table { margin-bottom: 0; }

/* 狭い画面では表が横に溢れるため、スクロールできることを明示する */
@media (max-width: 767px) {
  .tableScroll { margin-bottom: var(--sp-2); }
  .tableScroll + .tableScroll__hint { display: block; }
}
.tableScroll__hint {
  display: none;
  margin-bottom: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--c-ink-mute);
}

/* 公式リンク */
.officialLink {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin: var(--sp-4) 0 var(--sp-5);
  padding: var(--sp-4);
  background: var(--c-bg-alt);
  border-left: 3px solid var(--c-brand-light);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--fs-sm);
}
.officialLink__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c-ink-mute);
}
.officialLink a { font-weight: 600; word-break: break-all; }

/* 注意書き */
.callout {
  margin: var(--sp-5) 0;
  padding: var(--sp-4);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  line-height: 1.85;
}
.callout--note { background: var(--c-accent-pale); border: 1px solid rgba(217,98,46,.25); }
.callout--info { background: var(--c-brand-pale); border: 1px solid rgba(18,58,94,.16); }
.callout__title { display: block; font-weight: 700; margin-bottom: var(--sp-2); color: var(--c-ink); }

/* 免責 */
.disclaimer {
  margin-top: var(--sp-7);
  padding: var(--sp-5);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  line-height: 1.9;
}
.disclaimer__title { display: block; font-weight: 700; color: var(--c-ink); margin-bottom: var(--sp-2); }

/* 目次 */
.toc {
  margin: var(--sp-5) 0 var(--sp-6);
  padding: var(--sp-5);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
}
.toc__title {
  font-size: var(--fs-md);
  margin-bottom: var(--sp-3);
  color: var(--c-brand-dark);
}
.toc__list { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); }
.toc__list a { color: var(--c-ink-soft); text-decoration: none; }
.toc__list a:hover { color: var(--c-brand); text-decoration: underline; }
.toc__list li { position: relative; padding-left: 1.8rem; }
.toc__list li::before {
  content: "";
  position: absolute; left: 0; top: .85em;
  width: 8px; height: 2px;
  background: var(--c-brand-light);
}

/* サイドバー */
.aside { display: none; }
@media (min-width: 1024px) {
  .aside { display: block; position: sticky; top: calc(var(--header-h) + 2rem); }
}
.asideBox {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
}
.asideBox--cta {
  background: linear-gradient(160deg, var(--c-brand-dark), var(--c-brand));
  border: none;
  color: #fff;
  text-align: center;
}
.asideBox--cta .asideBox__title { color: #fff; }
.asideBox--cta p { font-size: var(--fs-sm); color: rgba(255,255,255,.85); margin-bottom: var(--sp-4); }
.asideBox__title { font-size: var(--fs-md); margin-bottom: var(--sp-3); color: var(--c-brand-dark); }
.asideBox__list { display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-sm); }
.asideBox__list a { color: var(--c-ink-soft); text-decoration: none; line-height: 1.6; }
.asideBox__list a:hover { color: var(--c-brand); text-decoration: underline; }

/* 関連記事 */
.related { margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid var(--c-line); }
.related__title { font-size: var(--fs-lg); margin-bottom: var(--sp-4); color: var(--c-brand-dark); }

/* 記事内CTA */
.inlineCta {
  margin: var(--sp-6) 0;
  padding: var(--sp-5);
  background: linear-gradient(140deg, var(--c-brand-dark), var(--c-brand));
  color: #fff;
  border-radius: var(--radius-lg);
  text-align: center;
}
.inlineCta__title { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.inlineCta p { font-size: var(--fs-sm); color: rgba(255,255,255,.86); margin-bottom: var(--sp-4); }

/* =========================================================
   10. 法務・会社情報ページ
   ========================================================= */
.doc { max-width: 84rem; margin-inline: auto; font-size: var(--fs-base); line-height: 1.95; }
.doc h2 {
  font-size: var(--fs-lg);
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-line);
  color: var(--c-brand-dark);
}
@media (min-width: 768px) { .doc h2 { font-size: var(--fs-xl); } }
.doc h3 { font-size: var(--fs-md); margin-top: var(--sp-5); margin-bottom: var(--sp-3); }
.doc p { margin-bottom: var(--sp-4); }
.doc ul, .doc ol { margin-bottom: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.doc ul li { position: relative; padding-left: 1.8rem; }
.doc ul li::before {
  content: "";
  position: absolute; left: .3rem; top: .85em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-brand-light);
}
.doc ol { counter-reset: docol; }
.doc ol li { position: relative; padding-left: 2.6rem; counter-increment: docol; }
.doc ol li::before {
  content: "(" counter(docol) ")";
  position: absolute; left: 0; top: 0;
  color: var(--c-brand-light);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.doc__updated { font-size: var(--fs-sm); color: var(--c-ink-mute); margin-bottom: var(--sp-5); }

/* 会社概要テーブル */
.infoTable { font-size: var(--fs-base); border-top: 1px solid var(--c-line); }
.infoTable tr { border-bottom: 1px solid var(--c-line); }
.infoTable th, .infoTable td { padding: var(--sp-4) var(--sp-3); text-align: left; vertical-align: top; }
.infoTable th {
  width: 100%;
  display: block;
  color: var(--c-ink-mute);
  font-size: var(--fs-sm);
  padding-bottom: 0;
}
.infoTable td { display: block; padding-top: var(--sp-2); }
@media (min-width: 768px) {
  .infoTable th { display: table-cell; width: 24rem; background: var(--c-bg-alt); padding: var(--sp-4); font-size: var(--fs-base); }
  .infoTable td { display: table-cell; padding: var(--sp-4); }
}

.pendingMark {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-ink-mute);
  background: var(--c-bg-alt);
  border: 1px dashed var(--c-line);
  border-radius: 3px;
  padding: .1rem .8rem;
}

.feeNote {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: var(--c-ok-pale);
  border: 1px solid rgba(28,122,85,.28);
  border-radius: var(--radius);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--c-ok);
}

/* =========================================================
   11. ユーティリティ
   ========================================================= */
.tac { text-align: center; }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mb-0 { margin-bottom: 0; }
.txt-sm { font-size: var(--fs-sm); }
.txt-mute { color: var(--c-ink-mute); }