/* ============================================================
   hamburger.css
   WIDES 共通ハンバーガーメニュー
   ------------------------------------------------------------
   ★ 完全修正版
   ------------------------------------------------------------
   ・通常ページ / コラムページ共通
   ・左上ボタン
   ・左側ドロワー
   ・ガラス・半透明
   ・背景ぼかし
   ・コラム一覧アコーディオン
   ・スマホ対応
   ・通常ページのリンクを邪魔しない
   ・右側アコーディオンを邪魔しない
   ・indexグリッドを邪魔しない
   ・TOPボタンを邪魔しない
   ・全画面 wrapper を廃止
   ・×二重表示対策
   ・ドロワー内の×を右端の丸アイコンに配置
============================================================ */


/* ============================================================
   基本
   ------------------------------------------------------------
   ★ 最重要
   ------------------------------------------------------------
   hamburger-wrapper 自体を画面全体にしない。

   以前：
     position: fixed;
     inset: 0;

   これを廃止。

   wrapper はハンバーガー関連の「入れ物」だけ。
============================================================ */

.hamburger-wrapper {

  position: static;

  width: 0;

  height: 0;

  margin: 0;

  padding: 0;

  border: 0;

  pointer-events: none;

}


/* ============================================================
   ハンバーガーボタン
============================================================ */

.hamburger-button {

  position: fixed;

  top: 22px;

  left: 20px;

  right: auto;

  z-index: 99992;

  width: 56px;

  height: 56px;

  margin: 0;

  padding: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 6px;

  box-sizing: border-box;

  border:
    1px solid
    rgba(255,255,255,0.72);

  border-radius: 16px;

  background:
    rgba(255,255,255,0.52);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  box-shadow:
    0 8px 28px
    rgba(0,0,0,0.14);

  cursor: pointer;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform:
    translateY(-10px)
    scale(0.94);

  transition:
    opacity 0.35s ease,
    visibility 0.35s ease,
    transform 0.35s ease,
    background 0.25s ease;

}


/* ============================================================
   ハンバーガー表示
   ------------------------------------------------------------
   300pxスクロール後
============================================================ */

.hamburger-wrapper.is-visible
.hamburger-button {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform:
    translateY(0)
    scale(1);

}


/* ============================================================
   ボタン hover
============================================================ */

.hamburger-button:hover {

  background:
    rgba(255,255,255,0.72);

}


/* ============================================================
   3本線
============================================================ */

.hamburger-button span {

  display: block;

  width: 25px;

  height: 2px;

  margin: 0;

  padding: 0;

  border-radius: 999px;

  background:
    rgba(45,55,65,0.88);

  transition:
    transform 0.3s ease,
    opacity 0.3s ease;

}


/* ============================================================
   ×状態
============================================================ */

.hamburger-button.is-open
span:nth-child(1) {

  transform:
    translateY(8px)
    rotate(45deg);

}


.hamburger-button.is-open
span:nth-child(2) {

  opacity: 0;

}


.hamburger-button.is-open
span:nth-child(3) {

  transform:
    translateY(-8px)
    rotate(-45deg);

}


/* ============================================================
   背景
   ------------------------------------------------------------
   ★ 通常時は完全にページへクリックを通す
============================================================ */

.hamburger-backdrop {

  position: fixed;

  inset: 0;

  z-index: 99990;

  margin: 0;

  padding: 0;

  background:
    rgba(30,40,50,0.18);

  backdrop-filter:
    blur(5px);

  -webkit-backdrop-filter:
    blur(5px);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;

}


/* ============================================================
   背景 OPEN
   ------------------------------------------------------------
   ★ メニューOPEN時だけページを覆う
============================================================ */

.hamburger-wrapper.is-open
.hamburger-backdrop {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

}


/* ============================================================
   ドロワー
============================================================ */

