@charset "UTF-8";
/* ====================================================
   グローバルナビ（inc/gnav.php）
   - PC: 項目に乗せると、ヘッダーの下いっぱいにメガメニューが開く（JavaScript を使わない）
   - スマホ: 三本線のメニューの中は、項目ごとに開閉（<details>）。ヘッダーのすぐ下に横スクロールのタブ
   - 色と形はサイト共通のもの（地 #f2f8f7、白い角丸カード、黒の丸ボタン、青 #00a1e9、ローズ #d23e69、英字は Fredoka）
   - サイト共通の「ul > li + li」の余白を打ち消すため、同じ形のセレクタを使っている
==================================================== */

/* ---------- スクロールでヘッダーを出し入れする（js/gnav.js） ---------- */
header .headerBox { transition: transform 0.3s ease, background 0.4s ease, top 0.5s ease-in-out; }
/* PC のロゴはヘッダーの帯の下に約 50px はみ出しているので、その分も上へ送る（以前はロゴの下端が画面に残っていた） */
header.gnav-hidden .headerBox { transform: translateY(calc(-100% - 64px)); }
@media (prefers-reduced-motion: reduce) {
  header .headerBox { transition: none; }
}

/* ---------- 共通の小物 ---------- */
.gnav-badge {
  background: #d23e69;
  border-radius: 1em;
  color: #fff;
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  margin-left: 6px;
  padding: 4px 7px;
  vertical-align: 2px;
}
.gnav-ext {
  background: currentColor;
  display: inline-block;
  height: 11px;
  margin-left: 5px;
  -webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5"/></svg>') no-repeat center / contain;
  opacity: 0.6;
  width: 11px;
}

/* ---------- スマホ: ヘッダーのすぐ下のタブ ----------
   PC のメニューと同じ 5 項目を、画面の幅に 5 等分で並べる（アイコンの下に名前。横にスクロールさせない。2026-10-28） */
