/*
 Theme Name: Tetote
*/

/* ----------------------------------------
reset
---------------------------------------- */

*{
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 box-sizing: border-box;
}
img{
 width: 100%;
 max-width: 100%;
 vertical-align: bottom;
}
li{
 list-style: none;
}
a{
 color: inherit;
 text-decoration: none;
}
h1,h2,h3,h4,h5,h6{
 font-weight: normal;
 font-size: 100%;
}



/* ----------------------------------------
base
---------------------------------------- */

body{
 font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
 color: #333;
}

body.hbg-open{
  overflow: hidden;
}

.c-header{
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: #faf7f2;
  z-index: 8;
}
.c-header::before{
  content: "";
  position: fixed;
  top: 90px;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,.7);
  pointer-events: none;
  opacity: 0;
  transition: .3s opacity;
}
body.hbg-open .c-header::before{
  opacity: 1;
}
body.hbg-open .c-header__nav{
  left: 0;
}

a:hover{
  opacity: .6;
}



/* ----------------------------------------
font
---------------------------------------- */

.f-parisienne{
 font-family: 'Parisienne', cursive;
}
.f-hiramin{
 font-family: "Hiragino Mincho ProN","ヒラギノ明朝 ProN","Hiragino Mincho Pro","ヒラギノ明朝 Pro";
}
.f-notoserif{
 font-family: 'Noto Serif JP', serif;
}



/* ----------------------------------------
utility
---------------------------------------- */

.u-page-container{
 padding: 100px 0;
}

.u-inner{
 max-width: 1110px;
 margin: 0 auto;
 padding: 0 15px;
}
.u-inner-s{
  max-width: 946px;
  margin: 0 auto;
}

.u-col3{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 0 40px;
}
.u-col3::after{
  content: "";
  width: 31.5%;
}
.u-col3 > li{
  width: 31.5%;
}
.u-col3 > li:nth-child(n+4){
  margin: 140px 0 0;
}
.u-col3 a{
  display: block;
}
.u-col3 img{
  margin: 0 0 5px;
}
.u-col3 p{
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 0.05em;
}
.u-col3 video{
  width: 100%;
}
@media screen and (max-width: 800px) {
  .u-col3{
    display: block;
    border-top: 1px solid #aaa;
  }
  .u-col3 > li,
  .u-col3 a{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 0;
    border-bottom: 1px solid #aaa;
    margin: 0 !important;
  }
  .u-col3 a{
    padding: 0;
    border: 0;
  }
  .u-col3 img,
  .u-col3 video{
    width: 45%;
    margin: 0 10px 0 0;
  }
  .u-col3 p,
  .u-col3 h3{
    flex: 1;
    font-size: 16px !important;
  }
  .u-col3 iframe{
    position: static !important;
  }
}

.u-mb40{
  margin-bottom: 40px !important;
}




/* ----------------------------------------
module
---------------------------------------- */

.m-title-A{
  position: relative;
  font-family: 'Noto Serif JP', serif;
  margin: 0 0 45px;
}
.m-title-A h2{
  text-align: center;
  font-size: 30px;
  color: #0b2d4f;
  position: relative;
  z-index: 1;
  font-weight: bold;
}
.m-title-A p{
  font-size: 64px;
  position: absolute;
  top: -55px;
  left: 0;
  right: 0;
  text-align: center;
  color: #c9d9e8;
  opacity: .6;
}
@media screen and (max-width: 800px) {
  .m-title-A h2{
    font-size: 24px;
  }
  .m-title-A p{
    font-size: 40px;
    top: -30px;
  }
}

.m-title-B{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 25px;
  margin: 0 0 40px;
}
.m-title-B::before,
.m-title-B::after{
  content: "";
  height: 1px;
  flex: 1;
  background: #447193;
}
.m-title-B::before{
  margin: 0 60px 0 0;
}
.m-title-B::after{
  margin: 0 0 0 60px;
}
@media screen and (max-width: 800px) {
  .m-title-B{
    font-size: 22px;
  }
  .m-title-B::before{
    margin: 0 40px 0 0;
  }
  .m-title-B::after{
    margin: 0 0 0 40px;
  }  
}

.m-title-C{
  padding: 18px;
  font-size: 30px;
  color: #447193;
  font-family: "Hiragino Mincho ProN","ヒラギノ明朝 ProN","Hiragino Mincho Pro","ヒラギノ明朝 Pro";
  border-top: 1px solid #447193;
  border-bottom: 1px solid #447193;
  font-weight: bold;
  margin: 0 0 40px;
}

