body {
    font-family :YuMincho,'Yu Mincho', serif;
    color: #3E3A39;
}
.hero {
    width: 100%;
}

.about {
    background-color: #E2F7F6;
    padding: 60px;
}
.about h2 {
    width: 90%;
    display: block;
    margin: 0 auto;
}
.about h2 .sp {
    display: none;
}
.about-box {
    display: block;
    margin: 0 auto;
}

.about-box .flex {
    display: flex;
    justify-content: center;
    width: 60%;
    margin: 40px auto;
    padding: 15px;
}
.about-box .item-l {
    width: 60%; 
    margin-right: 20px;
}
.about-box .item-l h3 {
    color: #00A5A8;
    font-weight: bold;
}
.about-box .item-r {
    width: 40%;
}
@media screen and (max-width: 480px){
    .about {
        padding: 16px;
    } 
    .about h2 {
        width: 60%;
        margin: 10px auto;
    }
    .about h2 .pc {
        display: none;
    }
    .about h2 .sp {
        display: inherit;
    }
    
    .about-box .flex {
        display: block;
        width: 100%;
        margin: 10px auto 0;
    }
    .about-box .item-l {
        width: 100%;
        margin-bottom: 20px;
    }
    .about-box .item-r {
        width: 100%;
    }
}

.second {
    width: 70%;
    margin: 0 auto;
    padding: 80px 60px 0;
}
.second h2 {
    color: #00A5A8;
    font-size: 24px;
}
.second h2 span img {
    display: inline;
    height: 60px;
    vertical-align: middle;
}

.how {
    margin-bottom: 60px;
}
.how .about-box .flex {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 40px auto;
    padding: 15px;
}

.how .about-box .item-l {
    width: 30%;
}

.how .about-box .item-r {
    width: 70%;
}

.how .about-box .item-r h3 {
    margin-bottom: 10px;
}
.flex-3 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.flex-3 .item {
    margin: 20px 10px;
    width: 30%;
}
.flex-3 .item img {
    width: 100%;
    margin-bottom: 10px;
}

@media screen and (max-width: 480px){
    .second {
        padding: 30px 16px 0;
        width: 100%;
    } 
    .second h2 {
        font-size: 20px;
    }
    .flex-3 .item {
        width: 42%;
    }
    .effect .flex .item {
        width: 43%;
    }
    .effect .flex p {
        padding: 10px;
    }
    .how .about-box .flex{
        display: block;
    }
    .how .about-box .item-l,
    .how .about-box .item-r {
        width: 100%;
    }
}


.profile {
    background-image: url(../img/prof-bg.png);
    width: 100%;
    display: block;
    background-size: cover;
    height: 500px;
    margin-bottom: 60px;
    padding: 40px;
}
.profile .flex {
    display: flex;
}
.profile h2 img {
    width: 40%;
}
.profile .flex .item1 {
    width: 60%;
    line-height: 1.7;
    margin-right: 25px;
}
.profile .flex .item2 {
    width: 40%;
}
@media screen and (max-width: 480px){
    .profile {
        padding: 12px ​30px 30px;
        height: 730px;
    }
    .profile h2 img {
        width: 60%;
    }
    .profile .flex {
       flex-direction: column-reverse;
    }
    .profile .flex .item1 {
        width: 100%;
        font-size: 14px;
    }
    .profile .flex .item2 {
        width: 100%;
        margin-bottom: 10px;
    } 
}
.menu {
    margin-bottom: 60px;
}
.menu h2 {
    width: 180px;
}
.menu table {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}
.menu table tr {
    height: 80px;
    font-size: 18px;
}
.menu table th {
    background-color: #F0C5C5;
    border: solid 2.5px #F0C5C5;
    border-right: solid 2.5px #fff;
    color: #fff;
    padding: 20px;
    text-align: center;
}
.menu table th:nth-child(2) {
    border-right: solid 2.5px #fff;
    border-left: solid 2.5px #fff;
}
.menu table th:nth-child(3) {
    border-right: solid 2.5px #F0C5C5;
}
.menu table td {
    border: solid 2.5px #F0C5C5;
    padding: 20px;
    font-size: 16px;
}
.menu table td p {
    font-size: 13px;
}
.menu table th.course {
    width: 60%;
}
.menu table th.time, .menu table th.fee {
    width: 20%;
}
.menu table td.time, .menu table td.fee {
    text-align: center;
}
.menu-table p.caution {
    margin-top: 20px;
    font-size: 15px;
    padding: 0 10px;
}
.option {
    margin-bottom: 60px;
}
.option h2 {
    width: 180px;
}
.option p {
    padding: 0 5px;
}
.option p.caution {
    text-align: left;
    margin-top: 20px;
    font-size: 15px;
    padding: 0 10px;
}
.third {
    width: 80%;
    margin: 0 auto;
    padding: 80px 60px;
}
.third h2 {
    width: 270px;
}
.third .product h3 {
    font-size: 15px;
    text-align: center;
    margin-bottom: 10px;
}
.third .product .flex {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.third .product .flex .item {
    width: 33%;
    object-fit: cover;
    padding: 30px;
}
.third .map-frame {
    padding: 0 80px;
    text-align: center;
    margin-bottom: 30px;
}
.third .map-text {
    max-width: 500px;
    margin: 0 auto 60px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.map-text .item {
    width: 30%;
    margin: 5px 5px 10px;
}
.map-text img {
    margin-bottom: 3px;
}
.map-text p {
    font-size: 10px;
    line-height: 1.3;
}


.third .info {
    width: 300px;
    margin: 0 auto 60px;
    position: relative;
}
.third .info .ornament {
    position: absolute;
    top: -40px;
    left: -110px;
    z-index: -100;
    width: 180px;
}
@media screen and (max-width: 480px){
    .third {
        padding: 0;
    }
    .third .product .flex .item {
        width: 100%;
    }
    .third .map-frame {
        padding: 0;
    }
    .third .info {
        margin: 0 auto 30px;
    }
}

.snsbanner {
    display: flex;
    justify-content: center;
}
.snsbanner .item {
    width: 200px;
    border: solid 2px #E2F7F6;
    margin: 0 10px;
}
footer {
    width: 100%;
    height: 200px;
    background-image: url(../img/footer.png);
    background-size: cover;
    background-position: center;
    padding: 55px 0;
}

footer .flex {
    width: 60%;
    color: #fff;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}
footer .flex .item {
    width: 30%;
    margin: 0 20px;
}
@media screen and (max-width: 480px) {
    footer {
        padding: 15px 0;
        height: 260px;
    } 
    footer .flex {
        display: block;
        width: 100%;
    }
    footer .flex .item {
        width: 90%;
        margin: 0 auto;
        padding: 0 20px;
    }
    footer .flex .item img {
        width: 60%;
        margin: 0 auto 30px;
    }
    .snsbanner {
        margin-bottom: 30px;
    }
}