@charset "utf-8";

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

@media(min-width:1000px){

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

.cts {
width:1000px;
}

.titles {
padding-bottom:50px;
text-align:center;
position:relative;
}

.titles .icon {
    width:50px;
    margin:0 auto 10px;
}

.titles h2 {
font-size:450%;
font-weight:bold;
line-height:135%;
color:#fff;
}

.en {
font-family:'Barlow Condensed', sans-serif;
}




/*MV*/
#mv {
    width:100%;
    height:100vh;
    min-height:600px;
}

#mv .cts {
    width:100%;
    display:flex;
    justify-content:space-between;
    position:relative;
}

#mv .copies {
    width:300px;
    background:#000;
    position:relative;
    z-index:1000;
    display:flex;
    align-items:center;
}

#mv .copies h1 {
    width:170px;
    margin:auto;
    position:absolute;
    top:40px;
    left:0;
    right:0;
}

#mv .copies .copy {
    width:100vw;
    position:absolute;
    left:0;
}

#mv .copies .copy h2 {
    margin:18px 0;
}

#mv .copies .copy h2 .maincopy {
    position:relative;
    display:inline-block;
    padding:5px 20px 12px 8px;
}

#mv .copies .copy h2 .maincopy .bg {
    background:#fff;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    animation:start 0.5s ease forwards;
}

#mv .copies .copy h2:nth-child(2) .maincopy .bg {
    animation-delay:0.4s;
    transform:translate(-100%,0);
}

#mv .copies .copy h2:nth-child(3) .maincopy .bg {
    animation-delay:0.8s;
    transform:translate(-100%,0);
}

#mv .copies .copy h2:nth-child(3) .maincopy .bg {
    background:#e3007f;
}

#mv .copies .copy h2 .maincopy p {
    font-size:350%;
    font-weight:700;
    font-style:italic;
    line-height:100%;
    position:relative;
    color:#e3007f;
}

#mv .copies .copy h2:nth-child(3) .maincopy p {
    color:#fff;
}

#mv .copies .subcopy {
    width:100vw;
    position:absolute;
    left:30px;
    bottom:30px;
}

#mv .copies .subcopy p {
    font-size:110%;
    font-weight:600;
    line-height:100%;
    color:#fff;
    margin:10px 0;
}

#mv .copies .subcopy p .feature {
    background:#b49650;
    color:#000;
    display:inline-block;
    padding:5px 8px;
    margin-right:10px;
}

#mv .mv_slider {
    width:calc(100% - 300px);
    height:100%;
    min-height:600px;
    position:relative;
}

#mv .mv_slider .mask {
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    position:absolute;
    top:0;
    left:0;
    z-index:999;
}

#mv .mv {
    width:100%;
    height:100vh;
    min-height:600px;
}

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

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

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

#mv .mv4 {
    background:url(../img/mv_4.jpg) center;
    background-size:cover;
}

#mv .ad {
    width:280px;
    position:absolute;
    bottom:35px;
    right:35px;
    z-index:999;
}




/*ABOUT*/
#about {
    padding:100px 0;
    background:#1e1e1e url(../img/about_bg.jpg) center;
    background-size:cover;
}

#about .titles .icon  {
    width:60px;
}

#about .titles h2 {
    font-size:350%;
}

#about .cts {
    width:100%;
    display:flex;
}

#about .about_slider {
    width:50%;
    height:450px;
    overflow:hidden;
}

#about .photo {
    width:100%;
    height:450px;
}

#about .photo1 {
    background:url(../img/about_1.jpg) center;
    background-size:cover;
}

#about .photo2 {
    background:url(../img/about_2.jpg) center;
    background-size:cover;
}

#about .photo3 {
    background:url(../img/about_3.jpg) center;
    background-size:cover;
}

#about .detail {
    width:50%;
}

#about .detail .ex {
    width:500px;
    padding-left:50px;
}

#about .detail .ex p {
    color:#fff;
}




/*FEATURE*/
#feature {
    padding:80px 0 100px;
    background:#000;
    position:relative;
    overflow:hidden;
}

#feature .cts {
    width:100%;
}

#feature .typo {
    font-size:1200%;
    font-weight:600;
    line-height:100%;
    color:#1e1e1e;
    position:absolute;
    top:-40px;
    left:0;
    right:0;
    text-align:center;
    white-space:nowrap;
}

#feature .features {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}

#feature .features .feature {
    width:33.3%;
    height:550px;
    position:relative;
    overflow:hidden;
}

#feature .features .feature:after {
    content:"";
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    position:absolute;
    top:0;
    left:0;
}

