@charset "UTF-8";

/*
 * 個人会員サイト（MY AIRPORT CLUB WEB）共通レイアウト用スタイル
 * ヘッダー・フッターの浮遊カプセル型 UI とレスポンシブ（REQ-140）・印刷（REQ-142）対応。
 *
 * 配色は WordPress 側（styles/site.css / club.css）のデザイントークン（--primary, --ink など）を参照する。
 * カラーテーマ（<html data-theme="gold|sushi|sky">）は WordPress 側の CSS がトークンを差し替えることで
 * こちらにも反映される。WordPress 側 CSS を読み込んでいないときは var() の既定値で表示する。redmine #19069
 */

:root {
    --club-bg: var(--page-bg-mid, #f4f6fb);
    --club-surface: var(--page-bg, #ffffff);
    --club-text: var(--ink, #1b2330);
    --club-text-muted: var(--muted, #5b6b80);
    --club-primary: var(--primary, #1667e0);
    --club-primary-hover: var(--primary-hover, #0f56c2);
    --club-border: var(--line, #e4e9f2);
    /* 入力欄の枠。白地との明暗比を 3:1 以上にする（club-register.css の .club-register-input） */
    --club-input-border: #6b7787;
    --club-chip: var(--chip, rgba(22, 103, 224, .10));
    --club-shadow: var(--sd-md, 0 6px 20px rgba(20, 40, 80, .10));
    --club-radius: 999px;
    --club-header-height: 76px;
}

.club-body {
    margin: 0;
    background: var(--club-bg);
    color: var(--club-text);
    font-family: var(--tk-font, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif);
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

/*
 * レイアウト全体のコンテナ。
 * 縦方向の flex にして main を伸ばすことで、コンテンツが少ない画面でも
 * フッターが画面最下部まで押し下げられる（sticky footer）。
 */
.club-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.club-header a,
.club-footer a,
.club-drawer a {
    color: inherit;
    text-decoration: none;
}

.club-header ul,
.club-footer ul,
.club-drawer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ドロワー表示中は背面のスクロールを止める（club.js から body に付与） */
body.club-scroll-locked {
    overflow: hidden;
}

/* キーボード操作時のみ表示するスキップリンク */
.club-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 8px 16px;
    background: var(--club-primary);
    color: #fff;
    border-radius: 0 0 8px 0;
}

.club-skip-link:focus {
    left: 0;
}

.club-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* 共通のカプセル（角丸＋影の浮遊パーツ） */
.club-capsule {
    display: flex;
    align-items: center;
    background: var(--club-surface);
    border: 1px solid var(--club-border);
    border-radius: var(--club-radius);
    box-shadow: var(--club-shadow);
}

/* ---------------- ヘッダー ---------------- */

.club-header {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 12px 16px;
}

/*
 * 個人会員トップ（body.tk-front）: 公開サイトのトップと同じく、ヘッダーをヒーローの上に重ねる。
 * 数値は WordPress 側 styles/site.css の body.tk-front .tk-siteheader（上余白 37px、1023px 以下は 14px）に合わせ、
 * ヒーロー側の上余白（home.css .tk-hero__inner の 104px）の中にヘッダーが収まるようにする
 */
body.tk-front .club-layout {
    position: relative;
}

/* 簡易ヘッダー（ログイン画面など。body.club-auth）: 主カプセルはロゴだけなので幅を内容に合わせる */
body.club-auth .club-header__main {
    flex: 0 1 auto;
    padding-right: 24px;
}

body.club-auth .club-header__inner {
    justify-content: space-between;
}

body.tk-front .club-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    padding-top: 37px;
    padding-bottom: 0;
}

.club-header__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 1280px;
    margin: 0 auto;
}

/*
 * 主カプセルの余白とナビの間隔（下の .club-gnav__list）は、コンテンツの最大幅 1280px（Language・テーマ切替のラベルが
 * 出る 1313px 以上）でロゴ＋ナビ 3 項目＋会員表示（ユーザーA7K2 さん）が 1 行に収まる値にしている。
 * 以前の gap 24px・左 24px・ナビ 28px では最大幅でもナビが 2 行に折り返していた。redmine #19643
 */
.club-header__main {
    flex: 1 1 auto;
    min-width: 0;
    gap: 16px;
    padding: 10px 12px 10px 20px;
}

.club-header__sub {
    flex: 0 0 auto;
    gap: 4px;
    padding: 8px 12px;
}

.club-logo {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    line-height: 1.25;
}

.club-logo__ja {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .02em;
}

.club-logo__en {
    font-size: 11px;
    color: var(--club-primary);
}

.club-gnav {
    flex: 1 1 auto;
    min-width: 0;
}

/* 間隔は公開サイトのナビ（styles/site.css .tk-gnav__list の 22px）と同じ。上の .club-header__main のコメントを参照 */
.club-gnav__list {
    display: flex;
    justify-content: center;
    gap: 22px;
}

/* 公開サイトのナビ（styles/site.css .tk-gnav__link: gap 8px・太字・画像 32×30px）と同じ見た目にする */
.club-gnav__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.club-gnav__link:hover,
.club-gnav__link:focus-visible {
    color: var(--club-primary);
    border-bottom-color: var(--club-primary);
}

.club-gnav__icon {
    font-size: 15px;
}

/* WordPress 側から来る画像アイコン（image）。公開サイトの .tk-gnav__link img と同じ 32×30px（1279px 以下は 26×24px） */
.club-gnav__img {
    width: 32px;
    height: 30px;
    object-fit: contain;
    flex: 0 0 auto;
}

@media (max-width: 1279px) {
    .club-gnav__img {
        width: 26px;
        height: 24px;
    }
}

.club-account {
    flex: 0 0 auto;
}

.club-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 128px;
    padding: 10px 24px;
    border: 0;
    border-radius: var(--club-radius);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.club-button--primary {
    background: var(--club-primary);
    color: #fff;
}

/*
 * リンク型のボタン（ヘッダーの「ログイン」など）は .club-header a / .club-footer a / .club-drawer a の
 * color: inherit（特異度 0,1,1）に負けて文字が本文色になるため、要素名を付けて同じ特異度で後勝ちにする（redmine #19500）
 */
a.club-button--primary {
    color: #fff;
}

.club-button--primary:hover,
.club-button--primary:focus-visible {
    filter: brightness(1.08);
}

.club-button--primary:disabled {
    background: var(--club-border);
    color: var(--club-text-muted);
}

.club-account__user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    font-size: 14px;
    font-weight: 600;
}

.club-account__name {
    white-space: nowrap;
}

/*
 * ニックネームが長い（上限 20 文字）と、会員表示が広がった分だけグローバルナビ（翻訳後の長い文言のために
 * flex-wrap: wrap）が折り返して PC 幅でも崩れるため、名前の部分だけ幅を抑えて「…」で省略する（「さん」は残す）。
 * 上限の 7em は、自動で付くニックネーム（例: ユーザーA7K2。半角を含む 8 文字で約 6.5em）が省略されず、
 * ラベルが出る 1313px 以上と、ラベルが消える 1111〜1312px のどちらでもナビが折り返さない大きさ。
 * 全文は DOM に残るので読み上げは変わらず、リンクの title でマウスオーバー時にも出す。redmine #19643
 */
.club-account__nickname {
    display: inline-block;
    max-width: 7em;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.club-account__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--club-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.club-icon-button,
.club-hamburger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    border-radius: var(--club-radius);
    color: inherit;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.club-icon-button:hover,
.club-icon-button:focus-visible {
    background: var(--club-chip);
    color: var(--club-primary);
}

/* Language は公開サイト（.tk-gnav__link--lang）と同じくテーマ色の文字 */
.club-icon-button--lang {
    color: var(--club-primary);
}

/* テーマ切替の線画アイコン。公開サイト styles/club.css の .tk-gnav__link--theme svg と同じ */
.club-icon-button__svg {
    width: 32px;
    height: 30px;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--club-primary);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.club-icon-button__svg .tk-icon-fill {
    fill: var(--club-primary);
    stroke: none;
}

@media (max-width: 1279px) {
    .club-icon-button__svg {
        width: 26px;
        height: 24px;
    }
}

/*
 * ハンバーガー。公開サイトの .tk-gnav__burger と同じ丸ボタン（テーマ色の背景に白の 3 本線）。
 * 3 本線は .club-hamburger__bar とその ::before / ::after で描き、開いている間（aria-expanded="true"）は × にする
 */
.club-hamburger {
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    background: var(--club-primary);
    color: #fff;
}

.club-hamburger:hover,
.club-hamburger:focus-visible {
    background: var(--club-primary);
    filter: brightness(1.08);
}

.club-hamburger__bar {
    position: relative;
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: background-color .25s ease;
}

.club-hamburger__bar::before,
.club-hamburger__bar::after {
    content: "";
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .25s ease, top .25s ease;
}

.club-hamburger__bar::before {
    top: -7px;
}

.club-hamburger__bar::after {
    top: 7px;
}

.club-hamburger[aria-expanded="true"] .club-hamburger__bar {
    background: transparent;
}

.club-hamburger[aria-expanded="true"] .club-hamburger__bar::before {
    top: 0;
    transform: rotate(45deg);
}

.club-hamburger[aria-expanded="true"] .club-hamburger__bar::after {
    top: 0;
    transform: rotate(-45deg);
}

/* ---------------- テーマ切替 ---------------- */

/*
 * ポップオーバー本体の見た目（.tk-theme__menu / .tk-theme__option / .tk-theme__swatch）は
 * WordPress 側 styles/club.css に任せる。ここでは配置と、WordPress 側 CSS が無いときの最低限だけ持つ
 */
.club-theme {
    position: relative;
}

.club-theme__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    min-width: 200px;
    padding: 12px;
    background: var(--club-surface);
    border: 1px solid var(--club-border);
    border-radius: 16px;
    box-shadow: var(--club-shadow);
}

.club-theme__menu[hidden] {
    display: none;
}

.club-theme__menu .tk-theme__title {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--club-text-muted);
}

.club-theme__menu .tk-theme__option,
.club-drawer__themes .tk-theme__option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.club-theme__menu .tk-theme__option[aria-checked="true"],
.club-drawer__themes .tk-theme__option[aria-checked="true"] {
    border-color: var(--club-primary);
    background: var(--club-chip);
}

.club-theme__menu .tk-theme__swatch,
.club-drawer__themes .tk-theme__swatch {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--club-border);
    background: linear-gradient(135deg, var(--swatch-a, #ccc) 50%, var(--swatch-b, #eee) 50%);
    flex: 0 0 auto;
}

.club-drawer__themes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

/* ---------------- ドロワー ---------------- */

.club-drawer {
    max-width: 1280px;
    margin: 8px auto 0;
    padding: 12px;
    background: var(--club-surface);
    border: 1px solid var(--club-border);
    border-radius: 20px;
    box-shadow: var(--club-shadow);
    /*
     * 開いている間は body のスクロールを止めるので、画面からはみ出した行（最下段のログアウトなど）にも
     * 届くよう、ドロワーの中でスクロールさせる。110px はヘッダーの高さと余白の目安
     */
    max-height: calc(100vh - 110px);
    max-height: calc(100dvh - 110px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* 個人会員トップはヘッダーの上余白が 25px 大きい（37px）ので、その分だけ短くする */
@media (min-width: 1024px) {
    body.tk-front .club-drawer {
        max-height: calc(100vh - 135px);
        max-height: calc(100dvh - 135px);
    }
}

.club-drawer[hidden] {
    display: none;
}

.club-drawer__list {
    display: flex;
    flex-direction: column;
}

.club-drawer__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 12px;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid var(--club-border);
}

.club-drawer__list li:last-child .club-drawer__link {
    border-bottom: 0;
}

/* ログアウトはフォームのボタンなので、ボタンの既定の見た目を消してリンクの行とそろえる */
button.club-drawer__link {
    width: 100%;
    margin: 0;
    color: inherit;
    font-family: inherit;
    line-height: inherit;
    text-align: left;
    background: none;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    cursor: pointer;
}

.club-drawer__link--accent {
    color: var(--club-primary);
}

/* ドロワー内の区画（テーマ切替・会員メニュー・メニュー） */
.club-drawer__group + .club-drawer__group {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--club-border);
}

.club-drawer__heading {
    margin: 0 12px 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--club-text-muted);
}

/* ---------------- 本文 ---------------- */

.club-main {
    /* 残りの高さを main が受け持つことで、フッターが常に画面最下部へ回る */
    flex: 1;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
}

/* ---------------- フッター ---------------- */

/*
 * フッターは画面最下部で左右端まで全幅表示する。
 * 幅の制限と中央寄せは内側の .club-footer__inner だけに持たせる。
 */
.club-footer {
    width: 100%;
    margin-top: auto;
    background: var(--club-surface);
    border-top: 1px solid var(--club-border);
}

.club-footer__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 24px;
    box-sizing: border-box;
}

.club-footer__center {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
}

.club-footer__list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 28px;
}

.club-footer__link {
    font-size: 14px;
    font-weight: 600;
}

.club-footer__link:hover,
.club-footer__link:focus-visible {
    color: var(--club-primary);
    text-decoration: underline;
}

/* 会員向けご案内（WordPress の固定ページ）は規約リンクの下に小さめで並べる */
.club-footer__nav--guide {
    margin-top: 8px;
}

.club-footer__nav--guide .club-footer__link {
    font-size: 13px;
    font-weight: 500;
}

.club-footer__copyright {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--club-text-muted);
}

