@charset "utf-8";

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

@media(min-width:1000px){

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

.cts {
width:1000px;
margin:auto;
}

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

.titles .icon {
width:120px;
margin:0 auto 15px;
}

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

.titles h2 {
font-size:260%;
font-weight:bold;
letter-spacing:1px;
line-height:135%;
}

.ex {
}

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

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





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

header h1 {
width:120px;
}



/*MV*/
#mv {
width:100%;
height:750px;
position:relative;
}

#mv .swiper-container {
}

#mv .swiper-container .mv {
width:100%;
height:750px;
}

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

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

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

#mv .cts {
width:1100px;
height:750px;
position:absolute;
top:0;
left:0;
right:0;
margin:auto;
z-index:999;
display:flex;
justify-content:flex-end;
align-items:center;
}

#mv .cts .copies {
width:600px;
margin-bottom:100px;
}

#mv .cts .copies .copy1 {
width:550px;
margin:0 auto 30px;
}

#mv .cts .copies .copy2 {
width:500px;
margin:auto;
}





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

#worry .details {
display:flex;
justify-content:space-between;
flex-direction:row-reverse;
}

#worry .details .photo {
width:450px;
}

#worry .details .detail {
width:530px;
}

#worry .details .detail .worries {
}

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

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

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

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





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

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

#intro .obj2 {
width:320px;
position:absolute;
top:50px;
right:-100px;
}

#intro .obj3 {
width:350px;
position:absolute;
bottom:-100px;
left:-100px;
}

#intro .cts {
width:100%;
}

#intro .details {
display:flex;
flex-direction:row-reverse;
align-items:center;
}

#intro .details .photo {
width:50%;
height:520px;
background:url(../img/intro_main.jpg) center;
background-size:cover;
}

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

#intro .details .detail .ex {
width:500px;
margin:0 0 0 auto;
padding-right:50px;
}





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

#service .selects {
display:flex;
justify-content:space-between;
padding:35px 0 100px;
}

#service .selects .select {
width:235px;
}

#service .selects .select a {
border:#f07800 1px solid;
border-radius:20px;
background:#fff;
display:block;
position:relative;
padding:35px 20px 20px;
}

#service .selects .select a .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 .selects .select a .numbers .sub {
font-size:70%;
color:#fff;
letter-spacing:0;
}

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

#service .selects .select a .service_name {
text-align:center;
height:110px;
display:flex;
justify-content:center;
align-items:center;
color:#f07800;
font-size:110%;
font-weight:bold;
}

#service .selects .select a .photo {
}

#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:40px;
margin-bottom:95px;
}

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

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

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

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

#service .services .service .service_title {
background:#faf0c8;
border-radius:40px 40px 0 0;
padding:60px 30px 20px;
}

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

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

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

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

#service .services #service1 .details {
display:flex;
flex-direction:row-reverse;
justify-content:space-between;
margin-bottom:50px;
}

#service .services #service1 .details .photo {
width:400px;
}

#service .services #service1 .details .detail {
width:450px;
}

#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:20px;
padding:40px 40px 30px;
display:flex;
justify-content:space-between;
margin-bottom:50px;
}

#service .services #service1 .houses .photo {
width:214px;
}

#service .services #service1 .houses .house {
width:575px;
}

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

#service .services #service1 .houses .house .rooms {
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}

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

#service .services #service1 .houses .house .rooms .detail .number {
width:14%;
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:86%;
background:#fff;
font-size:80%;
padding:5px 10px;
}

#service .services #service1 .contents {
display:flex;
flex-wrap:wrap;
}

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

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

#service .services #service1 .contents .content:nth-child(n+3) {
margin-bottom:0;
}

#service .services #service1 .contents .content .items {
background:#fdf1e5;
border-radius:19px 19px 0 0;
text-align:center;
height:80px;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
}

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

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

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


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

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

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

#service .services #service2 .lessons .lesson {
width:48.5%;
margin:0 3% 3% 0;
}

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

#service .services #service2 .lessons .lesson:nth-child(n+3) {
margin-bottom:0;
}

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

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

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