#feature .features .feature:nth-child(2),
#feature .features .feature:nth-child(5) {
    width:33.4%;
}

#feature .features .feature1 {
    background:url(../img/feature_1.jpg) center;
    background-size:cover;
}

#feature .features .feature2 {
    background:url(../img/feature_2.jpg) center;
    background-size:cover;
}

#feature .features .feature3 {
    background:url(../img/feature_3.jpg) center;
    background-size:cover;
}

#feature .features .feature4 {
    background:url(../img/feature_4.jpg) center;
    background-size:cover;
}

#feature .features .feature5 {
    background:url(../img/feature_5.jpg) center;
    background-size:cover;
}

#feature .features .feature6 {
    background:url(../img/feature_6.jpg) center;
    background-size:cover;
}

#feature .features .feature .en {
    font-size:1000%;
    font-weight:500;
    line-height:100%;
    color:#b49650;
    position:absolute;
    top:-32px;
    right:-6px;
    z-index:1;
}

#feature .features .feature .copies {
    position:absolute;
    bottom:25px;
    left:25px;
    z-index:1;
}

#feature .features .feature .copies h3 {
    font-size:150%;
    font-weight:700;
    line-height:150%;
    color:#fff;
    padding-bottom:7px;
}

#feature .features .feature .copies .copy {
    font-size:80%;
    font-weight:500;
    color:#fff;
}





/*SERVICE*/
#service {
    position:relative;
    padding:0 0 110px;
    background:#000;
}

#service .bg {
    width:100%;
    height:230px;
    background:#464646;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
}

#service .cts {
    width:800px;
}

#service .titles {
    display:flex;
    justify-content:center;
    align-items:center;
    padding-bottom:30px;
}

#service .titles img {
    width:30px;
}

#service .titles h4 {
    font-size:180%;
    font-weight:bold;
    color:#e3007f;
    padding:0 10px;
}

#service .services {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    position:relative;
}

#service .services .service {
    width:30%;
    background:#e3007f;
    text-align:center;
    padding:35px 20px 25px;
}

#service .services .service:nth-child(n+4) {
    margin-top:30px;
}

#service .services .service .illust {
    width:100px;
    margin:0 auto 15px;
}

#service .services .service .tx {
    font-weight:600;
    color:#fff;
}




/*SCENE*/
#scene {
    background:#464646;
    padding-bottom:100px;
}

#scene .swiper-slide:nth-child(odd) {
    width:400px;
}

#scene .swiper-slide:nth-child(even) {
    width:200px;
}





/*PRICE*/
#price {
    padding:80px 0 100px;
    position:relative;
    overflow:hidden;
    background:#1e1e1e;
}

#price .typo {
    font-size:1200%;
    font-weight:500;
    line-height:100%;
    color:#000;
    position:absolute;
    top:-40px;
    left:0;
    right:0;
    text-align:center;
    white-space:nowrap;
}

#price .copies {
    text-align:center;
    padding-bottom:30px;
}

#price .copies .copy1 {
    font-size:180%;
    font-weight:bold;
    color:#e3007f;
}

#price .copies .copy2 {
    font-size:180%;
    font-weight:bold;
    color:#fff;
}

/*PRICE PLAN*/
#price .plan_cts {
}

#price .plan_cts .plans {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}

#price .plan_cts .plans .plan {
    width:48.5%;
    background:#fff;
    border:#e3007f 5px solid;
    padding:25px 25px 20px;
    text-align:center;
    margin-bottom:25px;
}

#price .plan_cts .plans .plan:nth-child(-n+4) {
    padding:0 0 15px;
}

#price .plan_cts .plans .plan .plan_items {
    background: #e3007f;
    padding:10px;
}

#price .plan_cts .plans .plan .plan_items h3 {
    font-size:300%;
    color:#fff;
    line-height:100%;
}

#price .plan_cts .plans .plan .plan_items .conditions {
    font-weight:600;
    line-height:100%;
}

#price .plan_cts .plans .plan .plan_price {
    width:70%;
    margin:15px auto 5px;
}

#price .plan_cts .plans .plan .attention {
    font-size:80%;
}

#price .plan_cts .plans .plan h3 {
    font-size:270%;
    font-weight:600;
    line-height:100%;
}

#price .plan_cts .plans .plan h3 span {
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

#price .plan_cts .plans .plan .prices {
    display:flex;
    justify-content:center;
    align-items:flex-end;
    padding-bottom:5px;
}

#price .plan_cts .plans .plan .prices .item {
    border:#e3007f 1px solid;
    font-size:120%;
    font-weight:500;
    line-height:100%;
    padding:3px 5px 5px;
    color:#e3007f;
    margin:0 10px 12px 0;
}

