@charset "UTF-8";
/* =========================================================
   株式会社MINATO ／ style.css
   モバイルファースト（SP → TB 768px → PC 1024px）
   白基調 × 太めゴシック × 青の差し色ひとつ
   ========================================================= */

/* ---------- 1. 変数 ---------- */
:root {
  /* 空の青 */
  --blue:        #1b6fc4;
  --blue-dark:   #14559b;
  --blue-soft:   #e7f0fa;
  --blue-line:   #b6d3ef;

  /* とちおとめの赤（差し色） */
  --red:      #e0453c;
  --red-dark: #c4362e;
  --red-soft: #fdeceb;

  /* 田園の緑 */
  --green: #6e8f5e;

  --white:  #ffffff;
  --bg:     #fbf8f3;   /* 生成り */
  --bg-2:   #f3ede2;
  --line:   #e8e0d3;
  --line-2: #d5cbba;

  --text:   #22303a;
  --text-2: #5f6d78;
  --text-3: #8f9299;

  --container: 1200px;
  --gutter: 20px;
  --header-h: 60px;
  --r: 8px;
  --r-sm: 6px;

  --shadow: 0 1px 2px rgba(22, 32, 43, .04), 0 12px 28px rgba(22, 32, 43, .07);
  --shadow-lg: 0 2px 4px rgba(22, 32, 43, .05), 0 22px 48px rgba(22, 32, 43, .12);

  --font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
}

/* ---------- 2. リセット ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.9;
  color: var(--text);
  background: var(--bg);
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 66px;
}
h1,
h2,
h3,
p,
dl,
dd,
figure { margin: 0; }
ul,
ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; transition: color .2s, background-color .2s, border-color .2s, opacity .2s; }
img { max-width: 100%; height: auto; display: block; }
small { font-size: inherit; }
em { font-style: normal; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 3px; }

/* ---------- 3. 共通パーツ ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 780px; }

.sp-only { display: inline; }
.pc-only { display: none; }

.section { padding: 62px 0; }
.section--sand { background: var(--bg-2); }
.section--tight { padding: 32px 0; }

/* セクションラベル */
.label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
}
.label em { display: none; }          /* 装飾の連番は使わない */
.label--light { color: #8fc0f5; }

.heading {
  font-size: clamp(24px, 6.2vw, 38px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--text);
  margin-bottom: 16px;
  text-wrap: balance;
}
.lead { font-size: 15px; line-height: 1.95; color: var(--text-2); }

.section__head { margin-bottom: 32px; }
.section__head .heading::after,
.detail__head .heading::after {  content: "";  display: block;  width: 46px; height: 4px;  margin-top: 16px;  border-radius: 2px;  background: var(--red);}
.section__more { text-align: center; margin-top: 36px; }

/* ボタン */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 30px;
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
  cursor: pointer;
}
.btn--gold {                      /* 旧クラス名を維持（= 主ボタン） */
  background: var(--red);
  color: var(--white);
}
.btn--gold:hover { background: var(--red-dark); }
.btn--line {
  background: var(--white);
  color: var(--text);
  border-color: var(--line-2);
}
.btn--line:hover { border-color: var(--blue); color: var(--blue); }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: 13px; }
.btn--lg { min-height: 60px; padding: 0 38px; font-size: 16px; }

/* ---------- 4. ヘッダー / ナビ ---------- */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  height: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo { display: flex; align-items: center; gap: 9px; }
.logo__mark { color: var(--blue); flex: none; display: flex; }
.logo__mark svg { width: 30px; height: 30px; }
.logo__text { display: flex; flex-direction: column; line-height: 1.25; }
.logo__text strong { font-size: 16px; font-weight: 700; letter-spacing: .01em; color: var(--text); }
.logo__text small { font-size: 9.5px; font-weight: 500; letter-spacing: .06em; color: var(--text-3); white-space: nowrap; }

/* ハンバーガー */
.nav-btn {
  position: relative;
  z-index: 120;
  width: 40px; height: 40px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  cursor: pointer;
  margin-right: -8px;
}
.nav-btn span {
  display: block;
  width: 22px; height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform .3s, opacity .2s;
}
#nav-toggle:checked ~ .header .nav-btn span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#nav-toggle:checked ~ .header .nav-btn span:nth-child(2) { opacity: 0; }
#nav-toggle:checked ~ .header .nav-btn span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* SPナビ */
.nav {
  position: fixed;
  top: 0; right: 0;
  z-index: 110;
  width: min(82vw, 340px);
  height: 100dvh;
  padding: calc(var(--header-h) + 20px) 24px 40px;
  background: var(--white);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.32, .72, 0, 1);
  overflow-y: auto;
}
#nav-toggle:checked ~ .header .nav { transform: translateX(0); }

.nav__list { margin-bottom: 26px; }
.nav__list a {
  display: block;
  padding: 15px 4px;
  font-size: 16px;
  font-weight: 700;
  border-bottom: 1px solid var(--line);
}
.nav__list a em { display: none; }
.nav__list a:hover { color: var(--blue); }

.nav__side { display: grid; gap: 14px; }
.nav__tel { display: grid; gap: 1px; line-height: 1.3; }
.nav__tel small { font-size: 11px; font-weight: 500; letter-spacing: .06em; color: var(--text-3); }
.nav__tel strong { font-size: 24px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 105;
  background: rgba(22, 32, 43, .4);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
#nav-toggle:checked ~ .header .nav-overlay { opacity: 1; visibility: visible; }

/* ---------- 6. コンセプト ---------- */
.concept__top { display: grid; gap: 28px; }
.concept__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.concept__media::after { display: none; }
.concept .sign { margin-top: 22px; font-size: 14px; line-height: 1.8; color: var(--text-2); }
.concept .sign em { display: block; font-size: 16px; font-weight: 700; color: var(--text); margin-top: 2px; }

.features { display: grid; gap: 12px; margin-top: 40px; }
.feature {
  background: var(--bg-2);
  border-radius: var(--r);
  padding: 24px 22px;
}
.feature__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.feature__title { font-size: 17px; font-weight: 700; line-height: 1.6; margin-bottom: 8px; }
.feature__text { font-size: 14px; line-height: 1.9; color: var(--text-2); }

/* ---------- 7. 物件 ---------- */
.property-list { display: grid; gap: 22px; }


.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.tags li {
  font-size: 12px;
  color: var(--text-2);
  background: var(--bg-2);
  border-radius: 4px;
  padding: 4px 10px;
}
.tags--lg li { font-size: 12px; padding: 7px 14px; }

.property__link {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--line-2);
  font-size: 14px;
  font-weight: 700;
}
.property__link:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }

/* 物件検索への導線 */
.search-cta {
  display: grid;
  gap: 18px;
  margin-top: 34px;
  padding: 28px 24px;
  background: var(--blue);
  border-radius: var(--r);
  color: var(--white);
}
.search-cta__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #a9cdf5; margin-bottom: 8px; }
.search-cta__title { font-size: clamp(19px, 4.8vw, 25px); font-weight: 700; line-height: 1.5; margin-bottom: 8px; }
.search-cta__note { font-size: 13px; color: rgba(255, 255, 255, .82); }
.search-cta .btn { width: 100%; background: var(--white); color: var(--red); border-color: var(--white); }
.search-cta .btn:hover { background: var(--red-soft); color: var(--red-dark); }

.search-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.search-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 8px 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.search-links a::after { content: ""; }
.search-links a:hover { border-color: var(--blue); color: var(--blue); }


.company__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.company__photo figcaption { margin-top: 10px; font-size: 12px; color: var(--text-2); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stats li { background: var(--bg-2); border-radius: var(--r-sm); padding: 16px 6px; text-align: center; }
.stats strong { display: block; font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--blue); font-variant-numeric: tabular-nums; }
.stats strong small { font-size: 12px; margin-left: 1px; }
.stats span { font-size: 11px; color: var(--text-2); }

/* ---------- 9. お問い合わせ帯 ---------- */
.contact { position: relative; padding: 64px 0; background: var(--text); overflow: hidden; color: var(--white); }
.contact__media { position: absolute; inset: 0; }
.contact__media img { width: 100%; height: 100%; object-fit: cover; }
.contact__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(10, 42, 80, .93), rgba(11, 99, 206, .82));
}
.contact__inner { position: relative; z-index: 2; text-align: center; }
.contact__title { font-size: clamp(23px, 6.2vw, 36px); font-weight: 700; line-height: 1.5; margin-bottom: 16px; }
.contact__text { font-size: 15px; line-height: 1.95; color: rgba(255, 255, 255, .88); margin-bottom: 30px; }
.contact__actions { display: grid; gap: 22px; justify-items: center; }
.contact__actions .btn--gold { background: var(--white); color: var(--red); }
.contact__actions .btn--gold:hover { background: var(--red-soft); }
.contact__tel { display: grid; gap: 1px; line-height: 1.3; }
.contact__tel small { font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, .75); }
.contact__tel strong { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; }
.contact__tel span { font-size: 12px; color: rgba(255, 255, 255, .7); }

.contact__notes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .2);
  font-size: 12px;
  color: rgba(255, 255, 255, .82);
}
.contact__notes li::before { content: "✓"; margin-right: 6px; font-weight: 700; }
.contact__notes--dark { color: var(--text-2); border-top-color: var(--line); }
.contact__notes--dark li::before { color: var(--blue); }

/* ---------- 10. フッター ---------- */
.footer { background: var(--bg-2); border-top: 1px solid var(--line); padding: 40px 0 20px; }
.footer__inner { display: grid; gap: 24px; }
.footer__address { font-size: 12px; line-height: 1.9; color: var(--text-2); margin-top: 14px; }
.footer__nav ul { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13px; font-weight: 500; }
.footer__nav a:hover { color: var(--blue); }
.footer__copy {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
}

/* ---------- 11. SP固定バー ---------- */
.fixed-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 8px;
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.fixed-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 48px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 700;
}
.fixed-bar__tel { border: 1.5px solid var(--line-2); color: var(--text); }
.fixed-bar__cta { background: var(--red); color: var(--white); }

/* =========================================================
   12. 物件詳細ページ
   ========================================================= */
.page-detail { padding-top: var(--header-h); }
.note { margin-top: 14px; font-size: 13px; line-height: 1.85; color: var(--text-3); }

.breadcrumb { border-bottom: 1px solid var(--line); padding: 12px 0; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--text-3); }
.breadcrumb li + li::before { content: "›"; margin-right: 6px; }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb [aria-current] { color: var(--text-2); }

.detail__head { padding: 28px 0 6px; }
.detail__title { font-size: clamp(24px, 6.4vw, 38px); font-weight: 700; line-height: 1.45; margin-bottom: 10px; }
.detail__access { font-size: 13px; line-height: 1.85; color: var(--text-2); }


/* 概要テーブル */
.spec-table { border-top: 1px solid var(--line); }
.spec-table > div {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 12px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.85;
}
.spec-table dt { font-weight: 700; font-size: 12px; color: var(--text-2); }
.spec-table dd { margin: 0; }
.spec-table--single { display: block; }


.map-placeholder {
  display: grid;
  place-content: center;
  aspect-ratio: 16 / 10;
  margin-top: 26px;
  border-radius: var(--r);
  background: var(--bg-2);
  border: 1.5px dashed var(--line-2);
  text-align: center;
  padding: 20px;
}
.map-placeholder p { font-size: 12px; color: var(--text-2); }
.map-placeholder strong { display: block; font-size: 20px; font-weight: 700; letter-spacing: .1em; color: var(--text-3); margin-bottom: 6px; }

/* 資金計画 */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* =========================================================
   13. フォーム
   ========================================================= */
.channels { display: grid; gap: 10px; }
.channel { background: var(--bg-2); border-radius: var(--r); padding: 22px 20px; text-align: center; }
.channel__label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
.channel__tel { display: block; font-size: 30px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.channel__tel:hover { color: var(--blue); }
.channel__addr { font-size: 13px; line-height: 1.8; }
.channel__note { margin-top: 6px; font-size: 12px; color: var(--text-2); }
.channel .btn { width: 100%; }

.form { display: grid; gap: 24px; }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field { display: grid; gap: 7px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field__label { font-size: 13px; font-weight: 700; padding: 0; }
.req { color: #d0392b; margin-left: 4px; font-size: 13px; }
.field__help { font-size: 12px; line-height: 1.8; color: var(--text-3); }

.input {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  background: var(--white);
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-sm);
  transition: border-color .2s, box-shadow .2s;
}
textarea.input { min-height: 140px; resize: vertical; }
select.input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}
.input::placeholder { color: #aab4be; }
.input:hover { border-color: #9fb0bf; }
.input:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(11, 99, 206, .18); }
.input:user-invalid { border-color: #d0392b; }

.field-row { display: grid; gap: 24px; }

.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  background: var(--white);
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.choices input {
  appearance: none;
  width: 16px; height: 16px;
  margin: 0;
  border: 1.5px solid var(--line-2);
  border-radius: 50%;
  display: grid;
  place-content: center;
  flex: none;
}
.choices input::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--white); transform: scale(0); transition: transform .15s; }
.choices input:checked { background: var(--blue); border-color: var(--blue); }
.choices input:checked::after { transform: scale(1); }
.choices label:hover { border-color: #9fb0bf; }
.choices label:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }

.agree { display: grid; gap: 9px; padding: 20px; background: var(--white); border: 1.5px solid var(--line-2); border-radius: var(--r); }
.agree__box { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; font-size: 14px; font-weight: 500; }
.agree__box input {
  appearance: none;
  width: 21px; height: 21px;
  margin: 2px 0 0;
  flex: none;
  border: 1.5px solid var(--line-2);
  border-radius: 4px;
  background: var(--white);
  display: grid;
  place-content: center;
}
.agree__box input::after {
  content: "";
  width: 11px; height: 6px;
  margin-top: -3px;
  border-left: 2.5px solid var(--white);
  border-bottom: 2.5px solid var(--white);
  transform: rotate(-45deg) scale(0);
  transition: transform .15s;
}
.agree__box input:checked { background: var(--blue); border-color: var(--blue); }
.agree__box input:checked::after { transform: rotate(-45deg) scale(1); }
.agree__box a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

.form__submit { display: grid; gap: 10px; justify-items: center; text-align: center; margin-top: 4px; }
.form__submit .btn { width: 100%; }

/* =========================================================
   14. 会社紹介
   ========================================================= */
.featgrid { display: grid; gap: 26px; }
.featgroup__title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  padding-left: 11px;
  border-left: 4px solid var(--blue);
  line-height: 1.5;
}

.staff-list { display: grid; gap: 20px; }
/* 1名のときの頭文字は、写真がないぶん面積を抑える */
.staff-list--solo .staff__photo { aspect-ratio: 5 / 2; }
.staff-list--solo .staff__photo span { font-size: 46px; }
.staff { background: var(--white); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); display: grid; }
.staff__photo { display: grid; place-content: center; aspect-ratio: 4 / 3; background: var(--blue-soft); }
.staff__photo span { font-size: 60px; font-weight: 700; color: var(--blue-line); }
.staff__photo img { width: 100%; height: 100%; object-fit: cover; }
.staff__body { padding: 22px 20px 24px; display: flex; flex-direction: column; flex: 1; }
.staff__career {
  align-self: flex-start;
  padding: 4px 11px;
  border-radius: 4px;
  background: var(--blue);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 12px;
}
.staff__name { font-size: 22px; font-weight: 700; line-height: 1.4; margin-bottom: 12px; }
.staff__name em { display: block; font-size: 12px; font-weight: 400; color: var(--text-3); margin-top: 3px; }
.staff__roles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.staff__roles li { font-size: 12px; font-weight: 700; color: var(--text-2); background: var(--bg-2); border-radius: 4px; padding: 4px 10px; }
.staff__msg { font-size: 14px; line-height: 1.95; color: var(--text-2); margin-bottom: 16px; }
.staff__area { padding: 13px 15px; background: var(--bg-2); border-radius: var(--r-sm); margin-bottom: 18px; font-size: 12px; line-height: 1.8; }
.staff__area dt { font-weight: 700; font-size: 11px; color: var(--blue); margin-bottom: 2px; }
.staff__area dd { margin: 0; color: var(--text-2); }
.staff .property__link { margin-top: auto; }

/* 規約本文 */
.prose { font-size: 15px; line-height: 1.95; }
.prose p { margin-bottom: 20px; }
.prose h2 { font-size: 18px; font-weight: 700; margin: 38px 0 12px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.prose ul { margin: 0 0 20px; }
.prose li { position: relative; padding-left: 17px; margin-bottom: 3px; }
.prose li::before { content: ""; position: absolute; left: 0; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-line); }
.prose__box { padding: 20px 22px; background: var(--bg-2); border-radius: var(--r); }
.prose__box p { margin: 0; font-size: 14px; }
.prose__box strong { font-size: 16px; font-weight: 700; }
.prose__date { margin-top: 36px; font-size: 12px; color: var(--text-3); text-align: right; }

/* ---------- 45. 家賃と購入をならべる試算 ---------- */
.rentsim { display: grid; gap: 20px; }

.rentsim__inputs {
  display: grid;
  gap: 22px;
  padding: 24px 20px;
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.rentsim__label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  letter-spacing: .04em;
}
.rentsim__value {
  display: block;
  margin: 4px 0 10px;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.rentsim__value i { font-size: 15px; font-weight: 700; font-style: normal; margin-left: 3px; color: var(--text-2); }
.rentsim__field--term .choices { margin-top: 8px; }

/* 対比する2枚 */
.rentsim__panels { display: grid; gap: 14px; }
.rspanel {
  padding: 22px 20px 24px;
  border-radius: var(--r);
  background: var(--white);
  box-shadow: var(--shadow);
  border-top: 4px solid var(--line-2);
}
.rspanel--buy { border-top-color: var(--red); }
.rspanel__cap {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-2);
  letter-spacing: .04em;
}
.rspanel--buy .rspanel__cap { color: var(--red); }
.rspanel__note2 { margin-top: 12px; font-size: 12px; color: var(--text-3); }
.rspanel__big {
  margin-top: 2px;
  font-size: 40px;
  font-weight: 900;
  line-height: 1.05;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.rspanel__big i { font-size: 16px; font-weight: 700; font-style: normal; margin-left: 4px; }
.rspanel__bar {
  margin: 14px 0 18px;
  height: 8px;
  border-radius: 4px;
  background: var(--bg-2);
  overflow: hidden;
}
.rspanel__bar span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--line-2);
  transform-origin: left center;
  animation: rs-grow .7s cubic-bezier(.22,.9,.3,1) both;
}
.rspanel__bar--buy span { background: var(--red); }
@keyframes rs-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.rspanel__cap2 { font-size: 12px; color: var(--text-3); }
.rspanel__left {
  margin-top: 4px;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.3;
}
.rspanel__left--none { color: var(--text-3); }
.rspanel__left--house { color: var(--red); }
.rspanel__sub {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--text-2);
}
.rspanel__sub strong { font-size: 17px; font-weight: 900; color: var(--text); font-variant-numeric: tabular-nums; }

.rspanel__warn {
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: var(--bg-2);
  border-left: 3px solid var(--line-2);
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-2);
}
.rspanel__warn--ng { background: var(--red-soft); border-left-color: var(--red); color: var(--red-dark); font-weight: 700; }

/* 結論の一行 */
.rentsim__punch {
  padding: 20px 18px;
  border-radius: var(--r);
  background: var(--text);
  color: #fff;
  text-align: center;
  font-size: 14px;
  line-height: 1.9;
}
.rentsim__punch strong { color: #ffd9d6; }


@media (prefers-reduced-motion: reduce) {
  .rspanel__bar span { animation: none; }
}

/* ---------- 46. 読ませる文章のサイズを上げる ----------
   お客様は住宅ローンや相続で悩む30〜70代。12〜13pxは小さすぎた。
   見出しはそのままに、読ませる部分だけ引き上げる。 */
.guide-list dd,
.steps li em,
.cando__col li,
.detail__access,
.detail__monthly,
.rentsim__honestFoot,
.rspanel__warn,
.faq__body p,
.property__access {
  font-size: 14px;
  line-height: 1.9;
}
.faq__item summary { font-size: 15px; }
.footer__nav ul,
.footer__col a { font-size: 13px; }
.footer__address { font-size: 13px; }
.breadcrumb ol { font-size: 13px; }
.contact__notes { font-size: 13px; }

/* ---------- 47. 強調をきかせるために、太字を減らす ----------
   700が179回・400が83回で、太字のほうが多かった。
   全部が強調されていると、何も強調されていないのと同じになる。 */
.property__spec dd,
.company__table dt,
.detail__spec dt,
.sim__label,
.rentsim__label,
.footer__nav ul { font-weight: 500; }
.faq__item summary { font-weight: 700; }
.guide-list dd strong,
.steps li em strong,
.lead strong,
.prose strong,
.faq__body strong { font-weight: 700; }

/* ---------- 48. 指で押せる大きさにする ----------
   40px未満のタップ領域が95個あった。Googleの推奨は48px、Appleは44pt。 */
.chip,
.area-links a,
.citylist a,
.choices label,
.gallery__thumbs label { min-height: 44px; display: inline-flex; align-items: center; }
.footer__col a,
.nav__list a { display: inline-block; padding-block: 9px; }

/* ---------- 49. ヒーロー直下の信頼の帯 ----------
   スクロールしないと何屋か分からない状態だったので、先に事実だけ置く */
.trustbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 14px var(--gutter);
  background: var(--text);
  color: rgba(255,255,255,.86);
  font-size: 12px;
  line-height: 1.7;
  justify-content: center;
  text-align: center;
}
.trustbar li { position: relative; }
.trustbar b { color: #fff; font-weight: 700; }

/* ---------- 50. 一行が長くなりすぎないようにする ----------
   大きい画面で、詳細ページの導入文が1行75文字になっていた。
   日本語は35〜45文字が読みやすい。 */
.lead { max-width: 42em; }
.section__head:not(.section__head--left) .lead { margin-inline: auto; }
.detail__head .lead { max-width: 40em; }
.prose p, .prose li { max-width: 42em; }

/* ---------- 51. LINEのボタン ----------
   .btn--line は「線（枠だけ）」の意味で使っていたので、
   LINE用は別に用意する。緑はLINEのブランドカラー #06C755。 */
.btn--lineapp {
  background: #06C755;
  color: #fff;
  border-color: #06C755;
  gap: 8px;
}
.btn--lineapp:hover { background: #05b34c; border-color: #05b34c; color: #fff; }
.btn--lineapp svg { flex: none; }

/* ---------- 52. 読んでいる途中の差し込み ----------
   本文を7画面読まないと押せるものが出てこなかったので、
   気持ちが動くところに、そっと置く。
   売り込みに見えないよう、赤い帯にはしない。 */
.midcta {
  margin: 34px 0;
  padding: 26px 0;
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.midcta__lead {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--text);
}
.midcta__sub {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-2);
}
.midcta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 18px;
}
.midcta__form {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 4px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.midcta__form:hover { color: var(--red); }
.midcta__note {
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-3);
}
/* 砂色の節のあとに来たときは、白のままだと浮くので少しだけ寄せる */
.section--sand + .midcta { border-top-color: var(--line-2); }

/* ---------- 53. お役立ちコラム ---------- */
.postlist { display: grid; gap: 14px; }
.post {
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.post__link {
  display: block;
  padding: 22px 20px 24px;
  border-left: 4px solid var(--red);
  transition: background .2s;
}
.post__link:hover { background: var(--bg); }
.post__cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--red);
  background: var(--red-soft);
  border-radius: 3px;
  padding: 4px 10px;
  margin-bottom: 12px;
}
.post__ttl {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.55;
  color: var(--text);
}
.post__lead {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-2);
}
.post__date { margin-top: 14px; font-size: 12px; color: var(--text-3); }
.post__meta { margin-top: 10px; font-size: 12px; color: var(--text-3); }

/* 記事内の表 */
.tablewrap { overflow-x: auto; margin-top: 18px; -webkit-overflow-scrolling: touch; }
.simtable {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  background: var(--white);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
  font-size: 14px;
}
.simtable caption {
  caption-side: top;
  text-align: left;
  font-size: 12px;
  color: var(--text-3);
  padding-bottom: 8px;
}
.simtable th, .simtable td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.simtable thead th {
  background: var(--bg-2);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  white-space: nowrap;
}
.simtable tbody tr:last-child th,
.simtable tbody tr:last-child td { border-bottom: 0; }
.simtable td strong { font-size: 16px; font-weight: 900; color: var(--text); }
.simtable td { font-variant-numeric: tabular-nums; }

