/* Desktop navigation is hidden by default on mobile */
/* ==================================================
    Mobile-First Styles
    (Default = Mobile Accordion/Hamburger Menu)
    ================================================== */
@media screen and (max-width: 768px) {
  /* Desktop navigation is hidden by default on mobile */
  .dt_ygnav {
    display: none;
    /* z-index: 10000000; */
  }

  /* Mobile Navigation Container */
  .mobile_nav {
    position: absolute;
    top: 100%; /* header_inclの高さの一番下に揃える */
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    color: #fff;
  }

  /* li にホバー時の背景色を付与 */
  .mobile_nav li:hover {
    background: #26ccff;
  }

  /* Accordion Menu */
  .accordion-menu {
    display: none;
    width: 100%;
    max-width: 100%;
    background: linear-gradient(#26ccff, #0026ac);
    z-index: 998;
    top: 106px;
  }

  .accordion-menu li {
    list-style: none;
    position: relative; /* 疑似要素の基準 */
  }

  /* Dropdown Link */
  .dropdownlink {
    cursor: pointer;
    display: flex; /* ✅ コンテンツに合わせて高さを調整するためにflexboxを使用 */
    align-items: center; /* ✅ テキストを垂直方向に中央揃え */
    padding: 10px 10px 10px 45px;
    font-size: 16px;
    color: #fff;
    position: relative;
    line-height: 1.8; /* 高さ調整 */
    -webkit-transition: none;
    transition: none;
    z-index: 0;
  }

  .dropdownlink > a {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
    color: #fff;
    text-decoration: none;
    padding: 0; /* ✅ 親のパディングを利用するため0に設定 */
    box-sizing: border-box;
    background: transparent;
    pointer-events: auto;
  }

  .dropdownlink a,
  .dropdownlink i {
    pointer-events: auto;
  }

  .dropdownlink a {
    color: #fff;
  }

  .dropdownlink::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #fff;
  }

  /* 最後のドロップダウンリンクだけ別の色に変更 */
  .accordion-menu li:last-child .dropdownlink::after {
    background: #0026ac;  /* 例: ゴールドに変更 */
  }

  .dropdownlink:hover::after {
    height: 3px;
    background: #FFD700;
    transform: none;
  }

  /* 最後のドロップダウンリンクだけホバー時の色を別に指定 */
  .accordion-menu li:last-child .dropdownlink:hover::after {
    background: #FFD700;  /* 例: 水色に変化 */
  }

  .accordion-menu li:last-child .dropdownlink::after {
    bottom: -1px;
  }

  .dropdownlink:hover > a,
  .dropdownlink:hover {
    color: #FFD700;
  }

  .accordion-menu li.open .dropdownlink,
  .accordion-menu li.open .dropdownlink a {
    color: #fff;
  }

  .dropdownlink i {
    position: absolute;
    top: 14px;
    left: 16px;
  }

  /* Font Awesome 用矢印アイコン（mobile） */
  .dropdownlink .fa-chevron-down {
    right: 12px;
    left: auto;
    /* 追加：回転アニメーション用 */
    transition: transform 0.3s ease;
  }

  /* サブメニュー展開時に矢印を回転 */
  .accordion-menu li.open .dropdownlink .fa-chevron-down {
    transform: rotate(180deg);
  }

  /* Submenu */
  .submenuItems {
    position: relative;
    font-size: 16px;
    background: #002EE6;
    z-index: 997;
    top: 0;
    display: none;
  }

  .accordion-menu li.open > .submenuItems {
    display: block;
  }

  .submenuItems li {
    position: relative;
  }

  .submenuItems li::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #fff;
  }

  .submenuItems li:hover::after {
    height: 2px;
    background: #FFD700;
    transform: translateY(-1px);
  }

  .submenuItems a {
    display: block;
    color: #fff;
    padding: 10px 10px 10px 45px;
    line-height: 1.8;
    -webkit-transition: none;
    transition: none;
  }

  .submenuItems li:hover > a,
  .submenuItems li:hover {
    color: #FFD700;
  }

  /* Hamburger Icon */
  .nav__icon,
  .nav__icon span {
    display: inline-block;
    transition: all 0.4s;
    box-sizing: border-box;
  }

  .nav__icon {
    display: flex;
    flex-flow: column;
    justify-content: flex-end;
    position: absolute;
    width: 28px;
    height: 28px;
    top: -45px;              /* 位置調整 */
    left: 10px;             /* 画面左から10px */
    cursor: pointer;
    /* z-index: 10000; */
  }

  .nav__icon span {
    background: linear-gradient(#26ccff, #0026ac);
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    border-radius: 4px;
  }

  .nav__icon span:nth-of-type(1) {
    top: 10px;
  }

  .nav__icon span:nth-of-type(2) {
    top: 22px;
  }

  .nav__icon span:nth-of-type(3) {
    top: 32px;
  }

  .nav__icon.active span:nth-of-type(1) {
    -webkit-transform: translateY(12px) rotate(-45deg);
    transform: translateY(12px) rotate(-45deg);
  }

  .nav__icon.active span:nth-of-type(2) {
    display: none;
  }

  .nav__icon.active span:nth-of-type(3) {
    -webkit-transform: translateY(-10px) rotate(45deg);
    transform: translateY(-10px) rotate(45deg);
  }
}

