@charset "UTF-8";
/* =====================================================================
   もりや歯科 予防メインテナンスLP  (/maintenance)
   Figma: もりや歯科_予防LP_コーディング用  SMP=5:3 / PC=101:39 / SPフッター=102:505
   ・見出し・図版は原則 Figma 書き出し画像（.lp-img）で共通化
   ・本文（p）のみテキスト。パーツを使い回すことで CSS 量を抑制
   ・全スタイルを body.lp-maintenance 配下にスコープしテーマCSSと分離
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 0. トークン                                                          */
/* ------------------------------------------------------------------ */
body.lp-maintenance {
  --navy: #3a5fab;
  --navy-d: #2f4e8f;
  --gold: #dac582;
  --beige: #f4f2ee;
  --beige-2: #e7e3d6;
  --ink: #333;
  --gray: #4e4e4e;
  --gray-l: #9e9e9e;
  --line: #ececec;
  --off: #f8f8f8;
  --line-green: #06c755;

  --ff: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  /* --s: デザイン全体の拡大率。スマホは等倍、PCでは下の @media で 1.35 倍。
     幅・余白・画像サイズがすべてこの値に連動するので、PCの見え方は
     この1箇所だけで調整できる。本文の font-size は意図的に据え置き
     （拡大すると1行の文字数が減り、かえって読みにくくなるため）。      */
  --s: 1;
  --wrap: calc(390px * var(--s));   /* PC時のセンターカラム幅（Figma SP=390px） */
  --inner: calc(358px * var(--s));  /* コンテンツ幅（Figma: 390 - 左右16px） */
  --pad: 16px;
  /* ブロックの上下余白。.lp-wrap 直下のブロックは全てこれを持つ。
     見出しが来る上側を厚くしてあり、ブロック境界は常に 32+48=80px。     */
  --sp-top: calc(40px * var(--s));     /* 各ブロックの上（h2の上のアキ） */
  --sp-bottom: calc(32px * var(--s));  /* 各ブロックの下 */
  /* 画面が 390px より広いスマホでは、余白を増やしてコンテンツを 358px に保つ */
  --gut: max(var(--pad), calc((100% - var(--inner)) / 2));
  --r: 12px;
}

/* PC表示：デザインを 1.35 倍に拡大して読みやすくする（幅 483px） */
@media (min-width: 1000px) {
  body.lp-maintenance { --s: 1.35; }
}

/* ------------------------------------------------------------------ */
/* 1. リセット（LP内のみ）／テーマ装飾の打ち消し                        */
/* ------------------------------------------------------------------ */
body.lp-maintenance {
  margin: 0;
  /* カスタマイザーの「サイト上部のボーダー色」が body { border-top:1px solid }
     を出力するため打ち消す（st-themecss-loader.php / 詳細度 (0,0,1)）        */
  border-top: 0;
  /* PC時に センターカラムの外側に見える地の色（Figma PC 101:39 = #f4f2ee）  */
  background: var(--beige);
  color: var(--ink);
  font-family: var(--ff);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
  word-break: break-word;
}
body.lp-maintenance #content-w,
body.lp-maintenance #wrapper,
body.lp-maintenance #wrapper-in,
body.lp-maintenance #st-ami {
  background: none;
  margin: 0;
  padding: 0;
  max-width: none;
  box-shadow: none;
  border: 0;
}
/* AFFINGER のスマホ固定要素はLP独自の固定バナーと競合するため非表示 */
body.lp-maintenance #footer-ad,
body.lp-maintenance #st-footermenubox,
body.lp-maintenance #page-top { display: none !important; }

/* リセットは :where() で詳細度0にし、後続のコンポーネント指定を常に優先させる */
:where(body.lp-maintenance) :where(h1, h2, h3, h4, p, ul, ol, li, figure, table) { margin: 0; padding: 0; }
:where(body.lp-maintenance) :where(ul, ol) { list-style: none; }
:where(body.lp-maintenance) :where(img, svg) { max-width: 100%; height: auto; vertical-align: bottom; border: 0; }
:where(body.lp-maintenance) :where(a) { color: inherit; text-decoration: none; }
:where(body.lp-maintenance) :where(button, select) { font: inherit; color: inherit; background: none; border: 0; }

