@charset "utf-8";
/* ============================================================
   富山高山すし空港 リニューアル 共通レイヤー（全ページ）
   ・デザイントークン
   ・グローバルナビ（フローティングピル）／モバイルドロワー
   ・共通パーツ（ボタン・コンテナ・カード）
   ・フッター／トップに戻る
   Figma:「富山きときと空港HPリニューアル」node 630:1237 から抽出
   ============================================================ */

:root {
  --ink:            #07194d;
  --ink-soft:       #33406a;
  --muted:          #647392;
  --primary:        #0833b8;
  --primary-deep:   #0b2fa8;
  --sky:            #0b8ff0;
  --line:           #e8eef8;
  --chip:           #f1f5fb;
  --tint:           #fafcff;
  --amber:          #ff9f00;
  --gold:           #ffc200;
  --dark:           #22272b;

  --cat-important:  #e60020;
  --cat-info:       #0069af;
  --cat-event:      #35aa36;
  --cat-campaign:   #ff7d16;
  --cat-tour:       #8a35e8;

  --sd-sm: 0 8px 22px rgba(22, 81, 166, .12);
  --sd-md: 0 10px 24px rgba(22, 81, 166, .10);
  --sd-lg: 0 12px 28px rgba(22, 81, 166, .13);

  --container: 1280px;
  --gutter: 20px;

  --tk-font: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
             "Yu Gothic", Meiryo, sans-serif;
}

/* 既存の .header / 固定右バナーは新ナビが置き換えるので使わない */
.header,
.rightbanner { display: none !important; }

body {
  font-family: var(--tk-font);
  color: var(--ink);
}

.tk-siteheader *,
.tk-siteheader *::before,
.tk-siteheader *::after,
.tk-drawer *,
.tk-home *,
.tk-home *::before,
.tk-home *::after,
.tk-page *,
.tk-page *::before,
.tk-page *::after { box-sizing: border-box; }

/* ブラウザ既定のリンク色を打ち消すだけの土台。:where() で詳細度 0 にして
   個々のパーツ側の color 指定が必ず勝つようにしています。 */
.tk-siteheader :where(a),
.tk-drawer :where(a),
.tk-home :where(a),
.tk-page :where(a) { text-decoration: none; color: inherit; }

/* Bootstrap3（style.css）の下記2行が hover / focus 時に効いてしまい、
   リンクに下線と黒いフォーカス枠が出るため打ち消す。
     a:focus,a:hover{color:#23527c;text-decoration:underline}
     a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
   :where() の外に :hover / :focus を置いて詳細度を (0,2,0) にしてある。
   Bootstrap は (0,1,1) なのでこちらが勝ち、個々のパーツ側の指定
   （.tk-gnav__link:hover など＝同じ (0,2,0) で後勝ち）は従来どおり効く。 */
.tk-siteheader :where(a):hover,
.tk-siteheader :where(a):focus,
.tk-drawer :where(a):hover,
.tk-drawer :where(a):focus,
.tk-home :where(a):hover,
.tk-home :where(a):focus,
.tk-page :where(a):hover,
.tk-page :where(a):focus {
  text-decoration: none;
}

/* マウス操作ではフォーカス枠を出さず、キーボード操作のときだけ
   ブランドカラーのリングを出す（アクセシビリティは維持） */
.tk-siteheader :where(a, button, input):focus,
.tk-drawer :where(a, button, input):focus,
.tk-home :where(a, button, input):focus,
.tk-page :where(a, button, input):focus,
.footer :where(a, button):focus,
.toTop :where(a):focus { outline: 0; }

.tk-siteheader :where(a, button, input):focus-visible,
.tk-drawer :where(a, button, input):focus-visible,
.tk-home :where(a, button, input):focus-visible,
.tk-page :where(a, button, input):focus-visible,
.footer :where(a, button):focus-visible,
.toTop :where(a):focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
  border-radius: 6px;
}

/* 検索フォームは入力中に枠が消えたままにならないよう、外側で示す */
.tk-search form:focus-within { box-shadow: 0 0 0 3px rgba(11, 143, 240, .35), var(--sd-sm); }

.tk-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 読み上げ専用 */
.tk-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 共通パーツ ─────────────────────────────────────── */