/* サブメニューを展開したとき、JSでキャンセルしている親メニューのリンクに hover 時と同じ色を適用 */
  .accordion-menu li.open .dropdownlink,
  .accordion-menu li.open .dropdownlink a {
    color: #FFD700; /* hover 色と同じ色 */
}


/* ==================================================
    Desktop Styles
    (Shown at min-width: 768px → Desktop Dropdown Menu)
    ================================================== */
@media screen and (min-width: 768px) {
  /* PC版ナビ表示 */
  .dt_ygnav {
    display: flex;
    flex-wrap: wrap;
    z-index: 10000000;
  }
  .mobile_nav {
    display: none;
  }
  
  .menu1 {
    display: flex;
    width: 100vw;
    margin: 0 auto;
  }
  
  .menu1 > li {
    /* flex: 1; */
    /* flex: 1 1 0; */
    flex: auto;
    min-width: 0;
    position: relative;
    text-align: center;
    border-right: ridge 1px #4169E1;
  }
  
  .menu1 li:last-child {
    border-right: none;
  }
  
  /* トップレベルリンク：元の設定そのまま */
  .menu1 li a {
    display: block;
    padding: 1.1em;
    white-space: nowrap;
    background: linear-gradient(#26ccff, #0026ac);
    color: #fff;
    font-size: 15px;
    /* font-weight: bold; */
    line-height: 1.1em;
    opacity: 0.9;
    position: relative;
    z-index: 1;
    height: 100%;
  }
  
  .menu1 li ul {
    position: absolute;
    z-index: 996;
    top: 100%;
    left: 0;
  }
  
  .menu1 li ul li {
    overflow: hidden;
    /* width: 105%; */
    height: 0;
    color: #fff;
    transition: 0.2s;
  }
  
  .menu1 li ul li a {
    display: flex;
    align-items: center;
    text-align: left;
    font-size: 15px;
    font-weight: normal;
    width: 100%;
    position: relative;
    z-index: 1;
  }
  
  /* ホバー時：トップレベルリンクの背景変更 */
  .menu1 > li:hover > a {
    color: #FFD700;
    background: #26ccff;
    box-sizing: border-box;
  }
  
  /* ホバー時：ドロップダウン内リンクの背景・文字色変更 */
  .menu1 > li:hover li:hover > a {
    background: #26ccff;
    color: #FFD700;
  }
  
  /* ▼ トップレベルリンクの黄色下線エフェクト（即時表示、transition削除） ▼ */
  .menu1 > li > a::before,
  .menu1 > li > a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: #FFD700;
    /* transition 削除 */
  }
  
  .menu1 > li:hover > a::before,
  .menu1 > li:hover > a::after {
    width: 100%;
  }
  
  /* ドロップダウン展開 */
  .menu1 > li:hover > ul > li {
    overflow: visible;
    height: 47px;
  }
  
  /* ▼ サブメニューの黄色下線エフェクト（a 要素に付与、即時表示） ▼ */
  .submenu1 li a {
    position: relative;
  }
  
  .submenu1 li a::before,
  .submenu1 li a::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: #FFD700;
    /* transition 削除 */
  }
  
  /* サブメニューの最後の項目だけ、黄色い線の太さを変更（例：2px） */
  .submenu1 li:last-child a::before,
  .submenu1 li:last-child a::after {
    height: 3px;  /* お好みの太さに調整 */
  }
  
  .submenu1 li a:hover::before,
  .submenu1 li a:hover::after {
    width: 100%;
  }
  
  /* サブメニュー項目ホバー時の背景 */
  .submenu1 li:hover > a {
    background: #26ccff;
  }
  
  /* Font Awesome 用矢印アイコン */
  .arrow-down::after {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: "\f107";
    padding-left: 9px;
    color: var(--font-color); /* 通常時は白文字など */
  }

  /* 親要素にホバーが入ったら矢印色を変えたい場合 */
  .arrow-down:hover::after {
    color: var(--highlight-color); /* 例: #FFD700 */
  }
  
  .arrow-right::after {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: "\f105";
  }

  .nav__icon {
    display: none; /* ✅ PC表示時には非表示にする */
  }
}

@media (min-width: 1024px) { /* ウィンドウが十分広いとき */
  .menu1 > li {
      flex: 1 1 0; /* 均等幅に戻す */
  }
}