#price .plan_cts .plans .plan .prices .price {
    font-size:500%;
    font-weight:600;
    line-height:100%;
    color:#e3007f;
    padding-right:5px;
}

#price .plan_cts .plans .plan .prices .yen {
    font-size:180%;
    font-weight:bold;
    color:#e3007f;
}

#price .plan_cts .plans .plan .prices .taxin {
    font-size:70%;
    padding-bottom:5px;
}

#price .plan_cts .plans .plan .tax_excluded {
    font-size:90%;
    font-weight:500;
    margin-bottom:10px;
}

#price .plan_cts .plans .plan .conditions {
    font-size:90%;
    background:#e3007f;
    color:#fff;
    display:inline-block;
    padding:5px 12px 7px;
}

#price .plan_cts .plans .plan:last-child {
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:10px;
}

#price .plan_cts .plans .plan:last-child h3 {
    font-size:180%;
    margin-right:30px;
}

#price .plan_cts .plans .plan:last-child .item {
    margin-bottom:20px;
}


/*PRICE FEE*/
#price .fees {
    background:#1e1e1e;
    border:#b49650 5px solid;
    padding:25px 25px 20px;
    text-align:center;
    margin-bottom:50px;
}

#price .fees h3 {
    font-size:180%;
    font-weight:600;
    line-height:100%;
    color:#b49650;
    margin-bottom:20px;
}

#price .fees h3 span {
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

#price .fees h3 span:before {
    content:"";
    width:30px;
    height:1px;
    background:#b49650;
    display:block;
    margin-right:15px;
}

#price .fees h3 span:after {
    content:"";
    width:30px;
    height:1px;
    background:#b49650;
    display:block;
    margin-left:15px;
}

#price .fees .fee_cts {
    display:flex;
    justify-content:center;
}

#price .fees .fee {
    width:380px;
    margin:0 10px;
}

#price .fees .fee .item {
    font-weight:600;
    padding:2px 10px 4px;
    border:#b49650 1px solid;
    color:#b49650;
}

#price .fees .fee .prices {
    display:flex;
    justify-content:center;
    align-items:flex-end;
    padding-bottom:5px;
}

#price .fees .fee .prices .item {
    border:#b49650 1px solid;
    font-size:120%;
    font-weight:500;
    line-height:100%;
    padding:3px 5px 5px;
    color:#b49650;
    margin:0 10px 12px 0;
}

#price .fees .fee .prices .price {
    font-size:400%;
    font-weight:600;
    line-height:100%;
    color:#b49650;
    padding-right:5px;
}

#price .fees .fee .prices .yen {
    font-size:180%;
    font-weight:bold;
    color:#b49650;
}

#price .fees .fee .prices .taxin {
    font-size:70%;
    padding-bottom:5px;
    color:#b49650;
}


/*PRICE OPTION*/
#price .option_cts {
}

#price .option_cts .cate {
    border-left:#f0831e 5px solid;
    color:#f0831e;
    font-size:135%;
    font-weight:600;
    line-height:100%;
    padding:5px 0 8px 15px;
    margin-bottom:15px;
}

#price .option_cts .options {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}


#price .option_cts .options .option {
    width:320px;
    background:#fff;
    border:#f0831e 4px solid;
    padding:25px 25px 15px;
    text-align:center;
}

#price .option_cts .options .option h3 {
    font-size:125%;
    font-weight:600;
    line-height:100%;
    margin-bottom:20px;
}

#price .option_cts .options .option .courses {
}

#price .option_cts .options .option .courses .course {
    width:100%;
    margin-bottom:10px;
}

#price .option_cts .options .option .courses .course:last-child {
    margin-bottom:0;
}

#price .option_cts .options .option .courses .course .title {
    font-size:80%;
    font-weight:600;
    padding:2px 10px 4px;
    border:#f0831e 1px solid;
    color:#f0831e;
}

#price .option_cts .prices {
    display:flex;
    justify-content:center;
    align-items:flex-end;
    padding-bottom:5px;
}

#price .option_cts .prices .item {
    border:#f0831e 1px solid;
    font-size:90%;
    font-weight:500;
    line-height:100%;
    padding:3px 5px 5px;
    color:#f0831e;
    margin:0 10px 10px 0;
}

#price .option_cts .prices .price {
    font-size:300%;
    font-weight:600;
    line-height:100%;
    color:#f0831e;
    padding-right:5px;
}

#price .option_cts .prices .yen {
    font-size:160%;
    font-weight:bold;
    line-height:135%;
    color:#f0831e;
}

