@charset "UTF-8";
/* ============================================================================
   高陽青柳町モデルハウス 無人見学LP — free-modelhouse-lp.css
   scope: .page-template-free-modelhouse-lp .free / .free-*（二重詳細度・!important不使用）
   ※ !important は §15 reduced-motion ブロックのみ許容
   単位: テーマが html{font-size:62.5%} のため rem を使わず px / clamp(px,vw,px)
   overflow は clip 優先（hidden はスクロールコンテナ化して view() タイムラインを壊すため）
   ============================================================================ */

/* §1 トークン ------------------------------------------------------------ */
.page-template-free-modelhouse-lp .free {
  /* 基調 */
  --fr-white: #fff;
  --fr-cream: #FBF5EB;
  --fr-cream-2: #F6EBD9;
  /* ブラウン（文字・帯） */
  --fr-brown: #58402E;        /* 本文 8.8:1 on cream */
  --fr-brown-deep: #4A3524;   /* 見出し */
  --fr-brown-soft: #75604A;   /* 補足 5.4:1 */
  --fr-band: #7A5533;         /* 帯背景 白文字6.6:1 */
  /* オレンジ */
  --fr-orange: #EF8A00;       /* 装飾専用（テキスト不可） */
  --fr-orange-deep: #B26200;  /* オレンジ文字 白地4.5:1 */
  --fr-orange-pale: #FDE7C8;
  /* ボタン */
  --fr-cta: #C2401C;          /* 白文字5.2:1 */
  --fr-cta-hover: #A83617;
  --fr-green: #2E7D4F;        /* 白文字5.0:1 */
  --fr-green-hover: #256841;
  --fr-black-btn: #2B2B2B;
  --fr-black-btn-hover: #171717;
  /* 機能 */
  --fr-line: #E8D9C2;
  --fr-tip-line: #DCC49F;
  --fr-focus: #2F6DF0;
  --fr-shadow: 0 6px 24px rgba(88, 64, 46, .14);
  /* 角丸 */
  --fr-r-m: 16px;
  --fr-r-full: 999px;
  /* 余白 */
  --fr-sp-section: clamp(56px, 14vw, 84px);
  --fr-sp-block: clamp(28px, 7vw, 40px);
  --fr-sp-inline: clamp(20px, 5.5vw, 28px);
  /* フォント */
  --fr-font-head: "Zen Maru Gothic", "Zen Kaku Gothic New", "Hiragino Maru Gothic ProN", sans-serif;
  --fr-font-body: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --fr-font-num: "Poppins", "Zen Maru Gothic", sans-serif;
  /* モーション */
  --fr-ease: cubic-bezier(.22, .61, .36, 1);
  --fr-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --fr-dur-m: .7s;
  --fr-stagger: 70ms;

  color: var(--fr-brown);
  font-family: var(--fr-font-body);
  font-size: 15.5px;
  line-height: 2;
  background: var(--fr-white);
  overflow-x: hidden;
  overflow-x: clip;
}

/* テーマの .scrollBlock{overflow:hidden} はスクロールコンテナ化して
   view() タイムラインの参照先を奪うため、本テンプレのページのみ clip 化（視覚結果は同一。
   clip 非対応の旧ブラウザでは宣言が無効→テーマの hidden が残り、view() も非対応なので整合） */
.page-template-free-modelhouse-lp main.scrollBlock {
  overflow: clip;
}

/* §2 ベースリセット（:where で特異度0 — component側が常に勝つ） ---------- */
.page-template-free-modelhouse-lp .free,
.page-template-free-modelhouse-lp .free :where(*, *::before, *::after) {
  box-sizing: border-box;
}
/* ※ 予約フォーム（#contactFormWrap 配下）はLPリセットの対象外にする。
   フォームは保守会社標準の form.css / 共通CSSでベンダーページと同一に描画させるため
   （:not は :where 内に置いて特異度0を維持） */
