@charset "UTF-8";

/*もろもろ設定*/
/*
* {
    outline: 2px red solid;
}
*/


/*全体設定*/
* {
    list-style: none;
    color: #183A75;
    text-decoration: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,body {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    height: fit-content;

}

body {
    font-family: "Kiwi Maru", serif;
}

/*全体のコンテナ*/
#All_container {
    display: grid;
    height: auto;
    grid-template-rows: 100px auto 300px;
    grid-template-areas:
        'header'
        'main'
        'footer';
}

/*ヘッダー*/
header {
    width: 100%;
    height: 100px;
    grid-area: header;
    grid-template-columns: 300px auto;
    background-color: rgba(75, 167, 225, 0.3);
    backdrop-filter: blur(10px);
    box-sizing: border-box;
    background-size: cover;
    z-index: 9999;
    display: grid;
    position: fixed;
}
/*メイン*/
main {
    height: auto;
    margin: 0;
    padding: 0;
    grid-area: main;
    position: relative;
}

/*フッター*/
footer {
    margin: 0;
    padding: 0;
    z-index: 5;
    bottom: 0;
    grid-area: footer;
    height: 350px;
    position: relative;
    background-size: contain;
    background-repeat: repeat-x;
    background-color: rgba(75, 167, 225, 0.3);
    backdrop-filter: blur(30px);
    z-index: 5;
    overflow: visible;
}

/* ネームロゴ */
.name_logo {

    height: 100%;
    left: 0;
    position: relative;
    grid-column: 1/2;
}
.name_logo img{ 
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    display: block;
    width: 300px;
    height: 100px;
    object-fit: contain;
    position: relative;
    z-index: 999999;
}

/*PCのヘッダーをスマホ幅で消す*/
@media screen and (max-width: 795px) {
    .PC_Menu-list {
        display: none;
    }
}

/*PCのヘッダー設定*/
@media screen and (min-width: 796px) {
    /*ヘッダー*/
header {
    width: 100%;
    height: 100px;
    grid-area: header;
    grid-template-columns: 300px auto;
    display: grid;
    position: fixed;
    z-index: 9999999;

}
    .PC_Menu-list {
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        color: white;
        height: 100%;
        text-align: center;
        align-items: center;
        justify-content: center;
        justify-items: center;
        z-index: 99999999;
        font-weight: bold;
        box-sizing: border-box;
        grid-column: 2/3;
    }
    .PC_Menu-list li {
        position: relative;
        color: white;
        flex-grow: 3;
        height: fit-content;
        top: 0;
        z-index: 99999999;
        font-weight: bold;
        font-size:clamp(15px,1.5vw,20px);
        white-space: nowrap;
        box-sizing: border-box;
        text-align: center;
        align-items: center;
        justify-items: center;
        justify-content: center;

    }
    .PC_Menu-list li :hover {
        color: white;
    }
        
}

/*スマホ幅のハンバーガー設定*/
.hamburger {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 9999999;
    grid-column: 2/3;
}

/*ハンバーガーの押す部分*/
#hamburger_button {
    display: none;
    z-index: 99999;
    width: 100%;
    height: 100%;
    position: fixed;
}

/*ボタン範囲*/
#hamburger_label {
    width: 100%;
    height: 100px;
    position: fixed;
    background-color: transparent;
    z-index: 9999;
    cursor: pointer;
    transition: ease-in-out 0.3s;
    justify-self: center;
    align-items: center;
    align-self: center;
    top: 0;
}

/*プラスマイナス */
.plus_before, .plus_after{
    content: "";
    width: 13px;
    height: 50px;
    position: fixed;
    top: 23px;
    right: 40px;
    background-color: white;
    border-radius: 10px;
    z-index: 9999;
    transition: ease-in-out 0.3s;
    cursor: pointer;
    margin-right: 10px;
    display: block;
}
.plus_before {
    content: "";
    z-index: 999999;
    display: block;
    position: fixed;
}
.plus_after {
    content: "";
    transform: rotate(90deg);
    z-index: 999999;
    display: block;
}
/*プラスを回転させながらマイナスに収束する*/
.plus_before.active {
    transform: rotate(270deg);
    transform-origin: center; 
    display: block;
    z-index: 999999;
    opacity: 1;
    visibility: visible;
}
.plus_after.active {
    transform: rotate(270deg);
    transform-origin: center;
    display: block;
    z-index: 999999;
    opacity: 1;
    visibility: visible;
}


