/*==============================================================================
  フッター共通スタイル
  対象: 予約サイト全ページ（メンズ）
  ファイル: mens/common/css/footer-common.css

  構成:
    1. ページトップボタン (#pagetop / .pagetop)
       固定配置版と、フッター上部に置くインライン版の 2 パターンがある。

    2. フッターエリア (#fluid_footerVisual)
       ダークチャコール背景のテキストリンク＋著作権表示。
       メインナビ（上段）とサブナビ（下段・小さく）の 2 段構成。

  依存:
    - common/css/tokens.css（--ka-footer-bg, --ka-footer-text,
        --ka-footer-text-bright, --ka-footer-border,
        --reservation-content-width）

  ⚠️ 変更時の注意:
    common/css/layout/footer-common.css と内容が完全に同一。
    修正する場合は必ず両ファイルに同じ変更を加えること。
    （Phase 2 でライブラリ一本化予定）
==============================================================================*/


/* ─── 1. ページトップボタン ─────────────────────────────────────────────── */

/* 固定版: 画面右下に常時表示 */
#pagetop {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

/* インライン版: フッター直上・右寄せ */
.pagetop {
  display: none;
}

/* ページトップリンク */
.pagetop a {
  padding: 10px 20px;
  font-size: 12px;
  letter-spacing: 0.08em;
  background: transparent;
  color: var(--ka-footer-text-bright);
  display: inline-block;
  text-align: center;
  text-decoration: none;
  transition: color 0.2s;
}

.pagetop a:hover {
  color: rgba(255, 255, 255, 0.65);
}


/* ─── 2. フッターエリア ─────────────────────────────────────────────────── */

/* フッター全体: ダークチャコール背景 */
#fluid_footerVisual {
  background: var(--ka-footer-bg);
  padding: 40px 20px 44px;
  text-align: center;
}

/* フッターリンクメニュー全体 */
#fluid_footerVisual #footer_menu {
  width: min(960px, 100%);
  margin: 0 auto 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ─── メインナビ（上段）: ウェブ予約トップ・ログイン・マイページ・ヘルプ */
.footer-nav-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
}

.footer-nav-main a,
.footer-nav-main span a {
  display: inline-block;
  color: var(--ka-footer-text-bright);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.12em;
  padding: 5px 18px;
  border-right: 1px solid var(--ka-footer-border);
  transition: color 0.2s;
  white-space: nowrap;
}

.footer-nav-main > *:last-child a,
.footer-nav-main > a:last-child {
  border-right: none;
}

.footer-nav-main a:hover,
.footer-nav-main span a:hover {
  color: rgba(255, 255, 255, 0.6);
}

/* ─── 区切り線 */
.footer-divider {
  width: 32px;
  height: 1px;
  background: var(--ka-footer-border);
  margin: 20px auto;
}

/* ─── サブナビ（下段）: 利用規約・PP・退会 */
.footer-nav-sub {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.footer-nav-sub a {
  display: inline-block;
  color: var(--ka-footer-text);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 4px 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  transition: color 0.2s;
  white-space: nowrap;
}

.footer-nav-sub a:last-child {
  border-right: none;
}

.footer-nav-sub a:hover {
  color: var(--ka-footer-text-bright);
}

/* 著作権表示 */
#fluid_footerVisual .copyright {
  text-align: center;
  padding: 20px 0 0;
  margin-bottom: 0;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ka-footer-text);
}


/* ─── レスポンシブ（スマホ 480px 以下） ─────────────────────────────────── */

@media only screen and (max-width: 480px) {

  .pagetop {
    padding: 0 12px;
  }

  #fluid_footerVisual {
    padding: 32px 14px 36px;
  }

  #fluid_footerVisual #footer_menu {
    margin-bottom: 20px;
  }

  .footer-nav-main a,
  .footer-nav-main span a {
    font-size: 11px;
    padding: 6px 12px;
  }

  .footer-nav-sub a {
    font-size: 10px;
    padding: 4px 10px;
  }

}