@charset "utf-8";

/* ==================================================
Common CSS
================================================== */

@media(max-width:999px){

/*STYLE*/
.pc {
display:none;
}

.cts {
width:90%;
margin:auto;
}

.titles {
text-align:center;
padding-bottom:25px;
}

.titles .icon {
width:80px;
margin:0 auto 12px;
}

.titles .subtitle {
font-size:100%;
font-weight:bold;
padding-bottom:7px;
letter-spacing:1px;
line-height:100%;
}

.titles h2 {
font-size:180%;
font-weight:bold;
letter-spacing:0;
line-height:130%;
}

.ex {
}

.ex p {
padding-bottom:20px;
font-size:100%;
letter-spacing:1px;
line-height:170%;
}

.ex p:last-child {
padding-bottom:0;
}




/*HEADER*/
header {
position:fixed;
top:10px;
left:15px;
z-index:9999;
}

header h1 {
width:100px;
}




/*MV*/
#mv {
width:100%;
height:calc(100vh + 50px);
position:relative;
}

#mv .swiper-container {
}

#mv .swiper-container .mv {
width:100%;
height:calc(100vh + 50px);
}

#mv .swiper-container .mv.mv1 {
background:url(../img/mv_1_sp.jpg) center;
background-size:cover;
}

#mv .swiper-container .mv.mv2 {
background:url(../img/mv_2_sp.jpg) center;
background-size:cover;
}

#mv .swiper-container .mv.mv3 {
background:url(../img/mv_3_sp.jpg) center;
background-size:cover;
}

#mv .cts {
width:90%;
position:absolute;
bottom:30px;
left:0;
right:0;
margin:auto;
z-index:999;
display:flex;
justify-content:flex-end;
align-items:center;
}

#mv .cts .copies {
width:90%;
margin:0 auto 50px;
}

#mv .cts .copies .copy1 {
width:100%;
margin:0 auto 15px;
}

#mv .cts .copies .copy2 {
width:100%;
margin:auto;
}




/*WORRY*/
#worry {
padding:40px 0 0;
background:#fff url(../img/worry_bg.jpg) center;
background-size:cover;
}

#worry .details {
}

#worry .details .photo {
width:50%;
margin:auto;
}

#worry .details .detail {
width:100%;
}

#worry .details .detail .worries {
margin-bottom:20px;
}

#worry .details .detail .worries .worry {
background:#fff;
padding:12px 18px;
display:flex;
align-items:center;
border-radius:10px;
margin-bottom:12px;
}

#worry .details .detail .worries .worry:last-child {
margin-bottom:0;
}

#worry .details .detail .worries .worry img {
width:20px;
}

#worry .details .detail .worries .worry p {
font-size:100%;
font-weight:500;
padding-left:12px;
}





/*INTRO*/
#intro {
padding:40px 0 100px;
position:relative;
overflow:hidden;
background:#fff;
}

#intro .obj1 {
width:175px;
position:absolute;
top:-70px;
left:-70px;
z-index:0;
}

#intro .obj2 {
width:160px;
position:absolute;
top:70px;
right:-70px;
}

#intro .obj3 {
width:200px;
position:absolute;
bottom:-50px;
left:0;
right:0;
margin:auto;
}

#intro .cts {
}

#intro .titles {
position:relative;
}

#intro .details {
}

#intro .details .photo {
width:100%;
height:65vw;
background:url(../img/intro_main.jpg) center;
background-size:cover;
margin:0 auto 20px;
}

#intro .details .detail {
width:100%;
position:relative;
}

#intro .details .detail .ex {
width:100%;
margin:0 0 0 auto;
}





/*SERVICE*/
#service {
padding:40px 0;
background:#faf0e6;
}

#service .selects {
display:flex;
justify-content:space-between;
flex-wrap:wrap;
padding:15px 0 60px;
}

#service .selects .select {
width:100%;
margin-bottom:28px;
}

#service .selects .select:last-child {
margin-bottom:0;
}

#service .selects .select a {
border:#f07800 1px solid;
border-radius:15px;
background:#fff;
display:flex;
justify-content:space-between;
align-items:center;
flex-direction:row-reverse;
position:relative;
padding:20px 15px 15px;
}

#service .selects .select a .numbers {
position:absolute;
width:100px;
height:36px;
background:#f07800;
border-radius:100%;
top:-18px;
left:0;
right:0;
margin:auto;
display:flex;
justify-content:center;
align-items:center;
}

