@charset "utf-8";

:root {
    --primary-color: #4c72af;
    --secondary-color: #e9ecef;
    --text-color: #000000;
    --sec1-color: #ffffff;
    --sec2-color: #FBD9AC;
    --sec3-color: #ffffff;
    --sec4-color: #80CEED;
    --sec5-color: #FBD9AC;
    --sec6-color: #ffffff;
    --sec7-color: #00A0E9;
    --sec8-color: #ADDCE2;
    --sec9-color: #ffffff;
    --sec10-color: #ffffff;
    --sec1-bg-color: #d6ecff;
    --sec2-bg-color: #f9d597;
    --sec3-bg-color: #ADDCE2;
    --sec4-bg-color: #bcecff;
    --sec5-bg-color: #fcca88;
    --sec6-bg-color: #dbf7fb;
    --sec7-bg-color: #67c2ed;
    --sec8-bg-color: #cceef2;
    --sec9-bg-color: #67c2ed;
    --sec10-bg-color: #fcca88;
    --hamburger-text-color: #ffffff;
    --hamburger-bg-color: #ffffff;
    --hamburger-menu-bg-color: #80CEED;
    --hamburger-span-color: #00A0E9;
    --hamburger-span-color2: #00A0E9;

    --Black: #000000;
    --White: #FFFFFF;
    --Blue: #00A0E9;
    --Orange: #F39800;
    --Rightblue: #80CEED;
    --Smokyblue: #ADDCE2;
    --Paleorange: #FBD9AC;
}

/*------------------------------------------------------
共通設定
------------------------------------------------------*/

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;
    background-color: #fff;
    color: #333333;
    background-attachment: fixed;
    z-index: 1;
    font-size: 1.6rem;
    font-family: 'Noto Sans JP', 'Hiragino Sans', 'Helvetica Neue', Arial, sans-serif;
    font-style: normal;
    transition: .7s;
    line-height: 1.6;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    border: none;
    background: none;
    cursor: pointer;
}

.pd10 {
    padding: 10px;
}

.pd20 {
    padding: 20px;
}

.pd30 {
    padding: 30px;
}

.pd40 {
    padding: 40px;
}

.pd50 {
    padding: 50px;
}

.pb0 {
    padding-bottom: 0px;
}

.pb10 {
    padding-bottom: 10px;
}

.pb20 {
    padding-bottom: 20px;
}

.pb30 {
    padding-bottom: 30px;
}

.pb40 {
    padding-bottom: 40px;
}

.pb50 {
    padding-bottom: 50px;
}

.m30 {
    margin: 30px;
}

/* ===== デフォルト（初期状態） ===== */
.sp {
    display: none;
}

.pc {
    display: none;
}

/* ===== スマホ用（768px以下） ===== */
@media screen and (max-width: 768px) {
    .sp {
        display: block;
        /* スマホで表示 */
    }

    .pc {
        display: none;
        /* PCは非表示 */
    }
}

/* ===== PC用（769px以上） ===== */
@media screen and (min-width: 769px) {
    .sp {
        display: none;
        /* スマホは非表示 */
    }

    .pc {
        display: block;
        /* PCで表示 */
    }
}

/*------------------------------------------------------
ハンバーガーメニュー
------------------------------------------------------*/

/* メニューのスタイル */
.menu {
    position: fixed;
    top: 0;
    right: -100%;
    /* 初期状態では画面の外に隠れている */
    width: 330px;
    height: 100%;
    background-color: var(--hamburger-menu-bg-color);
    opacity: 0.95;
    color: #fff;
    transition: right 0.3s ease;
    /* スライドインのアニメーション */
    padding: 10px;
    box-sizing: border-box;
    z-index: 9998;
    text-align: center;
}

/* メニューが開いているとき */
.menu.open {
    right: 0;
}

/* ボタンのスタイル */
.hamburger {
    position: fixed;
    display: flex;
    flex-direction: column;
    /* ←縦方向に配置 */
    align-items: center;
    justify-content: center;
    top: 20px;
    right: 20px;
    margin: 20px;
    width: 60px;
    height: 60px;
    cursor: pointer;
    z-index: 9999;
    background-color: var(--hamburger-bg-color);
    border-radius: 50%;
}

.hamburger span {
    display: block;
    height: 2px;
    width: 30px;
    background-color: var(--hamburger-span-color);
    margin: 3px 0;
    transition: 0.4s;
}

/* バツ印に変化するスタイル */
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
    background-color: var(--hamburger-span-color2);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
    background-color: var(--hamburger-span-color2);
}

