@charset "UTF-8";
/* font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hind&display=swap');
.hind { font-family: 'Hind', sans-serif; letter-spacing: .1em;}
/* ---------------------------- 
reset 
---------------------------- */
html, body, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; outline: 0; border: 0; background: transparent; font-size: 100%;}
body { background: #FFFFFF; color: #333333; text-align: left; letter-spacing: 1.5px; font-weight: 400; font-style: normal; font-size: 16px; font-family: 'Noto Sans JP', sans-serif; line-height: 1.5; -webkit-text-size-adjust: 100%;}
h1, h2, h3, h4, h5, h6 { font-weight: bold;}
li { list-style-type: none;}
a { outline: none; color: #333333; text-decoration: none;}
*:focus { outline: none;}
strong { font-weight: bold;}
img { align-self: start; width: 100%; vertical-align: middle;}
input,textarea { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-appearance: none; max-width: 100%;}
/* ---------------------------- 
common 
---------------------------- */
.inner { margin: 0 auto; max-width: 1200px;}
.inner-sm { margin: 0 auto; max-width: 800px;}
.section { padding: 40px 0;}
.sp-only { display: none;}
.pc-md-only { display: block;}
.sp-md-only { display: none;}
/* title */
.sec-title { margin-bottom: 60px; text-align: center;}
.sec-title-en { display: block; font-size: 2.5rem;}
.title-underline { text-align: left;}
.title-underline::after { display: block; content: ""; border-bottom: 1px solid #F65D64; width: 50px; padding-top: 20px;}
/* button */
.btn-box { justify-content: center;}
.btn-box div { padding: 0 20px;}
.bnt-more-white { display: inline-block; border: 1px solid #333; border-radius: 5px; width: 160px; padding: 10px; text-align: center; font-size: 1.125rem; font-weight: 600;}
.bnt-more-white:hover { background: #000; border: 1px solid #000; color: #FFF; transition: all .3s ease-out;}
.bnt-more-pink,
.wpcf7-form input[type="submit"] { display: inline-block; background: #F65D64; border: 1px solid #F65D64; color: #FFF; border-radius: 5px; width: 160px; padding: 10px; text-align: center; font-size: 1.125rem; font-weight: 600;}
.bnt-more-pink:hover,
.wpcf7-form input[type="submit"]:hover { background: #FFF; border: 1px solid #F65D64; color: #F65D64; transition: all .3s ease-out;}
.bnt-more-black { display: inline-block; background: #000; border: 1px solid #000; color: #FFF; border-radius: 5px; width: 160px; padding: 10px; text-align: center; font-size: 1.125rem; font-weight: 600;}
.bnt-more-black:hover { background: #FFF; border: 1px solid #000; color: #000; transition: all .3s ease-out;}
/* hover */
.hover:hover { color: #F65D64; transition: all .3s ease-out;}
.hover-op:hover { opacity: .8; transition: all .3s ease-out;}
.hvr-float-shadow { position: relative; display: inline-block; box-shadow: 0 0 1px rgba(0, 0, 0, 0); vertical-align: middle; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);}
.hvr-float-shadow:before { position: absolute; top: 100%; left: 5%; z-index: -1; width: 90%; height: 10px; background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); content: ''; opacity: 0;
-webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform, opacity; transition-property: transform, opacity; pointer-events: none;}
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active { -webkit-transform: translateY(-5px); transform: translateY(-5px);}
.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before { opacity: 1; -webkit-transform: translateY(5px); transform: translateY(5px);}
/* col */
.sec-col { display: flex;}
.sec-col-item { width: 50%;}
.sec-col-item-3 { width: 32.5%; padding: 0 1.5%;}
/* align */
.text-right { text-align: right;}
.text-center { text-align: center;}
/* spacing */
.mt-20 { margin-top: 20px;}
.mb-20 { margin-bottom: 20px;}
/* animation */
.slide-top { opacity: 0; transform: translate(0, -20px); transition: all 1s ease-out;}
.slide-bottom { opacity: 0; transform: translateY(20px); transition: all 1.3s 0s ease-out;}
.slide-left { opacity: 0; transform: translate(-20px, 0); transition: all 1s ease-out;}
.slide-right { opacity: 0; transform: translate(20px, 0); transition: all 1s ease-out;}
/* ---------------------------- 
header 
---------------------------- */
#header { background: url(../../assets/images/home/img_kv.jpg) no-repeat center top; background-size: cover; padding: 20px 0 30px; position: relative; min-height: 50vw;}
.btn-trial { position: absolute; top: 20px; right: 100px; background: #000; border-radius: 5px; font-size: 1.125rem; padding: 8px 15px; display: inline-block; text-align: center; color: #FFF; transition: all .3s ease-out;}
.btn-trial:hover { background: #F65D64; color: #FFF;}
.h-catch { background: rgba(246, 93, 100, .4); padding: 60px 60px 15px; position: absolute; bottom: 30px; right: 0; width: 80%;}
.h-catch h1 { font-size: 2.5rem; color: #FFF; text-align: right;}
.h-catch h1 span { font-size: 3.6875rem;}
.h-catch h1 .h-catch-l-text { font-size: 8.875rem;}
/* nav */
.nav-fixed { position: fixed; width: 100%; right: 100px; top: 0; z-index: 99;}
#nav { position: fixed; height: 100vh; width: 40%; right: -40%; top: 0; background: #000; transition: .5s;}
#nav .nav-contents { padding: 85px 20px 0;}
#nav .nav-title { color: #FFF; text-align: right; font-size: 1.125rem;}
#nav .nav-title::after { content: "+"; padding: 0 5px;}
#nav .nav-title.active::after { content: "−";}
#nav a { display: block; text-decoration: none; color: #FFF; padding: 5px; transition: .3s;}
#nav .sub-menu { display: none;}
#nav .sub-menu li { font-size: .875rem;}
#nav ul li { text-align: right;}
#nav li a:hover { color: #F65D64;}
#hamburger { display: block; position: absolute; top: 12px; right: 40px; width: 45px; height: 30px; cursor: pointer; transition: 1s;}
.inner_line { display: block; position: absolute; left: 26px; width: 100%; height: 3px; background-color: #000; transition: 1s;}
#line1 { top: 15px;}
#line2 { top: 25px;}
#line3 { top: 36px; width: 50%;}
.in{ transform: translateX(-100%);}
.line_1,.line_2,.line_3{ background: #FFF;}
#line1.line_1 { transform: translateY(20px) rotate(-45deg); top: 8px;}
#line2.line_2 { opacity: 0;}
#line3.line_3 { transform: translateY(0px) rotate(45deg); top: 28px; width: 45px;}
/* ---------------------------- 
footer
---------------------------- */
#footer { background: #000; color:#FFF; padding: 60px 0;}
.f-top { border-bottom: 1px solid #FFF; padding-bottom: 40px; justify-content: space-between;}
.f-bottom { padding: 40px 0 80px; justify-content: space-between;}
.f-logo { width: 212px; padding-bottom: 30px;}
.f-logo-title { font-size: .75rem; padding-top: 10px;}
.f-nav-box { width: 60%; justify-content: space-between;}
.f-box-title { font-size: 1.25rem;}
.f-nav-item { line-height: 2;}
.f-nav-item a { color: #FFF;}
.f-bottom-nav li { display: inline-block; padding-right: 30px;}
.f-bottom-nav li a { color: #FFF;}
.copyright { display: block; color: #FFFFFF; text-align: center; font-size: .875rem; padding-top: 60px;}
/* ---------------------------- 
main 
---------------------------- */
/* home */
.top-sns-bnr { justify-content: center; padding: 20px 0;}
.top-sns-bnr li { padding: 0 10px; text-align: center;}
.top-sns-bnr li p { font-size: .75rem; padding-top: 5px;}
.top-sns-bnr img { max-width: 100px; width: 100%;}
.top-bnr { justify-content: center; padding: 20px 0;}
.top-bnr img { max-width: 220px; width: 100%;}
.slick-prev:before, .slick-next:before { color: black;}
.slick-slide { padding: 0 10px; box-sizing: border-box;}
.slick-slide img { height: auto;}
.slick-next { right: -13px;}
.slick-prev { left: -13px;}
.slick-dots li button:before { font-size: 10px;}
.carousel-slide-title { text-align: center; padding-top: 10px; font-weight: bold;}
.carousel-slide-text { font-size: .875rem; padding-top: 10px;}
.carousel-slide-date { padding-top: 10px; font-size: .75rem; color: #888;}
/* news */
.news-list-item { border-bottom: 1px solid #CCC; padding-bottom: 40px; margin-bottom: 40px;}
.news-list-item-text { width: 70%;}
.news-list-item span { display: block;}
.news-list-item img { width: 130px; height: 94px; object-fit: cover; margin-right: 20px;}
.page-numbers { text-align: center; padding-bottom: 40px;}
.page-numbers li { display: inline-block;}
.page-numbers li a { padding: 5px 10px; background-color: black; color: white;}
.page-numbers li .current { background: rgba(246, 93, 100, 1); padding: 5px 10px; color: white;}
/* about */
.about-lead-box { background: url(../../assets/images/about/img01.jpg) no-repeat right top; background-size: 65% auto;}
.about-lead { background: url(../../assets/images/about/bg_about01.png) no-repeat center top; background-size: 100% auto; width: 75%; color: white;}
.about-lead .inner { max-width: 600px; margin:0 40px; padding: 60px 0 100px;}
.about-lead h3 { font-size: 1.75rem; text-align: center; padding-bottom: 40px;}
.about-points { background: url(../../assets/images/about/bg_about02.jpg) no-repeat center top; background-size: cover;}
.about-points-list { padding-bottom: 60px;}
.about-points-item { line-height: 2;}
.about-points-item::before { display: inline-block; content:""; background: url(../../assets/images/common/icn_checkbox.png) no-repeat left top; background-size: contain; width: 1em; height: 1em; padding-left: .5em;}
#p-about #sec-about.section { padding-bottom: 0;}
#p-about .about-lead-box { background-size: cover;}
#p-about .about-lead { background-size: cover; width: 100%;}
#p-about .about-lead .inner { max-width: 800px;}
/* voice */
#sec-voice .slick-slide img { width: 100px; margin: 0 auto;}
/* lesson */
.lesson-list { margin-bottom: 60px;}
.lesson-list:last-child { margin-bottom: 0;}
.lesson-list-item { padding-left: 40px; box-sizing: border-box;}
.reverse .lesson-list-item { padding-right: 40px; padding-left: 0;}
.lesson-list-item h3 { font-size: 1.375rem; border-bottom: 1px solid #CCC; padding-bottom: 10px;}
.lesson-list-item-star { text-align: right; padding: 10px 0 40px; font-size: .875rem;}
.lesson-list-item-star .star { color: #F65D64;}
.lesson-list-item-star .star-grey { color: #CCC;}
/* access */
.youtube iframe { border: 5px solid #F65D64; box-sizing: border-box;}
.access-text { text-align: center; padding-top: 60px; line-height: 2;}
.google-map { position: relative; padding-bottom: 30%; padding-top: 30px; height: 0; overflow: hidden;}
.google-map iframe,
.google-map object,
.google-map embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.google-map iframe { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%);}
.sns-list { text-align: center;}
.sns-list-item { display: inline-block; padding: 0 5px;}
/* price */
.price-list { padding-bottom: 40px;}
.price-list-title { background: #000; color: #FFF; text-align: center; font-size: 1.25rem; padding: 10px; margin-bottom: 40px;}
.price-table { width: 100%; border-collapse: collapse; border: 1px solid #999;}
.price-table-ttl { background: #333; color: #FFF; text-align: center; padding: 10px 0; border-right: 1px solid #999; width: 33.333333%;}
.price-table-item { text-align: center; padding: 20px; border-right: 1px solid #999; border-bottom: 1px solid #999; width: 33.333333%;}
.price-table-item.bg-grey { background: #F0F0F0;}
/* instructor */
.instructor-list { flex-wrap: wrap;}
.instructor-list-item { width: 29.5%; margin-bottom: 60px;}
.instructor-list-img { border-radius: 50%; width: 80%; margin: 0 auto 20px; display: block;}
.toggle-open { margin-top: 20px;}
.toggle-contents { display: none;}
.instructor-list-profile { background: #F0F0F0; padding: 20px; margin: 20px 0;}
.instructor-list-profile dt { font-weight: bold; padding-bottom: 5px;}
.instructor-list-profile dd { font-size: .875rem; word-break: break-all;}
.instructor-list-comment { padding: 0 20px; margin-bottom: 20px;}
/* faq */
.faq-list { border-bottom: 1px solid #CCC; padding-bottom: 20px; margin-bottom: 40px;}
.faq-list-q { background: #000; color: #FFF; font-size: 1.25rem; padding: 10px 20px; margin-bottom: 20px;}
.faq-list-a { padding: 0 20px;}
.faq-list-a a { color: #F65D64;}
/* privay */
#sec-privacy h3 { padding-bottom: 20px;}
#sec-privacy p { padding-bottom: 40px;}
#sec-privacy p + ul { margin-top: -20px;}
#sec-privacy ul { padding-bottom: 40px;}
#sec-privacy ul li { display: flex;}
#sec-privacy ul li::before { content: "・"; display: block;}
/* transactions */
#sec-transactions .price-table-item { padding: 10px 20px; width: 75%; text-align: left;}
#sec-transactions .price-table-item.bg-grey { width: 25%;}
/* contact */
.wpcf7-form { max-width: 500px; margin: 0 auto;}
.wpcf7-text {border: 1px solid #ccc; width: 100%; height: 35px; margin-bottom: 30px; box-sizing: border-box;}
.wpcf7-textarea {border: 1px solid #ccc; width: 100%; margin-bottom: 30px; box-sizing: border-box;}
/* ---------------------------- 
responsive 
---------------------------- */
@media (max-width: 1200px) {
    .inner { padding: 0 4%;}
    .inner-sm { padding: 0 4%;}
    .h-catch h1 { font-size: 2.25rem;}
    .about-lead .inner { max-width: 488px;}
}
@media screen and (max-width: 960px) {
    .h-logo svg { width: 200px; margin-top: -30px;}
    .h-catch h1 { font-size: 1.8rem;}
    .h-catch h1 span { font-size: 2.6875rem;}
    .h-catch h1 .h-catch-l-text { font-size: 4.875rem}
    .nav-fixed { right: 4%;}
    .f-logo { width: 210px; margin-top: -13px;}
    .f-logo svg { width: 160px;}
    .f-nav-box { width: 70%;}
    .about-lead-box { background-size: cover;}
    .about-lead { width: 100%;}
    .about-lead .inner { max-width: 70%; padding: 60px 0;}
}
@media (max-width: 768px) {
    .pc-md-only { display: none;}
    .sp-md-only { display: block;}
    #header { min-height: 75vw;}
    .h-catch { padding: 30px 30px 10px;}
    .h-catch h1 { font-size: 1.3rem;}
    #nav { width: 100%; right: -100%;}
    .f-logo { margin: -13px auto 0; text-align: center;}
    .f-nav-box { width: 100%;}
    .sec-col { flex-wrap: wrap;}
    .sec-col.reverse { flex-direction: column-reverse;}
    .sec-col-item { width: 100%;}
    .sec-col-item img { width: 80%; margin: 0 auto; display: block;}
    .about-lead { background-size: cover;}
    .about-lead .inner { max-width: 65%; padding: 60px 0 100px; margin: 0 4%;}
    .lesson-list-item, .reverse .lesson-list-item { padding: 40px 0 0 0;}
    .instructor-list-item { width: 100%; margin-bottom: 40px;}
    .instructor-list-img { width: 50%;}
    .instructor-list-profile { padding: 10px; margin: 20px 0 0;}
    .instructor-list-profile dd { font-size: .625rem;}
    .instructor-list-comment { padding: 10px;}
}
@media (max-width: 560px) {
    body { font-size: 14px;}
    .section { padding: 25px 0;}
    .sp-only { display: block;}
    .sec-title { margin-bottom: 30px;}
    .sec-title-en { font-size: 2rem;}
    .bnt-more-white { width: 115px; font-size: 1rem; padding: 5px;}
    .bnt-more-pink { width: 115px; font-size: 1rem; padding: 5px;}
    .bnt-more-black { width: 115px; font-size: 1rem; padding: 5px;}
    #header .inner { min-height: 95vw;}
    .h-logo svg { width: 135px; margin-top: -43px;}
    .btn-trial { right: 70px; font-size: .7rem; padding: 8px;}
    .h-catch h1 { font-size: 1.3rem;}
    .h-catch h1 span { font-size: 1.6875rem;}
    .h-catch h1 .h-catch-l-text { font-size: 2.475rem;}
    #footer { padding: 40px 0;}
    .f-top { padding-bottom: 0;}
    .f-bottom { padding: 40px 0;}
    .f-logo-title { padding-top: 0;}
    .f-box {width: 40%; margin-bottom: 40px; margin-bottom: 40px; text-align: center;}
    .f-box-title { font-size: 1.1rem;}
    .f-bottom-nav { width: 100%; text-align: center;}
    .top-bnr li { width: 45%;}
    .sns-list { width: 100%; text-align: center; margin-top: 40px;}
    .sns-list-item svg { width: 35px;}
    .copyright { padding-top: 0;}
    .news-list-item img { width: 90px; margin-right: 10px;}
    .news-list-item-text { width: 66%;}
    .about-lead .inner { max-width: 100%; padding: 50px 4%;}
    .about-lead h3 { font-size: 1.4rem; padding-bottom: 20px;}
    #p-about .about-lead-box { background: url(../../assets/images/about/img01.jpg) no-repeat 69% top;}
    .news-list-item { padding-bottom: 20px; margin-bottom: 20px;}
    .lesson-list { margin-bottom: 40px;}
    .lesson-list-item { padding: 20px 0 0 0;}
    .lesson-list-item h3 { font-size: 1.175rem;}
    .lesson-list-item-star { padding: 10px 0 20px;}
    .access-text { padding-top: 40px;}
    .google-map { padding-bottom: 56.25%;}
    .faq-list-q { font-size: 1rem;}
    #sec-transactions .price-table-item { width: 60%;}
    #sec-transactions .price-table-item.bg-grey { width: 40%;}
}