.hamburger-drawer {

  position: fixed;

  top: 0;

  left: 0;

  right: auto;

  bottom: 0;

  z-index: 99991;

  width:
    min(390px, 88vw);

  height: 100vh;

  margin: 0;

  box-sizing: border-box;

  overflow-x: hidden;

  overflow-y: auto;

  padding:
    24px
    20px
    40px;

  background:
    rgba(255,255,255,0.72);

  border-top: 0;

  border-right:
    1px solid
    rgba(255,255,255,0.78);

  border-bottom: 0;

  border-left: 0;

  box-shadow:
    12px 0 40px
    rgba(0,0,0,0.16);

  backdrop-filter:
    blur(24px)
    saturate(130%);

  -webkit-backdrop-filter:
    blur(24px)
    saturate(130%);

  transform:
    translateX(-105%);

  visibility: hidden;

  pointer-events: none;

  transition:
    transform 0.4s
    cubic-bezier(.22,.61,.36,1),
    visibility 0.4s ease;

}


/* ============================================================
   ドロワー OPEN
============================================================ */

.hamburger-wrapper.is-open
.hamburger-drawer {

  transform:
    translateX(0);

  visibility: visible;

  pointer-events: auto;

}


/* ============================================================
   ドロワーヘッダー
   ------------------------------------------------------------
   ★ MENUは左
   ★ ×は右端
   ★ MENUと×が重ならない
============================================================ */

.hamburger-header {

  width: 100%;

  min-height: 52px;

  margin:
    0
    0
    18px
    0;

  padding:
    0
    0
    18px
    0;

  box-sizing: border-box;

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: flex-start;

  gap: 0;

  border-bottom:
    1px solid
    rgba(80,100,120,0.14);

}


/* ============================================================
   MENU
============================================================ */

.hamburger-title {

  flex:
    1 1 auto;

  min-width: 0;

  width: auto;

  margin: 0;

  padding: 0;

  display: block;

  overflow: hidden;

  font-size: 20px;

  font-weight: 600;

  letter-spacing: 0.12em;

  line-height: 1.4;

  white-space: nowrap;

  color:
    rgba(45,55,65,0.88);

}


/* ============================================================
   ×ボタン
   ------------------------------------------------------------
   ★ 右端に配置
   ★ 丸アイコン
   ★ MENUとは完全に分離
   ★ 絶対配置を使わない
============================================================ */

.hamburger-close {

  flex:
    0 0 42px;

  width: 42px;

  height: 42px;

  min-width: 42px;

  min-height: 42px;

  margin:
    0
    0
    0
    14px;

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  box-sizing: border-box;

  border:
    1px solid
    rgba(255,255,255,0.72);

  border-radius: 50%;

  background:
    rgba(255,255,255,0.52);

  color:
    rgba(45,55,65,0.82);

  font-family:
    Arial,
    sans-serif;

  font-size: 27px;

  font-weight: 400;

  line-height: 1;

  text-align: center;

  cursor: pointer;

  box-shadow:
    0 5px 18px
    rgba(0,0,0,0.08);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  transition:
    background 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;

}


/* ============================================================
   × hover
============================================================ */

.hamburger-close:hover {

  background:
    rgba(255,255,255,0.78);

  transform:
    rotate(90deg);

  box-shadow:
    0 7px 22px
    rgba(0,0,0,0.12);

}


/* ============================================================
   検索
============================================================ */

.hamburger-search {

  width: 100%;

  margin:
    0
    0
    22px
    0;

  padding: 0;

}


/* ============================================================
   検索フォーム
============================================================ */

.hamburger-search-form {

  width: 100%;

  margin: 0;

  padding: 5px;

  box-sizing: border-box;

  display: flex;

  align-items: center;

  gap: 8px;

  border:
    1px solid
    rgba(255,255,255,0.75);

  border-radius: 14px;

  background:
    rgba(255,255,255,0.42);

  box-shadow:
    inset 0 1px 2px
    rgba(255,255,255,0.65),
    0 6px 20px
    rgba(0,0,0,0.05);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

}


/* ============================================================
   検索入力
============================================================ */

.hamburger-search-input {

  flex:
    1 1 auto;

  min-width: 0;

  width: auto;

  height: 42px;

  margin: 0;

  padding:
    0
    12px;

  box-sizing: border-box;

  border: 0;

  outline: none;

  background:
    transparent;

  color:
    rgba(45,55,65,0.9);

  font-size: 14px;

}


/* ============================================================
   placeholder
============================================================ */

.hamburger-search-input::placeholder {

  color:
    rgba(80,90,100,0.55);

}


/* ============================================================
   検索ボタン
============================================================ */

