@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.2
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
*,
*:before,
*:after {
  box-sizing: border-box;
}
a {
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  text-decoration: none;
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
img {
  max-width: 100%;
  width: 100%;
  vertical-align: bottom;
}
body.home iframe { max-width: unset; }
.wrap { width: 100%; }
.content { margin-top: 0; }
main.main { padding: 0; border: 0;}
body { position: relative; line-height: 1.6; }
body,#container {
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

/* Safari用のハックは、Chromeに適用されないようにする */
@supports (-webkit-touch-callout: none) {
  body {
    /* Safari用のハック */
    height: -webkit-fill-available;
  }
}

/*************
** header
*************/
#header-container, nav.navi { background: transparent; }
#header-container-in, .header_inner { position: relative; }
#header-container-in { 
  z-index: 100; 
  width: 100%;
  padding: 0 50px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
  height: 48px;
}
.header-container-in .header-in .logo-image { padding: 0; margin: 10px 0; }
.header-container-in .header-in .logo-image span { font-size: 1em; }
.header-container-in .header-in .logo-image img { vertical-align: top; }
.header_inner { z-index: 102; }
.header-container-in #navi .menu-top li {  
  height: 48px;
  line-height: 48px;
}

.header-container-in .navi .menu-top #menu-item-26 a {  
  display: block;
  padding: 0 15px;
  font-size: .95em;
  font-weight: bold;
}

.header-container-in .navi .menu-top #menu-item-26 a .item-label::after,
.mobile-header-menu-buttons .menu-drawer .menu-item-26 a:after {
  font-family: "Font Awesome 5 Free";
  content: "\f061";
  font-weight: 900;
  padding-left: .5em;
}

