@charset "UTF-8";
/* =========================================================
   common_v02.css
   共通コンポーネント層 v02（他サイトへ流用可）
   - 色は :root の変数のみ参照。流用時はこのブロックだけ差し替える
   - モーション状態クラスは premium-motion.js（data属性）と対
========================================================= */
:root {
  --c2-primary:   #1e383b; /* 基調色（深緑） */
  --c2-secondary: #0d1c1e; /* 濃色（節の暗背景） */
  --c2-panel:     #2d484b; /* パネル（明るめ緑） */
  --c2-tile:      #253e41; /* タイル */
  --c2-line:      #40585a; /* 罫線 */
  --c2-accent:    #eccd80; /* アクセント（ゴールド） */
  --c2-accent-deep: #b39139; /* アクセント濃（矢印四角等） */
  --c2-base:      #f9f5ea; /* ベース（クリーム） */
  --c2-text-on-dark: #f9f5ea;
  --c2-text-on-light: #1e383b;
}

/* ---------------------------------------------------------
   モーション基盤（premium-motion.js と対）
--------------------------------------------------------- */
/* 慣性スクロール動作用（scroll-behavior 競合や高さ固定があると
   スクロール位置が引き戻される） */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
html:has(body.pg-premium) { scroll-behavior: auto !important; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
/* 初期状態(非表示)は .js-motion 配下のみに限定する。JS不達時に要素が opacity:0 のまま
   消えるのを防ぐため（付与は header.php の同期スクリプト・失敗時は2.5秒で自動解除） */
[data-fade] {
  transition: opacity 1.1s cubic-bezier(.25,.46,.45,.94), transform 1.1s cubic-bezier(.25,.46,.45,.94);
}
.js-motion [data-fade] {
  opacity: 0;
  transform: translateY(28px);
}
/* .is-inview は上と同詳細度(0,2,0)＝後勝ちで表示側が勝つ */
[data-fade].is-inview {
  opacity: 1;
  transform: none;
}

[data-fv-zoom] { overflow: hidden; }
[data-fv-zoom] img,
[data-fv-zoom] .fvZoomTarget {
  transform: scale(1.08);
  transition: transform 7s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}
[data-fv-zoom].is-loaded img,
[data-fv-zoom].is-loaded .fvZoomTarget {
  transform: scale(1);
}

[data-parallax] {
  position: relative;
  overflow: hidden;
}
[data-parallax] [data-parallax-img] {
  position: absolute;
  left: 0;
  top: -20%;
  width: 100%;
  height: 140%;
  object-fit: cover;
  will-change: transform;
}

/* 画像のマスクリベール（左→右に開く・data-fade と併用しは .pm-reveal を付与） */
.pm-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.3s cubic-bezier(.77, 0, .18, 1);
}
.pm-reveal img {
  transform: scale(1.12);
  transition: transform 1.8s cubic-bezier(.25, .46, .45, .94);
  will-change: transform;
}
.pm-reveal.is-inview {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}
.pm-reveal.is-inview img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .pm-reveal { clip-path: none; transition: none; }
  .pm-reveal img { transform: none; transition: none; }
}
/* SPは画面が短く、スクロール中に開ききる前に次のセクションへ抜けてしまうため
   PCより短くする（発火自体も premium-motion.js 側で早める）。
   イージングは ease-out（cubic-bezier(.22,1,.36,1) = easeOutQuint）＝
   序盤で一気に開いて終盤は緩やかに減速。等速に近いと動きがきつく見えるため */
@media screen and (max-width: 767px) {
  .pm-reveal {
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(.22, 1, .36, 1);
  }
  .pm-reveal img {
    transition-duration: 1.3s;
    transition-timing-function: cubic-bezier(.22, 1, .36, 1);
  }
}

/* ホバーでゆっくりズームイン（JS不要） */
.hoverZoom { display: block; overflow: hidden; }
.hoverZoom img {
  transition: transform 1.4s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}
a:hover .hoverZoom img,
.hoverZoom:hover img {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  /* .js-motion [data-fade](0,2,0) に勝たせるため同詳細度で宣言（素の [data-fade] だと負ける） */
  .js-motion [data-fade] { opacity: 1; transform: none; transition: none; }
  [data-fv-zoom] img, [data-fv-zoom] .fvZoomTarget { transform: none; transition: none; }
  .hoverZoom img { transition: none; }
}

/* ---------------------------------------------------------
   追従CTA v02（PC=右下固定2段 / SP=下部固定3ボタンバー）
   他サイト展開時: 色は :root 変数・URL/電話は cta-v02.php 側
--------------------------------------------------------- */
/* PCの「TOPへ戻る」は追従CTA(右下)と重なるため全ページ非表示にする (2026-07-17)。
   ▼復帰させる場合はこのブロックごと削除するだけでよい（マークアップは footer.php に残置）
   ※SPは #return_top がテーマCSSで50px持ち上がり固定バーと重ならないため対象外
   ※プレミアム配下は premium.css 側で別途 全幅で非表示にしている */