.hamburger-search-button {

  flex:
    0 0 42px;

  width: 42px;

  height: 42px;

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  border: 0;

  border-radius: 10px;

  background:
    rgba(255,255,255,0.56);

  cursor: pointer;

  font-size: 17px;

  transition:
    background 0.25s ease,
    transform 0.25s ease;

}


/* ============================================================
   検索ボタン hover
============================================================ */

.hamburger-search-button:hover {

  background:
    rgba(255,255,255,0.8);

  transform:
    scale(1.04);

}


/* ============================================================
   ナビゲーション
============================================================ */

.hamburger-nav {

  width: 100%;

  margin: 0;

  padding: 0;

}


/* ============================================================
   メニューリスト
============================================================ */

.hamburger-menu-list {

  width: 100%;

  margin: 0;

  padding: 0;

  list-style: none;

}


/* ============================================================
   メニュー項目
============================================================ */

.hamburger-menu-item {

  width: 100%;

  margin:
    0
    0
    8px
    0;

  padding: 0;

}


/* ============================================================
   通常リンク
============================================================ */

.hamburger-menu-item > a {

  display: flex;

  align-items: center;

  width: 100%;

  min-height: 48px;

  margin: 0;

  padding:
    10px
    14px;

  box-sizing: border-box;

  border:
    1px solid
    rgba(255,255,255,0.62);

  border-radius: 13px;

  background:
    rgba(255,255,255,0.34);

  color:
    rgba(45,55,65,0.88);

  text-decoration: none;

  font-size: 15px;

  box-shadow:
    0 5px 16px
    rgba(0,0,0,0.045);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  transition:
    background 0.25s ease,
    transform 0.25s ease;

}


/* ============================================================
   通常リンク hover
============================================================ */

.hamburger-menu-item > a:hover {

  background:
    rgba(255,255,255,0.62);

  transform:
    translateX(3px);

}


/* ============================================================
   親メニュー
============================================================ */

.hamburger-parent-button {

  width: 100%;

  min-height: 48px;

  margin: 0;

  padding:
    10px
    14px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  box-sizing: border-box;

  border:
    1px solid
    rgba(255,255,255,0.62);

  border-radius: 13px;

  background:
    rgba(255,255,255,0.34);

  color:
    rgba(45,55,65,0.88);

  font-size: 15px;

  text-align: left;

  cursor: pointer;

  box-shadow:
    0 5px 16px
    rgba(0,0,0,0.045);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  transition:
    background 0.25s ease;

}


/* ============================================================
   親メニュー hover
============================================================ */

.hamburger-parent-button:hover {

  background:
    rgba(255,255,255,0.62);

}


/* ============================================================
   親矢印
============================================================ */

.hamburger-arrow {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex:
    0 0 24px;

  width: 24px;

  height: 24px;

  margin-left: 10px;

  font-size: 22px;

  pointer-events: none;

  transition:
    transform 0.3s ease;

}


/* ============================================================
   親矢印 OPEN
============================================================ */

.hamburger-menu-item.is-open
.hamburger-arrow {

  transform:
    rotate(90deg);

}


/* ============================================================
   子メニュー
============================================================ */

.hamburger-submenu {

  max-height: 0;

  overflow: hidden;

  margin: 0;

  padding: 0;

  list-style: none;

  opacity: 0;

  transition:
    max-height 0.35s ease,
    opacity 0.3s ease,
    padding 0.35s ease;

}


/* ============================================================
   子メニュー OPEN
============================================================ */

.hamburger-menu-item.is-open
.hamburger-submenu {

  max-height: 1000px;

  padding:
    7px
    0
    2px;

  opacity: 1;

}


/* ============================================================
   子メニュー項目
============================================================ */

.hamburger-submenu-item {

  width: 100%;

  margin:
    0
    0
    5px
    0;

  padding: 0;

}


/* ============================================================
   子リンク
============================================================ */

.hamburger-submenu-item a {

  display: block;

  width: 100%;

  box-sizing: border-box;

  padding:
    9px
    14px
    9px
    28px;

  border-radius: 10px;

  color:
    rgba(55,65,75,0.82);

  text-decoration: none;

  font-size: 14px;

  background:
    rgba(255,255,255,0.22);

  transition:
    background 0.25s ease,
    transform 0.25s ease;

}


/* ============================================================
   子リンク hover
============================================================ */

.hamburger-submenu-item a:hover {

  background:
    rgba(255,255,255,0.52);

  transform:
    translateX(3px);

}