#price .option_cts .prices .taxin {
    font-size:70%;
    padding-bottom:5px;
}

#price .option_cts .tx {
    font-size:110%;
    font-weight:600;
    line-height:150%;
    margin-bottom:10px;
}

#price .option_cts .icon {
    font-size:80%;
    font-weight:500;
    line-height:100%;
    padding:7px 0 9px;
    background:#f0831e;
    color:#fff;
}



	
/*ONAKASALON*/
#onakasalon {
    padding:70px 0;
    background:linear-gradient(to right,#e4007f,#e4007f,#f0831e,#f0831e);
}

#onakasalon .titles {

}

#onakasalon .titles .subtitle {
    width:320px;
    margin:0 auto 10px;
}

#onakasalon .titles .maintitle {
    width:550px;
    margin:auto;
}
	
#onakasalon .area {
    margin-bottom:40px;
}
#onakasalon .area p {
    color:#fff;
    margin-bottom:30px;
}

#onakasalon .features {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    margin-bottom:40px;
}

#onakasalon .features .feature {
    width:235px;
    margin-bottom:30px;
}

#onakasalon .features .feature:nth-child(n+5) {
    margin-bottom:0;
}

#onakasalon .features .feature .photo {
    margin-bottom:10px;
}

#onakasalon .features .feature .tx {
    font-size:110%;
    font-weight:600;
    line-height:150%;
    color:#fff;
    text-align:center;
}

#onakasalon .salon {
    width:100%;
    background:#fff;
    border:#f0831e 4px solid;
    padding:30px 25px 15px;
    text-align:center;
    margin-bottom:25px;
    position:relative;
}

#onakasalon .salon h3 {
    font-size:160%;
    font-weight:600;
    line-height:100%;
    margin-bottom:20px;
    color:#f0831e;
}

#onakasalon .salon .tabs {
    display:flex;
    align-items:center;
    position:absolute;
    top:15px;
    left:15px;
}

#onakasalon .salon .tabs .tab:first-child {
    font-size:80%;
    font-weight:500;
    line-height:100%;
    border:#f0831e 1px dotted;
    color:#f0831e;
    padding:5px 6px 7px 6px;
    margin-right:10px;
}

#onakasalon .salon .tabs .tab:last-child {
    font-size:80%;
    font-weight:500;
    line-height:100%;
    border:#f0831e 1px dotted;
    background:#f0831e;
    color:#fff;
    padding:5px 6px 7px 6px;
}

#onakasalon .salon .plans {
    display:flex;
    justify-content:space-between;
}

#onakasalon .salon .plans .plan {
    width:460px;
    background:#fdf2e8;
    padding:20px 30px 10px;
    margin-bottom:15px;
}

#onakasalon .salon .plans .plan h4 {
    font-size:150%;
    font-weight:600;
    padding-bottom:10px;
}

#onakasalon .salon .plans .plan .copy {
    font-weight:600;
    line-height:135%;
    text-align:center;
    margin-bottom:15px;
}

#onakasalon .salon .plans .plan .photo {
    margin-bottom:20px;
}

#onakasalon .salon .plans .plan .subjects {

}

#onakasalon .salon .plans .plan .subjects .subject {
    font-size:90%;
    font-weight:500;
    line-height:100%;
    background:#f0831e;
    color:#fff;
    padding:8px;
}

#onakasalon .salon .plans .plan .subjects .times {
    display:flex;
    justify-content:center;
    border:#f0831e 1px solid;
    background:#fff;
}

#onakasalon .salon .plans .plan .subjects .times .time {
    width:50%;
    font-size:90%;
    font-weight:500;
    line-height:100%;
    border-right:#f0831e 1px solid;
    text-align:center;
    color:#f0831e;
    padding:8px;
}

#onakasalon .salon .plans .plan .subjects .times .time:last-child {
    border-right:none;
}

#onakasalon .salon .plans .plan .price_cts {
    display:flex;
}

#onakasalon .salon .plans .plan .price_cts .prices {
    width:50%;
}

#onakasalon .salon .plans .plan .courses .course {
    width:100%;
    margin-bottom:10px;
}

#onakasalon .salon .plans .plan .courses .course:last-child {
    margin-bottom:0;
}

#onakasalon .salon .attention {
    font-size:80%;
    color:#787878;
}

#onakasalon .prices {
    display:flex;
    justify-content:center;
    align-items:flex-end;
    padding-bottom:5px;
}

#onakasalon .prices .item {
    border:#f0831e 1px solid;
    font-size:90%;
    font-weight:500;
    line-height:100%;
    padding:3px 5px 5px;
    color:#f0831e;
    margin:0 10px 10px 0;
}

