/* トップページ（index.html）専用。thanks-page.html は従来どおり css/styles.css を使う。
   書体: ロゴ（.hero__logo）だけ Zen Kurenaido、それ以外はすべて Noto Sans JP。
   色: 墨 #1a1a1a、本文 #333、構造色 濃紺 #1b2a41。朱 #D45B3E はロゴの丸のみ。 */

:root {
  --ink: #1a1a1a;
  --text: #333;
  --sub: #5a6270;
  --rule: #dfe3e8;
  --rule-strong: #c9cfd7;
  --tint: #f5f7f9;
  --navy: #1b2a41;
  --navy-dark: #111c2e;
  --link: #1f4a7a;
  --font: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif;
  --font-logo: 'Zen Kurenaido', serif;
  --header-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.03em;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

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

.sub { color: var(--sub); font-size: 14px; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }

section[id] { scroll-margin-top: var(--header-h); }

/* ---- header ---- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.site-header__brand {
  color: var(--navy); text-decoration: none;
  font-size: 16px; font-weight: 700; letter-spacing: 0.08em; white-space: nowrap;
}
.site-nav { display: flex; gap: 32px; }
.site-nav a {
  color: var(--text); text-decoration: none;
  font-size: 14px; font-weight: 500; letter-spacing: 0.08em; white-space: nowrap;
  padding: 4px 0; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--navy); border-bottom-color: var(--navy); }

/* ---- hero（ロゴ＋事実の1行） ---- */
.hero {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 28px;
  padding: 88px 24px 80px;
  border-bottom: 1px solid var(--rule);
}
.hero__logo {
  display: flex; align-items: center; gap: 4px; margin: 0;
  font-family: var(--font-logo); font-weight: 400; white-space: nowrap;
}
.hero__mark { width: 72px; height: 72px; flex-shrink: 0; }
.hero__rest { color: var(--ink); font-size: 30px; letter-spacing: -0.01em; line-height: 1; }
.hero__meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 20px;
  margin: 0; color: var(--sub); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-align: center;
}
.hero__en { margin-left: 12px; font-weight: 400; letter-spacing: 0.06em; }
.hero__sep { width: 1px; height: 14px; background: var(--rule-strong); }

/* ---- sections ---- */
.section { padding: 88px 0; }
.section--tint { background: var(--tint); }
.section__head { margin: 0 0 40px; }
.section__eyebrow {
  margin: 0 0 6px;
  color: var(--navy); font-size: 12px; font-weight: 700; letter-spacing: 0.24em; line-height: 1.4;
}
.section__title {
  margin: 0;
  color: var(--ink); font-size: 26px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.5;
}

