/* ===================================
   メニューレイアウト - 上部2カラム、下部3カラム
   =================================== */

/* トグルボタン（ハンバーガーメニュー） */
#toggle-trigger-button {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  left: auto !important;
  z-index: 1001 !important;
  font-size: 50px !important;
  font-weight: 300 !important;
  background: white;
  color: var(--color-dark-green);
  border: none;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

#toggle-trigger-button.is-active {
  background: white;
  color: var(--color-dark-green);
  align-items: center;
}

.menu-container {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 0 0.8px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 0;
  align-items: start;
  row-gap: 80px;
}

/* メインナビ：左カラム（1-6列目：5列分 = 50%） */
.main-nav-left {
  grid-column: 1 / 6;
  grid-row: 1;
}

/* メインナビ：右カラム（6-11列目：5列分 = 50%） */
.main-nav-right {
  grid-column: 4 / 14;
  grid-row: 1;
}

/* サブナビ：左カラム（1-4列目：3列分 = 30%） */
.sub-nav-left {
  grid-column: 1 / 4;
  grid-row: 2;
}

/* サブナビ：中央カラム（6-9列目：3列分 = 30%） - メインナビ右と同じ6列目から開始 */
.sub-nav-center {
  grid-column: 4 / 9;
  grid-row: 2;
}

/* サブナビ：右カラム（10-13列目：3列分） - 9列目を空けてスペースを作る */
.sub-nav-right {
  grid-column: 10 / 14;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* リストの基本スタイルリセット */
.main-nav-list,
.sub-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* メインナビのリストアイテム */
.main-nav-list li {
  margin-bottom: 24px;
}

.main-nav-list li:last-child {
  margin-bottom: 0;
}

.main-nav-list a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s ease;
}

.main-nav-list a:hover {
  opacity: 0.7;
}

/* ナビタイトル（ABOUT, PEOPLE等） */
.nav-title {
  display: block;
  font-size: clamp(32px, 4.2vw, 53px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: normal;
  white-space: nowrap;
}

/* ナビ説明文 */
.nav-description {
  font-weight: 700;
  font-size: clamp(14px, 1.4vw, 18px);
  letter-spacing: 0.05em;
  line-height: normal;
  /* text-align: left; (左揃え、デフォルト) */
}

/* 小さい文字サイズ */
.br-mobile {
  font-size: clamp(10px, 1.1vw, 14px);
  display: inline;
}

/* サブナビのリストアイテム */
.sub-nav-list li {
  margin-bottom: 16px;
}

.sub-nav-list li:last-child {
  margin-bottom: 0;
}

/* 右カラムのサブナビ：複数のulがある場合 */
.sub-nav-right .sub-nav-list {
  margin-bottom: 16px;
  text-align: right;
}

.sub-nav-right .sub-nav-list:last-child {
  margin-bottom: 0;
}

.sub-nav-right .sub-nav-list li {
  display: flex;
  justify-content: flex-end;
}

.sub-nav-right .sub-nav-list a {
  display: inline-flex;
}

.sub-nav-list a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: clamp(14px, 1.8vw, 23px);
  color: #ffffff;
  transition: opacity 0.3s ease;
  white-space: nowrap;
  font-weight: 700;
}

.sub-nav-list a:hover {
  opacity: 0.7;
}

/* サブナビ中央カラム：arrow-iconで右揃え */
.sub-nav-center .sub-nav-list {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  width: auto;
  /* min-width: 100%; */
}

.sub-nav-center .sub-nav-list li {
  position: relative;
}

/* 1行目：Instagramは左揃え、menu-arrow-iconまで10px */
.sub-nav-center .sub-nav-list li:first-child {
  width: auto;
}

.sub-nav-center .sub-nav-list li:first-child a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.sub-nav-center .sub-nav-list li:first-child .menu-arrow-icon {
  margin-left: 0;
}

/* 2行目：menu-arrow-iconの位置を1行目のmenu-arrow-iconと揃える */
.sub-nav-center .sub-nav-list li:nth-child(2) {
  width: 100%;
  min-width: max-content;
}

.sub-nav-center .sub-nav-list li:nth-child(2) a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.sub-nav-center .sub-nav-list li:nth-child(2) .menu-arrow-icon {
  margin-left: 0;
  flex-shrink: 0;
}

/* 矢印アイコン（menu-layout.css専用） - SVG画像版 */
.menu-arrow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}

.menu-arrow-icon img {
  width: clamp(14px, 1.8vw, 23px);
  height: clamp(14px, 1.8vw, 23px);
  display: block;
}

/* レスポンシブ対応 */
/* PC版（769px以上）での margin 適用 */
@media screen and (min-width: 769px) {
  .main-nav-right {
    margin-left: 160px;
  }

  .sub-nav-center {
    margin-left: 160px;
  }

  .sub-nav-right {
    margin-left: 140px;
  }
}

@media screen and (min-width: 1366px) {
  .menu-container {
    column-gap: 0.8px;
  }
}

@media screen and (max-width: 1365px) and (min-width: 1025px) {
  .menu-container {
    column-gap: 0.8px;
  }
}

@media screen and (max-width: 1024px) {
  .menu-container {
    column-gap: 10px;
  }
}

/* 高さが限られた画面（960x600など）への対応 */
@media screen and (min-width: 769px) and (max-height: 700px) {
  .menu-container {
    padding: 20px 0;
    row-gap: 40px;
  }

  .main-nav-list li {
    margin-bottom: 16px;
  }

  .sub-nav-list li {
    margin-bottom: 12px;
  }
}

@media screen and (max-width: 768px) {
  .menu-container {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }

  /* モバイルでは全て1カラムに */
  .main-nav-left,
  .main-nav-right,
  .sub-nav-left,
  .sub-nav-center,
  .sub-nav-right {
    grid-column: 1;
  }

  .main-nav-left {
    grid-row: 1;
  }

  .main-nav-right {
    grid-row: 2;
    margin-bottom: 40px;
  }

  .sub-nav-left {
    grid-row: 3;
    margin-bottom: -20px;
  }

  .sub-nav-center {
    grid-row: 4;
    margin-bottom: -20px;
  }

  .sub-nav-right {
    grid-row: 5;
  }

  /* トグルボタンのレスポンシブ */
  #toggle-trigger-button {
    top: 20px !important;
    right: 20px !important;
    width: 50px !important;
    height: 50px !important;
    font-size: 40px !important;
  }

  /* メインナビのリストアイテム */
  .main-nav-list li {
    margin-bottom: 20px;
  }

  .header-logo {
    width: 245.64px;
  }

  /* サブナビ：右カラム（10-13列目：3列分） - 9列目を空けてスペースを作る */
  .sub-nav-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .sub-nav-right .sub-nav-list {
    margin-bottom: 0;
  }

  /* サブナビのリストアイテム */
  .sub-nav-list li {
    margin-bottom: 0px;
  }
}