/* ==========================================================================
   LIVARECIA サイト共通スタイル
   ・色や文字の大きさは、最初の「1. 色と基本の値」でまとめて変えられます。
   ・見出しやボタンなどの部品ごとに、下の番号つきの見出しで区切っています。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 色と基本の値（ここを変えると、サイト全体に反映されます）
   -------------------------------------------------------------------------- */
:root {
  --navy: #17324d;      /* ネイビー：見出し・ロゴ・ボタン */
  --teal: #168c87;      /* ティール：英字の小見出し・番号・アクセント */
  --ink: #1f2b37;       /* 本文の文字色 */
  --muted: #5e6a76;     /* 補足の文字色 */
  --line: #e1e6ea;      /* 区切り線 */
  --tint: #f4f6f7;      /* 薄いグレーの背景 */
  --white: #ffffff;

  --font: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --radius: 4px;
  --gutter: clamp(24px, 6vw, 96px);   /* 画面の左右の余白 */

  /* 上に固定されるヘッダーの高さ。実際の高さは main.js が測って上書きします。 */
  --header-h: 57px;
  --sticky-h: 57px;
}

/* --------------------------------------------------------------------------
   2. 基本
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.no-motion { scroll-behavior: auto; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  letter-spacing: 0.03em;
  font-size: 16px;
  line-height: 2;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--navy); }
a:hover { color: var(--teal); }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ページ内リンクで移動したとき、固定ヘッダーの下に見出しが隠れないようにします */
[id] { scroll-margin-top: calc(var(--sticky-h) + 12px); }

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

/* --------------------------------------------------------------------------
   3. レイアウト
   -------------------------------------------------------------------------- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.container--narrow { max-width: 880px; }

.section { padding-top: 96px; padding-bottom: 96px; }
.section--tint { background: var(--tint); }
.section--sm { padding-top: 80px; padding-bottom: 80px; }

/* 縦に積む（間隔は数字で選びます） */
.stack { display: flex; flex-direction: column; gap: 24px; }
.stack-8 { display: flex; flex-direction: column; gap: 8px; }
.stack-12 { display: flex; flex-direction: column; gap: 12px; }
.stack-16 { display: flex; flex-direction: column; gap: 16px; }
.stack-32 { display: flex; flex-direction: column; gap: 32px; }

/* 自動で折り返すカードの並び */
.grid { display: grid; gap: 16px; }
.grid--240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px 72px; align-items: start; }

.measure { max-width: 38em; }

/* --------------------------------------------------------------------------
   4. 文字
   -------------------------------------------------------------------------- */
/* 英字の小見出し（SERVICE など） */
.eyebrow {
  font-size: 12px; line-height: 1.6; font-weight: 500;
  letter-spacing: 0.2em; color: var(--teal);
}
.page-title {
  font-size: clamp(28px, 3vw + 14px, 40px); line-height: 1.5;
  font-weight: 500; letter-spacing: 0.06em; color: var(--navy);
}
.page-title--sm { font-size: clamp(26px, 3vw + 14px, 36px); }
.section-title {
  font-size: clamp(22px, 2vw + 14px, 28px); line-height: 1.6;
  font-weight: 500; letter-spacing: 0.06em; color: var(--navy);
}
.sub-title { font-size: 20px; line-height: 1.6; font-weight: 500; letter-spacing: 0.04em; color: var(--navy); }
.lead { font-size: clamp(18px, 1vw + 14px, 20px); line-height: 1.8; font-weight: 700; color: var(--navy); }
.english { font-size: 14px; line-height: 1.6; letter-spacing: 0.06em; color: var(--muted); }
.note { font-size: 13px; line-height: 1.8; color: var(--muted); }
.text-sm { font-size: 15px; }
.num { font-size: 24px; line-height: 1.4; font-weight: 500; color: var(--teal); }
.num--lg { font-size: 40px; line-height: 1.2; letter-spacing: 0.04em; }

.list { padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.8; }