#service .selects .select a .numbers .sub {
font-size:50%;
color:#fff;
letter-spacing:0;
}

#service .selects .select a .numbers .number {
font-size:120%;
font-weight:bold;
line-height:100%;
color:#fff;
padding-left:5px;
}

#service .selects .select a .service_name {
width:55%;
color:#f07800;
font-size:90%;
font-weight:bold;
}

#service .selects .select a .photo {
width:40%;
}

#service .selects .select a .photo img {
border:#f07800 1px dotted;
}

#service .services {
}

#service .services .service {
position:relative;
border:#f07800 1px solid;
background:#fff;
border-radius:20px;
margin-bottom:50px;
}

#service .services .service:last-child {
margin-bottom:0;
}

#service .services .service .numbers {
position:absolute;
width:70px;
height:70px;
background:#f07800;
border-radius:10vw;
top:-35px;
left:0;
right:0;
margin:auto;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
}

#service .services .service .numbers .sub {
font-size:60%;
color:#fff;
}

#service .services .service .numbers .number {
font-size:150%;
font-weight:bold;
line-height:100%;
color:#fff;
}

#service .services .service .service_title {
background:#faf0c8;
border-radius:20px 20px 0 0;
padding:45px 15px 10px;
}

#service .services .service .service_title h3 {
font-size:125%;
font-weight:bold;
text-align:center;
color:#f07800;
}

#service .services .service .service_cts {
padding:20px;
}

#service .services .service p {
font-size:110%;
letter-spacing:1px;
line-height:170%;
}

/*SERVICE1*/
#service .services #service1 {
}

#service .services #service1 .details {
margin-bottom:30px;
}

#service .services #service1 .details .photo {
width:100%;
margin:0 auto 20px;
}

#service .services #service1 .details .detail {
width:100%;
}

#service .services #service1 .details .detail .ex {
padding-bottom:10px;
}

#service .services #service1 .details .detail .attention {
display:flex;
font-size:80%;
font-weight:bold;
}

#service .services #service1 .houses {
background:#faf0c8;
border-radius:15px;
padding:20px 20px;
margin-bottom:30px;
}

#service .services #service1 .houses .photo {
width:100%;
margin:0 auto 20px;
}

#service .services #service1 .houses .house {
width:100%;
}

#service .services #service1 .houses .house .ex {
font-size:100%;
padding-bottom:15px;
}

#service .services #service1 .houses .house .rooms {
}

#service .services #service1 .houses .house .rooms .detail {
width:100%;
display:flex;
margin-bottom:10px;
}

#service .services #service1 .houses .house .rooms .detail:last-child {
margin-bottom:0;
}

#service .services #service1 .houses .house .rooms .detail .number {
width:10%;
background:#f07800;
color:#fff;
font-size:80%;
text-align:center;
display:flex;
justify-content:center;
align-items:center;
}

#service .services #service1 .houses .house .rooms .detail .room {
width:90%;
background:#fff;
font-size:80%;
padding:5px 10px;
}

#service .services #service1 .contents {
}

#service .services #service1 .contents .content {
width:100%;
margin:0 auto 20px;
border:#f07800 1px dashed;
background:#fff;
border-radius:15px;
}

#service .services #service1 .contents .content:nth-child(2n) {
margin-right:0;
}

#service .services #service1 .contents .content:last-child {
margin-bottom:0;
}

#service .services #service1 .contents .content .items {
background:#fdf1e5;
border-radius:15px 15px 0 0;
text-align:center;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
padding:13px 10px 10px;
}

#service .services #service1 .contents .content .items .subitem {
font-size:90%;
font-weight:500;
letter-spacing:0;
color:#f07800;
}

#service .services #service1 .contents .content .items .item {
font-size:110%;
font-weight:bold;
color:#f07800;
}

#service .services #service1 .contents .content .photo {
padding:15px;
}


/*SERVICE2*/
#service .services #service2 {
}

#service .services #service2 .ex {
padding-bottom:20px;
}

#service .services #service2 .lessons {
padding-bottom:30px;
}

#service .services #service2 .lessons .lesson {
width:100%;
margin:0 auto 30px;
}

#service .services #service2 .lessons .lesson:nth-child(2n) {
}

#service .services #service2 .lessons .lesson:last-child {
margin-bottom:0;
}