/* ---------- 54. 段落のあいだに余白を入れる ----------
   連続する段落の margin-bottom が 0 だったため、文章がくっついて
   「壁」に見えていた。文字量は変えずに、目が休める場所を作る。
   ※ 隣に段落が続くときだけ空ける（最後の段落の下は空けない） */
.lead + .lead,
.lead + p:not([class]),
p:not([class]) + p:not([class]),
p:not([class]) + .lead,
.prose p + p,
.faq__body p + p,
.cando__note + .lead,
.lead + .cando__note {
  margin-top: 1.15em;
}

/* 注記の前は、少し離す */
.lead + .note,
p:not([class]) + .note,
.tablewrap + .note,
ul + .note,
dl + .note { margin-top: 16px; }

/* 見出しの直後の文章は、詰めすぎない */
.section__head .lead + .lead { margin-top: .9em; }

/* FAQの答えが1段落で長くなりがちなので、行間を少しゆるめる */
.faq__body p { line-height: 2.0; }


/* =========================================================
   タブレット（768px〜）
   ========================================================= */
@media (min-width: 768px) {
  .section { padding: 90px 0; }
  .section__head { margin-bottom: 46px; }
  .post__link { padding: 26px 28px 28px; }
  .post__ttl { font-size: 22px; }
  .post__lead { font-size: 15px; }
  .simtable { font-size: 15px; }
  .midcta { margin: 44px 0; padding: 34px 0; }
  .midcta__lead { font-size: 20px; }
  .midcta__sub { font-size: 15px; }
  .trustbar { font-size: 13px; gap: 8px 28px; padding: 15px var(--gutter); }
  .features { grid-template-columns: repeat(2, 1fr); }
  .lead { font-size: 16px; }
  .prose, .faq__body { font-size: 16px; }
  .guide-list dd, .steps li em, .cando__col li, .faq__body p { font-size: 15px; }
  .option__text, .staff__msg, .feature__text { font-size: 15px; }
  .contact__text { font-size: 16px; }
  .rentsim__inputs { grid-template-columns: 1fr 1fr; gap: 26px 34px; padding: 30px 28px; }
  .rentsim__field--term { grid-column: 1 / -1; }
  .rentsim__panels { grid-template-columns: 1fr 1fr; gap: 18px; }
  .rspanel { padding: 26px 26px 28px; }
  .rspanel__big { font-size: 48px; }
  .rentsim__punch { font-size: 16px; padding: 24px; }
:root { --gutter: 32px; --header-h: 68px; }
body { font-size: 16px; padding-bottom: 0; }

.sp-only { display: none; }

.section { padding: 88px 0; }
.section__head { margin-bottom: 44px; }
.lead { font-size: 15px; }


.concept__top { grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.features { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature { padding: 28px 24px; }

.property-list { grid-template-columns: repeat(2, 1fr); }

.search-cta { grid-template-columns: 1fr auto; align-items: center; gap: 36px; padding: 36px 40px; margin-top: 44px; }
.search-cta .btn { width: auto; white-space: nowrap; }
.search-links { grid-template-columns: repeat(3, 1fr); gap: 10px; }


.contact { padding: 100px 0; }
.contact__actions { display: flex; align-items: center; justify-content: center; gap: 44px; }

.footer__inner { grid-template-columns: 1fr; align-items: start; gap: 30px; }
.footer__nav ul { justify-content: flex-start; }
.fixed-bar { display: none; }

  /* 詳細 */
.detail__head { padding: 40px 0 6px; }
.spec-table { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.spec-table > div { grid-template-columns: 124px 1fr; }
.spec-table--single { display: block; }

  /* フォーム */
.channels { grid-template-columns: repeat(3, 1fr); }
.channel { padding: 28px 22px; }
.field-row { grid-template-columns: 1fr 1fr; }
.form__submit .btn { width: auto; min-width: 320px; }
.input { font-size: 15px; }

  /* 会社紹介 */
.featgrid { grid-template-columns: 1fr 1fr; gap: 30px 40px; }
.staff-list { grid-template-columns: 1fr 1fr; }
.staff-list--solo { grid-template-columns: 1fr; max-width: 760px; }
.staff-list--solo .staff { grid-template-columns: 250px 1fr; }
.staff-list--solo .staff__photo { aspect-ratio: auto; }
}

/* =========================================================
   PC（1024px〜）
   ========================================================= */
@media (min-width: 1024px) {
  .features { grid-template-columns: repeat(4, 1fr); }
:root { --gutter: 40px; --header-h: 78px; }
.pc-only { display: inline; }

  /* ナビ横並び */
.nav-btn,
.nav-overlay { display: none; }
.nav {
    position: static;
    width: auto; height: auto;
    padding: 0;
    background: transparent;
    transform: none;
    overflow: visible;
    display: flex;
    align-items: center;
    gap: 32px;
  }
.nav__list { display: flex; gap: 26px; margin: 0; }
.nav__list a { padding: 0; border: 0; font-size: 14px; font-weight: 700; }
.nav__list a:hover { color: var(--blue); }
.nav__side { grid-auto-flow: column; align-items: center; gap: 18px; }
.nav__tel strong { font-size: 21px; }
.logo__mark svg { width: 34px; height: 34px; }
.logo__text strong { font-size: 18px; }

.section { padding: 120px 0; }
.heading { font-size: clamp(28px, 2.4vw, 36px); }

.concept__top { grid-template-columns: 1fr 1.1fr; gap: 64px; }
.property-list { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}

/* =========================================================
   アクセシビリティ
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =========================================================
   15. エリアページ
   ========================================================= */
.area__hero { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); }

.access-table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 14px; }
.access-table th,
.access-table td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.access-table thead th { background: var(--white); font-size: 12px; font-weight: 700; color: var(--text-2); }
.access-table td strong { font-size: 21px; font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; }

.stats--wide { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.stats--wide li { padding: 20px 10px; }
.stats--wide strong { font-size: 24px; }

/* FAQ */
.faq { display: grid; gap: 10px; }
.faq__item { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 52px 18px 20px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
  position: relative;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before,
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 22px; top: 50%;
  width: 13px; height: 2px;
  background: var(--blue);
  border-radius: 2px;
  transition: transform .25s;
}
.faq__item summary::after { transform: rotate(90deg); }
.faq__item[open] summary::after { transform: rotate(0); }
.faq__item summary:hover { color: var(--blue); }
.faq__body { padding: 0 20px 20px; font-size: 15px; line-height: 1.95; color: var(--text-2); }

/* エリアリンク */
.area-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.area-links a,
.area-links span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 8px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.area-links a:hover { border-color: var(--blue); color: var(--blue); }
.area-links a.is-current { background: var(--blue); border-color: var(--blue); color: var(--white); }
.area-links span { color: var(--text-3); background: var(--bg-2); border-style: dashed; }
.area-links span em { font-size: 11px; font-weight: 500; }

@media (min-width: 768px) {
.stats--wide { grid-template-columns: repeat(4, 1fr); }
.stats--wide strong { font-size: 28px; }
.area-links { grid-template-columns: repeat(3, 1fr); }
.faq__item summary { font-size: 16px; padding: 20px 56px 20px 24px; }
.faq__body { padding: 0 24px 22px; }
}
@media (min-width: 1024px) {
.area-links { grid-template-columns: repeat(6, 1fr); }
}


.sim__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--blue-soft);
  outline: none;
  cursor: pointer;
}
.sim__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--blue);
  border: 3px solid var(--white);
  box-shadow: 0 2px 8px rgba(11, 99, 206, .4);
  cursor: pointer;
}
.sim__range::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue);
  border: 3px solid var(--white);
  box-shadow: 0 2px 8px rgba(11, 99, 206, .4);
  cursor: pointer;
}
.sim__range:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.sim__scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--text-3); }