.page-template-free-modelhouse-lp .free :where(:is(h1, h2, h3, h4, p, ul, ol, li, figure, figcaption, details, summary):not(#contactFormWrap *)) {
  margin: 0;
  padding: 0;
}
.page-template-free-modelhouse-lp .free :where(:is(ul, ol):not(#contactFormWrap *)) {
  list-style: none;
}
.page-template-free-modelhouse-lp .free :where(img:not(#contactFormWrap *)) {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}
.page-template-free-modelhouse-lp .free :where(a:not(#contactFormWrap *)) {
  color: inherit;
  text-decoration: none;
}
.page-template-free-modelhouse-lp .free :where(summary) {
  list-style: none;
}
.page-template-free-modelhouse-lp .free :where(summary)::-webkit-details-marker {
  display: none;
}
.page-template-free-modelhouse-lp .free :where(:is(h1, h2, h3):not(#contactFormWrap *)) {
  text-wrap: balance;
}
.page-template-free-modelhouse-lp .free :where(:is(p, li):not(#contactFormWrap *)) {
  text-wrap: pretty;
}
.page-template-free-modelhouse-lp .free :where(section) {
  padding-block-end: var(--fr-sp-section);
}
.page-template-free-modelhouse-lp .free :where(a, summary):focus-visible {
  outline: 3px solid var(--fr-focus);
  outline-offset: 2px;
}

/* §3 共通部品 ------------------------------------------------------------ */
.page-template-free-modelhouse-lp .free-inner {
  padding-inline: var(--fr-sp-inline);
  margin-block-start: var(--fr-sp-block);
}
.page-template-free-modelhouse-lp .free-deco {
  margin-inline: 6px;
  font-weight: 700;
  color: inherit;
}

/* 帯見出し */
.page-template-free-modelhouse-lp .free-band {
  position: relative;
  text-align: center;
  padding-block: 14px;
  padding-inline: 16px;
  font-family: var(--fr-font-head);
  font-weight: 700;
  font-size: clamp(19px, 5vw, 22px);
  line-height: 1.6;
  color: #fff;
}
.page-template-free-modelhouse-lp .free-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fr-band);
  transform-origin: 0 50%;
}
.page-template-free-modelhouse-lp .free-band__txt {
  position: relative;
}

/* ボタン */
.page-template-free-modelhouse-lp .free-ctaWrap {
  margin-block-start: var(--fr-sp-block);
  text-align: center;
}
.page-template-free-modelhouse-lp .free-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: min(100%, 440px);
  min-block-size: 64px;
  margin-inline: auto;
  padding: 14px 56px 14px 28px;
  border-radius: var(--fr-r-full);
  font-family: var(--fr-font-head);
  font-weight: 700;
  font-size: clamp(16px, 4.4vw, 18px);
  line-height: 1.5;
  color: #fff;
  box-shadow: 0 10px 24px rgba(88, 64, 46, .22);
  overflow: hidden;
  overflow: clip;
  transition: transform .2s var(--fr-ease), box-shadow .2s var(--fr-ease), background-color .2s var(--fr-ease);
}
.page-template-free-modelhouse-lp .free-btn__arrow {
  position: absolute;
  inset-inline-end: 14px;
  inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: 34px;
  aspect-ratio: 1;
  border-radius: var(--fr-r-full);
  background: rgba(255, 255, 255, .24);
  display: grid;
  place-items: center;
  font-family: var(--fr-font-num);
  font-size: 20px;
  line-height: 1;
  padding-block-end: 2px;
}
.page-template-free-modelhouse-lp .free-btn::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 46%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-140%) skewX(-18deg);
  pointer-events: none;
}
.page-template-free-modelhouse-lp .free-btn--cta { background: var(--fr-cta); }
.page-template-free-modelhouse-lp .free-btn--black { background: var(--fr-black-btn); }
.page-template-free-modelhouse-lp .free-btn--green { background: var(--fr-green); }
.page-template-free-modelhouse-lp .free-btn--cta:hover { background: var(--fr-cta-hover); }
.page-template-free-modelhouse-lp .free-btn--black:hover { background: var(--fr-black-btn-hover); }
.page-template-free-modelhouse-lp .free-btn--green:hover { background: var(--fr-green-hover); }
.page-template-free-modelhouse-lp .free-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(88, 64, 46, .28);
}
.page-template-free-modelhouse-lp .free-btn:active {
  transform: scale(.97);
  transition-duration: .15s;
}
.page-template-free-modelhouse-lp .free-btn:hover::after,
.page-template-free-modelhouse-lp .free-btn:focus-visible::after {
  animation: frShine .7s var(--fr-ease) 1;
}
.page-template-free-modelhouse-lp .free-ctaWrap.is-in .free-btn::after {
  animation: frShine .85s var(--fr-ease) .45s 1;
}
.page-template-free-modelhouse-lp .free-ctaWrap.is-in .free-btn--cta {
  animation: frPulse 1s var(--fr-ease) .6s 2;
}
@keyframes frShine {
  from { transform: translateX(-140%) skewX(-18deg); }
  to { transform: translateX(340%) skewX(-18deg); }
}
@keyframes frPulse {
  from { box-shadow: 0 10px 24px rgba(88, 64, 46, .22), 0 0 0 0 rgba(194, 64, 28, .38); }
  to { box-shadow: 0 10px 24px rgba(88, 64, 46, .22), 0 0 0 20px rgba(194, 64, 28, 0); }
}
.page-template-free-modelhouse-lp .free-ctaWrap__note {
  margin-block-start: 10px;
  font-size: 12.5px;
  color: var(--fr-brown-soft);
}

/* §4 進捗バー（scroll-driven / 非対応環境は非表示） ---------------------- */
.page-template-free-modelhouse-lp .free-progress {
  display: none;
}

/* §5 FV ------------------------------------------------------------------ */
.page-template-free-modelhouse-lp .free-fv {
  position: relative;
  display: flex;
  flex-direction: column;
  min-block-size: 520px;
  min-block-size: min(88svh, 720px);
  padding-block-end: 0;
  background: var(--fr-brown-deep);
  overflow: hidden;
  overflow: clip;
}
.page-template-free-modelhouse-lp .free-fv__bg {
  position: absolute;
  inset: 0;
}
.page-template-free-modelhouse-lp .free-fv__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transform-origin: 50% 38%;
  animation: frKenburns 13s var(--fr-ease) both;
}
@keyframes frKenburns {
  from { transform: scale(1.12) translateY(-8px); }
  to { transform: scale(1) translateY(0); }
}
.page-template-free-modelhouse-lp .free-fv__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(36, 22, 12, .5) 0%,
    rgba(36, 22, 12, .2) 32%,
    rgba(36, 22, 12, 0) 52%,
    rgba(36, 22, 12, .12) 76%,
    rgba(36, 22, 12, .38) 100%);
}
.page-template-free-modelhouse-lp .free-fv__inner {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(52px, 14vw, 80px) clamp(16px, 4.5vw, 24px) clamp(28px, 7vw, 44px);
}
.page-template-free-modelhouse-lp .free-fv__head {
  text-align: center;
  color: #fff;
}
.page-template-free-modelhouse-lp .free-fv__balloon {
  font-family: var(--fr-font-head);
  font-weight: 700;
  font-size: clamp(15px, 4.2vw, 18px);
  letter-spacing: .06em;
  text-shadow: 0 1px 12px rgba(20, 10, 4, .5);
}
.page-template-free-modelhouse-lp .free-fv__title {
  margin-block-start: 6px;
  font-family: var(--fr-font-head);
  font-weight: 900;
  font-size: clamp(64px, 19vw, 96px);
  line-height: 1.15;
  letter-spacing: .04em;
  text-shadow: 0 4px 26px rgba(20, 10, 4, .5);
}
.page-template-free-modelhouse-lp .free-fv__points {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 2.4vw, 14px);
}
.page-template-free-modelhouse-lp .free-point {
  inline-size: clamp(100px, 28.5vw, 150px);
  aspect-ratio: 1;
  border-radius: var(--fr-r-full);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 24px rgba(30, 16, 8, .18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
}
.page-template-free-modelhouse-lp .free-point__en {
  font-family: var(--fr-font-num);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(11px, 3vw, 13px);
  letter-spacing: .04em;
  color: var(--fr-orange-deep);
}
.page-template-free-modelhouse-lp .free-point__txt {
  font-weight: 700;
  font-size: clamp(12px, 3.4vw, 15px);
  line-height: 1.45;
  color: var(--fr-brown-deep);
}

/* §6 とは？ -------------------------------------------------------------- */
.page-template-free-modelhouse-lp .free-about {
  background: var(--fr-cream);
}
.page-template-free-modelhouse-lp .free-about__lead + .free-about__lead {
  margin-block-start: 14px;
}
.page-template-free-modelhouse-lp .free-osusume {
  margin-block-start: clamp(32px, 8vw, 44px);
  text-align: center;
  font-family: var(--fr-font-head);
  font-weight: 700;
  font-size: clamp(19px, 5.2vw, 23px);
  line-height: 1.6;
  color: var(--fr-brown-deep);
}
.page-template-free-modelhouse-lp .free-osusume .free-deco {
  color: var(--fr-orange);
}
.page-template-free-modelhouse-lp .free-tips {
  margin-block-start: clamp(20px, 5vw, 28px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "t1 t2"
    "fig fig"
    "t3 t4";
  gap: clamp(10px, 3vw, 16px);
  align-items: center;
  justify-items: center;
}
.page-template-free-modelhouse-lp .free-tip {
  inline-size: min(100%, 224px);
  aspect-ratio: 1;
  border-radius: var(--fr-r-full);
  background: #fff;
  border: 2px solid var(--fr-tip-line);
  box-shadow: 0 6px 18px rgba(88, 64, 46, .08);
  display: grid;
  place-content: center;
  text-align: center;
  font-weight: 700;
  font-size: clamp(13.5px, 3.8vw, 15.5px);
  line-height: 1.6;
  color: var(--fr-brown-deep);
}
.page-template-free-modelhouse-lp .free-tip:nth-of-type(1) { grid-area: t1; }
.page-template-free-modelhouse-lp .free-tip:nth-of-type(2) { grid-area: t2; }
.page-template-free-modelhouse-lp .free-tip:nth-of-type(3) { grid-area: t3; }
.page-template-free-modelhouse-lp .free-tip:nth-of-type(4) { grid-area: t4; }
.page-template-free-modelhouse-lp .free-tips__fig {
  grid-area: fig;
  inline-size: min(64%, 300px);
}

/* §7 こんなことができます ------------------------------------------------ */
.page-template-free-modelhouse-lp .free-can__list {
  display: grid;
  gap: clamp(36px, 9vw, 52px);
}
.page-template-free-modelhouse-lp .free-can__fig {
  inline-size: min(100%, 472px);
  margin-inline: auto;
  border-radius: var(--fr-r-m);
  overflow: hidden;
  overflow: clip;
  box-shadow: var(--fr-shadow);
}
/* 4枚の見た目を揃えるため縦横比は 4:3 に統一。
   比率は figure ではなく img 側に持たせる（親の aspect-ratio から
   子の block-size:100% を解決させる書き方はブラウザ依存になるため）。
   画像自体も 4:3 で書き出してあるので object-fit は差し替え時の保険。 */
.page-template-free-modelhouse-lp .free-can__fig img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.page-template-free-modelhouse-lp .free-can__title {
  margin-block-start: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block-end: 10px;
  border-block-end: 3px solid var(--fr-orange-pale);
  font-family: var(--fr-font-head);
  font-weight: 700;
  font-size: clamp(19px, 5.2vw, 22px);
  line-height: 1.5;
  color: var(--fr-orange-deep);
}
.page-template-free-modelhouse-lp .free-can__num {
  flex: none;
  inline-size: 44px;
  aspect-ratio: 1;
  border-radius: var(--fr-r-full);
  background: var(--fr-orange-deep);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--fr-font-num);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
}
.page-template-free-modelhouse-lp .free-can__text {
  margin-block-start: 12px;
}

/* §8 流れ ---------------------------------------------------------------- */
.page-template-free-modelhouse-lp .free-flow {
  background: var(--fr-cream);
}
.page-template-free-modelhouse-lp .free-flow__list {
  position: relative;
  display: grid;
  gap: clamp(28px, 7vw, 40px);
}
.page-template-free-modelhouse-lp .free-flow__list::before {
  content: "";
  position: absolute;
  inset-inline-start: 26px;
  inset-block: 10px;
  inline-size: 4px;
  border-radius: 2px;
  background: var(--fr-orange);
  transform-origin: 50% 0;
}
.page-template-free-modelhouse-lp .free-step {
  position: relative;
  margin-inline-start: 12px;
  background: #fff;
  border-radius: var(--fr-r-m);
  box-shadow: var(--fr-shadow);
  padding: 24px 20px 20px;
}
.page-template-free-modelhouse-lp .free-step__num {
  position: absolute;
  inset-block-start: -14px;
  inset-inline-start: -12px;
  inline-size: 58px;
  aspect-ratio: 1;
  border-radius: var(--fr-r-full);
  background: #fff;
  border: 3px solid var(--fr-orange);
  box-shadow: 0 4px 12px rgba(88, 64, 46, .14);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.page-template-free-modelhouse-lp .free-step__num-en {
  font-family: var(--fr-font-num);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--fr-brown-soft);
}
.page-template-free-modelhouse-lp .free-step__num-val {
  font-family: var(--fr-font-num);
  font-weight: 700;
  font-size: 21px;
  color: var(--fr-orange-deep);
}
.page-template-free-modelhouse-lp .free-step__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-inline-start: 40px;
  min-block-size: 56px;
}
.page-template-free-modelhouse-lp .free-step__title {
  flex: 1;
  font-family: var(--fr-font-head);
  font-weight: 700;
  font-size: clamp(17.5px, 4.8vw, 20px);
  line-height: 1.5;
  color: var(--fr-brown-deep);
}
.page-template-free-modelhouse-lp .free-step__fig {
  flex: none;
  inline-size: clamp(88px, 24vw, 120px);
}
.page-template-free-modelhouse-lp .free-step__text {
  margin-block-start: 12px;
  font-size: 14.5px;
}
.page-template-free-modelhouse-lp .free-step__note {
  font-weight: 700;
  color: var(--fr-cta);
}