/* メニューリストのスタイル */
.menu ul {
    list-style-type: none;
    padding: 0;
    margin-top: 80px;
}

.menu li {
    padding: 10px 0;
    /* border-bottom: 1px solid #fff; */
}

.menu li a {
    color: var(--hamburger-text-color);
    text-decoration: none;
    display: block;
}

.nav_wrapper {
    display: none;
}

.logo,
.logo2,
.logo3,
.logo4,
.logo5,
.logo6 {
    display: none;
}

/*------------------------------------------------------
背景設定
------------------------------------------------------*/

.bg01 {
    background-color: var(--sec1-bg-color);
    background-image: url(../img/mv_bg.jpg);

}

.bg02 {
    background-color: var(--sec2-bg-color);
}

.bg03 {
    background-color: var(--sec3-bg-color);
}

.bg04 {
    background-color: var(--sec4-bg-color);
}

.bg05 {
    background-color: var(--sec5-bg-color);
}

.bg06 {
    background-color: var(--sec6-bg-color);
}

.bg07 {
    background-color: var(--sec7-bg-color);
}

.bg08 {
    background-color: var(--sec8-bg-color);
}

.bg09 {
    background-color: var(--sec8-bg-color);
}

.bg10 {
    background-color: var(--sec8-bg-color);
}


/*------------------------------------------------------
コンテンツ
------------------------------------------------------*/

.article {
    margin: 0 auto;
    padding: 0;
    max-width: none;
    width: 100%;

    .section {
        padding: 20px;
        height: 1000px;
    }
}

#sec01 {
    background-color: var(--sec1-color);
    color: var(--text-color);
}

#sec02 {
    background-color: var(--sec2-color);
    color: var(--text-color);
}

#sec03 {
    background-color: var(--sec3-color);
    color: var(--text-color);
}

#sec04 {
    background-color: var(--sec4-color);
    color: var(--text-color);
}

#sec05 {
    background-color: var(--sec5-color);
    color: var(--text-color);
}

#sec06 {
    background-color: var(--sec6-color);
    color: var(--text-color);
}

#sec07 {
    background-color: var(--sec7-color);
    color: var(--text-color);
}

#sec08 {
    background-color: var(--sec8-color);
    color: var(--text-color);
}

#sec09 {
    background-color: var(--sec9-color);
    color: var(--text-color);
}

#sec010 {
    background-color: var(--sec10-color);
    color: var(--text-color);
}

/*------------------------------------------------------
footer
------------------------------------------------------*/

.footersection {
    position: relative;
    background: #fff;
    width: 100%;
    /* max-width: 375px; */
    margin: 0 auto;
}

.footer-cta {
    position: absolute;
    bottom: 0;
    /* ← 画面の外に隠しておく */
    width: 100%;
    margin: 0 auto;
    background: #ffffff;
    color: #fff;
    text-align: center;
    padding: 20px;
    padding-bottom: 100px;
    transition: bottom 0.5s ease;
    z-index: 999;
}

/* 表示される状態 */
.footer-cta.show {
    bottom: 0;
    /* ← 上にスライドして表示 */
}


/*  個人情報の取り扱いについて
------------------------------------------------------------------*/

.kojin {
    text-align: center;
}

.on_a {
    display: inline-block;
    background-color: #a0a0a0;
    color: #fff;
    padding: 20px 30px;
    font-size: 1rem;
}

/*  footer
------------------------------------------------------------------*/

.ft {
    color: #000;
    margin-top: 20px;
}

.fot01>a>img {
    width: 30%;
    min-width: 320px;
    max-width: 400px;
    margin: 0 auto;
}

.copy {
    margin-top: 15px;
}

.copy>p {
    color: #010101;
    font-size: 0.7rem;
}

.sticky-footer {
    transform: translateY(0);
    transition: transform 0.3s ease;
    position: fixed;
    bottom: 0rem;
    left: 0;
    width: 100%;
    height: 0px;
    padding: 0px;
    padding-bottom: 65px;
    display: flex;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 999;
}

.footer_btn_flex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin: 10px 10px;
    min-width: 360px;
    border-radius: 10px;
}

.btn_wrap,
.btn_wrap2 {
    width: 290px;
    height: auto;
    position: relative;
    margin: auto;
}

.btn_balloon,
.btn_balloon2 {
    display: none;
}

.button {
    width: 100%;
    padding: 15px 10px;
    border-radius: 8px;
    font-size: 1.2rem;
    /* font-family: "Noto Sans Japanese"; */
    font-weight: 500;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    background: var(--Orange);
    -webkit-box-shadow: 0 5px 0 #d98a01;
    box-shadow: 0 5px 0 #d48700;
    color: #fff;
    transition: 0.2s;
}