/*
 * SNS アイコン。公開サイトのフッター（WordPress テーマ styles/site.css の .tk-footer__sns）と同じ
 * 大きさ（28px）・間隔（26px）にし、色は SVG 自身が持つので背景は付けない（redmine #19500）
 */
.club-sns {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.club-sns__link {
    display: block;
    width: 28px;
    height: 28px;
    transition: transform .2s ease, opacity .2s ease;
}

.club-sns__icon {
    display: block;
    width: 100%;
    height: 100%;
}

.club-sns__link:hover,
.club-sns__link:focus-visible {
    transform: translateY(-2px);
    opacity: .85;
}

/* 未対応の SNS（アイコン無し）は頭文字を丸ボタンで表す。footer.blade.php が SVG を出す 3 つのキーと完全一致で除く */
.club-sns__link:not(.club-sns__link--facebook):not(.club-sns__link--instagram):not(.club-sns__link--youtube) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--club-primary);
    color: #fff;
}

.club-sns__initial {
    font-size: 14px;
    font-weight: 700;
}

/* ---------------- 記事（お知らせ・固定ページ） ---------------- */

/*
 * 見出し・記事カードの見た目（.tk-pagehead / .contents__main / .single__info / .tk-pill）は
 * WordPress 側 styles/pages.css / club.css に任せる。ここは WordPress 側 CSS が無いときの最低限
 */
