@charset "UTF-8";

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

main {
    background-image: url(../img/bg/backimg3_2_white.png);
    background-size: 30%;
    background-repeat: no-repeat;
    background-position: bottom 0px right 40px;
}

.les_all {
    width: 80%;
    max-width: 800px;
    margin: 20px auto 30px auto;

}

.lesson {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 100px auto;
}

p,
h3,
table {
    font-family: "Klee One", cursive;
    font-weight: 400;
    font-style: normal;
}

.les_place {
    text-align: center;
    font-size: 25px;
    margin: 0 0 10px 0;
    font-weight: 600;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
    letter-spacing: 2px;
}

.place_border {
    background: linear-gradient(transparent 60%, #D0BFFF 60%);
    padding: 0 20px;
}

.les_week {
    text-align: center;
    font-size: 20px;
    margin: 0 0 20px 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    border: solid 2px #595959;
    font-size: 20px;
    background-color: rgba(218, 190, 255, 0.2);
    margin: 0 0 40px 0;
}

td,
th {
    padding: 20px 10px;
    width: 90px;
    border: solid 1px #595959;
}

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

th {
    background: #C0C0C0;

}

.fee_at {
    font-size: 17px;
}

/*矢印が右に移動する*/



.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;
}

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

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

    .les_all {
        width: 90%;
        max-width: 800px;
    }

    .lesson {
        width: 80%;
        max-width: 800px;
        margin: 0 auto 70px auto;
    }

    .month {
        font-size: 20px;
        text-align: center;
        margin: 50px auto;
        font-weight: 600;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        border: solid 2px #595959;
        font-size: 17px;
    }

    .fee_at {
        font-size: 14px;
    }


}

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

    main {
        background-image: url(../img/bg/backimg3_2_white.png);
        background-size: 70%;
        background-repeat: no-repeat;
        background-position: bottom 0px right -30px;
    }

    .lesson {
        width: 90%;
        margin: 0 auto 50px auto;
    }

    td,
    th {
        padding: 15px 10px;
        width: 90px;
        border: solid 1px #595959;
    }

    td {
        text-wrap: balance;
    }

    .les_place {
        text-align: center;
        font-size: 20px;
        margin: 0 0 10px 0;
        font-weight: 600;
        
    }

    .les_week {
        text-align: center;
        font-size: 17px;
        margin: 0 0 20px 0;
    }

}

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