/*  footerボタン2
------------------------------------------------------------------*/

.button2 {
    width: 100%;
    padding: 15px 20px;
    border-radius: 8px;
    font-size: 1.2rem;
    /* font-family: "Noto Sans Japanese"; */
    font-weight: 500;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    background: #3AB2EA;
    -webkit-box-shadow: 0 5px 0 #2279a1;
    box-shadow: 0 5px 0 #257da7;
    color: #fff;
    transition: 0.2s;
}

/*  校舎別
------------------------------------------------------------------*/
.sosyal {
    margin: 20px auto;
}

.facebook {
    background-color: #2e4a88;
    box-shadow: 0 4px 0 #1B3D82;
    text-shadow: 0 -1px -1px #1B3D82;

    display: inline;
    position: relative;
    /* font-family: Arial; */
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: white;
    border-radius: 5px;
    padding: 10px 25px;
}

.facebook:hover {
    background-color: #354F84;
}

.facebook:active {
    top: 2px;
    box-shadow: 0 2px 0 #1B3D82;
}

.twitter {
    background-color: #2e4a88;
    box-shadow: 0 4px 0 #1B3D82;

    display: inline;
    position: relative;
    /* font-family: Arial; */
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: white;
    border-radius: 5px;
    padding: 10px 25px;
}

.twitter:active {
    top: 2px;
    box-shadow: 0 2px 0 #1B3D82;
}

.twitter:hover {
    background-color: #354F84;
}

.google {
    background-color: #2e4a88;
    box-shadow: 0 4px 0 #1B3D82;

    display: inline;
    position: relative;
    /* font-family: Arial; */
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: white;
    border-radius: 5px;
    padding: 10px 25px;
}

.google:active {
    top: 2px;
    box-shadow: 0 2px 0 #1B3D82;
}

.google:hover {
    background-color: #354F84;
}

.sns_area2 {
    display: flex;
    flex-direction: row;
    text-align: center;
    align-items: center;
    justify-content: center;
    gap: 50px;
    padding-top: 10px;
    padding-bottom: 20px;
    margin: 0 auto;
}

.sns_area2 img {
    width: 25px;
}



/*------------------------------------------------------
タブレットスタイル
------------------------------------------------------*/

@media screen and (min-width:840px) {
    .article {
        margin: 0 auto;
        max-width: 375px;
        position: relative;
    }

    .footer-cta {
        max-width: 375px;
        padding-bottom: 20px;
    }

    .access-section {
        padding-bottom: 330px !important;
    }


    .nav_wrapper {
        display: none;
    }

    .logo,
    .logo2,
    .logo3,
    .logo4,
    .logo5,
    .logo6 {
        display: none;
    }

    .btn_balloon {
        width: 280px;
        height: 30px;
        padding-left: 0.1em;
        border-radius: 20px;
        border: solid 2px var(--Orange);
        background-color: #fff;
        font-size: 90%;
        /* font-family: "Noto Sans Japanese"; */
        font-weight: 700;
        line-height: 1;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: 40px;
        left: 50%;
        transform: translate(-50%, 0%);
        pointer-events: none;
        transition: 0.2s;
        color: var(--Orange);
        z-index: 2;
    }

    .btn_balloon::before,
    .btn_balloon::after {
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 100%);
    }

    .btn_balloon::before {
        bottom: 1px;
        border-width: 8px 5px 0 5px;
        border-color: #fff transparent transparent transparent;
        z-index: 2;
    }

    .btn_balloon::after {
        bottom: 0;
        border-width: 11px 8px 0 8px;
        border-color: var(--Orange) transparent transparent transparent;
        z-index: 1;
    }

    .btn_balloon2 {
        width: 280px;
        height: 30px;
        padding-left: 0.1em;
        border-radius: 20px;
        border: solid 2px #3AB2EA;
        background-color: #fff;
        font-size: 90%;
        /* font-family: "Noto Sans Japanese"; */
        font-weight: 700;
        line-height: 1;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: 40px;
        left: 50%;
        transform: translate(-50%, 0%);
        pointer-events: none;
        transition: 0.2s;
        color: #3AB2EA;
        z-index: 2;
    }

    .btn_balloon2::before,
    .btn_balloon2::after {
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 100%);
    }

    .btn_balloon2::before {
        bottom: 1px;
        border-width: 8px 5px 0 5px;
        border-color: #fff transparent transparent transparent;
        z-index: 2;
    }

    .btn_balloon2::after {
        bottom: 0;
        border-width: 11px 8px 0 8px;
        border-color: #3AB2EA transparent transparent transparent;
        z-index: 1;
    }

    .button2:after {
        content: "";
        position: absolute;
        top: 50%;
        bottom: 0;
        right: 2rem;
        font-size: 90%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: right 0.3s;
        width: 6px;
        height: 6px;
        border-top: solid 2px currentColor;
        border-right: solid 2px currentColor;
        transform: translateY(-50%) rotate(45deg);
    }

    .button2:hover {
        background: #3AB2EA;
        color: #FFF;
        -webkit-box-shadow: 0 2px 0 #1d7ba6;
        box-shadow: 0 2px 0 #2283af;
        transform: translateY(3px);
    }

    .button:after {
        content: "";
        position: absolute;
        top: 50%;
        bottom: 0;
        right: 2rem;
        font-size: 90%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: right 0.3s;
        width: 6px;
        height: 6px;
        border-top: solid 2px currentColor;
        border-right: solid 2px currentColor;
        transform: translateY(-50%) rotate(45deg);
    }

    .button:hover {
        background: var(--Orange);
        color: #FFF;
        -webkit-box-shadow: 0 2px 0 #d18400;
        box-shadow: 0 2px 0 #d88900;
        transform: translateY(3px);
    }

    .footer_btn_flex {
        gap: 20px;
    }

}

