/*
Theme Name: Shimaban
Description: 株式会社島田板金工業 コーポレートサイト用テーマ
Version: 0.1.0
Text Domain: shimaban
*/

/* ---------- tokens ---------- */
:root {
  --c-main: #24459c;
  --c-main-rgb: 36 69 156;
  --c-accent: #2b78c9;   /* ロゴの明るい青 */
  --c-text: #1d2433;
  --c-bg: #fff;
  --c-light: #f2f5fb;
  --mq-size: clamp(3.5rem, 11vw, 9rem);       /* MV境界に重ねる英語タイトルの文字サイズ */
  --pad-x: clamp(16px, 3vw, 40px);          /* セクション左右の余白 */
  --header-top: 16px;                       /* ページ最上部でのヘッダーの上余白 */
  --header-gap: clamp(12px, 3.5vw, 50px);   /* ヘッダー左右の余白 */
  --header-inner-h: 64px;                   /* ヘッダーカードの高さ（上余白と合わせて約80px） */
  --header-h: calc(var(--header-inner-h) + 16px);  /* アンカー位置調整用 */
  --font: "Red Hat Text", "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;   /* 英数字=Red Hat Text、日本語=Zen Kaku Gothic New */
  --font-en: "Red Hat Text", sans-serif;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font-family: var(--font); color: var(--c-text); background: var(--c-bg); line-height: 1.8; }
img, video { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; }

/* ---------- header ----------
   ページ最上部：画面上端から --header-top 離れた角丸カード
   スクロール(60px超)：画面上端に張り付き、下側だけ角丸（.is-scroll をJSで付与） */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; color: var(--c-text); }