@media screen and (min-width: 768px) {
  #return_top { display: none; }
}

/* PC/TB は最初から表示・SPのみスクロールで出す (2026-07-17 指示)
   ※旧CTA(.cvArea)は「スクロールで出る」のではなく right:0 で最初から見えており、
     .active で right:62px へスライドするだけだった（本番実測で確認）。
     common.js の .active 付与＝表示切替、と読み違えていたため一旦PCも隠していた */
.ctaV02__sp {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease, visibility .5s;
}
.ctaV02.active .ctaV02__sp {
  opacity: 1;
  visibility: visible;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .ctaV02__sp { transition: none; }
}
.ctaV02__pc {
  position: fixed;
  right: 22px;
  bottom: 28px;
  z-index: 8900;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ctaV02__btn {
  display: flex;
  align-items: stretch;
  width: 318px;
  min-height: 80px;
  text-decoration: none;
  transition: opacity .4s ease;
}
.ctaV02__btn:hover { opacity: .75; }
.ctaV02__btn--visit { background: var(--c2-accent); color: var(--c2-text-on-light); }
.ctaV02__btn--dl { background: var(--c2-base); color: var(--c2-text-on-light); }
.ctaV02__btn:hover { color: var(--c2-text-on-light); }
.ctaV02__thumb { width: 104px; flex-shrink: 0; }
.ctaV02__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ctaV02__body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 6px 0 16px; }
.ctaV02__note { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0; }
.ctaV02__label { display: block; margin-top: 8px; font-family: "Shippori Mincho B1", "Yu Mincho", serif; font-size: 18px; font-weight: 600; letter-spacing: .07em; }
.ctaV02__arrow { align-self: center; flex-shrink: 0; margin-right: 8px; width: 24px; height: 24px; display: grid; place-items: center; padding-bottom: .15em; box-sizing: border-box; letter-spacing: .05em; }
.ctaV02__btn--visit .ctaV02__arrow { background: var(--c2-accent-deep); color: var(--c2-base); }
.ctaV02__btn--dl .ctaV02__arrow { background: var(--c2-primary); color: var(--c2-base); }
.ctaV02__sp { display: none; }
@media screen and (max-width: 767px) {
  .ctaV02__pc { display: none; }
  /* SP: 359x40の浮きバー (Figma実測: 左右8px・ボタン間4px・文字11px・アイコン19px) */
  .ctaV02__sp {
    display: flex;
    gap: 4px;
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 8900;
  }
  .ctaV02__spBtn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 40px;
    padding: 0 2px;
    background: var(--c2-base);
    color: var(--c2-text-on-light);
    font-family: "Shippori Mincho B1", "Yu Mincho", serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-decoration: none;
  }
  .ctaV02__spBtn--visit { background: var(--c2-accent); }
  .ctaV02__spBtn img { width: 19px; height: 19px; }
  /* 電話ボタンのみ「電話相談する＋（通話料無料）」の2段（figma実測: 本文fs11・補足fs8 Noto Medium） */
  .ctaV02__spBtn--tel .ctaV02__spTel { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.25; }
  .ctaV02__spFree { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; font-size: 8px; font-weight: 500; letter-spacing: 0; }
  /* figma のSP固定バーはアイコン＋文字のみ（矢印四角は無い）。
     ノードダンプに出る arrow は不可視ノード＝描画されない */
  /* 電話番号リンクはテーマが .mobile_device a[href^="tel:"] に
     text-decoration:underline !important を当てるため打ち消す */
  body.mobile_device .ctaV02__sp a[href^="tel:"] { text-decoration: none !important; }
  /* 固定バーぶんの余白。テーマの body.show_footer_bar{padding-bottom:0} に
     負けるため html 前置で詳細度を上げる */
  body,
  html body.show_footer_bar { padding-bottom: 56px; }
}

/* ---------------------------------------------------------
   COMING SOON タイル（段階公開用・文言SVGを中央配置）
   透かし画像は .tileComingSoon__bg に img で入れる
--------------------------------------------------------- */
.tileComingSoon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c2-tile);
  overflow: hidden;
}
.tileComingSoon__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .08;
  pointer-events: none;
}
.tileComingSoon__label {
  position: relative;
  width: 46%;
  height: auto;
}

/* =========================================================
   共有: 資料請求/来場予約 CTA + ボタン（全ページ読込）
   通常ページ・premiumログイン前ページのページ内CTAでも使うため
   premium.css(premium配下のみ)でなくここに基本スタイルを置く。
   color は .post_content 非依存で持たせる（footer 内でも効くように）。
   premium 配下(.post_content 内)は premium.css の .post_content 前置が優先
========================================================= */
.pm-mincho { font-family: "Shippori Mincho B1", "Yu Mincho", serif; font-weight: 500; }
/* 本文書体を明示。premium配下では body.pg-premium .post_content から Noto を継承していたが、
   通常ページ・ログイン前ページにはその指定が無く Arial 系に落ちるため CTA 側で固定する
   （見出し/ボタンは .pm-mincho / .pm-btn が Shippori Mincho B1 を直接指定して上書き） */