/***** btn *****/
.header-container-in .navi .menu-top #menu-item-26 a,
.lbtn a,
.mobile-header-menu-buttons .menu-drawer .menu-item-26 a {
  background: #AA0F0F;
  color: #fff;
}
.header-container-in .navi .menu-top #menu-item-26 a:hover,
.lbtn a:hover,
.mobile-header-menu-buttons .menu-drawer .menu-item-26 a:hover { background: #C61212; }
.btnArea a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 60px;
  font-size: 1.125em;
  border-radius: 5px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  font-weight: bold;
  padding: .5em;
}
.sbtn { width: 100%; }
.sbtn a {
  background: -o-linear-gradient(45deg, #806c4c 0%,#b79d2e 100%,#b79d2e 100%);
  background: linear-gradient(45deg, #806c4c 0%,#b79d2e 100%,#b79d2e 100%);
  color: #fff;
}
.sbtn a:hover {
  background: -o-linear-gradient(45deg, #a28961 0%,#e8d16f 100%,#e8d16f 100%);
  background: linear-gradient(45deg, #a28961 0%,#e8d16f 100%,#e8d16f 100%);
}
.sbtn a i { padding-left: .5em; }
.front_contents .lbtn {
  max-width: 760px; margin: 0 auto;
}
.lbtn a i {
  position: absolute;
  font-size: 1.65em;
  right: .6em;
}


/***** 動画背景 *****/
#movieArea {
  min-height: 75vh;
  height: 100%;
}

/***** 動画内テキスト *****/
.header_inner .videoArea {
  height: calc(75vh - 48px);
  position: absolute;
  left: 0;
  width: 100%;
}
.header_inner .videoArea .videoArea_inner {
  height: 100%;
  position: relative;
  overflow: hidden;
}
.videoArea_inner .catchtxt {
  position: absolute;
  right: 15%;
  top: 21%;
  color: #fff;
}
.videoArea_inner .catchtxt .main_catch {
  font-family: "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: bold;
  font-size: 1.875em;
  letter-spacing: -.05em;
}
.videoArea_inner .catchtxt .sub_catch {
  font-size: 1.125em;
  font-family: "M PLUS Rounded 1c";
  padding-left: .3em;
}
/*************
** TOP
*************/
body.home #content {
  position: relative;
  z-index: 150;
}
body.home #content main { background: #F2F0EC; }
main .front_contents { padding-bottom: 250px; }
main .front_contents .sec:nth-of-type(2n) {
  background: #EDE9DC;
}
.front_contents .sec { padding: 50px 0; }
.lsec_inner { max-width: 1396px; margin: 0 auto; padding: 0 15px; }
.sec_inner { max-width: 1110px; margin: 0 auto; padding: 0 15px; }
.ssec_inner { max-width: 836px; margin: 0 auto; padding: 0 15px; }
.sec_col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.front_contents h2 {
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1.5em;
  color: #483618;
}
.front_contents h2 span {
  padding-bottom: .2em;
  display: inline-block;
  border-bottom: 3px solid #707070;
}
p { margin-bottom: 1em; }
p + p { margin-top: 2em; }
.cdb { color: #483618; font-weight: bold; }
.fmin { font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }

/***** オンラインサロン *****/
.front_contents .lsec_inner { margin-bottom: 40px; }
.about .lsec_inner .sec_box { width: 48.5%; }
.about .sbtn,
.about .lbtn,
.event .lbtn { margin-top: 40px; }
.about .sec_inner .sec_box { width: calc((100% - 30px) / 3); }
.about .about_box { background: #fff; margin-bottom: 15px; height: 100%; }
.about_box .a_txtbox { padding: 1em; }
.about_box .a_txtbox .a_tit {
  font-size: 1.25em;
  line-height: 1.2;
  margin-bottom: 1em;
  text-align: center;
}
.about_box .a_txtbox .a_txt { font-size: .95em; }

/***** ​​入会の特典​ *****/
.benefits .sec_box:first-of-type { width: 52.5%; }
.benefits .sec_box:last-of-type { width: 44.5%; }
.benefits .benefits_box { margin-bottom: 40px; }
.benefits .benefits_box .b_num { width: 60px; }
.benefits .benefits_box .b_txtbox { width: calc(100% - 60px); } 
.benefits_box .b_num .b_num_inner {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  text-align: center;
  background: #806C4C;
  font-size: 1.875em;
  color: #fff;
}
.benefits_box .b_txtbox .b_tit {
  font-size: 1.25em;
  padding: .35em 0 .2em;
}
.benefits_box .b_txtbox .b_txt {
  font-size: .95em;
  line-height: 1.4;
}
.benefits .att_txt { font-size: 14px; padding-left: 60px; }
.benefits .b_img + .b_img { margin-top: 10px; }

/***** ​​サロンの内容​​ *****/
.salon_contet .sc_box {
  background: #fff;
  border-left: 15px solid #483618
}
.salon_contet .sc_box .sec_col { padding: .8em 1em; }
.salon_contet .sc_box + .sc_box { margin-top: 15px; }
.sc_box .sc_tit {
  width: 35%;
  font-size: 1.375em;
}
.sc_box .sc_txt {
  font-size: 1.125em; 
  width: 65%; 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.sc_box .sc_txt ul { padding: .3em 0; }
.sc_box .sc_txt ul li {
  line-height: 1.2;
  text-indent: -1em;
  padding-left: 1em;
}
.sc_box .sc_txt ul li + li { margin-top: .3em; }

/***** ​​イベントの例​​​ *****/
.event .ev_box { 
  width: 48.5%;
  background: #fff;
  padding: 1em; 
}
.ev_box .ev_icon {
  color: #806C4C;
  text-align: center;
  font-size: 3.125em;
  line-height: 1.5;
}
.ev_box .ev_tit { text-align: center; font-size: 1.375em; margin: .5em auto; }

/***** ​​エグゼクティブ会員​​​ *****/
.executive .sec_box { width: 48.5%; }
.executive .ex_box {
  background: #fff;
  padding: 1em;
  margin-bottom: 30px;
}
/***** ​​料金コース​​​ *****/
.box_detail i {  
  color: #D80;
  font-size: 1.125em;
  padding-right: .3em;
}
.box_detail a { text-decoration: underline; color: #3159B2; }
.box_detail a:hover { text-decoration: none; }
.price .p_memberbox { margin-top: 30px; background: #fff; }
.p_memberbox .p_member_tit {
  background: #483618;
  color: #fff;
  text-align: center;
  font-size: 1.25em;
  font-weight: bold;
  line-height: 1.65;
}
.p_memberbox .p_member_txt {
  text-align: center;
  padding: 1em;
  font-size: 1.25em
}
.p_memberbox .p_member_txt span {
  display: inline-block;
  font-size: .8em;
}

/***** 入会の方法​​​ *****/
.join .join_box {
  background: #fff;
  padding: 1em;
}
.join_box .j_num { width: 70px; font-size: 1.875em; padding-left: 8px; }
.join_box .j_txtbox { width: calc(100% - 70px); }
.j_arrow {
  padding: 20px;
  text-align: center;
  line-height: 1;
}
.j_arrow span {
  width: 0;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 20px solid #483618;
  display: inline-block;
}
.join_box p { margin-bottom: 0; }
.join_box p + p { margin-top: 1.5em; }
.join_box .box_detail { margin-top: 1em; }
.join .lbtn { margin-top: 40px; }

/*************
** footer
*************/
.footer { margin-top: 0; padding: 5px 15px; height: 47px; }
.footer .footer-bottom { margin: 0; padding: 0; }
.footer-bottom-logo { display: none; }
.footer-bottom-content { width: 100%; text-align: center; }
.copyright { margin: 0; font-size: 12px; }

/************************************
** モバイルボタン
************************************/
.mblt-header-mobile-buttons { margin-top: 0; }
.mobile-menu-buttons { display: none; }
.navi .navi-in .menu-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*767px以下*/
@media screen and (max-width: 767px){
  .mobile-header-menu-buttons.mobile-menu-buttons.has-logo-button {
    display: flex;
    z-index: 1000;
    background: #483618;
    box-shadow: none;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    height: 48px;
    top: 0;
    padding: 0 15px;
    min-height: unset;
  }
  #header-container-in, 
  .mobile-header-menu-buttons .search-menu-button, 
  .mobile-menu-buttons .navi-menu-button .menu-caption { display: none; }
  .mobile-menu-buttons .logo-menu-button {
    max-width: 230px;
    width: 100%;
    min-width: auto;
    padding: 0;
  }
  .mobile-menu-buttons .navi-menu-button { width: 50px; }
  .mobile-menu-buttons .navi-menu-button .menu-button-in .menu-icon .fa-bars { font-size: 26px; }
  .mobile-header-menu-buttons .navi-menu-content {
    left: auto;
    right: 0;
    -webkit-transform: translateX(105%);
        -ms-transform: translateX(105%);
            transform: translateX(105%);
    background: rgba(255,255,255,.9);
    color: #fff;
    max-width: 100%;
  }
  .mobile-menu-buttons .navi-menu-button .menu-close-button {
    font-size: 30px;
    padding: 5px 20px;
    text-align: right;
    color: #333;
  }
  .navi-menu-content .menu-drawer { padding: 40px 1em 30px; }
  .mobile-header-menu-buttons .menu-drawer li {  
    max-width: 300px;
    margin: 0 auto .5em;
  }
  .navi-menu-content .menu-drawer li a {
    color: #fff;
    text-align: center;
    font-size: 16px;
    padding: .8em 0;
  }
  .lsec_inner,.sec_inner,.ssec_inner { max-width: 580px; }
  .sec_col {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .about .lsec_inner .sec_box,
  .about .sec_inner .sec_box,
  .benefits .sec_box:first-of-type,
  .benefits .sec_box:last-of-type,
  .benefits .benefits_box .b_num,
  .benefits .benefits_box .b_txtbox,
  .sc_box .sc_tit, .sc_box .sc_txt,
  .event .ev_box, .executive .sec_box,
  .join_box .j_num, .join_box .j_txtbox { width: 100%; }
  .about .lsec_inner .sec_box + .sec_box,
  .event .ev_box + .ev_box { margin-top: 1.2em; }
  .btnArea a { font-size: 1.05em; }
  .benefits .benefits_box .b_num,
  .benefits_box .b_txtbox .b_tit,
  .join_box .j_num { text-align: center; }
  .benefits .benefits_box .b_num {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .benefits .att_txt { padding: 0; margin-bottom: 20px; }
  .join_box .j_num { padding: 0; }
  .videoArea_inner .catchtxt {
    top: 30%;
    width: 100%;
    text-align: center;
    font-size: .95em;
    right: 0;
  }
}


/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/*340px以下*/
@media screen and (max-width: 340px){
  .lbtn.btnArea a {  
    -webkit-box-pack: start;  
        -ms-flex-pack: start;  
            justify-content: flex-start;
  }
  .lbtn a i { right: 0.3em; }
  .videoArea_inner .catchtxt .main_catch { font-size: 1.6em; }
}