#service .services #service2 .lessons .lesson .content {
border:#f07800 1px dashed;
color:#f07800;
font-size:100%;
font-weight:bold;
background:#faf0e6;
border-radius:10px;
margin-bottom:12px;
padding:7px;
text-align:center;
}

#service .services #service2 .lessons .lesson .photo {
}

#service .services #service2 .lessons .lesson .photo img {
border-radius:10px;
}

#service .services #service2 .monthly {
}

#service .services #service2 .monthly .info {
width:100%;
margin-bottom:30px;
}

#service .services #service2 .monthly .info:last-child {
margin-bottom:0;
}

#service .services #service2 .monthly .info .items {
display:flex;
align-items:center;
margin-bottom:10px;
}

#service .services #service2 .monthly .info .items .month {
font-size:90%;
font-weight:bold;
background:#f07800;
color:#fff;
border-radius:10px;
padding:5px 10px;
margin-right:10px;
}

#service .services #service2 .monthly .info .items .item {
font-size:110%;
font-weight:bold;
color:#f07800;
}

#service .services #service2 .monthly .info .photo {
}

#service .services #service2 .monthly .info .photo img {
border:#f07800 1px solid;
border-radius:10px;
}

/*SERVICE3*/
#service .services #service3 {
}

#service .services #service3 .lessons {
padding-bottom:30px;
}

#service .services #service3 .lessons .lesson {
display:flex;
background:#faf0e6;
border:#f07800 1px dashed;
padding:10px;
border-radius:10px;
margin-bottom:12px;
}

#service .services #service3 .lessons .lesson p {
font-size:100%;
font-weight:bold;
line-height:150%;
color:#f07800;
}

#service .services #service3 h4 {
font-size:90%;
font-weight:500;
color:#fff;
background:#f07800;
padding:7px;
text-align:center;
}

#service .services #service3 h4 .fs {
font-size:80%;
}

#service .services #service3 .onlines {
margin-bottom:30px;
}

#service .services #service3 .onlines .online {
margin-bottom:20px;
}

#service .services #service3 .onlines .online:last-child {
margin-bottom:0;
}

#service .services #service3 .onlines .online .photo {
}

#service .services #service3 .contents {
}

#service .services #service3 .contents .content {
width:100%;
margin-bottom:20px;
}

#service .services #service3 .contents .content:last-child {
margin-bottom:0;
}

/*SERVICE4*/
#service .services #service4 {
}

#service .services #service4 .ex {
padding-bottom:30px;
}

#service .services #service4 .contents {
}

#service .services #service4 .contents .content {
width:100%;
margin-bottom:30px;
}

#service .services #service4 .contents .content:last-child {
margin-bottom:0;
}

#service .services #service4 .contents .content .item {
border:#f07800 1px dashed;
color:#f07800;
font-size:100%;
font-weight:bold;
background:#faf0e6;
border-radius:10px;
margin-bottom:15px;
padding:7px;
text-align:center;
}

#service .services #service4 .contents .content .photo {
}





/*ABOUT*/
#about {
padding:40px 0 30px;
background:#fff;
}

#about .copy {
font-size:120%;
font-weight:bold;
text-align:center;
letter-spacing:2px;
padding-bottom:30px;
}

#about .details {
}

#about .details .detail {
width:100%;
}

#about .details .illust {
width:50%;
margin:0 auto 20px;
}





/*PRICE*/
#price {
padding:0 0 0;
background:#faebb4;
position:relative;
}

#price .arrow {
position:relative;
top:-1px;
}

#price .cts {
padding-top:40px;
}

#price .prices {
width:100%;
background:#fff;
position:relative;
margin:20px auto 0;
border-radius:20px;
padding:40px 20px 20px;
text-align:center;
}

#price .prices:after {
content:"";
width:20px;
height:20px;
border-top:#fff 20px solid;
border-right:transparent 20px solid;
border-bottom:transparent 20px solid;
border-left:transparent 20px solid;
position:absolute;
bottom:-40px;
left:0;
right:0;
margin:auto;
}

#price .prices .bullet {
width:50px;
position:absolute;
top:-25px;
left:0;
right:0;
margin:auto;
}

#price .prices .copy {
font-size:110%;
font-weight:bold;
padding-bottom:5px;
}

