@charset "utf-8";
/* =========================================================
 全ページ共通（v02）
 追従CTA（PC=右下固定2段 / SP=下部固定3ボタンバー）
 色は :root 変数で管理。URL・電話番号は template-parts/cta-v02.php 側
========================================================= */
:root {
  --c2-accent:      #eccd80; /* 来場予約ボタン */
  --c2-accent-deep: #b39139; /* 来場予約の矢印四角 */
  --c2-sub:         #e9e4dd; /* 資料請求ボタン */
  --c2-sub-deep:    #988e86; /* 資料請求の矢印四角 */
  --c2-text:        #5e5e5e; /* ボタン文字 */
  --c2-on-deep:     #ffffff; /* 矢印 */
}

/* PCの「TOPへ戻る」は追従CTA(右下)と重なるため非表示にする。
 ▼復帰させる場合はこのブロックごと削除するだけでよい（マークアップは footer.php に残置）
 ※SPは #return_top がテーマCSSで50px持ち上がり固定バーと重ならないため対象外 */
@media screen and (min-width: 768px) {
  #return_top { display: none; }
}

/* PC/TB は最初から表示・SPのみスクロールで出す（js-cvArea にテーマ既存の common.js が .active を付与） */
.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: center;
  gap: 24px;
  width: 318px;
  height: 80px;
  padding-right: 16px;
  box-sizing: border-box;
  color: var(--c2-text);
  text-decoration: none;
  transition: opacity .4s ease;
}
.ctaV02__btn:hover { opacity: .75; }
.ctaV02__btn,
.ctaV02__btn:visited,
.ctaV02__btn:hover { color: var(--c2-text); }
.ctaV02__btn--visit { background: var(--c2-accent); }
.ctaV02__btn--dl { background: var(--c2-sub); }
.ctaV02__thumb { width: 101px; height: 80px; flex-shrink: 0; overflow: hidden; }
.ctaV02__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.ctaV02__body { width: 132px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; }
.ctaV02__note { display: block; font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; font-size: 11px; font-weight: 500; line-height: 1.6; letter-spacing: 0; }
.ctaV02__label { display: block; margin-top: 0; font-family: "Shippori Mincho B1", "Yu Mincho", serif; font-size: 18px; font-weight: 500; line-height: 1.6; letter-spacing: 1.28px; }
.ctaV02__arrow { flex-shrink: 0; width: 21px; height: 22px; display: grid; place-items: center; padding-bottom: .15em; box-sizing: border-box; color: var(--c2-on-deep); font-size: 13px; letter-spacing: .05em; }
.ctaV02__btn--visit .ctaV02__arrow { background: var(--c2-accent-deep); }
.ctaV02__btn--dl .ctaV02__arrow { background: var(--c2-sub-deep); }

.ctaV02__sp { display: none; }
@media screen and (max-width: 767px) {
  .ctaV02__pc { display: none; }
  /* SP: 画面下の浮きバー（左右下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-sub);
    color: var(--c2-text);
    font-family: "Shippori Mincho B1", "Yu Mincho", serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-decoration: none;
  }
  .ctaV02__spBtn:visited,
  .ctaV02__spBtn:hover { color: var(--c2-text); }
  .ctaV02__spBtn--visit { background: var(--c2-accent); }
  .ctaV02__spBtn img { width: 19px; height: 19px; margin: 0; }
  /* 電話ボタンのみ「電話相談する＋（通話料無料）」の2段 */
  .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; }
  /* 電話番号リンクはテーマが .mobile_device a[href^="tel:"] に下線を強制するため打ち消す */
  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; }
  /* 旧固定フッターバー用の #container 下余白（style.css・750px以下で 50px）は上の余白と二重になるため外す */
  body.show_footer_bar #container { padding-bottom: 0; }
}

/* ---------------------------------------------------------
 資料請求／来場予約（footer.php の section.pm-cta）＝全ページ共通でプレミアムデザインの見た目
 style.css の旧スタイル（白カード・黄色ボタン）を #footer 付きの詳細度で上書きする。
 来場予約のリンク先だけ footer.php で出し分け（プレミアムTOP＝プレミアム来場フォーム）
--------------------------------------------------------- */
#footer .pm-cta {
  padding: clamp(64px, 8.334vw, 120px) 4.444%;
  background: url(../images/premium/cta_bg_01.jpg) center top / cover no-repeat;
}
#footer .pm-cta::before { background: rgba(91, 65, 48, .6); mix-blend-mode: multiply; }
#footer .pm-cta__cards { gap: 24px; max-width: 1312px; }
#footer .pm-cta__card { box-sizing: border-box; padding: clamp(22px, 4.45vw, 64px); background: #f3efe9; color: var(--c2-text); }
#footer .pm-cta__head { gap: 24px; }
/* 英字SVGは字形の実寸（17px）。デザインの文字枠 26.4px に合わせて上下に振り分ける */
#footer .pm-cta__title .pm-cta__en { width: auto; height: 17px; margin: 4.7px 0; }
/* 英字の下余白 4.7 と間隔 8 は縦の余白の相殺で大きい方しか残らないため、合算した値を和文側に持たせる */
#footer .pm-cta__title .pm-cta__ja { margin-top: 12.7px; font-size: clamp(1.75rem, 2.917vw, 2.625rem); line-height: 1.8; letter-spacing: .1em; color: var(--c2-text); white-space: nowrap; }
#footer .pm-cta .pm-cta__text { color: var(--c2-text); }
#footer .pm-cta .pm-btn,
#footer .pm-cta .pm-btn:visited,
#footer .pm-cta .pm-btn:hover { background: #988e86; color: #fff; }
#footer .pm-cta .pm-btn--gold,
#footer .pm-cta .pm-btn--gold:visited,
#footer .pm-cta .pm-btn--gold:hover { background: #eccd80; color: var(--c2-text); }
#footer .pm-cta__card .pm-btn { height: clamp(52px, 5.07vw, 73px); padding: 0 24px; font-size: clamp(16px, 1.389vw, 20px); font-weight: 500; line-height: 29px; letter-spacing: .1em; }
#footer .pm-cta .pm-btn::after { content: ""; width: 30px; height: 30px; padding: 0; background: url(../images/premium/cta_arrow_dl.svg) center / 30px 30px no-repeat; }
#footer .pm-cta .pm-btn--gold::after { background-image: url(../images/premium/cta_arrow_visit.svg); }
/* PC（1202〜）はデザインの固定寸法。TB（768〜1201）は ohori3 と同じくサムネ 41% の伸縮 */
@media screen and (min-width: 1202px) {
  #footer .pm-cta__thumb { width: 212px; }
  #footer .pm-cta__thumb img { height: 140px; object-fit: cover; }
}
@media screen and (max-width: 767px) {
  #footer .pm-cta { padding: 60px 24px; }
  #footer .pm-cta__card { padding: 24px; }
  #footer .pm-cta__title .pm-cta__en { height: 15.5px; margin: 0; }
  #footer .pm-cta__title .pm-cta__ja { margin-top: 12px; font-size: 32px; line-height: 1.8; letter-spacing: .1em; }
}