/* ============================================================
   common.css — デザイントークン・共通スタイル
   ⚠️ カラー・フォントを変更する場合はこのファイルの :root のみ触ること
   ============================================================ */

/* ── Google Fonts 読み込み注意 ────────────────────────────────
   WordPress実装時は wp_enqueue_style() で登録すること（<link>直書き禁止）
   ──────────────────────────────────────────────────────────── */

/* ── デザイントークン ───────────────────────────────────────── */
:root {
  /* カラー */
  --color-main:            #003360;
  --color-sub:             #C30D23;
  --color-bg:              #FAF7ED;
  --color-text:            #000000;
  --color-white:           #ffffff;
  --color-header-scroll:   rgba(255, 255, 255, 0.88);

  /* ボタン */
  /* TODO: ボタン色はFigmaで確定後に更新 */
  --color-btn-primary:     var(--color-sub);
  --color-btn-secondary:   var(--color-white);

  /* フォント */
  --font-jp-serif:         'Noto Serif JP', serif;
  --font-jp-mincho:        'Shippori Mincho', serif;
  --font-jp-sans:          'Noto Sans JP', sans-serif;

  /* フォントサイズ */
  --fz-nav:                16px;
  --fz-tel:                32px;
  --fz-body:               16px;

  /* レイアウト */
  --max-width:             1920px;
  --inner-width:           1280px;
  --header-h:              100px;
  --header-h-sp:           60px;

  /* トランジション */
  --transition-base:       0.3s ease;
}

/* ── リセット・ベース ───────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--fz-body);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-jp-sans);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

/* ── 共通レイアウト ─────────────────────────────────────────── */

/* 【変更禁止】section-wrap・inner はレイアウトの基盤です */
.section-wrap {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
}

.inner {
  width: 100%;
  max-width: var(--inner-width);
  margin: 0 auto;
  padding: 0 40px;
}

/* ── 共通アニメーション ─────────────────────────────────────── */
/* 【変更禁止】animation.js と連動しています */
.anim-fadeup {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.anim-fadeup.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── SP専用改行 ─────────────────────────────────────────────── */
.fk-br-sp { display: none; }

@media (max-width: 767px) {
  .fk-br-sp { display: inline; }
}

/* ── レスポンシブ（Tablet: 〜1023px） ──────────────────────── */
@media (max-width: 1023px) {
  .inner {
    padding: 0 24px;
  }
}

/* ── レスポンシブ（SP: 〜767px） ────────────────────────────── */
@media (max-width: 767px) {
  .inner {
    padding: 0 16px;
  }
}

/* ── PAGE TOPボタン ─────────────────────────────────────────── */
.fk-pagetop {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 64px;
  height: 64px;
  background-color: var(--color-main);
  color: var(--color-white);
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease, background-color var(--transition-base);
}

.fk-pagetop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fk-pagetop:hover {
  background-color: var(--color-sub);
}

.fk-pagetop .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
}

.fk-pagetop__label {
  font-family: var(--font-jp-serif);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
}

/* ── PAGE TOP：レスポンシブ（SP: 〜767px） ──────────────────── */
@media (max-width: 767px) {
  .fk-pagetop {
    right: 16px;
    bottom: 76px; /* フローティングバナー分上にずらす */
    width: 52px;
    height: 52px;
  }
}

/* ── SP フローティング予約バナー ────────────────────────────── */
/* PCは非表示 */
.fk-floating-banner {
  display: none;
}

@media (max-width: 767px) {
  .fk-floating-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 56px;
    background-color: var(--color-sub);
    color: var(--color-white);
    font-family: var(--font-jp-serif);
    text-decoration: none;
    z-index: 800; /* pagetop(900)より下 */
    transition: background-color var(--transition-base);
  }

  .fk-floating-banner:hover {
    background-color: #a00b1d;
  }

  .fk-floating-banner__sub {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.05em;
    opacity: 0.85;
  }

  .fk-floating-banner__main {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.08em;
  }

  .fk-floating-banner .material-symbols-outlined {
    font-size: 18px;
  }

  /* バナー分の余白をフッターに追加（コンテンツが隠れないように） */
  .fk-footer {
    padding-bottom: 56px;
  }
}

/* ── 非表示状態（現場OKが出たら --hidden クラスを外すだけでON） ── */
.fk-floating-banner--hidden {
  display: none !important;
}

@media (max-width: 767px) {
  .fk-floating-banner--hidden {
    display: none !important;
  }
}

/* ── 準備中状態 ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .fk-floating-banner--coming {
    background-color: #999;
    pointer-events: none;
    cursor: default;
  }

  .fk-floating-banner--coming:hover {
    background-color: #999;
  }

  .fk-floating-banner__coming-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 1px 5px;
    line-height: 1.6;
    display: inline-block;
  }
}

/* ── お知らせモーダル ────────────────────────────────────────── */
.fk-news-modal {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}

.fk-news-modal.is-open {
  display: flex;
}

.fk-news-modal__inner {
  background-color: var(--color-bg);
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  margin: auto;
}

.fk-news-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--color-main);
  border: none;
  color: var(--color-white);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
  transition: background-color var(--transition-base);
}

.fk-news-modal__close:hover {
  background-color: var(--color-sub);
}

.fk-news-modal__close .material-symbols-outlined {
  font-size: 20px;
}

.fk-news-modal__img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-main);
}

.fk-news-modal__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.fk-news-modal__content {
  padding: 32px 40px 40px;
}

.fk-news-modal__date {
  font-family: var(--font-jp-serif);
  font-size: 13px;
  color: #888;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 8px;
}

.fk-news-modal__title {
  font-family: 'Shippori Mincho', serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.05em;
  line-height: 1.5;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.fk-news-modal__body {
  font-family: var(--font-jp-serif);
  font-size: 15px;
  color: var(--color-text);
  line-height: 2;
  letter-spacing: 0.03em;
}

.fk-news-modal__body p {
  margin-bottom: 1em;
}

.fk-news-modal__body img {
  max-width: 100%;
  height: auto;
  margin: 16px 0;
}

/* ── お知らせモーダル：レスポンシブ（SP: 〜767px） ─────────── */
@media (max-width: 767px) {
  .fk-news-modal {
    padding: 0;
    align-items: flex-end;
  }

  .fk-news-modal__inner {
    max-height: 92vh;
    max-width: 100%;
  }

  .fk-news-modal__content {
    padding: 24px 16px 32px;
  }

  .fk-news-modal__title {
    font-size: 20px;
  }
}