/* 路線リスト（エリアページ） */
.lines { border-top: 1px solid var(--line); margin-top: 4px; }
.lines li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 3px 12px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.lines__cat {
  grid-row: span 2;
  align-self: center;
  min-width: 46px;
  padding: 4px 9px;
  border-radius: 4px;
  background: var(--blue);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.lines strong { font-weight: 700; }
.lines em { font-size: 12px; color: var(--text-2); }

/* 支払いシミュレーターへの誘導バンド */
.budget-band {
  display: grid;
  gap: 14px;
  margin-top: 26px;
  padding: 22px 20px;
  background: var(--blue-soft);
  border-radius: var(--r);
}
.budget-band p { font-size: 14px; font-weight: 700; color: var(--blue-dark); }
.budget-band .btn { width: 100%; }

@media (min-width: 768px) {
.lines { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.budget-band { grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: 24px 28px; }
.budget-band .btn { width: auto; white-space: nowrap; }
}

/* =========================================================
   17. 他社物件の見学 ／ 住宅ローン相談
   ========================================================= */
.anyprop__box {
  background: var(--blue-soft);
  border-radius: var(--r);
  padding: 30px 22px;
}
.anyprop__box .lead { color: var(--text); }

/* ステップ */
.steps { display: grid; gap: 10px; margin-top: 26px; counter-reset: st; }
.steps li {
  background: var(--white);
  border-radius: var(--r-sm);
  padding: 18px 20px 18px 62px;
  position: relative;
}
.steps__no {
  position: absolute;
  left: 18px; top: 18px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-content: center;
}
/* 見出し（li の直下の strong）だけ。文中の強調に当てると、
   文がそこで切れて3つの塊に分かれてしまいます。 */
.steps li > strong { display: block; font-size: 15px; font-weight: 700; line-height: 1.6; }
.steps em { display: block; margin-top: 3px; font-size: 13px; line-height: 1.8; color: var(--text-2); }
.steps--flow li { background: var(--white); }

/* こんなご相談 */
.cases { display: grid; gap: 10px; }
.case {
  background: var(--white);
  border-radius: var(--r);
  padding: 18px 20px;
  border-left: 4px solid var(--blue);
}
.case strong { display: block; font-size: 15px; font-weight: 700; line-height: 1.6; margin-bottom: 5px; }
.case em { display: block; font-size: 13px; line-height: 1.85; color: var(--text-2); }

/* できること・できないこと */
.cando { display: grid; gap: 16px; }
.cando__col { border-radius: var(--r); padding: 24px 22px; }
.cando__col--yes { background: var(--blue-soft); }
.cando__col--no { background: var(--bg-2); border: 1px solid var(--line); }
.cando__title { font-size: 17px; font-weight: 700; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(22,32,43,.12); }
.cando__col--yes .cando__title { color: var(--blue-dark); }
.cando__col--no .cando__title { color: var(--text-2); }
.cando ul { display: grid; gap: 8px; }
.cando li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.8; }
.cando__col--yes li::before {
  content: "";
  position: absolute; left: 4px; top: 9px;
  width: 11px; height: 6px;
  border-left: 2.5px solid var(--blue);
  border-bottom: 2.5px solid var(--blue);
  transform: rotate(-45deg);
}
.cando__col--no li::before {
  content: "";
  position: absolute; left: 4px; top: 12px;
  width: 12px; height: 2px;
  background: var(--text-3);
}
.cando__note { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.85; color: var(--text-2); }

/* お約束 */
.promise { display: grid; gap: 12px; }
.promise li { background: var(--bg-2); border-radius: var(--r); padding: 20px 22px; }
.promise strong { display: block; font-size: 16px; font-weight: 700; margin-bottom: 5px; }
.promise span { font-size: 13px; line-height: 1.85; color: var(--text-2); }

@media (min-width: 768px) {
.anyprop__box { padding: 44px 48px; }
.steps { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.steps--flow { grid-template-columns: repeat(4, 1fr); }
.cases { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cando { grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: start; }
.cando__col { padding: 30px 28px; }
.promise { grid-template-columns: repeat(3, 1fr); }
}


/* 空き家ページ：3つの選び方 */
.options { display: grid; gap: 14px; }
.option {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px 22px 22px;
  box-shadow: var(--shadow);
}
.option__tag {
  display: grid;
  place-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 14px;
}
.option__title { font-size: 18px; font-weight: 700; line-height: 1.5; margin-bottom: 10px; }
.option__text { font-size: 14px; line-height: 1.9; color: var(--text-2); margin-bottom: 16px; }
.option__pn { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; }
.option__pn > div { display: grid; gap: 2px; }
.option__pn dt { font-size: 11px; font-weight: 700; color: var(--blue); }
.option__pn dd { margin: 0; font-size: 12px; line-height: 1.8; color: var(--text-2); }

@media (min-width: 768px) {
.options { grid-template-columns: repeat(3, 1fr); gap: 18px; }
.options--2 { grid-template-columns: repeat(2, 1fr); }
.options--3 { grid-template-columns: repeat(3, 1fr); }
.option { padding: 28px 24px 24px; }
}

/* =========================================================
   19. ヒーロー（イラスト背景＋検索パネル）
   ========================================================= */
.hero {
  position: relative;
  padding: calc(var(--header-h) + 26px) 0 0;
  background:
    url("../images/tochigi-motifs.svg") center top / cover no-repeat,
    var(--bg);
  overflow: hidden;
}

/* キャッチ */
.hero__catch {
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 var(--gutter) 24px;
  text-align: center;
}
.hero__eyebrow {
  display: inline-flex;
  padding: 6px 16px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
}
.hero__h1 { display: grid; gap: 8px; justify-items: center; margin-bottom: 12px; }
.hero__h1 span {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 2px 12px rgba(34, 48, 58, .10);
  font-size: clamp(20px, 5.4vw, 38px);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: .01em;
  color: var(--text);
}

/* 検索パネル */
.finder {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 22px 18px 24px;
  background: var(--white);
  border-radius: 22px;
  box-shadow: 0 4px 14px rgba(34, 48, 58, .07), 0 24px 50px rgba(34, 48, 58, .12);
  display: grid;
  gap: 24px;
}
.finder__ttl {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 900;
  margin-bottom: 12px;
}

/* 地図 */
.mapbox { position: relative; }

.mapbox__note { margin-top: 8px; font-size: 11px; color: var(--text-3); }

/* 種別・こだわり */
.finder__cols { display: grid; gap: 22px; }
.pills { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pills a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--bg-2);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  transition: background-color .2s, color .2s;
}
.pills a:hover { background: var(--blue); color: var(--white); }
.finder__go { width: 100%; border-radius: 999px; }
.finder__note { margin-top: 8px; font-size: 12px; color: var(--text-2); }

/* クイックリンク */

@media (min-width: 768px) {
.hero { padding-top: calc(var(--header-h) + 40px); }
.hero__catch { padding-bottom: 30px; }
.finder { padding: 28px 28px 30px; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.finder__cols { gap: 24px; }
.pills { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (min-width: 1024px) {
.hero { padding-top: calc(var(--header-h) + 52px); }
.finder { padding: 34px 36px 36px; gap: 42px; }
}

/* 背景イラストが小さい画面でも見えるように */
.hero {
  background:
    url("../images/tochigi-motifs.svg") center top / 1100px auto no-repeat,
    var(--bg);
}
/* 県外の市は色を変えて区別 */

@media (min-width: 768px) {
.hero { background-size: 1500px auto; }
}
@media (min-width: 1600px) {
.hero { background-size: 100% auto; }
}

/* PCでヒーローが縦に伸びすぎないよう地図幅を抑える */
@media (min-width: 1024px) {
.mapbox { max-width: 460px; margin-inline: auto; }
.finder { align-items: center; }
}

/* =========================================================
   20. ヒーローから青を排除（生成り＋赤＋緑で統一）
   ========================================================= */

/* 県外の市のピンは緑で区別 */

/* 種別・こだわりのボタン */
.pills a:hover { background: var(--red); color: var(--white); }

/* =========================================================
   21. ヒーローのアニメーション
   ========================================================= */
/* 背景イラストがゆっくり漂う */
@keyframes hero-drift {
  from { background-position: center top; }
  to   { background-position: center 70px; }
}
.hero { animation: hero-drift 26s ease-in-out infinite alternate; }

/* 文字は下から順に立ち上がる */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.hero__eyebrow,
.hero__h1 span,
.hero__sub,
.finder {
  opacity: 0;
  animation: rise-in .7s cubic-bezier(.2, .8, .3, 1) forwards;
}
.hero__eyebrow { animation-delay: .05s; }
.hero__h1 span:nth-child(1) { animation-delay: .18s; }
.hero__h1 span:nth-child(2) { animation-delay: .30s; }
.finder { animation-delay: .54s; }

/* いちごがゆっくり呼吸する */

/* ピンはふわっと浮く */

@media (prefers-reduced-motion: reduce) {
  .hero,
  .hero__eyebrow, .hero__h1 span, .hero__sub, .finder { animation: none; opacity: 1; }
}

/* =========================================================
   22. 浮いていた青を暖色に
   ========================================================= */
/* 他社物件の見学 */
.anyprop__box { background: var(--red-soft); }
.anyprop__box .label { color: var(--red-dark); }
.steps__no { background: var(--red); }
.steps li { background: var(--white); }

.sim__range { background: var(--red-soft); }
.sim__range::-webkit-slider-thumb { background: var(--red); box-shadow: 0 2px 8px rgba(224, 69, 60, .4); }
.sim__range::-moz-range-thumb { background: var(--red); box-shadow: 0 2px 8px rgba(224, 69, 60, .4); }
.sim__range:focus-visible { outline-color: var(--red); }

/* まずは実際にご覧ください（問い合わせ帯） */
.contact__media::after {
  background: linear-gradient(155deg, rgba(48, 30, 27, .90) 0%, rgba(150, 44, 37, .84) 55%, rgba(196, 54, 46, .82) 100%);
}
.contact__inner .label--light { color: #f7c9c5; }

/* 選択中のラジオ・チェックも赤に */
.choices input:checked { background: var(--red); border-color: var(--red); }
.choices label:has(input:checked) { border-color: var(--red); background: var(--red-soft); }
.choices input:focus-visible { outline-color: var(--red); }
.agree__box input:checked { background: var(--red); border-color: var(--red); }
.agree__box input:focus-visible { outline-color: var(--red); }
.agree__box a { color: var(--red-dark); }
.input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(224, 69, 60, .18); }

/* =========================================================
   23. 青をやめ、赤の階調でまとめる／濃い赤をやわらげる
   ========================================================= */
:root {
  --rose:      #F6ADA7;   /* やさしいピンク */
  --rose-soft: #FCE9E7;
  --rose-deep: #B9483F;   /* 落ち着いた赤 */
}

/* 旧「青」の役どころをピンク〜赤に置き換え */
.logo__mark { color: var(--red); }
.search-cta { background: var(--rose-deep); }
.search-cta__eyebrow { color: var(--rose); }
.lines__cat { background: var(--rose-deep); }
.staff__career { background: var(--rose-deep); }
.staff__area dt { color: var(--red-dark); }
.staff__personal-ttl { color: var(--red-dark); }
.staff__photo { background: var(--rose-soft); }
.staff__photo span { color: var(--rose); }
.featgroup__title { border-left-color: var(--red); }
.option__tag { background: var(--red); }
.option__pn dt { color: var(--red-dark); }
.case { border-left-color: var(--red); }
.cando__col--yes { background: var(--red-soft); }
.cando__col--yes .cando__title { color: var(--rose-deep); }
.cando__col--yes li::before { border-color: var(--red); }
.channel__label { color: var(--red-dark); }
.channel__tel:hover { color: var(--red); }
.access-table td strong { color: var(--rose-deep); }
.stats strong { color: var(--rose-deep); }
.prose li::before { background: var(--rose); }
.prose__box { border-left: 3px solid var(--red); }
.faq__item summary::before,
.faq__item summary::after { background: var(--red); }
.faq__item summary:hover { color: var(--red-dark); }
.budget-band { background: var(--red-soft); }
.budget-band p { color: var(--rose-deep); }
.area-links a.is-current { background: var(--red); border-color: var(--red); }
.area-links a:hover { border-color: var(--red); color: var(--red-dark); }
.search-links a:hover { border-color: var(--red); color: var(--red-dark); }
.property__link:hover { background: var(--red); border-color: var(--red); }
.pills a:hover { background: var(--red); }

/* 下部の帯を落ち着いた色合いに */
.contact__media::after {
  background: linear-gradient(155deg, rgba(62, 44, 42, .88) 0%, rgba(120, 66, 62, .80) 55%, rgba(150, 84, 78, .76) 100%);
}
.contact__inner .label--light { color: var(--rose); }
.contact__notes li::before { color: var(--rose); }

/* 市町の一覧 */
.citylist { display: grid; gap: 8px; margin-top: 16px; }
.citylist__grp { border: 1px solid var(--line); border-radius: 12px; background: var(--white); overflow: hidden; }
.citylist__grp summary {
  list-style: none;
  cursor: pointer;
  padding: 13px 40px 13px 16px;
  font-size: 14px;
  font-weight: 700;
  position: relative;
}
.citylist__grp summary::-webkit-details-marker { display: none; }
.citylist__grp summary em { font-size: 11px; font-weight: 500; color: var(--text-3); margin-left: 8px; }
.citylist__grp summary::after {
  content: "";
  position: absolute;
  right: 18px; top: 50%;
  width: 8px; height: 8px;
  margin-top: -5px;
  border-right: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  transform: rotate(45deg);
  transition: transform .25s;
}
.citylist__grp[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.citylist__grp ul { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 16px; }
.citylist__grp a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--bg-2);
  font-size: 12px;
  font-weight: 700;
}
.citylist__grp a:hover { background: var(--red); color: var(--white); }

@keyframes floaty {
  0%   { transform: translateY(0)     rotate(var(--rot, 0deg)); }
  100% { transform: translateY(-26px) rotate(calc(var(--rot, 0deg) + 8deg)); }
}
.hero__catch,
.finder { position: relative; z-index: 1; }

/* 見出しは奥から飛び出してくる */
@keyframes plate-in {
  0%   { opacity: 0; transform: translateY(26px) scale(.9); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
.hero__h1 span { animation: plate-in .8s cubic-bezier(.2, .9, .3, 1) forwards; }
.hero__h1 span:nth-child(1) { animation-delay: .15s; }
.hero__h1 span:nth-child(2) { animation-delay: .30s; }

/* バッジは弾んで出る */
@keyframes badge-in { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
.hero__eyebrow { animation: badge-in .6s cubic-bezier(.2, 1.3, .4, 1) forwards; animation-delay: .05s; }

/* 検索パネルはせり上がる */
@keyframes panel-in { from { opacity: 0; transform: translateY(38px); } to { opacity: 1; transform: none; } }
.finder { animation: panel-in .85s cubic-bezier(.2, .9, .3, 1) forwards; animation-delay: .5s; }

/* いちごはゆっくり呼吸 */

@media (prefers-reduced-motion: reduce) {
.fm,
.hero__h1 span,
.hero__eyebrow,
.finder { animation: none; opacity: 1; }
}

/* ============================================================
   27. ヒーロー：動く風景（空・太陽・雲・鳥・丘）
   ============================================================ */
.hero { background: linear-gradient(180deg, #FEF6F0 0%, #FCE9E7 46%, #F7F1E4 100%); }
@media (min-width: 768px) {.hero { background-size: auto; } }
@media (min-width: 1600px) {.hero { background-size: auto; } }


@keyframes sun-pulse {
  from { transform: scale(1);    opacity: .85; }
  to   { transform: scale(1.12); opacity: 1; }
}

@keyframes cloud-run {
  from { transform: translateX(calc(100vw + 60px)); }
  to   { transform: translateX(-220px); }
}

@keyframes bird-run {
  from { transform: translate(calc(100vw + 40px), 0); }
  50%  { transform: translate(40vw, -18px); }
  to   { transform: translate(-60px, 6px); }
}
@keyframes bird-flap { from { border-radius: 60% 60% 0 0 / 100% 100% 0 0; } to { border-radius: 60% 60% 0 0 / 40% 40% 0 0; } }

@keyframes hill-sway {
  from { transform: translateX(-1.6%); }
  to   { transform: translateX(1.6%); }
}

/* ============================================================
   28. ヒーロー：見出しの光沢と、回り続けるキャッチ
   ============================================================ */
.hero__h1 span { position: relative; overflow: hidden; }
.hero__h1 span::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .85), rgba(255, 255, 255, 0));
  transform: skewX(-18deg);
  animation: shine 6.5s ease-in-out infinite;
  animation-delay: var(--sd, 1.4s);
  pointer-events: none;
}
.hero__h1 span:nth-child(2)::after { --sd: 1.75s; }
@keyframes shine {
  0%   { left: -60%; }
  26%  { left: 130%; }
  100% { left: 130%; }
}

.hero__catch,
.finder { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .hero__sun, .cl, .bd, .hl--1, .hl--2, .hl--3,
.hero__h1 span::after { animation: none; }
}

/* ヒーロー上部（風景＋キャッチ）を一つの箱にして、丘をカードの縁に合わせる */
.hero { padding-top: 0; }
.hero__top { position: relative; padding-top: calc(var(--header-h) + 26px); }


/* ============================================================
   29. エリアマップ（いちごのイラスト＋市名のクリック領域）
   ============================================================ */
.mapbox {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  background: #EAF2DC;
}
.mapbox__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mapbox__hit { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.mapbox__hit li {
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--w);
  height: 3.6%;
}
.mapbox__hit a {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  /* ラベルは画像側に描かれているので、当たり判定だけを重ねる */
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: 0 0 0 0 rgba(224, 69, 60, 0);
  transition: box-shadow .18s ease, background-color .18s ease;
}
.mapbox__hit a:hover,
.mapbox__hit a:focus-visible {
  background: rgba(224, 69, 60, .16);
  box-shadow: 0 0 0 3px rgba(224, 69, 60, .85);
  outline: none;
}

/* ============================================================
   30. ヒーローのカードカルーセル（止まらず流れ続ける）
   ============================================================ */
.promo {
  position: relative;
  z-index: 2;
  margin-top: 20px;
}
.promo__viewport { overflow: hidden; }
.promo__chk { position: absolute; opacity: 0; pointer-events: none; }

.promo__track {
  display: flex;
  width: max-content;
  animation: promo-run var(--promo-dur, 32s) linear infinite;
  will-change: transform;
}
@keyframes promo-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* カードを押したいときは、指を置けば止まる */
.promo:focus-within .promo__track,
.promo__chk:checked ~ .promo__viewport .promo__track { animation-play-state: paused; }

.promo__list {
  display: flex;
  gap: var(--gap, 78px);
  padding: 4px calc(var(--gap, 78px) / 2) 10px;
  margin: 0;
  list-style: none;
}
.promo__list > li { flex: 0 0 auto; }

/* カード本体 */
.pc {
  position: relative;
  display: grid;
  align-content: start;
  gap: 4px;
  width: 216px;
  min-height: 148px;
  padding: 16px 16px 42px;
  border-radius: 20px;
  text-decoration: none;
  color: var(--text);
  box-shadow: 0 6px 20px rgba(34, 48, 58, .13);
  transition: transform .22s cubic-bezier(.2, .9, .3, 1), box-shadow .22s ease;
  overflow: hidden;
}
.pc:hover,
.pc:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(34, 48, 58, .22);
  outline: none;
}
.pc__ttl {
  font-size: 17px;
  font-weight: 900;
  line-height: 1.42;
  letter-spacing: .01em;
}
.pc__sub { font-size: 12px; font-weight: 700; opacity: .82; line-height: 1.5; }
.pc__go {
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--rose-deep);
  font-size: 14px;
  font-weight: 900;
  transition: transform .22s ease;
}
.pc:hover .pc__go { transform: translateX(3px); }

/* カードの色（写真がないぶん、色と余白で見せる） */
.pc--1 { background: linear-gradient(150deg, #FF8B84, #E0453C); color: #fff; }
.pc--2 { background: linear-gradient(150deg, #FFE0A6, #F5B301); color: #4A3712; }
.pc--3 { background: linear-gradient(150deg, #FFFFFF, #FBEFEA); color: var(--text); border: 1px solid var(--line); }
.pc--4 { background: linear-gradient(150deg, #B6DC9C, #6E8F5E); color: #fff; }
.pc--5 { background: linear-gradient(150deg, #FBB7B1, #E86A63); color: #fff; }
.pc--6 { background: linear-gradient(150deg, #FFF3E2, #F0DCBB); color: #4A3712; }
.pc--2 .pc__go,
.pc--6 .pc__go { color: #A6761A; }
.pc--3 .pc__go { background: var(--rose-soft); }
.pc--4 .pc__go { color: #4F6B42; }

/* 止める／動かすボタン */
.promo__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 2px 8px rgba(34, 48, 58, .14);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}
.promo__btn-play {
  width: 10px; height: 10px;
  border-left: 3px solid var(--rose-deep);
  border-right: 3px solid var(--rose-deep);
}
.promo__chk:checked ~ .promo__foot .promo__btn .promo__btn-play {
  border: none;
  border-left: 9px solid var(--rose-deep);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  width: 0; height: 0;
}
.promo__chk:checked ~ .promo__foot .promo__btn .promo__btn-txt { font-size: 0; }
.promo__chk:checked ~ .promo__foot .promo__btn .promo__btn-txt::after { content: "スライドを動かす"; font-size: 11px; }
.promo__chk:focus-visible ~ .promo__foot .promo__btn { outline: 2px solid var(--rose-deep); outline-offset: 2px; }

@media (min-width: 768px) {
.promo { --promo-dur: 40s; margin-top: 26px; }
.promo__list { padding-top: 6px; padding-bottom: 14px; }
.pc { width: 252px; min-height: 166px; padding: 20px 20px 48px; }
.pc__ttl { font-size: 18px; }
.pc__sub { font-size: 12px; }
}
@media (min-width: 1024px) {
.promo { --promo-dur: 46s; }
.pc { width: 276px; }
}

@media (prefers-reduced-motion: reduce) {
.promo__viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.promo__track { animation: none; }
.promo__track > .promo__list[aria-hidden="true"] { display: none; }
.promo__foot { display: none; }
.pc:hover { transform: none; }
}

/* カードと検索パネルのあいだに余白をとる */
@media (min-width: 768px) {.promo { padding-bottom: 50px; } }


/* ============================================================
   31. カードを押しながら一緒に進むおサルたち（6種）
   ============================================================ */
.promo__list > li { position: relative; }
.pc { z-index: 1; }


/* 走りの位相を1匹ずつずらす */
.promo__list > li:nth-child(1) .mk { --mkd: 0s; }
.promo__list > li:nth-child(2) .mk { --mkd: -.12s; }
.promo__list > li:nth-child(3) .mk { --mkd: -.25s; }
.promo__list > li:nth-child(4) .mk { --mkd: -.07s; }
.promo__list > li:nth-child(5) .mk { --mkd: -.31s; }
.promo__list > li:nth-child(6) .mk { --mkd: -.19s; }

/* からだ・手足の動き */
@keyframes mk-body { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(-5px, 2px) rotate(-3deg); } }
@keyframes mk-leg-f { from { transform: rotate(-15deg); } to { transform: rotate(11deg); } }
@keyframes mk-leg-b { from { transform: rotate(13deg); } to { transform: rotate(-13deg); } }
@keyframes mk-arms { from { transform: translateX(0); } to { transform: translateX(-3px); } }
@keyframes mk-head { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(2px) rotate(-4deg); } }
@keyframes mk-tail { from { transform: rotate(-7deg); } to { transform: rotate(9deg); } }
@keyframes mk-dust { 0% { opacity: .55; transform: translateX(0) scaleX(.7); } 100% { opacity: 0; transform: translateX(16px) scaleX(1.3); } }


/* カードが止まればサルも足を止める */
.promo:focus-within .mk, .promo:focus-within .mk *,
.promo__chk:checked ~ .promo__viewport .mk,
.promo__chk:checked ~ .promo__viewport .mk * { animation-play-state: paused; }

/* サルが入るぶん、カードの間隔をあける */
.promo { --gap: 78px; }
.promo { --promo-dur: 40s; }

@media (min-width: 768px) {
.promo { --promo-dur: 46s; }
.promo { --gap: 96px; }
}
@media (min-width: 1024px) {
.promo { --promo-dur: 50s; }
}


/* ============================================================
   32. カルーセルの操作ボタン（◀ 止める ▶）
   ============================================================ */
.promo__ctrl {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.promo__nav {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 8px rgba(34, 48, 58, .16);
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.promo__nav > span {
  width: 0; height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 8px solid var(--rose-deep);
  margin-right: 2px;
}
.promo__nav--next > span {
  border-right: none;
  border-left: 8px solid var(--rose-deep);
  margin-right: 0;
  margin-left: 2px;
}
.promo__nav:hover { background: var(--rose-soft); transform: scale(1.08); }
.promo__nav:active { transform: scale(.94); }
.promo__nav:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 2px; }

@media (min-width: 768px) {
.promo__ctrl { gap: 8px; }
.promo__nav { width: 36px; height: 36px; }
}

/* ============================================================
   33. 回転を待たずに選べるボタン
   ============================================================ */
.promo__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 10px;
  padding: 10px var(--gutter) 4px;
  max-width: var(--container);
  margin-inline: auto;
}
.promo__pick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
}
.promo__pick a {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  padding: 6px 10px 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.promo__pick a:hover {
  border-color: var(--rose-deep);
  color: var(--rose-deep);
  transform: translateY(-1px);
}
.promo__pick a > span { font-size: 13px; line-height: 1; opacity: .6; }
.promo__pick a:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 2px; }
/* いま正面にあるカードのボタン */
.promo__pick a.is-current {
  background: var(--rose-deep);
  border-color: var(--rose-deep);
  color: #fff;
}

@media (min-width: 768px) {
  .promo__foot { padding: 14px var(--gutter) 6px; gap: 10px 14px; }
  .promo__pick { gap: 8px; }
  .promo__pick a { padding: 8px 14px 8px 16px; font-size: 12px; }
}

/* ============================================================
   34. 固定バーを3つに（電話する／相談する／見学のご予約）
   ============================================================ */
.fixed-bar {
  grid-template-columns: 0.92fr 0.92fr 1.16fr;
  gap: 6px;
  padding-left: 10px;
  padding-right: 10px;
}
.fixed-bar a {
  gap: 5px;
  font-size: 13px;
  padding-inline: 4px;
  white-space: nowrap;
}
/* 相談する：電話と予約の中間の見た目に */
.fixed-bar__ask {
  border: 1.5px solid var(--rose-deep);
  background: var(--rose-soft);
  color: var(--rose-deep);
}
.fixed-bar__ask svg { flex: none; }
.fixed-bar a:active { transform: translateY(1px); }

/* 画面が狭いときはアイコンを小さく、字間も詰める */
@media (max-width: 359px) {
  .fixed-bar { gap: 5px; padding-left: 8px; padding-right: 8px; }
  .fixed-bar a { font-size: 12px; gap: 3px; }
  .fixed-bar svg { width: 15px; height: 15px; }
}

/* 問い合わせページは相談ボタンが重複するので2つに戻す */
.fixed-bar:not(:has(.fixed-bar__ask)) { grid-template-columns: 1fr 1.35fr; }


.property__actions .property__link { margin-top: 0; min-height: 42px; font-size: 13px; }
.property__actions .property__link:hover {
  background: var(--rose-soft);
  border-color: var(--rose-deep);
  color: var(--rose-deep);
}


/* ============================================================
   36. フォーム送信のメッセージ
   ============================================================ */
.form__msg {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.85;
}

/* ============================================================
   37. フッターナビを見出しごとにまとめる
   ============================================================ */
.footer__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 20px;
}
.footer__coltitle {
  margin: 0 0 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text-3);
}
.footer__col ul {
  display: grid !important;
  gap: 8px !important;
  font-size: 12px;
}
.footer__col a { color: var(--text-2); }
.footer__col a:hover { color: var(--rose-deep); }

@media (min-width: 768px) {
  /* 5列になったので、PCではロゴの下に全幅で並べる */
  .footer__nav { grid-template-columns: repeat(5, 1fr); gap: 0 24px; }
  .footer__col ul { font-size: 13px; }
}

/* ============================================================
   38. 記事ページの説明リスト：表ではなく番号つきカードにする
   ============================================================ */
.guide-list {
  counter-reset: guide;
  display: grid;
  gap: 12px;
  margin: 0;
}
.guide-list > div {
  counter-increment: guide;
  position: relative;
  padding: 18px 20px 18px 56px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}
.guide-list > div::before {
  content: counter(guide);
  position: absolute;
  left: 18px;
  top: 18px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rose-soft);
  color: var(--rose-deep);
  font-size: 12px;
  font-weight: 900;
  font-feature-settings: "tnum";
}
.guide-list dt {
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text);
}
.guide-list dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.95;
  color: var(--text-2);
}
.guide-list dd strong { color: var(--text); font-weight: 900; }

/* 砂色の背景の上では、カードを白く浮かせる */
.section--sand .guide-list > div { border-color: var(--line-2); }

@media (min-width: 768px) {
  .guide-list { gap: 14px; }
  .guide-list > div { padding: 22px 26px 22px 64px; }
  .guide-list > div::before { left: 22px; top: 22px; width: 28px; height: 28px; font-size: 13px; }
  .guide-list dt { font-size: 17px; }
  .guide-list dd { font-size: 14px; }
}


.tags li { background: var(--bg-2); color: var(--text-3); font-weight: 500; }


.property__actions .property__link {
  min-height: 38px;
  font-size: 12px;
  border: none;
  color: var(--text-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.property__actions .property__link:hover { background: transparent; color: var(--rose-deep); }


/* ============================================================
   40. 見出しを1文字ずつ立ち上げる
   ============================================================ */
.hero__h1 span.is-split { perspective: 600px; }

.ch {
  display: inline-block;
  font-style: normal;
  animation: char-in .62s cubic-bezier(.2, .9, .3, 1.25) backwards;
  animation-delay: calc(.42s + var(--i) * .045s);
}
.ch > b {
  display: inline-block;
  font-weight: inherit;
  animation: char-wave 9s ease-in-out infinite;
  animation-delay: calc(2.2s + var(--i) * .06s);
}

/* 奥から回り込みながら、ぼやけた状態で立ち上がる */
@keyframes char-in {
  0% {
    opacity: 0;
    transform: translateY(.55em) rotateX(-75deg) scale(.9);
    filter: blur(7px);
  }
  60% {
    opacity: 1;
    transform: translateY(-.06em) rotateX(8deg) scale(1.02);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/* 立ち上がったあとも、波が端から端へ流れ続ける */
@keyframes char-wave {
  0%, 86%, 100% { transform: translateY(0);      color: var(--text); }
  90%           { transform: translateY(-.18em); color: var(--rose-deep); }
  94%           { transform: translateY(.04em);  color: var(--rose-deep); }
  97%           { transform: translateY(0);      color: var(--text); }
}

/* 一文字ずつ出るので、プレートの光沢は重ねない */
.hero__h1 span::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ch, .ch > b { animation: none; }
}

/* ============================================================
   41. 見出しの登場：バーが走り抜けて、その跡から文字が現れる
   ============================================================ */
/* 1文字ずつの立ち上がりはやめ、行ごとのワイプに置き換える */
.ch { animation: none; }
.hero__h1 span { animation: none; opacity: 1; }

/* 文字は左から右へ現れる */
.hero__eyebrow,
.hero__h1 span,
.hero__sub {
  position: relative;
  overflow: hidden;
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  animation: wipe-text .55s cubic-bezier(.64, .01, .26, .99) forwards;
  animation-delay: var(--wd, 0s);
}
@keyframes wipe-text {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0); }
}

/* 同じ向きにバーが走り抜ける */
.hero__eyebrow::before,
.hero__h1 span::before,
.hero__sub::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--rose-deep);
  transform: scaleX(0);
  transform-origin: left center;
  animation: wipe-bar .8s cubic-bezier(.64, .01, .26, .99) forwards;
  animation-delay: var(--wd, 0s);
  pointer-events: none;
}
@keyframes wipe-bar {
  0%     { transform: scaleX(0); transform-origin: left center; }
  46%    { transform: scaleX(1); transform-origin: left center; }
  46.01% { transform: scaleX(1); transform-origin: right center; }
  100%   { transform: scaleX(0); transform-origin: right center; }
}
/* バッジは背景が赤なので、走るバーは白にする */
.hero__eyebrow::before { background: #fff; }
.ch { position: relative; z-index: 1; }

/* 上から順に、少しずつ遅れて走る */
.hero__eyebrow            { --wd: .15s; }
.hero__h1 span:nth-child(1) { --wd: .38s; animation-delay: .38s; }
.hero__h1 span:nth-child(2) { --wd: .56s; animation-delay: .56s; }

@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow, .hero__h1 span, .hero__sub { clip-path: none; animation: none; }
  .hero__eyebrow::before, .hero__h1 span::before, .hero__sub::before { display: none; }
}

/* ============================================================
   42. 見出しを背景に直接置き、文字そのものをバーで出す
   ============================================================ */
/* 白いプレートをやめる。文字が主役になる */
.hero__h1 span {
  background: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  font-size: clamp(21px, 6.5vw, 54px);
  font-weight: 900;
  line-height: 1.24;
  white-space: nowrap;
  letter-spacing: -.01em;
  color: var(--text);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}
.hero__h1 { gap: 4px; }

/* 走るバーは、文字の見た目に合わせて細く */
.hero__h1 span::before { background: var(--rose-deep); }


/* バッジも同じ形にそろえる */
.hero__eyebrow {
  border-radius: 0;
  padding: 7px 20px 7px 24px;
  clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
}

@media (min-width: 768px) {
  .hero__h1 { gap: 6px; }
  }

/* 動きを抑える設定では、斜め切りだけ残して動かさない */
@media (prefers-reduced-motion: reduce) {
  .hero__h1 span { text-shadow: 0 1px 0 rgba(255, 255, 255, .55); }
}

/* ============================================================
   43. カルーセルの登場：カードが上から落ちて、サルが出て、回りはじめる
   ============================================================ */
/* 落ちてくる分の余白を、切り抜き範囲の上に確保する */
.promo__viewport { padding-top: 80px; margin-top: -80px; }

/* カードが順番に落ちてくる */
.promo__list > li {
  animation: card-drop .72s cubic-bezier(.18, .9, .28, 1.25) backwards;
  animation-delay: calc(1s + var(--n, 0) * .13s);
}
.promo__list > li:nth-child(1) { --n: 0; }
.promo__list > li:nth-child(2) { --n: 1; }
.promo__list > li:nth-child(3) { --n: 2; }
.promo__list > li:nth-child(4) { --n: 3; }
.promo__list > li:nth-child(5) { --n: 4; }
.promo__list > li:nth-child(6) { --n: 5; }

@keyframes card-drop {
  0%   { opacity: 0; transform: translateY(-90px) rotate(-2.5deg); }
  62%  { opacity: 1; transform: translateY(6px) rotate(.6deg); }
  82%  { transform: translateY(-3px) rotate(-.3deg); }
  100% { opacity: 1; transform: none; }
}

.promo__list > li:nth-child(1) .mk { --n2: 0; }
.promo__list > li:nth-child(2) .mk { --n2: 1; }
.promo__list > li:nth-child(3) .mk { --n2: 2; }
.promo__list > li:nth-child(4) .mk { --n2: 3; }
.promo__list > li:nth-child(5) .mk { --n2: 4; }
.promo__list > li:nth-child(6) .mk { --n2: 5; }

/* scale は transform と別の指定なので、歩く動きとぶつからない */
@keyframes mk-appear {
  0%   { opacity: 0; scale: .5; }
  70%  { opacity: 1; scale: 1.12; }
  100% { opacity: 1; scale: 1; }
}

/* 操作ボタンは、回りはじめてから出す */
.promo__foot {
  animation: foot-in .5s ease 3s backwards;
}
@keyframes foot-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .promo__viewport { padding-top: 0; margin-top: 0; }
  .promo__list > li, .mk, .promo__foot { animation: none; opacity: 1; scale: 1; }
}


/* ==== 上書き（元の配色より後ろに置く必要があるもの） ==== */
/* ---------- 55. 落ち着いた見た目に ----------
   サイトの中身は大人向け（ローンの審査、相続の期限、完済年齢の警告）。
   ピンクの背景・イラスト・絵文字が、その中身と合っていなかった。
   いちご地図と赤の差し色は残し、それ以外の装飾を落とす。 */

/* ヒーローの背景を、ピンクから生成りへ */
.hero {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%) !important;
  background-size: auto !important;
}

/* 回転カードは残す。丸みと影を抑えて、落ち着かせる */
.pc {
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(22,32,43,.05), 0 8px 20px rgba(22,32,43,.08);
}

/* サルがいなくなったので、カードの下の余白を詰める */
.promo__list li { padding-bottom: 0; }
.promo { padding-bottom: 8px; }

/* アイコンを外したぶん、カードの中身を上に寄せる */
.pc__ttl { margin-top: 0; }

/* 見出しの絵文字枠を外したので、余白を調整 */
.finder__ttl { padding-left: 0; }

/* ---------- 56. 回転カードを落ち着かせる ----------
   6色のグラデーションが賑やかすぎた。白を基調にして、
   左の縦線だけを色で分ける。中身は読みやすくなる。 */
.pc--1, .pc--2, .pc--3, .pc--4, .pc--5, .pc--6 {
  background: var(--white);
  color: var(--text);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-2);
}
/* 主役の3枚だけ、赤い縦線で少し前に出す */
.pc--1, .pc--2, .pc--5 { border-left-color: var(--red); }

.pc__sub { color: var(--text-2); }
.pc__go {
  background: var(--bg-2) !important;
  color: var(--text-2) !important;
}
.pc:hover { border-color: var(--line-2); }
.pc:hover .pc__go { background: var(--red) !important; color: #fff !important; }


/* ---------- 57. 実写のヒーロー ----------
   装飾を外したら単調になったので、御社が撮影した住宅の写真を敷く。
   34社の大半はフリー素材なので、実写は一目で違いが出る。
   演出は装飾ではなく、写真のゆっくりした動きと文字の立ち上がりで作る。 */
.hero { background: var(--text) !important; }

.hero__top { position: relative; isolation: isolate; }

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  /* ゆっくり寄っていく。止まって見えるくらいの速さ */
  animation: hero-zoom 24s ease-out both;
}
@keyframes hero-zoom {
  from { transform: scale(1.10); }
  to   { transform: scale(1); }
}
/* 文字を読ませるための覆い。下ほど濃くして、カードへ自然につなぐ */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(18,24,34,.62) 0%,
      rgba(18,24,34,.42) 38%,
      rgba(18,24,34,.68) 100%);
}

.hero__catch { position: relative; z-index: 1; }

/* 写真の上なので、文字は白に */
.hero__h1 span {
  color: #fff !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.hero__h1 span::before { background: #fff !important; }
.hero__eyebrow {
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.45);
  color: #fff !important;
  backdrop-filter: blur(6px);
}
.hero__eyebrow::before { display: none; }

/* カードは写真の上に浮かせる */
.promo { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero__media img { animation: none; }
}

/* 写真の上なので、1文字ずつの色も白にする。
   （char-wave が 1文字ごとに --text に戻していたため、キャッチが読めなかった） */
.hero__h1 .ch,
.hero__h1 .ch > b {
  color: #fff !important;
  text-shadow: 0 2px 20px rgba(0,0,0,.45);
}
.hero__h1 .ch > b { animation-name: char-wave-light; }

@keyframes char-wave-light {
  0%, 86%, 100% { transform: translateY(0);      color: #fff; }
  90%           { transform: translateY(-.18em); color: #FFD9D6; }
  94%           { transform: translateY(.04em);  color: #FFD9D6; }
  97%           { transform: translateY(0);      color: #fff; }
}

/* ==========================================================
   58. カフェのような佇まいに
   ----------------------------------------------------------
   要素は4つ。
   ① 見出しを明朝体に（これがいちばん効く）
   ② 余白をたっぷり取る
   ③ アースカラー（もともと生成りとベージュを使っている）
   ④ 細い罫線と、字間を空けた小さな英字ラベル
   ========================================================== */

:root {
  --serif: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;
}

/* ---- ① 見出しを明朝体に ---- */
.heading,
.detail__title,
.hero__h1,
.contact__title,
.post__ttl,
.option__title,
.staff__name,
.feature__title,
.rentsim__lead,
.midcta__lead,
.search-cta__title,
.finder__ttl {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: .02em;
}

/* 明朝は太字にすると潰れるので、少し軽く、字間をゆるめる */
.heading { font-weight: 600; line-height: 1.65; }
.detail__title { font-weight: 600; line-height: 1.55; }
.hero__h1 span { font-weight: 600 !important; letter-spacing: .04em; }
.contact__title { font-weight: 600; }

/* 見出しの下の赤い線を、細く長く */
.heading::after,
.detail__head .heading::after {
  height: 2px;
  width: 56px;
  border-radius: 0;
  margin-top: 20px;
}

/* ---- ④ 英字ラベルを、もっと小さく、もっと空ける ---- */
.label,
.search-cta__eyebrow,
.post__cat,
.rentsim__label {
  letter-spacing: .22em;
  font-size: 11px;
  font-weight: 500;
}
.label { margin-bottom: 18px; }

/* ---- ② 余白をたっぷり ---- */
.section { padding: 62px 0; }
.section__head { margin-bottom: 34px; }

/* ---- 丸みを抑えて、線を細く ---- */
.card, .post, .option, .cando__col, .faq__item,
.simtable, .rentsim__inputs, .rspanel, .staff, .feature {
  border-radius: 6px;
}
.btn { border-radius: 4px; }

/* 影を弱く。カフェの紙ものは、影より罫線 */
.post, .option, .faq__item, .staff, .feature {
  box-shadow: none;
  border: 1px solid var(--line);
}

/* ==========================================================
   59. 息継ぎの写真
   ----------------------------------------------------------
   本文が1万字を超えるページが16本あり、写真が1枚も無かった。
   読み手が目を休める場所が無いと、内容が良くても離脱する。
   途中に実写を1枚だけ挟んで、区切りにする。
   ========================================================== */
.breather {
  margin: 0;
  position: relative;
}
.breather img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center 55%;
}
.breather figcaption {
  max-width: var(--container);
  margin: 14px auto 0;
  padding: 0 20px;
  font-size: 12px;
  line-height: 1.9;
  color: var(--text-2);
  letter-spacing: .03em;
}
.breather figcaption em {
  font-style: normal;
  color: var(--text-3, var(--text-2));
  opacity: .8;
  margin-left: .6em;
}

@media (min-width: 768px) {
  .breather img { aspect-ratio: 21 / 9; }
  .breather figcaption { padding: 0 28px; font-size: 12.5px; }
}

/* ==========================================================
   60. 大きく見せる
   ----------------------------------------------------------
   海外の受賞サイト（era-residence.com）と見比べると、差の正体は
   飾りの数ではなく「一文字の大きさ」と「余白の量」でした。
   向こうの見出しは122px、こちらは54px。写真も画面いっぱい。
   文章量は変えずに、見出しと写真だけを大きくします。
   ========================================================== */

/* ---- ① ヒーローを、画面いっぱいに ---- */
.hero__top {
  min-height: 86svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* svh に対応しない古いブラウザ用 */
@supports not (height: 1svh) {
  .hero__top { min-height: 86vh; }
}

/* キャッチは、中央ぞろえをやめて左下に置く。
   真ん中に置くと「よくあるトップページ」に見えるため。 */
.hero__catch {
  text-align: left;
  width: 100%;
  padding-bottom: 34px;
}
.hero__h1 { justify-items: start; gap: 0; }

/* ---- ② 見出しの文字を、思いきり大きく ---- */
.hero__h1 span {
  font-size: clamp(34px, 11.6vw, 112px) !important;
  font-weight: 500 !important;
  line-height: 1.16;
  letter-spacing: .01em;
}
.hero__h1 .ch,
.hero__h1 .ch > b { font-weight: 500 !important; }

/* 肩書きは、赤い丸バッジをやめて、字間を空けた小さな白文字に */
.hero__eyebrow {
  background: none !important;
  border: 0 !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  margin-bottom: 20px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .24em;
  color: rgba(255,255,255,.9) !important;
}

/* 走るバーは、文字が大きくなったぶん細く短く */
.hero__h1 span::before { height: 1px; opacity: .5; }

/* ---- ③ 各セクションの見出しも大きく ---- */
.heading {
  font-size: clamp(27px, 7.6vw, 54px);
  line-height: 1.42;
  letter-spacing: .01em;
}
.detail__title { font-size: clamp(26px, 7.2vw, 48px); line-height: 1.4; }
.contact__title { font-size: clamp(26px, 7.4vw, 50px); }

/* ---- ④ 数字を大きく。ここは向こうのやり方をそのまま借りています ---- */
.stats strong {
  font-family: var(--serif);
  font-size: clamp(38px, 10vw, 68px);
  font-weight: 500;
  line-height: 1.05;
}
.stats strong small { font-size: .32em; margin-left: 3px; }
.stats li { padding: 22px 6px; }
.stats span { font-size: 11px; letter-spacing: .06em; }

/* ---- ⑤ 余白をさらに広げる ---- */
.section { padding: 78px 0; }
.section--tight { padding: 40px 0; }

/* ---- ⑥ 写真だけの区切り ---- */
.statement {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 68svh;
  isolation: isolate;
  overflow: hidden;
}
@supports not (height: 1svh) {
  .statement { min-height: 68vh; }
}
.statement__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.statement::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(18,24,34,.18) 0%, rgba(18,24,34,.30) 45%, rgba(18,24,34,.72) 100%);
}
.statement__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  width: 100%;
  margin-inline: auto;
  padding: 0 var(--gutter) 46px;
}
.statement__line {
  font-family: var(--serif);
  font-size: clamp(26px, 8.4vw, 62px);
  font-weight: 500;
  line-height: 1.44;
  letter-spacing: .02em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,.4);
}

@media (min-width: 768px) {
  .section { padding: 112px 0; }
  .hero__catch { padding-bottom: 48px; }
  .statement { min-height: 78svh; }
  .statement__inner { padding-bottom: 64px; }
}
@media (min-width: 1024px) {
  .section { padding: 150px 0; }
  .heading { font-size: clamp(34px, 3.6vw, 54px); }
}


/* ---- 60-b. 高さと切り取り位置の微調整 ---- */
.hero__top { min-height: 80svh; }
@supports not (height: 1svh) {
  .hero__top { min-height: 80vh; }
}
/* 縦に伸びたぶん、家の本体が真ん中に来るよう下げる */
.hero__media img { object-position: center 58%; }
/* キャッチとカードのあいだに、ひと呼吸 */
.hero__catch { margin-top: auto; padding-bottom: 26px; }

@media (min-width: 768px) {
  .hero__top { min-height: 88svh; }
  .hero__media img { object-position: center 62%; }
}

/* ---- 60-c. 途中の写真も、もっと大きく ----
   16ページに入れた「息継ぎの写真」が、まだ小さくて挿絵に見えていました。
   画面の半分以上を取らせて、ページの区切りとして効かせます。 */
.breather img {
  aspect-ratio: auto;
  height: 56svh;
  min-height: 260px;
}
@supports not (height: 1svh) {
  .breather img { height: 56vh; }
}
.breather figcaption {
  margin-top: 16px;
  font-size: 11px;
  letter-spacing: .1em;
}
@media (min-width: 768px) {
  .breather img { height: 66svh; min-height: 400px; }
}

/* ==========================================================
   61. 動き
   ----------------------------------------------------------
   海外の受賞サイトが GSAP / Barba.js でやっていることを、
   ライブラリなしで近いところまで持っていきます。
   読み込むJSは js/motion.js の1本（8KB）だけです。

   大事な約束：
   JSが動かないときは <html class="motion"> が付かないので、
   このセクションの「隠す」指定は一切効きません。中身は全部見えます。
   ========================================================== */

/* ---- ① ページを移るときに、すっと入れ替わる ----
   Barba.js に当たるものが、いまはブラウザの標準機能にあります。 */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out .22s ease both; }
  ::view-transition-new(root) { animation: vt-in .34s cubic-bezier(.16,1,.3,1) both; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in  { from { opacity: 0; transform: translateY(10px); } }
}
/* ヘッダーと下のボタンは動かさない（移動しても居続けてほしいので） */
.header { view-transition-name: site-header; }
.fixed-bar { view-transition-name: site-cta; }

/* ---- ② 見出しを、行ごとに下から ---- */
.ln {
  display: block;
  overflow: hidden;
  /* 「ぐ」などの下に伸びる字が切れないよう、内側に余白を取って相殺します */
  padding: .14em 0;
  margin: -.14em 0;
}
.ln__i { display: block; }

.motion .ln__i {
  opacity: 0;
  transform: translateY(1.02em);
  transition:
    opacity .8s cubic-bezier(.16,1,.3,1),
    transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i, 0) * 95ms);
}
.motion .is-in .ln__i { opacity: 1; transform: none; }