.pm-cta { position: relative; padding: clamp(56px, 8.34vw, 120px) 4.5%; font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; }
.pm-cta::before { content: ""; position: absolute; inset: 0; background: rgba(18, 38, 42, .18); z-index: 1; }
.pm-cta__cards { position: relative; z-index: 2; display: flex; gap: clamp(14px, 1.75vw, 25px); max-width: 1380px; margin: 0 auto; }
.pm-cta__card { width: 50%; background: var(--c2-base); color: var(--c2-text-on-light); padding: clamp(22px, 4.45vw, 64px); display: flex; flex-direction: column; }
.pm-cta__head { display: flex; justify-content: space-between; align-items: center; gap: 5%; }
.pm-cta__title .pm-cta__en { height: clamp(.8125rem, 1.2vw, 1.0625rem); width: auto; display: block; }
.pm-cta__title .pm-cta__ja { display: block; margin-top: .6em; font-family: "Shippori Mincho B1", "Yu Mincho", serif; font-size: clamp(1.75rem, 2.917vw, 2.625rem); font-weight: 400; letter-spacing: .1em; line-height: 1.8; }
.pm-cta__thumb { width: 41%; flex-shrink: 0; }
.pm-cta__thumb img { width: 100%; height: auto; display: block; }
.pm-cta__text { margin-top: 1.5em; font-size: clamp(.875rem, 1.12vw, 1rem); font-weight: 500; letter-spacing: 0; line-height: 2.2; }
.pm-btn { display: flex; justify-content: space-between; align-items: center; gap: 1em; margin-top: auto; padding: .5em 20px .5em 1.7em; background: var(--c2-panel); color: var(--c2-base); font-family: "Shippori Mincho B1", "Yu Mincho", serif; font-size: clamp(1rem, 1.25vw, 1.125rem); font-weight: 600; letter-spacing: .1em; line-height: 1.45; text-decoration: none; transition: opacity .4s ease; box-sizing: border-box; }
.pm-btn:visited, .pm-btn:hover { color: var(--c2-base); }
.pm-btn:hover { opacity: .75; }
.pm-btn::after { content: "\203A\203A"; flex-shrink: 0; width: 31px; height: 31px; display: grid; place-items: center; padding-bottom: .15em; box-sizing: border-box; background: var(--c2-secondary); color: var(--c2-base); letter-spacing: .05em; font-family: "Inter UI", sans-serif; font-size: .8125rem; }
.pm-cta__card .pm-btn { margin-top: auto; height: clamp(52px, 5vw, 72px); padding-top: 0; padding-bottom: 0; font-size: 1.25rem; font-weight: 500; }
.pm-btn--gold { background: var(--c2-accent); color: var(--c2-text-on-light); }
.pm-btn--gold:visited, .pm-btn--gold:hover { color: var(--c2-text-on-light); }
.pm-btn--gold::after { background: var(--c2-accent-deep); color: var(--c2-base); }
/* テーマ .post_content a { color:#3f5168 } に負けないよう CTA 内は specificity(0,2,0) を確保。
   premiumログイン前ページは premium.css 非ロードのため、ここで色を担保する必要がある */
.pm-cta .pm-btn, .pm-cta .pm-btn:visited, .pm-cta .pm-btn:hover { color: var(--c2-base); }
.pm-cta .pm-btn--gold, .pm-cta .pm-btn--gold:visited, .pm-cta .pm-btn--gold:hover { color: var(--c2-text-on-light); }
@media screen and (max-width: 767px) {
  .pm-cta { padding: 60px 24px; }
  .pm-cta__cards { flex-direction: column; gap: 24px; }
  .pm-cta__card { width: 100%; padding: 24px; box-sizing: border-box; }
  .pm-cta__head { flex-direction: column-reverse; gap: 0; align-items: stretch; }
  .pm-cta__thumb { width: 100%; margin-bottom: 30px; }
  .pm-cta__title .pm-cta__en { height: 15.5px; }
  .pm-cta__title .pm-cta__ja { font-size: 32px; letter-spacing: .1em; margin-top: 12px; line-height: 1.8; }
  .pm-cta__text { margin-top: 14px; line-height: 2.2; letter-spacing: 0; }
  .pm-cta__card .pm-btn { height: 73px; margin-top: 25px; font-size: 20px; font-weight: 500; }
  .pm-btn::after { width: 30px; height: 30px; }
}
/* premiumログイン前ページは .post_content 内 かつ premium.css 非ロード。
   テーマ .post_content p{line-height:2.4;margin:0 0 2em} に負けないよう CTA 内を specificity(0,2,0) で防御
   （.post_content 外の通常ページでも同値で無害）。背景画像は [data-parallax] [data-parallax-img] が
   0,2,0 でテーマ .post_content img{height:auto} に勝つため追加防御は不要 */
.pm-cta .pm-cta__text { margin: 24px 0 32px; line-height: 2.2; }
@media screen and (max-width: 767px) {
  .pm-cta .pm-cta__text { margin: 14px 0 0; }
}