/* ビズリス：デジタル庁デザインシステム（DADS）に準拠
   文字は Noto Sans JP、太さは 400 と 700 のみ、本文 16px・行間 170%。
   文字と背景のコントラストは 4.5:1 以上、線・図形は 3:1 以上。 */
:root {
  --navy: #1D3F91;        /* ブランド。白に対して約 10:1 */
  --navy-dark: #142C66;
  --accent: #8FBBFF;
  --text: #1A1A1A;        /* 白に対して約 17:1 */
  --text-sub: #4D4D4D;    /* 白に対して約 8:1 */
  --line: #767676;        /* 白に対して 4.5:1（線の基準 3:1 以上） */
  --bg: #FFFFFF;
  --bg-sub: #F2F4F8;
  --warn-bg: #FFF0B3;     /* 警告＝黄。必ず文字と併用 */
  --warn-text: #5C4400;
  --focus: #D14900;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: "Noto Sans JP", "Yu Gothic", "YuGothic", sans-serif;
  font-size: 16px; font-weight: 400; line-height: 1.7;
}
.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }
a { color: var(--navy); text-underline-offset: 3px; }
a:hover { color: var(--navy-dark); text-decoration-thickness: 2px; }
a:focus-visible, .button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--bg); padding: 8px 12px; z-index: 10; }

.draft-banner { background: var(--warn-bg); color: var(--warn-text); padding: 8px 16px; font-weight: 700; text-align: center; }

.site-header { border-bottom: 1px solid var(--line); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 12px; padding-bottom: 12px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); }
.logo img { display: block; width: 40px; height: 40px; }
.logo-text { font-size: 24px; font-weight: 700; letter-spacing: 0.04em; }
.site-header ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; }
.site-header nav a { text-decoration: none; font-weight: 700; padding: 8px 0; display: inline-block; }
.site-header nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; }

main { padding-top: 32px; padding-bottom: 64px; }
h1, h2, h3 { font-weight: 700; line-height: 1.4; }
h1 { font-size: 32px; margin: 0 0 24px; }
h2 { font-size: 24px; margin: 48px 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--navy); }
h3 { font-size: 20px; margin: 24px 0 8px; }
p, ul, ol { margin: 0 0 16px; }
li + li { margin-top: 4px; }

/* ---- 写真を生かした帯（ページの端から端まで） ---- */
html, body { overflow-x: clip; }
.bleed { width: 100vw; margin-left: calc(50% - 50vw); }
/* 帯で始まる・終わるページは、main の上下の余白をなくして帯をヘッダー・フッターに付ける */
main:has(> .bleed:first-child) { padding-top: 0; }
main:has(> .bleed:last-child) { padding-bottom: 0; }
.eyebrow { font-weight: 700; color: var(--navy); margin: 0 0 8px; letter-spacing: 0.06em; }

/* 写真の上に文字を載せる帯。紺の膜（不透明度 0.78）を重ね、写真の最も明るい部分（白）でも
   白い文字とのコントラストが約 7:1 になるようにする（基準 4.5:1 以上）。 */