/*ハンバーガーのリスト部分*/
.Mobile_Menu-list{
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    height: fit-content;
    z-index: 0;
    transition: all 0.5s;
    opacity: 0;
    transform: translateY(-100%);
    background-color: #a6cdcb;
    backdrop-filter: blur(10px);
    text-align: center;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
/*ハンバーガーを押した時のリスト*/
.Mobile_Menu-list.active {
    display: block;
    position: fixed;
    opacity: 1;
    z-index: 999999;
    height: fit-content;
    justify-content: center;
    align-items: center;
    z-index: 1;
    background-color: rgba(75, 167, 225, 0.3);
    background-size: contain;
    transition:cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s;
    transform: translateY(0);
    text-align: center;
}
/*のul部分*/
.Mobile_Menu-list ul {
    display: none;
    flex-wrap: wrap;
    height: fit-content;
    box-sizing: border-box;
    transition: all 1s;
    top: 0;
    text-align: center;
    justify-content: center;
    align-items: center;
    z-index: 999999;
}
.Mobile_Menu-list ul.active {
    top: 0;
    display: flex;
    flex-wrap: wrap;
    color: white;
    text-align: center;

    height: fit-content;
    margin-top: 50px;
    z-index: 999999;
    font-weight: bold;
    font-size:clamp(20px,1.5vw,25px);
    transition: all 1s;
    text-align: center;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
}
.Mobile_Menu-list li {
    display: block;
    color: #183A75;
    width: 100vw;
    flex-grow: 1;
    text-align: center;
    z-index: 55;
    font-weight: bold;
    font-size:clamp(20px,1.5vw,25px);
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.Mobile_Menu-list li:nth-child(1) {
    margin-top: 50px;
}
.Mobile_Menu-list li:nth-child(6) {
    margin-bottom: 50px;
}

.Mobile_Menu-list li a:hover {
    color: white;
}
.Mobile_Menu-list li a {
    display: block;
    width: 100vw;
    height: 100%;
    box-sizing: border-box;
    padding: 20px 0;
    text-align: center;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/*ハンバーガーのリストをスマホ幅で消す*/
@media screen and (min-width: 796px) {
    .Mobile_Menu-list {
display: none;
    }
    .Mobile_Menu-list.active {
        display: none;
    }
/* ハンバーガーのプラスマイナス */
.plus::before, .plus::after{
    display: none;
}
/* ハンバーガー*/
.hamburger {
    display: none;
}
/*押す部分*/
#hamburger_button {
    display: none;
}

/*背景色、ボタン範囲*/
#hamburger_label {
    display: none;
}
}

/*メインコンテンツ*/
/*イラスト*/
@media screen and (max-width: 795px) {
.top_illust_pc {
    display: none;
}

.top_illust_phone {
    width: 100%;
    object-fit: contain;
    z-index: 0;
    padding: 0;
    margin: 0;
    top: 0;
    position: relative;
    display: block;
}
}
@media screen and (min-width: 796px) {
    .top_illust_pc {
        width: 100%;
        object-fit: contain;
        padding: 0;
        margin: 0;
        top: 0;
        z-index: 0;
        position: relative;
display: block;
    }
    
    .top_illust_phone {
        display: none;
    }
    }

/*お知らせエリア*/
.news_area {
    display: block;
    padding: 20px 20px 30px;
    height: fit-content;
    background-color: rgba(75, 167, 225, 0.3);
}
.news_title {
    margin: 0 0 20px 0;
}
.newsList_item {
    display: flex;
    flex-wrap: nowrap;
    font-size:clamp(18px,1.5vw,23px);
    text-align: center;
}
.newsList_title {
    padding-left: 18px;
    font-size:clamp(20px,1.5vw,23px);
    text-decoration: underline;
    font-weight:bold;
}

/* ナビゲーションエリア*/
.navigation_area {
    width: 100%;
    height: fit-content;
    justify-content: center;
}
.navigation_banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px; /* バナーとミニキャラの間の余白 */
}
@media screen and (max-width: 795px) {
.banner {
    width: 100%; /* 必要に応じて調整 */
    height: auto; /* 必要に応じて調整 */
    object-fit: contain; /* 画像の比率を保ちながら収める */
}
}
@media screen and (min-width: 796px) {
    .navigation_banner {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: center;
        justify-content: center;
        gap: 10px; /* バナーとミニキャラの間の余白 */
    }
    .banner {
        width: 100%; /* 必要に応じて調整 */
        padding: 0;
        box-sizing: border-box;
        height: auto; /* 必要に応じて調整 */
        object-fit: contain; /* 画像の比率を保ちながら収める */
    }
}

