@charset "UTF-8";
/** メニューを中央に配置するためのインナー */
  .section-inner {
    width: 980px;
    max-width: 100%;
    margin: auto;
  }

  /** PC 用 */
  @media (min-width: 769px) {

    /** グローバルナビ項目 (1階層目) */
    .global-nav-item {
      display: flex;
      position: relative;
    }

    /* メガメニューを親要素ではなく画面幅基準で広げるため */
    .global-nav-item.position-static-bk {
      position: static !important;
    }

    .global-nav-item>a {
      display: block;
      position: relative;
      width: 100%;
      padding: 10px 0;
      color: #3D2B6B;
      text-decoration: none;
      transform: rotate(0.05deg);
    }

    .global-nav-item>a:hover {
      color: #D25097;
      opacity: 1;
    }

    /** メガメニュー本体 (PC) */
    .mega-menu {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      background: #ffffff;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
      opacity: 0;
      pointer-events: none;
      transition: 0.3s opacity ease;
      z-index: 100;
      padding: 30px 0;
      text-align: left;
    }

    .global-nav-item:hover .mega-menu,
    .mega-menu:hover {
      opacity: 1;
      pointer-events: all;
    }

    .mega-menu-grid {
      display: flex;
      justify-content: space-between;
      gap: 15px;
    }

    .mega-menu-card {
      flex: 1;
      display: block;
      background: #f8f9fa;
      padding: 15px;
      border-radius: 4px;
      text-decoration: none;
      color: #3D2B6B;
      transition: background 0.2s, color 0.2s;
    }

    .mega-menu-card:hover {
      background: #f1eef6;
      color: #D25097;
    }

    .mega-menu-card .fw-bold {
      font-weight: bold;
      font-size: 14px;
      margin-bottom: 5px;
    }

    .mega-menu-card .small {
      font-size: 12px;
      color: #6c757d;
      margin: 0;
    }
  }

  /** スマホ 用 */
  @media (max-width: 768px) {

    /** グローバルナビリスト (1階層目) */
    .global-nav-item-list {
      width: 100%;
      height: 100vh;
      position: fixed;
      top: 60px;
      left: 100%;
      margin: auto;
      overflow: auto;
      z-index: 100;
      background: #7B5EA7;
      transition: 0.2s all;
      pointer-events: none;
    }

    .global-nav.open .global-nav-item-list {
      left: 0;
      pointer-events: all;
    }

    /** グローバルナビ項目 (1階層目) のリンク */
    .global-nav-item a {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      position: relative;
      width: 100%;
      padding: 15px 30px;
      font-size: 16px;
      color: white;
      text-decoration: none;
      transform: rotate(0.05deg);
      transition: 0.2s all;
    }

    .global-nav-item a:hover {
      background: hsl(200, 100%, 97%);
      color: #2a2d4e;
    }

    /* スマホ時のメガメニュー（縦並びに展開） */
    .mega-menu {
      background: rgba(0, 0, 0, 0.15);
      padding: 5px 0;
    }

    .mega-menu-grid {
      display: flex;
      flex-direction: column;
    }

    .mega-menu-card {
      display: block;
      padding: 12px 20px 12px 45px;
      color: white;
      text-decoration: none;
      background: transparent;
      transition: 0.2s all;
    }

    .mega-menu-card:hover {
      background: rgba(255, 255, 255, 0.15);
      color: white;
    }

    .mega-menu-card .small {
      color: #e0e0e0;
      font-size: 11px;
    }

    /** トグルボタン */
    .global-nav-button {
      box-sizing: border-box;
      position: fixed;
      top: 0;
      right: 0;
      width: 60px;
      height: 60px;
      background: #7B5EA7;
      z-index: 101;
      cursor: pointer;
    }

    .global-nav-button-icon {
      position: absolute;
      top: calc(50% - 1px);
      left: 0;
      width: calc(100% - 30px);
      height: 2px;
      margin-left: 15px;
      background: white;
      z-index: 100;
    }

    .global-nav-button-icon::before {
      position: relative;
      top: -10px;
      display: block;
      content: "";
      height: 2px;
      background: white;
      transition: 0.1s all;
    }

    .global-nav-button-icon::after {
      position: relative;
      top: 8px;
      display: block;
      content: "";
      height: 2px;
      background: white;
      transition: 0.1s all;
    }

    .global-nav-button.open .global-nav-button-icon {
      background: transparent;
    }

    .global-nav-button.open .global-nav-button-icon::before {
      top: -6px;
      transform: translateY(6px) rotate(45deg);
    }

    .global-nav-button.open .global-nav-button-icon::after {
      top: 3px;
      transform: translateY(-5px) rotate(-45deg);
    }
  }