/* --------------------------------------------------------------------------
   5. ボタン
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  border-radius: var(--radius); border: 1px solid var(--navy);
  font-size: 15px; font-weight: 500; line-height: 1.4; text-decoration: none;
}
.btn--primary { background: var(--navy); color: var(--white); }
.btn--primary:hover { color: var(--white); background: #10263b; }
.btn--outline { background: var(--white); color: var(--navy); }
.btn--lg { min-height: 52px; padding: 0 32px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* 矢印つきのテキストリンク */
.arrow-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 15px; font-weight: 500; text-decoration: none;
}
.arw { flex-shrink: 0; transition: transform .25s ease; }
.arrow-link:hover .arw, .card-link:hover .arw, .service-card:hover .arw { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. ヘッダー
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--white); border-bottom: 1px solid var(--line);
}
.site-header__inner {
  max-width: 1200px; margin: 0 auto;
  padding: 6px clamp(12px, 4vw, 40px);
  display: flex; align-items: center; gap: clamp(8px, 2vw, 32px);
}
.site-header__logo { display: flex; padding: 7px; flex-shrink: 0; }
.site-header__logo img { height: 30px; width: auto; }

.gnav {
  display: flex; align-items: center; gap: clamp(2px, 2vw, 28px); min-width: 0;
  font-size: clamp(13px, 0.4vw + 11.5px, 15px); font-weight: 500; white-space: nowrap;
}
.gnav a {
  display: flex; align-items: center; min-height: 44px;
  padding: 0 clamp(4px, 1vw, 8px); color: var(--navy); text-decoration: none; line-height: 1.4;
}
.gnav a:hover, .gnav a[aria-current="page"] { color: var(--teal); }