/*------------------------------------------------------
PCスタイル
------------------------------------------------------*/

@media screen and (min-width:1000px) {
    .article {
        margin: 0;
        max-width: 375px;
        right: calc((100% - 375px) / 4);
        position: absolute;
    }

    .sticky-footer {
        display: none;
    }

    /* // ナビ
// --------------------------------------------- */

    .nav_wrapper {
        display: block;
        position: fixed;
        z-index: 5;
        width: 100%;
        top: 60%;
        transform: translateY(-50%);

        .nav_list {
            position: absolute;
            top: 65%;
            transform: translateY(-35%);
            left: calc((100% - 320px) / 10);
            z-index: 5;
            text-align: left;
            font-size: 1.7rem;

            li {
                list-style: none;

                a {
                    text-decoration: none;
                    display: inline-block;
                    padding: 10px 20px;
                    font-weight: 700;
                    color: #000;
                }
            }
        }
    }

    .current {
        /* background-color: #fa8072 !important; */

        a {
            color: #000000 !important;
            text-decoration: underline !important;
            /* opacity: 0.9;
        text-decoration: underline; */
        }
    }

    .logo {
        display: block;
        position: fixed;
        top: 100px;
        left: calc((100% - 320px) / 8);
        width: 300px;
        height: auto;
        z-index: 10;
    }

    .logo2 {
        display: block;
        position: fixed;
        top: 150px;
        left: calc((100% - 320px) / 8);
        width: 300px;
        height: auto;
        z-index: 10;
    }

    .logo3 {
        display: block;
        position: fixed;
        top: 300px;
        left: calc((100% - 320px) /3.5);
        width: 400px;
        height: auto;
        z-index: 10;
    }

    .logo4 {
        display: block;
        position: fixed;
        top: 300px;
        left: calc((100% - 320px) /9);
        width: 300px;
        height: auto;
        z-index: 20;
    }

    .logo5 {
        display: block;
        position: fixed;
        top: 380px;
        left: calc((100% - 320px) /9);
        width: 300px;
        height: auto;
        z-index: 20;
    }

    .logo6 {
        display: block;
        position: fixed;
        top: 75%;
        left: calc((100% - 320px) /7);
        width: 200px;
        height: auto;
        z-index: 20;
    }

    .sns_area {
        display: flex;
        flex-direction: row;
        text-align: center;
        align-items: center;
        gap: 50px;
        margin: 0 auto;
        margin-left: 80px;
    }

    .sns_area a {
        width: 40%;
    }

}


/*------------------------------------------------------
SECTION01
------------------------------------------------------*/
#sec01 {
    position: relative;
    width: 100%;
    min-height: 565px;
}

.mvv {
    position: relative;
}

.mv_wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 730/1130;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;

}

.mv_logo,
.nyuugaku,
.fukuoka,
.tategaki {
    position: absolute;
}

/* 縦書きテキスト */
.tategaki {
    left: 50%;
    transform: translateX(-50%);
    top: 10%;
}

.tategaki2 {
    display: flex;
    flex-direction: row;
    gap: 10px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.5));

}

#sec01 p {
    width: 20px;
    /* font-family: 'Noto Sans JP'; */
    font-weight: 900;
    font-size: 2rem;
    line-height: 140%;
    font-feature-settings: 'vert' on;
    color: var(--White);
}