/* ============================================================
   コラム一覧
============================================================ */

.hamburger-column-archive {

  width: 100%;

  margin:
    24px
    0
    0;

  padding: 0;

}


/* ============================================================
   hidden
============================================================ */

.hamburger-column-archive[hidden] {

  display: none !important;

}


/* ============================================================
   コラムセクションタイトル
============================================================ */

.hamburger-section-title {

  width: 100%;

  min-height: 48px;

  margin: 0;

  padding:
    10px
    14px;

  display: flex;

  align-items: center;

  box-sizing: border-box;

  border:
    1px solid
    rgba(255,255,255,0.62);

  border-radius: 13px;

  background:
    rgba(255,255,255,0.34);

  color:
    rgba(45,55,65,0.88);

  font-size: 15px;

  font-weight: 600;

  box-shadow:
    0 5px 16px
    rgba(0,0,0,0.045);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

}


/* ============================================================
   コラム一覧
============================================================ */

.hamburger-column-list {

  width: 100%;

  margin:
    8px
    0
    0;

  padding: 0;

}


/* ============================================================
   年
============================================================ */

.hamburger-archive-year {

  width: 100%;

  margin:
    0
    0
    8px;

  padding: 0;

}


/* ============================================================
   年ボタン
============================================================ */

.hamburger-archive-year-button {

  width: 100%;

  min-height: 48px;

  margin: 0;

  padding:
    10px
    14px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  box-sizing: border-box;

  border:
    1px solid
    rgba(255,255,255,0.62);

  border-radius: 13px;

  background:
    rgba(255,255,255,0.34);

  color:
    rgba(45,55,65,0.88);

  font-size: 15px;

  font-weight: 500;

  text-align: left;

  cursor: pointer;

  box-shadow:
    0 5px 16px
    rgba(0,0,0,0.045);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

}


/* ============================================================
   年 hover
============================================================ */

.hamburger-archive-year-button:hover {

  background:
    rgba(255,255,255,0.62);

}


/* ============================================================
   年矢印
============================================================ */

.hamburger-archive-arrow {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex:
    0 0 24px;

  width: 24px;

  height: 24px;

  margin-left: 10px;

  font-size: 21px;

  pointer-events: none;

  transition:
    transform 0.3s ease;

}


/* ============================================================
   年 OPEN
============================================================ */

.hamburger-archive-year.is-open
.hamburger-archive-arrow {

  transform:
    rotate(90deg);

}


/* ============================================================
   月一覧
============================================================ */

.hamburger-archive-months {

  max-height: 0;

  overflow: hidden;

  margin: 0;

  padding: 0;

  opacity: 0;

  transition:
    max-height 0.35s ease,
    opacity 0.3s ease,
    padding 0.35s ease;

}


/* ============================================================
   月一覧 OPEN
============================================================ */

.hamburger-archive-year.is-open
.hamburger-archive-months {

  max-height: 3000px;

  opacity: 1;

  padding:
    7px
    0
    2px
    12px;

}


/* ============================================================
   月
============================================================ */

.hamburger-archive-month {

  width: 100%;

  margin:
    0
    0
    5px;

  padding: 0;

}


/* ============================================================
   月ボタン
============================================================ */

.hamburger-archive-month-button {

  width: 100%;

  min-height: 44px;

  margin: 0;

  padding:
    8px
    12px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  box-sizing: border-box;

  border:
    1px solid
    rgba(255,255,255,0.52);

  border-radius: 11px;

  background:
    rgba(255,255,255,0.27);

  color:
    rgba(55,65,75,0.84);

  font-size: 14px;

  text-align: left;

  cursor: pointer;

  transition:
    background 0.25s ease;

}


/* ============================================================
   月 hover
============================================================ */

.hamburger-archive-month-button:hover {

  background:
    rgba(255,255,255,0.55);

}


/* ============================================================
   月矢印
============================================================ */

.hamburger-archive-month
.hamburger-archive-arrow {

  font-size: 18px;

}


/* ============================================================
   月 OPEN
============================================================ */

.hamburger-archive-month.is-open
.hamburger-archive-arrow {

  transform:
    rotate(90deg);

}


/* ============================================================
   記事
============================================================ */

