@charset "UTF-8";

body {
    background-image: url(../img/bg/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}


.all_subtitle {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
    width: 70%;
    margin: 50px auto 30px auto;
    
}

.all_subtitle h2 {
    font-size: 25px;
}

.about_main {
    width: 80%;
    margin: 0 0 0 15%;
    font-family: "Klee One", cursive;
    font-weight: 400;
    font-style: normal;
    
}

.about_flex {
    display: flex;
    align-items: start;
}

.about_img {
    width: 30%;
    min-width: 150px;
    max-width: 250px;
    margin: 0 5% 0 0;
}

.about_img img {
    width: 100%;
}

.about_div {
    width: 90%;
    padding-bottom: 100px;
    background-image: url(../img/bg/backimg3_2_white.png);
    background-size:50%;
    background-repeat: no-repeat;
    background-position: right bottom;
    
}

.about_name {
    display: flex;
    align-items: flex-end;
    border-bottom: #9F84FF solid 2px;
    width: 100%;
    padding: 0 0 0 2%;
    margin: 0 0 30px 0;
}

.sub {
    font-size: 20px;
    margin: 0 20px 2px 10px;
}

.kanji {
    font-size: 25px;
    margin: 0 10px 0 0;
    font-weight: 500;
}

.huri {
    font-size: 16px;
    margin: 0 0 5px 0;

}

.about_text {
    font-size: 17px;
    margin: 0 3%;
}

.about_dl {
    display: flex;
    letter-spacing: 1.5px;
    margin: 0 0 13px 0;
}

.about_dl dt {
    margin: 0 3% 0 0;
    min-width: 70px;
}

.top_about {
    width: 70%;
    max-width: 1200px;
    margin: 0 auto ;
    display: flex;
    font-family: "Klee One", cursive;
    font-weight: 500;
    font-style: normal;
}

.top_about_flex {
    width: 60%;
}


.les_title {
    font-size: 25px;
    margin: 0 0 10px 0;
    font-weight: 600;
}

.les_text {
    letter-spacing: 1px;
    margin: 0 0 15px 0;
}

.les_class {
    margin: 0 0 0 1em;
}

.class_li {
    margin: 0 0 5px 0;
}

/*矢印が右に移動する*/
.btnarrow3 {
    /*矢印と下線の基点とするためrelativeを指定*/
    position: relative;
    /*形状*/
    padding: 0 0 0 0px;
    color: #333;
    text-decoration: none;
    outline: none;
    width: 250px;
    max-width: 300px;
    margin: 20px 0;
}

/*矢印と下線の形状*/
.btnarrow3::before {
    content: '';
    /*絶対配置で下線の位置を決める*/
    position: absolute;
    bottom: -8px;
    left: 0;
    /*下線の形状*/
    width: 85%;
    height: 1px;
    background: #333;
    /*アニメーションの指定*/
    transition: all .3s;
}

.btnarrow3::after {
    content: '';
    /*絶対配置で矢印の位置を決める*/
    position: absolute;
    bottom: -3px;
    right: 15%;
    /*矢印の形状*/
    width: 15px;
    height: 1px;
    background: #333;
    transform: rotate(35deg);
    /*アニメーションの指定*/
    transition: all .3s;
}

/*hoverした際の移動*/
.btnarrow3:hover::before {
    left: 10%;
}

.btnarrow3:hover::after {
    right: 5%;
}

.fees_p {
    font-size: 15px;
}

.fees_p a {
    text-decoration: none;
    color: #000;
}

.top_about_img {
    width: 40%;
    margin: auto 0;
    text-align: right;
}

.top_about_img_tb {
    display: none;
}

.les_img {
    width: 90%;
    border-radius: 10px
}

.top_map_flex {
    width: 100%;
    max-width: 1200px;
    display: flex;
    margin: 50px auto 0 auto;

}

.top_map {
    width: 50%;
    text-align: center;
    font-family: "Klee One", cursive;
    font-weight: 500;
    font-style: normal;
}

.top_map_title {
    font-size: 1.3em;
    font-weight: 400;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
}

.top_map p {
    width: 70%;
    margin: 10px auto;
    text-wrap: balance;
    word-break: auto-phrase;
}

.studio_img {
    width: 80%;
    max-width: 500px;
    border-radius: 10px;
    box-shadow:
        7.2px 6.1px 3.7px -7px rgba(0, 0, 0, 0.023),
        24.1px 20.5px 12.5px -7px rgba(0, 0, 0, 0.034),
        108px 92px 56px -7px rgba(0, 0, 0, 0.05);
}

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

    main {
        background-image: url(../img/bg/backimg_white.png);
        background-size:30%;
        background-repeat: no-repeat;
        background-position: top 300px left 0px;;
    }

    .about_div {
        background-image: url(../img/bg/backimg3_2_white.png);
        background-size:90%;
        background-repeat: no-repeat;
        background-position: right bottom;
        
    }

    .top_about {
        width: 88%;
        max-width: 1200px;
        margin: 50px auto 0 auto;
        display: block;
    }

    .top_about_flex {
        width: 100%;
    }

    .about_lesson {
        width: 100%;
    }

    .about_lesson_tb {
        width: 60%;
    }

    .about_lesson_tb_flex {
        display: flex;
    }

    .top_about_img_tb {
        display: block;
        width: 40%;
        margin: auto 0;
        text-align: right;
    }

    .les_img_tb {
        width: 100%;
        border-radius: 10px
    }

    .top_about_img {

        display: none;
    }

    .pointe {
        display: block;
    }

    /*矢印*/
    .btnarrow3 {
        width: 200px;
    }

    .top_map_title {
        font-size: 18px;
    }

    .all_subtitle {
        width: 80%;
        margin: 50px auto 30px auto;
    }

}

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

    main {
        background-image: url(../img/bg/backimg_white.png);
        background-size:50%;
        background-repeat: no-repeat;
        background-position: top 0px right 0px;;
    }

    .all_subtitle {
        margin: 50px auto 30px auto;
    }

    .about_flex {
        width: 100%;
        display: block;
    }

    .about_main {
        width: 90%;
        margin: 0 auto;
        
    }

    .about_img {
        margin: 0 auto 20px auto;
    }

    .about_div {
        width: 100%;
        
    }

    .about_name {
        justify-content: center;
    }

    .about_lesson_tb_flex {
        display: block;
    }

    .about_lesson_tb {
        width: 90%;
        margin: 0 auto;
    }

    .top_about_img_tb {
        
        width: 80%;
        
        margin: 25px auto 0 auto;
        text-align: right;
    }

    .top_map_flex {
        margin-top: 10px;
        display: block;
        width: 80%;
    }

    .top_map {
        width: 100%;
        margin-bottom: 15px;
    }

}


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}