.mv_logo {
    left: 50%;
    transform: translateX(-50%);
    position: absolute;

    top: 62%;
    width: 85%;
}

.nyuugaku {
    left: 50%;
    transform: translateX(-50%);
    top: 67%;
    /* width: 65%; */
}

.fukuoka {
    left: 50%;
    transform: translateX(-50%);

    top: 75%;
    /* width: 55%; */
}

/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

.box {
    opacity: 0;
    list-style: none;
}

/*==================================================
動かしたい動き（今回は” ふわっ” を採用）
===================================*/

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translate(-50%, 100px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/*------------------------------------------------------
main
------------------------------------------------------*/

.button04 {
    position: fixed;
    /* font-family: "Noto Sans Japanese"; */
    font-weight: bold;
    line-height: 1.5;
    padding: 15px 45px 15px 45px;
    transition: 0.3s;
    text-decoration: none;
    color: #fff;
    border-radius: 0.5rem;
    background: #32b16c;
    box-shadow: 0 5px 0 #2c9d60;
    margin-left: 10px;
}

.button04 p {
    margin: 0;
}

.button04 .btn_balloon04 {
    position: absolute;
    display: inline-block;
    bottom: 0.8em;
    left: -10px;
    width: 5em;
    height: 5em;
    /* font-family: "Noto Sans Japanese"; */
    line-height: 5em;
    text-align: center;
    color: #32b16c;
    font-size: 80%;
    font-weight: bold;
    background: #fff;
    border: 3px solid #32b16c;
    border-radius: 50%;
    box-sizing: border-box;
    transform: rotate(-10deg);
}

.button04 .btn_balloon04::before {
    position: absolute;
    content: "";
    bottom: -5px;
    right: -10px;
    border: 9px solid transparent;
    border-left: 15px solid #FFF;
    z-index: 0;
    transform: rotate(45deg);
}

.button04:hover {
    transform: translate(0, 3px);
    background: #6bc594;
    box-shadow: 0 2px 0 #2c9d60;
}

/* 
body {
    vertical-align: middle;
    padding: 50px 0;
    text-align: center;
} */

.button05 {
    position: fixed;
    /* font-family: "Noto Sans Japanese"; */
    font-weight: bold;
    line-height: 1.5;
    padding: 15px 45px 15px 45px;
    transition: 0.3s;
    text-decoration: none;
    color: #fff;
    border-radius: 0.5rem;
    background: #F39800;
    box-shadow: 0 5px 0 #de8d00;
    margin-left: 10px;
}

.button05 p {
    margin: 0;
}

.button05 .btn_balloon05 {
    position: absolute;
    display: inline-block;
    bottom: 0.8em;
    left: -10px;
    width: 5em;
    height: 5em;
    /* font-family: "Noto Sans Japanese"; */
    line-height: 5em;
    text-align: center;
    color: #32b16c;
    font-size: 80%;
    font-weight: bold;
    background: #fff;
    border: 3px solid #32b16c;
    border-radius: 50%;
    box-sizing: border-box;
    transform: rotate(-10deg);
}

.button05 .btn_balloon05::before {
    position: absolute;
    content: "";
    bottom: -5px;
    right: -10px;
    border: 9px solid transparent;
    border-left: 15px solid #FFF;
    z-index: 0;
    transform: rotate(45deg);
}

.button05:hover {
    transform: translate(0, 3px);
    background: #ffa710;
    box-shadow: 0 2px 0 #F39800;
}

/*------------------------------------------------------
SECTION01 banner
------------------------------------------------------*/

.banner01 img {
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.25));
    margin: 0 auto;
    margin-bottom: 30px;
    padding: 0 33px 0 0;
    width: 100%;
    max-width: 375px;
}

.button-3 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: .9em 2em;
    border: none;
    border-radius: 50px;
    box-shadow: 0 2px 3px rgb(0 0 0 / 25%), 0 2px 3px -2px rgb(0 0 0 / 15%);
    background-color: var(--Rightblue);
    color: var(--White);
    font-weight: 600;
    font-size: 1.2rem;
}

.button-3::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    content: '';
}

.button-3:hover {
    background-color: var(--White);
    color: var(--Rightblue);
}

.fukidashi_wrap {
    position: relative;
    width: 100%;
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.4s ease-out;
}

.fukidashi_wrap.zoomIn {
    opacity: 1;
    transform: scale(1);
}

.banner01 {
    position: relative;
    padding-bottom: 30px;
}