.photo-band { position: relative; color: #FFFFFF; overflow: hidden; }
.photo-band > p { margin: 0; }
.band-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-band::after { content: ""; position: absolute; inset: 0; background: rgba(20, 44, 102, 0.78); }
.band-inner { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; padding: 64px 16px; }
.band-inner h1, .band-inner h2, .photo-band .eyebrow { color: #FFFFFF; }
.band-inner h2 { border-bottom: 0; margin-top: 0; padding-bottom: 0; }
.band-inner a:not(.button) { color: #FFFFFF; }
.band-inner p { font-size: 18px; max-width: 40em; }
.hero-band .band-inner { padding-top: 88px; padding-bottom: 96px; }
.hero-band h1 { font-size: 34px; line-height: 1.35; }
.page-band .band-inner { padding-top: 56px; padding-bottom: 56px; }
.page-band h1 { margin-bottom: 8px; }
.cta-band { text-align: center; }
.cta-band .band-inner p { margin-left: auto; margin-right: auto; }
.actions { margin-top: 24px; }

/* 写真と文字を左右に並べる帯 */
.split { display: grid; background: var(--bg-sub); margin-top: 64px; margin-bottom: 16px; }
.split > p { margin: 0; }
.split-photo { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.split-text { padding: 40px 16px; max-width: 520px; }
.split-text h2 { border-bottom: 0; margin-top: 0; }
.text-link { font-weight: 700; }

/* 通常の節 */
.section { padding-top: 48px; }
.section > h2 { border-bottom: 0; margin-top: 0; font-size: 28px; }
.card-num { font-weight: 700; color: var(--navy); font-size: 20px; margin: 0 0 4px; letter-spacing: 0.08em; }

@media (min-width: 768px) {
  .hero-band h1 { font-size: 48px; }
  .hero-band .band-inner { padding-top: 120px; padding-bottom: 128px; }
  .split { grid-template-columns: 1fr 1fr; }
  .split-text { padding: 64px 48px; align-self: center; }
  .section { padding-top: 72px; }
  .section > h2 { font-size: 32px; }
}

/* スクロールで現れる動き（JavaScript が有効で、動きを減らす設定でない場合だけ） */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .js .reveal.is-visible { opacity: 1; transform: none; }
}

.button {
  display: inline-block; background: var(--navy); color: #FFFFFF; font-weight: 700;
  text-decoration: none; padding: 12px 24px; border-radius: 8px; border: 2px solid var(--navy); margin: 4px 8px 4px 0;
}
.button:hover { background: var(--navy-dark); border-color: var(--navy-dark); color: #FFFFFF; }
.button-secondary { background: var(--bg); color: var(--navy); }
.button-secondary:hover { background: var(--bg-sub); color: var(--navy-dark); }
/* 写真の帯の上のボタン：白地に紺の文字（主）と、白い枠線（副） */
.button-light { background: #FFFFFF; color: var(--navy); border-color: #FFFFFF; }
.button-light:hover { background: #E8EEFA; border-color: #E8EEFA; color: var(--navy-dark); }
.button-ghost { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
.button-ghost:hover { background: rgba(255, 255, 255, 0.15); color: #FFFFFF; }
.photo-band .button:focus-visible { outline-color: #FFFFFF; }

.cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
.card { border: 1px solid var(--line); border-radius: 12px; padding: 24px; background: var(--bg); }
.card h3 { margin-top: 0; }
@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  h1 { font-size: 40px; }
}

/* 表：DADS の table の規定（見出しは太字、見出しと本体を明確な線で区切る、上寄せ、結合なし） */
.table-scroll { overflow-x: auto; margin: 0 0 24px; }
table { border-collapse: collapse; width: 100%; line-height: 1.5; }
th, td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; vertical-align: top; }
thead th { font-weight: 700; background: var(--bg-sub); border-bottom: 3px solid var(--text); }
th:first-child, td:first-child { min-width: 7.5em; }   /* 1列目の見出し語が細切れにならないように。はみ出す分は表の枠内で横スクロール */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* フォーム：ラベルは太字、必須・任意は文字で示す（色だけにしない）、エラーは赤＋「エラー：」の文字 */
.bz-form { max-width: 640px; margin-top: 24px; }
.field { border: 0; margin: 0 0 24px; padding: 0; min-width: 0; }
.field > label:not(.choice), .field > legend { display: block; font-weight: 700; margin-bottom: 8px; padding: 0; }
.req, .opt { display: inline-block; font-size: 14px; font-weight: 700; line-height: 1; padding: 4px 6px; border-radius: 4px; margin-left: 6px; vertical-align: 2px; }
.req { background: #FDE8E8; color: #A3160F; }
.opt { background: var(--bg-sub); color: var(--text-sub); }
.hint { color: var(--text-sub); margin: -4px 0 8px; }
.bz-form input[type=text], .bz-form input[type=email], .bz-form input[type=tel], .bz-form textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
}
.bz-form input:focus-visible, .bz-form textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.choice { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; font-weight: 400; cursor: pointer; }
.choice input { width: 20px; height: 20px; margin-top: 4px; flex: none; accent-color: var(--navy); }
[aria-invalid="true"] { border-color: #C0120B !important; border-width: 2px !important; }
.error { color: #A3160F; font-weight: 700; margin: 0 0 8px; }
.bz-form button[disabled] { opacity: 0.6; cursor: wait; }
.form-result { margin-top: 16px; }
.form-result.success { background: #E6F4EA; color: #0B5A2A; border: 1px solid #1E7B3C; border-radius: 8px; padding: 16px; font-weight: 700; }
.form-result.failure { background: #FDE8E8; color: #A3160F; border: 1px solid #C0120B; border-radius: 8px; padding: 16px; font-weight: 700; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.site-footer { border-top: 1px solid var(--line); background: var(--bg-sub); padding: 24px 0; color: var(--text-sub); }
.footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 0; }
.footer-links li + li { margin-top: 0; }
.notice { border-left: 6px solid var(--navy); background: var(--bg-sub); padding: 16px 20px; margin: 24px 0; }