/* §8b ご予約フォーム（MW WP Form 埋め込み）--------------------------------
   フォームの見た目は保守会社標準の form.css に完全委任する（本テンプレのページは
   header.php の条件リストに追加済みで form.css / form.js / form_modelhouse.js が読み込まれる）。
   ここには「LPに埋め込むための最小限の調整」だけを置く。 ------------------- */
.page-template-free-modelhouse-lp .free-reserve {
  scroll-margin-block-start: 72px;
}
.page-template-free-modelhouse-lp .free-reserve__notes {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  background: var(--fr-orange-pale);
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--fr-brown-deep);
}
.page-template-free-modelhouse-lp .free-reserve__notes li {
  position: relative;
  padding-inline-start: 16px;
}
.page-template-free-modelhouse-lp .free-reserve__notes li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 9px;
  inline-size: 6px;
  aspect-ratio: 1;
  border-radius: var(--fr-r-full);
  background: var(--fr-orange);
}
/* フォーム内をベンダーページと同じCSS環境にする:
   - フォント: .free の Zen Kaku 継承を遮断し、本体サイト標準（common.css html,body と同一スタック）へ
   - box-sizing: LPの border-box リセットを打ち消し、ベンダーページ同様の既定（content-box）へ
     （ID を含むため常にLPリセットより優先される） */