#service .services #service2 .monthly {
display:flex;
justify-content:space-between;
}

#service .services #service2 .monthly .info {
width:48.5%;
}

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

#service .services #service2 .monthly .info .items .month {
font-size:100%;
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:120%;
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:50px;
}

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

#service .services #service3 .lessons .lesson p {
font-weight:bold;
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 {
display:flex;
margin-bottom:30px;
}

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

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

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

#service .services #service3 .contents {
display:flex;
justify-content:space-between;
}

#service .services #service3 .contents .content {
width:48.5%;
}

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

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

#service .services #service4 .contents {
display:flex;
justify-content:space-between;
}

#service .services #service4 .contents .content {
width:48.5%;
}

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

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





/*ABOUT*/
#about {
padding:100px 0 50px;
background:#fff;
}

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

#about .details {
display:flex;
justify-content:space-between;
flex-direction:row-reverse;
align-items:center;
}

#about .details .detail {
width:650px;
}

#about .details .illust {
width:320px;
}





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

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

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

#price .prices {
width:500px;
background:#fff;
position:relative;
margin:20px auto 50px;
border-radius:20px;
padding:50px 30px 30px;
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:70px;
position:absolute;
top:-35px;
left:0;
right:0;
margin:auto;
}

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

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

#price .prices .price .marker {
border-bottom:#f5e100 10px 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:135%;
font-weight:bold;
}

#price .details {
display:flex;
justify-content:center;
flex-direction:row-reverse;
}

#price .details .detail {
margin-left:30px;
padding-top:30px;
}

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

#price .details .detail .benefit {
font-size:150%;
font-weight:bold;
color:#e6321e
}

#price .details .photo {
width:160px;
}





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

#voice .voices {
}

#voice .voices .voice {
margin-bottom:50px;
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 .face {
width:150px;
}

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

#voice .voices .voice .message {
width:810px;
position:relative;
background:#fff;
border-radius:20px;
padding:40px 45px;
}

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

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

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

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

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





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

#profile {
padding:70px 0;
}

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

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

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

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

#profile .profiles .profile .details {
display:flex;
justify-content:space-between;
align-items:flex-start;
}

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

#profile .profiles .profile .photos {
width:350px;
position:relative;
}

#profile .profiles .profile .photos .photo {
}

#profile .profiles .profile:first-child .photos .sign {
width:300px;
position:absolute;
bottom:-120px;
left:0;
right:0;
margin:auto;
}

#profile .profiles .profile:last-child .photos .sign {
width:330px;
position:absolute;
bottom:-120px;
left:0;
right:0;
margin:auto;
}

#profile .profiles .profile .detail {
width:460px;
}

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

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

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

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

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





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

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

#message .ex {
text-align:center;
padding-bottom:70px;
}

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

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





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

#faq .faqs {
}

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

#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:120%;
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:1000px;
margin:auto;
background:#fff;
border-radius:20px;
position:relative;
background:#fff;
left:0;
right:0;
top:-100px;
z-index:999;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding-top:40px;
}

.cta .cta_cts .details {
display:flex;
justify-content:center;
align-items:center;
margin-bottom:30px;
}

.cta .cta_cts .details .illust {
width:250px;
margin-right:30px;
}

.cta .cta_cts .details .detail {
width:550px;
font-size:120%;
letter-spacing:1px;
line-height:180%;
}

.cta .cta_cts .cta_btn {
width:500px;
margin:auto;
}

.cta .benefit {
background:#ff3264;
position:relative;
padding:60px 0 50px;
}

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

.cta .benefit .subcopy {
font-size:135%;
font-weight:bold;
letter-spacing:2px;
color:#fff;
text-align:center;
}

.cta .benefit h3 {
font-size:250%;
font-weight:bold;
letter-spacing:2px;
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:120%;
font-weight:bold;
color:#fff;
padding:0 15px;
}

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

.cta .total .line {
width:35px;
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-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:70%;
text-align:center;
letter-spacing:1px;
}





}