.hamburger-archive-posts {

  max-height: 0;

  overflow: hidden;

  margin: 0;

  padding: 0;

  list-style: none;

  opacity: 0;

  transition:
    max-height 0.35s ease,
    opacity 0.3s ease,
    padding 0.35s ease;

}


/* ============================================================
   記事 OPEN
============================================================ */

.hamburger-archive-month.is-open
.hamburger-archive-posts {

  max-height: 2000px;

  padding:
    5px
    0
    5px
    10px;

  opacity: 1;

}


/* ============================================================
   記事項目
============================================================ */

.hamburger-archive-posts li {

  margin:
    0
    0
    4px;

  padding: 0;

}


/* ============================================================
   記事リンク
============================================================ */

.hamburger-archive-posts a {

  display: block;

  width: 100%;

  box-sizing: border-box;

  padding:
    9px
    12px;

  border-radius: 10px;

  background:
    rgba(255,255,255,0.22);

  color:
    rgba(55,65,75,0.82);

  text-decoration: none;

  font-size: 13px;

  line-height: 1.6;

  transition:
    background 0.25s ease,
    transform 0.25s ease;

}


/* ============================================================
   記事リンク hover
============================================================ */

.hamburger-archive-posts a:hover {

  background:
    rgba(255,255,255,0.55);

  transform:
    translateX(3px);

}


/* ============================================================
   コラムなし
============================================================ */

.hamburger-archive-empty {

  margin:
    10px
    0;

  padding:
    12px;

  color:
    rgba(70,80,90,0.65);

  font-size: 13px;

}


/* ============================================================
   検索ヒット
============================================================ */

.hamburger-search-hit {

  outline:
    3px solid
    rgba(120,160,190,0.35);

  outline-offset: 4px;

  border-radius: 6px;

}


/* ============================================================
   body
   ------------------------------------------------------------
   メニューOPEN時だけスクロール停止
============================================================ */

body.hamburger-open {

  overflow: hidden;

}


/* ============================================================
   スマートフォン
============================================================ */

@media (
  max-width: 767px
) {

  .hamburger-button {

    top: 14px;

    left: 14px;

    width: 52px;

    height: 52px;

    border-radius: 14px;

  }


  .hamburger-drawer {

    width:
      min(360px, 92vw);

    padding:
      18px
      15px
      32px;

  }


  /* ==========================================================
     スマホ：ドロワーヘッダー
     ========================================================== */

  .hamburger-header {

    min-height: 48px;

    gap: 0;

    padding-bottom: 16px;

  }


  .hamburger-title {

    font-size: 18px;

    letter-spacing: 0.08em;

  }


  /* ==========================================================
     スマホ：右端の丸い×
     ========================================================== */

  .hamburger-close {

    flex:
      0 0 40px;

    width: 40px;

    height: 40px;

    min-width: 40px;

    min-height: 40px;

    margin-left: 14px;

    font-size: 26px;

  }

}


/* ============================================================
   小型スマートフォン
============================================================ */

@media (
  max-width: 420px
) {

  .hamburger-drawer {

    width: 100%;

  }

}


/* ============================================================
   アクセシビリティ
============================================================ */

@media (
  prefers-reduced-motion: reduce
) {

  .hamburger-button,
  .hamburger-button span,
  .hamburger-backdrop,
  .hamburger-drawer,
  .hamburger-submenu,
  .hamburger-arrow,
  .hamburger-archive-months,
  .hamburger-archive-posts,
  .hamburger-archive-arrow {

    transition: none;

  }

}


/* ============================================================
   ドロワーOPEN時
   ------------------------------------------------------------
   ★ 左上の四角いハンバーガーアイコンを非表示
   ★ ドロワー右上の丸い×だけを表示
============================================================ */

/* ============================================================
   左上ハンバーガー
   ------------------------------------------------------------
   OPENしても3本線自体は×に変形させない
============================================================ */

.hamburger-button.is-open span:nth-child(1),
.hamburger-button.is-open span:nth-child(2),
.hamburger-button.is-open span:nth-child(3) {

  transform: none;

  opacity: 1;

}


/* ============================================================
   ドロワーOPEN時
   ------------------------------------------------------------
   左上の四角い☰を完全非表示
============================================================ */

.hamburger-wrapper.is-open
.hamburger-button {

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform:
    translateY(-10px)
    scale(0.94);

}