.dropdown {
    animation: fadeIn 0.5s ease-out forwards;
    opacity: 0;
    transform: translateY(5px);
}

/* キーフレーム */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        /* 最終的に元の位置に */
    }
}

.menu {
    position: relative;
    /* 親要素の位置を基準にする */
}

.up-mg {
    margin-top: 10px;
}

.scroll-head {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    opacity: 0;
    /* 初期状態は透明 */
    visibility: hidden;
    /* 初期状態は非表示 */
    transform: translateY(-20px);
    /* 初期位置を少し上に設定 */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
    /* opacityとtransformのアニメーション、visibilityの遅延 */
}

.scroll-head.show {
    opacity: 1;
    /* 表示時の透明度 */
    visibility: visible;
    /* 表示時は可視に */
    transform: translateY(0);
    /* 元の位置に戻る */
    transition: opacity 0.3s ease, transform 0.3s ease;
    /* 表示時にスムーズなアニメーション */
}

.scroll-head .menu {
    width: 100%;
    justify-content: center;
}


@media screen and (min-width: 1367px) {

    .dropdown {
        margin-left: -36px;
        margin-top: 10px;
        display: none;
        /* 初期状態で非表示 */
        position: absolute;
        /* 絶対位置にする */
        background-color: rgba(0, 63, 40, 0.6);
        padding: 30px 0px 50px 40px;
        /* 上下の余白 */
        z-index: 1000;
        /* z-indexを設定 */
        width: 100vw;
        left: 0;
    }

    .fast-hierarchy {
        font-size: 21px;
        padding: 0 60px 0 0;
    }

    .second-hierarchy {
        border-left: 1px solid #fff;
    }

    .second-hierarchy_box {
        display: flex;
        align-items: center;
        padding: 0 0px 0 65px;
    }

    .second-hierarchy_box a {
        padding-left: 20px;
        font-size: 18px;
    }

    .second-hierarchy_box p {
        padding-left: 20px;
        font-size: 18px;
    }

    .second-hierarchy_box img {
        width: 10px;
    }

    .third-hierarchy_box {
        display: flex;
        align-items: center;
        padding: 0 60px 0 65px;
    }

    .third-hierarchy_box a {
        padding-left: 20px;
        font-size: 18px;
    }

    .third-hierarchy_box p {
        padding-left: 20px;
        font-size: 18px;
    }

    .third-hierarchy_box img {
        width: 10px;
    }

    .menu li:hover .dropdown {
        display: flex;
    }

    .dropdown div {
        white-space: nowrap;
        /* テキストの折り返しを防ぐ */
    }

    .dropdown div a {
        color: white;
        text-decoration: none;
        display: block;
    }

    .dropdown div span {
        color: white;
        text-decoration: none;
        display: block;
    }

    .site-header-sp {
        display: none;
    }

    .header-box {
        width: 90%;
    }

    .sponsor-box {
        width: 100px;
        text-align: center;
    }

    .header-1 {
        display: flex;
        background: linear-gradient(to bottom, #005737, #00110B);
        width: 100%;
        height: 120px;
    }

    .sponsor-area {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 50px;
        margin-top: 10px;
        margin-left: 60px;
        align-items: center;
    }

    /* .sponsor-area img.img1 {
        width: 87px;
        height: 35px;
    }

    .sponsor-area img.img2 {
        width: 90px;
        height: 15px;
    }

    .sponsor-area img.img3 {
        width: 90px;
        height: 17px;
    }

    .sponsor-area img.img4 {
        width: 90px;
        height: 20px;
    }

    .sponsor-area img.img5 {
        width: 90px;
        height: 23px;
    }

    .sponsor-area img.img6 {
        width: 98px;
        height: 22px;
    }

    .sponsor-area img.img7 {
        width: 52px;
        height: 38px;
    }

    .sponsor-area img.img8 {
        width: 90px;
        height: 19px;
    }

    .sponsor-area img.img9 {
        width: 90px;
        height: 31px;
    } */

    .sponsor-item {
        flex: 1 1 calc(20% - 10px);
        color: white;
        font-size: 14px;
        font-weight: bold;
    }

    .social-icons a.sns-icon-hed {
        margin: 0 5px;
        color: white;
        font-size: 30px;
    }

    .youtube-icon {
        width: 112px;
        margin: 0 5px;
    }

    .search-icon {
        width: 45px;
        margin: 0 50px 0 25px;
    }

    /* ページ全体にヘッダーの高さ分の余白を追加 */
    /* body.home {
        padding-top: 110px; */
    /* トップページの余白 */
    /* } */

    /* body {
        padding-top: 185px;
    } */

    .logo img {
        width: 243px;
        height: 190px;
        max-width: none;
    }

    /* 下部エリア */
    .header-bottom {
        background-color: #007D4F;
        /* 下部エリアの背景色 */
        width: 100%;
        height: 70px;
        display: flex;
        align-items: center;
        /* 縦方向の中央に配置 */
    }

    .menu {
        display: flex;
        /* gap: 50px; */
        list-style: none;
        margin: 0;
    }

    .menu a {
        padding: 0 25px;
    }

    .menu li {
        padding: 10px 0;
    }

    .menu li .header-top {
        text-decoration: none;
        color: white;
        font-size: 16px;
        font-weight: bold;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .menu li .header-top small {
        text-decoration: none;
        font-size: 12px;
        font-weight: 400;
        display: block;
        margin-top: -4px;
    }

    .social-icons {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }

    .scroll-head .header-top {
        background-color: #007D4F;
    }

    .scroll-head .header-box {
        width: 100%;
    }

    .x-img {
        width: 30px;
        padding-bottom: 5px;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1366px) {
    .dropdown {
        margin-left: -2.39vw;
        /* -60px to vw */
        margin-top: 0.73vw;
        /* 10px to vw */
        display: none;
        /* 初期状態で非表示 */
        position: absolute;
        /* 絶対位置にする */
        background-color: rgba(0, 63, 40, 0.6);
        padding: 2.20vw 0 3.66vw 2.93vw;
        /* 30px 0px 50px 40px to vw */
        z-index: 1000;
        /* z-indexを設定 */
        width: 100vw;
        left: 0;
    }

    .fast-hierarchy {
        font-size: 1.54vw;
        /* 21px to vw */
        padding: 0 4.39vw 0 0;
        /* 0 60px 0 0 to vw */
    }

    .second-hierarchy {
        border-left: 0.073vw solid #fff;
        /* 1px to vw */
    }

    .second-hierarchy_box {
        display: flex;
        align-items: center;
        padding: 0 0 0 4.76vw;
        /* 0 0px 0 65px to vw */
    }

    .second-hierarchy_box a {
        padding-left: 1.46vw;
        /* 20px to vw */
        font-size: 1.32vw;
        /* 18px to vw */
    }

    .second-hierarchy_box p {
        padding-left: 1.46vw;
        /* 20px to vw */
        font-size: 1.32vw;
        /* 18px to vw */
    }

    .second-hierarchy_box img {
        width: 0.73vw;
        /* 10px to vw */
    }

    .third-hierarchy_box {
        display: flex;
        align-items: center;
        padding: 0 4.39vw 0 4.76vw;
        /* 0 60px 0 65px to vw */
    }

    .third-hierarchy_box a {
        padding-left: 1.46vw;
        /* 20px to vw */
        font-size: 1.32vw;
        /* 18px to vw */
    }

    .third-hierarchy_box p {
        padding-left: 1.46vw;
        /* 20px to vw */
        font-size: 1.32vw;
        /* 18px to vw */
    }

    .third-hierarchy_box img {
        width: 0.73vw;
        /* 10px to vw */
    }

    .menu li:hover .dropdown {
        display: flex;
    }

    .dropdown div {
        white-space: nowrap;
        /* テキストの折り返しを防ぐ */
    }

    .dropdown div a {
        color: white;
        text-decoration: none;
        display: block;
    }

    .dropdown div span {
        color: white;
        text-decoration: none;
        display: block;
    }


    .social-icons {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }

    .site-header-sp {
        display: none;
    }

    .header-box {
        width: 85%;
    }

    .sponsor-box {
        width: 7.32vw;
        text-align: center;
    }

    .header-1 {
        display: flex;
        background: linear-gradient(to bottom, #005737, #00110B);
        width: 100%;
        height: 8.78vw;
    }

    .sponsor-area {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 3.66vw;
        margin-top: 1.09vw;
        margin-left: 4.39vw;
        align-items: center;
    }

    /* .sponsor-area img.img1 {
        width: 6.36vw;
        height: 2.56vw;
    }

    .sponsor-area img.img2 {
        width: 6.59vw;
        height: 1.1vw;
    }

    .sponsor-area img.img3 {
        width: 6.59vw;
        height: 1.24vw;
    }

    .sponsor-area img.img4 {
        width: 6.59vw;
        height: 1.46vw;
    }

    .sponsor-area img.img5 {
        width: 6.59vw;
        height: 1.68vw;
    }

    .sponsor-area img.img6 {
        width: 7.17vw;
        height: 1.61vw;
    }

    .sponsor-area img.img7 {
        width: 3.81vw;
        height: 2.78vw;
    }

    .sponsor-area img.img8 {
        width: 6.59vw;
        height: 1.39vw;
    }

    .sponsor-area img.img9 {
        width: 6.59vw;
        height: 2.27vw;
    } */

    .sponsor-item {
        flex: 1 1 calc(20% - 0.73vw);
        color: white;
        font-size: 1.02vw;
        font-weight: bold;
    }

    .social-icons a.sns-icon-hed {
        margin: 0 0.37vw;
        color: white;
        font-size: 2.2vw;
    }

    .youtube-icon {
        width: 8.2vw;
        margin: 0 0.37vw;
    }

    .search-icon {
        width: 3.3vw;
        margin: 0 3.66vw 0 1.83vw;
    }

    .x-img {
        width: 2.2vw;
        padding-bottom: 5px;
    }

    /* ページ全体にヘッダーの高さ分の余白を追加 */
    /* body.home {
        padding-top: 7vw; */
    /* ヘッダーの高さ分（例: 110px）だけ余白を追加 */
    /* } */

    /* body {
        padding-top: 13.54vw;
    } */

    .logo img {
        width: 17.77vw;
        height: 13.9vw;
        max-width: none;
    }

    /* 下部エリア */
    .header-bottom {
        background-color: #007D4F;
        /* 下部エリアの背景色 */
        width: 100%;
        height: 5.12vw;
        /* 70pxをvwに変換 */
        display: flex;
        align-items: center;
        /* 縦方向の中央に配置 */
    }

    .menu {
        display: flex;
        /* gap: 3.66vw; */
        list-style: none;
        padding: 0.73vw 0;
        margin: 0;
    }

    .menu a {
        padding: 0 1.83vw;
    }

    .menu li {
        padding: 0.73vw 0;
    }

    .menu li .header-top {
        text-decoration: none;
        color: white;
        font-size: 1.17vw;
        font-weight: bold;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .menu li .header-top small {
        text-decoration: none;
        font-size: 0.88vw;
        font-weight: 400;
        display: block;
        margin-top: -0.29vw;
    }

    .scroll-head .header-top {
        background-color: #007D4F;
    }

    .scroll-head .header-box {
        width: 100%;
    }

    .scroll-head .menu {
        margin: 0 auto;
    }

}

.sponsor-area img {
    max-width: 100%;
    height: auto;
    flex: 0 0 auto;
}

/* ヘッダー全体を固定表示にする */
.site-header-pc {
    width: 100%;
    /* position: fixed;
    top: 0;
    left: 0; */
    z-index: 1001;
}

/* 上部エリア */
.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-navigation {
    display: flex;
    /* justify-content: center; */
    width: 100%;
    margin-left: 35px;
}

@media screen and (min-width: 500px) and (max-width: 1024px) {
    .sp-xicon img {
        padding: 0.29vw 0 0.68vw 0 !important;
        width: 2.92vw !important;
        height: 3.51vw !important;
    }

    .sponsor-sp img {
        /* height: 5vw; */
        /* padding: 5px 0 5px 8px; */
        width: 38.67vw;
    }

    .social-icons a.sns-icon-hed {
        color: white;
        font-size: 3vw;
    }

    .youtube-icon {
        width: 10vw !important;
        height: 2.5vw !important;
        padding: 0 0 0 0 !important;
        margin: -1.12vw 0 0 0;
    }

    .youtube-icon2 {
        width: 43.45vw !important;
        height: auto !important;
        padding: 0 0 0 0 !important;
        margin: -7.10vw 0 0 0;
    }

    .social-icons {
        padding-left: 4.51vw !important;
    }
}

@media screen and (max-width: 500px) {
    .sp-xicon img {
        padding: 3px 0 7px 0 !important;
        width: 0.9em !important;
        height: 1.3em !important;
    }

    .sponsor-sp img {
        height: 30px;
        padding: 0 0 0 8px;
        width: 195px;
    }
	
	    .sponsor-sp img.sp-sponsor {
        padding: 0 0 0 8px !important;
    }

    .social-icons a.sns-icon-hed {
        color: white;
        font-size: 20px;
    }

    .youtube-icon {
        width: 89px !important;
        height: 20px !important;
        padding: 0px 0 2px 0px !important;
        margin-top: -4px !important;
    }

    .youtube-icon2 {
        width: 43.92vw !important;
        height: 9.80vw !important;
        padding: 0px 0 0px 0px !important;
        margin-top: -5.9vw !important;
    }

    .social-icons {
        display: flex;
        align-items: center;
        gap: 5px;
    }
}

@media screen and (min-width: 500px) {
    .sponsor-sp {
        display: flex;
        /* width: 66vw !important; */
        align-items: center;
    }

    padding-left: 40px;
}
}

@media screen and (min-width: 1025px) {
    .sp-sponsor {
        display: none;
    }

    .sponsor-sp img {
        width: 55vw;
    }
}

@media screen and (max-width: 1024px) {

    .social-icons {
        padding-left: 10px;
    }

    .tb-sponsor {
        display: none;
    }
}

@media screen and (max-width: 1024px) {

    .sponsor-sp img {
        padding: 5px 0 5px 8px;
    }

    .site-header-pc {
        display: none;
    }

    .site-header-sp {
        height: 70px;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        background-color: #fff;
    }

    .header__logo img {
        height: 70px;
    }

    .header__logo {
        display: flex;
        align-items: center;
        flex-grow: 0;
        /* 拡大しない */
        flex-shrink: 0;
        /* 縮小しない */
        flex-basis: auto;
        /* コンテンツに基づいた幅 */
        background: #fff;
    }

    .header__inner {
        display: flex;
        background: linear-gradient(to bottom, #005737, #00110B);
    }

    .sponsor-sp {
        /* width: 220px; */
        flex-grow: 0;
        /* 拡大しない */
        flex-shrink: 0;
        /* 縮小しない */
        flex-basis: auto;
        /* コンテンツに基づいた幅 */
    }

    a {
        font-family: sans-serif;
        text-decoration: none;
    }

    .hamburger {
        display: block;
        height: 60px;
        margin-left: auto;
        position: relative;
        z-index: 10;
        width: 60px;
        border: none;
        background-color: transparent;
    }

    .hamburger.-active .hamburger__line {
        background-color: transparent;
    }

    .hamburger.-active .hamburger__line::before {
        top: 0;
        transform: rotate(25deg);
    }

    .hamburger.-active .hamburger__line::after {
        top: 0;
        transform: rotate(-25deg);
    }

    /* .hamburger.-active .hamburger__text::before {
        content: '閉じる';
    } */

    .hamburger__line {
        display: block;
        height: 2px;
        position: absolute;
        top: 32px;
        left: 35%;
        transform: translateX(-50%);
        width: 35px;
        background-color: #fff;
        transition: 0.4s;
    }

    .hamburger__line:before,
    .hamburger__line:after {
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        width: 100%;
        background-color: #fff;
        transition: inherit;
    }

    .hamburger__line:before {
        top: -6px;
    }

    .hamburger__line:after {
        top: 6px;
    }

    .hamburger__text {
        position: absolute;
        bottom: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }

    /* .hamburger__text::before {
        content: "メニュー";
        text-align: center;
        color: #172e59;
        font-size: 10px;
        font-weight: 900;
    } */

    .site-header-sp {
        width: 100%;
    }

    .header__nav-area {
        position: fixed;
        top: 0;
        left: -100%;
        z-index: 9;
        height: 100vh;
        /* 高さを100vhに設定 */
        width: 100%;
        visibility: hidden;
        padding-top: 60px;
        background-color: #003F28;
        transition: 0.4s;
        overflow-y: auto;
        /* スクロール可能にする */
    }

    .header__nav-area.-active {
        left: 0;
        visibility: visible;
    }

    .global-navigation {
        padding-top: 20px;
        padding-right: 25px;
        padding-bottom: 30px;
        padding-left: 25px;
    }

    .global-navigation__list {
        list-style-type: none;
        padding-left: 0;
    }

    .global-navigation__list li a {
        color: #fff;
        font-size: 18px;
        font-weight: 400;
    }

    .global-navigation__list li button {
        color: #fff;
        font-size: 18px;
        font-weight: 400;
    }

    .global-navigation__list>li {
        padding-bottom: 15px;
        border-bottom: 1px solid #e7e9ee;
    }

    .global-navigation__list>li+li {
        margin-top: 15px;
    }

    .global-navigation__link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #172e59;
        font-weight: 900;
        transition: color 0.4s;
        font-size: 0.875rem;
    }

    .global-navigation__link.-accordion {
        position: relative;
        background: none;
        border: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 100%;
        padding: 0;
    }

    .global-navigation__link.-accordion::after {
        content: '\f054';
        /* Font Awesomeの右矢印アイコンのコード */
        font-family: 'Font Awesome 5 Free';
        /* Font Awesomeのフォントファミリ */
        font-weight: 900;
        /* フォントの太さを設定 */
        display: inline-block;
        font-size: 16px;
        /* アイコンのサイズを調整 */
        color: #fff;
        /* アイコンの色を設定 */
        position: absolute;
        top: 50%;
        right: 5px;
        transform: translateY(-50%);
        /* 垂直中央に配置 */
        transition: transform 0.4s;
        /* アニメーション */
    }

    .global-navigation__link.-accordion.active::after {
        transform: translateY(-50%) rotate(90deg);
        /* アコーディオンが開いているときに90度回転 */
    }

    .global-navigation__link.-accordion::before {
        content: '';
        display: none;
        /* 現在は非表示にする */
    }

    .global-navigation__link.-active::after {
        transform: translateY(-50%) rotate(-90deg);
    }

    .accordion {
        height: 0;
        overflow: hidden;
        visibility: hidden;
        transition: 0.4s;
    }

    .accordion.-active {
        height: auto;
        padding-top: 30px;
        visibility: visible;
    }

    .accordion__list li {
        font-size: 0.75rem;
    }

    .accordion__list li+li {
        margin-top: 21px;
    }

    .accordion__link {
        color: #172e59;
    }

    .social-icons.drawer {
        padding-left: 11vw;
    }

    .social-icons.drawer a.sns-icon-hed {
        color: white;
        font-size: 11vw;
        padding: 2vw;
    }

    /*     .social-icons.drawer .youtube-icon {
        width: 30vw !important;
        height: 7vw !important;
        margin-bottom: 6vw !important;
        padding: 0 !important;
    } */

    .l-contents {
        margin-top: 70px;
    }

    /* body {
        padding-top: 70px !important;
    } */
}