.club-article .tk-pagehead__title {
    margin: 0 0 8px;
    font-size: 24px;
    line-height: 1.4;
}

.club-article .tk-pagehead__lead {
    margin: 0 0 16px;
    color: var(--club-text-muted);
}

.club-article .contents__main {
    padding: 24px;
    background: var(--club-surface);
    border: 1px solid var(--club-border);
    border-radius: 24px;
    box-shadow: var(--club-shadow);
}

.club-article .single__info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--club-text-muted);
}

.club-article__body img {
    max-width: 100%;
    height: auto;
}

.club-article .tk-club-article__foot {
    margin-top: 24px;
    text-align: center;
}

.club-article .tk-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    padding: 10px 24px;
    border: 1px solid var(--club-primary);
    border-radius: var(--club-radius);
    color: var(--club-primary);
    font-weight: 700;
    text-decoration: none;
}

.club-article .tk-pill:hover,
.club-article .tk-pill:focus-visible {
    background: var(--club-chip);
}

/* お知らせ一覧（1 件分の見た目は WordPress 側 styles/pages.css の .tk-page .news__list に任せる） */
.club-news__empty {
    margin: 0;
    color: var(--club-text-muted);
}

.club-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}

.club-pager__status {
    font-size: 13px;
    color: var(--club-text-muted);
}