.page-template-free-modelhouse-lp #contactFormWrap {
  font-family: "游ゴシック", "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Sans", "ヒラギノ角ゴシック", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.page-template-free-modelhouse-lp #contactFormWrap,
.page-template-free-modelhouse-lp #contactFormWrap :where(*, *::before, *::after) {
  box-sizing: content-box;
}
/* ベンダーの form ページは全体がベージュ背景のため、白地のLPでは formWrap 側に
   パネルの内側余白だけ足す（bgBeige / radius は共通CSSのユーティリティ） */
.page-template-free-modelhouse-lp #contactFormWrap .formWrap {
  padding: 24px 16px;
}
/* 定休日の警告文（JSが表示制御。色は共通CSSの --red を使用） */
.page-template-free-modelhouse-lp #fr-date-warn {
  color: var(--red);
  font-weight: 700;
}
/* 予約完了後は「予約する」導線を出さない（JSが .is-form-complete を付与） */
.page-template-free-modelhouse-lp .free.is-form-complete .free-reserve__notes,
.page-template-free-modelhouse-lp .free.is-form-complete .free-reserveAgain {
  display: none;
}
.page-template-free-modelhouse-lp .free.is-form-complete .free-nav {
  display: none;
}

/* §8c 最下部の予約再掲 ----------------------------------------------------- */
.page-template-free-modelhouse-lp .free-reserveAgain {
  background: var(--fr-cream);
}
.page-template-free-modelhouse-lp .free-reserveAgain__text {
  text-align: center;
  font-size: 14px;
}