/* テーマの h2 装飾を打ち消す ----------------------------------------
   LP の h2 は Figma 書き出し画像を包むだけの箱なので、テーマ側の装飾は
   すべて不要。上の :where() リセットは詳細度 0 のため以下に負けている。
     親 affinger5/style.css:1652      h2:not(.st-css-no2) … 背景/枠線/余白
     親 affinger5/style.css:1440 ほか  h2:not(.st-css-no2) … font-size/line-height
     子 affinger5-child/style.css:53  h2 { margin-bottom:5px !important }
   親子とも詳細度は (0,1,1)。lp.css は両者より後に読まれるので、
   (0,1,2) の `body.lp-maintenance h2` にすれば打ち消せる。
     カスタマイザー st-themecss-loader.php  h2:not(.st-css-no) … padding-left:40px!important
   子テーマとカスタマイザーが !important のため、margin-bottom と padding は
   こちらも !important で返す。                                              */
body.lp-maintenance h2 {
  margin-top: 24px;   /* ★仮：見出しの上に一律24px。.mt-* (0,2,1) が付いた h2 では上書きされる */
  margin-bottom: 0 !important;
  padding: 0 !important;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-shadow: none;
}
/* テーマが疑似要素で足す装飾線（affinger5/style.css:6981, 7741）も消す */
body.lp-maintenance h2::before,
body.lp-maintenance h2::after { content: none; display: none; }

/* テーマの p 装飾を打ち消し、Figma のテキストスタイル "p" に揃える ------
     親 affinger5/style.css:1414  p { font-size:18px; line-height:30px }
     親 affinger5/style.css:1462  p { margin-bottom:20px }
   どちらも詳細度 (0,0,1)。スコープを :where() で詳細度0にして (0,0,1) で
   並べれば、後から読まれる lp.css が勝つ。かつ .lp-txt / .lp-src などの
   コンポーネント指定 (0,1,0) と .mt-* は従来どおり優先される。
   値は Figma のテキストスタイル p = 16px / line-height 1.68 / tracking 5%   */
:where(body.lp-maintenance) p {
  margin: 0;
  font-size: 16px;
  line-height: 1.68;
  letter-spacing: 0.05em;
}

/* テーマの見出し余白を打ち消す ----------------------------------------
     子 affinger5-child/style.css:135  h3 { margin-left: 1em }
   詳細度 (0,0,1) 同士の同格になるようスコープを :where() に置き、
   後読みの lp.css が勝つ形にする。.mt-* (0,1,0) は従来どおり優先される。 */
:where(body.lp-maintenance) :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  padding: 0;
}

/* 親 affinger5/style.css の section { margin-bottom: 3em } を打ち消す。
   これが残っていると全セクションの境界に 48px の余白が入り、
   .lp-sec / .lp-cta の padding とは別に地の色が帯状に見えてしまう。
   （子テーマもインビザラインLPでは同様に 0 にしている）              */
:where(body.lp-maintenance) section { margin-bottom: 0; }
body.lp-maintenance *, body.lp-maintenance *::before, body.lp-maintenance *::after { box-sizing: border-box; }

/* ------------------------------------------------------------------ */
/* 2. 全体ラッパー                                                      */
/* ------------------------------------------------------------------ */
.lp-wrap {
  margin: 0 auto;
  background: #fff;
  position: relative;
  overflow: hidden;
  padding-bottom: 84px; /* SP固定フッターバナー分 */
}
@media (min-width: 1310px) {
  .lp-wrap {
    /* box-sizing:border-box のため、左右1pxの線の分だけ幅を足して
       コンテンツ幅を Figma の 390px（--wrap）ちょうどに保つ            */
    max-width: calc(var(--wrap) + 2px);
    padding-bottom: 0;
    border-left: 1px solid var(--navy);   /* #3a5fab */
    border-right: 1px solid var(--navy);
  }
}