/* ---------------- レスポンシブ ---------------- */

/*
 * コンテンツ（.club-header__inner）が最大幅 1280px に達しない画面（1280px ＋ ヘッダー左右の余白 16px × 2 ＝ 1312px 以下）:
 * ナビの余白を詰め、Language・テーマ切替のラベルを隠す。
 * 以前は 1180px 以下だけだったため、1181〜1312px ではラベルが出る分だけ主カプセルが狭くなり、ニックネームが
 * 短くてもナビが 2 行に折り返していた。
 * メディアクエリの幅にはスクロールバーが含まれるため、スクロールバー（Windows で約 17px）が出ていると 1313〜1329px では
 * ラベルが出たまま .club-header__inner が 1264px 程度までしか広がらないが、ナビが 1 行のまま収まる余裕（約 20px）はある。redmine #19643
 */
@media (max-width: 1312px) {
    .club-header__main {
        gap: 12px;
        padding-left: 16px;
    }

    .club-gnav__list {
        gap: 16px;
    }

    /*
     * ラベルは視覚的にだけ隠す。display:none にするとアイコン（aria-hidden）しか
     * 残らず、ボタンのアクセシブルネームが空になるため clip 方式にする
     */
    .club-icon-button__label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
}

/*
 * 1024〜1110px（iPad 横など。ナビを出す最小の幅）: ロゴ・ナビ・会員表示をさらに詰めて 1 行に収める。
 * 1024px ではロゴ 215px ＋ ナビ 3 項目 420px ＋ 会員表示 180px が主カプセルの 746px に入らないため。
 * 1023px 以下はナビがドロワーへ入って余裕があるので、この詰めは当てない（min-width で区切る）。redmine #19643
 */
