@charset "utf-8";

 /* ==================== 
 banner
=====================*/
.header{
    height: 150px;
    background-image: url(../images/banner_sp.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.pagename_sp{
    display: block;
    padding: 10px 14px;
    margin: 32px auto 0;
    color: #FFF;
    background: rgba(255, 102, 102, 0.50);
    font-family: "Kiwi Maru";
    font-size: 2rem;
    font-weight: 500;
}

.logo,.hamburger{
    position: absolute;
}

.logo{
    top:25px;
 }

.hamburger{
    top:20px;
    right:21px;
}

.pagename_pc,.banner_pc{
    display: none;
}

/* banner pc */
@media screen and (min-width:769px) {
.banner{
    max-width: 100%;
    text-align: center;
    position: relative;
    }

.pagename_pc{
    display: inline-block;
    padding: 20px 0;
    color: #FFF;
    font-family: "Kiwi Maru";
    font-size: 6.4rem;
    background-color:rgba(255, 102, 102, 0.50);
    text-align: center;
    position: absolute;
    width: 900px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    }

.banner_pc{
    display: block;
    }
}/* pc 769px */

 /* ==================== 
 triallesson
=====================*/
.section--triallesson{
    padding: 40px 5.3%;
}

.page_title-triallesson{
    width: 283px;
    padding: 20px 0;
    margin: 0 auto;
    font-family: "Kiwi Maru";
    font-size: 2rem;
    background-color:#FCFDD8;
    text-align: center;
}

.triallesson_image{
    margin-top: 40px;
}

.triallesson_image img{
    border-radius: 20px;
}

.triallesson_txt{
    margin-top: 40px;
    color: #6E5E4F;
    font-size: 2rem;
}

.triallesson_txt-02,.triallesson_txt-03{
    margin-top: 20px;
}

/* triallesson pc */
@media screen and (min-width:769px) {
    .section--triallesson{
        padding: 60px 0;
    }

    .triallesson_contents{
        max-width: 1190px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        gap: 65px;
    }

    .triallesson_image{
        max-width: 600px;
    }
}/* pc 769px */

 /* ==================== 
 courseflow
=====================*/
.section--courseflow{
    padding: 60px 5.3%;
    background-color: var(--primary-beige,#FFEDE0);
}

.page_title-courseflow{
    width: 176px;
    padding: 20px 38px;
    margin: 0 auto;
    font-family: "Kiwi Maru";
    font-size: 2rem;
    background-color:#E4FFFF;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.courseflow_list{
    margin-top: 60px;
    display: block;
    margin: 60px auto 0 ;
}

.item{
   width: 250px;
   height: 250px;
   margin: 0 auto 55px;
   background-color: #FFF;
   border-radius: 50%;
   text-align: center;
   position: relative;
}

.item:last-child{
    margin-bottom: 0;
}

.item::after{
    content: '';
    position: absolute;
    top:108%;
    left:47%;
    border: 11px solid transparent;
    border-top: 20px solid #6E5E4F;
}

.item:last-child:after{
    content: none;
}

.item_title{
    padding-top: 35px;
    color: #F66;
    font-family: "Noto Sans JP";
    font-size: 2rem;
    font-weight: 900;
}

.item_txt{
    margin-top: 30px;
    font-family: "Noto Sans JP";
    font-size: 1.8rem;
    line-height: 2;
}

.courseflow_list div:nth-child(n+3) dd{
    margin-top: 46px;
}

/* courseflow pc  */
@media screen and (min-width:769px) {
    .section--courseflow{
        padding: 60px 0;
    }

    .courseflow_list{
        max-width: 1190px;
        min-width: 1180px;
        padding: 0;
        margin: 60px auto;
        display: flex;

    }

    .item{
        margin: 0 55px 0 0;
    }

    .courseflow_list .item:last-child{
        margin: 0;
    }

    .item::after{
        top:50%;
        left:104%;
        transform: rotate(28deg);
    }
}/*  pc 769px*/

 /* ==================== 
 application
=====================*/
.section--application{
    padding: 60px 5.3% 50px;
}

.page_title-application{
    padding: 5px 0;
    color: #FFF;
    text-align: center;
    font-family: "Kiwi Maru";
    font-size: 2rem;
    font-weight: 500;
    background-color: #FF6666;
    border: 1px solid #fff;
    box-shadow: 0 0 0px 10px #FF6666;
}

.number_list{
    padding: 61px 0 26px;
    margin-top: 68px;
    background-color: #FCFDD8;
    border-radius: 20px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.07);
}

.phone_list{
    margin-left: 107px;
    color: #F66;
    font-family: "Noto Sans JP";
    font-size: 3rem;
    font-weight: 700;
}

.phone_list dt{
    position: relative;
}

.phone_list dd{
    color: #6E5E4F;
    font-family: "Noto Sans JP";
    font-size: 1.8rem;
    font-weight: 500;
}

.phone_list .tel::before{
    content: '';
    display: block;
    width: 71px;
    height: 71px;
    background-image: url(../images/tel_icon-contact.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left:-82px;
}

.phone_list .sp::before{
    content: '';
    display: block;
    width: 71px;
    height: 100px;
    background-image: url(../images/sp_icon-contact.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top:-28px;
    left:-82px;
}

.sp_contents{
    margin-top: 82px;
}

.line{
    margin-top: 40px;
    padding: 31px 0 15px;
    background-color: #4CE364;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.07);


}

.QRcord{
    background-color: #FFF;
    width: 180px;
    height: 180px;
    margin: 0 auto;
}

.LINE{
    padding-top: 15px;
    color: #F2F709;
    font-family: "Noto Sans JP";
    font-size: 3rem;
    font-weight: 700;
}

.LINE_txt{
    display: inline-block;
    padding-top: 15px;
    color: #FFF;
    font-family: "Noto Sans JP";
    font-size: 1.6rem;
    font-weight: 700;
    text-align: left;
}

/* application pc */
@media screen and (min-width:769px) {
.section--application{
    padding: 60px 0;
}

.page_title-application{
    max-width: 354px;
    margin: 0 auto;
}

.contact{
    display: flex;
    justify-content: space-around;
    max-width: 956px;
    margin: 68px auto 0;
}

.number_list{
    width: 418px;
    margin: 0;
    padding-right: 64px;
}

.line{
    width: 418px;
    margin: 0;
    padding: 31px 0 31px;
}

}