#price .prices .price {
font-size:150%;
font-weight:bold;
margin-bottom:10px;
color:#e6321e;
}

#price .prices .price .marker {
border-bottom:#f5e100 7px solid;
}

#price .prices .price .amount {
font-size:180%;
padding-left:5px;
}

#price .prices .price .tax {
font-size:70%;
color:#464646;
}

#price .prices .summary {
font-size:120%;
font-weight:bold;
}

#price .details {
}

#price .details .detail {
padding-top:35px;
}

#price .details .detail .ex {
font-size:110%;
font-weight:bold;
padding-bottom:7px;
}

#price .details .detail .benefit {
font-size:150%;
font-weight:bold;
line-height:135%;
color:#e6321e;
padding-bottom:15px;
text-align:center;
}

#price .details .photo {
width:30%;
margin:auto;
}





/*VOICE*/
#voice {
padding:40px 0;
background:url(../img/voice_bg.png);
background-size:30px;
}

#voice .voices {
}

#voice .voices .voice {
margin-bottom:30px;
display:flex;
justify-content:space-between;
}

#voice .voices .voice:nth-child(odd) {
}

#voice .voices .voice:nth-child(even) {
flex-direction:row-reverse;
}

#voice .voices .voice:last-child {
margin-bottom:0;
}

#voice .voices .voice .face {
width:60px;
}

#voice .voices .voice .face img {
border-radius:10vw;
}

#voice .voices .voice .message {
width:calc(100% - 85px);
position:relative;
background:#fff;
border-radius:20px;
padding:25px 25px;
}

#voice .voices .voice:nth-child(odd) .message:before {
content:"";
width:12px;
height:12px;
border-top:transparent 12px solid;
border-right:#fff 15px solid;
border-bottom:transparent 12px solid;
border-left:transparent 15px solid;
position:absolute;
top:25px;
left:-30px;
}

#voice .voices .voice:nth-child(even) .message:after {
content:"";
width:12px;
height:12px;
border-top:transparent 12px solid;
border-right:transparent 15px solid;
border-bottom:transparent 12px solid;
border-left:#fff 15px solid;
position:absolute;
top:25px;
right:-30px;
}

#voice .voices .voice .message .names {
border-left:#ff3264 5px solid;
padding:3px 0 3px 12px;
margin-bottom:20px;
}

#voice .voices .voice .message .names .name {
font-size:110%;
font-weight:bold;
}

#voice .voices .voice .message .names .position {
font-size:70%;
}





/*PROFILE*/
.bg {
position:fixed;
width:100%;
height:100%;
background:url(../img/profile_bg.jpg) center;
background-size:cover;
z-index:-1;
}

#profile {
padding:40px 0;
}

#profile .profiles {
padding-top:25px;
}

#profile .profiles .profile {
background:#fff;
position:relative;
padding:40px 30px 30px;
margin-bottom:50px;
border-radius:20px;
}

#profile .profiles .profile:last-child {
margin-bottom:0;
}

#profile .profiles .profile .teacher {
width:160px;
height:40px;
background:#ff3264;
color:#fff;
border-radius:10vw;
text-align:center;
display:flex;
justify-content:center;
align-items:center;
position:absolute;
top:-20px;
left:0;
right:0;
margin:auto;
font-size:100%;
font-weight:bold;
}

#profile .profiles .profile .details {
}

#profile .profiles .profile:last-child .details {
flex-direction:row-reverse;
padding-bottom:30px;
}

#profile .profiles .profile .photos {
width:100%;
position:relative;
}

#profile .profiles .profile .photos .photo {
width:80%;
margin:0 auto 20px;
}

#profile .profiles .profile:first-child .photos .sign {
width:180px;
position:absolute;
bottom:-50px;
right:-20px;
}

#profile .profiles .profile:last-child .photos .sign {
width:180px;
position:absolute;
bottom:-50px;
right:-20px;
}

#profile .profiles .profile .detail {
width:100%;
}

#profile .profiles .profile .detail .names {
border-left:#ff3264 5px solid;
padding:3px 0 3px 15px;
margin-bottom:20px;
}

#profile .profiles .profile .detail .names h3 {
font-size:150%;
font-weight:bold;
letter-spacing:3px;
}

#profile .profiles .profile .detail .names .sub {
font-size:80%;
letter-spacing:1px;
}

#profile .profiles .profile .detail .ex {
}