@media (min-width: 1024px) and (max-width: 1110px) {
    .club-header__main {
        gap: 8px;
        padding-left: 12px;
    }

    .club-logo__ja {
        font-size: 14px;
        letter-spacing: 0;
    }

    .club-logo__en {
        font-size: 9px;
    }

    .club-gnav__list {
        gap: 12px;
    }

    .club-gnav__link {
        padding-left: 0;
        padding-right: 0;
    }

    .club-account__user {
        padding-right: 8px;
    }

    .club-account__nickname {
        max-width: 5em;
    }
}

/*
 * タブレット以下（1023px 以下。公開サイト WordPress テーマ styles/club.css がナビを隠してハンバーガーを出す幅と同じ）
 * - グローバルナビはドロワーへ集約する。以前は 900px 以下だったため、901〜1110px ではロゴ＋ナビ＋会員表示が入らず
 *   ナビが 2〜3 行になっていた。redmine #19643
 * - トップのヘッダー上余白を公開サイト（body.tk-front .tk-siteheader）に合わせて詰める
 */
@media (max-width: 1023px) {
    .club-gnav {
        display: none;
    }

    .club-header__main {
        justify-content: space-between;
    }

    body.tk-front .club-header {
        padding-top: 14px;
    }
}

/* タブレット以下：フッターは縦並びにする */
@media (max-width: 900px) {
    .club-footer__inner {
        flex-direction: column;
        gap: 16px;
    }

    /* 公開サイトのフッター（styles/site.css）と同じく、狭い幅では SNS アイコンの間隔を少し詰める */
    .club-sns {
        gap: 22px;
    }
}