.site-header__outer { padding: var(--header-top) var(--header-gap) 0; }
.site-header__inner {
  position: relative; height: var(--header-inner-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 0 0 clamp(12px, 2vw, 30px);   /* 右端は電話・メールのブロックを密着させる */
  background: rgb(255 255 255 / .96);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-radius: 10px;
  box-shadow: 0 4px 10px rgb(0 0 0 / .1);
}
@media (prefers-reduced-motion: no-preference) {
  .site-header__outer { transition: padding .3s; }
  .site-header__inner { transition: border-radius .3s; }
}
.site-header.is-scroll .site-header__outer { padding-top: 0; }
.site-header.is-scroll .site-header__inner { border-radius: 0 0 10px 10px; }
.site-header :focus-visible { outline-color: var(--c-main); }

.site-header__logo { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: calc(100% - 64px); text-decoration: none; }   /* 三本線と離す */
.site-header__logo img { height: 36px; width: auto; }
.site-header__name { overflow: hidden; text-overflow: ellipsis; color: #000; font-size: 1.0625rem; font-weight: 500; letter-spacing: .02em; line-height: 1.3; white-space: nowrap; }

.gnav { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 28px); margin-left: auto; }
.gnav__list { display: flex; gap: clamp(14px, 1.8vw, 28px); }
.gnav__list a {
  text-decoration: none; font-weight: 700; font-size: .9375rem; padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.gnav__list a:hover { border-bottom-color: var(--c-main); color: var(--c-main); }

/* 電話・メール：ヘッダーの右端・上下に密着する2色のブロック */
.gnav { align-self: stretch; }
.gnav__cta { align-self: stretch; display: flex; }
.hbtn {
  display: flex; align-items: center; gap: 10px; padding: 0 18px;
  color: #fff; text-decoration: none; white-space: nowrap; line-height: 1.2; font-weight: 700;
  transition: filter .2s;
}
.hbtn:hover { filter: brightness(1.12); }
.hbtn--tel { background: var(--c-main); }
.hbtn--mail { background: var(--c-accent); }
.hbtn__ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgb(255 255 255 / .22); color: #fff; }
.hbtn__ico svg { width: 17px; height: 17px; }
.hbtn__txt { display: grid; }
.hbtn__txt small { font-size: .6875rem; font-weight: 500; }
.hbtn__txt strong { font-size: 1.125rem; letter-spacing: .02em; }
.hbtn--mail .hbtn__txt { font-size: .8125rem; }

@media (min-width: 1201px) {
  /* ヘッダーカードの右端の角に合わせる（スクロール後は上側の角を直角に） */
  .hbtn--mail { border-radius: 0 10px 10px 0; }
  .site-header.is-scroll .hbtn--mail { border-radius: 0 0 10px 0; }
}

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-btn { display: none; }

@media (max-width: 1200px) {
  :root { --header-inner-h: 64px; }
  .site-header__logo img { height: 30px; }
  .site-header__name { font-size: 1rem; }
  .site-header__inner { padding-right: 8px; }
  .nav-btn {
    display: grid; align-content: center; justify-items: center; gap: 6px;
    width: 48px; height: 48px; cursor: pointer; margin-left: auto; border-radius: 50%;
  }
  .nav-btn span { display: block; width: 22px; height: 2px; background: var(--c-main); transition: transform .2s, opacity .2s; }
  .nav-toggle:focus-visible + .nav-btn { outline: 3px solid var(--c-main); outline-offset: 2px; }
  .nav-toggle:checked + .nav-btn span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle:checked + .nav-btn span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked + .nav-btn span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* メニューはヘッダーカード直下のカードとして開く */
  .gnav {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 20px; padding: 16px 20px 24px;
    max-height: calc(100svh - var(--header-top) - var(--header-inner-h) - 24px); overflow-y: auto;
    background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgb(var(--c-main-rgb) / .22);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  .nav-toggle:checked ~ .gnav { visibility: visible; opacity: 1; transform: none; }
  .gnav__list { flex-direction: column; gap: 0; }
  .gnav__list a { display: block; padding: 14px 4px; font-size: 1.0625rem; border-bottom: 1px solid #e3e8f3; }
  .gnav__cta { flex-direction: column; align-items: stretch; gap: 8px; }
  .hbtn { padding: 14px 16px; border-radius: 8px; }
  .hbtn__txt strong { font-size: 1.5rem; }
  .hbtn--mail .hbtn__txt { font-size: 1rem; }
}

@media (max-width: 480px) {
  .site-header__logo { gap: 8px; }
  .site-header__logo img { height: 26px; }
  .site-header__name { font-size: .875rem; letter-spacing: 0; }
}

/* ---------- MV (100% x 100%) ---------- */
.mv {
  position: relative; width: 100%; height: 100vh; height: 100svh; min-height: 560px;
  display: flex; align-items: center; overflow: hidden;   /* 文字はMVの上下中央 */
  background: var(--c-main); color: #fff;
}
.mv__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mv::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* 上＝透明 → 下＝サイトカラー。次のセクションの背景色とつなげる */
  background: linear-gradient(to bottom,
    rgb(var(--c-main-rgb) / 0) 0%,
    rgb(var(--c-main-rgb) / .35) 45%,
    rgb(var(--c-main-rgb) / .8) 75%,
    var(--c-main) 100%);
}
.mv__inner { position: relative; z-index: 2; width: 100%; text-shadow: 0 2px 20px rgb(0 0 0 / .35); padding: 0 var(--header-gap); }
.mv__ja {
  margin: 0; font-size: clamp(1.75rem, 4.4vw, 4.25rem); font-weight: 500; line-height: 1.5;
  font-style: italic;   /* Zen Kaku Gothic New に斜体はないため、ブラウザが擬似斜体にする */
}
.mv__ja span { display: block; white-space: nowrap; }   /* 常に3行（文節ごとに1行） */
@media (max-width: 768px) { .mv__ja { font-size: 6.4vw; } }   /* 最長の行（13文字）が画面幅に収まる大きさ */
@media (prefers-reduced-motion: no-preference) {
  }

/* ---------- sections (placeholder) ---------- */
.section { padding: clamp(64px, 10vw, 120px) var(--pad-x); }
.section:nth-of-type(even) { background: var(--c-light); }
.section__title { margin: 0 0 24px; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--c-main); }

/* ---------- common ---------- */
.container { width: min(1120px, 100% - 2 * var(--pad-x)); margin-inline: auto; }

/* ---------- marquee（MVと会社紹介の境目にまたがって、右から左へ流れ続ける英語タイトル） ---------- */
.marquee {
  position: relative; z-index: 5; overflow: hidden;
  height: calc(var(--mq-size) * 1.15);
  margin: calc(var(--mq-size) * -.575) 0;    /* 上半分はMV、下半分は次のセクションに重なる */
  pointer-events: none;
}
.marquee__track { display: flex; width: max-content; animation: marquee 90s linear infinite; }
.marquee__group { display: flex; flex: none; }
.marquee__item {
  flex: none; padding-right: .6em; white-space: nowrap;
  font-family: var(--font-en); font-style: italic; font-weight: 300; line-height: 1.15;
  font-size: var(--mq-size); color: #d3ddf4;   /* 濃い青の上でも白い背景の上でも見える薄い青 */
}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- section title（大きめの英字 + 小さめの日本語） ---------- */
.section-head { margin: 0 0 clamp(40px, 6vw, 72px); font-weight: 400; line-height: 1.1; }
.section-head__en {
  display: block; font-family: var(--font-en); font-style: italic; font-weight: 700;
  font-size: clamp(3rem, 9vw, 7rem); letter-spacing: 0; color: var(--c-main); overflow-wrap: anywhere;
}
.section-head__ja {
  display: flex; align-items: center; gap: 12px; margin-top: 1em;
  font-size: clamp(.9375rem, 1.4vw, 1.125rem); font-weight: 700; line-height: 1.5; color: var(--c-accent);
}
.section-head__ja::before { content: ""; flex: none; width: 32px; height: 1px; background: var(--c-accent); }

/* ---------- service（事業内容） ---------- */
.about__text p { margin: 0 0 1.4em; font-weight: 400; line-height: 2; color: #000; }
.about__text p:last-child { margin-bottom: 0; }

.service { padding: 0 0 clamp(64px, 10vw, 120px); }
/* タイトルと本文：画面の左端から常に10%の位置に左揃え。本文は幅の制限なしで横に伸ばす */
.service__head { padding-inline: 10%; margin-bottom: clamp(48px, 6vw, 80px); }
.service__head .section-head { margin: 0 0 clamp(24px, 3vw, 40px); }

/* 事業（2つ）：左右に並べる */
.service-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); margin-inline: 10%; }   /* 横幅はタイトル部分（.service__head）と同じ */
/* 事業は背景・線なし。左右に2つ並べる。写真は2つとも同じサイズの長方形（3:2） */
.service-card__media { overflow: hidden; border-radius: 10px; }
.service-card__media img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.service-card__title { margin: 0 0 .8em; font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 700; line-height: 1.4; letter-spacing: .06em; color: var(--c-main); }
.service-card__body { padding: clamp(16px, 2vw, 24px) 0 0; }
.service-card__body p { margin: 0 0 1em; line-height: 1.9; color: #000; }
.service-card__body p:last-child { margin-bottom: 0; }

/* スマホ：左右20pxの余白で、左右対称に配置 */
@media (max-width: 768px) {
  :root { --pad-x: 20px; }
  .service__head { padding-inline: 20px; }
  .service-cards { grid-template-columns: 1fr; gap: 40px; margin-inline: 20px; }   /* スマホは縦並び */
}

/* About/Service：白 → 薄い青（#eaf0fa）のグラデーション。25%まで白、75%で青に変わり切る（数字で調整） */
.section.about:nth-of-type(n) { background: linear-gradient(to bottom, #fff 0%, #fff 25%, #eaf0fa 75%, #eaf0fa 100%); color: var(--c-text); padding-top: calc(var(--mq-size) * .575 + clamp(72px, 11vw, 176px)); padding-inline: 0; padding-bottom: 0; }

/* ---------- news（お知らせ・施工事例のタブ切り替え） ---------- */
.section.news:nth-of-type(n) { background: #fff; padding-inline: 0; }
.news__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3.6fr); gap: clamp(24px, 4vw, 64px); padding-inline: 10%; }   /* 左にタイトル、右にタブとリスト */
.news .section-head { margin: 0; align-self: start; }
.news .section-head__en { font-size: clamp(2.5rem, 4.4vw, 5rem); }

.news-tabs > input { position: absolute; opacity: 0; pointer-events: none; }   /* display:none にしない（キーボード操作のため） */
.news-tabs__labels { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(16px, 2vw, 28px); }
.news-tabs__labels label {
  cursor: pointer; padding: 10px 22px; border: 1px solid #c5d0e6; border-radius: 999px;
  font-size: .9375rem; font-weight: 700; line-height: 1.4; color: var(--c-main);
  transition: background-color .2s, color .2s, border-color .2s;
}
.news-tabs__labels label:hover { background: var(--c-light); }
#tab-all:checked ~ .news-tabs__labels label[for="tab-all"],
#tab-news:checked ~ .news-tabs__labels label[for="tab-news"],
#tab-report:checked ~ .news-tabs__labels label[for="tab-report"] { background: var(--c-main); border-color: var(--c-main); color: #fff; }
#tab-all:focus-visible ~ .news-tabs__labels label[for="tab-all"],
#tab-news:focus-visible ~ .news-tabs__labels label[for="tab-news"],
#tab-report:focus-visible ~ .news-tabs__labels label[for="tab-report"] { outline: 3px solid var(--c-accent); outline-offset: 2px; }

.news-panel { display: none; }
#tab-all:checked ~ .news-panel--all,
#tab-news:checked ~ .news-panel--news,
#tab-report:checked ~ .news-panel--report { display: block; }

.news-list { border-top: 1px solid #d9dfec; }
.news-item a {
  display: grid; grid-template-columns: clamp(96px, 12vw, 160px) minmax(0, 1fr) auto; gap: 20px; align-items: center;
  padding: 20px 0; border-bottom: 1px solid #d9dfec; color: #000; text-decoration: none;
}
.news-item__thumb { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 6px; background: #e6ecf7; }   /* 画像がないときは薄い青の枠 */
.news-item__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.news-item__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.news-item time { font-family: var(--font-en); color: #5a6482; }
.news-item__cat {
  padding: 2px 12px; border: 1px solid var(--c-accent); border-radius: 4px;
  font-size: .75rem; font-weight: 700; line-height: 1.6; color: var(--c-accent); white-space: nowrap;
}
.news-item__body { display: block; min-width: 0; }
.news-item__arrow { width: 10px; height: 10px; margin-right: 8px; border-top: 2px solid var(--c-main); border-right: 2px solid var(--c-main); transform: rotate(45deg); transition: transform .2s; }   /* 右端の「>」 */
.news-item a:hover .news-item__arrow { transform: translateX(4px) rotate(45deg); }
.news-more--more { justify-content: center; margin-top: 24px; }
.news-item__title { display: block; font-weight: 500; }
.news-item a:hover .news-item__title { color: var(--c-main); text-decoration: underline; }
.news-empty { margin: 0; padding: 32px 0; color: #5a6482; border-top: 1px solid #d9dfec; }
.news-more { display: flex; justify-content: flex-end; margin: 32px 0 0; }   /* ボタンは右端 */
.news-more a {
  display: inline-flex; align-items: center; gap: .6em; padding: 14px 28px;
  border-radius: 8px; background: var(--c-main); color: #fff; font-weight: 700; line-height: 1.4; text-decoration: none;
  transition: filter .2s;
}
.news-more a::after { content: "→"; }
.news-more a:hover { filter: brightness(1.15); }

@media (max-width: 900px) {
  .news__inner { grid-template-columns: 1fr; }
  .news .section-head__en { font-size: clamp(3rem, 14vw, 6rem); }
}
@media (max-width: 768px) {
  .news__inner { padding-inline: 20px; }
  .news-item a { gap: 14px; }
}

/* アーカイブ（お知らせ・施工事例の一覧ページ） */
.archive-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.archive-tabs a { padding: 10px 22px; border: 1px solid #c5d0e6; border-radius: 999px; font-size: .9375rem; font-weight: 700; color: var(--c-main); text-decoration: none; }
.archive-tabs a:hover { background: var(--c-light); }
.archive-tabs a[aria-current="page"] { background: var(--c-main); border-color: var(--c-main); color: #fff; }
.page-main--single { padding-top: clamp(64px, 8vw, 120px); padding-bottom: clamp(96px, 12vw, 180px); min-height: clamp(360px, 50vh, 560px); }
.single-meta { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-family: var(--font-en); color: #5a6482; }
.pagination { margin-top: 32px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers { padding: 6px 14px; border: 1px solid #c5d0e6; border-radius: 6px; text-decoration: none; color: var(--c-main); }
.pagination .page-numbers.current { background: var(--c-main); border-color: var(--c-main); color: #fff; }

/* ---------- company（会社概要：タイトル中央、左に概要・右に2枚重ねの写真、下にアクセス） ---------- */
.section.company:nth-of-type(n) { background: var(--c-light); padding-inline: 0; }
.company__inner { padding-inline: 10%; }
.company .section-head { text-align: center; }
.company .section-head__ja { justify-content: center; }
.company__sub { margin: 0 0 1em; font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-weight: 700; line-height: 1.5; color: var(--c-main); }

.mission { max-width: 64em; margin: 0 auto clamp(64px, 8vw, 112px); text-align: center; }
.mission__catch { margin: 0 0 1.2em; font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.6; color: var(--c-main); }
.mission__catch span { display: inline-block; }
.mission__lead { margin: 0 0 1.5em; line-height: 2; color: #000; }
.mission__list { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; }   /* 3つ横並び */
.mission__list li { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 8px clamp(16px, 2.4vw, 32px); color: #000; font-weight: 500; line-height: 1.8; text-wrap: balance; }
.mission__list li + li { border-left: 1px solid #c5d0e6; }   /* 縦線で区切る */
.mission__no { display: block; margin-bottom: .6em; color: rgb(var(--c-main-rgb) / .4); font-family: var(--font-en); font-size: .875rem; font-style: italic; font-weight: 300; letter-spacing: .12em; text-transform: uppercase; }   /* 薄字の「MISSION 1」 */
@media (max-width: 768px) {
  .mission__list { grid-template-columns: 1fr; }
  .mission__list li { padding: 14px 0; }
  .mission__list li + li { border-left: 0; border-top: 1px solid #c5d0e6; }   /* スマホは縦並び・横線 */
}

.company__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 2vw, 32px); align-items: start; margin-bottom: clamp(64px, 8vw, 112px); }
.company__grid .outline { grid-column: 1 / span 7; margin: 0; }
.company__imgs { grid-column: 9 / span 4; position: relative; padding-bottom: 22%; }
.company__img { display: block; object-fit: cover; border-radius: 10px; }
.company__img--a { width: 80%; margin-left: auto; aspect-ratio: 4 / 5; }
.company__img--b { position: absolute; left: 0; bottom: 0; width: 54%; aspect-ratio: 1 / 1; }

.outline { margin: 0; border-top: 1px solid #c5d0e6; }
.outline__row { display: grid; grid-template-columns: clamp(6em, 9vw, 8.5em) minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid #c5d0e6; }
.outline dt { font-weight: 700; color: var(--c-main); }
.outline dd { margin: 0; line-height: 1.9; color: #000; }
.outline__sub { display: block; font-size: .875rem; color: #5a6482; }
.history { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 10px 16px; margin: 0; }
.history dt { font-weight: 500; color: #000; }
.history dd { margin: 0; }

.access { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.access__map iframe { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: 10px; }
.access address { font-style: normal; line-height: 1.9; color: #000; }
.access__btn { margin: 24px 0 0; }
.btn {
  display: inline-flex; align-items: center; gap: .6em; padding: 14px 28px;
  border-radius: 8px; background: var(--c-main); color: #fff; font-weight: 700; line-height: 1.4; text-decoration: none; transition: filter .2s;
}
.btn::after { content: "→"; }
.btn:hover { filter: brightness(1.15); }

@media (max-width: 900px) {
  .company__grid { grid-template-columns: 1fr; row-gap: 48px; }
  .company__grid .outline, .company__imgs { grid-column: 1; }
  .company__imgs { order: -1; max-width: 420px; }
}
@media (max-width: 768px) {
  .company__inner { padding-inline: 20px; }
  .outline__row { grid-template-columns: 1fr; gap: 6px; }
  .history { grid-template-columns: 1fr; gap: 2px; }
  .history dd { margin-bottom: 10px; }
  .access { grid-template-columns: 1fr; }
}

/* ---------- contact（お問い合わせトップ・フォーム） ---------- */
.contact-cta { padding: clamp(64px, 10vw, 120px) 10% clamp(56px, 7vw, 88px); border-bottom: 1px solid rgb(255 255 255 / .25); }
.contact-cta .section-head__en { color: #fff; }
.contact-cta .section-head__ja { color: rgb(255 255 255 / .85); }
.contact-cta .section-head__ja::before { background: #fff; }
.contact-cta__text { max-width: 44em; margin: 0 0 32px; line-height: 2; }
.contact-cta__btns { display: flex; flex-wrap: wrap; gap: 16px; }
.cta-btn { display: inline-flex; align-items: center; gap: 14px; padding: 16px 28px 16px 18px; border-radius: 8px; font-weight: 700; text-decoration: none; transition: filter .2s; }
.cta-btn:hover { filter: brightness(1.08); }
.cta-btn__ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; }
.cta-btn__ico svg { width: 22px; height: 22px; }
.cta-btn__txt { display: grid; }
.cta-btn__txt small { font-size: .75rem; font-weight: 500; }
.cta-btn__txt strong { font-family: var(--font-en); font-size: 1.5rem; letter-spacing: .02em; }
.cta-btn--tel { background: #fff; color: var(--c-main); }
.cta-btn--tel .cta-btn__ico { background: var(--c-main); color: #fff; }
.cta-btn--mail { background: var(--c-accent); color: #fff; }
.cta-btn--mail .cta-btn__ico { background: rgb(255 255 255 / .22); }
.contact-cta__hours { margin: 24px 0 0; opacity: .85; }
@media (max-width: 768px) {
  .contact-cta { padding-inline: 20px; }
  .contact-cta__btns { flex-direction: column; }
}

.grecaptcha-badge { visibility: hidden; }   /* 代わりに確認画面へ規約の表記を入れている */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* ハニーポット（人間には見えない） */

.steps { display: flex; max-width: 480px; margin: 0 auto clamp(32px, 5vw, 56px); padding: 0; list-style: none; }
.steps__item { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; gap: 8px; color: #9aa6c2; font-size: .875rem; font-weight: 700; }
.steps__item + .steps__item::before { content: ""; position: absolute; top: 18px; right: 50%; width: 100%; height: 2px; background: #d5dbea; }
.steps__no { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid #d5dbea; border-radius: 50%; background: #fff; font-family: var(--font-en); }
.steps__item.is-current { color: var(--c-main); }
.steps__item.is-current .steps__no { background: var(--c-main); border-color: var(--c-main); color: #fff; }
.steps__item.is-done { color: var(--c-accent); }
.steps__item.is-done .steps__no { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.steps__item.is-done + .steps__item::before { background: var(--c-accent); }

.form-intro p { margin: 0 0 1em; line-height: 1.9; color: #000; }
.form-intro__tel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 1.5em; }
.form-intro__tel a { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-en); font-size: 1.5rem; font-weight: 700; color: var(--c-main); text-decoration: none; }
.form-intro__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c-main); color: #fff; }
.form-intro__icon svg { width: 18px; height: 18px; }
.form-intro__hours { color: #5a6482; }

.form { margin-top: 32px; }
.form-row { margin-bottom: 28px; }
.form-row label:not(.check) { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-weight: 700; }
.req, .opt { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: .6875rem; font-weight: 700; line-height: 1.6; }
.req { background: #c9302c; color: #fff; }
.opt { background: #e6ecf7; color: var(--c-main); }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form select, .form textarea {
  width: 100%; padding: 14px 16px; border: 1px solid #c5d0e6; border-radius: 8px;
  background: #fff; color: #000; font: inherit; transition: border-color .2s, box-shadow .2s;
}
.form textarea { resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--c-main); outline: 0; box-shadow: 0 0 0 3px rgb(var(--c-main-rgb) / .2); }
.form [aria-invalid="true"] { border-color: #c9302c; background: #fff7f7; }
.form-error { margin: 6px 0 0; color: #c9302c; font-size: .875rem; font-weight: 500; }
.form-alert { margin: 0 0 24px; padding: 14px 18px; border: 1px solid #f3c0c0; border-radius: 8px; background: #fdecec; color: #8a1f1f; line-height: 1.7; }
.form-alert a { color: inherit; }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; line-height: 1.6; }
.check input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--c-main); }
.form-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }
button.btn { border: 0; font: inherit; font-weight: 700; cursor: pointer; }
button.btn:disabled { opacity: .6; cursor: default; }
button.btn--ghost { border: 1px solid var(--c-main); background: #fff; color: var(--c-main); }
.btn--ghost::after { content: none; }

.form-lead { margin: 0 0 24px; line-height: 1.9; }
.form-note { margin: 24px 0 0; color: #5a6482; font-size: .8125rem; line-height: 1.7; }
.confirm { margin: 0; border-top: 1px solid #d5dbea; }
.confirm__row { display: grid; grid-template-columns: clamp(8em, 22%, 12em) minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid #d5dbea; }
.confirm dt { font-weight: 700; color: var(--c-main); }
.confirm dd { margin: 0; color: #000; line-height: 1.9; overflow-wrap: anywhere; }
.form-done { padding: 24px 0; text-align: center; }
.form-done__title { margin: 0 0 1.2em; color: var(--c-main); font-size: clamp(1.375rem, 2.4vw, 1.875rem); }
.form-done p { margin: 0 0 1em; color: #000; line-height: 2; }
.form-done__btn { margin-top: 40px; }
@media (max-width: 768px) {
  .confirm__row { grid-template-columns: 1fr; gap: 4px; }
}

.policy h2 { margin: 2.4em 0 .8em; color: var(--c-main); font-size: 1.25rem; line-height: 1.5; }
.policy p, .policy li { color: #000; line-height: 1.9; }
.policy ul { margin: 0 0 1em; padding-left: 1.4em; list-style: disc; }

/* ---------- 下層ページの見出しエリア（MV）とパンくず ---------- */
.page-hero {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
  height: 420px; padding: 0 10% 32px; overflow: hidden;
  background: #141414 center / cover no-repeat; color: #fff;
}
.page-hero::before {   /* 黒系のオーバーレイ（数字で濃さを調整） */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgb(20 20 20 / .78), rgb(20 20 20 / .94));
}
.page-hero__title { margin: 0; font-weight: 400; line-height: 1.1; }
.page-hero__en { display: block; font-family: var(--font-en); font-style: italic; font-weight: 300; font-size: clamp(3rem, 8vw, 6rem); letter-spacing: 0; }
.page-hero__ja { display: flex; align-items: center; gap: 12px; margin-top: .9em; font-size: clamp(.9375rem, 1.4vw, 1.125rem); font-weight: 700; line-height: 1.5; }
.page-hero__ja::before { content: ""; flex: none; width: 32px; height: 1px; background: #fff; }
.breadcrumb { margin-top: clamp(20px, 3vw, 32px); font-size: .8125rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; }
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb li + li::before { content: ""; width: 6px; height: 6px; margin: 0 12px 0 10px; border-top: 1px solid rgb(255 255 255 / .8); border-right: 1px solid rgb(255 255 255 / .8); transform: rotate(45deg); }   /* 区切りの「>」 */
.breadcrumb a { color: rgb(255 255 255 / .85); text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb [aria-current="page"] { overflow: hidden; max-width: 40ch; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 768px) {
  .page-hero { height: 320px; padding-inline: 20px; padding-bottom: 24px; }
}

/* 記事詳細：前の投稿 / 一覧に戻る / 次の投稿 */
.post-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: clamp(48px, 6vw, 80px); padding-top: 32px; border-top: 1px solid #d9dfec; }
.post-nav__next { text-align: right; }
.post-nav__prev a, .post-nav__next a { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; color: var(--c-main); text-decoration: none; }
.post-nav__prev a::before, .post-nav__next a::after { content: ""; width: 9px; height: 9px; border-top: 2px solid var(--c-main); border-right: 2px solid var(--c-main); }
.post-nav__prev a::before { transform: rotate(-135deg); }
.post-nav__next a::after { transform: rotate(45deg); }
.post-nav__prev a:hover, .post-nav__next a:hover { text-decoration: underline; }
a.btn--ghost { border: 1px solid var(--c-main); background: #fff; color: var(--c-main); }
@media (max-width: 600px) {
  .post-nav { grid-template-columns: 1fr 1fr; }
  .post-nav__list { grid-column: 1 / -1; order: -1; text-align: center; }
}

/* ---------- sub pages ---------- */
.page-main { padding: clamp(48px, 6vw, 80px) var(--pad-x) 96px; max-width: 960px; margin: 0 auto; }
.page-main__title { color: var(--c-main); margin: 0 0 32px; }
.post-list li { border-bottom: 1px solid #d9dfec; padding: 16px 0; }
.post-list time { margin-right: 1em; color: #5a6482; }

/* ---------- footer ---------- */
.site-footer { position: relative; isolation: isolate; background: var(--c-main) center / cover no-repeat; color: #fff; }
.site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(var(--c-main-rgb) / .92); }   /* 濃い青のオーバーレイ（数字で濃さを調整） */
.site-footer__inner { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; padding: clamp(48px, 6vw, 72px) 10% 0; }
.site-footer__logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.site-footer__logo img { height: 40px; width: auto; filter: brightness(0) invert(1); }   /* 濃い青の上で見えるよう、ロゴを白に */
.site-footer__name { font-size: 1.125rem; font-weight: 500; letter-spacing: .02em; line-height: 1.3; }
.site-footer address { font-style: normal; margin-top: 16px; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer__links a { text-decoration: none; }
.site-footer__links a:hover { text-decoration: underline; }
.site-footer__copy { margin: 40px 0 0; padding: 0 10% 40px; font-size: .75rem; opacity: .8; }
@media (max-width: 768px) {
  .site-footer__inner { padding-inline: 20px; }
  .site-footer__copy { padding-inline: 20px; }
}