/* §9 GALLERY ------------------------------------------------------------- */
.page-template-free-modelhouse-lp .free-gallery__title {
  padding-block-start: clamp(40px, 10vw, 56px);
  text-align: center;
  font-family: var(--fr-font-num);
  font-weight: 700;
  font-size: clamp(26px, 7vw, 32px);
  letter-spacing: .18em;
  text-indent: .18em;
  line-height: 1.4;
  color: var(--fr-brown-deep);
}
.page-template-free-modelhouse-lp .free-gallery__title::after {
  content: "";
  display: block;
  inline-size: 44px;
  block-size: 4px;
  border-radius: 2px;
  background: var(--fr-orange);
  margin: 10px auto 0;
}
.page-template-free-modelhouse-lp .free-marquee {
  margin-block-start: clamp(20px, 5vw, 28px);
  contain: content;
}
.page-template-free-modelhouse-lp .free-marquee__row {
  overflow: hidden;
  padding-block-end: 0;
}
.page-template-free-modelhouse-lp .free-marquee__row + .free-marquee__row {
  margin-block-start: 12px;
}
.page-template-free-modelhouse-lp .free-marquee__row:focus-visible {
  outline: 3px solid var(--fr-focus);
  outline-offset: -3px;
}
.page-template-free-modelhouse-lp .free-marquee__track {
  display: flex;
  inline-size: max-content;
  will-change: transform;
  animation: frMarquee 46s linear infinite;
}
.page-template-free-modelhouse-lp .free-marquee__row--reverse .free-marquee__track {
  animation-duration: 38s;
  animation-direction: reverse;
}
.page-template-free-modelhouse-lp .free-marquee__seq {
  display: flex;
  gap: 12px;
  padding-inline-end: 12px;
}
.page-template-free-modelhouse-lp .free-marquee__seq img {
  block-size: clamp(120px, 34vw, 170px);
  inline-size: auto;
  border-radius: 14px;
}
.page-template-free-modelhouse-lp .free-marquee:hover .free-marquee__track,
.page-template-free-modelhouse-lp .free-marquee:focus-within .free-marquee__track,
.page-template-free-modelhouse-lp .free-marquee.is-paused .free-marquee__track {
  animation-play-state: paused;
}
@keyframes frMarquee {
  to { transform: translate3d(-50%, 0, 0); }
}

