html{scroll-behavior:smooth;scroll-margin-top: 100px;}
body{font-family:'Noto Sans JP',sans-serif;background:#fff;color:#111;padding-top:56px;}
@media (min-width: 768px) { body { padding-top: 96px; } }
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s}
.reveal.on{opacity:1;transform:none}
#mnav{max-height:0;overflow:hidden;transition:max-height .3s ease}
#mnav.open{max-height:360px}
.nl{position:relative}
.nl::after{content:'';position:absolute;bottom:-1px;left:0;width:0;height:2px;background:#0f2050;transition:width .2s}
.nl:hover::after{width:100%}
.fi{width:100%;border:1px solid #d1d5db;border-radius:6px;padding:11px 13px;font-size:1rem;outline:none;transition:border .2s;background:#fff;color:#111}
.fi:focus{border-color:#0f2050}
.fi::placeholder{color:#9ca3af}
.fi option{color:#111}
.rl{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;font-size:.875rem;transition:border .15s,background .15s}
.rl:has(input:checked){border-color:#0f2050;background:#e8eef8;font-weight:700}
#site-header { transition: transform .3s ease; }
#site-header.hidden-header { transform: translateY(-100%); }
#st{opacity:0;pointer-events:none;transition:opacity .3s}
#st.on{opacity:1;pointer-events:auto}
/* =============================================
   見出し 3段階
   H1 — ページタイトル（各ページに1つ）
     <div class="pg-heading">
       <p class="pg-heading__en">English Label</p>
       <h1 class="pg-heading__ja">日本語タイトル</h1>
       <p class="pg-heading__sub">サブテキスト（任意）</p>
     </div>

   H2 — セクション見出し
     <h2 class="sec-heading">セクション名</h2>

   H3 — 小見出し・カード見出し
     <h3 class="sub-heading">小見出し</h3>
============================================= */
/* H1：ページタイトル */
.pg-heading { margin-bottom: 3rem; }
.pg-heading__en {
  font-size: .7rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: #9ca3af; margin-bottom: .4rem;
}
.pg-heading__ja {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 900; color: #0f2050; line-height: 1.25;
}
.pg-heading__sub {
  margin-top: .5rem; font-size: .875rem; color: #6b7280; line-height: 1.6;
}

/* H2：セクション見出し */
.sec-heading {
  font-size: clamp(1.1rem, 2.5vw, 1.375rem);
  font-weight: 700; color: #0f2050;
  padding-bottom: .6rem;
  border-bottom: 2px solid #e8eef8;
  margin-bottom: 1.25rem;
}

/* H3：小見出し */
.sub-heading {
  font-size: 1rem; font-weight: 700; color: #1e3f75;
  padding-left: .75rem;
  border-left: 3px solid #0f2050;
  margin-bottom: .75rem;
}

/* ── パンくずリスト ── */
.breadcrumb { display:flex; flex-wrap:wrap; gap:.25rem; align-items:center; font-size:.8rem; color:#9ca3af; margin-bottom:2rem; }
.breadcrumb a { color:#6b7280; text-decoration:none; }
.breadcrumb a:hover { color:#0f2050; text-decoration:underline; }
.breadcrumb__sep { color:#d1d5db; }

/* ── 本文テキスト ── */
.prose-js p { font-size: .9375rem; line-height: 1.85; color: #374151; margin-bottom: 1em; }
.prose-js ul { list-style: none; padding: 0; margin-bottom: 1em; }
.prose-js ul li { font-size: .9375rem; line-height: 1.85; color: #374151; padding-left: 1.2em; position: relative; }
.prose-js ul li::before { content:'・'; position:absolute; left:0; color:#0f2050; }
.prose-js ol { counter-reset: item; padding:0; margin-bottom:1em; }
.prose-js ol li { counter-increment: item; font-size:.9375rem; line-height:1.85; color:#374151; padding-left:1.8em; position:relative; }
.prose-js ol li::before { content:counter(item); position:absolute; left:0; top:.05em; width:1.4em; height:1.4em; background:#0f2050; color:#fff; font-size:.75rem; font-weight:700; border-radius:50%; display:flex; align-items:center; justify-content:center; }

/* ── 汎用カード ── */
.card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; transition:border-color .2s; }
.card:hover { border-color:#0f2050; }

@keyframes paleFlowAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero-pale-flow {
  /* 薄いネイビー、ソフトなオレンジ（アプリコット）、少し明るめのグレーブルー、白をミックス */
  background: linear-gradient(-45deg, #dce5ee, #fbe7d5, #eef3f8, #fff6ee);
  
  /* 背景を4倍に引き延ばして、色の移動距離を大きくします */
  background-size: 400% 400% !important;
  
  /* 8秒周期にスピードアップ。これで「じわじわ」から「なめらかな流動」へ変わります */
  animation: paleFlowAnimation 8s ease infinite !important;
}