/* 共通部分 */
body {font-size: 10px; font-family: 'Noto Sans JP', serif; box-sizing: border-box; color: #666666; font-weight: 300; letter-spacing: 0.2em; background-color: #efebe6;}
body::-webkit-scrollbar{
  display: none;
}
small {
font-size: 20%; padding-right: 2px;}
a {transition: all 0.8s; }
a:hover {cursor: pointer; opacity: 0.6!important;}
img { display: block; max-width: 100%; height: auto;}
.sp_block {display: none;}
.slide_block {display: block;}
.slide_block_sp {display: none;}
.btn {  font-size: 160%; width: 210px; text-align: center; background-color: #6d4d38; color: #fff; height: 45px; line-height: 45px; display: block; position: relative; margin-top: 20px; font-weight: 500; padding-right: 1%;}
.btn.center {  margin: 0 auto; margin-top: 20px;}
.btn::after { content: "";  margin: auto;  position: absolute; top: 8%; right: 12%; bottom: 0; width: 7px; height: 7px;  border-top: 1px solid #fff;  border-right: 1px solid #fff; transform: rotate(45deg); }
.reserve {position: fixed; width: 10%; bottom: 5%; right: 3%; z-index: 100;}
@media (max-width: 1000px) {
   .sp_none {display: none;}
   .sp_block {display: block;}
   .slide_block {display: none;}
   .slide_block_sp {display: block;}
   .btn {padding-right: 3%; font-size: 140%; width: 180px; height: 35px; line-height: 35px;}
   .reserve {width: 25%;}
}

/* header */
#sub header {position: relative;}
header { width: 100%; position: absolute; display: flex; justify-content: space-between; color: #ffffff; font-size: 140%; top: 0; z-index: 10; font-family: 'Noto Sans JP', serif; font-weight: 400; padding-top: 10px;  padding-bottom: 10px; background-color: #93837a; opacity: 0.8; align-items: center; height: 80px;position: relative;}
header .left { letter-spacing: 0.1em; margin-left: 40px; width: 15%; }
header .left a{ display: block; color: #ffffff;}
header .right ul{ display: flex; justify-content: space-between; }
header .right ul li {margin-right: 40px; letter-spacing: 0.1em; opacity: 1;}
header .right ul li a {display: block; color: #ffffff; opacity: 1;}
header h1{ position: absolute; top: 0; width: 100px;}
.btn_t { position: absolute; top: -20%; right: 5%; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; z-index: 20;}
.btn-line { width: 100%; height: 1px; background-color: #F2EEE9; position: relative; transition: .2s;}
.btn-line::before,.btn-line::after { content: ""; position: absolute; width: 100%; height: 100%; background-color:#F2EEE9; transition: .2s;}
.btn-line::before { transform: translateY(-10px);}
.btn-line::after {transform: translateY(10px);}
.btn-line.open { background-color: transparent!important;}
.btn-line.open::before,.btn-line.open::after {content: ""; transition: .2s;}
.btn-line.open::before { transform: rotate(45deg);}
.btn-line.open::after { transform: rotate(-45deg);}
.btn_t { display: none;}

@media (max-width: 1000px) {
  header h1{ position: absolute; top: 0; width: 13%;}
  header { font-size: 125%; height: 60px;}
  header .left { margin-left: 5%; width: 45%;}
  header .left img{width: 100%;}
  .btn_t { display: flex;     top: 22%;}
  .menu { position: fixed; left:0; top: -100%; width: 100%; display: flex; flex-direction: column; background-color: #F2EEE9;}
  .menu-list { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
  .menu-list:hover { color: #F2EEE9; background-color: rgba(255, 255, 255, 0.5); transition: .3s; cursor: pointer;}
  .menu.open { position: absolute; top: 130px;     top: 59px; z-index: 10; transition: .5s; padding-bottom: 5px;}
  .menu {background-color: #F2EEE9;}
  header .right ul li { margin-right: 0; height: 50px; line-height: 50px; border-top: 1px solid #ccc;}
  header .right ul li:first-child { border-top: none;}
  header .right ul li a {color: #666; text-align: center;}
  .main_block .copy_block img{ width: 100%;}
}



/* main_block */
.main_block { width: 100%; height: 50vW; position: relative;}
.main_block .slide_block {width: 100%; height: 100%; overflow: hidden; position: relative;}
.main_block .slide_block img{position: absolute; display: none;}
.main_block .copy_block {position: absolute; top: 40%;
  right: 43%;
  transform: rotate(-5deg);
  width: 50%;}

.slide-animation{ animation: fadezoom 8s 0s forwards;}
.effect-fade { opacity : 0; transform : translate(0, 45px); transition : all 2000ms;}
.effect-fade.effect-scroll {opacity : 1; transform : translate(0, 0);}
.effect-fade.big_title.effect-scroll {opacity : 15%; transform : translate(0, 0);}

 @keyframes fadezoom {
 0% {
   transform: scale(1);
 }
 100% {
   transform: scale(1.1);
 }
}
@media (max-width: 1000px) {

  .main_block {height: 80vW;}
  .main_block .slide_block img {width: auto; height: 100%; max-width: inherit;}

  
}
@media (max-width: 1000px) {
  .main_block .copy_block { top: 18%;  right: 55%; width: 36%; }
  .main_block .copy_block.second { top: 68.7%; right: 18%;}
  .main_block .copy_block.second p {padding-top: 0;}
  .main_block {height: 150vW;}
  .big_title {font-size: 17vw; top: -5%;}
  .about_block .about_inner { height: 120vw;}
  .main_block .copy_block p {font-size: 4vw;}
  .main_block .slide_block_sp {width: 100%; height: 100%; overflow: hidden; position: relative;}
  .main_block .slide_block_sp img{position: absolute; display: none;} 
}

/* about */
#about {margin-top: 240px;}
.title_block {width: 1000px; margin: 0 auto; padding-left: 80px; position: relative;}
.title_block h2 {font-size: 200%; color: #6d4d38;font-weight: 500; margin-bottom: 10px;}
.title_block p {font-size: 160%;}
.title_block .title_img {position: absolute; width: 60%; top: -140%; left: -22%;}
#company .title_block .title_img {width: 52%;}

.voice_block {display: flex; width: 750px; margin: 0 auto; margin-top: 40px;}
.voice_block .left_block {position: relative; width: 60%;}
.voice_block .left_block img{position: absolute; width: 42%;}
.voice_block .left_block img:nth-child(1) { width: 45%; left: 24%; animation: anim 2s ease-in-out infinite alternate;}
.voice_block .left_block img:nth-child(2) { left: 8%;  bottom: 33%; animation: anim 2s ease-in-out infinite alternate;}
.voice_block .left_block img:nth-child(3) {width: 48%; left: 4%;  bottom: 0; animation: anim2 1s ease-in-out infinite alternate;}
.voice_block .left_block img:nth-child(4) {width: 45%; right: 0;  bottom: 37%; animation: anim2 1s ease-in-out infinite alternate;}
.voice_block .left_block img:nth-child(5) {right: 0;  bottom: 0; animation: anim 2s ease-in-out infinite alternate;}
.voice_block .right_block { width: 40%; padding-right: 15px;}
@keyframes anim {
  0% { transform: translate(0, 5px);}

  100% { transform: translate(0, -5px);}
  }
  @keyframes anim2 {
    0% { transform: translate(0, -5px);}
  
    100% { transform: translate(0, 5px);}
    }

@media (max-width: 1000px) {
  #about {margin-top: 220px;}
  .title_block {width: 100%; text-align: center; padding: 0 40px;}
  .title_block .title_img {
    position: absolute;
    width: 70%;
    top: -50%;
    left: 0%;
}
.voice_block { width: 100%; }
.title_block p { font-size: 140%; text-align: left;}
.voice_block .left_block img:nth-child(1) { width: 53%; left: 26%; top: 0%;}
.voice_block .left_block img:nth-child(2) { width: 48%; left: 10%;  bottom: 37%; }
.voice_block .left_block img:nth-child(3) {width: 53%; left: 10%;  bottom: 0; }
.voice_block .left_block img:nth-child(4) {width: 51%; right: -10%;  bottom: 37%; }
.voice_block .left_block img:nth-child(5) { width: 48%;right: -12%;  bottom: 0; }
.voice_block .right_block { width: 55%; }
}

/* effect */
#effect { height: 560px; background-image: url(../images/merit_back.jpg); background-size: cover; margin-top: 50px;}
.effect_text {width: 560px; margin-left: 50%; position: relative; height: 560px;}
.effect_text .color {background-color: #f7f0d5; opacity: 0.5; width: 560px; height: 560px; position: absolute;}
.effect_merit img{ position: absolute; width: 30%;}
.effect_merit {position: relative; height: 560px;}
.effect_merit img:nth-child(1) { position: absolute; top: 23%; left: 18%;}
.effect_merit img:nth-child(2) { position: absolute; top: 23%; left: 50%;}
.effect_merit img:nth-child(3) { position: absolute; top: 53%; left: 4%;}
.effect_merit img:nth-child(4) { position: absolute; top: 53%; left: 35%;}
.effect_merit img:nth-child(5) { position: absolute; top: 53%; left: 66%;}
.effect_text .btn {position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%);}
.effect_text h2 {color: #6d4d38; z-index: 1; font-size: 200%; position: absolute; left: 50%; transform: translateX(-50%); top: 6%; }
.effect_text p { font-size: 140%; text-align: center; position: absolute; left: 50%; transform: translateX(-50%); top: 13%; width: 80%;}
@media (max-width: 1000px) {
  #effect{width: 100%;    
     background-position-x: 10%;
    background-repeat: no-repeat;
    height: auto;
  }
  .effect_text {
    width: 100%;
    margin-left:0;
    height: auto;
}
.effect_text .btn { bottom: 9%; }
.effect_merit {height: auto; padding-bottom: 120%;}
  .effect_text .color {width: 100%; height: 100%;}
  .effect_merit img:nth-child(1) {top: 28%;}
  .effect_merit img:nth-child(2) { top: 28%;}
  .effect_text p {top: 14%;}
}


/* menu */
#menu {margin-top: 240px;}
.menu_box {margin-top: 80px;}
.menu_block {display: flex; align-items: center;}
.menu_block .img_block {width: 50%;}
.menu_block .text_block {width: 50%; padding: 0 80px 0 80px;}
.menu_block .text_block h3{font-size: 200%; color: #6d4d38; font-weight: 500; margin-bottom: 10px; }
.menu_block .text_block p{font-size: 160%;}


@media (max-width: 1000px) {
  #menu {margin-top: 160px;}
  .menu_box {margin-top: 40px;}
  .menu_block {flex-direction: column; align-items: center;}
  .menu_block .img_block {width: 100%;}
  .menu_block .text_block {width: 100%; padding: 0 40px;}
  .menu_block .text_block h3 { margin-top: 20px; font-size: 180%;}
  .menu_block.block2 .text_block{ order: 2;}
  .menu_block.block2 .img_block{ order: 1;}
  .menu_block.block2 {margin-top: 40px;}
  .menu_block .text_block p{font-size: 140%;}
}



/* plofile */
#plofile { height: 540px; background-color: #b2a18a; display: flex; margin-top: 160px;}
#plofile .left_block {width: 480px; height: 628px; border: 10px solid #b2a18a; border-bottom: none; margin-top: -88px; margin-left: 150px;} 
#plofile .right_block { width: 50%; padding-left: 30px; color: #fff;}
#plofile .right_block img{width: 85%; margin-top: 40px;}
#plofile .right_block h2 {margin-left: 30px; font-size: 220%; margin-bottom: 20px; margin-top: -20px;}
#plofile .right_block p {margin-left: 30px; font-size: 140%; line-height: 1.6em;}

@media (max-width: 1000px) {
  #plofile { height: auto; background-color: #efebe6; margin-top: 60px; flex-direction: column;}
  #plofile .left_block {width: 70%; border: none;  margin-top: 0; margin-left: 0; height: auto;} 
  #plofile .right_block { width: 90%; margin-left: 10%; background-color: #b2a18a;background: rgba(178,161,138,0.9); margin-top: -45%; padding: 3% 3% 8% 3%;}
  #plofile .right_block h2 {margin-left: 20px; font-size: 220%; margin-top: -10px}
  #plofile .right_block p {margin-left: 20px; }
  #plofile .right_block img{margin-top: 10px; width: 60%; margin-left: 20px;}
  #plofile .right_block h2 {font-size: 200%; margin-bottom: 10px;}
}

/* recruit */
#top #recruit { margin-top: 180px; }
#recruit .title_block .title_img {  top: -120%;  left: -10%;}
.recruit_tit { font-size: 200%; color: #6d4d38; text-align: center; margin-top: 60px;}
#recruit .center {text-align: center;}
#recruit .recruit_block {position: relative; width: 1000px; margin: 0 auto; height: 500px; margin-top: 30px;}
#recruit .recruit_block img {position: absolute;width: 40%;}
#recruit .recruit_block img:nth-child(1) {}
#recruit .recruit_block img:nth-child(2) {right: 0;}
#recruit .recruit_block img:nth-child(3) {left: 31%; transform: translateX(-50%); top: 50%; transform: translateY(-50%);}
#recruit .recruit_block img:nth-child(4) { left: 0; bottom: 0;}
#recruit .recruit_block img:nth-child(5) { right: 0; bottom: 0;}




.recruit_tit { position: relative; display: inline-block; padding: 0 45px;}
.recruit_tit:before, .recruit_tit:after { content: ''; position: absolute; top: 50%; display: inline-block; width: 44px; height: 2px; background-color: #6d4d38; -webkit-transform: rotate(-60deg); transform: rotate(-60deg);}
.recruit_tit:before {  left:0; transform: rotate(60deg);}
.recruit_tit:after {  right: 0;}


@media (max-width: 1000px) {
  .recruit_tit { margin-top: 40px; font-size: 180%;}
  #recruit .recruit_block {width: 100%; height: auto; padding-top: 140%;}
  #recruit .title_block .title_img { top: -60%; left: 6%;}
  #top #recruit { margin-top: 140px; }
  #recruit .recruit_block img { width: 70%;}
  #recruit .recruit_block img:nth-child(1) {left: 4%; top: 0;}
#recruit .recruit_block img:nth-child(2) {right: 4%; top: 25%;}
#recruit .recruit_block img:nth-child(3) {left: 4%; top: 50%; transform: none;}
#recruit .recruit_block img:nth-child(4) { left: auto; right: 4%; top: 75%; bottom: auto;}
#recruit .recruit_block img:nth-child(5) { right: auto; left: 4%; bottom: auto; top: 100%}
.btn.center { margin-top: 170px;}
}

/* company_block */
#company {margin-top: 100px;}
#company .title_img {left: 45%;}
#company .title_block{height: 30px;}
.company_block .company_inner { width: 800px; margin: 0 auto; padding: 100px 0 50px 0; }
.company_block .company_inner .title {text-align: center; font-family: 'Noto Sans JP', serif;}
.company_block .company_inner h2 {text-align: center; font-size: 200%; margin-top: 5px; line-height: 2.0em; letter-spacing: 0.2em; font-weight: 400; color: #6d4d38;}
.company_block .company_inner .flex_box { display: flex;  margin-top: 40px; align-items: center;}
.company_block .company_inner .flex_box .left_block {margin-right: 70px;}
.company_block .company_inner .flex_box h3 {font-size: 220%; margin-bottom: 40px; letter-spacing: 0.1em; font-weight: 400;}
.company_block .company_inner .flex_box dl {font-size: 140%; margin-top: 30px; letter-spacing: 0.1em; display: flex;}
.company_block .company_inner .flex_box dl:first-child {margin-top: 0;}
.company_block .company_inner .flex_box dt { width: 30%;}
.company_block .company_inner .flex_box dd { width: 70%; white-space: nowrap;}

@media (max-width: 1000px) {
  .company_block .company_inner .flex_box { flex-direction: column; align-items: center;}
  .company_block .company_inner {width: 100%; padding-top: 30px;}
  .company_block .company_inner .flex_box .left_block { margin-right: 0; width: 65%;}
  .company_block .company_inner .flex_box .left_block iframe { width: 100%;}
  .company_block .company_inner .flex_box .right_block{ margin-top: 50px; width: 65%;}
}
@media (max-width: 1000px) {
  #company .title_img {left: 27%;}
.company_block .company_inner .flex_box { flex-direction: column; margin-top: 20px;}
.company_block .company_inner .flex_box .right_block{ margin-top: 50px; width: auto;}
.company_block .company_inner .flex_box .left_block { margin-right: 0; width: 100%;}
.company_block .company_inner .flex_box .left_block iframe { width: 100%; height: 100vW;}
.company_block .company_inner .flex_box h3 {text-align: center;}
.company_block .company_inner .flex_box dl { flex-direction: column; text-align: center; font-size: 140%; margin-top: 40px;}
.company_block .company_inner .flex_box dl dt {width: 100%; margin-bottom: 10px; border-bottom: 1px solid #ddd; padding-bottom: 10px;}
.company_block .company_inner .flex_box dl dd {width: 100%;}
.company_block .company_inner h2 { font-size: 5vw}
}

.bunner {text-align: center;}
.bunner a{width: 40%; margin: 0 auto; display: block; margin-top: 20px;}
@media (max-width: 1000px) {
  .bunner a {width: 80%;}
}

/* footer */
footer {background-color: #93837a; margin-top: 50px;}
footer p{height: 70px;  text-align: center; line-height: 70px;  font-size: 140%; color: #ffffff; }
@media (max-width: 1000px) {
  footer {margin-top: 40px;}
}




/* 下層ページ */
h2.title_sub {position: relative; padding: 0 65px; text-align: center; color: #9b7651; font-size: 240%; margin-top: 80px; font-weight: 500;}
h2.title_sub:before {position: absolute; top: calc(50% - 1px); left: 0; width: 100%; height: 2px; content: ''; background: #9b7651;}
h2.title_sub span {position: relative; padding: 0 1em; background: #efebe6; white-space: nowrap}
.article_block {width: 920px; margin: 0 auto; margin-top: 40px;}
.article_block .text_block {padding: 0 50px; margin-bottom: 70px;}
.text_block p {font-size: 140%; line-height: 1.6;}
.text_block h3 {font-size: 180%; color: #9b7651; margin-bottom: 10px; font-weight: 500;}
.text_block h3::before { content: ""; display: inline-block; width: 1.4em; margin-right: 0.5em; height: 0; border-top: 1px solid #9b7651; vertical-align: middle;}
.text_block span.top{margin-top: 10px;}
.text_block span{display: block; margin-top: 2px;}

.article_block .img_block {margin-bottom: 30px;}
.article_block .block1 {height: 492px; position: relative;}
.article_block .block1 img {position: absolute;}
.article_block .block1 img:nth-child(1) {left: 0; top: 0; width: 65%;}
.article_block .block1 img:nth-child(2) { right: 0; bottom: 0; width: 45%;}
.article_block .block2 {display: flex; justify-content: space-between;}
.article_block .block2 img{ width: 48.5%;}
.cose_block {width: 920px; margin: 0 auto; padding: 0 50px;}
.cose_block li h4 {font-size: 180%; color: #9b7651;}
.cose_block li p{font-size: 140%; line-height: 1.6; margin-bottom: 30px;}

.profile_block.first {margin-top: 50px;}
.profile_block {width: 920px; margin: 0 auto; padding: 0 50px; display: flex; justify-content: space-between; margin-bottom: 50px; align-items: center;}
.profile_block .profile_img {width: 30%;}
.profile_block .profile_txt {width: 65%;}
.profile_block .profile_txt p:nth-child(1) { font-size: 200%; color: #9b7651; font-weight: 500; margin-bottom: 10px;}
.profile_block .profile_txt p:nth-child(2) { font-size: 160%; color: #9b7651; font-weight: 500; margin-bottom: 10px;}
.profile_block .profile_txt p:nth-child(3) { font-size: 160%;margin-bottom: 20px;}

.recruit_lead {text-align: center; font-size: 160%;margin-top: 30px;}

.salon_block {width: 920px; margin: 0 auto;  display: flex; justify-content: space-evenly; margin-top: 40px;}
.salon_img {width: 40%;}
.profile_txt {width: 53%;}
.profile_txt h3 {font-size: 180%; color: #9b7651; font-weight: 500; margin-top: 30px;}
.profile_txt p {font-size: 140%; margin-top: 20px;}

@media (max-width: 1000px) {
  h2.title_sub { font-size: 180%; padding: 0 50px; margin-bottom: 40px; margin-top: 60px;}
  .article_block { margin-top: 20px;}
  .article_block {width: 100%;}
  .article_block .block1 {height: auto; padding-top: 62%; position: relative;}
  .article_block .text_block {padding: 0 30px; margin-bottom: 40px;}
  .article_block .img_block {margin-bottom: 20px;}
  .cose_block {width: 100%; padding: 0 30px;}
  .cose_block li h4 {font-size: 160%;}
  .profile_block {width: 100%; flex-direction: column; padding: 0 30px;}

  .profile_block .profile_img {width: 70%; margin: 0 auto;}
  .profile_block .profile_txt {width: 100%;}
  .profile_block .profile_txt p:nth-child(1) { font-size: 180%; margin-top: 20px;}
.profile_block .profile_txt p:nth-child(2) { font-size: 140%; }
.profile_block .profile_txt p:nth-child(3) { font-size: 140%;}
.salon_block {width: 100%; flex-direction: column;}
#recruit h2.title_sub span { display: block;}

h2.title_sub.intoroduce {margin-top: 200px;}
.salon_img {width: 100%;}
.profile_txt {width: 100%; }
.profile_txt h3 {font-size: 160%; margin-top: 20px;}
.profile_txt p {font-size: 140%; margin-top: 10px; word-wrap: break-word;}
h2.ffyy.title_sub span {padding: 0em; display: block; }
}



#cose::before {
  display: block;
  height: 1rem;
  margin-top: -1rem;
  content: "";
}
#introduce::before {
  display: block;
  height: 1rem;
  margin-top: -1rem;
  content: "";
}
#menu_s::before {
  display: block;
  height: 1rem;
  margin-top: -1rem;
  content: "";
}
#plofile::before {
  display: block;
  height: 7rem;
  margin-top: -7rem;
  content: "";
}

.sns_block {display: flex;justify-content: center; width: 100%; padding-bottom: 20px;}
.sns_block a{ display: block; width: 40px; margin: 0 10px;}