/* ---- ③ 本文とラベルは、静かに ---- */
.motion .lead,
.motion .section__head .label {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease .12s, transform .7s cubic-bezier(.16,1,.3,1) .12s;
}
.motion .lead.is-in,
.motion .section__head .label.is-in { opacity: 1; transform: none; }

/* ---- ④ 写真は、下から開く ----
   じわっと出すより、幕が上がるほうが「作った感じ」が出ます。 */
.motion .breather,
.motion .concept__media,
.motion .company__photo,
.motion .area__hero {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.05s cubic-bezier(.16,1,.3,1);
}
.motion .breather.is-in,
.motion .concept__media.is-in,
.motion .company__photo.is-in,
.motion .area__hero.is-in { clip-path: inset(0 0 0 0); }

/* ---- ⑤ かたまりは、少し遅れて ---- */
.motion .stats,
.motion .features,
.motion .property-list,
.motion .cando,
.motion .faq__list {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s ease .1s, transform .9s cubic-bezier(.16,1,.3,1) .1s;
}
.motion .stats.is-in,
.motion .features.is-in,
.motion .property-list.is-in,
.motion .cando.is-in,
.motion .faq__list.is-in { opacity: 1; transform: none; }

/* ---- ⑥ 写真が、スクロールよりゆっくり動く ----
   CSSだけの視差。対応していないブラウザでは、ただ止まって見えます。 */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .statement__bg,
    .breather img {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes drift {
      from { transform: scale(1.12) translateY(-2.2%); }
      to   { transform: scale(1.12) translateY(2.2%); }
    }
  }
}

/* ---- ⑦ 流れる帯 ---- */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 26px 0;
  background: var(--bg);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee__track span {
  font-family: var(--serif);
  font-size: clamp(24px, 5.6vw, 44px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .04em;
  color: var(--text);
  white-space: nowrap;
  padding-right: .8em;
}
.marquee__track span i {
  font-style: normal;
  color: var(--red);
  padding: 0 .5em;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ---- ⑧ 下へどうぞ、の合図 ---- */
.scrollcue {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 2;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: .22em;
  color: rgba(255,255,255,.8);
  pointer-events: none;
}
.scrollcue::after {
  content: "";
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0));
  animation: cue 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes cue {
  0%   { transform: scaleY(0); opacity: 0; }
  30%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scrollcue::after { animation: none; }
}

/* ---- ⑨ つかんで動かせるカード ---- */
.promo__viewport { cursor: grab; }
.promo__viewport.is-grabbing { cursor: grabbing; scroll-behavior: auto; }
.promo__viewport.is-grabbing a { pointer-events: none; }

/* ---- 61-b. ヒーローは写真と見出しだけ。カードはその下に ----
   カードを外に出したので、ヒーローを画面いっぱいに使えます。
   カードは消していません。すぐ下にあります。 */
.hero__top { min-height: 92svh; }
@supports not (height: 1svh) {
  .hero__top { min-height: 92vh; }
}
.hero__catch { padding-bottom: 68px; }
.promo { margin-top: 34px; }
.promo::before {
  content: "よくあるご相談";
  display: block;
  max-width: var(--container);
  margin: 0 auto 14px;
  padding: 0 var(--gutter);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--text-3);
}
@media (min-width: 768px) {
  .hero__top { min-height: 94svh; }
  .hero__catch { padding-bottom: 84px; }
  .promo { margin-top: 48px; }
}