.tk-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 28px;
  border-radius: 999px;
  font-family: var(--tk-font);
  font-size: 16px; font-weight: 700; line-height: 1.2;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.tk-pill--solid { background: var(--primary); color: #fff; }
.tk-pill--solid:hover { background: #0a3ed6; color: #fff; transform: translateY(-2px); }
.tk-pill--ghost { background: #fff; color: var(--ink); border: 2px solid var(--sky); }
.tk-pill--ghost:hover { background: #f2f9ff; color: var(--ink); transform: translateY(-2px); }

/* Bootstrap の a:focus,a:hover{color:#23527c} に負けないよう、
   リンクとして使うピルは要素セレクタ付きで文字色を固定する */
a.tk-pill--solid, a.tk-pill--solid:hover, a.tk-pill--solid:focus { color: #fff; }
a.tk-pill--ghost, a.tk-pill--ghost:hover, a.tk-pill--ghost:focus { color: var(--ink); }

.tk-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 55px; height: 55px; flex: none;
  border: 2px solid var(--sky); border-radius: 50%;
  background: #fff; color: var(--primary);
  font-size: 21px; font-weight: 700; line-height: 1;
  transition: background-color .2s ease, transform .2s ease;
}

.tk-section { padding-block: 34px; }

.tk-section__head {
  display: flex; align-items: baseline; justify-content: center;
  margin: 0 0 22px;
}
.tk-section__title {
  margin: 0;
  font-size: 23px; font-weight: 700; line-height: 1.2;
  color: var(--primary);
}

.tk-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--sd-lg);
}

/* ══ グローバルナビ ═════════════════════════════════ */

.tk-siteheader { position: relative; z-index: 900; }

/* トップページ：ヒーローに重ねる */
body.tk-front .tk-siteheader {
  position: absolute; inset-inline: 0; top: 0;
  padding-top: 37px;
}

/* 下層ページの背景。ヘッダーと本文で二重に掛からないよう
   グラデーションは body にだけ持たせる（.tk-siteheader / .tk-page は透明） */
body:not(.tk-front) {
  background: linear-gradient(180deg, #eaf8ff 0%, #f5fbff 320px, #fff 720px) no-repeat;
}

/* 下層ページ：スクロール追従（背景は敷かず、白いピルだけが浮く） */
body:not(.tk-front) .tk-siteheader {
  position: sticky; top: 0;
  padding: 18px 0 14px;
  background: none;
}

/* Figma 1113x58 r29 */
.tk-gnav {
  display: flex; align-items: center; gap: 16px;
  min-height: 67px;
  padding: 8px 10px 8px 26px;
  background: #fff;
  border-radius: 34px;
  box-shadow: var(--sd-sm);
}

.tk-gnav__brand { display: block; margin-right: auto; }
.tk-gnav__brand-jp {
  display: block;
  font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: .05em;
  color: var(--ink);
}
.tk-gnav__brand-en {
  display: block; margin-top: 3px;
  font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: .02em;
  color: var(--primary);
}

.tk-gnav__list {
  display: flex; align-items: center; gap: 22px;
  margin: 0; padding: 0; list-style: none;
}
.tk-gnav__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
  transition: color .2s ease;
}
.tk-gnav__link:hover,
.tk-gnav__link:focus,
.tk-gnav__link[aria-current="true"] { color: var(--sky); }
.tk-gnav__link img { width: 32px; height: 30px; object-fit: contain; flex: none; }
.tk-gnav__link--lang { color: var(--primary); }

.tk-gnav__tools { display: flex; align-items: center; gap: 10px; }

.tk-gnav__login { flex: none; padding: 13px 26px; font-size: 15px; }

/* 検索 */
.tk-gnav__search {
  width: 40px; height: 40px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--chip); color: var(--primary);
  cursor: pointer;
  transition: background-color .2s ease;
}
.tk-gnav__search:hover { background: #e3ebf7; }
.tk-gnav__search[aria-expanded="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }
.tk-gnav__search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

.tk-search { margin-top: 10px; }
.tk-search[hidden] { display: none; }
.tk-search form {
  display: flex; align-items: center; gap: 8px;
  max-width: 560px; margin-left: auto;
  padding: 8px 8px 8px 20px;
  background: #fff;
  border-radius: 999px;
  box-shadow: var(--sd-sm);
}
.tk-search input[type="text"] {
  flex: 1 1 auto; min-width: 0;
  height: 40px;
  padding: 0;
  border: 0; outline: none; background: transparent;
  font-family: var(--tk-font); font-size: 15px; color: var(--ink);
}
.tk-search input[type="text"]::placeholder { color: var(--muted); }
.tk-search button {
  flex: none;
  height: 40px; padding: 0 22px;
  border: 0; border-radius: 999px;
  background: var(--primary); color: #fff;
  font-family: var(--tk-font); font-size: 14px; font-weight: 700;
  cursor: pointer;
}
.tk-search button:hover { background: #0a3ed6; }
/* Google が差し込むブランド画像は隠す */
.tk-search .gsc-branding,
.tk-search img[src*="google"] { display: none; }

/* ハンバーガー（1279px 以下で表示） */
.tk-gnav__burger {
  display: none;
  width: 50px; height: 50px; flex: none;
  align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: var(--primary); color: #fff;
  cursor: pointer;
}
.tk-gnav__burger span {
  position: relative;
  display: block; width: 20px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: transform .25s ease, background-color .25s ease;
}
.tk-gnav__burger span::before,
.tk-gnav__burger span::after {
  content: ""; position: absolute; left: 0;
  width: 20px; height: 2px; background: #fff; border-radius: 2px;
  transition: transform .25s ease, top .25s ease;
}
.tk-gnav__burger span::before { top: -7px; }
.tk-gnav__burger span::after  { top: 7px; }
.tk-gnav__burger[aria-expanded="true"] span { background: transparent; }
.tk-gnav__burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.tk-gnav__burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* ══ モバイルドロワー ═══════════════════════════════ */

.tk-drawer {
  position: fixed; inset: 0; z-index: 3000;
  display: none;
  background: rgba(7, 25, 77, .55);
}
.tk-drawer[data-open="true"] { display: block; }

.tk-drawer__panel {
  position: absolute; top: 0; right: 0;
  width: min(88vw, 380px); height: 100%;
  padding: 22px 22px 60px;
  overflow-y: auto;
  background: #fff;
  box-shadow: -8px 0 30px rgba(7, 25, 77, .25);
}

.tk-drawer__close {
  display: block; margin-left: auto;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: var(--chip); color: var(--ink);
  font-size: 22px; line-height: 1; cursor: pointer;
}

.tk-drawer__group { margin-top: 22px; }
.tk-drawer__heading {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--sky);
  font-size: 16px; font-weight: 700; color: var(--primary);
}
.tk-drawer__list { margin: 0; padding: 0; list-style: none; }
.tk-drawer__list li + li { border-top: 1px solid var(--line); }
.tk-drawer__list a {
  display: block; padding: 12px 4px;
  font-size: 15px; font-weight: 700; color: var(--ink);
}
.tk-drawer__list a:hover,
.tk-drawer__list a:focus { color: var(--sky); }

/* ══ フッター ═══════════════════════════════════════ */
/* Figma (630:1237) のフッターを再現。白背景の 1 段構成：
   左：ブランド名 ／ 中央：リンク 4 件＋コピーライト ／ 右：SNS アイコン。
   Figma の 1167px 幅の値を約 1.15 倍にして使用。 */

.footer {
  margin-top: 48px;
  background: #fff;
  color: var(--ink);
  font-family: var(--tk-font);
}
.tk-footer *,
.tk-footer *::before,
.tk-footer *::after { box-sizing: border-box; }
.tk-footer :where(a) { color: inherit; text-decoration: none; }

.tk-footer__inner {
  display: flex; align-items: center; gap: 24px 72px;
  padding: 44px 24px 40px;
}

/* ブランド（ヘッダーの .tk-gnav__brand と同じ書式） */
.tk-footer__brand { display: block; flex: none; }
.tk-footer__brand:hover,
.tk-footer__brand:focus { text-decoration: none; }
.tk-footer__brand-jp {
  display: block;
  font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: .05em;
  color: var(--ink);
}
.tk-footer__brand-en {
  display: block; margin-top: 3px;
  font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: .02em;
  color: var(--primary);
}

/* リンク＋コピーライト */
.tk-footer__body { flex: 1 1 auto; min-width: 0; }
.tk-footer__list {
  display: flex; flex-wrap: wrap; gap: 8px 40px;
  margin: 0; padding: 0; list-style: none;
}
.tk-footer__list a {
  font-size: 14px; font-weight: 500; line-height: 1.4;
  color: var(--ink);
}
.tk-footer__list a:hover,
.tk-footer__list a:focus { color: var(--sky); text-decoration: none; }
.tk-footer__copy {
  margin: 14px 0 0;
  font-size: 12px; line-height: 1.5; letter-spacing: .01em;
  color: var(--ink);
}
.tk-footer__copy small { font-size: inherit; }

/* SNS アイコン */
.tk-footer__sns {
  display: flex; align-items: center; gap: 26px; flex: none;
  margin: 0; padding: 0; list-style: none;
}
.tk-footer__sns-link {
  display: block; width: 28px; height: 28px;
  transition: transform .2s ease, opacity .2s ease;
}
.tk-footer__sns-link svg { display: block; width: 100%; height: 100%; }
.tk-footer__sns-link:hover,
.tk-footer__sns-link:focus { transform: translateY(-2px); opacity: .85; }

.toTop {
  position: fixed; right: 20px; bottom: 20px; z-index: 800;
  width: auto; height: auto;
  padding: 0;
  background: none;
  border-radius: 0;
}
.toTop a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--primary); color: #fff;
  font-family: var(--tk-font); font-size: 9px; font-weight: 700; line-height: 1.3;
  text-align: center;
  padding: 0 11px; gap: 3px;  /* 文字は「トップに／戻る」の 2 行に折り返して円に収める */
  box-shadow: 0 8px 20px rgba(8, 51, 184, .32);
  transition: transform .2s ease, background-color .2s ease;
}
.toTop a:hover { background: #0a3ed6; color: #fff; transform: translateY(-3px); text-decoration: none; }
.toTop a i  { font-size: 16px; line-height: 1; }
.toTop a br { display: none; }  /* 縦並びの flex では改行が空きになるので使わない */
/* AI チャットボット（IZANAI）の吹き出し（右下、直径およそ 120px）と重ならないよう、
   チャットボットを出すページ（body.tk-has-chatbot。functions.php の tk_chatbot_tag）では左にずらす */
.tk-has-chatbot .toTop { right: 160px; }

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

@media (max-width: 1279px) {
  .tk-gnav { gap: 12px; padding-left: 20px; }
  .tk-gnav__list { gap: 16px; }
  .tk-gnav__link { font-size: 13px; }
  .tk-gnav__link img { width: 26px; height: 24px; }
  .tk-gnav__login { padding: 12px 20px; font-size: 14px; }
}

@media (max-width: 1023px) {
  :root { --gutter: 16px; }

  .tk-gnav { padding: 8px 8px 8px 18px; min-height: 62px; }
  .tk-gnav__list,
  .tk-gnav__login { display: none; }
  .tk-gnav__burger { display: inline-flex; }
  .tk-gnav__brand-jp { font-size: 19px; }

  body.tk-front .tk-siteheader { padding-top: 14px; }
  body:not(.tk-front) .tk-siteheader { padding: 12px 0 10px; }

  .tk-footer__inner { padding: 36px 16px 32px; gap: 20px 40px; }
  .toTop { right: 12px; bottom: 12px; }
  .toTop a { width: 54px; height: 54px; padding: 0 9px; font-size: 8px; }  /* 「トップに／戻る」で折り返す幅 */
}

@media (max-width: 767px) {
  .tk-search form { margin-left: 0; padding-left: 16px; }
  .tk-footer__inner { flex-direction: column; align-items: flex-start; gap: 24px; padding: 32px 4px 28px; }
  .tk-footer__list { gap: 10px 24px; }
  .tk-footer__list a { font-size: 13px; }
  .tk-footer__copy { margin-top: 12px; }
  .tk-footer__sns { gap: 22px; }
}