/************************************
** ヘッダーのナビゲーション（2026-10-18）：ロゴ左・メニュー中央・Book Your Trip 右
************************************/

/* ---------- PC ---------- */
@media (min-width: 1024px) {
  .header-container-in.hlt-top-menu {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 68px;
  }
  .header-container-in.hlt-top-menu #header { flex: 0 0 auto; }
  .header-container-in.hlt-top-menu #navi { flex: 1 1 auto; min-width: 0; }
  .header-container-in.hlt-top-menu .navi-in > ul.menu-pc {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }
  .header-container-in.hlt-top-menu .navi-in > ul li:not(.et-menu-cta) > a {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 68px;
    padding: 0 14px;
    font-size: 15px;
    font-weight: 600;
    color: #1F3A5F;
    white-space: nowrap;
  }
  .header-container-in.hlt-top-menu .navi-in > ul > li.menu-item-has-children > a::after {
    content: "";
    width: 7px;
    height: 7px;
    margin: -3px 0 0 4px;
    border-right: 1.8px solid currentColor;
    border-bottom: 1.8px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
  }
  .header-container-in.hlt-top-menu .navi-in > ul > li.menu-item-has-children:hover > a::after,
  .header-container-in.hlt-top-menu .navi-in > ul > li.menu-item-has-children:focus-within > a::after { transform: rotate(225deg); margin-top: 3px; }
  .header-container-in.hlt-top-menu .navi-in > ul > li > a:hover { background: transparent; color: #C8412A; }
  /* 右端の Book Your Trip */
  .header-container-in.hlt-top-menu .navi-in > ul > li.et-menu-cta { margin-left: auto; padding: 0 0 0 12px; }
  .header-container-in.hlt-top-menu .navi-in > ul > li.et-menu-cta > a { min-height: 44px; padding: 0 22px; border-radius: 999px; font-size: 15px; box-shadow: 0 4px 12px rgba(200, 65, 42, .25); }

  /* サブメニュー（マウスを重ねる・キーボードで移動すると開く） */
  .navi-in > ul > li { position: relative; }
  .navi-in > ul > li > .sub-menu {
    display: block;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: calc(100% - 6px);
    left: 50%;
    min-width: 230px;
    width: max-content;
    max-width: 300px;
    margin: 0;
    padding: 8px;
    transform: translate(-50%, 6px);
    background: #FFFFFF;
    border: 1px solid #E6E1D6;
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(16, 28, 48, .14);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    z-index: 200;
  }
  .navi-in > ul > li:hover > .sub-menu,
  .navi-in > ul > li:focus-within > .sub-menu {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0);
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
  }
  .navi-in > ul .sub-menu li { width: 100%; height: auto !important; background: transparent; }
  .navi-in > ul .sub-menu li a {
    display: block;
    height: auto;
    height: auto !important;
    padding: 9px 14px !important;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4 !important;
    color: #1F3A5F;
    white-space: normal;
  }
  .navi-in > ul .sub-menu li a:hover,
  .navi-in > ul .sub-menu li a:focus-visible { background: #F3F0E8; color: #1F3A5F; }
  .navi-in a:focus-visible { outline: 2px solid #1F3A5F; outline-offset: -2px; }
}
/* 少し狭い PC：文字と余白を詰める */
@media (min-width: 1024px) and (max-width: 1199px) {
  .header-container-in.hlt-top-menu { gap: 12px; }
  .header-container-in.hlt-top-menu .site-name-text { font-size: 20px; }
  .header-container-in.hlt-top-menu .navi-in > ul li:not(.et-menu-cta) > a { padding: 0 9px; font-size: 14px; }
  .header-container-in.hlt-top-menu .navi-in > ul > li.et-menu-cta > a { padding: 0 16px; font-size: 14px; }
}

/* ---------- スマホ・タブレット：ロゴ＋Book＋メニューボタン ---------- */
.et-mh { display: none; }
@media (max-width: 1023px) {
  .header-container-in { position: relative; min-height: 60px; display: flex; flex-direction: column; align-items: stretch !important; justify-content: center !important; }
  .header-container-in::before, .header-container-in::after { display: none; }
  .header-container-in #header { flex: 0 0 auto; align-self: stretch !important; min-width: 0; margin: 0 !important; width: auto; }
  .header-container-in #header-in { margin: 0 !important; width: auto; max-width: none; }
  .header-container-in .logo-header { justify-content: flex-start; text-align: left; }
  .header-container-in #header-in { padding: 0 168px 0 16px; justify-content: flex-start; }
  .header-container-in .site-name-text { font-size: 18px; }
  /* メニューを開いたときは、ヘッダーよりメニューを手前に */
  body:has(#navi-menu-input:checked) .header-container { z-index: 1; }
  .et-mh {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
  }
  .et-mh-book {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    background: #C8412A;
    color: #FFFFFF !important;
    font: 700 14px/1 var(--et-font-heading, system-ui, sans-serif);
    text-decoration: none;
    white-space: nowrap;
    gap: .3em;
  }
  .et-mh-book:hover { background: #A8361F; }
  .et-mh-menu {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #D9D3C6;
    border-radius: 10px;
    background: #FFFFFF;
    color: #1F3A5F;
    cursor: pointer;
  }
  .et-mh-menu:focus-visible, .et-mh-book:focus-visible { outline: 3px solid #1F3A5F; outline-offset: 2px; }
  .et-mh-bars { display: grid; gap: 4px; width: 20px; }
  .et-mh-bars span { display: block; height: 2px; border-radius: 2px; background: currentColor; }
  /* ドロワーの中：親メニューを見出しのように、サブメニューを字下げ */
  .menu-drawer > li > a { font-weight: 700; }
  .menu-drawer .sub-menu { padding-left: 12px; }
  .menu-drawer .sub-menu a { font-weight: 500; }
}
@media (max-width: 400px) {
  .et-mh-book-long { display: none; }
  .header-container-in #header-in { padding-right: 116px; }
  .header-container-in .site-name-text { font-size: 16px; }
}

/************************************
** ヘッダーのデザイン改善（2026-10-19）
** 上品な旅行雑誌 × 予約サイト：クリーム背景・2色のロゴ＋キャッチコピー・朱の下線のホバー・角丸 8px の予約ボタン
** スクロールすると少し低くなる（html.et-header-compact、header-nav.js）
************************************/
.header-container {
  background-color: rgba(247, 244, 234, .97);
  border-bottom: 1px solid #E4DED0;
  transition: box-shadow .2s ease;
}
.et-header-compact .header-container { box-shadow: 0 4px 18px rgba(20, 30, 50, .07); }
/* 管理バーと重ならないように（スマホの管理バーは高さ 46px、幅 600px 以下ではスクロールで消える） */
@media (max-width: 782px) { .admin-bar .header-container { top: 46px; } }
@media (max-width: 600px) { .admin-bar .header-container { top: 0; } }

/* ロゴ */
.header-container .logo-header { margin: 0; padding: 0; line-height: 1; }
.header-container .logo-header .site-name-text-link { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 5px; text-decoration: none; }
.header-container .logo-header .site-name-text-link:focus-visible { outline: 2px solid #1F3A5F; outline-offset: 4px; border-radius: 2px; }
.header-container-in .site-name-text,
.header-container-in.hlt-top-menu .site-name-text {
  display: block;
  font: 600 21px/1 var(--et-font-body, "Inter", system-ui, sans-serif);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #1F3A5F;
}
.et-logo-word { color: #1F3A5F; }
.et-logo-accent { color: #C8412A; }
.et-logo-tagline {
  display: block;
  font: 600 9.5px/1 var(--et-font-body, "Inter", system-ui, sans-serif);
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #6B7280;
  transition: opacity .2s ease;
}

@media (min-width: 1024px) {
  .header-container-in.hlt-top-menu { min-height: 80px; gap: 32px; transition: min-height .2s ease; }
  .header-container-in.hlt-top-menu .navi-in > ul.menu-pc { gap: 4px; }
  .header-container-in.hlt-top-menu .navi-in > ul li:not(.et-menu-cta) > a {
    position: relative;
    height: 80px;
    padding: 0 16px;
    font: 600 15px/1 var(--et-font-body, "Inter", system-ui, sans-serif);
    letter-spacing: .01em;
    color: #1F3A5F;
    transition: color .15s ease, height .2s ease;
  }
  /* ホバー：文字を朱に、下に細い朱の線 */
  .header-container-in.hlt-top-menu .navi-in > ul > li:not(.et-menu-cta) > a::before {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 22px;
    height: 2px;
    border-radius: 2px;
    background: #C8412A;
    transform: scaleX(0);
    transition: transform .2s ease;
  }
  .header-container-in.hlt-top-menu .navi-in > ul > li:not(.et-menu-cta):hover > a,
  .header-container-in.hlt-top-menu .navi-in > ul > li:not(.et-menu-cta):focus-within > a,
  .header-container-in.hlt-top-menu .navi-in > ul > li.current-menu-item > a,
  .header-container-in.hlt-top-menu .navi-in > ul > li.current-menu-ancestor > a { color: #C8412A; background: transparent; }
  .header-container-in.hlt-top-menu .navi-in > ul > li:not(.et-menu-cta):hover > a::before,
  .header-container-in.hlt-top-menu .navi-in > ul > li:not(.et-menu-cta):focus-within > a::before,
  .header-container-in.hlt-top-menu .navi-in > ul > li.current-menu-item > a::before,
  .header-container-in.hlt-top-menu .navi-in > ul > li.current-menu-ancestor > a::before { transform: scaleX(1); }
  .header-container-in.hlt-top-menu .navi-in > ul > li.menu-item-has-children > a::before { right: 26px; }

  /* Cocoon の下向き矢印アイコンは使わない（矢印は ::after の1つだけ） */
  .header-container-in.hlt-top-menu .navi-in > ul > li > a .top-has-sub { display: none; }

  /* 予約ボタン */
  .header-container-in.hlt-top-menu .navi-in > ul > li.et-menu-cta { padding-left: 16px; }
  .header-container-in.hlt-top-menu .navi-in > ul > li.et-menu-cta > a {
    min-height: 46px;
    padding: 0 24px;
    border-radius: 8px;
    background: #C8412A;
    color: #FFFFFF;
    font: 600 15px/1 var(--et-font-body, "Inter", system-ui, sans-serif);
    letter-spacing: .01em;
    box-shadow: 0 4px 12px rgba(200, 65, 42, .2);
  }
  .header-container-in.hlt-top-menu .navi-in > ul > li.et-menu-cta > a:hover { background: #A8361F; color: #FFFFFF; }
  .header-container-in.hlt-top-menu .navi-in > ul > li.et-menu-cta > a:focus-visible { outline: 3px solid #1F3A5F; outline-offset: 2px; }

  /* スクロール後：80px → 64px。キャッチコピーは隠して、記事を読む場所を広く */
  .et-header-compact .header-container-in.hlt-top-menu { min-height: 64px; }
  .et-header-compact .header-container-in.hlt-top-menu .navi-in > ul li:not(.et-menu-cta) > a { height: 64px; }
  .et-header-compact .header-container-in.hlt-top-menu .navi-in > ul > li:not(.et-menu-cta) > a::before { bottom: 14px; }
  .et-header-compact .header-container-in.hlt-top-menu .navi-in > ul > li.et-menu-cta > a { min-height: 42px; }
  .et-header-compact .header-container .et-logo-tagline { opacity: 0; height: 0; margin-top: -5px; overflow: hidden; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .header-container-in.hlt-top-menu { gap: 16px; }
  .header-container-in.hlt-top-menu .site-name-text { font-size: 18px; letter-spacing: .04em; }
  .header-container-in.hlt-top-menu .et-logo-tagline { font-size: 8.5px; letter-spacing: .14em; }
  .header-container-in.hlt-top-menu .navi-in > ul.menu-pc { gap: 0; }
  .header-container-in.hlt-top-menu .navi-in > ul li:not(.et-menu-cta) > a { padding: 0 10px; font-size: 14px; }
  .header-container-in.hlt-top-menu .navi-in > ul > li:not(.et-menu-cta) > a::before { left: 10px; right: 10px; }
  .header-container-in.hlt-top-menu .navi-in > ul > li.menu-item-has-children > a::before { right: 20px; }
  .header-container-in.hlt-top-menu .navi-in > ul > li.et-menu-cta { padding-left: 8px; }
  .header-container-in.hlt-top-menu .navi-in > ul > li.et-menu-cta > a { padding: 0 16px; font-size: 14px; }
}

/* スマホ・タブレット：ロゴ（左）＋メニューボタン（右） */
@media (max-width: 1023px) {
  .header-container-in { min-height: 64px; }
  .header-container-in #header-in { padding: 0 72px 0 16px; }
  .header-container-in .site-name-text { font-size: 18px; letter-spacing: .05em; }
  .header-container-in .et-logo-tagline { font-size: 8.5px; letter-spacing: .16em; }
  .header-container .logo-header .site-name-text-link { gap: 4px; }
  .et-mh { right: 16px; }
  .et-mh-menu { border-radius: 8px; border-color: #D9D3C6; background: #FFFFFF; }
  /* メニューの中の Book Your Trip */
  .menu-drawer li.et-menu-cta { margin-top: 12px; }
  .menu-drawer li.et-menu-cta > a { display: flex; width: 100%; min-height: 48px; border-radius: 8px; box-sizing: border-box; font-family: var(--et-font-body, "Inter", system-ui, sans-serif); font-weight: 600; }
}
@media (max-width: 400px) {
  .header-container-in #header-in { padding-right: 68px; }
  .header-container-in .site-name-text { font-size: 16px; letter-spacing: .04em; }
  .header-container-in .et-logo-tagline { font-size: 7.5px; letter-spacing: .12em; }
}
@media (prefers-reduced-motion: reduce) {
  .header-container, .header-container-in.hlt-top-menu, .header-container-in.hlt-top-menu .navi-in > ul li > a, .header-container-in.hlt-top-menu .navi-in > ul > li > a::before, .et-logo-tagline { transition: none !important; }
}

/* ---------- 2026-11-08 サイト内検索（パソコンのヘッダー。スマホは画面下のバーの Search） ---------- */
.et-hsearch { position: relative; flex: 0 0 auto; }
.et-hsearch-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #D9D3C6; border-radius: 50%; background: #FFFFFF; color: #1F3A5F; cursor: pointer; }
.et-hsearch-btn:hover, .et-hsearch-btn[aria-expanded="true"] { border-color: #1F3A5F; }
.et-hsearch-btn:focus-visible { outline: 3px solid #1F3A5F; outline-offset: 2px; }
.et-hsearch-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 1000; width: 380px; padding: 12px; background: #FFFFFF; border: 1px solid #E6E1D6; border-radius: 12px; box-shadow: 0 8px 24px rgba(31, 58, 95, .12); }
.et-hsearch-panel[hidden] { display: none; }
.et-hsearch-panel form { display: flex; gap: 8px; margin: 0; }
.et-hsearch-panel input[type="search"] { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid #D9D3C6; border-radius: 8px; font-size: 16px; color: #1F3A5F; background: #FFFFFF; }
.et-hsearch-panel input[type="search"]:focus { outline: none; border-color: #1F3A5F; box-shadow: 0 0 0 3px rgba(31, 58, 95, .18); }
.et-hsearch-panel button[type="submit"] { height: 44px; padding: 0 16px; border: 0; border-radius: 8px; background: #1F3A5F; color: #FFFFFF; font-weight: 600; cursor: pointer; }
/* 1279px 以下は検索ボタンを入れるとメニューが2段になるので出さない（1280px 以上のパソコンだけ。スマホは画面下の Search） */
@media (max-width: 1279px) { .et-hsearch { display: none; } }
/* 検索ボタンを足した分、メニューが2段にならないよう、1280px 以上ではメニューの左右の余白を少し詰める（ヘッダーの中身は最大 1280px なので、広い画面でも同じ） */
@media (min-width: 1280px) {
  .header-container-in.hlt-top-menu { gap: 16px; }
  .header-container-in.hlt-top-menu .navi-in > ul li:not(.et-menu-cta) > a { padding: 0 12px; }
  .header-container-in.hlt-top-menu .navi-in > ul > li:not(.et-menu-cta) > a::before { left: 12px; right: 12px; }
  .header-container-in.hlt-top-menu .navi-in > ul > li.menu-item-has-children > a::before { right: 22px; }
}