/* ---- 61-c. 数字を大きくしたぶん、説明の行が窮屈になったので ---- */
.stats span {
  display: block;
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: .02em;
  /* 「キャリア」が途中で折れないように */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.stats li { padding: 22px 4px; }
@media (min-width: 768px) {
  .stats span { font-size: 12px; }
  .stats li { padding: 26px 10px; }
}

/* ---- 61-d. 視差で写真を少し大きくしているので、はみ出す分を隠します ----
   これが無いと、16ページで横スクロールが出ます。 */
.breather { overflow: hidden; }

/* ==========================================================
   62. ヒーローを、実物に合わせて組み直す
   ----------------------------------------------------------
   ERAの画面を実際に出して並べたら、違いは4つでした。
   ① ヘッダーが透明で、写真が画面の上端から始まっている
   ② 写真に暗い幕をかけていない（明るいまま）
   ③ 文字が中央・上寄りで、まわりに極小の文字の層がある
   ④ 一番大きい字と一番小さい字の差が、約10倍ある
   ========================================================== */

/* ---- ① トップページのヘッダーを、写真の上に透かす ---- */
.home .header {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background .4s ease, border-color .4s ease, backdrop-filter .4s ease;
}
.home .header .logo,
.home .header .nav__tel,
.home .header .nav__tel small,
.home .header .nav__tel strong,
.home .header .logo__text strong { color: #fff; }
.home .header .logo__text small { color: rgba(255,255,255,.72); }
.home .header .nav-btn span { background: #fff; }
.home .header .nav__list a { color: #fff; }

/* ヒーローを通り過ぎたら、いつもの白い帯に戻す */
.home .header.is-solid {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
.home .header.is-solid .logo,
.home .header.is-solid .logo__text strong { color: var(--text); }
.home .header.is-solid .logo__text small { color: var(--text-3); }
.home .header.is-solid .nav__tel small { color: var(--text-3); }
.home .header.is-solid .nav__tel,
.home .header.is-solid .nav__tel strong { color: var(--text); }
.home .header.is-solid .nav-btn span { background: var(--text); }
.home .header.is-solid .nav__list a { color: var(--text); }

/* メニューを開いているあいだは、中の文字を元の色に戻す（白い板の上なので） */
.home .nav__list a { color: var(--text); }
@media (min-width: 1024px) {
  .home .header .nav__list a { color: #fff; }
  .home .header.is-solid .nav__list a { color: var(--text); }
}

/* 写真を画面の上端から始める */
.home .hero { padding-top: 0; }
.home .hero__top { padding-top: var(--header-h); }

/* ---- ② 暗い幕を、端だけに ---- */
.hero__media::after {
  background:
    linear-gradient(180deg,
      rgba(12,20,32,.34) 0%,
      rgba(12,20,32,.12) 22%,
      rgba(12,20,32,0)   46%,
      rgba(12,20,32,.30) 88%,
      rgba(12,20,32,.52) 100%);
}

/* ---- ③ 文字を中央・上寄りに ---- */
.hero__top {
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-content: stretch;
}
.hero__catch {
  grid-row: 2;
  align-self: start;
  margin-top: 4svh;
  text-align: center;
  padding-bottom: 0;
}
.hero__h1 { justify-items: center; }
.hero__h1 span { text-align: center; }

/* 肩書きは、見出しの上に極小で */
.hero__eyebrow {
  font-size: 9.5px;
  letter-spacing: .32em;
  margin-bottom: 16px;
}

/* ---- ④ 見出しの下の、罫線つきラベル ---- */
.hero__rail {
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 auto 52px;
  padding: 0 var(--gutter);
  max-width: 520px;
  width: 100%;
}
.hero__rail span {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .3em;
  color: rgba(255,255,255,.9);
  white-space: nowrap;
}
.hero__rail i {
  flex: 1;
  height: 1px;
  margin: 0 14px;
  background: rgba(255,255,255,.42);
}

/* 画面が狭いときは、カードが見出しにかぶるので出しません */


/* ---- ⑥ SCROLL の合図は、右下に小さく ---- */
.scrollcue {
  left: auto;
  right: var(--gutter);
  bottom: 18px;
  transform: none;
  font-size: 8.5px;
  letter-spacing: .3em;
}

.hero__sentinel { position: absolute; bottom: 0; left: 0; width: 1px; height: 1px; }

@media (min-width: 768px) {
  .hero__catch { margin-top: 7svh; }
  .hero__rail { max-width: 760px; margin-bottom: 64px; }
  .hero__rail span { font-size: 10px; }
  .hero__eyebrow { font-size: 10px; letter-spacing: .38em; margin-bottom: 22px; }
}


/* ---- 62-b. 白い文字が、明るい空の上でも読めるように ----
   ERAの空は濃い青なので幕がほぼ要りませんが、
   うちの写真は空が淡いので、上側だけ少し足します。 */
.hero__media::after {
  background:
    linear-gradient(180deg,
      rgba(12,20,32,.46) 0%,
      rgba(12,20,32,.26) 26%,
      rgba(12,20,32,.06) 52%,
      rgba(12,20,32,.26) 86%,
      rgba(12,20,32,.50) 100%);
}
.hero__h1 .ch,
.hero__h1 .ch > b,
.hero__h1 span {
  text-shadow: 0 1px 3px rgba(8,14,24,.40), 0 2px 28px rgba(8,14,24,.55);
}
.hero__eyebrow,
.hero__rail span,
.scrollcue { text-shadow: 0 1px 10px rgba(8,14,24,.6); }

.home .header:not(.is-solid) .logo,
.home .header:not(.is-solid) .nav__tel,
.home .header:not(.is-solid) .nav__list a { text-shadow: 0 1px 10px rgba(8,14,24,.55); }
.home .header.is-solid .logo,
.home .header.is-solid .nav__tel,
.home .header.is-solid .nav__list a { text-shadow: none; }

/* ---- 62-c. 写真の下の濃紺の帯を消す ----
   写真が独立した層になったので、ヒーローの地色は生成りに戻します。 */
.home .hero { background: var(--bg) !important; }

/* ---- 62-d. 空を多めに見せて、見出しを空の上に乗せる ---- */
.hero__media img { object-position: center 34%; }
@media (min-width: 768px) {
  .hero__media img { object-position: center 38%; }
}

/* ---- 62-e. 写真を青空の広いものに替えたので、幕をERAと同じくらい薄く ----
   濃い青空と紺の外壁の上なので、白い文字はほとんど素のままで読めます。 */
.hero__media img { object-position: center 30%; }
@media (min-width: 768px) {
  .hero__media img { object-position: center 32%; }
}
.hero__media::after {
  background:
    linear-gradient(180deg,
      rgba(10,22,40,.22) 0%,
      rgba(10,22,40,.10) 30%,
      rgba(10,22,40,0)   55%,
      rgba(10,22,40,.24) 88%,
      rgba(10,22,40,.46) 100%);
}

/* ---- 62-f. 下端の始末 ----
   ・スマホでは SCROLL と地名の行が重なっていたので、SCROLL を出しません
   ・地名の行が明るいコンクリートの上に乗って読みにくかったので、
     下側の影を少し濃くします */
.hero__media::after {
  background:
    linear-gradient(180deg,
      rgba(10,22,40,.22) 0%,
      rgba(10,22,40,.10) 30%,
      rgba(10,22,40,0)   55%,
      rgba(10,22,40,.34) 84%,
      rgba(10,22,40,.62) 100%);
}
@media (max-width: 767px) {
  .scrollcue { display: none; }
  .hero__rail { margin-bottom: 26px; max-width: 320px; }
  .hero__rail i { margin: 0 10px; }
}

/* ---- 62-g. 地名の行は、見出しのすぐ下（空の上）に ---- */
.hero__rail {
  grid-row: auto;
  margin: 26px auto 0;
  max-width: 420px;
}
.hero__rail span { color: #fff; }
@media (max-width: 767px) {
  .hero__rail { margin-top: 20px; max-width: 290px; }
}
@media (min-width: 768px) {
  .hero__rail { max-width: 560px; margin-top: 34px; }
}
/* 行を下に置かなくなったので、影は元の穏やかさに戻す */
.hero__media::after {
  background:
    linear-gradient(180deg,
      rgba(10,22,40,.24) 0%,
      rgba(10,22,40,.10) 32%,
      rgba(10,22,40,0)   56%,
      rgba(10,22,40,.22) 86%,
      rgba(10,22,40,.44) 100%);
}

/* ==========================================================
   63. スクロールに“連動”させる
   ----------------------------------------------------------
   ERAのアニメーションのコードを読んだら、数がこうでした。
     ・一度きりの演出（画面に入ったら再生）…… 7箇所
     ・スクロール連動（指の動きに合わせて動く）…… 18箇所
   うちは前者しか無く、それが「全然違う」の正体でした。
   文字は一度きりのまま（向こうもそうです）。
   写真と面は、スクロール量にそのまま紐づけます。
   ========================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* ---- ① 写真は、上から下へ流れる（近くのものほど速く見える） ---- */
    .statement__bg,
    .breather img,
    .contact__media img {
      animation: para-slow linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes para-slow {
      from { transform: translateY(-9%) scale(1.20); }
      to   { transform: translateY(9%)  scale(1.20); }
    }

    /* ---- ② 記事中の写真は、寄りから等倍へ ----
       向こうの scale 1.15 → 1、基点は下端。せり上がって見えます。 */
    .concept__media img,
    .company__photo img,
    .area__hero,
    .mapbox__img {
      animation: para-zoom linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 46%;
      transform-origin: center bottom;
    }
    @keyframes para-zoom {
      from { transform: scale(1.16) translateY(2.5%); }
      to   { transform: scale(1)    translateY(0); }
    }

    /* ---- ③ 文字は写真と逆へ動かす。これで奥行きが出ます ---- */
    .statement__inner {
      animation: para-counter linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes para-counter {
      from { transform: translateY(7%); }
      to   { transform: translateY(-7%); }
    }

    /* ---- ④ 流れる帯の横パララックスは外しました ----
       .marquee は画面いっぱいの帯で、上下に罫線と背景があります。
       これを translateX で ±1.2% 動かすと、
         ・右に寄ったとき 6px ぶんページが横スクロールできてしまう
         ・左に寄ったとき 帯の右端に 6px の隙間が見える
       の2つが起きていました（実測：画面幅518pxで右に6.2px はみ出し）。
       帯そのものが 34 秒で横に流れているので、この演出は無くても
       動きは十分あります。 */

    /* ---- ⑤ 区切りの写真は、下から開きながら動く ---- */
    .breather { animation: wipe-up linear both; animation-timeline: view(); animation-range: entry 0% entry 88%; }
    @keyframes wipe-up {
      from { clip-path: inset(0 0 100% 0); }
      to   { clip-path: inset(0 0 0% 0); }
    }
  }
}

/* スクロール連動が効く環境では、一度きりの「幕開き」は重ねない */
@supports (animation-timeline: view()) {
  .motion .breather { clip-path: none; transition: none; }
}

/* なめらかスクロールを入れるので、CSS側のスムーススクロールは切ります
   （両方効くと、アンカーの移動が二重になります） */
/* なめらかスクロール用の指定は不要になりました（外したため）。
   ページ内リンクは、CSSの scroll-behavior: smooth が担当します。 */
html { scroll-behavior: smooth; }
 (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- 63-b. スクロール連動が止まっていた原因 ----
   overflow: hidden は「スクロールできる箱」を作ります。
   すると中の写真は、ページではなくその箱を基準にしてしまい、
   ページをどれだけ動かしても真ん中（進捗0.5）で止まったままでした。
   overflow: clip は箱を作らずに切り取るだけなので、これで直ります。 */
.statement { overflow: clip; }
.breather  { overflow: clip; }
.contact   { overflow: clip; }
.marquee   { overflow: clip; }
.hero__media { overflow: clip; }

/* はみ出す方向を明示（既定は両方向を切ります） */
.statement, .breather, .contact, .hero__media { overflow-clip-margin: 0; }

/* ---- 63-c. いちご地図は動かしません ----
   地図の上に市名のリンクを％で重ねているので、画像だけ拡大すると
   クリックできる場所がずれます。ここは飾りではなく操作部分です。 */
.mapbox__img { animation: none !important; transform: none !important; }

/* ==========================================================
   64. 文字の出方
   ----------------------------------------------------------
   era-residence.com の値をそのまま使います。
     見出し … 1文字ずつ opacity 0 / yPercent 50 / rotateY 90°
              → 1.2秒かけて素の状態へ、0.05秒ずつずらす
     本文  … 1行ずつ、枠に隠れた下 110% から上へ
              → 1.2秒、0.1秒ずつずらす
     曲線  … cubic-bezier(.25, 1, .5, 1)（向こうの "Out"）
   ========================================================== */
:root { --ease-out: cubic-bezier(.25, 1, .5, 1); }

/* ---- ① 見出し：1文字ずつ、回りながら立ち上がる ---- */
.heading, .detail__title, .statement__line, .contact__title,
.post__ttl, .feature__title, .option__title {
  perspective: 700px;            /* これが無いと回転が平面に見えます */
}
.ch2 { display: inline-block; }

.motion .ch2 {
  opacity: 0;
  transform: translateY(50%) rotateY(90deg);
  transition:
    opacity   1.2s var(--ease-out),
    transform 1.2s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 50ms);
}
.motion .is-in .ch2 {
  opacity: 1;
  transform: none;
}

/* ---- ② 本文：行ごとに、枠の下から ---- */
.motion .ln__i {
  transform: translateY(110%);
  opacity: 1;                    /* 透けさせず、枠で隠すだけにします */
  transition: transform 1.2s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 100ms);
}
.motion .is-in .ln__i { transform: none; }

/* 枠。下から出てくる字が、行の外へはみ出さないように隠します */
.ln {
  display: block;
  overflow: clip;
  padding: .16em 0;
  margin: -.16em 0;
}

/* ---- ③ 一度きりの演出は、これで置き換えたので古いほうを止める ---- */
.motion .lead,
.motion .section__head .label {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ==========================================================
   65. オープニング
   ----------------------------------------------------------
   era-residence.com の作りを追っています。
     暗い面 → 社名が1文字ずつ出る → 下からアーチ型の窓がせり上がる
     → その窓が画面いっぱいに開いて、そのままヒーローになる
   向こうは合計6秒ほど。うちは検索から来た方を待たせたくないので
   2.8秒に詰めています。また、同じ訪問中は1回しか出しません。

   安全のため、動きはすべてCSSで完結させています。
   最後のコマで visibility:hidden になるので、JavaScriptが
   止まってもオープニングが居座ることはありません。
   JSが動かないときは display:none のまま、そもそも出ません。
   ========================================================== */
.opening { display: none; }

.motion .opening {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #121822;
  animation: op-end .01s linear 2.8s forwards;
}
@keyframes op-end {
  to { visibility: hidden; pointer-events: none; }
}

/* すでに一度見た方には出しません（JSが付ける印） */
.opening.is-done { display: none !important; }

/* ---- アーチ型の窓。ここがヒーローへそのまま開きます ---- */
.opening__arch {
  position: absolute;
  inset: 0;
  animation: op-arch 2.05s cubic-bezier(.6, 0, 0, 1) .62s both;
}
.opening__arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  animation: op-zoom 2.05s cubic-bezier(.6, 0, 0, 1) .62s both;
}
@keyframes op-arch {
  0%   { clip-path: inset(42vh 40vw 26vh 40vw round 10vw 10vw 0 0); }
  46%  { clip-path: inset(18vh 33vw 14vh 33vw round 17vw 17vw 0 0); }
  100% { clip-path: inset(0 0 0 0 round 0); }
}
@keyframes op-zoom {
  0%   { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* ---- 社名。1文字ずつ、回りながら立ち上がる（見出しと同じ動き） ---- */
.opening__txt {
  position: absolute;
  left: 0; right: 0;
  top: 26vh;
  z-index: 2;
  text-align: center;
  padding: 0 var(--gutter);
  perspective: 700px;
  animation: op-txt-out .5s ease-in 1.5s both;
}
@keyframes op-txt-out {
  to { opacity: 0; transform: translateY(-10px); }
}
.opening__name {
  font-family: var(--serif);
  font-size: clamp(26px, 7vw, 62px);
  font-weight: 500;
  letter-spacing: .06em;
  color: #fff;
  line-height: 1.2;
}
.opening__name span {
  display: inline-block;
  opacity: 0;
  transform: translateY(50%) rotateY(90deg);
  animation: op-ch 1.2s cubic-bezier(.25, 1, .5, 1) both;
}
@keyframes op-ch {
  to { opacity: 1; transform: none; }
}
.opening__name span:nth-child(1) { animation-delay: .06s; }
.opening__name span:nth-child(2) { animation-delay: .11s; }
.opening__name span:nth-child(3) { animation-delay: .16s; }
.opening__name span:nth-child(4) { animation-delay: .21s; }
.opening__name span:nth-child(5) { animation-delay: .26s; }
.opening__name span:nth-child(6) { animation-delay: .31s; }
.opening__name span:nth-child(7) { animation-delay: .36s; }
.opening__name span:nth-child(8) { animation-delay: .41s; }
.opening__name span:nth-child(9) { animation-delay: .46s; }
.opening__name span:nth-child(10) { animation-delay: .51s; }

.opening__sub {
  margin-top: 18px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .3em;
  color: rgba(255,255,255,.72);
  opacity: 0;
  animation: op-sub .9s ease .5s both;
}
@keyframes op-sub { to { opacity: 1; } }

/* ---- 下の細い進み具合の線 ---- */
.opening__bar {
  position: absolute;
  left: 50%; bottom: 8vh;
  z-index: 2;
  width: min(180px, 40vw);
  height: 1px;
  transform: translateX(-50%);
  background: rgba(255,255,255,.22);
  overflow: clip;
  animation: op-txt-out .4s ease-in 1.45s both;
}
.opening__bar i {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  transform-origin: left center;
  animation: op-bar 1.5s cubic-bezier(.35, .6, .2, 1) both;
}
@keyframes op-bar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---- オープニング中はスクロールさせない ---- */
html.is-opening, html.is-opening body { overflow: clip; }

/* ---- 動きを減らす設定では、そもそも出しません ---- */
@media (prefers-reduced-motion: reduce) {
  .opening { display: none !important; }
}

/* ---- 65-b. 社名とアーチが重なっていたので、上げて、先に引かせます ---- */
.opening__txt {
  top: 14vh;
  animation-delay: 1.2s;
}
.opening__bar { animation-delay: 1.15s; }
@media (min-width: 768px) {
  .opening__txt { top: 17vh; }
}

/* ---- 65-c. 開ききった瞬間に、ヒーローと同じ切り取りにする ----
   ここがずれていると、オープニングが終わった瞬間に写真が飛びます。 */
@media (min-width: 768px) {
  .opening__arch img { object-position: center 32%; }
}

/* ==========================================================
   65-d. オープニングを5秒に
   ----------------------------------------------------------
   2.8秒 → 5秒。ただ全部を1.8倍に引き延ばすと、アーチの
   「ため」が長くなりすぎて途中が止まって見えます。
   なので、前半（社名）をゆっくり見せ、アーチには途中の
   通過点を増やして、最後まで動きが途切れないようにします。
   ========================================================== */

/* ---- 全体の長さ ---- */
.motion .opening { animation-delay: 5s; }

/* ---- 社名：1文字ずつを、少しゆっくり ---- */
.opening__name span { animation-duration: 1.3s; }
.opening__name span:nth-child(1)  { animation-delay: .10s; }
.opening__name span:nth-child(2)  { animation-delay: .19s; }
.opening__name span:nth-child(3)  { animation-delay: .28s; }
.opening__name span:nth-child(4)  { animation-delay: .37s; }
.opening__name span:nth-child(5)  { animation-delay: .46s; }
.opening__name span:nth-child(6)  { animation-delay: .55s; }
.opening__name span:nth-child(7)  { animation-delay: .64s; }
.opening__name span:nth-child(8)  { animation-delay: .73s; }
.opening__name span:nth-child(9)  { animation-delay: .82s; }
.opening__name span:nth-child(10) { animation-delay: .91s; }

.opening__sub { animation: op-sub 1s ease .6s both; }

/* ---- 下の線：じわじわ伸ばす ---- */
.opening__bar i { animation-duration: 2.6s; }
.opening__bar { animation: op-txt-out .5s ease-in 2.45s both; }

/* ---- 社名は、アーチが届く前に引く ---- */
.opening__txt { animation: op-txt-out .6s ease-in 2.35s both; }

/* ---- アーチ：1.3秒から4.85秒まで。通過点を増やして、
        途中でも動き続けているようにします ---- */
.opening__arch,
.opening__arch img {
  animation-duration: 3.55s;
  animation-delay: 1.3s;
  animation-timing-function: cubic-bezier(.45, 0, .15, 1);
}
@keyframes op-arch {
  0%   { clip-path: inset(42vh 40vw 26vh 40vw round 10vw 10vw 0 0); }
  30%  { clip-path: inset(31vh 36vw 20vh 36vw round 14vw 14vw 0 0); }
  62%  { clip-path: inset(16vh 31vw 12vh 31vw round 18vw 18vw 0 0); }
  100% { clip-path: inset(0 0 0 0 round 0); }
}

/* ==========================================================
   65-e. オープニングの「手数」を増やす
   ----------------------------------------------------------
   ひとつの動きを長く伸ばすのではなく、動きの数を増やして
   5秒を埋めます。ERAも同じで、11個の要素が順に動いています。

   起きる順（合計5.0秒）
     0.00–0.70  細い横線が中央から引かれる
     0.20–2.90  右下のカウンタが 00→100
     0.00–2.60  下の線が伸びる
     0.50–2.15  社名が1文字ずつ、回りながら出る
     0.95–1.75  肩書きが浮かぶ
     1.30–2.20  TOCHIGI—GUNMA—IBARAKI が中央から開く
     1.75–2.50  免許番号が小さく出る
     2.30–3.05  文字が順に引いていく（4段にずらす）
     2.40–4.85  アーチがせり上がって開く
     3.10–4.85  中の写真が引いて等倍になる
     4.40–5.00  暗い面がわずかに退く
   ========================================================== */

/* ---- 位置どり ---- */
.opening__txt {
  position: absolute;
  left: 0; right: 0;
  top: 15vh;
  z-index: 2;
  text-align: center;
  padding: 0 var(--gutter);
  perspective: 700px;
  animation: none;          /* 退場は中の要素ごとに行います */
}
.opening__foot {
  position: absolute;
  left: 0; right: 0;
  bottom: 7vh;
  z-index: 2;
  padding: 0 var(--gutter);
  display: grid;
  justify-items: center;
  gap: 14px;
}

/* ---- ① 細い横線が、中央から引かれる ---- */
.opening__rule {
  display: block;
  width: min(300px, 60vw);
  height: 1px;
  margin: 0 auto 26px;
  background: rgba(255,255,255,.5);
  transform-origin: center;
  animation: op-rule 4.3s cubic-bezier(.45,0,.15,1) 0s both;
}
@keyframes op-rule {
  0%   { transform: scaleX(0); opacity: 0; }
  16%  { transform: scaleX(1); opacity: 1; }
  53%  { transform: scaleX(1); opacity: 1; }
  70%  { transform: scaleX(0); opacity: 0; }
  100% { transform: scaleX(0); opacity: 0; }
}

/* ---- ② 社名：入りは1文字ずつ、退きは行ごと ---- */
.opening__name span { animation: op-ch 1.2s cubic-bezier(.25,1,.5,1) both; }
.opening__name span:nth-child(1)  { animation-delay: .50s; }
.opening__name span:nth-child(2)  { animation-delay: .57s; }
.opening__name span:nth-child(3)  { animation-delay: .64s; }
.opening__name span:nth-child(4)  { animation-delay: .71s; }
.opening__name span:nth-child(5)  { animation-delay: .78s; }
.opening__name span:nth-child(6)  { animation-delay: .85s; }
.opening__name span:nth-child(7)  { animation-delay: .92s; }
.opening__name span:nth-child(8)  { animation-delay: .99s; }
.opening__name span:nth-child(9)  { animation-delay: 1.06s; }
.opening__name span:nth-child(10) { animation-delay: 1.13s; }
.opening__name { animation: op-leave .6s cubic-bezier(.5,0,.75,0) 2.45s both; }

/* ---- ③ 肩書き ---- */
.opening__sub {
  margin-top: 16px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .3em;
  color: rgba(255,255,255,.74);
  animation: op-fade 4.05s ease .95s both;
}

/* ---- ④ 罫線ラベルが、中央から左右に開く ---- */
.opening__rail {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 420px;
  margin: 26px auto 0;
}
.opening__rail span {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .3em;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
  opacity: 0;
  animation: op-fade 3.4s ease 1.55s both;
}
.opening__rail i {
  flex: 1;
  height: 1px;
  margin: 0 12px;
  background: rgba(255,255,255,.4);
  transform-origin: center;
  animation: op-open 3.7s cubic-bezier(.45,0,.15,1) 1.3s both;
}
@keyframes op-open {
  0%   { transform: scaleX(0); }
  22%  { transform: scaleX(1); }
  56%  { transform: scaleX(1); }
  70%  { transform: scaleX(0); }
  100% { transform: scaleX(0); }
}

/* ---- ⑤ 免許番号 ---- */
.opening__lic {
  font-size: 9px;
  letter-spacing: .14em;
  color: rgba(255,255,255,.5);
  animation: op-fade 3.25s ease 1.75s both;
}

/* ---- ⑥ カウンタ ---- */
.opening__count {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.7);
  font-variant-numeric: tabular-nums;
  animation: op-fade 4.8s ease .2s both;
}

/* ---- ⑦ 下の線 ---- */
.opening__bar {
  position: static;
  transform: none;
  width: min(180px, 40vw);
  height: 1px;
  background: rgba(255,255,255,.2);
  overflow: clip;
  animation: op-fade 4.7s ease 0s both;
}
.opening__bar i { animation: op-bar 2.6s cubic-bezier(.35,.6,.2,1) both; }

/* ---- 共通の出入り ---- */
@keyframes op-fade {
  0%   { opacity: 0; transform: translateY(6px); }
  14%  { opacity: 1; transform: none; }
  52%  { opacity: 1; transform: none; }
  66%  { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes op-leave {
  to { opacity: 0; transform: translateY(-14px); }
}

/* ---- ⑧ アーチ：少し遅らせて、最後まで見せ場を残す ---- */
.opening__arch,
.opening__arch img {
  animation-delay: 2.4s;
  animation-duration: 2.45s;
  animation-timing-function: cubic-bezier(.5, 0, .12, 1);
}
/* 中の写真は、アーチが開いてから引きはじめる */
.opening__arch img { animation-delay: 3.1s; animation-duration: 1.75s; }

/* ---- ⑨ 最後に、暗い面がわずかに退く ---- */
.motion .opening {
  animation:
    op-bg 5s linear 0s both,
    op-end .01s linear 5s forwards;
}
@keyframes op-bg {
  0%   { background-color: #0d1420; }
  88%  { background-color: #121822; }
  100% { background-color: #1a2330; }
}

/* ==========================================================
   66. オープニングからヒーローへの受け渡し
   ----------------------------------------------------------
   「パン！」と切り替わっていた原因は3つでした。
     ① オープニングの写真は画面の高さいっぱい（100vh）、
        ヒーローの写真は92〜94svh。高さが違うので切り取りがずれ、
        入れ替わった瞬間に写真が飛んでいた
     ② オープニングを一瞬で消していた（フェードなし）
     ③ ヒーローの文字は読み込み直後から動いていたので、
        5秒後には動き終わっていて、いきなり完成形で現れていた
   ========================================================== */

/* ---- ① 写真の箱を、ヒーローとぴったり同じ高さにする ---- */
.opening__arch {
  inset: 0 0 auto 0;
  height: 92svh;
}
@supports not (height: 1svh) {
  .opening__arch { height: 92vh; }
}
@media (min-width: 768px) {
  .opening__arch { height: 94svh; }
}

/* ---- ② 消すのではなく、重ねたまま薄れさせる ---- */
.motion .opening {
  animation:
    op-bg 5.1s linear 0s both,
    op-out .62s cubic-bezier(.4, 0, .2, 1) 4.50s forwards;
}
@keyframes op-out {
  0%   { opacity: 1; }
  99%  { opacity: 0; visibility: visible; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}
/* 薄れはじめたら、下のページを操作できるようにしておく */
.motion .opening { pointer-events: none; }

/* アーチは、薄れはじめる前に開ききる */
.opening__arch,
.opening__arch img {
  animation-delay: 2.4s;
  animation-duration: 2.1s;
}
.opening__arch img { animation-delay: 3.0s; animation-duration: 1.5s; }

/* 飛ばしたときは、さっと薄れて終わる */
.opening.is-skipping {
  animation: none !important;
  opacity: 0;
  transition: opacity .28s ease;
  pointer-events: none;
}

/* ---- ③ ヒーローの文字は、オープニングが明ける瞬間から動かす ---- */
html.is-opening .hero__h1 .ch,
html.is-opening .hero__h1 .ch > b,
html.is-opening .hero__h1 span,
html.is-opening .hero__eyebrow,
html.is-opening .hero__rail span,
html.is-opening .hero__rail i,
html.is-opening .scrollcue,
html.is-opening .promo,
html.is-opening .header {
  animation-play-state: paused;
}
/* ヘッダーと下のボタンは、写真が出そろってから浮かせる */
html.is-opening .header,
html.is-opening .fixed-bar {
  opacity: 0;
}
.header, .fixed-bar { transition: opacity .7s ease .15s; }

/* ---- 66-b. まだ飛んでいた2つ ----
   ① ヒーローの写真は24秒かけて 1.10倍→等倍 にゆっくり寄る仕掛けでした。
      オープニングの写真は等倍で終わるので、入れ替わった瞬間に
      6%ほど拡大して見えていました。オープニングを見た回は寄りを切ります。
   ② 見出しはオープニングの裏で動き終わっていて、幕が明けると
      いきなり完成形で現れていました。幕が明けるのに合わせて出します。 */

/* ① 写真の寄りを止める（オープニングが流れた回だけ） */
html.is-opening .hero__media img,
html.is-opened .hero__media img {
  /* 入りのゆっくりズームだけ止めます。
     !important で transform まで固定すると、下で入れた
     「離れるときの視差」が効かなくなります（実際に効いていませんでした）。 */
  animation: none;
}

/* ② 見出し・ラベル・カードは、幕が明けるのに合わせて立ち上がる */
.hero__catch,
.hero__rail,
.scrollcue,
.promo {
  transition:
    opacity .95s cubic-bezier(.25, 1, .5, 1) .1s,
    transform 1.15s cubic-bezier(.25, 1, .5, 1) .1s;
}
html.is-opening .hero__catch { opacity: 0; transform: translateY(22px); }
html.is-opening .hero__rail  { opacity: 0; transform: translateY(14px); }
html.is-opening .scrollcue   { opacity: 0; }
html.is-opening .promo       { opacity: 0; transform: translateY(16px); }

/* ラベルは、見出しより少し遅れて */
html.is-opening .hero__rail { transition-delay: .3s; }
html.is-opening .promo      { transition-delay: .42s; }
html.is-opening .scrollcue  { transition-delay: .55s; }

/* ---- 66-c. ヘッダーと下のボタンの出し方を、CSSだけで完結させる ----
   これまでは <html class="is-opening"> が消えるのを待って出していました。
   つまりJavaScriptが途中で止まると、ヘッダーが見えないままになります。
   幕（.opening）の兄弟として指定し、幕と同じ時間割で自動的に出します。
   幕が無いページ・オープニングが出ない回には、そもそも効きません。 */
html.is-opening .header,
html.is-opening .fixed-bar { opacity: 1; }      /* 上の指定を打ち消す */

.motion .opening:not(.is-done) ~ .header,
.motion .opening:not(.is-done) ~ .fixed-bar {
  animation: op-late-in 5.12s linear 0s both;
}
@keyframes op-late-in {
  0%, 86% { opacity: 0; }
  100%    { opacity: 1; }
}

/* ==========================================================
   67. スクロールの演出を、向こうと同じ数だけ揃える
   ----------------------------------------------------------
   era-residence.com のコードを数えたら、こうでした。
     視差   6種類（img / img-in / img-out / ctn-up / ctn-down / w）
     出現   7種類（h / p / a / line / ctn / slide / w）
   うちは3種類しか無かったので、残りを入れます。数値は向こうのままです。
   ========================================================== */

/* ---- ① ラベル：横軸で回りながら、横から入ってくる ----
   向こうの animateTextA：rotateX 90° ＋ x 10rem ＋ opacity 0 → 素の状態
   見出し（縦軸で回る）と動きを変えることで、画面に段差が出ます。 */
.label, .search-cta__eyebrow, .hero__rail span { perspective: 600px; }
.ch3 { display: inline-block; }
.motion .ch3 {
  opacity: 0;
  transform: rotateX(90deg) translateX(2.2em);
  transform-origin: center bottom;
  transition:
    opacity 1.2s var(--ease-out),
    transform 1.2s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 100ms);
}
.motion .is-in .ch3 { opacity: 1; transform: none; }

/* ---- ② 罫線：上から下へ現れる（向こうの animateLine） ----
   clipPath inset(0 0 100% 0) → inset(0)、1.2秒 */
.motion .heading::after,
.motion .detail__head .heading::after {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s var(--ease-out) .25s;
}
.motion .heading.is-in::after { clip-path: inset(0 0 0 0); }

/* ---- ③ 並んだものは1つずつ ----
   向こうの animateCtn：opacity 0 ＋ 下へ PC 3.33rem／スマホ 11.5rem、
   1.2秒、0.1秒ずつずらす。スマホの移動量が大きいのが特徴です。 */
.motion .property-list > *,
.motion .features > *,
.motion .stats > *,
.motion .cando > *,
.motion .faq__list > *,
.motion .posts > *,
.motion .options > * {
  opacity: 0;
  transform: translateY(112px);
  transition:
    opacity 1.2s var(--ease-out),
    transform 1.2s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 100ms);
}
.motion .property-list.is-in > *,
.motion .features.is-in > *,
.motion .stats.is-in > *,
.motion .cando.is-in > *,
.motion .faq__list.is-in > *,
.motion .posts.is-in > *,
.motion .options.is-in > * {
  opacity: 1;
  transform: none;
}
@media (min-width: 768px) {
  .motion .property-list > *,
  .motion .features > *,
  .motion .stats > *,
  .motion .cando > *,
  .motion .faq__list > *,
  .motion .posts > *,
  .motion .options > * { transform: translateY(53px); }
}

/* かたまり自体はもう動かさない（中身が動くので二重になります） */
.motion .stats,
.motion .features,
.motion .property-list,
.motion .cando,
.motion .faq__list {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ---- ④ 見出しのかたまりは、まとめて順番に出す ----
   向こうの data-scroll-reveal="w"。ラベル → 見出し → 本文 の順。 */
.motion .section__head.is-in .label .ch3 { transition-delay: calc(var(--i, 0) * 100ms); }
.motion .section__head.is-in .heading .ch2 { transition-delay: calc(.20s + var(--i, 0) * 50ms); }
.motion .section__head.is-in .lead .ln__i { transition-delay: calc(.45s + var(--i, 0) * 100ms); }
.motion .detail__head.is-in .label .ch3 { transition-delay: calc(var(--i, 0) * 100ms); }
.motion .detail__head.is-in .detail__title .ch2 { transition-delay: calc(.20s + var(--i, 0) * 50ms); }
.motion .detail__head.is-in .lead .ln__i { transition-delay: calc(.45s + var(--i, 0) * 100ms); }

/* ---- ⑤ 視差を6種類に増やす ----
   となり合う要素を逆向きに流すと、奥行きが出ます。
   これが「スクロールしていて気持ちいい」の正体でした。 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* 下へ流れる（向こうの ctn-down） */
    .concept__media,
    .company__photo,
    .cando__col:nth-child(odd),
    .simtable,
    .rspanel {
      animation: ctn-down linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes ctn-down {
      from { transform: translateY(-8px); }
      to   { transform: translateY(8px); }
    }

    /* 上へ流れる（向こうの ctn-up）。となりと逆向きにします */
    .concept__text,
    .company__body,
    .cando__col:nth-child(even),
    .stats,
    .trustbar {
      animation: ctn-up linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes ctn-up {
      from { transform: translateY(8px); }
      to   { transform: translateY(-8px); }
    }

    /* 写真が、抜けぎわにもう一度動く（向こうの img-out） */
    .area__hero,
    .concept__media img,
    .company__photo img {
      animation: img-out linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
    @keyframes img-out {
      from { transform: translateY(0) scale(1); }
      to   { transform: translateY(14px) scale(1.03); }
    }
  }
}

/* ---- 67-b. 実在しない名前の差し替えと、写真の動きの整理 ----
   ・.company__body は無く .company__side が正しい名前でした
   ・.posts は無く、コラム一覧は .options を使っています
   ・写真に「入りで寄る」と「抜けで流れる」を別々にかけると、
     transform がぶつかって後のほうしか効きません。
     ひとつの流れにまとめます（入り→落ち着く→抜け、の3段）。 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    
    /* 写真の一生：寄って入る → 等倍で落ち着く → すこし流れて抜ける */
    .concept__media img,
    .company__photo img,
    .area__hero {
      animation: photo-life linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      transform-origin: center bottom;
    }
    @keyframes photo-life {
      0%   { transform: scale(1.16) translateY(2.4%); }
      44%  { transform: scale(1)    translateY(0); }
      66%  { transform: scale(1)    translateY(0); }
      100% { transform: scale(1.04) translateY(1.6%); }
    }
  }
}

/* ==========================================================
   68. 視差の量を、向こうと同じにする
   ----------------------------------------------------------
   実測したら、うちの動きは向こうの5〜10分の1でした。
   原因は単位です。ERAは yPercent（要素の高さに対する割合）、
   私は px（固定）で書いていたため、要素が大きいほど弱くなっていました。

     ERA           ctn-up / ctn-down … 高さの ±10%
                   img-in            … 高さの ±15%
     直す前         どちらも 8px（高さの2〜4%）

   ただし、となり合うブロックが縦に重ならないよう、
   ブロックの移動は ±7% に抑えています（写真は向こうと同じ ±15%）。
   ========================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* ---- ブロック：下へ流れる ---- */
    @keyframes ctn-down {
      from { transform: translateY(-7%); }
      to   { transform: translateY(7%); }
    }
    /* ---- ブロック：上へ流れる（となりと逆向き） ---- */
    @keyframes ctn-up {
      from { transform: translateY(7%); }
      to   { transform: translateY(-7%); }
    }

    /* ---- 区切りの写真：向こうと同じ ±15% ----
       動かしたぶん端が見えないよう、1.34倍にしてから動かします
       （移動量15% × 2 ＝ 30%ぶん、拡大で覆う必要があります） */
    @keyframes para-slow {
      from { transform: translateY(-15%) scale(1.34); }
      to   { transform: translateY(15%)  scale(1.34); }
    }

    /* ---- 文字は写真と逆へ。写真ほど動かすと読みにくいので半分 ---- */
    @keyframes para-counter {
      from { transform: translateY(9%); }
      to   { transform: translateY(-9%); }
    }

    /* ---- 記事中の写真：寄って入る → 落ち着く → 流れて抜ける ----
       ずっと1.30倍以上を保って、動かしても端が出ないようにします */
    @keyframes photo-life {
      0%   { transform: scale(1.44) translateY(-11%); }
      45%  { transform: scale(1.30) translateY(0); }
      66%  { transform: scale(1.30) translateY(0); }
      100% { transform: scale(1.40) translateY(9%); }
    }

    /* 写真がはみ出さないよう、入れ物で切ります */
    .concept__media,
    .company__photo { overflow: clip; border-radius: var(--r); }
    .concept__media img,
    .company__photo img { border-radius: 0; }
  }
}

/* ---- 68-b. エリアページの写真に囲いを付ける ----
   <img> が裸で置かれていたため、視差で拡大したぶんが
   ページの外へはみ出して横スクロールが出ていました。
   囲いの中で切り取ります（見た目は変わりません）。 */
.area__herow {
  display: block;
  overflow: clip;
  border-radius: var(--r);
  aspect-ratio: 16 / 9;
}
.area__herow .area__hero {
  width: 100%;
  height: 100%;
  border-radius: 0;
  aspect-ratio: auto;
}

/* ==========================================================
   69. 斜めに切り取りながら、横から出てくる
   ----------------------------------------------------------
   ERAの animateSlide をそのまま写します。
     切り取り  polygon(100% 0%, 100% 0%, 101% 100%, 125% 100%)
             → polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)
     中の写真  scale 1.5 / xPercent 25 → 等倍
     1.2秒、曲線は "InOut" = cubic-bezier(.75, 0, .25, 1)

   右端の細い三角から始まり、斜めの線が左へ走って写真が現れます。
   ※ 実際の切り取りは 69-b でスクロール連動に置き換えています。
   ========================================================== */
:root { --ease-inout: cubic-bezier(.75, 0, .25, 1); }

/* ==========================================================
   70. 縦にスクロールすると、横に流れる区画
   ----------------------------------------------------------
   ERAの [data-scroll-horizontal] と同じ仕掛けです。
   向こうはGSAPのScrollTriggerでピン留めしていますが、
   こちらは position: sticky ＋ CSSのスクロール連動でやります。
   JavaScriptは使いません。対応していないブラウザでは、
   ふつうに横スクロールできる写真の列として表示されます。
   ========================================================== */
.gal {
  position: relative;
  background: var(--bg-2);
}
.gal__sticky {
  padding: 62px 0 40px;
}
.gal__viewport {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gal__viewport::-webkit-scrollbar { display: none; }
.gal__track {
  display: flex;
  gap: 14px;
  width: max-content;
  padding: 0 var(--gutter);
  margin: 0;
  list-style: none;
}
.gal__item {
  position: relative;
  flex: 0 0 auto;
  width: 70vw;
  max-width: 340px;
  overflow: clip;
  border-radius: var(--r);
  background: var(--line);
}
.gal__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.gal__cap {
  position: absolute;
  left: 14px;
  bottom: 12px;
  padding: 5px 10px;
  background: rgba(18, 24, 34, .58);
  backdrop-filter: blur(4px);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  color: #fff;
}
.gal__note {
  max-width: var(--container);
  margin: 18px auto 0;
  padding: 0 var(--gutter);
  font-size: 11px;
  color: var(--text-3);
}

@media (min-width: 768px) {
  .gal__sticky { padding: 96px 0 60px; }
  .gal__item { width: 30vw; max-width: 400px; }
  .gal__track { gap: 20px; }
}

/* ---- 縦スクロールに合わせて、横へ流す ---- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* 区画を縦に伸ばして、その分だけ横に動かします */
    .gal { height: 260vh; }
    .gal__sticky {
      position: sticky;
      top: 0;
      height: 100svh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: clip;
    }
    .gal__viewport { overflow: clip; }

    .gal__track {
      animation: gal-run linear both;
      animation-timeline: view(block, 0px);
      animation-range: contain 0% contain 100%;
    }
    @keyframes gal-run {
      from { transform: translateX(4vw); }
      to   { transform: translateX(calc(-100% + 96vw)); }
    }

    /* 3本の速さに分けて、流れに差をつける（向こうの xPercent の作り） */
    .gal__item--0 { animation: gal-a linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .gal__item--1 { animation: gal-b linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .gal__item--2 { animation: gal-c linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes gal-a { from { transform: translateY(-4%); } to { transform: translateY(4%); } }
    @keyframes gal-b { from { transform: translateY(5%);  } to { transform: translateY(-5%); } }
    @keyframes gal-c { from { transform: translateY(-2%); } to { transform: translateY(6%); } }
  }
}

/* ---- 70-b. 流れなかった原因 ----
   sticky で貼り付いた中身は、画面に対して動きません。
   その中身を基準にスクロール連動を組んでいたので、進み具合が
   ずっと同じままで、横に動きませんでした。
   基準を「縦に伸ばした区画そのもの」に変えます。 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    .gal { view-timeline: --gal block; }

    .gal__track {
      animation: gal-run linear both;
      animation-timeline: --gal;
      animation-range: contain 0% contain 100%;
    }

    /* 3本の速さの差も、同じ基準に合わせます */
    .gal__item--0,
    .gal__item--1,
    .gal__item--2 {
      animation-timeline: --gal;
      animation-range: contain 0% contain 100%;
    }
  }
}

/* ==========================================================
   69-b. 斜めの切り取りを、観察器ではなくスクロール連動で動かす
   ----------------------------------------------------------
   clip-path で潰した要素は、見えている面積がゼロになります。
   すると「画面に入ったか」を見る観察器（IntersectionObserver）は
   永久に反応しません。隠した自分のせいで、開く合図が来ない状態でした。
   （不透明度で隠す場合は面積が残るので、この問題は起きません）

   切り取りの演出だけ、スクロール位置に直結させます。
   対応していないブラウザでは、はじめから切り取らずに表示します。
   ========================================================== */
.motion .concept__media,
.motion .company__photo,
.motion .breather,
.motion .area__herow,
.motion .gal__item {
  clip-path: none;
  transition: none;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .motion .concept__media,
    .motion .company__photo,
    .motion .breather,
    .motion .area__herow {
      animation: slide-in 1s var(--ease-inout) both;
      animation-timeline: view();
      animation-range: entry 6% entry 78%;
    }
    @keyframes slide-in {
      from { clip-path: polygon(100% 0%, 100% 0%, 101% 100%, 125% 100%); }
      to   { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
    }
  }
}

/* 横に流れる写真は、右から入ってくる動きそのものが「出現」なので、
   切り取りは重ねません（二重になって、かえって見えにくくなります）。 */
.motion .gal__item { animation: none; }

/* ==========================================================
   70-c. 横に流れる区画を、もっと見応えのあるものに
   ----------------------------------------------------------
   ・写真を9枚 → 12枚（御社の写真を全部使います）
   ・文字の面を前後に2枚（見出しと、物件検索への入口）
   ・カードの幅を2種類にして、流れに緩急をつける
   ・区画を縦に伸ばして、流れる時間を長くする
   ========================================================== */
.gal__item--wide { width: 84vw; max-width: 520px; }
.gal__item--wide img { aspect-ratio: 3 / 2; }

/* ---- 文字の面 ---- */
.gal__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 64vw;
  max-width: 300px;
  padding: 26px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  aspect-ratio: 4 / 5;
}
.gal__panel > a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.gal__eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .24em;
  color: var(--red);
  margin-bottom: 14px;
}
.gal__ttl {
  font-family: var(--serif);
  font-size: clamp(22px, 5.4vw, 30px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .02em;
  color: var(--text);
}
.gal__rule {
  display: block;
  width: 40px;
  height: 2px;
  margin: 18px 0;
  background: var(--red);
}
.gal__sub {
  font-size: 12px;
  line-height: 1.9;
  color: var(--text-2);
}
.gal__panel--cta { background: var(--text); border-color: var(--text); }
.gal__panel--cta .gal__ttl { color: #fff; }
.gal__panel--cta .gal__sub { color: rgba(255,255,255,.72); }
.gal__panel--cta .gal__eyebrow { color: #f0a9a3; }
.gal__panel--cta .gal__rule { background: var(--red); }
.gal__go {
  margin-top: 20px;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  transition: transform .3s var(--ease-out);
}
.gal__panel--cta a:hover .gal__go { transform: translateX(8px); }

@media (min-width: 768px) {
  .gal__item { width: 26vw; max-width: 360px; }
  .gal__item--wide { width: 40vw; max-width: 560px; }
  .gal__panel { width: 26vw; max-width: 360px; padding: 34px 32px; }
  .gal__track { gap: 22px; }
}

/* ---- 流れる時間を長くする ---- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .gal { height: 320vh; }
    .gal__note {
      position: absolute;
      left: 0; right: 0; bottom: 24px;
    }
  }
  @media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    .gal { height: 400vh; }
  }
}

/* ---- 70-d. 前後に「ため」を作る ----
   区画に入った瞬間から動きはじめていたので、最初の面（見出し）が
   読まれる前に流れ去っていました。実測で6%の時点でもう画面外。
   前後を止めて、最初と最後の面を読める時間を作ります。 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes gal-run {
      0%   { transform: translateX(4vw); }
      9%   { transform: translateX(4vw); }                      /* 見出しを読む間 */
      91%  { transform: translateX(calc(-100% + 96vw)); }
      100% { transform: translateX(calc(-100% + 96vw)); }       /* 最後の面を読む間 */
    }
    .gal { height: 360vh; }
  }
  @media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    .gal { height: 460vh; }
  }
}

/* ==========================================================
   71. 会社情報を組み直す
   ----------------------------------------------------------
   もとは11行の表がそのまま置いてあるだけで、数字も写真も
   小さな箱に押し込まれていました。ページの他の部分（大きな
   明朝の見出し・全画面の写真・視差）と釣り合っていません。

   ・数字3つを、大きく横一列に（細い縦罫で区切る）
   ・11行を「会社」「免許・所属」の2つに分けて、読む単位を小さく
   ・表は箱をやめて、細い横罫だけにする
   ・写真を縦長にして、右の文字と並べる
   ========================================================== */
.company { background: var(--bg-2); }

/* ---- 数字を3つだけ、大きく ---- */
.figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.figures li {
  padding: 24px 10px;
  text-align: center;
}
.figures li + li { border-left: 1px solid var(--line); }
.figures strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(38px, 11vw, 76px);
  font-weight: 500;
  line-height: 1.05;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.figures strong small {
  font-size: .3em;
  margin-left: 3px;
  color: var(--red);
}
.figures span {
  display: block;
  margin-top: 10px;
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--text-2);
}

/* ---- 写真と一覧を並べる ---- */
.company__grid {
  display: grid;
  gap: 34px;
  margin-top: 40px;
}
.company__photo { margin: 0; }
.company__photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r);
}
.company__photo figcaption {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--text-3);
}

/* ---- 一覧：箱をやめて、細い横罫だけに ---- */
.cblock + .cblock { margin-top: 34px; }
.cblock__ttl {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .24em;
  color: var(--red);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-2);
}
.crows { margin: 0; }
.crows > div {
  display: grid;
  grid-template-columns: 5.6em 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.crows dt {
  font-size: 11.5px;
  line-height: 1.8;
  letter-spacing: .04em;
  color: var(--text-3);
}
.crows dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text);
}
.crows dd a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-2); }
.crows dd a:hover { border-bottom-color: var(--red); }