.fukidashi {
    position: absolute;
    width: 43%;
    max-width: 200px;
    left: 0;
    top: -74px;
    display: block;
    z-index: 666;
}

@media (min-width: 500px) and (max-width: 840px) {
    .fukidashi_wrap .fukidashi {
        left: calc((100vw - 500px) * 0.5);
        /* ここで徐々に左へ */
    }
}

@media (min-width: 840px) {
    .fukidashi_wrap .fukidashi {
        left: 0;
        /* 戻す */
    }
}

/* 拡大 */
.zoomIn {
    animation-name: zoomInAnime;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}

@keyframes zoomInAnime {
    from {
        transform: scale(0.6);
    }

    to {
        transform: scale(1);
    }
}

.m1 {
    margin-left: 20px;
    margin-right: 20px;
}

/*------------------------------------------------------
SECTION02
------------------------------------------------------*/
#sec02,
.ttl {
    text-align: center;
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 40px;
}

.orange {
    background-color: var(--Orange);
    padding: 20px 56px;
    color: var(--White);
}

.orange p {
    font-weight: 700;
    font-size: 12px;
    line-height: 160%;
}

.orange h2 {
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 160%;
}

.ttl p {
    font-weight: 700;
    font-size: 12px;
    line-height: 160%;
}

.ttl h2 {
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 160%;
}

.triangle {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 20px solid var(--Orange);
    /* 色付き部分 */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 135px;
}

.point01 {
    position: relative;
    background-color: var(--White);
    margin-top: 60px;
    border-radius: 15px;
    /* Frame 11 */

    /* オートレイアウト */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    gap: 18px;

    width: 80%;
    max-width: 300px;
    height: auto;
    left: 50%;
    transform: translateX(-50%);
}

.point01 h3 {
    font-weight: 700;
    font-size: 18px;
    line-height: 160%;
    text-align: center;
    padding-top: 40px;
}

.point01 p {
    width: 100%;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 160%;
    align-self: stretch;
    text-align: left;
}

.point01 img {
    /* point01 */
    width: 20%;
    height: auto;
}

.number {
    position: absolute;
    left: 0px;
    top: -80px;
    /* font-family: 'Noto Sans JP'; */
    font-style: normal;
    font-weight: 700;
    font-size: 9.6rem;
    line-height: 160%;
    color: rgba(243, 152, 0, 0.6);
}

.watanabe_chance {
    width: 100%;
    text-align: center;
    background-color: var(--Orange);
    padding: 10px;
    color: #FFF;
    border-radius: 15px;
    font-size: 14px;
}

/*------------------------------------------------------
SECTION03
------------------------------------------------------*/
#sec03 {
    padding-bottom: 10px;
}

#sec03 h5 {
    /* CORSE */
    font-size: 96px;
    line-height: 160%;
    text-align: center;
    width: 100%;
    color: rgba(128, 206, 237, 0.3);
    margin: 0 auto;
}

#sec05 h5 {
    font-size: 96px;
    line-height: 160%;
    text-align: center;
    width: 100%;
    color: rgba(243, 152, 0, 0.3);
    margin: 0 auto;
}

#sec06 h5 {
    font-size: 96px;
    line-height: 160%;
    text-align: center;
    width: 100%;
    color: rgba(0, 160, 233, 0.3);
    margin: 0 auto;
}

.ttlmoto {
    position: relative;
}

.ttl {
    position: absolute;
    top: 70px;
}

/* =============== コース紹介セクション =============== */
.course-section {
    position: relative;
    width: 375px;
    margin: 0 auto;
    margin-top: 80px;
    min-height: 2581px;
    /* font-family: "Noto Sans JP", sans-serif; */
}

.course-header {
    position: relative;
    text-align: center;
    padding: 32px 62px;
    margin-bottom: 40px;
}

.course-header-bg {
    position: absolute;
    font-size: 96px;
    font-weight: 700;
    line-height: 1.6;
    color: rgba(128, 206, 237, 0.3);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}

.course-header-text {
    position: relative;
    z-index: 1;
    font-weight: 700;
    color: black;
}

.course-header-text .small {
    font-size: 12px;
    line-height: 1.6;
}

.course-header-text .large {
    font-size: 24px;
    line-height: 1.6;
}

.course-card {
    position: relative;
    background: #addce2;
    border-radius: 20px;
    padding: 15px;
    margin: 0 auto 40px;
    width: 299px;
    min-height: 600px;
    margin-top: 50px;
    margin-bottom: 60px;
}

.course-card.actor {
    background: #fbd9ac;
}

.course-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    color: black;
    margin: 16px 0;
}