/* ここからフッター */
/*フッターのメニュー*/
.footer_menu{
    display: flex;
    margin-left: 15px;
    padding-top: 20px;
    bottom: 0;
    transform: translate(0,0,0,20px);
    color: #183A75;
    width: auto;
    height: 300px;
    position: sticky;
    list-style: none;
    flex-wrap: wrap;
    font-size: 20px;
    transition: 0.5s;
    z-index: 5;
}


/*ホバー時に色を変更*/
.footer_menu  .footer_menu_list :hover {
color: white;
text-decoration: underline;
}

/*リスト全体の見た目*/
.footer_menu_list{
    width: 100%;
    height: auto;
    margin: 10px 0;
    display: list-item;
    text-decoration: none;
    list-style: none;
    transition: 0.5s;
    z-index: 6;
}

.footer_menu_pc {
display: none;
}
/*paddingを入れて見た目よりも当たり判定を大きくしてあげる*/
.footer_menu_list a{
padding-right: 70%;
z-index: 6;
}

@media screen and (max-width: 795px) {
.footer_menu {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(fit-content,1fr));
    box-sizing: border-box;
    white-space: nowrap;
    padding: 0;
    margin: 0;
    padding-left: 20px;
    padding-top: 30px;
}
.footer_menu_h1 a {
    width: 100%;
    display: block;
}
.footer_menu_h2 a {
    width: 100%;
    display: block;
}
.footer_menu_h3 a {
    width: 100%;
    display: block;
}
.footer_menu_h4 a {
    width: 100%;
    display: block;
}
.footer_menu_h5 a {
    width: 100%;
    display: block;
}
.footer_menu_h6 a {
    width: 100%;
    display: block;
}
.footer_menu_h1 :hover {
    color: white;
}
.footer_menu_h2 :hover {
    color: white;
}
.footer_menu_h3 :hover {
    color: white;
}
.footer_menu_h4 :hover {
    color: white;
}
.footer_menu_h5 :hover {
    color: white;
}
.footer_menu_h6 :hover {
    color: white;
}
.footer_menu_t2 {
    display: none;
}
.footer_menu_t3 {
    display: none;
}

.footer_menu_t5 {
    display: none;
}

.footer_menu_t6 {
    display: none;
}
}