.company__more { margin-top: 30px; }

@media (min-width: 768px) {
  .figures { margin-top: 48px; }
  .figures li { padding: 34px 16px; }
  .figures span { font-size: 12px; }
  .company__grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 56px;
    align-items: start;
    margin-top: 56px;
  }
  .company__photo img { aspect-ratio: 3 / 4; }
  .crows > div { grid-template-columns: 7em 1fr; padding: 16px 0; }
  .crows dd { font-size: 14px; }
}
@media (min-width: 1024px) {
  .company__grid { gap: 76px; }
}

/* 数字も1つずつ順に出します（並んだものと同じ扱い） */
.motion .figures > * {
  opacity: 0;
  transform: translateY(112px);
  transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 100ms);
}
.motion .figures.is-in > * { opacity: 1; transform: none; }
@media (min-width: 768px) {
  .motion .figures > * { transform: translateY(53px); }
}
.motion .figures { opacity: 1; transform: none; transition: none; }

/* 数字の説明は折り返さない（短くしたので1行に収まります） */
.figures span { white-space: nowrap; font-size: 10px; }
@media (min-width: 480px) { .figures span { font-size: 11px; } }
@media (min-width: 768px) { .figures span { font-size: 12px; } }

/* ==========================================================
   72. ヒーローの動きを、サイトの他と同じ作法に揃える
   ----------------------------------------------------------
   ここだけ古い仕掛けが残っていました。
     ・9秒ごとに文字が跳ねる「ループの波」……
       止まらない動きは、見るたびに気が散ります。向こうにもありません。
     ・出るときも、かたまりごと薄く浮かぶだけ

   他のページと同じ作法に統一します。
     ① 1文字ずつ rotateY 90°→0°（向こうの animateTextH と同じ）
     ② 肩書きと地名は rotateX 90°＋横から（animateTextA と同じ）
     ③ スクロールで離れるとき、写真と文字を逆方向へ流す
   ========================================================== */

/* ---- ① ループの波を止める ---- */
.hero__h1 .ch > b {
  animation: none !important;
  transform: none !important;
  color: #fff !important;
}

/* ---- ② 1文字ずつ、縦軸で回りながら立ち上がる ---- */
.hero__h1 .ch {
  animation: hero-char 1.2s var(--ease-out) both;
  animation-delay: calc(var(--i) * .05s);
  transform-origin: 50% 50%;
}
.hero__h1 { perspective: 800px; }
@keyframes hero-char {
  from { opacity: 0; transform: translateY(50%) rotateY(90deg); }
  to   { opacity: 1; transform: none; }
}

/* オープニングが流れる回は、幕が明けてから動かす */
html.is-opening .hero__h1 .ch { animation-play-state: paused; }

/* かたまりごと浮かせる古い動きは、もう要りません
   （1文字ずつ出るので、二重になります） */
.hero__catch { opacity: 1 !important; }
html.is-opening .hero__catch { opacity: 1 !important; transform: none !important; }

/* ---- ③ 肩書きと地名は、横軸で回りながら横から ---- */
.hero__eyebrow {
  animation: hero-accent 1.1s var(--ease-out) .15s both;
  transform-origin: center bottom;
}
@keyframes hero-accent {
  from { opacity: 0; transform: rotateX(90deg) translateX(1.6em); }
  to   { opacity: 1; transform: none; }
}
html.is-opening .hero__eyebrow { animation-play-state: paused; }

.hero__rail span,
.hero__rail i { animation-play-state: running; }
html.is-opening .hero__rail span,
html.is-opening .hero__rail i { animation-play-state: paused; }
.hero__rail i {
  transform-origin: center;
  animation: hero-rule 1.2s var(--ease-out) .75s both;
}
@keyframes hero-rule {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
html.is-opening .hero__rail { opacity: 1 !important; transform: none !important; }

/* ---- ④ スクロールで離れるとき、写真と文字を逆へ流す ---- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__media img {
      animation: hero-away linear both !important;
      animation-timeline: view() !important;
      animation-range: exit 0% exit 100% !important;
      transform: none;
    }
    @keyframes hero-away {
      from { transform: scale(1)    translateY(0); }
      to   { transform: scale(1.14) translateY(6%); }
    }
    .hero__catch {
      animation: hero-catch-away linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 92%;
    }
    @keyframes hero-catch-away {
      from { transform: translateY(0);    opacity: 1; }
      to   { transform: translateY(-46%); opacity: 0; }
    }
  }
}

/* ---- 72-b. ヒーローも overflow: hidden でした ----
   これも「スクロールできる箱」を作ってしまい、中の写真と見出しが
   ページではなくヒーローを基準にしてしまうため、
   離れるときの視差がまったく効いていませんでした（実測0px）。
   切り取るだけの overflow: clip に変えます。 */
.hero { overflow: clip; }
.hero__top { overflow: clip; }

/* ---- 72-c. スクロール連動をかけている要素の親は、すべて clip に ----
   overflow: hidden は「スクロールできる箱」を作るため、その中の要素は
   ページではなく箱を基準にしてしまい、視差がまったく効きません。
   今回それで2回（区切りの写真・ヒーロー）つまずいたので、
   連動をかけている要素の入れ物をまとめて切り替えます。
   overflow: clip は箱を作らず、切り取るだけです。 */
.contact,
.property__media,
.gallery__main,
.staff { overflow: clip; }

/* ==========================================================
   73. 常に、どこかが動いている状態にする
   ----------------------------------------------------------
   測ったら、記事ページはほぼ全域で「スクロールに連動して動く要素」が
   0個でした。一度出たら、あとは完全に止まった画面になっていました。

   そこで、面（かたまり）にもゆるやかな流れを付けます。
   　・写真   … 高さの ±10%（いままで通り）
   　・カード … 高さの ±4%
   　・見出し … 高さの ±2.5%
   　・本文の段落は動かしません（読みにくくなるため）

   となり合うものを逆向きにするのが要点です。
   同じ向きに全部流れると、ただページが伸び縮みして見えます。

   ※ 出現の動き（translateY）を持つ要素とは別の要素に掛けています。
      同じ要素に両方掛けると、あとから掛けたほうだけが効いて
      出現の動きが消えます。
   ========================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* ---- 下へ流れる側 ---- */
    .section__head,
    .faq__list,
    .simtable,
    .tablewrap,
    .property-list,
    .checklist,
    .flowlist {
      animation: drift-down linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes drift-down {
      from { transform: translateY(-2.5%); }
      to   { transform: translateY(2.5%); }
    }

    /* ---- 上へ流れる側（となりと逆向き） ---- */
    .detail__head,
    .cando,
    .options,
    .features,
    .figures,
    .rspanel,
    .midcta {
      animation: drift-up linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes drift-up {
      from { transform: translateY(3.5%); }
      to   { transform: translateY(-3.5%); }
    }

    /* ---- 注記や説明は、もう少し大きく逆へ ---- */
    .note,
    .breather figcaption,
    .gal__note,
    .company__photo figcaption {
      animation: drift-note linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes drift-note {
      from { transform: translateY(9%); }
      to   { transform: translateY(-9%); }
    }

    /* ---- 区切りの写真の中の文字は、写真と逆へ（いままで通り） ---- */
  }
}

/* ---- 73-b. 止まったままの場所を埋める ----
   測ったら、記事ページにまだ「動きが0個」の位置が残っていました。
   ・理由や手順を並べた一覧（.guide-list / .steps）
   ・写真のないお問い合わせ帯（.contact__inner）
   ・注記だけの場所
   よく使われている順に足します。 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .guide-list,
    .steps,
    .gallery,
    .access-table,
    .crows {
      animation: drift-down linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    .contact__inner,
    .company__grid,
    .cblock,
    .prose > .note {
      animation: drift-up linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

/* ==========================================================
   74. ヒーローに、止まらない呼吸を入れる
   ----------------------------------------------------------
   測ったら、着地したあとのヒーローは6要素すべて完全停止でした。
   最初に目に入る場所が一番静かい、という状態です。

   ただし前に入っていた「9秒ごとに文字が跳ねる」やり方には戻しません。
   あれは短い時間で大きく動くので、跳ねるたびに気が散りました。
   今回は逆で、長い時間をかけて少しだけ動かします。
   　写真   26秒で 1.00 → 1.05 倍（気づかない速さ）
   　見出し  9秒で 上下 4px（2行を1.6秒ずらす）
   　地名   11秒で 上下 2px（見出しと逆向き）
   往復（alternate）にして、切り替わりの瞬間を作りません。

   ※ 掛ける場所を分けています。
      .hero__media（入れ物）＝ 時間で動く呼吸
      .hero__media img       ＝ スクロールで動く視差
      同じ要素に両方掛けると、あとの1つしか効きません。
   ========================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* ---- 写真：ゆっくり息をする ---- */
  .hero__media {
    animation: hero-breathe 26s ease-in-out infinite alternate;
    /* will-change は付けません。写真が独立した層に上がり、
       その上に載るはずの見出しが描かれないことがありました。 */
  }
  @keyframes hero-breathe {
    from { transform: scale(1); }
    to   { transform: scale(1.05); }
  }

  /* ---- 見出し：2行を、ずらして上下させる ---- */
  .hero__h1 > span {
    animation: hero-float 9s ease-in-out infinite alternate;
  }
  .hero__h1 > span:nth-child(2) { animation-delay: -1.6s; }
  @keyframes hero-float {
    from { transform: translateY(2px); }
    to   { transform: translateY(-2px); }
  }

  /* ---- 地名の行：見出しと逆へ、もっとゆっくり ---- */
  .hero__rail {
    animation: hero-float-rev 11s ease-in-out infinite alternate;
  }
  @keyframes hero-float-rev {
    from { transform: translateY(-1px); }
    to   { transform: translateY(1px); }
  }

  /* ---- オープニング中は止めておく ---- */
  html.is-opening .hero__media,
  html.is-opening .hero__h1 > span,
  html.is-opening .hero__rail { animation-play-state: paused; }
}

/* ==========================================================
   74-b. ヒーローの文字が描かれない不具合を直す
   ----------------------------------------------------------
   症状：DOM上は「白・不透明度1・最前面」なのに、画面に出ない。
        背景色を付けると箱は描かれるのに、中の文字だけ出ない。

   原因：ヒーローだけ CSSアニメーション（fill: both）で出していました。
        fill: both のアニメーションは終わったあとも要素に残り続け、
        perspective（立体）の中で合成用の層を保持します。
        その状態で大きな文字を描くと、描画が抜けることがありました。

   他のページの見出しは transition で出しているため、
        出し終わると層が解放され、この問題が起きていません。
   ヒーローも同じやり方に揃えます。
   ========================================================== */
.hero__h1 .ch { animation: none !important; }
.hero__rail i { animation: none !important; }
/* ※ .hero__eyebrow はここで止めません。
   止めると、あとで入れた「ゆっくり上下する動き」まで消えます
   （!important は、あとから書いた指定より強いため）。
   古い hero-accent は、あとの指定で上書きされます。 */

.motion .hero__h1 .ch {
  opacity: 0;
  transform: translateY(50%) rotateY(90deg);
  transition:
    opacity 1.2s var(--ease-out),
    transform 1.2s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 50ms);
}
.motion .hero__h1.is-in .ch { opacity: 1; transform: none; }