/* §10 FAQ ---------------------------------------------------------------- */
.page-template-free-modelhouse-lp .free-faq {
  background: var(--fr-cream);
}
.page-template-free-modelhouse-lp .free-faq__list {
  display: grid;
  gap: 12px;
}
.page-template-free-modelhouse-lp .free-faq__item {
  background: #fff;
  border: 1px solid var(--fr-line);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(88, 64, 46, .06);
}
.page-template-free-modelhouse-lp .free-faq__q {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.page-template-free-modelhouse-lp .free-faq__q:focus-visible {
  outline: 3px solid var(--fr-focus);
  outline-offset: -3px;
  border-radius: 14px;
}
.page-template-free-modelhouse-lp .free-faq__qmark {
  flex: none;
  inline-size: 34px;
  aspect-ratio: 1;
  border-radius: var(--fr-r-full);
  background: var(--fr-band);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--fr-font-num);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
.page-template-free-modelhouse-lp .free-faq__qtext {
  flex: 1;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fr-brown-deep);
}
.page-template-free-modelhouse-lp .free-faq__icon {
  flex: none;
  position: relative;
  inline-size: 22px;
  aspect-ratio: 1;
}
.page-template-free-modelhouse-lp .free-faq__icon::before,
.page-template-free-modelhouse-lp .free-faq__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 2px;
  background: var(--fr-orange);
}
.page-template-free-modelhouse-lp .free-faq__icon::before {
  inline-size: 14px;
  block-size: 3px;
}
.page-template-free-modelhouse-lp .free-faq__icon::after {
  inline-size: 3px;
  block-size: 14px;
  transition: transform .3s var(--fr-ease);
}
.page-template-free-modelhouse-lp .free-faq__item[open] .free-faq__icon::after {
  transform: rotate(90deg);
}
.page-template-free-modelhouse-lp .free-faq__a {
  padding: 2px 16px 18px 62px;
}
.page-template-free-modelhouse-lp .free-faq__atext {
  border-block-start: 1px dashed var(--fr-line);
  padding-block-start: 12px;
  font-size: 14.5px;
}
.page-template-free-modelhouse-lp .free-faq__tel {
  color: var(--fr-cta);
  font-weight: 700;
  text-decoration: underline;
}
.page-template-free-modelhouse-lp .free-faq__item[open] .free-faq__a {
  opacity: 1;
  transition: opacity .3s var(--fr-ease) .08s;
}
@starting-style {
  .page-template-free-modelhouse-lp .free-faq__item[open] .free-faq__a {
    opacity: 0;
  }
}
/* 高さのスムーズ開閉（対応環境のみ。非対応は即時開閉で機能完全） */
@supports (interpolate-size: allow-keywords) {
  .page-template-free-modelhouse-lp .free {
    interpolate-size: allow-keywords;
  }
  .page-template-free-modelhouse-lp .free-faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    overflow: clip;
    transition: block-size .38s var(--fr-ease), content-visibility .38s;
    transition-behavior: allow-discrete;
  }
  .page-template-free-modelhouse-lp .free-faq__item[open]::details-content {
    block-size: auto;
  }
}

/* §11 注意事項 ----------------------------------------------------------- */
.page-template-free-modelhouse-lp .free-notes__box {
  background: var(--fr-cream-2);
  border: 2px solid var(--fr-line);
  border-radius: var(--fr-r-m);
  padding: clamp(20px, 5.5vw, 28px);
}
.page-template-free-modelhouse-lp .free-notes__list {
  display: grid;
  gap: 10px;
}
.page-template-free-modelhouse-lp .free-notes__list li {
  position: relative;
  padding-inline-start: 18px;
  font-size: 14px;
  line-height: 1.85;
}
.page-template-free-modelhouse-lp .free-notes__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: 10px;
  inline-size: 7px;
  aspect-ratio: 1;
  border-radius: var(--fr-r-full);
  background: var(--fr-orange);
}