.course-genre {
    background: white;
    border-radius: 10px;
    padding: 10px 23px;
    text-align: center;
    margin-bottom: 16px;
}

.course-genre-label {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    color: #80ceed;
}

.course-genre-label.actor {
    color: #f39800;
}

.course-genre-text {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    color: black;
}

.course-description {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    color: black;
    text-align: justify;
    margin-bottom: 35px;
}

.curriculum-section {
    display: flex;
    gap: 23px;
    margin-bottom: 35px;
}

.curriculum-label {
    background: #00a0e9;
    border-radius: 5px;
    padding: 35px 7px;
    writing-mode: vertical-rl;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    color: white;
    min-width: 31px;
}

.curriculum-label.actor {
    background: #f39800;
}

.curriculum-items {
    display: flex;
    flex-direction: column;
    gap: 40px;
    flex: 1;
}

.curriculum-item-title {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    color: black;
    margin-bottom: 10px;
}

.curriculum-item-image {
    width: 212px;
    height: 135px;
    border-radius: 5px;
    overflow: hidden;
}

.curriculum-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recruitment-section {
    background: black;
    border-radius: 20px;
    padding: 1px 108px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.recruitment-title {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    color: white;
}

.recruitment-details {
    padding: 0 3px;
}

.recruitment-item {
    margin-bottom: 16px;
}

.recruitment-label {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    color: black;
}

.recruitment-value {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    color: black;
}

.recruitment-note {
    font-size: 10px;
    font-weight: 400;
    line-height: 1.6;
    color: black;
}


/*------------------------------------------------------
SECTION04
------------------------------------------------------*/
/* =============== 学費セクション =============== */

.circle01 {
    position: absolute;
    width: 200px;
    height: auto;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}

.tuition-section {
    position: relative;
    background: var(--Rightblue);
    width: 375px;
    margin: 0 auto;
    min-height: 518px;
    padding: 0px 36px 40px 36px;
    border-radius: 20px;
}

.tuition-header {
    position: relative;
    text-align: center;
    margin-bottom: 40px;
    font-weight: 700;
    color: var(--Black);
    z-index: 3;
}

.tuition-header .small {
    font-size: 1.2rem;
    line-height: 1.6;
    z-index: 3;
}

.tuition-header .large {
    font-size: 2.4rem;
    line-height: 1.6;
    z-index: 3;
}

.monthly-fee-section {
    margin-bottom: 40px;
    z-index: 3;
    position: relative;
}

.fee-label {
    background: var(--Black);
    border-radius: 20px;
    padding: 1px 10px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.fee-label-text {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.6;
    color: #80ceed;
}

.fee-amount {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.6;
    color: black;
    text-align: center;
}

.entrance-fee-section {
    background: white;
    border-radius: 20px;
    padding: 1px 10px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.entrance-fee-amount {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.6;
    color: white;
    text-align: center;
}

.fee-breakdown {
    display: flex;
    gap: 28px;
    align-items: center;
    justify-content: center;
    color: white;
    margin-top: 16px;
}

.breakdown-label {
    background: white;
    border-radius: 50%;
    width: 69px;
    height: 69px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #80ceed;
}

.breakdown-items {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    text-align: left;
}

.tuition-note {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    color: black;
    text-align: justify;
    margin-top: 24px;
}

/*------------------------------------------------------
SECTION05
------------------------------------------------------*/

/* =============== 学生の声セクション =============== */
.voice-section {
    position: relative;
    background: #fbd9ac;
    width: 100%;
    max-width: 375px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 5px 5px 50px 5px;
}

.voice-section img {
    padding: 20px 35px;
}

.voice-card {
    background-image: url(../img/fukidashi03.png);
    background-size: cover;
    border-radius: 20px;
    padding: 42px 31px 30px 31px;
    margin: 0 auto;
    max-width: 329px;
    box-sizing: border-box;
}

.voice-name {
    font-size: 18px;
    font-weight: 700;
    color: black;
    text-align: center;
    margin-bottom: 4px;
}

.voice-info {
    font-size: 16px;
    font-weight: 700;
    color: #f39800;
    text-align: center;
    margin-bottom: 16px;
}

.voice-text {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    color: black;
    text-align: justify;
}


/*------------------------------------------------------
SECTION06
------------------------------------------------------*/

/* =============== 学校説明会セクション =============== */
.event-section {
    position: relative;
    background: white;
    width: 100%;
    max-width: 375px;
    margin: 0 auto;
    padding: 0px 0px 40px 0px;
    box-sizing: border-box;
}

.event-description {
    font-size: 12px;
    font-weight: 400;
    line-height: 2;
    color: black;
    text-align: center;
    margin-bottom: 24px;
}

.event-image {
    width: 303px;
    height: 210px;
    border-radius: 15px;
    overflow: hidden;
    margin: 0 auto 24px;
}

.event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.button03 a {
    background: #80ceed;
    border-radius: 23px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 303px;
    height: 45px;
    max-width: 303px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-size: 16px;
    padding: 20px 30px;
    /* font-family: "Noto Sans Japanese"; */
    line-height: 1.8;
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    border-bottom: solid 5px #55a3c2;
    transition: 0.3s ease-in-out;
}

.button03 a:after {
    content: "";
    position: absolute;
    top: 50%;
    bottom: 0;
    right: 2rem;
    font-size: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: right 0.3s;
    width: 6px;
    height: 6px;
    border-top: solid 2px currentColor;
    border-right: solid 2px currentColor;
    transform: translateY(-50%) rotate(45deg);
}

.button03 a:hover:after {
    right: 1.4rem;
}

.button03 a:hover {
    background: #80ceed;
    color: #FFF;
    border-bottom: solid 2px #999;
    transform: translateY(3px);
}

.button03 a:hover:before {
    color: #fff;
}

.tooltip {
    /* font-family: "Noto Sans Japanese"; */
    font-size: 100%;
    font-weight: 700;
    position: relative;
    margin-bottom: .5rem;
    text-align: center;
    color: var(--Orange);
}

.tooltip:before {
    margin-right: 1rem;
    content: '＼';
}

.tooltip:after {
    margin-left: 1rem;
    content: '／';
}

body {
    vertical-align: middle;
    text-align: center;
}

/*------------------------------------------------------
SECTION07
------------------------------------------------------*/


/* =============== WEAセクション =============== */
.wea-section {
    position: relative;
    background: #00a0e9;
    width: 100%;
    max-width: 375px;
    margin: 0 auto;
    box-sizing: border-box;
    padding-bottom: 40px;

}

#sec07 h5 {
    font-size: 96px;
    line-height: 160%;
    text-align: center;
    width: 100%;
    color: rgba(255, 255, 255, 0.3);
    margin: 0 auto;
}

#sec07 .ttl {
    color: var(--White);
}

#sec07 .ttl h2 {
    font-size: 2.1rem;
}