#onakasalon .prices .price {
    font-size:300%;
    font-weight:600;
    line-height:100%;
    color:#f0831e;
    padding-right:5px;
}

#onakasalon .prices .yen {
    font-size:160%;
    font-weight:bold;
    line-height:135%;
    color:#f0831e;
}

#onakasalon .prices .taxin {
    font-size:70%;
    padding-bottom:5px;
}





/*PROCESS*/
#process {
    padding:80px 0 100px;
    background:#000 url(../img/process_bg.jpg) center;
    background-size:cover;
    position:relative;
    overflow:hidden;
}

#process .typo {
    font-size:1200%;
    font-weight:500;
    line-height:100%;
    color:#1e1e1e;
    position:absolute;
    top:-40px;
    left:0;
    right:0;
    text-align:center;
    white-space:nowrap;
}

#process .details {
    display:flex;
    justify-content:center;
    align-items:center;
    padding:50px 0 70px;
}

#process .details .detail {
    text-align:center;
}

#process .details .detail .copy {
    font-size:110%;
    font-weight:500;
    color:#fff;
    padding-bottom:30px;
}

#process .details .detail .cta {
    animation:cta 1s ease infinite alternate;
    -webkit-animation:cta 1s ease infinite alternate;
}

#process .details .detail .cta a {

}

#process .details .detail .cta a img {
    width:600px;
    border-radius:50vw;
}






/*FAQ*/
#faq {
    padding:80px 0 100px;
    background:#1e1e1e;
    position:relative;
    overflow:hidden;
}

#faq .typo {
    font-size:1200%;
    font-weight:500;
    line-height:100%;
    color:#000;
    position:absolute;
    top:-40px;
    left:0;
    right:0;
    text-align:center;
    white-space:nowrap;
}

#faq .faqs {

}

#faq .faqs .faq {
    margin-bottom:50px;
}

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

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

#faq .faqs .faq .question .item {
    width:50px;
    height:50px;
    background:#f0831e;
    font-size:110%;
    font-weight:600;
    color:#000;
    text-align:center;
    display:flex;
    justify-content:center;
    align-items:center;
}

#faq .faqs .faq .question h3 {
    width:calc(100% - 65px);
    font-size:110%;
    font-weight:600;
    color:#f0831e;
}

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

#faq .faqs .faq .answer .item {
    width:50px;
    height:50px;
    background:#323232;
    font-size:110%;
    font-weight:600;
    color:#fff;
    text-align:center;
    display:flex;
    justify-content:center;
    align-items:center;
}

#faq .faqs .faq .answer .tx {
    width:calc(100% - 65px);
    color:#fff;
}















/*ACCESS*/
#access {
    padding:100px 0;
    background:#000;
}

#access .cts {
    width:100%;
    display:flex;
    justify-content:space-between;
}

#access .data {
    width:50%;
}

#access .data .details {
    width:500px;
    margin:0 0 0 auto;
    padding-right:50px;
}

#access .data .details h3 {
    width:320px;
    margin-bottom:30px;
}

#access .data .details ul {
}

#access .data .details ul li {
    padding:12px 0;
    border-bottom:#323232 1px solid;
}

#access .data .details ul li:first-child {
    border-top:#323232 1px solid;
}

#access .data .details ul li .item {
    color:#787878;
}

#access .data .details ul li .detail {
    color:#fff;
}

#access .map {
    width:50%;
    height:480px;
}

#access .map iframe {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
  }










/*FIXED CTA*/
.fixed_cta {
position:fixed;
width:500px;
left:0;
right:0;
bottom:0;
margin:auto;
z-index:100;
display:none;
}

.fixed_cta img {
}




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



/*FOOTER*/
footer {
background:#000;
padding:30px 0 130px;
}

footer .sns {
    display:flex;
    justify-content:center;
    margin-bottom:30px;
}

footer .sns a {
    width:36px;
    margin:0 10px;
}

footer .link {
    font-size:80%;
    color:#fff;
    text-align:center;
    margin-bottom:30px;
}

footer .link a {
    color:#fff;
}

footer .copyright {
font-size:70%;
color:#646464;
text-align:center;
}



/*SWIPER*/
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
width: 50px;
height: 50px;
margin-top: -25px;
z-index: 10;
cursor: pointer;
background-size: 50px 50px;
background-position: center;
background-repeat: no-repeat;
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
background-image: url(../img/slide_prev.svg);
left: 50px;
right: auto;
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
background-image: url(../img/slide_next.svg);
right: 50px;
left: auto;
}





}