.m-text-A{
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-align: center;
  margin: 0 0 40px;
}
.m-text-A._left{
  text-align: left;
}
@media screen and (max-width: 800px) {
  .m-text-A{
    font-size: 16px;
  }
}

.m-button-A{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ecf2f8;
  font-weight: bold;
  margin: 0 auto;
  font-size: 27px;
  letter-spacing: 0.05em;
  border-radius: 50px;
  box-shadow: 0 0 20px -5px #447193;
  width: 340px;
  height: 60px;
}
@media screen and (max-width: 800px) {
  .m-button-A{
    width: 200px;
    height: 50px;
    font-size: 20px;
  }
}



/* ----------------------------------------
component
---------------------------------------- */

/* header */
.c-header{
  height: 110px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.c-header__logo{
 width: 266px;
 margin: 0 0 0 30px;
}
.c-header__nav{
  display: flex;
}
.c-header__nav > li{
  margin: 0 40px 0 0;
  position: relative;
}
@media screen and (min-width: 801px) {
  .c-header__nav ul{
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    padding: 20px 30px;
    white-space: nowrap;
    display: none;
  }
  .c-header__nav li:hover ul{
    display: block;
  }
  .c-header__nav ul li + li{
    margin: 10px 0 0;
  }
}
.c-header__hamburger{
  width: 50px;
  height: 50px;
  position: relative;
  cursor: pointer;
  display: none;
}
.c-header__hamburger-line{
  position: absolute;
  left: 10px;
  width: 30px;
  height: 1px;
  background: #000;
}
.c-header__hamburger-line._top{
  top: 15px;
}
.c-header__hamburger-line._center{
  top: 25px;
}
.c-header__hamburger-line._bottom{
  top: 35px;
}

@media screen and (max-width: 800px) {
 .c-header{
  height: 90px;
  padding: 20px 15px;
 }
 .c-header__logo{
  width: 160px;
  margin: 0;
 }
 .c-header__nav{
   position: fixed;
   top: 90px;
   bottom: 0;
   width: 300px;
   padding: 50px 30px;
   left: -300px;
   background: #fff;
   display: block;
   transition: .3s left;
   z-index: 9;
 }
 .c-header__nav ul{
   padding: 20px 0 0 20px;
 }
 .c-header__nav ul li::before{
   display: none;
 }
 .c-header__nav li{
   margin: 0 0 20px;
   position: relative;
 }
 .c-header__nav li::before{
   content: "";
   border-right: 2px solid #333;
   border-bottom: 2px solid #333;
   width: 4px;
   height: 4px;
   position: absolute;
   top: 10px;
   left: -15px;
   transform: rotate(-45deg);
 }
 .c-header__hamburger{
   display: block;
 }
}

/* c-contact */
.c-contact{
  background: url(/img/contact.jpg) center / cover;
}
.c-contact__flex{
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 415px;
}
.c-contact__title{
  width: 224px;
}
.c-contact__button{
  width: 247px;
}
@media screen and (max-width: 800px) {
  .c-contact__flex{
    flex-direction: column;
    justify-content: center;
    height: 230px;
  }
  .c-contact__title{
    width: 140px;
    margin: 0 0 30px;
  }
  .c-contact__button{
    display: block;
    width: 170px;
  }
}

/* footer */
.c-footer{
 background: #faf7f2;
}
.c-footer__inner{
 padding: 50px 0 70px;
}
.c-footer__logo{
 width: 300px;
 margin: 0 0 20px;
}
.c-footer__compnay{
 font-size: 20px;
 margin: 0 0 20px;
}
.c-footer__official{
 display: flex;
 justify-content: center;
 align-items: center;
 background: #d2c8b8;
 width: 245px;
 height: 63px;
 font-size: 20px;
 letter-spacing: 0.2em;
}
.c-footer__official:hover{
 opacity: .7;
}
.c-footer__copyright{
 display: flex;
 justify-content: center;
 align-items: center;
 background: #000;
 color: #fff;
 font-size: 12px;
 height: 80px;
}
.c-footer__flex{
  display: flex;
  align-items: center;
}
.c-footer__info{
  width: 440px;
  border-right: 1px solid #333;
}
.c-footer__nav{
  flex: 1;
  padding: 0 0 0 70px;
}
.c-footer__nav a,
.c-footer__nav p{
  display: inline-block;
  padding: 8px 0;
}

@media screen and (max-width: 800px) {
 .c-footer__logo{
  width: 200px;
 }
 .c-footer__official{
  width: 200px;
  height: 50px;
  font-size: 16px;
 }
 .c-footer__copyright{
  height: 60px;
 }
 .c-footer__flex{
   display: block;
 }
 .c-footer__info{
   width: auto;
   border: 0;
   border-bottom: 1px solid #333;
   padding: 0 0 30px;
 }
 .c-footer__nav{
  padding: 30px 0 0;
 }
}

/* page-mv */
.c-page-mv{
 height: 395px;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
}
.c-page-mv._movie{
 background: url(/img/movie-mv.jpg) center / cover;
}
.c-page-mv__en{
 font-size: 50px;
 letter-spacing: 0.16em;
 margin: 0 0 10px;
 font-weight: bold;
 text-align: center;
}
.c-page-mv__ja{
 font-size: 30px;
 letter-spacing: 0.05em;
}

@media screen and (max-width: 800px) {
 .c-page-mv{
  height: 250px;
 }
 .c-page-mv__en{
  font-size: 28px;
  margin: 0;
 }
 .c-page-mv__ja{
  font-size: 18px;
 }
}



/* ----------------------------------------
top
---------------------------------------- */

.top-mv{
  height: 730px;
  background: url(/img/mv.jpg) center / cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
.top-mv__copy{
  padding: 0 15px;
  max-width: 864px;
}
.top-salon{
  padding: 120px 0;
}
.top-salon__separate{
  margin: 0 0 100px;
}
.top-lesson{
  padding: 160px 0;
  background: #f2f6fa;
}

@media screen and (max-width: 800px) {
  .top-mv{
    height: auto;
    display: block;
    background: none;
  }
  .top-mv__copy{
    padding: 0;
  }
  .top-salon .m-text-A,
  .top-lesson .m-text-A{
    text-align: left;
  }
}



/* ----------------------------------------
contents
---------------------------------------- */

.contents-nav{
 background: rgba(222,232,242,.4);
 position: relative;
 padding: 40px 0 55px;
 max-width: 950px;
 margin: 0 auto;
}
.contents-nav::before{
 content: "";
 position: absolute;
 top: -6px;
 right: 6px;
 bottom: 6px;
 left: -6px;
 border: 1px solid #000;
 pointer-events: none;
}
.contents-nav h2{
 text-align: center;
 width: 186px;
 margin: 0 auto;
}
.contents-nav ul{
 display: flex;
 justify-content: center;
 align-items: center;
 flex-wrap: wrap;
}
.contents-nav li{
 margin: 30px 15px 0;
 width: 250px;
 background: #fff;
 border-radius: 50px;
 font-size: 20px;
 text-align: center;
 box-shadow: 0 0 12px rgba(0,0,0,.1);
 overflow: hidden;
 letter-spacing: 0.05em;
 font-weight: bold;
}
.contents-nav a{
 display: block;
 padding: 7.5px 0;
}
.contents-nav a:hover{
 background: #f6f6f6;
}
.contents-section{
 padding: 80px 0;
}
.contents-section:nth-child(odd){
 background: #f2f6fa;
}
.contents-section h2{
 color: #1d4e70;
 font-size: 20px;
 font-weight: normal;
 letter-spacing: 0.05em;
 text-align: center;
 margin: -150px 0 40px;
 padding: 150px 0 0;
}
.contents-section h2 span{
 font-size: 85px;
 display: block;
}
/* .contents-section ul{
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}
.contents-section ul::after{
 content: "";
 width: 32%;
}
.contents-section li{
 width: 32%;
 margin: 0 0 50px;
} */
.contents-section .movie{
 position: relative;
padding-top: 56.25%;
 margin: 0 0 8px;
}
/* .contents-section video{
	width: 100%;
} */
.contents-section iframe{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
.contents-section h3{
 font-size: 20px;
 letter-spacing: 0.05em;
 font-weight: bold;
}
.contents-section .label{
 background: rgba(207,223,235,.5) url(/img/star.png) 5px center / 22px 22px no-repeat;
 color: #1d4e70;
 font-weight: bold;
 font-size: 25px;
 letter-spacing: .05em;
 margin: 40px 0 50px;
 padding: 6px 20px 6px 35px;
 display: inline-block;
}

@media screen and (max-width: 800px) {
 .contents-nav ul{
  padding: 0 20px;
  justify-content: space-around;
 }
 .contents-nav li{
  width: 46%;
  margin: 4% 0 0;
 }
 /* .contents-section li{
  width: 48%;
  margin: 0 0 50px;
 } */
}

@media screen and (max-width: 600px) {
 .page-inner{
  padding: 100px 15px;
 }
 .contents-nav ul{
  display: block;
 }
 .contents-nav li{
  width: auto;
  font-size: 16px;
 }
 .contents-section h2 span{
  font-size: 80px;
 }
 /* .contents-section ul{
  display: block;
  border-top: 1px solid #aaa;
 }
 .contents-section li{
  border-bottom: 1px solid #aaa;
  width: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 0;
 } */
 .contents-section .label{
  font-size: 20px;
 }
 .contents-section .movie{
  width: 40%;
  margin: 0 10px 0 0;
  padding: 0;
 }
 .contents-section p{
   flex: 1;
 }
}



/* ----------------------------------------
voice
---------------------------------------- */

.voice-list{
  background: #f2f6fa;
  padding: 150px 0 80px;
}
.voice-faq{
  padding: 200px 0;
}
.voice-faq__banner{
  display: block;
  max-width: 1000px;
  margin: 0 auto;
  box-shadow: 0 0 15px rgba(0,0,0,.4);
}

@media screen and (max-width: 800px) {
  .voice-list{
    padding: 80px 0 40px;
  }
  .voice-faq{
    padding: 30px 0;
  }
}



/* ----------------------------------------
faq
---------------------------------------- */

.faq li + li{
  margin: 25px 0 0;
}
.faq h2{
  background: #e0eaf4;
  position: relative;
  font-size: 18px;
  padding: 25px 100px;
  letter-spacing: 0.2em;
  cursor: pointer;
}
.faq h2::before{
  content: "Q";
  font-size: 35px;
  position: absolute;
  top: 13px;
  left: 40px;
  font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
.faq h2::after{
  content: "";
  position: absolute;
  top: 28px;
  right: 40px;
  width: 23px;
  height: 23px;
  background: url(/img/faq-plus.png) center / contain no-repeat;
}
.faq h2.is-open::after{
  background: url(/img/faq-minus.png) center / contain no-repeat;
}
.faq p{
  background: #f2f6fa;
  position: relative;
  padding: 25px 100px;
  line-height: 2.2;
  letter-spacing: 0.2em;
  display: none;
}
.faq p::before{
  content: "A";
  font-size: 35px;
  position: absolute;
  top: 13px;
  left: 40px;
  font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
@media screen and (max-width: 800px) {
  .faq h2{
    padding: 20px 50px;
  }
  .faq h2::before{
    font-size: 24px;
    top: 15px;
    left: 15px;
  }
  .faq h2::after{
    top: 23px;
    right: 20px;
  }
  .faq p{
    padding: 20px 10px 20px 50px;
  }
  .faq p::before{
    font-size: 24px;
    top: 15px;
    left: 15px;
  }  
}



/* ----------------------------------------
sales
---------------------------------------- */

.sales-welcome{
  padding: 100px 0 0;
}
.sales-welcome__image{
  margin: 0 0 30px;
}
.sales-welcome__title{
  font-size: 23px;
  font-weight: bold;
  background: rgba(29, 77, 112, .2);
  margin: 0 0 20px;
  padding: 5px 20px 0 20px;
}
.sales-welcome__title span{
  font-size: 35px;
  color: #1d4e70;
  font-family: 'Parisienne', cursive;
  margin: 0 10px 0 0;
  display: inline-block;
}
.sales-way-image{
  text-align: center;
  max-width: 749px;
  margin: 0 auto 50px;
}
.sales-way-line{
  background: #00b900;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 370px;
  height: 85px;
  font-size: 23px;
  letter-spacing: 0.05em;
  margin: 0 auto;
}
.sales-way-line._blue{
  background: #1d4e70;
}
.sales-day{
  padding: 100px 0;
  text-align: center;
}
.sales-day:nth-child(even){
  background: #f2f6fa;
}
.sales-day h2{
  color: #1d4e70;
  font-size: 85px;
  font-family: 'Parisienne', cursive;
  letter-spacing: 0.05em;
  margin: 0 0 30px;
}
.sales-day h3{
  color: #1d4e70;
  font-size: 20px;
  letter-spacing: 0.05em;
  font-family: "Hiragino Mincho ProN","ヒラギノ明朝 ProN","Hiragino Mincho Pro","ヒラギノ明朝 Pro";
  margin: 0 0 40px;
}
.sales-day__list{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.sales-day__list li{
  width: 335px;
  margin: 0 10px;
}
.sales-day__list p{
  text-align: left;
  margin: -20px 0 30px;
}
.sales-day__movie-wrap{
  max-width: 335px;
  margin: 0 auto 30px;
}
.sales-day__movie{
  /* padding: 55.5% 0 0;
  background: #aaa; */
}
.sales-day__movie video{
  width: 100%;
}
.sales-day__movie iframe{}





/* ----------------------------------------
contact
---------------------------------------- */

.contact-read{
  text-align: center;
  font-size: 20px;
  letter-spacing: 0.1em;
  line-height: 1.5;
  margin: 0 0 40px;
}
.contact-form{
  background: #faf7f2;
  padding: 80px 50px; 
}
.contact-table{
  width: 100%;
  margin: 0 0 30px;
}
.contact-table th{
  width: 270px;
  vertical-align: middle;
  position: relative;
  text-align: left;
  padding: 0 0 0 20px;
  font-size: 18px;
  font-weight: normal;
}
.contact-table th.req::before{
  content: "必須";
  background: #d43e47;
  color: #fff;
  font-size: 14px;
  font-family: "Hiragino Mincho ProN","ヒラギノ明朝 ProN","Hiragino Mincho Pro","ヒラギノ明朝 Pro"; 
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  display: block;
  width: 52px;
  height: 26px;
  line-height: 26px;
  border-radius: 5px;
  font-weight: normal;
  text-align: center;
}
.contact-table td{
  padding: 20px;
}
.contact-table th,
.contact-table td{
  border-bottom: 1px solid #e8e8e8;
}
.contact-table input,
.contact-table textarea{
  border: 1px solid #b5b5b5;
  background: #fff;
  font-size: 18px;
  width: 100%;
  padding: 10px;
}
.contact-table input{
  height: 55px;
}
.contact-table textarea{
  height: 190px;
}
.contact-policy{
  background: #fff;
  font-size: 14px;
  border: 1px solid #b5b5b5;
  padding: 20px;
  height: 208px;
  overflow-y: scroll;
  margin: 0 0 30px;
}
.contact-policy p{
  margin: 0 0 1em;
}
.contact-check{
  text-align: center;
  margin: 0 0 40px;
}
.contact-submit{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 413px;
  height: 65px;
  background: #aca190;
  border-radius: 50px;
  color: #fff;
  font-size: 25px;
  margin: 0 auto;
  max-width: 100%;
}
@media screen and (max-width: 800px) {
  .contact-read{
    font-size: 16px;
  }
  .contact-form{
    padding: 30px 15px;
  }
  .contact-table th,
  .contact-table td{
    display: block;
    padding: 0;
  }
  .contact-table th{
    width: auto;
    border: 0;
    padding: 20px 0 0;
  }
  .contact-table td{
    padding: 20px 0;
  }
  .contact-table th.req::before{
    top: auto;
    bottom: 0;
    transform: none;
  }
  .contact-check{
    font-size: 15px;
  }
  .contact-submit{
    width: 80%;
    height: 45px;
    font-size: 20px;  
  }
}

.up-btn{
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 9;
  cursor: pointer;
}

@media screen and (max-width: 800px) {
  .up-btn img{
    width: 60px;
  }
}

@media screen and (min-width: 800px) {
  .u-sp{
    display: none !important;
  }
}

@media screen and (max-width: 800px) {
  .sales-way-line{
    width: 250px;
    height: 55px;
    font-size: 16px;
  }
  .sales-day h2{
    font-size: 45px;
  }
  .m-title-C{
    font-size: 18px;
    padding: 15px 0;
  }
  .sales-welcome__title{
    font-size: 18px;
  }
  .sales-welcome__title span{
    font-size: 25px;
  }
}


.post-password-form{
  padding: 100px 0;
  text-align: center;
}

.post-password-form input{
  border: 1px solid #ccc;
}


video{
	background: #000;
}