.site-header__tools { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.site-header__cta { display: none; min-height: 44px; padding: 0 20px; font-size: 14px; }

/* 画面の動きのオン・オフ切り替え */
.motion-switch {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 0 4px;
  border: 0; background: transparent; cursor: pointer;
  font-size: 12px; color: var(--muted);
}
.motion-switch__label { display: none; }
.motion-switch__track {
  width: 32px; height: 18px; border-radius: 9px; padding: 2px;
  background: var(--navy); display: flex; justify-content: flex-end;
}
.motion-switch__knob { width: 14px; height: 14px; border-radius: 7px; background: var(--white); }
.no-motion .motion-switch__track { background: var(--line); justify-content: flex-start; }

/* 幅の狭いスマホでは、メニューを短くして（私たちのサービス → サービス）重なりを防ぎます */
@media (max-width: 430px) {
  .nav-wide { display: none; }
}
@media (min-width: 960px) {
  .site-header__cta { display: inline-flex; }
  .motion-switch__label { display: inline; }
}

/* --------------------------------------------------------------------------
   7. フッター
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy); color: var(--white); }
.site-footer a { color: var(--white); }
.site-footer__inner { padding-top: 64px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 40px; }
.site-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; }
.site-footer__logo img { width: 280px; height: auto; }

.sns { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sns a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--white); border-radius: var(--radius);
  font-size: 14px; line-height: 1.4; text-decoration: none;
}

.footer-nav {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 32px 24px;
  padding-top: 40px; border-top: 1px solid var(--teal);
}
.footer-nav__group { display: flex; flex-direction: column; gap: 4px; }
.footer-nav__group a { display: flex; align-items: center; text-decoration: none; line-height: 1.5; }
.footer-nav__title { min-height: 44px; font-size: 15px; font-weight: 500; }
.footer-nav__group a:not(.footer-nav__title) { min-height: 36px; font-size: 13px; }

.site-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px;
  padding-top: 24px; border-top: 1px solid var(--teal);
}
.policy-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
.policy-links a { display: flex; align-items: center; min-height: 44px; font-size: 13px; line-height: 1.5; }
.copyright { font-size: 12px; letter-spacing: 0.08em; }

/* --------------------------------------------------------------------------
   8. 下層ページの見出しエリアとパンくず
   -------------------------------------------------------------------------- */
.page-hero { background: var(--tint); padding-top: 24px; padding-bottom: 56px; }
.page-hero .stack-16 > .eyebrow { margin-top: 16px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.breadcrumb a { display: flex; align-items: center; min-height: 44px; color: var(--muted); }

/* ページ内の移動ボタン（会社情報） */
.page-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.page-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  background: var(--white); border-radius: var(--radius);
  font-size: 14px; line-height: 1.4; text-decoration: none;
}

.policy-dates { font-size: 12px; letter-spacing: 0.08em; color: var(--muted); }

/* --------------------------------------------------------------------------
   9. 開閉する部品（details）
   -------------------------------------------------------------------------- */
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
.chev { flex-shrink: 0; transition: transform .2s ease; }
details[open] > summary .chev { transform: rotate(180deg); }

/* 白い箱の開閉（トップの「誰のどんな困りごと」） */
.accordion { background: var(--white); border-radius: var(--radius); padding: 0 24px; }
.accordion > summary {
  min-height: 56px; padding: 12px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 16px; line-height: 1.6; font-weight: 500; color: var(--navy);
}
.accordion__body { display: flex; flex-direction: column; gap: 12px; padding-bottom: 24px; font-size: 15px; max-width: 40em; }

/* 「〜を読む」の開閉 */
.more > summary {
  min-height: 48px; padding: 8px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 15px; line-height: 1.6; font-weight: 500; color: var(--teal);
}
.more--line { border-top: 1px solid var(--line); }
.more--box { border: 1px solid var(--line); border-radius: var(--radius); padding: 0 20px; }
.more--box > summary { min-height: 52px; padding: 12px 0; }

/* --------------------------------------------------------------------------
   10. カード
   -------------------------------------------------------------------------- */
.card { background: var(--white); border-radius: var(--radius); padding: 24px; }
.card--tint { background: var(--tint); }

/* サービスの入口カード（トップ） */
.service-card {
  display: flex; flex-direction: column; gap: 8px;
  text-decoration: none; color: var(--ink);
}
.service-card:hover { color: var(--ink); }
.service-card__title {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: 20px; line-height: 1.6; font-weight: 500; color: var(--navy);
}
.service-card__head { font-size: 15px; line-height: 1.8; font-weight: 700; color: var(--navy); }
.service-card__summary { font-size: 14px; line-height: 1.8; color: var(--muted); }

/* 枠線つきのリンクカード（トップの会社情報、ポリシーの関連リンク） */
.card-link {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 80px; padding: 0 24px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 17px; line-height: 1.6; font-weight: 500; text-decoration: none;
}
.card-link--sm { min-height: 56px; padding: 0 20px; border: 0; background: var(--white); font-size: 15px; font-weight: 400; }

/* --------------------------------------------------------------------------
   11. トップ：ファーストビュー（ロゴが組み上がる動き）
   -------------------------------------------------------------------------- */
.fv__inner {
  min-height: 600px; padding-top: 56px; padding-bottom: 64px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 40px 72px;
}
.fv__text { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.fv__text .english { font-size: 12px; letter-spacing: 0.08em; }
.fv__text .btn-row { margin-top: 16px; }

.logo-stage { position: relative; aspect-ratio: 867 / 550; width: clamp(220px, 28vw, 340px); }
.logo-stage img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* ロゴを4つの部分に切り分けています（形は変えないでください） */
.p-navy { clip-path: polygon(0 0,45.7% 0,45.7% 24.6%,40% 46.1%,43.4% 56%,47.5% 61%,49.7% 64%,49.7% 67.3%,0 67.3%); }
.p-up   { clip-path: polygon(45.7% 0,100% 0,100% 24.6%,62.2% 27.9%,53.9% 31.2%,48.6% 35.3%,43.4% 48%,39.8% 47.4%,45.7% 24.6%); }
.p-low  { clip-path: polygon(48.6% 35.3%,53.9% 31.2%,62.2% 27.9%,100% 24.6%,100% 67.3%,49.75% 67.3%,50.6% 60%,52.8% 49.4%); }
.p-word { clip-path: polygon(0 67.3%,100% 67.3%,100% 100%,0 100%); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes inNavy { from { transform: translate(-48px,32px) rotate(-10deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes inUp   { from { transform: translate(56px,-40px) rotate(12deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes inLow  { from { transform: translate(40px,48px) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }

.js-reveal .fv:not(.is-in) :is(.p-navy, .p-up, .p-low, .p-word, .f1, .f2, .f3) { opacity: 0; }
.js-reveal .fv.is-in .p-navy { animation: inNavy 1.1s cubic-bezier(.2,.7,.2,1) .1s both; }
.js-reveal .fv.is-in .p-up   { animation: inUp 1.1s cubic-bezier(.2,.7,.2,1) .25s both; }
.js-reveal .fv.is-in .p-low  { animation: inLow 1.1s cubic-bezier(.2,.7,.2,1) .4s both; }
.js-reveal .fv.is-in .p-word { animation: fadeUp .8s ease .9s both; }
.js-reveal .fv.is-in .f1 { animation: fadeUp .8s ease 1.1s both; }
.js-reveal .fv.is-in .f2 { animation: fadeUp .8s ease 1.3s both; }
.js-reveal .fv.is-in .f3 { animation: fadeUp .8s ease 1.5s both; }

/* 下層ページの見出しがふわっと出る動き */
.js-reveal .page-hero .f1 { animation: fadeUp .8s ease .1s both; }
.js-reveal .page-hero .f2 { animation: fadeUp .8s ease .3s both; }

/* --------------------------------------------------------------------------
   12. スクロールで表示する動き（画面に入るたびに毎回再生）
   -------------------------------------------------------------------------- */
.js-reveal .reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

/* 動きをオフにしたとき、すべての動きを止めます */
.no-motion *, .no-motion *::before, .no-motion *::after { animation: none !important; transition: none !important; }

/* --------------------------------------------------------------------------
   13. トップ：私たちのサービス・代表メッセージ・ニュース
   -------------------------------------------------------------------------- */
.intro { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 64px; }
.intro__text { flex: 1 1 360px; min-width: 0; max-width: 38em; display: flex; flex-direction: column; gap: 16px; }
.intro__emph { color: var(--navy); font-weight: 500; }
.illust { width: min(100%, 360px); margin: 0 auto; }
.illust--340 { width: min(100%, 340px); }
.illust--300 { width: min(100%, 300px); }
.illust svg { width: 100%; height: auto; }
.block-title { margin-top: 40px; }

.message__photo img {
  width: 100%; max-width: 420px; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius); background: var(--tint);
}
.message__name { font-size: 15px; line-height: 1.8; font-weight: 500; color: var(--navy); }
.message__text { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.news-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 8px; }
.news-list { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.news-list li { border-bottom: 1px solid var(--line); }
.news-list a { display: flex; flex-direction: column; gap: 6px; padding: 20px 0; text-decoration: none; color: var(--ink); }
.news-list__meta { display: flex; gap: 12px; align-items: center; font-size: 12px; line-height: 1.6; color: var(--muted); letter-spacing: 0.08em; }
.news-list__cat { border: 1px solid var(--muted); border-radius: var(--radius); padding: 0 8px; line-height: 1.8; }
.news-list__title { font-size: 15px; line-height: 1.8; }
/* ニュース一覧ページでは、横幅が広いと日付とタイトルを横に並べます */
.news-list--wide a { flex-direction: row; flex-wrap: wrap; gap: 6px 24px; align-items: baseline; }
.news-list--wide .news-list__meta { min-width: 15em; }
.news-list--wide .news-list__title { flex: 1 1 280px; }

/* ニュースの絞り込みボタン */
.filter { display: flex; flex-wrap: wrap; gap: 8px; }
.filter button {
  min-height: 44px; padding: 0 16px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--white); color: var(--navy);
  font-size: 14px; cursor: pointer;
}
.filter button[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: var(--white); }

/* --------------------------------------------------------------------------
   14. 私たちのサービス
   -------------------------------------------------------------------------- */
.table-box { background: var(--white); border-radius: var(--radius); overflow-x: auto; margin-top: 16px; }
.table-box table { width: 100%; min-width: 300px; border-collapse: collapse; font-size: 14px; line-height: 1.8; }
.table-box caption { text-align: left; padding: 16px 20px 0; font-weight: 500; color: var(--navy); }
.table-box th, .table-box td { text-align: left; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.table-box thead th { color: var(--muted); font-weight: 500; }
.table-box tbody th { font-weight: 500; }
.table-box tbody a { text-decoration: none; }

/* サービスの切り替えボタン（ヘッダーの下に固定） */
.subnav {
  position: sticky; top: var(--header-h); z-index: 10;
  background: var(--white); border-bottom: 1px solid var(--line);
}
.subnav__inner {
  max-width: 1200px; margin: 0 auto; padding: 8px clamp(16px, 6vw, 96px);
  display: flex; gap: 8px; overflow-x: auto; white-space: nowrap; scrollbar-width: none;
}
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav a {
  flex-shrink: 0; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 13px; line-height: 1.4; text-decoration: none; color: var(--navy);
}

.service-detail { border-bottom: 1px solid var(--line); }
.service-detail__inner {
  padding-top: 72px; padding-bottom: 72px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px 72px; align-items: start;
}
.service-detail__head { font-size: 17px; line-height: 1.8; font-weight: 700; color: var(--navy); }
.service-detail h3 { font-size: 16px; line-height: 1.6; font-weight: 500; color: var(--navy); }
.service-detail h4 { font-size: 15px; line-height: 1.6; font-weight: 500; color: var(--navy); }
.service-detail .more__body { display: flex; flex-direction: column; gap: 20px; padding: 4px 0 24px; font-size: 15px; }

.steps { list-style: none; padding: 0; margin-top: 8px; }
.steps h3 { font-size: 17px; line-height: 1.6; font-weight: 500; color: var(--navy); }
.steps p { font-size: 14px; line-height: 1.9; }

/* --------------------------------------------------------------------------
   15. 会社情報
   -------------------------------------------------------------------------- */
.vision-title { max-width: 26em; }
.values { list-style: none; padding: 0; margin-top: 8px; align-items: start; }
.value__name { display: flex; align-items: baseline; gap: 12px; }
.value__name h3 { display: flex; flex-direction: column; gap: 2px; font-weight: 500; line-height: 1.6; }
.value__ja { font-size: 20px; color: var(--navy); }
.value__en { font-size: 14px; font-weight: 400; letter-spacing: 0.06em; color: var(--muted); }
.value__head { font-size: 16px; line-height: 1.8; font-weight: 700; color: var(--navy); }
.value__body { display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; font-size: 15px; }
.value__act { background: var(--tint); border-radius: var(--radius); padding: 12px 16px; }
.value__act strong { display: block; color: var(--navy); }
.more--line > summary { font-size: 14px; }

.box { background: var(--tint); border-radius: var(--radius); padding: 32px 24px; max-width: 46em; margin-top: 16px; }

.brand-logo { background: var(--white); border-radius: var(--radius); padding: 48px 24px; display: flex; justify-content: center; }
.brand-logo img { width: 240px; height: auto; }

.overview {
  background: var(--white); border-radius: var(--radius); padding: 8px 24px;
  display: grid; grid-template-columns: minmax(6em, 10em) 1fr; font-size: 15px; line-height: 1.8;
}
.overview dt, .overview dd { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--line); }
.overview dt { color: var(--muted); }
.overview dt:last-of-type, .overview dd:last-of-type { border-bottom: 0; }
.overview dd.links { display: flex; flex-direction: column; gap: 4px; }

/* --------------------------------------------------------------------------
   16. お問い合わせフォーム
   -------------------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 28px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field > label, .field legend {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; line-height: 1.6; font-weight: 500; color: var(--navy);
}
.field legend { padding: 0; margin-bottom: 8px; }
fieldset.field { margin: 0; padding: 0; border: 0; }
.badge { font-size: 11px; line-height: 1.6; font-weight: 500; color: var(--white); background: var(--navy); border-radius: var(--radius); padding: 1px 6px; }
.optional { font-size: 13px; font-weight: 400; color: var(--muted); }
.input {
  min-height: 48px; padding: 10px 14px; width: 100%;
  border: 1px solid var(--muted); border-radius: var(--radius);
  font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--white);
}
textarea.input { line-height: 1.8; resize: vertical; }
.check { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; line-height: 1.6; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--navy); flex-shrink: 0; }
.consent { background: var(--tint); border-radius: var(--radius); padding: 16px 20px; }
.consent .check { align-items: flex-start; line-height: 1.8; }
.consent .check input { margin-top: 4px; }
.field-error, .form-alert { font-size: 13px; line-height: 1.6; font-weight: 700; color: var(--navy); }
.error-summary { border: 2px solid var(--navy); border-radius: var(--radius); padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; }
.error-summary ul { padding-left: 1.2em; font-size: 14px; line-height: 1.8; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.submit { align-self: flex-start; min-height: 56px; padding: 0 48px; border: 0; border-radius: var(--radius); background: var(--navy); color: var(--white); font-size: 16px; font-weight: 500; cursor: pointer; }
.submit:disabled { opacity: .6; cursor: default; }
.done { background: var(--tint); border-radius: var(--radius); padding: 40px 24px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.done h2 { font-size: 22px; line-height: 1.6; font-weight: 500; color: var(--navy); }

/* --------------------------------------------------------------------------
   17. ポリシー（本文）
   -------------------------------------------------------------------------- */
.policy { padding-top: 56px; padding-bottom: 80px; display: flex; flex-direction: column; gap: 40px; }
.policy section { display: flex; flex-direction: column; gap: 12px; }
.policy h2 { font-size: 20px; line-height: 1.6; font-weight: 500; letter-spacing: 0.04em; color: var(--navy); }
.policy .list { line-height: 1.9; }
.signature { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; font-size: 15px; line-height: 1.8; text-align: right; }
.related { padding-top: 48px; padding-bottom: 48px; }
.related h2 { font-size: 16px; line-height: 1.6; font-weight: 500; color: var(--navy); }