.wea-main-image {
    width: 185px;
    height: 267px;
    margin: 20px auto 40px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.wea-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wea-description {
    padding: 0px 37px 0px 37px;
    font-size: 12px;
    font-weight: 400;
    line-height: 2;
    color: white;
    text-align: center;
    margin-bottom: 40px;
}

.graduate-gallery {
    margin-bottom: 24px;
}

.graduate-image {
    width: 100%;
    aspect-ratio: 125 / 101;
    overflow: hidden;
}

.graduate-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.graduate-link {
    background: #80ceed;
    border-radius: 23px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 303px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-size: 16px;
    font-weight: 500;
    color: white;
    text-decoration: none;
    transition: transform 0.2s;
    margin-bottom: 40px;
}

.graduate-link:hover {
    transform: translateY(-2px);
}

/*------------------------------------------------------
SECTION08
------------------------------------------------------*/


/* =============== アクセスセクション =============== */
.access-section {
    position: relative;
    background: #addce2;
    width: 100%;
    max-width: 375px;
    margin: 0 auto;
    padding: 30px 37px 380px 37px;
    box-sizing: border-box;
}

.access-header {
    text-align: center;
    margin-bottom: 24px;
    font-weight: 700;
    color: black;
}

.access-header .small {
    font-size: 12px;
    line-height: 1.6;
}

.access-header .large {
    font-size: 24px;
    line-height: 1.6;
}

.map-placeholder {
    background: #d9d9d9;
    height: 263px;
    width: 310px;
    margin: 0 auto 24px;
    border-radius: 10px;
}

.access-info {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    color: black;
    text-align: left;
    margin-bottom: 24px;
}

.access-highlight {
    background: white;
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    width: 310px;
    margin: 0 auto;
}

.access-highlight-text {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    color: #00a0e9;
}


/*
フェード表示させる要素に使用するためのクラス
*/
.fadein2 {
    opacity: 0;
    transition: all 1s;
}

.fadein {
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s;
}

#sec10 {
    background-color: #fff;
    padding-top: 40px;
}

[id^="form"] {
    scroll-margin-top: 1000px;
}

#form {
    background-color: #fff;
    padding-top: 50px;
    margin-top: 30px;
    padding: 0 3%;
}