#profile .profiles .profile .detail .ex p {
font-size:100%;
}





/*MESSAGE*/
#message {
padding:130px 0 0;
background:#fff url(../img/message_bg_top.jpg) top center no-repeat;
background-size:150%;
}

#message .bottom_bg {
background:url(../img/message_bg_bottom.jpg) bottom center no-repeat;
background-size:150%;
padding-bottom:180px;
}

#message .ex {
padding-bottom:50px;
}

#message .ex p {
line-height:200%;
font-weight:500;
}

#message .sign {
width:150px;
margin:auto;
}





/*FAQ*/
#faq {
padding:40px 0;
background:#faf0e6;
}

#faq .faqs {
}

#faq .faqs .faq {
background:#fff;
border-radius:20px;
margin-bottom:20px;
padding:25px 25px;
}

#faq .faqs .faq:last-child {
margin-bottom:0;
}

#faq .faqs .faq .question {
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:10px;
}

#faq .faqs .faq .question .item {
width:40px;
height:40px;
background:#f07800;
border-radius:10vw;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
font-size:110%;
font-weight:bold;
color:#fff;
}

#faq .faqs .faq .question .detail {
font-size:100%;
font-weight:bold;
color:#f07800;
width:calc(100% - 55px);
}

#faq .faqs .faq .answer {
display:flex;
justify-content:space-between;
align-items:flex-start;
}

#faq .faqs .faq .answer .item {
width:40px;
height:40px;
background:#fff;
border-radius:10vw;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
font-size:110%;
font-weight:bold;
color:#f07800;
border:#f07800 1px solid;
}

#faq .faqs .faq .answer .detail {
width:calc(100% - 55px);
justify-content:space-between;
letter-spacing:1px;
line-height:170%;
}





/*CTA*/
.cta {
position:relative;
background:#fff;
}

.cta .cta_cts {
width:90%;
margin:auto;
background:#fff;
border-radius:20px;
position:relative;
background:#fff;
left:0;
right:0;
top:-50px;
z-index:999;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:30px 0 15px;
}

.cta .cta_cts .details {
margin-bottom:20px;
}

.cta .cta_cts .details .illust {
width:55%;
margin:0 auto 20px;
}

.cta .cta_cts .details .detail {
width:90%;
margin:auto;
font-size:100%;
letter-spacing:1px;
line-height:180%;
}

.cta .cta_cts .cta_btn {
width:90%;
margin:auto;
}

.cta .benefit {
background:#ff3264;
position:relative;
padding:40px 0 25px;
}

.cta .benefit .icon {
width:50px;
position:absolute;
top:-30px;
left:0;
right:0;
margin:auto;
}

.cta .benefit .subcopy {
font-size:110%;
font-weight:bold;
letter-spacing:1px;
color:#fff;
text-align:center;
padding-bottom:5px;
}

.cta .benefit h3 {
font-size:200%;
font-weight:bold;
line-height:130%;
letter-spacing:1px;
color:#fff;
text-align:center;
padding-bottom:5px;
}

.cta .total {
display:flex;
justify-content:center;
align-items:center;
padding-bottom:45px
}

.cta .total p {
font-size:100%;
font-weight:bold;
color:#fff;
padding:0 15px;
}

.cta .total .number {
font-size:180%;
}

.cta .total .line {
width:30px;
height:1px;
background:#fff;
}

.cta .benefit .swiper_present {
width:100%;
}

.cta .benefit .swiper_present .present {
position:relative;
}

.cta .benefit .swiper_present .present .numbers {
position:absolute;
width:40px;
height:40px;
background:#fff;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
border-radius:20px;
top:-20px;
left:0;
right:0;
margin:auto;
border:#ff3264 1px solid;
}

.cta .benefit .swiper_present .present .numbers .number {
color:#ff3264;
font-weight:bold;
}

.cta .benefit .swiper_present .present .photo {
margin-bottom:10px;
}

.cta .benefit .swiper_present .present .item {
font-size:90%;
font-weight:bold;
color:#fff;
text-align:center;
}





/*BACK TO TOP*/
.BackToTop {
position:fixed;
width:50px;
height:50px;
right:15px;
bottom:15px;
z-index:100;
display:none;
}





/*FOOTER*/
footer {
padding:30px;
background:#fff;
}

footer .copyright {
font-size:60%;
text-align:center;
letter-spacing:1px;
}





}