.motion .hero__eyebrow {
  opacity: 0;
  transform: rotateX(90deg) translateX(1.6em);
  transform-origin: center bottom;
  transition: opacity 1.1s var(--ease-out) .15s, transform 1.1s var(--ease-out) .15s;
}
.motion .hero__catch.is-in .hero__eyebrow,
.motion .hero__h1.is-in ~ .hero__rail,
.motion .hero__eyebrow.is-in { opacity: 1; transform: none; }

.motion .hero__rail i {
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1.2s var(--ease-out) .7s;
}
.motion .hero__h1.is-in ~ .hero__rail i { transform: scaleX(1); }

/* ---- 74-c. 見出しが描かれなかった本当の原因 ----
   ヒーローの行には、もともと「左から右へ開く」切り取りが
   掛かっていました（clip-path: inset(0 100% 0 0) を
   アニメーションで開く作り）。
   74で行に hero-float を指定したとき、animation が置き換わって
   「開く」動きが消え、切り取りが閉じたまま残っていました。
   → 行の幅がゼロに切り取られ、中の文字が一切描かれない状態。

   いまは1文字ずつ出すので、行のワイプは不要です。外します。 */
.hero__h1 span,
.hero__eyebrow,
.hero__sub {
  clip-path: none !important;
  overflow: visible !important;
}
.hero__h1 span::before,
.hero__eyebrow::before,
.hero__sub::before { display: none !important; }

/* ==========================================================
   75. ヒーローの動きを、見える量にする
   ----------------------------------------------------------
   74で入れた呼吸は「9秒で上下2px」。数値の上では動いていますが、
   1秒あたり0.4pxなので、目には止まって見えます。
   実際に見て分かる量まで上げます。

     見出し  6.5秒で上下 16px（2行を逆向きに動かす）
     肩書き  8秒で上下 8px
     地名   7秒で上下 10px（見出しと逆）
     写真   20秒で 1.00 → 1.07倍

   2行を「同じ向きで時間差」ではなく「逆向き」にするのが要点です。
   行と行の間隔が伸び縮みするので、止まって見えなくなります。
   ========================================================== */
@media (prefers-reduced-motion: no-preference) {

  .hero__media {
    animation: hero-breathe 20s ease-in-out infinite alternate;
  }
  @keyframes hero-breathe {
    from { transform: scale(1); }
    to   { transform: scale(1.07); }
  }

  /* 1行目は下へ、2行目は上へ。逆向きにすると動きが分かります */
  .hero__h1 > span:nth-child(1) {
    animation: hero-float-a 6.5s ease-in-out infinite alternate;
  }
  .hero__h1 > span:nth-child(2) {
    animation: hero-float-b 6.5s ease-in-out infinite alternate;
    animation-delay: -.9s;
  }
  @keyframes hero-float-a {
    from { transform: translateY(-8px); }
    to   { transform: translateY(8px); }
  }
  @keyframes hero-float-b {
    from { transform: translateY(8px); }
    to   { transform: translateY(-8px); }
  }

  .hero__eyebrow {
    animation: hero-float-eb 8s ease-in-out infinite alternate;
  }
  @keyframes hero-float-eb {
    from { transform: translateY(4px); }
    to   { transform: translateY(-4px); }
  }

  .hero__rail {
    animation: hero-float-rail 7s ease-in-out infinite alternate;
  }
  @keyframes hero-float-rail {
    from { transform: translateY(-5px); }
    to   { transform: translateY(5px); }
  }

  html.is-opening .hero__media,
  html.is-opening .hero__h1 > span,
  html.is-opening .hero__eyebrow,
  html.is-opening .hero__rail { animation-play-state: paused; }
}

/* ---- 75-b. 2行を逆向きにするのはやりすぎでした ----
   実測で行間が 142.8px → 119.5px（23px）伸び縮みし、
   2行が近づいたり離れたりして落ち着きませんでした。
   同じ向きに、時間差だけ付けます。
   　かたまりとしては16px動く（見て分かる）
   　行間の変化は5px程度に収まる（詰まって見えない）   */
@media (prefers-reduced-motion: no-preference) {
  .hero__h1 > span:nth-child(1),
  .hero__h1 > span:nth-child(2) {
    animation: hero-float-a 6.5s ease-in-out infinite alternate;
  }
  .hero__h1 > span:nth-child(2) { animation-delay: -1.3s; }
}

/* ==========================================================
   76. スクロールの速さに反応させる
   ----------------------------------------------------------
   受賞サイトが「生きている」と感じる正体は、動きの量が
   スクロールの速さに連動していることでした。
   速く回せば大きく傾き、止めれば静かに戻ります。

   要点は、transform を使わないことです。
   すでに視差（transform）を掛けてあるので、そこに足すと
   片方しか効きません。rotate / scale / translate という
   独立したプロパティに渡せば、重ねて効きます。
   ========================================================== */
:root { --vel: 0; --velabs: 0; }

@media (prefers-reduced-motion: no-preference) {

  /* ---- 写真：速く回すほど傾いて、ほんの少し伸びる ---- */
  .statement__bg,
  .breather img,
  .contact__media img,
  .concept__media img,
  .company__photo img,
  .area__hero,
  .gal__item img,
  .hero__media img {
    rotate: calc(var(--vel) * 1.6deg);
    scale: calc(1 + var(--velabs) * 0.035);
    transition: rotate .45s ease-out, scale .45s ease-out;
  }

  /* ---- カード：写真と逆へ、小さく傾く ---- */
  .gal__item,
  .option,
  .feature,
  .faq__item,
  .pc,
  .figures li {
    rotate: calc(var(--vel) * -0.55deg);
    transition: rotate .5s ease-out;
  }

  /* ---- 流れる帯：速さに合わせて一気に押し出す ---- */
  .marquee__track {
    translate: calc(var(--vel) * -90px) 0;
    transition: translate .5s cubic-bezier(.2, .9, .3, 1);
  }

  /* ---- 横に流れる写真：速さで前へ押し出す ---- */
  .gal__track {
    translate: calc(var(--vel) * -60px) 0;
    transition: translate .5s cubic-bezier(.2, .9, .3, 1);
  }

  /* ---- 見出しの文字：速さで少しだけ寝かせる ---- */
  .heading .ch2,
  .detail__title .ch2,
  .statement__line .ch2 {
    rotate: calc(var(--vel) * -1.1deg);
    transition: rotate .5s ease-out;
  }

  /* ---- ヒーローの見出し：もっと大きく ---- */
  .hero__h1 > span {
    rotate: calc(var(--vel) * -1.8deg);
    transition: rotate .5s ease-out;
  }
}

/* ==========================================================
   77. ヒーローを「くぐり抜ける」
   ----------------------------------------------------------
   これまでは、離れるときに写真が1.14倍・見出しが167px上がるだけ。
   スクロールすると家に向かって進んでいくように見せます。

     写真    1.00 → 1.55倍（画面が家に吸い込まれる）
     見出し  1.00 → 1.9倍まで拡大しながら、上へ抜けて消える
     地名    先に、下へ置いていかれる

   拡大の中心を画面の少し上にして、視線の高さに合わせます。
   ========================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    .hero__media img {
      animation: hero-dive linear both !important;
      animation-timeline: view() !important;
      animation-range: exit 0% exit 100% !important;
      transform-origin: center 38%;
    }
    @keyframes hero-dive {
      from { transform: scale(1)    translateY(0); }
      to   { transform: scale(1.55) translateY(4%); }
    }

    /* 見出しは、迫ってきながら上へ抜ける */
    .hero__catch {
      animation: hero-through linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 86%;
      transform-origin: center 30%;
    }
    @keyframes hero-through {
      0%   { transform: scale(1)   translateY(0);    opacity: 1; }
      55%  { transform: scale(1.3) translateY(-26%); opacity: .85; }
      100% { transform: scale(1.9) translateY(-78%); opacity: 0; }
    }

    /* 地名の行は、置いていかれる（見出しより遅く動く） */
    .hero__rail {
      animation: hero-rail-away linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 70%;
    }
    @keyframes hero-rail-away {
      from { opacity: 1; }
      to   { opacity: 0; }
    }
  }
}

/* ---- 76-b. 反応の量を、はっきり見える大きさに ----
   実測で、速く回したときの値は 0.66 まで出ます。
   その0.66のときに「おっ」と思う量まで引き上げます。
   　写真   傾き 2.0度／伸び 5%（前は 1.0度／2.3%）
   　カード 傾き 0.9度（前は 0.36度）
   　流れる帯 180px（前は 59px）
   止めれば0.45秒で元に戻るので、読むときは静かなままです。 */
@media (prefers-reduced-motion: no-preference) {
  .statement__bg,
  .breather img,
  .contact__media img,
  .concept__media img,
  .company__photo img,
  .area__hero,
  .gal__item img,
  .hero__media img {
    rotate: calc(var(--vel) * 3deg);
    scale: calc(1 + var(--velabs) * 0.08);
  }
  .gal__item,
  .option,
  .feature,
  .faq__item,
  .pc,
  .figures li {
    rotate: calc(var(--vel) * -1.4deg);
  }
  .marquee__track { translate: calc(var(--vel) * -180px) 0; }
  .gal__track     { translate: calc(var(--vel) * -140px) 0; }

  .heading .ch2,
  .detail__title .ch2,
  .statement__line .ch2 { rotate: calc(var(--vel) * -2.4deg); }
  .hero__h1 > span      { rotate: calc(var(--vel) * -3.6deg); }

  /* ※ 歪み（skew）は入れません。
     skew は transform でしか書けず、写真にはすでに視差の
     transform が掛かっているため、片方しか効きません。
     独立して重ねられる rotate / scale だけを使います。 */
}

/* ---- 76-c. 反応を速くする ----
   0.45秒かけて追従していたため、速く回した瞬間には
   まだ動きが始まっていませんでした（実測：0.33秒後で0度）。
   立ち上がりを0.16秒に詰めます。
   戻りはJS側が1フレームごとに0.9倍へ落としているので、
   指を止めれば約0.2秒で静かになります。 */
@media (prefers-reduced-motion: no-preference) {
  .statement__bg, .breather img, .contact__media img,
  .concept__media img, .company__photo img, .area__hero,
  .gal__item img, .hero__media img,
  .gal__item, .option, .feature, .faq__item, .pc, .figures li,
  .heading .ch2, .detail__title .ch2, .statement__line .ch2,
  .hero__h1 > span {
    transition: rotate .16s ease-out, scale .16s ease-out;
  }
  .marquee__track,
  .gal__track {
    transition: translate .16s cubic-bezier(.2, .9, .3, 1);
  }
}

/* ==========================================================
   76-d. 2つの不具合をまとめて直す
   ----------------------------------------------------------
   ① 速さへの反応に transition を掛けたのが間違いでした。
      値が毎フレーム変わる相手に transition を掛けると、
      毎回そこから掛け直しになり、ほとんど進みません。
      実測：速さ0.58のとき、傾きは0度のまま。
      transition を外すと 0.9度・1.8度・2.7度と正しく追従します。
      滑らかさはJS側（毎フレーム0.25ずつ寄せる）で作っているので、
      CSS側の transition は不要でした。

   ② その transition が、出現の動きを消していました。
      transition は書き換えると前の指定を丸ごと置き換えます。
      見出しの1文字ずつ（opacity / transform 1.2秒）が
      rotate / scale 0.16秒に差し替わっていました。
      両方を並べて書き直します。
   ========================================================== */

/* ---- 写真：出現は親（切り取り）が担当なので、遷移は不要 ---- */
.statement__bg,
.breather img,
.contact__media img,
.concept__media img,
.company__photo img,
.area__hero,
.gal__item img,
.hero__media img { transition: none; }

/* ---- 見出しの文字：出現の動きを取り戻す（速さの傾きは即時） ---- */
.motion .heading .ch2,
.motion .detail__title .ch2,
.motion .statement__line .ch2 {
  transition:
    opacity 1.2s var(--ease-out),
    transform 1.2s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 50ms);
}

/* ---- 並んだカード：出現の動きを取り戻す ---- */
.motion .option,
.motion .feature,
.motion .faq__item,
.motion .pc,
.motion .figures li,
.motion .gal__item {
  transition:
    opacity 1.2s var(--ease-out),
    transform 1.2s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 100ms);
}

/* ---- 帯の押し出しも即時に ---- */
.marquee__track,
.gal__track { transition: none; }

/* ---- ヒーローの行は、呼吸のアニメと速さの傾きだけ ---- */
.hero__h1 > span { transition: none; }

/* ==========================================================
   78. 区切りの写真を「見せ場」にする
   ----------------------------------------------------------
   これまでの作りの問題：
     どの要素も同じように少しずつ漂うだけでした。
     全部が同じ動きだと、壁紙と同じで気に留まりません。
     オープニングが効くのは「暗転 → 社名 → アーチが開く」という
     ためと解放があるからです。動きの大きさではなく、
     「次に何が起きるか」があるかどうかでした。

   そこで、区切りの写真を画面に貼り付けて、
   オープニングと同じ「窓が開く」動きをもう一度使います。

     0%   小さな窓（画面の中央に、アーチ型で）
     45%  窓が広がりきって全画面に
     45%〜 そのまま見せて、次のセクションへ送り出す

   文字は窓が開ききってから、遅れて出します。
   ========================================================== */
.statement {
  height: 230vh;
  background: var(--text);
  view-timeline: --stmt block;
}
.statement__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
  display: grid;
  align-items: end;
  isolation: isolate;
}
@supports not (height: 1svh) {
  .statement__sticky { height: 100vh; }
}
.statement__win {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
}
.statement__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.statement__inner {
  position: relative;
  z-index: 2;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* ---- 窓が開く ---- */
    .statement__win {
      animation: stmt-open linear both;
      animation-timeline: --stmt;
      animation-range: contain 0% contain 46%;
    }
    @keyframes stmt-open {
      0%   { clip-path: inset(30vh 33vw 26vh 33vw round 16vw 16vw 2vw 2vw); }
      100% { clip-path: inset(0 0 0 0 round 0); }
    }

    /* ---- 中の写真は、窓が開くあいだ寄りから等倍へ ---- */
    .statement__bg {
      animation: stmt-zoom linear both;
      animation-timeline: --stmt;
      animation-range: contain 0% contain 100%;
    }
    @keyframes stmt-zoom {
      0%   { transform: scale(1.5) translateY(0); }
      46%  { transform: scale(1.12) translateY(0); }
      100% { transform: scale(1.12) translateY(-7%); }
    }

    /* ---- 文字は、窓が開いてから遅れて出る ---- */
    .statement__inner {
      animation: stmt-text linear both;
      animation-timeline: --stmt;
      animation-range: contain 34% contain 100%;
    }
    @keyframes stmt-text {
      0%   { opacity: 0; transform: translateY(64px); }
      34%  { opacity: 1; transform: translateY(0); }
      78%  { opacity: 1; transform: translateY(0); }
      100% { opacity: .25; transform: translateY(-58px); }
    }

    /* 前に入れた視差は、この見せ場と喧嘩するので止めます */
    .statement__bg { animation-name: stmt-zoom; }
  }
}

/* ==========================================================
   79. 漂いを減らして、見せ場を立たせる
   ----------------------------------------------------------
   73で「どこを見ても何かが動いている」状態にしましたが、
   全部が同じように動くと、どれも目に留まりません。
   見せ場（窓が開く／横に流れる／オープニング）を立たせるため、
   まわりの漂いは半分以下に落とします。

   動かすのをやめるのではなく、「主役と脇役の差」をつけます。
   ========================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes drift-down {
      from { transform: translateY(-1%); }
      to   { transform: translateY(1%); }
    }
    @keyframes drift-up {
      from { transform: translateY(1.4%); }
      to   { transform: translateY(-1.4%); }
    }
    @keyframes drift-note {
      from { transform: translateY(4%); }
      to   { transform: translateY(-4%); }
    }
    /* 面（ブロック）の逆向きの流れも、半分に */
    @keyframes ctn-down {
      from { transform: translateY(-3%); }
      to   { transform: translateY(3%); }
    }
    @keyframes ctn-up {
      from { transform: translateY(3%); }
      to   { transform: translateY(-3%); }
    }
  }
}

/* 速さへの反応も、脇役ぶんは控えめに。写真は残します */
@media (prefers-reduced-motion: no-preference) {
  .option, .feature, .faq__item, .pc, .figures li {
    rotate: calc(var(--vel) * -0.5deg);
  }
  .heading .ch2,
  .detail__title .ch2 { rotate: calc(var(--vel) * -0.9deg); }
}

/* ---- 78-b. タイムラインの名前が重なっていました ----
   同じ view-timeline 名を2箇所で宣言すると、名前が解決できず
   進み具合が 0 のまま固定されます（実測：全域で0、
   名前を一意にした瞬間に 0.14 → 0.75 → 1.00 と動き出しました）。
   区切りごとに別の名前を付けます。 */
.statement--1 { view-timeline: --stmt1 block; }
.statement--2 { view-timeline: --stmt2 block; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .statement--1 .statement__win,
    .statement--1 .statement__bg,
    .statement--1 .statement__inner { animation-timeline: --stmt1; }
    .statement--2 .statement__win,
    .statement--2 .statement__bg,
    .statement--2 .statement__inner { animation-timeline: --stmt2; }
  }
}

/* ==========================================================
   80. 動きを軽くする
   ----------------------------------------------------------
   実測：スクロール中 25〜30fps。動画のせいではなく、
   ページ全体が重くなっていました（動画のある区切りより
   ふつうの本文のほうが遅い、という結果が出ました）。

   原因は「速さに反応する要素の数」でした。146個。
   うち91個は見出しの1文字ずつ（.ch2）です。
   スクロールのたびに、その全部の見た目を計算し直していました。
   1文字が1度傾いても誰も気づかないので、ここは外します。

   残すのは、効果が分かる大きなものだけ（約30個）。
   ========================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* 文字1つずつの反応はやめます（91個 → 0個） */
  .heading .ch2,
  .detail__title .ch2,
  .statement__line .ch2 { rotate: none; }

  /* 小さなカードもやめます（効果が見えないわりに数が多い） */
  .pc,
  .figures li,
  .feature { rotate: none; }
}

/* ==========================================================
   81. 動画を、写真と同じ扱いにする
   ----------------------------------------------------------
   これまでのCSSは img を名指ししていたので、動画に替えた場所で
   切り取り位置も視差も効かなくなります。
   video にも同じ指定が当たるようにまとめます。
   ========================================================== */
.hero__media video,
.statement video,
.gal__item video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--text);
}

/* ヒーロー：写真と同じ切り取り位置・同じ視差 */
.hero__media video { object-position: center 34%; }
@media (min-width: 768px) { .hero__media video { object-position: center 38%; } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__media video {
      animation: hero-dive linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
      transform-origin: center 38%;
    }
  }
}
html.is-opening .hero__media video,
html.is-opened .hero__media video { animation-name: hero-dive; }

/* ギャラリーの動画は、写真と同じ形に */
.gal__item video { aspect-ratio: 4 / 5; }
.gal__item--wide video { aspect-ratio: 3 / 2; }

/* ---- 速さへの反応は、動画には当てません ----
   写真なら、スクロールの勢いに合わせて少し傾いても軽いままです。
   動画は違いました。傾けると毎コマ、映像を斜めに描き直すことになり、
   再生が追いつかなくなります（実測：区切りの動画でコマ落ち最大25%）。
   動画は静止画と違って、それ自体がもう動いています。
   傾ける必要はありません。 */
@media (prefers-reduced-motion: no-preference) {
  .hero__media video,
  .statement video,
  .gal__item video {
    rotate: none;
    scale: none;
    transition: none;
  }
}

/* オープニングの最後で写真から動画へ入れ替わるとき、
   切り取り位置がずれないよう、アーチ側も揃えます */
.opening__arch img { object-position: center 34%; }
@media (min-width: 768px) { .opening__arch img { object-position: center 38%; } }

/* ==========================================================
   82. ヒーロー：動画のあと、写真のスライドショーへ
   ----------------------------------------------------------
   動画は外観の速いカットを2秒だけ。1回流したら、
   そのまま写真の切り替わりに引き継ぎます。
   切り替えは重ねてのフェードなので、切れ目が出ません。
   ========================================================== */
.hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;                 /* 動画が終わるまでは隠しておきます */
  transition: opacity 1.2s ease;
}
.hero__slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 34%;
  opacity: 0;
  transition: opacity 1.6s ease, transform 9s linear;
  transform: scale(1.06);
}
@media (min-width: 768px) {
  .hero__slides img { object-position: center 38%; }
}
.hero__slides img.is-on {
  opacity: 1;
  transform: scale(1);        /* ゆっくり寄りが戻る（1枚ずつ動きます） */
}

/* 動画が終わったら、動画を消してスライドショーを出す */
.hero__media.is-slides .hero__slides { opacity: 1; }
.hero__media.is-slides video {
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero__media video { transition: opacity 1.2s ease; }

/* 離れるときの動きは、スライドショーにも同じように効かせます */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__slides {
      animation: hero-dive linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
      transform-origin: center 38%;
    }
  }
}

/* 速さへの反応も、写真と同じだけ */
@media (prefers-reduced-motion: no-preference) {
  .hero__slides {
    rotate: calc(var(--vel) * 3deg);
    scale: calc(1 + var(--velabs) * 0.08);
    transition: opacity 1.2s ease;
  }
}

/* ==========================================================
   83. 区切りの「黒い余白」をなくす
   ----------------------------------------------------------
   実測：窓が開きはじめの時点で、画面の44%しか映像がなく、
   残り56%が濃紺で埋まっていました。これが黒帯に見えていました。

   ・窓をはじめから大きくする（44% → 82%）
   ・外側を濃紺から、ページと同じ生成りにする
     （わずかに残る余白が「黒帯」ではなく「余白」に見えます）
   ========================================================== */
.statement { background: var(--bg-2); }
.statement__video,
.statement__bg { background: var(--bg-2); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes stmt-open {
      0%   { clip-path: inset(9vh 11vw 7vh 11vw round 5vw 5vw 1.5vw 1.5vw); }
      100% { clip-path: inset(0 0 0 0 round 0); }
    }
  }
}

/* 文字は、写真が小さいあいだも読めるように影を少し強く */
.statement__line { text-shadow: 0 2px 28px rgba(0,0,0,.55); }

/* ==========================================================
   84. 区切りの仕組みを、確実なものに作り替える
   ----------------------------------------------------------
   名前付きのタイムライン（view-timeline: --stmt1）を使っていましたが、
   読み込み直後に解決されず、窓の演出がまったく出ていませんでした
   （実測：進み具合が null、clip-path も none のまま）。
   あとから要素をいじると復活する、という不安定な挙動でした。

   貼り付け（sticky）をやめて、区切り自体が画面を通り過ぎるあいだに
   窓が開く形にします。名前を使わない view() だけで済むので確実です。
   高さも 230vh → 1画面に減るので、暗い余白も出ません。
   ========================================================== */