/* スマホ */
@media (max-width: 600px) {
    /* 余白は、ロゴ 2 行（下の .club-logo__ja / __en）が省略されずに収まる幅を確保するため詰めている。redmine #19500 */
    .club-header {
        padding: 8px;
    }

    .club-header__inner {
        gap: 8px;
    }

    .club-header__main {
        gap: 8px;
        padding: 8px 8px 8px 12px;
        border-radius: 24px;
    }

    /* Language・テーマ切替はアイコンだけ（ラベルは視覚的に隠している）なので、左右の余白を詰める */
    .club-header__sub {
        padding: 4px 6px;
        border-radius: 24px;
    }

    .club-icon-button {
        padding: 8px 6px;
    }

    .club-hamburger {
        width: 44px;
        height: 44px;
    }

    /* 幅が足りないときはロゴを縮めて省略表示にし、会員アイコンがサブカプセルの下に隠れないようにする */
    .club-logo {
        flex: 1 1 auto;
        min-width: 0;
    }

    .club-header__main {
        overflow: hidden;
    }

    .club-logo__ja,
    .club-logo__en {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /*
     * ロゴ 2 行（「とやま MY AIRPORT CLUB」「Toyama-Takayama Sushi Airport」）が省略されずに収まるよう、
     * 画面幅に応じて文字を小さくする（390px で 11px / 8px、360px で 10px / 7.5px 程度）。redmine #19500
     * あわせて上のヘッダー・カプセル・アイコンボタンの余白の詰めで、ログイン中（会員アイコンあり）の 360px 幅でも収まる
     */
    .club-logo__ja {
        font-size: clamp(10px, 2.8vw, 12px);
        letter-spacing: 0;
    }

    .club-logo__en {
        font-size: clamp(7px, 2.1vw, 8px);
    }

    /*
     * 幅が足りずログインボタンがサブカプセルへはみ出すため、
     * 未ログイン時のログイン導線はドロワー側（メニュー → ログイン）に寄せる
     */
    .club-account .club-button {
        display: none;
    }

    /* 上と同じ理由。ニックネームを消すとリンクのアクセシブルネームが空になる */
    .club-account__name {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    .club-account__user {
        padding: 2px;
    }
}

/* ---------------- ページ内翻訳（Google 翻訳ウィジェット） ---------------- */

/*
 * Language ページで言語を選ぶと共通レイアウトがウィジェットを読み込み、ページをその場で翻訳する。
 * 言語の選択は Language ページで行うため、ウィジェット自身の選択 UI と画面上部の翻訳バー・吹き出しは出さない。
 * ウィジェットは body に top:40px（バーの分）を入れるので打ち消す
 */
.club-translate,
body > .skiptranslate,
.goog-te-banner-frame,
.goog-te-balloon-frame,
#goog-gt-tt {
    display: none !important;
}

/* 翻訳後はナビの文言が長くなる（例: Facilities and Services）ため、会員表示に重ならないよう折り返す */
.club-gnav__list {
    flex-wrap: wrap;
    row-gap: 0;
}

body.club-body {
    top: 0 !important;
}

/* Language ページ: 今選んでいる言語（club-translate.js が aria-current を付ける）。見た目は WordPress 側 pages.css の hover と同じ */
.tk-lang__item[aria-current="true"] {
    border-color: var(--sky, var(--club-primary));
    color: var(--club-primary);
}

/* ---------------- 印刷 ---------------- */

@media print {
    :root {
        --club-shadow: none;
    }

    .club-body {
        background: #fff;
        color: #000;
    }

    .club-header {
        position: static;
    }

    .club-capsule {
        border-radius: 0;
        border: 0;
        border-bottom: 1px solid #ccc;
        box-shadow: none;
        padding-left: 0;
        padding-right: 0;
    }

    /* 操作専用の要素は印刷しない */
    .club-header__sub,
    .club-drawer,
    .club-account,
    .club-sns,
    .club-skip-link,
    .club-theme__menu,
    .club-pager,
    .tk-club-article__foot {
        display: none !important;
    }

    /* 印刷では画面高さに合わせる必要が無いため sticky footer を解除する */
    .club-layout {
        display: block;
        min-height: 0;
    }

    .club-main {
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    .club-footer {
        margin-top: 0;
        background: transparent;
        border-top: 1px solid #ccc;
    }

    .club-footer__inner {
        max-width: none;
        padding: 8px 0 0;
    }

    /* ページ途中でヘッダー・フッターが分断されないようにする */
    .club-header,
    .club-footer {
        break-inside: avoid;
    }

    a[href]::after {
        content: "";
    }
}