/* §12 物件情報 ----------------------------------------------------------- */
.page-template-free-modelhouse-lp .free-info__fig {
  border-radius: var(--fr-r-m);
  overflow: hidden;
  overflow: clip;
  box-shadow: var(--fr-shadow);
}
.page-template-free-modelhouse-lp .free-info__fig img {
  inline-size: 100%;
}
.page-template-free-modelhouse-lp .free-info__map {
  margin-block-start: 18px;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--fr-r-m);
  overflow: hidden;
  overflow: clip;
  box-shadow: var(--fr-shadow);
}
.page-template-free-modelhouse-lp .free-info__map iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}
.page-template-free-modelhouse-lp .free-info__addr {
  margin-block-start: 14px;
  text-align: center;
  font-size: 14.5px;
  font-weight: 500;
}

/* §13 追従予約バー ------------------------------------------------------- */
.page-template-free-modelhouse-lp .free-nav {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  margin-inline: auto;
  inline-size: min(550px, 100%);
  z-index: 1100;
  display: flex;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 251, 244, .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-block-start: 1px solid var(--fr-line);
  box-shadow: 0 -8px 24px rgba(88, 64, 46, .14);
  visibility: hidden;
  transform: translateY(110%);
  transition: transform .35s var(--fr-ease), visibility 0s linear .35s;
}
.page-template-free-modelhouse-lp .free-nav.is-visible {
  visibility: visible;
  transform: translateY(0);
  transition: transform .35s var(--fr-ease), visibility 0s;
}
.page-template-free-modelhouse-lp .free-nav__tel {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-inline-size: 118px;
  padding: 6px 10px;
  border: 2px solid var(--fr-brown-deep);
  border-radius: 12px;
  background: #fff;
}
.page-template-free-modelhouse-lp .free-nav__tel-en {
  font-family: var(--fr-font-num);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--fr-brown-soft);
  line-height: 1.2;
}
.page-template-free-modelhouse-lp .free-nav__tel-num {
  font-family: var(--fr-font-num);
  font-weight: 700;
  font-size: 15px;
  color: var(--fr-brown-deep);
  line-height: 1.2;
}
.page-template-free-modelhouse-lp .free-nav__cta {
  flex: 1;
  display: grid;
  place-items: center;
  min-block-size: 52px;
  border-radius: 12px;
  background: var(--fr-cta);
  color: #fff;
  font-family: var(--fr-font-head);
  font-weight: 700;
  font-size: clamp(15px, 4.2vw, 17px);
  line-height: 1.4;
  box-shadow: 0 6px 16px rgba(194, 64, 28, .3);
  transition: background-color .2s var(--fr-ease), transform .15s var(--fr-ease);
}
.page-template-free-modelhouse-lp .free-nav__cta:hover {
  background: var(--fr-cta-hover);
}
.page-template-free-modelhouse-lp .free-nav__cta:active {
  transform: scale(.97);
}