/* ---- 事業内容（2事業を同じ重さで並べる） ---- */
.business { display: grid; grid-template-columns: 1fr; gap: 24px; }
.business__item {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--rule);
  border-top: 4px solid var(--navy);
  padding: 32px 28px 28px;
}
.business__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.business__num { color: var(--navy); font-size: 15px; font-weight: 700; letter-spacing: 0.1em; }
.business__title { margin: 0; color: var(--ink); font-size: 22px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.5; }
.business__desc { margin: 0 0 28px; color: var(--text); font-size: 16px; line-height: 1.9; }
.business__links { list-style: none; margin: auto 0 0; padding: 0; display: grid; grid-auto-rows: 1fr; gap: 10px; }
.business__links a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 72px; padding: 12px 18px;
  border: 1px solid var(--rule-strong); background: #fff;
  color: var(--ink); text-decoration: none;
  transition: background-color .15s, color .15s, border-color .15s;
}
.business__links a:hover, .business__links a:focus-visible {
  background: var(--navy); border-color: var(--navy); color: #fff; outline: none;
}
.business__link-name { font-size: 16px; font-weight: 500; letter-spacing: 0.04em; line-height: 1.5; }
.business__links li { display: flex; }
.business__links li > a { flex: 1; }
.business__link-suffix { font-size: 80%; white-space: nowrap; }
.business__link-name small { display: block; margin-top: 2px; color: var(--sub); font-size: 13px; font-weight: 400; letter-spacing: 0.04em; }
.business__links a:hover small, .business__links a:focus-visible small { color: #d5dbe4; }
.business__link-arrow { color: var(--navy); font-size: 16px; }
.business__links a:hover .business__link-arrow, .business__links a:focus-visible .business__link-arrow { color: #fff; }

/* ---- 会社情報 ---- */
.company { margin: 0; background: #fff; border: 1px solid var(--rule); border-top: 2px solid var(--navy); }
.company__row {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  padding: 20px 24px; border-bottom: 1px solid var(--rule);
}
.company__row:last-child { border-bottom: 0; }
.company dt { color: var(--navy); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; }
.company dd { margin: 0; color: var(--text); font-size: 16px; line-height: 1.9; }

/* ---- お問い合わせフォーム（見た目のみ。name/value/required 等は触らない） ---- */
.notice { color: #c00; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 0 48px; }
.field { margin-bottom: 24px; }
.field label, .field__label {
  display: block; margin-bottom: 8px;
  color: var(--ink); font-size: 15px; font-weight: 500; letter-spacing: 0.04em;
}
.req {
  display: inline-block; margin-left: 8px; padding: 0 7px;
  background: var(--navy); color: #fff;
  font-size: 11px; font-weight: 500; line-height: 1.8; letter-spacing: 0.06em; vertical-align: 1px;
}
.input {
  display: block; width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule-strong); border-radius: 2px; background: #fff;
  color: var(--ink); font: inherit; font-size: 16px; line-height: 1.6;
}
.input::placeholder { color: #9aa1ab; }
.input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(27, 42, 65, 0.12); }
select.input { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, #5a6270 50%), linear-gradient(135deg, #5a6270 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%;
  background-size: 5px 5px; background-repeat: no-repeat; }
.input--textarea { min-height: 220px; resize: vertical; }
.radios { display: flex; flex-direction: column; gap: 6px; }
.field .radio { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; font-weight: 400; color: var(--text); cursor: pointer; }
.radio input { accent-color: var(--navy); width: 17px; height: 17px; margin: 0; }
.field__note { margin: 10px 0 0; color: var(--sub); font-size: 14px; line-height: 1.8; }

.consent { margin: 16px 0 32px; text-align: center; }
.consent__label { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.consent__label input { accent-color: var(--navy); width: 17px; height: 17px; margin: 0; }
.consent__label a { color: var(--link); }

.submit { text-align: center; }
.btn {
  display: inline-block; min-width: 260px;
  padding: 16px 40px;
  border: 1px solid var(--navy); border-radius: 2px; background: var(--navy); color: #fff;
  font: inherit; font-size: 16px; font-weight: 700; letter-spacing: 0.16em; cursor: pointer;
  transition: background-color .15s;
}
.btn:hover, .btn:focus-visible { background: var(--navy-dark); }
.btn--ghost { min-width: 0; padding: 10px 28px; background: #fff; color: var(--navy); font-weight: 500; }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--tint); }

/* ---- footer ---- */
.site-footer { padding: 32px 0; background: var(--navy); color: #fff; }
.site-footer__inner { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.site-footer__copy { margin: 0; color: #fff; font-size: 13px; letter-spacing: 0.08em; }
.site-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; }
.site-footer__nav a { color: #d5dbe4; font-size: 13px; text-decoration: none; letter-spacing: 0.04em; }
.site-footer__nav a:hover { color: #fff; text-decoration: underline; }

/* ---- 個人情報保護方針モーダル（<dialog>） ---- */
.modal {
  width: min(720px, calc(100% - 32px)); max-height: 90vh;
  padding: 0; border: 1px solid var(--rule); border-top: 4px solid var(--navy); border-radius: 0;
  color: var(--text); font-family: var(--font);
}
.modal::backdrop { background: rgba(17, 28, 46, 0.45); }
.modal__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--rule); }
.modal__title { margin: 0; color: var(--ink); font-size: 18px; font-weight: 700; }
.modal__close { border: 0; background: none; color: var(--sub); font-size: 28px; line-height: 1; cursor: pointer; }
.modal__body { padding: 24px; font-size: 15px; line-height: 1.9; }
.modal__body .mb-3 p { margin-top: 0; }
.privacy-policy dt { margin-top: 16px; color: var(--ink); font-weight: 700; }
.privacy-policy dd { margin: 4px 0 0; }
.modal__footer { padding: 12px 24px; border-top: 1px solid var(--rule); text-align: right; }

/* ---- 幅広 ---- */
@media (min-width: 768px) {
  .hero { padding: 104px 24px 88px; gap: 32px; }
  .hero__mark { width: 112px; height: 112px; }
  .hero__rest { font-size: 44px; }
  .hero__meta { font-size: 14px; }
  .section { padding: 104px 0; }
  .section__title { font-size: 30px; }
  .business { grid-template-columns: 1fr 1fr; gap: 32px; }
  .business__item { padding: 36px 36px 32px; }
  .business__title { font-size: 24px; }
  .company__row { grid-template-columns: 160px 1fr; gap: 32px; padding: 22px 32px; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .site-footer__inner { flex-direction: row; justify-content: space-between; }
}

@media (min-width: 1024px) {
  .hero__mark { width: 128px; height: 128px; }
  .hero__rest { font-size: 50px; }
}

/* 狭い画面ではヘッダーのブランド表記を省き、ナビだけにする */
@media (max-width: 420px) {
  .site-header__brand { display: none; }
  .site-header__inner { justify-content: center; }
  .site-nav { gap: 24px; }
  .hero__sep { display: none; }
  .hero__meta { flex-direction: column; }
  .hero__en { display: block; margin-left: 0; }
  .business__item { padding: 28px 20px 20px; }
  .business__links a { padding: 12px 14px; gap: 10px; }
  .business__link-name { font-size: 15px; }
  .business__link-name small { font-size: 12px; letter-spacing: 0.02em; }
}

/* 個人情報保護方針: 外部リンクと改定日 */
.privacy-policy a { color: var(--link); }
.privacy-policy__date { margin: 24px 0 0; color: var(--sub); font-size: 13px; text-align: right; }