.statement {
  height: auto;
  min-height: 100svh;
  background: var(--bg-2);
}
@supports not (height: 1svh) {
  .statement { min-height: 100vh; }
}
.statement__sticky {
  position: static;
  height: 100svh;
  min-height: 420px;
}
@supports not (height: 1svh) {
  .statement__sticky { height: 100vh; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* 窓：区切りが画面に入ってくるあいだに開く */
    .statement__win {
      animation: stmt-open linear both;
      animation-timeline: view();
      animation-range: entry 12% entry 96%;
    }
    @keyframes stmt-open {
      0%   { clip-path: inset(8vh 10vw 6vh 10vw round 5vw 5vw 1.5vw 1.5vw); }
      100% { clip-path: inset(0 0 0 0 round 0); }
    }

    /* 中の写真・動画：寄りから等倍、抜けぎわに流れる */
    .statement__bg {
      animation: stmt-zoom linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes stmt-zoom {
      0%   { transform: scale(1.22) translateY(-3%); }
      50%  { transform: scale(1.10) translateY(0); }
      100% { transform: scale(1.10) translateY(4%); }
    }

    /* 文字：窓が開いてから出て、抜けぎわに送り出す */
    .statement__inner {
      animation: stmt-text linear both;
      animation-timeline: view();
      animation-range: entry 40% exit 90%;
    }
    @keyframes stmt-text {
      0%   { opacity: 0; transform: translateY(56px); }
      22%  { opacity: 1; transform: translateY(0); }
      74%  { opacity: 1; transform: translateY(0); }
      100% { opacity: .2; transform: translateY(-52px); }
    }
  }
}

/* ---- 84-b. 古い名前付き指定を、同じ強さで打ち消す ----
   .statement--1 .statement__win（クラス2つ）のほうが
   .statement__win（クラス1つ）より強いため、新しい指定が
   効いていませんでした。同じ強さで書き直します。 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .statement--1 .statement__win,
    .statement--2 .statement__win {
      animation: stmt-open linear both;
      animation-timeline: view();
      animation-range: entry 12% entry 96%;
    }
    .statement--1 .statement__bg,
    .statement--2 .statement__bg {
      animation: stmt-zoom linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    .statement--1 .statement__inner,
    .statement--2 .statement__inner {
      animation: stmt-text linear both;
      animation-timeline: view();
      animation-range: entry 40% exit 90%;
    }
  }
}
/* 名前付きのタイムラインは、もう使いません */
.statement, .statement--1, .statement--2 { view-timeline: none; }

/* ---- 84-c. 区切りの動きは、JS側で組み立てます ----
   CSSの animation-timeline: view() が、この要素だけ
   どうしても解決されませんでした（進み具合が null のまま）。
   同じことを JS の ViewTimeline で作ると確実に動いたので、
   そちらに任せます。CSS側の指定は外します。
   JSが動かない環境では、切り取りなしで普通に表示されます。 */
.statement--1 .statement__win,
.statement--2 .statement__win,
.statement--1 .statement__bg,
.statement--2 .statement__bg,
.statement--1 .statement__inner,
.statement--2 .statement__inner {
  animation: none !important;
  clip-path: none;
}

/* ==========================================================
   85. 区切りは、写真・動画を画面いっぱいに
   ----------------------------------------------------------
   「窓が開く」見せ場は外しました。開きはじめの時点で画面の
   半分以上が暗い面で埋まり、動画に黒い余白があるように
   見えていたためです（ご指摘のとおりでした）。

   いまは、区切りに入った瞬間から画面いっぱいに映ります。
   動きは、ゆっくりの寄りと、抜けぎわの流れだけ残します。
   ========================================================== */
.statement__win {
  position: absolute;
  inset: 0;
  overflow: clip;
  clip-path: none !important;
  animation: none !important;
}
.statement { background: var(--text); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* ここも img だけに（video だと transform が打ち消されていて、
       見た目は変わらないのにアニメだけ動き続けていました） */
    .statement--1 img.statement__bg,
    .statement--2 img.statement__bg {
      animation: stmt-flow linear both !important;
      animation-timeline: view() !important;
      animation-range: cover 0% cover 100% !important;
    }
    @keyframes stmt-flow {
      from { transform: scale(1.18) translateY(-6%); }
      to   { transform: scale(1.18) translateY(6%); }
    }
  }
}

/* 文字は、これまでどおり1文字ずつ出ます（別の仕組みで動いています） */
.statement--1 .statement__inner,
.statement--2 .statement__inner { opacity: 1 !important; transform: none !important; }

/* ---- 85-b. 視差が効かない ----
   この環境では、区切りの中の要素に CSS の view() が
   どうしても解決されませんでした（実測で移動量0px）。
   ここは深追いせず、時間で動く「ゆっくりの寄り」にします。
   確実に動き、止まって見えることもありません。 */
@media (prefers-reduced-motion: no-preference) {
  /* 写真の区切りだけに当てます（img を付けた理由）。
     ここを video にも当てていたため、85-c の
     「.statement__video { transform: none !important }」に
     打ち消されて見た目は1ミリも変わらないのに、
     アニメーションだけが毎フレーム動き続けていました。
     実測：動画のコマ落ちが 25%。この指定を切ると 0% になります。 */
  .statement--1 img.statement__bg,
  .statement--2 img.statement__bg {
    animation: stmt-breathe 22s ease-in-out infinite alternate !important;
    animation-timeline: auto !important;
  }
  @keyframes stmt-breathe {
    from { transform: scale(1.02) translateY(-1.5%); }
    to   { transform: scale(1.12) translateY(1.5%); }
  }
}

/* ---- 85-c. 動画に寄りの演出はいりません ----
   区切りの中身は動画そのものが動いています。
   そこへさらにゆっくり寄る動きを重ねても、効果がないうえに
   この環境では固まったままでした。素直に外します。
   （写真を使う区切りを足したときだけ、寄りが効きます） */
.statement__video { animation: none !important; transform: none !important; }
@media (prefers-reduced-motion: no-preference) {
  img.statement__bg {
    animation: stmt-breathe 22s ease-in-out infinite alternate !important;
  }
}

/* ---- フォントの太さを減らしたぶんの調整 ----
   明朝は 500 と 600 だけ読み込みます（400と700は実質使っていませんでした）。
   オープニングのカウンタだけ400を使っていたので、500に寄せます。 */
.opening__count { font-weight: 500; }

/* ==========================================================
   86. 元動画の黒帯を切り取る
   ----------------------------------------------------------
   4か所の動画は、社長が撮った元ファイル1本を読んでいます。
   （切り出した4本は、決まった場所で最大729ms 絵が抜けていたため）

   元ファイルは縦 720x1280 で、上下が黒帯です。
   中身は上から376px、高さ528pxの帯だけ。
   object-view-box でその帯だけを「素材」として扱わせます。
   こうすると object-fit: cover が帯を基準に働くので、
   枠の形が横長でも縦長でも黒帯が出ません。

     376 / 1280 = 29.375%  … 上下それぞれ切り落とす量
   ========================================================== */
/* 2026-10-05: 黒帯は動画ファイル側（video/house-wide.mp4）で切り落としたため、
   object-view-box と、非対応ブラウザで動画を隠す分岐は不要になりました。
   （iPhoneのSafariも非対応で、動画がすべて隠れていました） */

/* ==========================================================
   87. いちご地図の市名を、指で押しやすい大きさに
   ----------------------------------------------------------
   当たり判定の高さが 3.6% しかなく、スマホでは 12px でした。
   指先はおよそ 44px なので、狙ったつもりが外れます。

   市名どうしの縦の間隔は、いちばん近い組でも 6.9% あります
   （実測。横に重なりうる組だけを調べた値）。
   6.5% までなら広げても、隣の市に当たりません。

   上下に均等に広げたいので、下へずれたぶんを引き戻します。
     広げる量 = 6.5 - 3.6 = 2.9%（枠の高さに対して）
     上へ戻す量 = 2.9 / 2 = 1.45%
     自分の高さ(6.5%)に対する割合 = 1.45 / 6.5 = 22.3%
   ========================================================== */
.mapbox__hit li {
  height: 6.5%;
  transform: translateY(-22.3%);
}

/* ==========================================================
   88. 下のボタンバーの分だけ、ページの下に余白を空ける
   ----------------------------------------------------------
   スマホでは画面下に「電話する／相談する／見学のご予約」の
   バーが貼り付いています（高さ67px）。
   ページの下に余白が無かったので、いちばん下まで送っても
   フッターの最後が バー の裏に隠れたままでした。
   実測：個人情報の取り扱いのリンクと、著作権表示が押せません。

   768px 以上ではバーを出していないので、余白も要りません。
   ========================================================== */
@media (max-width: 767px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}

/* ==========================================================
   89. iPhone で入力欄を押したとき、勝手に拡大しないように
   ----------------------------------------------------------
   iOS の Safari は、入力欄の文字が 16px より小さいと
   タップした瞬間に画面を拡大します。しかも自動では戻りません。
   お問い合わせフォームの入力欄が 15px だったので、
   名前を入れようとした時点で画面が大きくなり、
   そのあと横に見切れたまま最後まで入力することになります。

   16px にすれば拡大しません。768px 以上では元の 15px のままです。
   ========================================================== */
@media (max-width: 767px) {
  .input,
  input[type="url"],
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px;
  }
}

/* ==========================================================
   90. エリアページの「価格と広さの目安」の文字を、枠に収める
   ----------------------------------------------------------
   .stats strong は clamp(38px, 10vw, 68px) です。
   これはトップの「12年」「3県」「0円」のための大きさで、
   1〜2文字しか入らない前提でした。

   エリアページの .stats--wide は4列で、中身が長いです。
     2,000万円台〜  /  90-120㎡
   68px のままだと枠に入りきらず、
     「2,000万」→ 改行 →「円台〜」
     「90-」→ 改行 →「120㎡」
   と、みっともない折り返しになります。

   4列の数字は、文字数が多い前提で一回り小さくします。
   ========================================================== */
.stats--wide strong {
  font-size: clamp(24px, 4.4vw, 38px);
  white-space: nowrap;
}
.stats--wide li { padding-inline: 4px; }

/* ==========================================================
   91. 数字3つの下の注記
   ----------------------------------------------------------
   300件は担当者個人の実績（前職含む）なので、
   それが一目で分かるようにします。法律上の要請です。
   ========================================================== */
.figures__note {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.7;
  color: var(--text-2);
  text-align: center;
}

/* ==========================================================
   92. 数字3つを、スマホでも1行に収める
   ----------------------------------------------------------
   中身が「12年」「3県」「0円」の2〜3文字だった頃の大きさ
   （clamp(38px, 11vw, 76px)）のままでした。
   「1,500件以上」「300件以上」に変えたら、375px幅で
   「件以上」だけが2行目に落ちていました。
   桁数が増えたぶん、小さい画面では縮めます。PCは76pxのまま。
   ========================================================== */
.figures strong {
  font-size: clamp(24px, 6.6vw, 76px);
  white-space: nowrap;
}
.figures li { padding-inline: 4px; }

/* ==========================================================
   93. 地図（Googleマップの埋め込み）
   ----------------------------------------------------------
   埋め込みコードは width="600" height="450" の固定でした。
   スマホ（375px）だと225pxはみ出すので、幅は枠いっぱい、
   高さは比率で決めます。角丸は枠側で切ります。
   ========================================================== */
.map {
  margin-top: 26px;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-2);
  aspect-ratio: 16 / 10;
}
.map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.map__note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.85;
  color: var(--text-2);
}
.map__note a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

/* スマホは少し縦長のほうが場所を掴みやすい */
@media (max-width: 767px) {
  .map { aspect-ratio: 4 / 3; }
}

/* ==========================================================
   94. スタッフ紹介の「素顔のこと」
   ----------------------------------------------------------
   仕事の話（staff__msg）と地続きに見えないよう、
   細い罫線で区切って、小さな見出しを付けます。
   ========================================================== */
.staff__personal {
  margin: 4px 0 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.staff__personal-ttl {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--blue);
}
.staff__personal .staff__msg:last-child { margin-bottom: 0; }

/* ==========================================================
   95. スタッフ紹介の写真
   ----------------------------------------------------------
   顔写真は横長（1536x1024）で、お顔は中央よりやや右・上寄りです。
   枠は縦長にも横長にもなるので、切り取りの基準をお顔に合わせます。
   （既定の中央のままだと、狭い枠で顎から下が中心になります）
   ========================================================== */
.staff__photo img { object-position: 60% 26%; }

/* 趣味の写真 */
.staff__hobby {
  margin: 0 0 16px;
  border-radius: var(--r-sm);
  overflow: hidden;
}
.staff__hobby img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.staff__hobby figcaption {
  margin-top: 7px;
  font-size: 11px;
  color: var(--text-3);
}

/* ==========================================================
   96. スタッフの写真が、枠いっぱいに広がるように
   ----------------------------------------------------------
   .staff__photo は place-content: center でした。
   仮表示の「縫」の字を中央に置くための指定でしたが、
   実際の写真を入れると、写真も中央に置かれてしまい、
   枠の上下に背景色（ピンク）が残ります。

   写真は伸ばし、頭文字だけ中央に置きます。
   ========================================================== */
.staff__photo { place-content: stretch; }
.staff__photo span { place-self: center; }

/* PC（横並び）のとき、写真の列が本文の高さいっぱいに伸びないように。
   本文が長いと 250x1042 のような細長い帯になり、横が切られすぎます。
   上寄せにして、縦横比を決めておきます。 */
@media (min-width: 768px) {
  .staff-list--solo .staff__photo {
    aspect-ratio: 3 / 4;
    align-self: start;
  }
}

/* 写真枠が、画像の元の大きさ（1536px）に引っぱられて広がるのを止めます。
   実測：スマホでカード320pxに対し写真枠が531pxになり、
   右側211px分がカードの外で切り落とされていました。 */
.staff { min-width: 0; }
.staff__photo { width: 100%; min-width: 0; max-width: 100%; }
.staff__photo img { min-width: 0; max-width: 100%; }

/* ==========================================================
   97. 会社紹介ページの、短い担当者紹介
   ----------------------------------------------------------
   くわしい紹介は staff.html にあります。
   ここは「誰が担当するか」だけが分かればよいので、
   写真・名前・資格・入口の4つに絞ります。
   ========================================================== */
.staff-card {
  display: grid;
  gap: 18px;
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
  min-width: 0;
}
.staff-card__photo { min-width: 0; }
.staff-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 60% 26%;
}
.staff-card__body {
  padding: 0 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.staff-card__role {
  margin: 4px 0 16px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-2);
}

@media (min-width: 768px) {
  .staff-card {
    grid-template-columns: 260px 1fr;
    gap: 0;
    align-items: stretch;
    max-width: 760px;
  }
  .staff-card__photo img { aspect-ratio: 3 / 4; }
  .staff-card__body { padding: 26px 28px 28px; justify-content: center; }
}

/* ==========================================================
   98. スマホで、文章が縦に伸びすぎるのを直す
   ----------------------------------------------------------
   実測（画面360px）：本文が1行16〜18文字しか入らず、
   150字の段落が9行の細長い塊になっていました。
   日本語は1行20〜25文字が読みやすい範囲です。

   原因は余白の二重がけでした。
     .container      左右20px  → 320px
      └ .faq__body   左右20px  → 279px（1行17字）
      └ .guide-list  左56/右20 → 243px（1行16字）

   画面の22〜32%が余白で埋まっていました。
   外側と内側を少しずつ削って、本文に幅を返します。
   あわせて行間も詰めます（2.0は間延びして見えます）。
   ========================================================== */
@media (max-width: 767px) {
  :root { --gutter: 16px; }

  /* 番号つきカード。丸バッジは left18px+幅24px=42px まで使うので、
     48px あれば重なりません（6px の余白が残ります）。 */
  .guide-list > div { padding: 18px 16px 18px 48px; }

  .faq__body { padding: 0 14px 18px; }
  .faq__body p { line-height: 1.85; }
  .guide-list dd { line-height: 1.85; }
  .prose { line-height: 1.85; }
}

/* 番号つきカードは、バッジのぶん本文まで下げていました。
   スマホでは見出しだけバッジをよけて、本文は全幅を使います。
     これまで：[①]  見出し
                     本文…（263px）
     これから：[①]  見出し
              本文…（295px） */
@media (max-width: 767px) {
  .guide-list > div { padding: 18px 16px; }
  .guide-list > div::before { left: 16px; top: 18px; }
  .guide-list dt { padding-left: 32px; min-height: 24px; }
  .guide-list dd { padding-left: 0; }
}

/* .steps も .guide-list と同じ構造でした。
   左62px＋右20px＝82px が余白で、本文は246pxしか残っていません。
   見出し（strong）だけ番号をよけて、本文（em）は全幅にします。
   バッジは left16px＋幅28px＝44px まで使うので、
   見出しの字下げは 52px あれば重なりません。 */
@media (max-width: 767px) {
  .steps li { padding: 18px 16px; }
  .steps__no { left: 16px; top: 18px; }
  .steps li > strong { padding-left: 36px; min-height: 28px; }
  .steps em { padding-left: 0; line-height: 1.85; }
}

/* ==========================================================
   99. 薄すぎる文字を読めるようにする
   ----------------------------------------------------------
   実測（背景 #f3ede2 の上）：
     --text-3 #8f9299 → コントラスト 2.67:1
   小さい文字に必要なのは 4.5:1 です。フッターの見出し・
   著作権表示・注釈（※）・定義リストの見出しが該当し、
   7ページの抜き取り調査で 60か所以上ありました。

   #636870 にすると 4.81:1 で基準を満たします。
   （--text-2 #5f6d78 は 4.57:1 で、もともと合格していました）

   赤いボタンの白文字は 4.13:1。13pxだと不足ですが、
   14px以上の太字なら基準は 3:1 になるので、字を1px上げます。
   押しやすさも少し良くなります。
   ========================================================== */
:root { --text-3: #636870; }

.btn--sm { font-size: 14px; }
.fixed-bar a { font-size: 14px; }

/* 小さな赤いラベルだけ、濃い赤にします。
   #e0453c は明るい背景の上で 3.5〜4.1:1 しかなく、
   11px前後の文字には足りません（基準4.5:1）。
   #c4362e なら 4.6〜5.4:1 になります。
   大きな見出しやボタンの赤はそのままです。 */
.post__cat,
.cblock__ttl,
.rspanel__cap { color: var(--red-dark); }

/* 単位の文字（万円台・件以上・㎡）が小さすぎました。
   実測：スマホで 7.4px。数字が大きいぶん .32em では潰れます。
   読める大きさに上げ、色も濃い赤に揃えます（4.5:1を満たすため）。 */
.stats strong small,
.figures strong small {
  font-size: .40em;
  color: var(--red-dark);
}
@media (max-width: 767px) {
  .stats strong small,
  .figures strong small { font-size: 11px; }
}

/* .rspanel--buy .rspanel__cap（クラス2つ）に負けていたので、同じ強さで上書き */
.rspanel--buy .rspanel__cap { color: var(--red-dark); }

/* ==========================================================
   100. 赤いボタンの色を、読める濃さにする
   ----------------------------------------------------------
   白文字 × #e0453c は 4.13:1 で、基準の 4.5:1 に届きません。
   #c4362e（--red-dark）にすると 5.36:1 になります。
   この色はもともとサイト内で使っていた色で、新しい色ではありません。

   対象はボタンだけです。見出しの下線・小見出し・地図の差し色など、
   文字ではない赤はそのままにします。

   押したときは、さらに濃い #a92d26（6.80:1）にして、
   「押した」ことが分かるようにします。
   ========================================================== */
.btn--gold { background: var(--red-dark); }
.btn--gold:hover { background: #a92d26; }

.fixed-bar__cta { background: var(--red-dark); }
.fixed-bar__cta:hover { background: #a92d26; }

/* 白地に赤文字のボタン（青い帯・お問い合わせ帯の中） */
.search-cta .btn { color: var(--red-dark); }
.search-cta .btn:hover { color: #a92d26; }
.contact__actions .btn--gold { color: var(--red-dark); }

/* 「相談する」ボタン（下の帯の真ん中）の文字が 4.42:1 でした。
   濃い赤にして 5.25:1 にします。枠線も揃えます。 */
.fixed-bar__ask {
  color: #b53029;
  border-color: #b53029;
}

/* ==========================================================
   76. 公開前修正（2026-10-05）
   ----------------------------------------------------------
   ・ヒーロー：見出しの下に「何の会社か」を一行で
   ・群馬県の市町リスト：担当が探す旨の一文
   ========================================================== */
.hero__lead {
  max-width: 44em;
  margin: 12px auto 0;
  padding: 0 var(--gutter);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .03em;
  color: #fff;
  text-shadow: 0 1px 10px rgba(8,14,24,.6);
}
@media (min-width: 768px) {
  .hero__lead { font-size: 14px; margin-top: 16px; }
}
.citylist__note {
  padding: 0 16px 10px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-3);
}

/* ==========================================================
   77. SEO・計測・導線の公開前改善（2026-10-05 web-engineer）
   ----------------------------------------------------------
   ・WebP用の <picture> は箱を作らない（既存のレイアウトをそのまま保つ）
   ・スマホ固定バー：電話／LINE／主ボタン の3つに統一
   ・問い合わせフォーム：電話かメールのどちらか一方で可
   ・オープニング：初回・トップ直接流入のときだけ、2秒以内
   ========================================================== */
picture { display: contents; }

/* ---- 固定バーの LINE（LINEのブランドカラー #06C755） ---- */
.fixed-bar__line {
  border: 1.5px solid #06C755;
  background: #06C755;
  color: #fff;
}
.fixed-bar__line svg { flex: none; }
/* LINE は文字が短いので、主ボタンに幅を回す */
.fixed-bar:has(.fixed-bar__line) { grid-template-columns: .84fr .7fr 1.46fr; }

/* ---- フォーム：連絡先はどちらか一方 ---- */
.field__either { margin-top: -6px; margin-bottom: 18px; }
.form .input[aria-invalid="true"] { border-color: #b53029; box-shadow: 0 0 0 3px rgba(181,48,41,.12); }

/* ---- オープニング：出さない回（2回目以降・検索やサイト内から来たとき） ---- */
html.op-skip .opening { display: none !important; }
html.op-skip .opening:not(.is-done) ~ .header,
html.op-skip .opening:not(.is-done) ~ .fixed-bar { animation: none; }

/* ---- オープニングを約2秒に（5.2秒 → 1.95秒）----
   要素の順番と動きはそのまま、時間割だけを詰めています。
     0.00–1.70  細い横線
     0.10–0.95  社名が1文字ずつ（0.35秒で出そろう）→ 0.95秒から退く
     0.25–1.55  肩書き・TOCHIGI—GUNMA—IBARAKI・免許番号
     0.90–1.65  アーチが開く（写真は1.05秒から引く）
     1.55–1.95  全体が薄れて終わり（JSの片づけも1.95秒）              */
.motion .opening {
  animation:
    op-bg 1.95s linear 0s both,
    op-out .4s cubic-bezier(.4, 0, .2, 1) 1.55s forwards;
}
.motion .opening:not(.is-done) ~ .header,
.motion .opening:not(.is-done) ~ .fixed-bar { animation-duration: 1.95s; }

.opening__rule { animation-duration: 1.7s; }
.opening__name span { animation-duration: .6s; }
.opening__name span:nth-child(1)  { animation-delay: .10s; }
.opening__name span:nth-child(2)  { animation-delay: .135s; }
.opening__name span:nth-child(3)  { animation-delay: .17s; }
.opening__name span:nth-child(4)  { animation-delay: .205s; }
.opening__name span:nth-child(5)  { animation-delay: .24s; }
.opening__name span:nth-child(6)  { animation-delay: .275s; }
.opening__name span:nth-child(7)  { animation-delay: .31s; }
.opening__name span:nth-child(8)  { animation-delay: .345s; }
.opening__name span:nth-child(9)  { animation-delay: .38s; }
.opening__name span:nth-child(10) { animation-delay: .415s; }
.opening__name { animation-duration: .3s; animation-delay: .95s; }
.opening__sub  { animation-duration: 1.5s; animation-delay: .25s; }
.opening__rail span { animation-duration: 1.2s; animation-delay: .4s; }
.opening__rail i    { animation-duration: 1.35s; animation-delay: .3s; }
.opening__lic   { animation-duration: 1.1s; animation-delay: .45s; }
.opening__count { animation-duration: 1.8s; animation-delay: .05s; }
.opening__bar   { animation-duration: 1.8s; animation-delay: 0s; }
.opening__bar i { animation-duration: 1.1s; }
.opening__arch,
.opening__arch img { animation-delay: .9s; animation-duration: .75s; }
.opening__arch img { animation-delay: 1.05s; animation-duration: .6s; }
/* 「300件以上」の直下に（前職含む）を併記。
   数字の下の小さな注記（800件の時点表示も）は折り返してよい。
   折り返さないと375px以下で3列目がはみ出し、ページ全体が横にずれていた（2026-10-05実測 360px幅で392px） */
.figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.figures span small { display: inline-block; white-space: normal; }
@media (max-width: 479px) {
  .figures span { white-space: normal; }
}