/* §14 アニメーション ------------------------------------------------------ */
/* 14-1 リビール初期状態（.js-anim 付与時のみ隠す＝JS無効環境では常時表示） */
.page-template-free-modelhouse-lp .free.js-anim .free-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--fr-dur-m) var(--fr-ease) calc(var(--i, 0) * var(--fr-stagger)),
    transform var(--fr-dur-m) var(--fr-ease) calc(var(--i, 0) * var(--fr-stagger));
}
.page-template-free-modelhouse-lp .free.js-anim .free-reveal--pop {
  transform: scale(.9) translateY(12px);
  transition-timing-function: var(--fr-ease), var(--fr-ease-bounce);
}
/* 帯・流れ線はブロック自体を隠さない（疑似要素側で演出） */
.page-template-free-modelhouse-lp .free.js-anim .free-reveal--band,
.page-template-free-modelhouse-lp .free.js-anim .free-reveal--line {
  opacity: 1;
  transform: none;
}
.page-template-free-modelhouse-lp .free.js-anim .free-reveal--band::before {
  transform: scaleX(0);
  transition: transform .65s var(--fr-ease);
}
.page-template-free-modelhouse-lp .free.js-anim .free-reveal--band .free-band__txt {
  opacity: 0;
  transition: opacity .45s var(--fr-ease) .3s;
}
.page-template-free-modelhouse-lp .free.js-anim .free-reveal--line::before {
  transform: scaleY(0);
  transition: transform 1.1s var(--fr-ease) .1s;
}
/* 14-2 発火状態 */
.page-template-free-modelhouse-lp .free .free-reveal.is-in {
  opacity: 1;
  transform: none;
}
.page-template-free-modelhouse-lp .free .free-reveal--band.is-in::before {
  transform: scaleX(1);
}
.page-template-free-modelhouse-lp .free .free-reveal--band.is-in .free-band__txt {
  opacity: 1;
}
.page-template-free-modelhouse-lp .free .free-reveal--line.is-in::before {
  transform: scaleY(1);
}
/* 14-3 FVイントロ（.is-ready で発火） */
.page-template-free-modelhouse-lp .free.js-anim .free-fv__balloon {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity .45s var(--fr-ease) .1s, clip-path .55s var(--fr-ease) .1s;
}
.page-template-free-modelhouse-lp .free.js-anim.is-ready .free-fv__balloon {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}
.page-template-free-modelhouse-lp .free.js-anim .free-fv__title {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--fr-ease) .32s, transform .7s var(--fr-ease) .32s;
}
.page-template-free-modelhouse-lp .free.js-anim.is-ready .free-fv__title {
  opacity: 1;
  transform: none;
}
.page-template-free-modelhouse-lp .free.js-anim .free-point {
  opacity: 0;
  transform: scale(.4) translateY(12px);
  transition:
    opacity .5s var(--fr-ease) calc(.6s + var(--i, 0) * .13s),
    transform .55s var(--fr-ease-bounce) calc(.6s + var(--i, 0) * .13s);
}
.page-template-free-modelhouse-lp .free.js-anim.is-ready .free-point {
  opacity: 1;
  transform: none;
}
/* 14-4 スクロール駆動（scroll(): 進捗バー・FVスクロールアウト） */
@supports (animation-timeline: scroll()) {
  .page-template-free-modelhouse-lp .free-progress {
    display: block;
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    margin-inline: auto;
    inline-size: min(550px, 100%);
    block-size: 4px;
    z-index: 1150;
    pointer-events: none;
  }
  .page-template-free-modelhouse-lp .free-progress__bar {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    background: linear-gradient(90deg, var(--fr-orange), var(--fr-cta));
    transform-origin: 0 50%;
    transform: scaleX(0);
    animation: frProgress linear both;
    animation-timeline: scroll(root);
  }
  .page-template-free-modelhouse-lp .free-fv__inner {
    animation: frHeroOut linear both;
    animation-timeline: scroll(root);
    animation-range: 0px 480px;
  }
}
@keyframes frProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes frHeroOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-44px); }
}
/* 14-5 スクロール駆動（view(): 写真のスクラブズーム） */
@supports (animation-timeline: view()) {
  .page-template-free-modelhouse-lp .free-zoom img {
    animation: frZoomIn linear both;
    animation-timeline: view(block);
    animation-range: entry 0% cover 42%;
  }
}
@keyframes frZoomIn {
  from { transform: scale(1.09); }
  to { transform: scale(1); }
}

/* §15 reduced-motion（!important 許容の唯一のブロック） ------------------- */
@media (prefers-reduced-motion: reduce) {
  /* テーマの html{scroll-behavior:smooth} を本ページのみ解除
     （#reserve へのページ内リンク3本がアニメーションしないように。
      body側指定は姉妹LP踏襲、html:has() 版が実効。:has非対応環境はsmoothが残るのみ） */
  .page-template-free-modelhouse-lp {
    scroll-behavior: auto !important;
  }
  html:has(.page-template-free-modelhouse-lp) {
    scroll-behavior: auto !important;
  }
  .page-template-free-modelhouse-lp .free,
  .page-template-free-modelhouse-lp .free *,
  .page-template-free-modelhouse-lp .free *::before,
  .page-template-free-modelhouse-lp .free *::after {
    animation: none !important;
    transition: none !important;
  }
  .page-template-free-modelhouse-lp .free :where(.free-reveal, .free-fv__balloon, .free-fv__title, .free-point, .free-band__txt) {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .page-template-free-modelhouse-lp .free .free-reveal--band::before,
  .page-template-free-modelhouse-lp .free .free-reveal--line::before {
    transform: none !important;
  }
  .page-template-free-modelhouse-lp .free-fv__img,
  .page-template-free-modelhouse-lp .free-fv__inner {
    transform: none !important;
    opacity: 1 !important;
  }
  .page-template-free-modelhouse-lp .free-progress {
    display: none !important;
  }
  /* マーキー → 手動スワイプの静的リスト化 */
  .page-template-free-modelhouse-lp .free-marquee__track {
    inline-size: auto;
  }
  .page-template-free-modelhouse-lp .free-marquee__row {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .page-template-free-modelhouse-lp .free-marquee__seq img {
    scroll-snap-align: center;
  }
  .page-template-free-modelhouse-lp .free-marquee__seq[aria-hidden="true"] {
    display: none;
  }
}