.gnav-tabs {
  background: #fff;
  border-bottom: 1px solid #e3ecea;
}
.gnav-tabs ul {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
}
.gnav-tabs ul > li + li { margin-top: 0; }
.gnav-tabs li { list-style: none; min-width: 0; }
.gnav-tabs a {
  align-items: center;
  border-bottom: 3px solid transparent;
  color: #555;
  display: flex;
  flex-direction: column;
  /* 「プレスリリース」（7 文字）が 1 行に収まる大きさ。幅 360px の画面で 10px、390px で約 11px */
  font-size: clamp(10px, 2.6vw, 12px);
  font-weight: 700;
  gap: 3px;
  justify-content: center;
  letter-spacing: 0;
  padding: 7px 0 5px;
  text-decoration: none;
  white-space: nowrap;
}
.gnav-tabs .onv-icon { color: #00a1e9; height: 22px; width: 22px; }
.gnav-tabs a[aria-current="page"] { border-bottom-color: #00a1e9; color: #0074a8; }

/* ---------- スマホ: 三本線のメニューの中 ---------- */
.gnav-sp { display: grid; font-size: 15px; font-weight: 700; }
.gnav-sp details,
.gnav-sp > a { border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
.gnav-sp summary,
.gnav-sp__link {
  align-items: center;
  color: #fff;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  list-style: none;
  min-height: 52px;
  text-decoration: none;
}
.gnav-sp summary::-webkit-details-marker { display: none; }
.gnav-sp summary::after {
  content: "+";
  font-family: var(--f_en);
  font-size: 20px;
  font-weight: 400;
}
.gnav-sp details[open] summary::after { content: "−"; }
.gnav-sp details ul { margin: 0 0 12px; padding: 0; }
.gnav-sp details ul > li + li { margin-top: 0; }
.gnav-sp details li { list-style: none; }
.gnav-sp details a {
  color: #fff;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  min-height: 40px;
  padding-left: 12px;
  text-decoration: none;
}
.gnav-sp__request {
  align-items: center;
  background: #fff;
  border: 0 !important;
  border-radius: 3em;
  color: #333 !important;
  display: flex;
  font-size: 15px;
  justify-content: center;
  margin: 24px 0 8px;
  min-height: 52px;
  text-decoration: none;
}
.gnav-sp__sub { display: grid; gap: 0; grid-template-columns: 1fr 1fr; margin: 12px 0 0; padding: 0; }
.gnav-sp__sub > li + li { margin-top: 0; }
.gnav-sp__sub li { list-style: none; }
.gnav-sp__sub a { color: #fff; display: block; font-size: 12px; font-weight: 500; padding: 8px 0; text-decoration: none; }

/* ---------- PC ---------- */
@media screen and (max-width: 1079.8px) {
  .gnav,
  header .btnBox .gnav-request-box { display: none; }

  /* スマホ・タブレットのヘッダー: 縦長のロゴのカード（ヘッダーから下へはみ出す形）をやめ、横長のロゴをヘッダーの中に収める。
     はみ出しが無くなるので、下のタブを左端から並べられる（2026-10-16 洋介さんの指摘） */
  header .header_logo { align-items: center; display: flex; height: 100%; width: auto; }
  header .header_logo a { background: none; border-radius: 0; box-shadow: none; height: auto; padding: 0; position: static; width: auto; }
  header .header_logo .main_logo { display: none; }
  header .header_logo .main_logo_x { display: block; height: 40px; width: auto; }
  /* キャッチは 1 行で。入りきらない狭い画面では出さない（ロゴとボタンを優先） */
  header .head_text { font-size: 11px; white-space: nowrap; }
  header .head_text br { display: none; }
  /* キャッチを出さない幅でも、お問い合わせの箱は右端（3 列目）に置く */
  header .btnBox { grid-column: 3; }
}
@media screen and (max-width: 479.8px) {
  header .head_text { display: none; }
}
@media print, screen and (min-width: 1080px) {
  header .header_logo .main_logo_x { display: none; }
}
@media print, screen and (min-width: 1080px) {
  .gnav-tabs { display: none; }

  /* メガメニューを、ヘッダー（位置が固定）いっぱいの幅で出すため、基準をヘッダーにする */
  header .pc_menu { position: static; }

  .gnav__list {
    align-items: center;
    display: flex;
    font-size: min(1.2vw, 1.5rem);
    font-weight: 700; /* メガメニューの中の項目（「観光」など）と同じ太さ（2026-10-27。500 では細く見えた） */
    justify-content: space-evenly;
    margin: 0;
    padding: 0;
  }
  .gnav__list > li + li { margin-top: 0; }
  .gnav__item { list-style: none; }
  .gnav__top {
    color: #333;
    cursor: pointer;
    display: block;
    padding: 0.2em 0 1.1em;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
  }
  /* 下線（今のサイトの動きに合わせる） */
  .gnav__top::before {
    border-bottom: 2px solid var(--mainColor);
    bottom: 0.8em;
    content: "";
    left: auto;
    position: absolute;
    right: 0;
    transition: 0.3s ease-in-out;
    width: 0;
  }
  /* 下線の決まり（2026-10-27 に整理）
     - 今いるページの大項目には、中央に短い下線（12px）
     - マウスを乗せた大項目（キーボードで選んだ大項目も）は、下線が全体に伸びる。今いるページの大項目でも伸びる
     - 開くのは、マウスを乗せている大項目のメニューだけ。クリックで残った選択（フォーカス）では開いたままにしない
       （以前は「沖縄で暮らす」をクリックすると、ほかの項目に移っても・外へ出ても開いたままで、メニューが 2 つ重なった）
       キーボードで選んだとき（:focus-visible）だけ、マウスを乗せなくても開く */
  .gnav__item.is-current .gnav__top::before { left: 0; margin: auto; right: 0; width: 12px; }
  .gnav__item:hover .gnav__top::before,
  .gnav__item:has(:focus-visible) .gnav__top::before { left: 0; margin: 0; right: auto; width: 100%; }
  /* ほかの大項目にマウスが乗っているあいだは、キーボードの選択による下線とメニューを引っ込める */
  .gnav__list:hover .gnav__item:not(:hover) .gnav__top::before { left: auto; margin: 0; right: 0; width: 0; }
  .gnav__list:hover .gnav__item.is-current:not(:hover) .gnav__top::before { left: 0; margin: auto; right: 0; width: 12px; }
  .gnav__item:has(.gnav__panel) .gnav__top::after {
    border-bottom: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    content: "";
    display: inline-block;
    height: 5px;
    margin-left: 6px;
    transform: translateY(-3px) rotate(45deg);
    width: 5px;
  }

  /* ヘッダーの横幅いっぱいに出す。左上のロゴ（ヘッダーから下へはみ出している）より手前に重ねる */
  .gnav__panel {
    background: #fff;
    margin-left: -50vw;
    width: 100vw;
    z-index: 150;
    border-top: 1px solid #e3ecea;
    box-shadow: 0 18px 30px -18px rgba(0, 40, 60, 0.25);
    display: none;
    left: 50%;
    position: absolute;
    top: 100%;
  }
  .gnav__item:hover > .gnav__panel,
  .gnav__item:has(:focus-visible) > .gnav__panel { animation: gnav-in 0.18s ease-out; display: block; }
  .gnav__list:hover .gnav__item:not(:hover) > .gnav__panel { display: none; }
  /* 大項目の下端とメニューの上端の間に 13〜15px のすき間があり、マウスを下へ動かすとそこで :hover が切れて閉じていた（2026-10-27）。
     メニューの上に透明な橋を付けて、すき間を通っても開いたままにする（橋はメニューの一部なので、乗っている間は :hover が続く） */
  /* サイト共通の指定で ::before は pointer-events: none になっているので、橋だけは反応させる */
  .gnav__panel::before { bottom: 100%; content: ""; height: 16px; left: 0; pointer-events: auto; position: absolute; right: 0; }
  @keyframes gnav-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

  .gnav__inner {
    display: grid;
    gap: 40px;
    grid-template-columns: 220px minmax(0, 1fr) 280px;
    margin: 0 auto;
    max-width: 1180px;
    padding: 36px 32px 40px;
  }
  .gnav__inner--life { grid-template-columns: 220px minmax(0, 1fr); }

  .gnav__head { display: flex; flex-direction: column; gap: 6px; }
  .gnav__en { color: #333; font-family: var(--f_en); font-size: 44px; font-weight: 500; letter-spacing: 0.02em; line-height: 1; }
  .gnav__title { font-size: 16px; font-weight: 700; margin: 0; }
  .gnav__lead { color: #555; font-size: 13px; line-height: 1.8; margin: 6px 0 0; }
  .gnav__more {
    align-items: center;
    background: #333;
    border-radius: 3em;
    color: #fff !important;
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    justify-content: center;
    margin-top: auto;
    min-height: 44px;
    padding: 0 20px;
    text-decoration: none;
  }
  .gnav__label { color: #00a1e9; font-family: var(--f_en); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; margin: 0 0 10px; }
  .gnav__side { border-left: 1px solid #e8eeec; display: flex; flex-direction: column; gap: 14px; padding-left: 28px; }

  /* コラムのカテゴリ（画像つき 3 列） */
  .gnav-cats { display: grid; gap: 16px 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; }
  .gnav-cats > li + li { margin-top: 0; }
  .gnav-cats li { list-style: none; }
  .gnav-cats a { color: #333; display: block; text-decoration: none; }
  /* アイキャッチは 16:9。切り抜かずに全体を見せる。乗せたときは、拡大せず少し明るくし、名前の色を変える（画像の端の文字が切れないように） */
  .gnav-cats__img { aspect-ratio: 16 / 9; background: #f2f8f7; border-radius: 10px; display: block; margin-bottom: 8px; overflow: hidden; }
  .gnav-cats__img img { height: 100%; object-fit: cover; transition: opacity 0.25s ease; width: 100%; }
  .gnav-cats a:hover .gnav-cats__img img { opacity: 0.78; }
  .gnav-cats__name { display: inline-block; font-size: 15px; font-weight: 700; position: relative; transition: color 0.25s ease; }
  .gnav-cats__name::after { background: var(--mainColor); bottom: -3px; content: ""; height: 2px; left: 0; position: absolute; transition: width 0.25s ease; width: 0; }
  .gnav-cats a:hover .gnav-cats__name { color: var(--mainColor); }
  .gnav-cats a:hover .gnav-cats__name::after { width: 100%; }

  /* おすすめ記事 */
  .gnav-posts { display: grid; gap: 12px; margin: 0; padding: 0; }
  .gnav-posts > li + li { margin-top: 0; }
  .gnav-posts li { list-style: none; }
  .gnav-posts a { align-items: center; color: #333; display: grid; gap: 12px; grid-template-columns: 104px minmax(0, 1fr); text-decoration: none; }
  .gnav-posts a:hover .gnav-posts__title { color: var(--mainColor); }
  .gnav-posts__img { aspect-ratio: 16 / 9; background: #f2f8f7; border-radius: 6px; display: block; overflow: hidden; }
  .gnav-posts__img img { height: 100%; object-fit: cover; width: 100%; }
  .gnav-posts__title { font-size: 13px; font-weight: 700; line-height: 1.6; }
  .gnav-season { background: #f2f8f7; border-radius: 10px; color: #333; display: block; font-size: 13px; font-weight: 700; line-height: 1.6; margin-top: auto; padding: 12px 14px; text-decoration: none; }
  .gnav-season .label { color: #d23e69; display: block; font-size: 11px; }

  /* イベント: いつ */
  .gnav-when { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 24px; padding: 0; }
  .gnav-when > li + li { margin-top: 0; }
  .gnav-when li { list-style: none; }
  .gnav-when a { align-items: baseline; background: #f2f8f7; border-radius: 10px; color: #333; display: flex; flex-wrap: wrap; gap: 0 4px; padding: 14px 16px; text-decoration: none; transition: background 0.2s; }
  .gnav-when a:hover { background: #f7e3ec; }
  .gnav-when .name { font-size: 13px; font-weight: 700; width: 100%; }
  .gnav-when .num { color: #00a1e9; font-family: var(--f_num); font-size: 32px; font-weight: 700; line-height: 1.2; }
  .gnav-when .unit { font-size: 12px; }
  .gnav-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; }
  .gnav-chips > li + li { margin-top: 0; }
  .gnav-chips li { list-style: none; }
  .gnav-chips a { border: 1px solid #ccd8d5; border-radius: 3em; color: #333; display: inline-block; font-size: 13px; padding: 7px 16px; text-decoration: none; transition: 0.2s; }
  .gnav-chips a:hover { background: #f7e3ec; border-color: #e3b7cd; }

  /* イベント: 今週末の 1 件 */
  .gnav-pick { color: #333; display: grid; gap: 6px; text-decoration: none; }
  /* イベントの画像はポスター（縦長）が多いので、切り抜かずに全体を収める */
  .gnav-pick__img { aspect-ratio: 4 / 3; background: #f2f8f7; border-radius: 10px; display: block; overflow: hidden; }
  .gnav-pick__img img { height: 100%; object-fit: contain; width: 100%; }
  .gnav-pick .gnav__label { margin: 6px 0 0; }
  .gnav-pick__title { font-size: 14px; font-weight: 700; line-height: 1.6; }

  /* 暮らし（アイコンつきのカード） */
  /* アイコンを左に置いた横長のカード。3 列で、項目が増えたら段が増える */
  .gnav-life { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; }
  .gnav-life > li + li { margin-top: 0; }
  .gnav-life li { list-style: none; }
  .gnav-life a {
    align-items: center;
    background: #f2f8f7;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #333;
    column-gap: 16px;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    height: 100%;
    padding: 18px 18px 18px 18px;
    position: relative;
    text-decoration: none;
    transition: 0.2s;
  }
  .gnav-life a:hover { background: #fff; border-color: #e3b7cd; }
  .gnav-life__icon { align-items: center; background: #fff; border-radius: 50%; display: flex; grid-row: 1 / 3; height: 68px; justify-content: center; overflow: hidden; width: 68px; }
  .gnav-life__icon img { border-radius: 10px; height: 44px; object-fit: contain; width: 44px; }
  .gnav-life__title { align-self: end; font-size: 16px; font-weight: 700; padding-right: 14px; white-space: nowrap; }
  .gnav-life__desc { align-self: start; color: #666; font-size: 12px; line-height: 1.7; }
  .gnav-life .gnav-ext { position: absolute; right: 14px; top: 14px; }

  /* 右上の「掲載依頼」。お問い合わせと同じ形の箱を、深い海の紺（フッターと同じ #123d52）で並べる */
  header .btnBox { display: flex; }
  header .btnBox .gnav-request-box { background: #123d52; color: #fff; transition: background 0.2s; }
  header .btnBox .gnav-request-box .icon { filter: brightness(0) invert(1); }
  header .btnBox .gnav-request-box:hover { background: #d23e69; opacity: 1; }
}

/* ---------- 人気メニューのアイコンの並び（/menu/ と、スマホの三本線のメニュー。inc/gnav-data.php の onv_menu_item_html()） ----------
   アプリのメニュー一覧の形：角の丸い薄い地の箱にアイコン、その下に名前。スマホは 4 列 */
.onv-menu { display: grid; gap: 16px 4px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; }
.onv-menu > li { list-style: none; margin: 0; min-width: 0; }
.onv-menu > li + li { margin-top: 0; }
.onv-menu__item { align-items: center; color: #333; display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
.onv-menu__icon {
  align-items: center; background: #f2f8f7; border-radius: 16px; color: #00a1e9; display: flex;
  height: 56px; justify-content: center; position: relative; transition: background-color .2s; width: 56px;
}
.onv-menu__icon .onv-icon { height: 30px; width: 30px; }
.onv-menu__icon img { border-radius: 8px; height: 40px; object-fit: contain; width: 40px; }
.onv-menu__badge {
  background: #d23e69; border-radius: 999px; color: #fff; font-size: 10px; font-weight: 700; line-height: 1;
  padding: 3px 6px; position: absolute; right: -6px; top: -6px;
}
.onv-menu__label { font-size: 11px; font-weight: 700; line-height: 1.4; max-width: 100%; text-align: center; }
.onv-menu__label .gnav-ext { height: 9px; margin-left: 2px; width: 9px; }
@media (hover: hover) {
  .onv-menu__item:hover .onv-menu__icon { background: #e1f1fa; }
  .onv-menu__item:hover .onv-menu__label { color: #00a1e9; }
}
@media print, screen and (min-width: 769px) {
  .onv-menu { gap: 24px 8px; grid-template-columns: repeat(auto-fill, 120px); }
  .onv-menu__icon { height: 64px; width: 64px; }
  .onv-menu__icon .onv-icon { height: 34px; width: 34px; }
  .onv-menu__icon img { height: 46px; width: 46px; }
  .onv-menu__label { font-size: 13px; }
}

/* 三本線のメニューの中（青い地）：箱は白、名前は白。幅が狭いので 3 列。
   .gnav-sp details a（リンクの左の余白・高さ）を打ち消す */
.gnav-sp .onv-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px 0 16px; }
.gnav-sp details .onv-menu__item { color: #fff; display: flex; min-height: 0; padding-left: 0; }
.gnav-sp .onv-menu__icon { background: #fff; height: 52px; width: 52px; }
.gnav-sp .onv-menu__label { font-size: 11px; font-weight: 500; }
.gnav-sp details .gnav-sp__all { color: #fff; display: block; min-height: 0; padding-left: 0; font-size: 13px; font-weight: 500; margin: 0 0 16px; text-align: right; text-decoration: underline; }