/* ------------------------------------------------------------------ */
/* 3. 共通パーツ                                                        */
/* ------------------------------------------------------------------ */

/* 3-1. セクション ---------------------------------------------------- */
.lp-sec { padding: var(--sp-top) var(--gut) var(--sp-bottom); }
.lp-sec--beige { background: var(--beige); }   /* #f4f2ee */
.lp-sec--off   { background: var(--off); }     /* #f8f8f8 */
.lp-sec--gray  { background: var(--line); }    /* #ececec */
.lp-sec--navy  { background: var(--navy); color: #fff; }
.lp-sec--flush { padding-left: 0; padding-right: 0; }
.lp-sec--tight { padding-top: 24px; padding-bottom: 24px; }

/* 3-2. 画像ブロック（見出し画像／図版画像 共通）-----------------------
   画像は Figma から2倍で書き出し、width/height 属性に 1/2 の値を入れている。
   ここで width を指定しないことで属性値＝デザイン実寸で表示される。       */
.lp-img { display: block; max-width: 100%; height: auto; }
.lp-img--c { margin-left: auto; margin-right: auto; }         /* 実寸センター */
.lp-img--full { width: 100%; }                                /* コンテンツ幅いっぱい */
/* フル幅の帯画像。画像なので padding を持てない分を margin で補い、
   他のブロックと同じ 64px 境界になるようにする。                      */
.lp-band { display: block; width: 100%; margin: var(--sp-top) 0 0; }  /* ★仮：下は0 */

/* 3-3. テキスト ------------------------------------------------------ */
.lp-txt   { font-size: 16px; line-height: 1.68; letter-spacing: 0.05em; }
.lp-txt b, .lp-txt strong { font-weight: 700; color: var(--navy); }
.lp-note  { font-size: 13px; line-height: 1.7; color: var(--gray-l); }
.lp-src   { font-size: 12px; line-height: 1.6; letter-spacing: 0.02em; color: var(--gray-l); text-align: center; }
.lp-sec--navy .lp-txt { color: #fff; }
.lp-sec--navy .lp-txt b, .lp-sec--navy .lp-txt strong { color: var(--gold); }
.lp-sec--navy .lp-note { color: rgba(255, 255, 255, .65); }

/* 3-5. ボタン -------------------------------------------------------- */
.lp-btn {
  display: flex; flex-direction: column; cursor: pointer;
  align-items: center; justify-content: center;
  min-height: 56px; padding: 10px 20px;
  border-radius: 999px; font-weight: 700; font-size: 17px;
  line-height: 1.35; text-align: center;
  transition: opacity .2s, transform .12s;
}
.lp-btn:active { transform: translateY(1px); }
.lp-btn:hover  { opacity: .88; }
.lp-btn small  { display: block; font-size: 12px; font-weight: 400; letter-spacing: .02em; }
.lp-btn .ic    { width: 22px; height: 22px; margin-right: 6px; flex: none; }
.lp-btn__row   { display: flex; align-items: center; justify-content: center; }
.lp-btn--navy  { background: var(--navy); color: #fff; box-shadow: 0 4px 12px rgba(58, 95, 171, .28); }
.lp-btn--white { background: #fff; color: var(--navy); box-shadow: 0 4px 12px rgba(0, 0, 0, .14); }
.lp-btn--line  { background: var(--line-green); color: #fff; box-shadow: 0 4px 12px rgba(6, 199, 85, .3); }
.lp-btn--insta {
  background: linear-gradient(45deg, #f9ce34, #ee2a7b 45%, #6228d7);
  color: #fff; box-shadow: 0 4px 12px rgba(238, 42, 123, .25);
}
/* 単独で置くSNSボタンは、コンテンツ幅いっぱいだと重いので少し絞って中央寄せ。
   幅を変えるならこの1行。予約ボタン（.lp-btns 内）は対象外。            */
.lp-btn--line,
.lp-btn--insta { max-width: calc(320px * var(--s)); margin-inline: auto; }
.lp-btns { display: grid; gap: 12px; }
/* 画像ボタン。btn-tel.png / btn-web.png は 358x128 のうちピル本体が 310x80 で、
   影のための透明余白（上20px / 下28px / 左右24px）を含む。
   その分を相殺し、テキストボタン時と同じ「見た目の間隔12px」に揃える。   */
.lp-btns--img { gap: 0; }
.lp-btns--img > a { display: block; }
.lp-btns--img > a + a { margin-top: -36px; }   /* 28 + 20 - 12 */

/* 3-6. カード／注意書きボックス --------------------------------------- */
.lp-card { background: #fff; border-radius: var(--r); padding: 20px 16px; }
.lp-callout {
  background: var(--off); border-radius: var(--r);
  padding: 16px 24px; font-size: 14px; line-height: 1.7; color: var(--gray);
}
.lp-callout b { color: var(--navy); }

/* 3-6b. まとめボックス（見出し画像＋本文）— Figma 125:90 --------------
   bg #f8f8f8 / radius 16 / padding 32px 16px / 見出しと本文の間 24px      */
.lp-pointbox {
  background: var(--off); border-radius: 16px;
  padding: 32px 16px; text-align: center;
}
.lp-pointbox__body { margin-top: 24px; text-align: left; }

/* 3-7. CTA帯（電話／WEB予約）— 3箇所で使い回し ------------------------ */
.lp-cta {
  position: relative; padding: var(--sp-top) var(--gut) var(--sp-bottom);
  background: var(--navy-d) center/cover no-repeat;
  color: #fff; text-align: center; overflow: hidden;
}
.lp-cta::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(48, 79, 143, .82);
}
.lp-cta > * { position: relative; }
.lp-cta__ttl {
  font-family: "Zen Kaku Gothic New", var(--ff);
  font-weight: 700; font-size: 28px; line-height: 1.4; letter-spacing: .06em;
}
.lp-cta__sub { margin-top: 14px; font-size: 14px; font-weight: 700; line-height: 1.7; }
.lp-cta .lp-btns { margin-top: 22px; }
.lp-cta .lp-btns--img { margin-top: 2px; }     /* 22 - 画像上部の透明20px */
.lp-cta:has(.lp-btns--img) { padding-bottom: calc(var(--sp-bottom) - 28px); } /* 画像下部の透明28px分 */

/* 3-8. YouTube Lite 埋め込み ------------------------------------------ */
.lp-video__label { font-size: 14px; line-height: 1.6; letter-spacing: 0.02em; font-weight: 700; color: var(--gray); }
.lp-video__frame {
  position: relative; margin-top: 8px; aspect-ratio: 16 / 10;
  background: var(--line); border-radius: 8px; overflow: hidden; cursor: pointer;
}
.lp-video__frame img,
.lp-video__frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border: 0;
}
.lp-video__frame::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 62px; height: 44px; border-radius: 10px;
  background: rgba(0, 0, 0, .62)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='22' viewBox='0 0 20 22'%3E%3Cpath d='M0 0l20 11L0 22z' fill='%23fff'/%3E%3C/svg%3E")
    center/20px 22px no-repeat;
  transition: background-color .2s;
}
.lp-video__frame:hover::after { background-color: #e5322d; }
.lp-video__frame.is-playing::after { display: none; }

/* ------------------------------------------------------------------ */
/* 4. ヘッダー                                                          */
/* ------------------------------------------------------------------ */
.lp-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px var(--gut); background: #fff;
}
.lp-header__logo { width: 23px; flex: none; }
.lp-header__place { font-size: 10px; line-height: 1.5; color: var(--gray); letter-spacing: .02em; }
.lp-header__name {
  font-family: "Zen Kaku Gothic New", var(--ff);
  font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--navy);
}
.lp-header__access {
  margin-left: auto; flex: none;
  padding: 8px 14px; border-radius: 999px;
  background: var(--navy); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
}

/* ------------------------------------------------------------------ */
/* 5. FV                                                                */
/* ------------------------------------------------------------------ */
/* Figma実寸は padding-top:89px / copy top:24px。
   h1画像の内側に24pxの余白が焼き込まれており画面上は空きすぎて見えるため、
   FVの露出を優先して全体を14px上げている（Figmaとの意図的な差分）。 */
.lp-hero { position: relative; padding: calc(75px * var(--s)) var(--gut) 0; }
/* 例外1：FVはリード文を absolute で下端に置いているため padding-bottom を
   使えない。下側ぶん(--sp-bottom)を次ブロック側の margin で補う。      */
.lp-hero + * { margin-top: var(--sp-bottom); }
/* 例外2：誘導矢印を次の帯画像に食い込ませる（.lp-leadnext は padding-bottom 0）*/
.lp-leadnext + .lp-band { margin-top: calc(-16px * var(--s)); }
/* 例外3：背景を塗ったブロックが帯画像と隣り合うときは、間の margin を殺して
   地続きにする。残さないと画像と塗りの間に白い隙間が入ってしまう。
   （塗り同士は元から margin を持たず接しているので、この指定は不要）      */
.lp-band:has(+ :is(.lp-sec--gray, .lp-sec--beige, .lp-sec--off, .lp-sec--navy, .lp-cta, .lp-access)) {
  margin-bottom: 0;
}
:is(.lp-sec--gray, .lp-sec--beige, .lp-sec--off, .lp-sec--navy, .lp-cta, .lp-access) + .lp-band {
  margin-top: 0;
}
.lp-hero__copy {
  position: absolute; top: calc(10px * var(--s)); left: 0; z-index: 2;
  width: min(calc(310px * var(--s)), 80%);
}
/* リードは1行ごとに独立した白ボックス（Figma 33:57 / 33:65 / 33:68） */
.lp-hero__lead {
  position: absolute; left: calc(var(--gut) + 10px * var(--s)); bottom: calc(24px * var(--s)); z-index: 2;
  max-width: calc(100% - var(--gut) - 20px * var(--s));
}
.lp-hero__lead img + img { margin-top: calc(4px * var(--s)); }

/* ------------------------------------------------------------------ */
/* 6. 診断ツール（フォーム連動）                                        */
/* ------------------------------------------------------------------ */
.lp-diag { background: var(--beige); border-radius: var(--r); padding: calc(24px * var(--s)); }
.lp-diag__rule { height: 1px; background: var(--navy); margin: 24px 0 40px; }
.lp-diag__group + .lp-diag__group { margin-top: 24px; }
.lp-diag__label {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; line-height: 1.4;
}
.lp-diag__q {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 33px; border-radius: 6px;
  background: var(--navy); color: #fff; font-size: 15px; font-weight: 700;
}
.lp-diag__select { position: relative; margin-top: 8px; }
.lp-diag__select::after {
  content: ""; position: absolute; right: 16px; top: 50%; z-index: 1;
  width: 10px; height: 10px; margin-top: -7px; pointer-events: none;
  border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
  transform: rotate(45deg);
}
.lp-diag__select select {
  width: 100%; height: 48px; padding: 0 40px 0 14px;
  border: 1px solid #d9d9d9; border-radius: 8px; background: #fff;
  font-size: 15px; appearance: none; -webkit-appearance: none;
}
.lp-diag__select select:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(58, 95, 171, .15);
}
.lp-diag__submit { width: 210px; margin: 24px auto 0; }

/* 結果（送信後に表示）------------------------------------------------ */
.lp-diag__result {
  padding: 40px 16px; border-radius: var(--r);
  background: #fff; border: 2px solid var(--navy); text-align: center;
  /* 未回答時は高さ・余白をすべて 0 に畳む。margin-top を残すと
     結果が出ていないのに 24px の空きができるため 0 にしておく          */
  margin-top: 0;
  opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0;
  border-width: 0; overflow: hidden;
  transition: opacity .4s, max-height .4s, padding .4s, margin .4s;
}
.lp-diag__result.is-show {
  margin-top: 24px; opacity: 1; max-height: 420px;
  padding-top: 40px; padding-bottom: 40px; border-width: 2px;
}
.lp-diag__result-label { font-size: 15px; font-weight: 700; }
.lp-diag__result-num {
  font-family: "Zen Kaku Gothic New", var(--ff);
  margin-top: 24px; font-size: 24px; font-weight: 700; color: var(--navy); line-height: 1.2;
}
.lp-diag__result-num .n { font-size: 52px; letter-spacing: -.02em; }
.lp-diag__result-msg { margin-top: 24px; font-size: 15px; line-height: 1.7; }
.lp-diag__result.is-alert { border-color: #c0392b; }
.lp-diag__result.is-alert .lp-diag__result-num { color: #c0392b; }

/* 注釈は「結果を見る」を押したあとに結果ボックスと一緒に出す */
.lp-diag__note {
  margin-top: 0; opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity .4s, max-height .4s, margin-top .4s;
}
.lp-diag.is-answered .lp-diag__note { opacity: 1; max-height: 240px; margin-top: 24px; }

/* 次セクションへの誘導（結果表示後にフェードイン）--------------------- */
/* 上の余白は直前の .lp-sec の padding-bottom に任せる。
   ここでも padding-top を持つと二重になってしまう。
   下の -16px は、矢印の先端を次の帯画像に重ねるための引き上げ分。      */
.lp-leadnext { text-align: center; padding: var(--sp-top) var(--gut) 0; }
.lp-leadnext img { margin: 0 auto; }
.lp-leadnext img + img { margin-top: 8px; }
.lp-leadnext__arrow {
  width: 0; height: 0;
  margin: 48px auto 0;              /* サブテキストとの間（Figma実測 45.5px） */
  position: relative; z-index: 1;   /* 次の帯画像より前面に出す            */
  /* Figma実測 166 x 42px */
  border-left: 83px solid transparent; border-right: 83px solid transparent;
  border-top: 42px solid var(--gold);
}

/* ------------------------------------------------------------------ */
/* 7. Instagram（横スクロールカルーセル）                               */
/* ------------------------------------------------------------------ */
.lp-insta__scroll {
  display: flex; gap: 16px; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding-bottom: 4px; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);
  scrollbar-width: none;
}
.lp-insta__scroll::-webkit-scrollbar { display: none; }
.lp-insta__item {
  display: block; flex: 0 0 calc(232px * var(--s)); scroll-snap-align: center;
  border-radius: 8px; overflow: hidden; background: var(--line);
  transition: opacity .2s;
}
.lp-insta__item:hover { opacity: .85; }
.lp-insta__item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.lp-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.lp-dots span { width: 8px; height: 8px; border-radius: 50%; background: #cfcfcf; }
.lp-dots span.is-on { background: var(--navy); }

/* ------------------------------------------------------------------ */
/* 8. FAQ アコーディオン                                                */
/* ------------------------------------------------------------------ */
.lp-faq__item { border-bottom: 1px solid var(--line); }
.lp-faq__q {
  display: flex; align-items: flex-start; gap: 8px; width: 100%;
  padding: 16px 28px 16px 0; position: relative;
  background: none; border: 0; text-align: left; cursor: pointer;
  font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--navy);
}
.lp-faq__q::after {
  content: ""; position: absolute; right: 4px; top: 22px;
  width: 9px; height: 9px;
  border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
  transform: rotate(45deg); transition: transform .25s;
}
.lp-faq__item.is-open .lp-faq__q::after { transform: rotate(-135deg); top: 26px; }
.lp-faq__mark {
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  font-size: 14px; font-weight: 700; line-height: 1;
}
.lp-faq__q .lp-faq__mark { background: var(--off); color: var(--navy); }
.lp-faq__a  .lp-faq__mark { background: var(--navy); color: #fff; }
.lp-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s; }
.lp-faq__item.is-open .lp-faq__a { grid-template-rows: 1fr; }
.lp-faq__a-in { overflow: hidden; min-height: 0; }
.lp-faq__a-body {
  display: flex; gap: 8px; padding: 0 0 18px;
  font-size: 15px; line-height: 1.7;
}

/* ------------------------------------------------------------------ */
/* 9. アクセス（最終CTA下）                                             */
/* ------------------------------------------------------------------ */
.lp-access { padding: var(--sp-top) var(--gut) var(--sp-bottom); background: var(--navy); color: #fff; }
.lp-access__name {
  font-family: "Zen Kaku Gothic New", var(--ff);
  font-size: 20px; font-weight: 700;
}
.lp-access__info { margin-top: 12px; font-size: 15px; line-height: 1.7; }
.lp-access__map {
  margin-top: 20px; border-radius: 8px; overflow: hidden;
  aspect-ratio: 358 / 253; background: rgba(255, 255, 255, .15);
}
.lp-access__map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ------------------------------------------------------------------ */
/* 10. SP固定フッターバナー（Figma 102:505）                            */
/* ------------------------------------------------------------------ */
.lp-fixbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
  display: grid; grid-template-columns: 1fr 1fr;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .16);
}
.lp-fixbar a {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px; min-height: 80px; padding: 10px 6px;
  color: #fff; font-size: 16px; font-weight: 700; line-height: 1.3;
}
.lp-fixbar a small { font-size: 12px; font-weight: 400; letter-spacing: .02em; }
.lp-fixbar .num { font-size: 16px; font-weight: 700; letter-spacing: .04em; }
.lp-fixbar .ic { width: 22px; height: 22px; margin-right: 6px; }
.lp-fixbar__row { display: flex; align-items: center; }
.lp-fixbar__tel { background: #3a5fab; }
.lp-fixbar__web { background: #2c4685; }
@media (min-width: 1310px) { .lp-fixbar { display: none; } }

/* ------------------------------------------------------------------ */
/* 11. PC左右固定バナー（Figma 101:39）                                 */
/* ------------------------------------------------------------------ */
.lp-side { display: none; }
@media (min-width: 1310px) {
  .lp-side {
    display: block; position: fixed; bottom: 32px; z-index: 80;
    width: 310px; text-align: center;
  }
  /* Figma(PC 1290px)の配置を --wrap 連動に。左パネル310px＋余白70px、
     右バナー280px＋余白85px を中央カラムの外側に置く。               */
  .lp-side--l { left: max(16px, calc(50% - var(--wrap) / 2 - 380px)); }
  .lp-side--r { right: max(16px, calc(50% - var(--wrap) / 2 - 365px)); width: 280px; }

  .lp-side__logo { width: 61px; margin: 0 auto; }
  .lp-side__name {
    font-family: "Zen Kaku Gothic New", var(--ff);
    margin-top: 22px; font-size: 24px; font-weight: 700; color: var(--navy);
  }
  .lp-side__info { margin-top: 14px; font-size: 15px; line-height: 1.7; color: var(--ink); }
  .lp-side .lp-btns { margin-top: 22px; }
  .lp-side--l .lp-btn { min-height: 80px; }

  .lp-side__bnrs { display: grid; gap: 16px; }
  .lp-side__bnrs img { border-radius: 4px; }
  .lp-side__bnrs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
}
@media (min-width: 1310px) and (max-height: 620px) {
  /* 縦が極端に短い画面では、はみ出さないようバナーを間引く */
  .lp-side__bnrs > a:nth-child(n + 3) { display: none; }
  .lp-side--l .lp-side__logo, .lp-side--l .lp-side__info { display: none; }
}

/* ------------------------------------------------------------------ */
/* 12. 素材待ちプレースホルダー（差し替え前提）                          */
/* ------------------------------------------------------------------ */
.lp-ph {
  display: grid; place-items: center; aspect-ratio: 1 / 1; padding: 12px;
  background: repeating-linear-gradient(-45deg, #efefef 0 10px, #e7e7e7 10px 20px);
  color: var(--gray-l); font-size: 13px; line-height: 1.5; text-align: center;
  border-radius: 8px;
}
.lp-ph--video { aspect-ratio: 16 / 10; }
.lp-ph--map   { aspect-ratio: 358 / 253; }

/* ------------------------------------------------------------------ */
/* 12b. パスワード保護ページ                                            */
/* ------------------------------------------------------------------ */
.lp-pwd { text-align: center; padding-top: 64px; padding-bottom: 96px; }
.lp-pwd__lead { font-size: 15px; font-weight: 700; line-height: 1.7; }
.lp-pwd form { margin-top: 24px; }
.lp-pwd p { font-size: 14px; line-height: 1.8; color: var(--gray); }
.lp-pwd label { display: block; }
.lp-pwd input[type="password"] {
  display: block; width: 100%; max-width: 280px; height: 48px;
  margin: 12px auto 0; padding: 0 14px;
  border: 1px solid #d9d9d9; border-radius: 8px; background: #fff;
  font-size: 16px; /* iOSの自動ズーム防止 */
}
.lp-pwd input[type="password"]:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(58, 95, 171, .15);
}
.lp-pwd input[type="submit"] {
  display: block; margin: 16px auto 0; min-width: 140px; min-height: 48px;
  padding: 0 24px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--navy); color: #fff; font-size: 16px; font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* 12c. スクロール連動フェードイン                                       */
/*   ・.lp-reveal-on は <head> のインラインJSが付ける。                   */
/*     JSが動かない環境では付かない＝最初から全部見える（事故防止）。      */
/*   ・そのJSは2.5秒のフェイルセーフも仕掛けており、lp.js が初期化に      */
/*     失敗した場合は自動でクラスを外して全表示に戻す。                   */
/*   ・prefers-reduced-motion の端末では、そもそもクラスを付けない。      */
/* ------------------------------------------------------------------ */
.lp-reveal-on :is(.lp-sec, .lp-cta, .lp-access, .lp-leadnext) > *,
.lp-reveal-on .lp-band {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
              transform .7s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--d, 0s);
}
.lp-reveal-on .is-inview {
  opacity: 1;
  transform: none;
}
/* ボタンのホバー減光が .is-inview に打ち消されないよう詳細度を上げる */
.lp-reveal-on .lp-btn:hover { opacity: .88; }

/* フェイルセーフ発動時は、トランジションを待たず即座に全表示へ戻す */
.lp-reveal-off :is(.lp-sec, .lp-cta, .lp-access, .lp-leadnext) > *,
.lp-reveal-off .lp-band {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ------------------------------------------------------------------ */
/* 13. 余白ユーティリティ                                               */
/*     同じ詳細度でもコンポーネント側の margin ショートハンドに          */
/*     打ち消されないよう、必ずファイル末尾に置くこと                    */
/* ------------------------------------------------------------------ */
/* 値は Figma の余白スケール（8 / 16 / 24 / 40 / 48）に一致させている。
   上の h2 リセット (0,1,2) に負けないよう body スコープで (0,2,1) にする      */
body.lp-maintenance .mt-xs  { margin-top: 8px; }
body.lp-maintenance .mt-s   { margin-top: 16px; }
body.lp-maintenance .mt-m   { margin-top: 24px; }
body.lp-maintenance .mt-l   { margin-top: 40px; }
body.lp-maintenance .mt-xl  { margin-top: 48px; }