@media screen and (min-width: 796px) {
.footer_menu {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-wrap: nowrap;
    box-sizing: border-box;
    margin: 0;
    padding-top: 30px;
    font-weight: bold;
    font-size:clamp(15px,2vw,23px);
}

.footer_menu1 {
    width: fit-content;
    height: fit-content;
    display: flex;
    margin: 0;
    margin-top: 35px;
    padding-left: 10px;
    padding-right: 10px;
    flex-wrap: wrap;
    box-sizing: border-box;
    flex-grow: 1;
}
.footer_menu_h1 {
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    flex-grow: 1;

}
.footer_menu_h1 a {
    width: fit-content;
    /*これで折り返し禁止*/
    white-space: nowrap;
    
}
.footer_menu_h1 :hover {
    color: white;
}
.footer_menu_h2 :hover {
    color: white;
}
.footer_menu_h3 :hover {
    color: white;
}
.footer_menu_h4 :hover {
    color: white;
}
.footer_menu_h5 :hover {
    color: white;
}
.footer_menu_h6 :hover {
    color: white;
}
.footer_menu_list1 a {
    /*親要素に幅を合わせる*/
    width: 100%;
    /*これないと適用されない*/
    display: block;
}

.footer_menu2 {
    width: fit-content;
    height: fit-content;
    display: flex;
    margin: 0;
    margin-top: 35px;
    padding-left: 10px;
    padding-right: 10px;
    flex-wrap: wrap;
    box-sizing: border-box;
    flex-grow: 1;
}
.footer_menu_h2 {
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    flex-grow: 1;
}
.footer_menu_h2 a {
    width: fit-content;
    /*これで折り返し禁止*/
    white-space: nowrap;
}
.footer_menu_t2 {
    padding-top: 5px;
    box-sizing: border-box;
    font-size: 13px;
    font-weight: normal;
}
.footer_menu_t2 a {
    width: 100%;
    white-space: nowrap;
    box-sizing: border-box;
    line-height: 2;
}
.footer_menu_list2 {
    width: 100%;
}
.footer_menu_list2 a {
    /*親要素に幅を合わせる*/
    width: 100%;
    /*これないと適用されない*/
    display: block;
    font-size:clamp(10px,1.5vw,20px);
}

.footer_menu3 {
    width: fit-content;
    height: fit-content;
    display: flex;
    margin: 0;
    margin-top: 35px;
    padding-left: 10px;
    padding-right: 10px;
    flex-wrap: wrap;
    box-sizing: border-box;
    flex-grow: 1;
}
.footer_menu_h3 {
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    flex-grow: 1;
}
.footer_menu_h3 a {
    width: fit-content;
    /*これで折り返し禁止*/
    white-space: nowrap;
}
.footer_menu_t3 {
    padding-top: 5px;
    box-sizing: border-box;
    font-size: 13px;
    font-weight: normal;
}
.footer_menu_t3 a {
    width: 100%;
    white-space: nowrap;
    box-sizing: border-box;
    line-height: 2;
}
.footer_menu_list3 a {
    /*親要素に幅を合わせる*/
    width: 100%;
    /*これないと適用されない*/
    display: block;
    font-size:clamp(10px,1.5vw,20px);
}

.footer_menu4 {
    width: fit-content;
    height: fit-content;
    display: flex;
    margin: 0;
    margin-top: 35px;
    padding-left: 10px;
    padding-right: 10px;
    flex-wrap: wrap;
    box-sizing: border-box;
    flex-grow: 1;
}
.footer_menu_h4 {
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    flex-grow: 1;
}
.footer_menu_h4 a {
    width: fit-content;
    /*これで折り返し禁止*/
    white-space: nowrap;
}
.footer_menu_list4 a {
    /*親要素に幅を合わせる*/
    width: 100%;
    /*これないと適用されない*/
    display: block;
    font-size:clamp(10px,1.5vw,20px);
}

.footer_menu5 {
    width: fit-content;
    height: fit-content;
    display: flex;
    margin: 0;
    margin-top: 35px;
    padding-left: 10px;
    padding-right: 10px;
    flex-wrap: wrap;
    box-sizing: border-box;
    flex-grow: 1;
}
.footer_menu_h5 {
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    flex-grow: 1;
}
.footer_menu_h5 a {
    width: fit-content;
    /*これで折り返し禁止*/
    white-space: nowrap;
}
.footer_menu_t5 {
    padding-top: 5px;
    box-sizing: border-box;
    font-size: 13px;
    font-weight: normal;
}
.footer_menu_t5 a {
    width: 100%;
    white-space: nowrap;
    box-sizing: border-box;
    line-height: 2;
}
.footer_menu_list5 a {
    /*親要素に幅を合わせる*/
    width: 100%;
    /*これないと適用されない*/
    display: block;
    font-size:clamp(10px,1.5vw,20px);
}

.footer_menu6 {
    width: fit-content;
    height: fit-content;
    display: flex;
    margin: 0;
    margin-top: 35px;
    padding-left: 10px;
    padding-right: 10px;
    flex-wrap: wrap;
    box-sizing: border-box;
    flex-grow: 1;
}
.footer_menu_h6 {
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    flex-grow: 1;
}
.footer_menu_h6 a {
    width: fit-content;
    /*これで折り返し禁止*/
    white-space: nowrap;
}
.footer_menu_t6 {
    padding-top: 5px;
    box-sizing: border-box;
    font-size: 13px;
    font-weight: normal;
}
.footer_menu_t6 a {
    width: 100%;
    white-space: nowrap;
    box-sizing: border-box;
    line-height: 2;
}
.footer_menu_list6 a {
    /*親要素に幅を合わせる*/
    width: 100%;
    /*これないと適用されない*/
    display: block;
    font-size:clamp(10px,1.5vw,20px);

}
}