@charset "utf-8";

/* 共通部分のCSS */
html {
    font-size: 100%;
}

body {
    color: #042660;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
}

li {
    list-style: none;
}



a {
    color: #042660;
    text-decoration: none;
}

img {
    max-width: 100%;
    /* vertical-align: bottom; */
}

#header {
    width: 100%;
    height: 11%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background-color: rgba(59, 72, 124, 0.6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;


}

#header .logo {
    min-width: 120px;
}

#header .logo img {
    width: 6.25rem;
    height: 5rem;
}

#header .navi_mail {
    background-color: #DD7479;
    width: 3.75rem;
    height: 3.43rem;
    text-align: center;
    padding-top: .375rem;
    /* margin-right: auto; */
    position: absolute;
    right: 25%;

}



#header .hamburger {
    background-color: #96DBE0;
    width: 60px;
    height: 3.43rem;
    /* ↑ボタン全体のサイズを設定 */
    cursor: pointer;
    position: relative;
    /* right: .625rem; */
    /* topから5px離れてrightから10px離れた位置に配置する指示（右上に配置するということ） */
    z-index: 30;
}



#header .hamburger span {
    width: 40px;
    height: 3px;
    /* ↑ボタンの横線の長さと幅を決めている */
    background-color: #FEFDFA;
    display: inline-block;
    position: absolute;
    left: 10px;
    /* 一個前に決めたボタン全体のサイズ（枠）の中でleftから10pxの位置に配置する指示 */
    transition: all 0.4s;
    /* ボタンが押されて×に切り替わる速度の指示 */
}

/* 横線がボタン全体のサイズからどこの位置に置くか決めている */
#header .hamburger span:nth-of-type(1) {
    top: .8125rem;
}

#header .hamburger span:nth-of-type(2) {
    top: 1.625rem;
}

#header .hamburger span:nth-of-type(3) {
    top: 2.4375rem;
}



/* ボタンを押したら表示されるメニュー */
#header .navi {
    width: 80%;
    height: 100vh;
    /* ↑メニューが表示された時に左側が少し開くように幅を80％に設定し、高さは画面いっぱいになるようにする指示 */
    background-color: #FEFDFA;
    position: fixed;
    top: 0;
    right: -80%;
    /* メニューはボタンが表示されるまで見ることはできないから
    right-80%で隠しておく */
    z-index: 20;
    transition: all 0.6s;
    /* 右からスライド表示する時の速度 */
}

#header .navi .menu {
    width: 100%;
    height: 100vh;
    flex-direction: column;
    /*メニューを縦並びにする指示 */
    padding: 3.75rem 1rem;
    /* 上下の高さを調整 */
    overflow: auto;
    /* メニューの数がたくさんあった時にスクロールできるようになる */
}

#header .navi .menu li {
    padding: 1.5rem 0;
    margin-left: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 1.25rem;
    padding-left: 10%;
    text-transform: uppercase;
}


/* ボタンが押された状態のCSSでactiveという名前をつけておく。
    Jクエリでactiveクラスを追加したり削除したりするから。 */
#header .navi.active {
    right: 0;
    /* right-80%で隠しておいたメニューを0にすることで表示させる。 */
}

/* ボタンを×にするCSS */
#header .hamburger.active span:nth-of-type(1) {
    top: 24px;
    transform: rotate(-45deg);
    /* -45度に傾けて×の右上スタートの線をつくる */
}

#header .hamburger.active span:nth-of-type(2) {
    opacity: 0;
    /* 二本目の線は不要なので消す */
}

#header .hamburger.active span:nth-of-type(3) {
    top: 24px;
    transform: rotate(45deg);
    /* 45度に傾けて×の左上スタートの線をつくる */
}

footer {
    text-align: center;
}









@media screen and (min-width: 430px) {
    /* 430px以上に適用されるCSS（タブレット用） */

    #header .navi_mail {

        right: 20%;
    }


}

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

    /* 768px以上に適用されるCSS（PC用） */
    #header .logo {
        min-width: 500px;
    }

    #header .logo img {
        width: 6.25rem;
        height: 5rem;
    }

    #header .navi_mail {
        right: 10%;
    }

    #header .navi .menu li {
        font-size: 1.7rem;
        padding-bottom: 7%;
    }

    #header .navi {
        width: 60%;

        right: -60%;
    }

}