@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: none;
font-style: normal;
text-align: left;
zoom: 1;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
table {
border-collapse: collapse;
font-family: inherit;
}
h1,h2,h3,h4,h5 {
font-size: 100%;
font-weight: normal;
line-height: 1;
}
input,textarea,select {
font-family: inherit;
font-size: 16px;
}
input[type="button"],input[type="text"],input[type="submit"] {
 -webkit-appearance: none;
 border-radius: 0;
}
textarea {
resize: none;
-webkit-appearance: none;
border-radius: 0;
}
th,td {
border-collapse: collapse;
}
ul,ol {
list-style-type: none;
}
img {
vertical-align: text-bottom;
vertical-align: -webkit-baseline-middle;
max-width: 100%;
height: auto;
width /***/:auto;
}


body{
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  }
@font-face {
  font-family: 'myfont';
  src: url('../LogoTypeGothic/logotypegothic.woff') format('woff');
}  
h3{
  font-family: 'myfont';
}
/* ヘッダーここから */
.header{
  background: #dae9db;
  position:fixed;
  width:100%;
  z-index:10000;
}
@media(max-width:900px){
  .header{
    display: flex;
    justify-content: space-between;
  }
}
.inner{
  max-width: 1170px;
  margin:0 auto;
}
@media(max-width:900px){
  .inner{
    margin:0;
  }
}
.header .inner .header_top{
  display:flex;
  justify-content: space-between; 
}
@media(max-width:575px){
  .header .inner .header_top{
    height:100px;
    align-items: center;
    width:90%;
}
}
.header .inner .header_top .address{
  display:flex;
  align-items: center;
}
.header .inner .header_top .address a{
  text-decoration: none;
  color:black;
}
.header .inner .header_top .address a:hover{
  color:white;
}
.header .inner .header_top .address p{
  display:flex;
  align-items: center;
  margin-right: 40px;
}
@media(max-width:1199px){
  .header .inner .header_top .address {
    display:none;
  }
}
.header .inner .header_top .address .phone{
  vertical-align: middle;
  padding-right:5px;
}
.header .inner .header_top .contact .contact_btn{
  display: flex;
  align-items: center;
}
@media(max-width:900px){
  .header .inner .header_top .contact .contact_btn{
    display:none;
  }
}
.header .inner .header_top .contact .contact_btn .reserve{
  margin-right: 40px;
}
.header .inner .header_top .logo{
  margin:32px 0;
}
@media(max-width:1199px){
  .header .inner .header_top .logo{
    padding-left:15px;
  }
}
.header .inner .header_top .contact{
  display: flex;
  align-items: center;
}
@media(max-width:1199px){
  .header .inner .header_top .contact{
    padding-right:15px;
  }
}
.header .inner .header_top .contact .contact_btn .inquiry a{
  font-size:16px;
  font-weight: bold;
  background:#58473e;
  padding:15px 30px;
  border-radius: 3px;
  color:#fff;
  text-decoration: none;
}
.header .inner .header_top .contact .contact_btn .inquiry a:hover{
  background:#937667;
}
@media(max-width:1199px){
  .header .inner .header_top .contact .contact_btn .inquiry a{
   padding:20px;
}
}
.header .inner .header_top .contact .contact_btn .reserve a{
  font-size:16px;
  font-weight: bold;
  background:#58473e;
  padding:15px 53px;
  border-radius: 3px;
  color:#fff;
  text-decoration: none;
}
.header .inner .header_top .contact .contact_btn .reserve a:hover{
  background:#937667;
}
@media(max-width:1199px){
  .header .inner .header_top .contact .contact_btn .reserve a{
   padding:20px;
}
}
.header .js-offcanvas-btn{
  display: none;
}
@media (max-width: 900px) {
  
  /* ハンバーガーメニューの余白や色を調整 */
.header .js-offcanvas-btn{
      display: block;
      border:none;
      background: none;
      padding-right: 15px;
      padding-left: 15px;
  }


/* 三本線の真ん中の線の色・長さを調整 */
.header .js-offcanvas-btn .hiraku-open-btn-line{
  background-color:#383838;
  width: 25px;
}
/* ハンバーガーメニュータップ時の三本線の真ん中を透明に */
.header .js-offcanvas-btn[aria-expanded="true"] .hiraku-open-btn-line{
  background-color: transparent;
}
/* 三本線の色を調整 */
.header .js-offcanvas-btn .hiraku-open-btn-line:before,
.header .js-offcanvas-btn .hiraku-open-btn-line:after{
  background-color:#383838;
}
/* 三本線の上部位置を調整 */
.header .js-offcanvas-btn .hiraku-open-btn-line:before{
  top:-8px;
}
/* 三本線の下部位置を調整 */
.header .js-offcanvas-btn .hiraku-open-btn-line:after{
  bottom:-8px;
}
/* ハンバーガーメニュータップ時の×印の幅を調整 */
.header .js-offcanvas-btn[aria-expanded="true"] .hiraku-open-btn-line:before,
.header .js-offcanvas-btn[aria-expanded="true"] .hiraku-open-btn-line:after{
  width:25px;
}
/* ハンバーガーメニュータップ時の×印の位置を調整 */
.header .js-offcanvas-btn[aria-expanded="true"] .hiraku-open-btn-line:before{
  transform: translate(0px, 8px) rotate(45deg);
}
.header .js-offcanvas-btn[aria-expanded="true"] .hiraku-open-btn-line:after{
  transform: translate(0px, -8px) rotate(-45deg);
}
aside.js-offcanvas ul.sp-navigation{
  overflow-y: auto;
  max-height: 100vh;
}
aside.js-offcanvas ul.sp-navigation li{
  border-bottom:1px solid #ddd;
}
aside.js-offcanvas ul.sp-navigation li .phone{
  padding-right:10px;
}
aside.js-offcanvas ul.sp-navigation li a{
  display: block;
  padding:15px 30px 15px 15px;
  color:#333;
  text-decoration: none;
  line-height: 1.5;
  position: relative;
}
aside.js-offcanvas ul.sp-navigation li a:after{
  content:"";
  position: absolute;
  margin:auto;
  top:0;
  bottom:0;
  right:15px;
  width: 10px;
  height:10px;
  border-right: 2px solid #666;
  border-bottom: 2px solid #666;
  transform: rotate(-45deg);
}
}

/* ヘッダーここまで */
/* メニューボタンここから */
.nav{
  background: #d1e1d2;
}
.nav .nav_btn{
  display:flex;
  max-width: 1170px;
  margin: 0 auto;
  justify-content: space-between;
}
.nav .nav_btn li a{
  text-decoration: none;
  color:#000;
  height:56px;
  line-height: 56px;
  display:flex;
  justify-content: center;
}
.nav .nav_btn li a:hover{
  background:#b5c7b6;
  color:#fff;
}
 .nav .nav_btn li{
  position: relative;
  width:calc(100%/8);
}
@media(max-width:900px){
  .header .nav .nav_btn li{
    display:none;
  }
}
.nav_btn li::before,
.nav_btn li:last-child::after{
  position: absolute;
  content:"";
  background: linear-gradient(to right,#b5c7b6 0%,#b5c7b6 50%,white 51%,white 100%);
  width:2px;
  height: 40%;
  top:30%;
}
.nav_btn li::before{
  left:0;
}
.nav_btn li:last-child::after{
  right:0;
}

/* メニューボタンここまで */
/* KVここから */
.kv{
  background:#dae9db;
  padding-top: 200px;
}
@media(max-width:900px){
  .kv{
    padding-top:100px;
  }
}

.kv .inner{
  max-width: 1100px;
  margin:0 auto;
  position:relative;
}
.kv .inner .kv_content .salon_img{
  height: 600px;
  margin-top: 15px;
  object-fit: cover;
  width:100%;
}
@media(max-width:1199px){
  .kv .inner .kv_content .salon_img{
    width:100%;
    object-fit: cover;
   }
}
@media(max-width:900px){
  .kv .inner .kv_content .salon_img{
    margin-top:0;
  }
}
@media(max-width:767px){
  .kv .inner .kv_content .salon_img{
    width:100%;
    object-fit: cover;
    height: 400px;
}
}
@media(max-width:575px){
  .kv .inner .kv_content .salon_img{
    width:100%;
    object-fit: cover;
    object-position: center;
    height:320px;
  }
}
.copy_content{
    position: absolute;
    top: 51%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    opacity: 90%;
    padding: 60px 90px;
    border-radius: 30px;
    background-image: url("../images/kv_leaf1.png"),url("../images/kv_leaf2.png");
    background-repeat: no-repeat;
    background-position: top 10px left 10px, right 10px bottom 10px;
    max-width: 374px;
    width:100%;
}
@media(max-width:767px){
  .copy_content{
    width:80%;
}
}
@media(max-width:575px){
  .copy_content{
   background-image: none;
   padding: 5%;
   width: 100%;
   box-sizing: border-box;
  }
}
.kv .inner .copy_content h2{
  font-size: 20px;
}
.kv .inner .copy_content h2 p{
  font-size: 26px;
  margin-top: 40px;
  text-align: center;
}
@media(max-width:575px){
  .kv .inner .copy_content h2,
  .kv .inner .copy_content h2 p{
  font-size: clamp(14px,1.474vw,20px);
  text-align: center;
  margin:10px;
}
}
/* KVここまで */
/* 初めての方へ */

.message_wrapper{
  background: #dae9db;
  background-image: url("../images/flame-left.png"),url("../images/flame-right.png");
  background-repeat: no-repeat;
  background-position: top 200px left 60px, right 60px bottom 40px ;
  background-size:22%;
}
#message{
  padding-top: 150px;
  margin-top:-150px;
}
@media(max-width:900px){
  #message{
    padding-top: 50px;
    margin-top:-50px;
}
}
.message_wrapper .inner .message{
  padding:100px 20px;
  text-align: center;
  margin:0 auto;
  max-width: 802px;
}
@media(max-width:991px){
  .message_wrapper .inner .message{
    max-width:723px;
}
}
@media(max-width:767px){
  .message_wrapper .inner .message{
    max-width: 560px;
    padding: 80px 20px;
  }
}
@media(max-width:575px){
  .message_wrapper .inner .message{
    padding: 40px 20px;
  }
}
.message_wrapper .inner .message .title_first{
    font-size: clamp(20px,3vw,32px);
    margin: 0 0 40px 0;
    text-align: center;
}
.message_wrapper .inner .message p{
  line-height: 2.5;
  margin-top: -11px;
  margin-bottom: -11px;
}
@media(max-width:1199px){
  .message_wrapper{
    background-image: none;
  }
  .message_wrapper .inner .message p{
    line-height: 2;
    }
}

@media(max-width:575px){
  .message_wrapper .inner .message p{
    line-height: 1.5;
    }
}
 /* 初めての方へここまで  */
 /* よもぎ蒸しについて ~ CS60とは ここから */
.about{
  padding:50px 0;
}

@media(max-width:991px){
  .about{
    padding: 0;
}
}    
.about_wrapper{
  max-width: 1090px;
  margin: 0 auto;
  padding:60px ;  
}
@media(max-width:575px){
.about_wrapper{
  padding:20px;
}
}
.about_wrapper .box{
  display:flex;
  justify-content: space-between;
}
@media(max-width:767px){
  .about_wrapper .box{
    display:block
  }  
}
.about_wrapper .box h3{
  font-size: clamp(20px,3vw,32px);
  margin:0 0 40px 0;
}
.about_wrapper .box p{
  line-height: 2.5;
}
@media(max-width:575px){
  .about_wrapper .box p{
  line-height: 1.5;
}
}
.more .more_btn{
    text-decoration: none;
    background: #58473e;
    color: #fff;
    padding: 20px 70px;
    border-radius: 8px;
}
.more .more_btn:hover{
  background:#937667;
}
.about_wrapper .more {
  margin-top: 40px;
}
@media(max-width:1199px){
  .about_wrapper .more {
    margin-top: 30px;
  }
}
@media(max-width:991px){
  .about_wrapper .more {
    text-align: center;
    margin-bottom:30px;
  }
}
.about_wrapper .box .img .about_img{
  box-shadow: 30px 30px 0px rgb(218,233,219);
}
@media(max-width:1199px){
  .about_wrapper .box .img .about_img{
    width:100%;
    margin-top: 50px;
    margin-left: 20px;
  }
}
@media(max-width:767px){
  .about_wrapper .box .img .about_img{
    margin:30px 0 ;
    box-shadow: none;
  }
}
.about_wrapper .box .text_box .about1::before{
  content: url("../images/title-icon1.png");
  position: relative;
  top: 5px;
  right: 30px;
}
.about_wrapper .box .text_box .about2::before{
  content: url("../images/title-icon2.png");
  position: relative;
  top: 8px;
  right: 20px;
}
.about_wrapper .box .text_box .about3::before{
  content: url("../images/title-icon3.png");
  position: relative;
  top: 5px;
  right: 30px;
}
.about_wrapper .box .text_box h3{
  padding-left:25px;
}

.about_wrapper .box .text_box{
  background: url("../images/yallow_line.png");
  background-repeat: no-repeat;
  background-position:0 55px;
  max-width:620px;
  width:100%;
}

.about_wrapper .about_wrapper_reverse .box{
  flex-flow: row-reverse;
}
.about_wrapper .about_wrapper_reverse .box .text_box{
  margin-left:60px;
}
@media(max-width:767px){
  .about_wrapper .about_wrapper_reverse .box .text_box{
    margin-left:0;
  }
}
@media(max-width:991px){
  .about_wrapper .about_wrapper_reverse .more{
    text-align: center;
    margin: 30px 10px;
  }
}
@media(max-width:991px){
  .about_wrapper .box .text_box p{
    line-height: 2;
  }
}
@media(max-width:575px){
  .about_wrapper .box .text_box p{
    line-height: 1.5;
  }
}
/* よもぎ蒸しについて ~ CS60とは ここまで */
/* リーディングについてここから */
.reading_wrapper{
  background: #f1e7c8;
  padding: 100px 20px;
  margin: 0 auto;
}
@media(max-width:575px){
  .reading_wrapper {
    padding: 50px 20px;
  }
}
.reading_wrapper .reading_box{
  max-width: 705px;
  margin: 0 auto;
  padding-bottom:50px;
}
@media(max-width:575px){
  .reading_wrapper .reading_box{
   padding-bottom:20px;
}
}
.reading_wrapper .reading_box .sub_title{
  font-family: 'myfont';
}
.reading_wrapper .reading_box .title_reading{
  text-align: center;
  font-size: clamp(20px,3vw,32px);
}
.reading_wrapper .reading_box .sub_title{
  text-align: center;
  font-size: clamp(18px,3vw,24px);
  margin-top: 30px;
}
.reading_wrapper .reading_box .reading_text{
  text-align: left;
    font-size: 16px;
    line-height: 2.8;
    margin-top: 50px;
}
@media(max-width:767px){
  .reading_wrapper .reading_box .reading_text{
    max-width: 560px;
    padding: 30px 0;
    margin:0 auto;
    line-height:2.3;
  }
}
@media(max-width:575px){
  .reading_wrapper .reading_box .reading_text{
    line-height: 1.5;
  }
}
.reading_wrapper .more{
  text-align: center;
}
.reading_wrapper{
  background-image: url("../images/left-moon.png"),
                    url("../images/monn_shine.png"),
                    url("../images/right_shootingstar.png"),
                    url("../images/title_light.png"),
                    url("../images/orange_shootingstar.png"),
                    url("../images/right-shine.png"),
                    url("../images/left_cloud.png"),
                    url("../images/right_cloud.png");
  background-repeat: no-repeat;   
  background-position:130px 60px,
                      260px 145px,
                      1104px 71px,
                      center 40px,
                      1141px 218px,
                      1190px 500px,
                      85px 575px,
                      1042px 575px;

}
@media(max-width:767px){
  .reading_wrapper{
   background-image:none; 
   background-image:url("../images/title_light.png");
   background-position:center 40px;
}
}
@media(max-width:575px){
  .reading_wrapper{
    background-position: center 10px;
  }
}
/* リーディングについてここまで */
/* infoここから */
.info_section{
  background: #dae9db;
  padding:100px 0;
}
@media(max-width:575px){
  .info_section{
   padding:35px 0 0 0;
}
}
.info{
    display: flex;
    max-width: 1170px;
    margin: 0 auto;
    justify-content: space-between;
}
@media(max-width:767px){
  .info{
    display: block;
  }
}
.info_container{
    padding: 20px;
    max-width:333px;
}
@media(max-width:767px){
  .info_container{
    margin:0 auto;
    background: #fff;
  }
}
.info_box h3{
    font-size:clamp(20px,3vw,32px);
    padding: 45px 0 25px 0;
    text-align: center;
}

.info_wrapper{
  background: #fff;
  padding-bottom: 35px;
}
@media(max-width:767px){
  .info_wrapper{
    background: #dae9db;
  }
}
.info_section .info .info_wrapper .info_container .info_box .more{
  padding-top: 35px;
  text-align: center;
}
@media(max-width:767px){
  .info_section .info .info_wrapper .info_container .info_box .more{
   padding-bottom: 30px;
    }
  }

@media(max-width:991px){
  .info_section .info .info_wrapper .info_container .info_box .more .more_btn{
    padding:20px 40px;
  }
}

/* infoここまで */
/* お知らせ・ブログここから */
.blog_wrapper {
  max-width: 1150px;
  margin: 0 auto;
  padding: 100px 20px
}
@media(max-width:575px){
  .blog_wrapper {
    padding:50px 20px;
}
}
.blog_wrapper .blog{
  background: url("../images/yallow_line.png");
  background-repeat: no-repeat;
  background-position:center 40px;
  }
.blog_wrapper .blog .title_blog{
  font-size: clamp(20px,3vw,32px);
  text-align: center;
}
.blog_wrapper .more{
  text-align: center;
}
.blog_wrapper .blog table{
  margin:30px auto;
  max-width:900px;
  width:100%;
}
.blog_wrapper .blog table tr{
  border-bottom: dotted 1px #bbb5b3;
  padding:20px 0;
 
}
.blog_wrapper .blog table tr .top-date{
  padding-right:30px;
  white-space: nowrap;
  width:20%;
}
.blog_wrapper .blog table tr a{
  text-decoration: none;
  color:#000
}
.blog_wrapper .blog table tr a:hover{
  color:#58473e;
}
@media(max-width:575px){
  .blog_wrapper .blog table tr,.blog_wrapper .blog table tr th,
  .blog_wrapper .blog table tr,.blog_wrapper .blog table tr td{
   display:block;
}
}
.blog_wrapper .blog .more{
  padding-top: 35px;
}
@media(max-width:575px){
  .blog_wrapper .blog .more{
    padding-top: 25px;
}
}
.blog_wrapper .blog table tr,.blog_wrapper .blog table tr th{
  word-break: break-all;
}
.blog_wrapper .blog table tbody{
  display:flex;
  flex-direction: column;
}
/* お知らせ・ブログここまで */
/* アクセスここから */
.access{
  background: #dae9db;
  margin:0 auto;
  padding:100px 20px;
}
@media(max-width:575px){
  .access{
    padding:30px 20px;
  }
}
.access .access_wrapper{
  background: url("../images/yallow_line.png");
  background-repeat: no-repeat;
  background-position: center 40px;
}
.access .access_wrapper .title_access{
  font-size: clamp(20px,3vw,32px);
  text-align: center;
  padding-bottom: 40px;
}
.access .access_wrapper .map{
  text-align: center;
  padding-top: 56.25%;
  position: relative;
  overflow: hidden;
  width:100%;
  max-width: 1150px;
  margin: 0 auto;
}
.access .access_wrapper .map iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* アクセスここまで */
/* フッターここから */
.footer .footer_wrapper .nav{
  background: #fff;
}
@media(max-width:900px){
  .footer .footer_wrapper .nav .nav_btn{
    display:block;
  }
}
@media(max-width:900px){
  .footer .footer_wrapper .nav .nav_btn li{
    width:100%;
    border-bottom: 1px solid #dae9db;
  }
   .footer .footer_wrapper .nav .nav_btn li:first-child{
    border-top:1px solid #dae9db;
   }
}

@media(max-width:900px){
  .footer .footer_wrapper .nav .nav_btn li::before,
  .footer .footer_wrapper .nav .nav_btn li:last-child::after{
    display:none;
  }
}
.footer .footer_wrapper .footer_logo{
  display:flex;
  justify-content: center;
  padding: 55px;
}
.footer .footer_wrapper .footer_logo p{
  text-align: center;
}
@media(max-width:767px){
  .footer .footer_wrapper .footer_logo{
    display:block;
  }
  .footer .footer_wrapper .footer_logo h1,
  .footer .footer_wrapper .footer_logo .footer_line{
    text-align: center;
  }
}
@media(max-width:575px){
  .footer .footer_wrapper .footer_logo{
    padding:30px 0;
  }
}
.footer .footer_wrapper .footer_logo .address{
  padding:6px 30px;
}
.footer .footer_wrapper .footer_logo .address a{
  text-decoration: none;
  color:#000;
}
.footer .footer_wrapper .footer_logo .address a:hover{
  color:#58473e;
}
@media(max-width:767px){
  .footer .footer_wrapper .footer_logo .address {
    text-align: center;
  }
}
/* フッターここまで */
/* コピーライトここから */
.copyright{
  background: #dae9db;
  text-align: center;
  padding:20px;
}
/* コピーライトここまで */
/* トップページここまで */


/* よもぎ蒸しとは（タイトル）ここから */
.title_wrapper{
  padding:200px 0 50px 0;
}
@media(max-width:900px){
  .title_wrapper{
    padding:135px 0 30px 0;
  }
}
@media(max-width:575px){
  .title_wrapper{
    padding:100px 0 30px 0;
  }
}
.title_content{
  position:relative;
  z-index:-1;
}
.title_yomogimushi{
  font-size: clamp(26px,3vw,32px);
  text-align: center;
  padding: 84px 0;
  position: relative;
  text-align: center;
}
.hr{
  border-width:1px;
  border-style: solid;
  border-color:#b5c7bb;
}
.circle{
  background-color: #f2d779;
  border-radius: 50%;
  height:116px;
  width:116px;
  text-align: center;
  line-height: 116px;
  position:absolute;
  top: 50%;
  left: 50%;
  box-shadow: 8px 1px #e2e4e2e4;
  transform: translate(-50%,-50%);
  -webkit-transform: translateY(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}
/* よもぎ蒸しとは（タイトル）ここまで */
/* ぱんくずリストここから */
.bread{
  max-width: 1150px;
  margin: 0 auto;
  padding-left: 10px;
}
.bread ul{
  display: flex;
  list-style: none;
}
.bread li a{
  padding:5px;
  color:#000000;
  font-size: 15px;
  text-decoration: none;
}
.bread li a:hover{
  background: #EEEEEE;
}
.bread li:after{
  content: '\003e';
  margin-left: 10px;
  margin-right: 10px;
  color:#000000
}
.bread li:last-child:after{
  content:"";
}
/* ぱんくずリストここまで */
/* よもぎ蒸しとはここから */
.instructions .instruction_box .text_box1 h3{
  font-size: 24px;
  padding: 20px 0;
  border-top: 4px dotted #cdd3cd;
  border-bottom: 4px dotted #cdd3cd;
}
.instructions .instruction_box .text_box2 h3{
  font-size: 24px;
  padding: 20px 0;
  border-top: 4px dotted #cdd3cd;
  border-bottom: 4px dotted #cdd3cd;
}

.instructions .instruction_box{
  display:flex;
  justify-content: space-evenly;
  padding:60px;
}
@media(max-width:767px){
  .instructions .instruction_box{
    flex-direction: column-reverse;
    padding:20px 20px 0 20px;
  }
}
.instructions .instruction_box .text_box1,
.instructions .instruction_box .text_box2{
  padding-top:30px;
  width:40%;
}
@media(max-width:991px){
  .instructions .instruction_box .text_box1,
  .instructions .instruction_box .text_box2{
  padding-top:30px;
  width:55%;
}
}
@media(max-width:767px){
  .instructions .instruction_box .text_box1,
  .instructions .instruction_box .text_box2{
    width: 100%;
  }
}
.instructions .instruction_box .text_box1 p,
.instructions .instruction_box .text_box2 p{
  padding: 30px 0;
  line-height: 2.5;
}
@media(max-width:1199px){
  .instructions .instruction_box .text_box1 p,
  .instructions .instruction_box .text_box2 p{
    line-height: 2;
    padding:10px 0;
  }
}
@media(max-width:991px){
  .instructions .instruction_box .text_box1 p,
  .instructions .instruction_box .text_box2 p{
    line-height: 1.8;
  }
}
@media(max-width:575px){
  .instructions .instruction_box .text_box1 p,
  .instructions .instruction_box .text_box2 p{
    line-height: 1.5;
  }
}

.instructions .instruction_box .text_box2{
  padding-right:45px;
}
@media(max-width:991px){
  .instructions .instruction_box .text_box2{
   padding-right:0;
}
}
.instructions .instruction_box .img_box{
  padding:50px;
}
@media(max-width:767px){
  .instructions .instruction_box .img_box1,
  .instructions .instruction_box .img_box2{
    margin: 0 auto;
    padding-top:20px;
  }
}
@media(max-width:991px){
  .instructions .instruction_box .img_box1 .yomogi_illust,
  .instructions .instruction_box .img_box2 .herb_illust{
    height:350px;
    object-fit: cover;
    object-position: center;
    
  }
}


/* よもぎ蒸しとはここまで */

/* メニュー */
/* キャンペーンメニューここから */
/* .campaign .title_campaign{
  font-size: clamp(24px,3vw,30px);
  text-align: center;
  padding:100px 0 60px 0;
  background-image: url("../images/campaign.png");
  background-repeat: no-repeat;
  background-position: top 50px center;
}
@media(max-width:575px){
  .campaign .title_campaign{
    padding:100px 0 40px 0;
}
}
.campaign_menu{
  max-width:1050px;
  margin: 0 auto;
}
.campaign_menu .campaign_wrapper{
  background: #f8f8f8;
  padding: 50px 0;
}

.campaign_menu .campaign_wrapper .menulist .menu1 .menu_price::after{
  position: absolute;
  border-top:3px dotted;
  content:"";
  width:90%;
  color:#c5cbc6;;
  top:45%;
}
 @media(max-width:575px){
  .campaign_menu .campaign_wrapper .menulist .menu1 .menu_price::after{
    display: none;
  }
} 
.campaign_menu .campaign_wrapper .menulist .menu1 .menu_price .menuname_time{
  display: flex;
  align-items: center;
  background: #f8f8f8;
  z-index: 1;
  max-width:360px;
  width:100%;
  justify-content: space-between;
}
@media(max-width:767px){
  .campaign_menu .campaign_wrapper .menulist .menu1 .menu_price .menuname_time{
    max-width: 250px;
  }
}
.campaign_menu .campaign_wrapper .menulist .menu1 .menu_price .price{
  font-size: clamp(16px,3vw,24px);
  background: #f8f8f8;
  z-index: 1;
  padding: 0 8px;
}
.campaign_menu .campaign_wrapper .menulist .menu1 .menu_price .price span{
  background: #f8f8f8;
  padding-left:5px;
}
 @media(max-width:575px){
  .campaign_menu .campaign_wrapper .menulist .menu1 .menu_price .price {
   position:relative;
   display:flex;
   background:#f8f8f8;
   z-index: 1;
   justify-content: end;
   letter-spacing: 1px;
  }

  .campaign_menu .campaign_wrapper .menulist .menu1 .menu_price .price::before{
    position: absolute;
    border-top:3px dotted;
    content:"";
    width:50%;
    color:#c5cbc6;;
    top:45%;
    left:30%;
    z-index:-999;
  }
}  */
/* キャンペーンメニューここまで */
/* サロンメニューここから */
.salon{
  max-width: 1050px;
  margin: 0 auto;
  padding: 50px 0;
}
@media(max-width:575px){
  .salon{
  padding:30px 0 0 0;
}
}
.salon .salon_wrapper{
  max-width: 1050px;
  background: #fdf7e2;
  margin: 0 auto;
  padding-left:1%;
}
.salon .salon_wrapper .title_salonmenu{
  font-size: clamp(24px,3vw,30px);
  text-align: center;
  background-image: url("../images/saolnmenu_up.png");
  background-repeat: no-repeat;
  background-position: center 38%;
  padding:140px 0 50px 0;
}
@media(max-width:575px){
  .salon .salon_wrapper .title_salonmenu{
    padding:60px 0 20px 0;
    background-size: 30%;
  }
}
/* サロンメニュー よもぎ蒸しここから */
.menulist .menu1{
  margin-top:1em;
  padding-left:40px;
}
.menulist .menu1 .menu_price{
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
@media(max-width:575px){
  .menulist .menu1 .menu_price{
    display:block;
 }
}
.salon .salon_wrapper .menulist .menu1 .menu_price::after{
  position: absolute;
  border-top:3px dotted;
  content:"";
  width:90%;
  color:#c5cbc6;
  top:45%;
}
@media(max-width:575px){
  .salon .salon_wrapper .menulist .menu1 .menu_price::after{
    display:none;
  }
}
.salon .salon_wrapper .menulist .menu1 .menu_price .menuname_time{
  display: flex;
  align-items: center;
  background: #fdf7e2;
  z-index: 1;
  max-width:360px;
  width:100%;
  justify-content: space-between;
}
.menulist .menu1 .menu_price .menuname_time .time{
  color:gray;
}
.menulist .menu1 .menuname{ 
  font-size: clamp(16px,3vw,24px);
  display: flex;
  align-items: center;
  position:relative;
}
.menulist .menu1 .menuname .no1{
  color:#f2d779;;
}

.menulist .menu1 .menuname .no1{
  position: relative;
  display: inline-block;
  margin: 1em 0 1em 30px;
  padding: 7px 10px;
  min-width: 100px;
  max-width: 100%;
  font-size: 16px;
  border: solid 3px;
  box-sizing: border-box;
  font-weight: bold;
}

.menulist .menu1 .menuname .no1:before{
  content: "";
  position: absolute;
  top: 50%;
  left: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-right: 12px solid #fdf7e2;
  z-index: 2;
} 
.menulist .menu1 .menuname .no1::after{
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-right: 14px solid;
  z-index: 1;
}


.menulist .menu1 .menuname::before{
  position:absolute;
  content: "";
  left:-35px;
  width: 20px;
  height: 20px;
  background: #dae9db;
  transform: rotate(45deg)
} 
.menulist .menu1 .menuname_time .cap{
  font-size: clamp(13px,3vw,17px);
}
.menulist .menu1 .menuname_time .cap_1{
  font-size: clamp(11px,3vw,16px);
}
.menulist{
  max-width: 810px;
  margin: 0 auto;
} 
.salon .salon_wrapper .menulist .menu1 .menu_price .price{
  font-size: clamp(16px,3vw,24px);
  background: #fdf7e2;
  z-index: 1;
  padding: 0 8px;
}
.salon .salon_wrapper .menulist .menu1 .menu_price .price span{
  background:#fdf7e2;
  padding-left:5px;
}
@media(max-width:575px){
  .salon .salon_wrapper .menulist .menu1 .menu_price .price{
    text-align: end;
    position:relative;
    letter-spacing: 1px;
  }
  .salon .salon_wrapper .menulist .menu1 .menu_price .price::before{
    position: absolute;
    border-top:3px dotted;
    content:"";
    width:50%;
    color:#c5cbc6;
    top:45%;
    left:30%;
    z-index: -999;
  }
}
.menulist .menu1 .menu_price .price .down{
  font-weight: bold;
}
.menulist .menu_set{
  padding: 20px 10px;
  font-size: clamp(13px,3vw,18px);
}
.menulist .menu_set span{
  border-bottom: solid;
  border-color: #f2d779;
}
.menulist .supplement{
  text-align: center;
  margin: 0 auto;
  max-width: 500px;
  padding-left: 40px;
}

.menulist .supplement .reading{
  text-align: left;
  display: inline-block;
  position:relative;
  font-size: clamp(13px,3vw,24px);
  padding-bottom: 20%;
 }
.menulist .supplement .reading::before{
  position: absolute;
  content: url(../images/moon.png);
  left:-40px;
}
.salon .salon_wrapper{
  background-image: url("../images/salonmenu_down.png");
  background-repeat: no-repeat;
  background-position: 50% 96%;
  padding-bottom:30px;
}  
@media(max-width:575px){
  .salon .salon_wrapper{
    background-size:30%;
    padding-bottom:0;
    background-position: 50% 98%;
 }
}
.salon .salon_wrapper .menulist .value .menu1 .menu_price .menuname_time{
  max-width:340px;
}
.price span{
  background:#fdf7e2;
}
.supplement .reading .reading_set{
  font-size: clamp(14px,3vw,18px);
}
.supplement .reading .reading_special{
  border-bottom: solid;
  border-color: #f2d779;
  background-color:  #f2d779;
  font-size: clamp(14px,3vw,18px);
}
/* サロンメニュー ここまで */

/* よくある質問 ここから*/
.faq{
  padding: 30px 0;
  max-width: 1050px;
  margin: 0 auto;
}
.faq dl{
  padding:10px;
}
.faq dl dt{
  text-align: left;
  font-size: 20px;
  background: #f8f8f8;
  padding: 2%;
  color:#58473e;
}
@media(max-width:575px){
  .faq dl dt{
  font-size: clamp(16px,1vw,20px);
}
}
.faq dl dd{
  padding: 3% 2% 7% 2%;
}
/* よくある質問ここまで */

/* 施術の流れここから */
.flow{
  padding: 30px 0;
  max-width: 1050px;
  margin: 0 auto;
}
.flow .flow_wrapper{
  padding:50px 0;
}
@media(max-width:575px){
  .flow .flow_wrapper{
    padding:20px 0;
  }
}
.flow .flow_wrapper .flowbox{
  padding:20px 10px;
}
.flow .flow_wrapper .flowbox p{
  padding: 2rem;
}
@media(max-width:575px){
  .flow .flow_wrapper .flowbox p{
    padding:1rem;
  }
}
.flow .flow_wrapper .flowbox .flowbox_top{
  font-size: 20px;
  padding:1rem 2rem;
  border-left:5px solid #58473e;
  background: #f8f8f8;
}
.flow .flow_wrapper .flowbox .triangle{
  width:0;
  height:0;
  border-left: 30px solid transparent;
  border-right:30px solid transparent;
  border-top:30px solid #58473e;
  margin:0 auto;
}
/* 施術の流れここまで */

/* サロン紹介 */
.introduction{
  padding:50px 0 0 0;
  max-width: 1050px;
  margin: 0 auto;
  text-align: center;
  background-image: url("../images/saolnmenu_up.png");
  background-repeat: no-repeat;
  background-position: center 6%;
}
@media(max-width:767px){
  .introduction{
    background-position: center 5%;
  }
}
@media(max-width:575px){
  .introduction{
    background-position: center 3%;
    background-size: 30%;
    padding:50px 0 0 0;
}
}
 .introduction .introduction_box{
  display:flex;
  padding-top:3%;
  display: flex;
  justify-content: space-around;
  width: 80%;
  margin: 0 auto;
}

@media(max-width:767px){
  .introduction .introduction_box{
    display:block;
    width:100%;
  }
}
.introduction .title_introduction{
  font-size: clamp(20px,3vw,22px);
  padding: 10% 2% 0 2%;
  text-align: center;
}
.introduction .introduction_box .orner_img{
  width:250px;
}
@media(max-width:575px){
  .introduction .introduction_box .orner_img{
    width:40%;
}
}
@media(max-width:767px){
  .introduction .introduction_box .orner{
    text-align: center;
  }
}
.introduction .introduction_box .text_top{
  width:55%;
  padding-top:4%;
}
@media(max-width:991px){
  .introduction .introduction_box .text_top{
    padding:0;
  }
}
@media(max-width:767px){
  .introduction .introduction_box .text_top{
  padding:20px;
  width:initial;
}
}
.introduction .orner_name{
  text-align: end;
  padding: 3%;
  font-size: 20px;
  width: 80%;
} 
.introduction .text_middle{
  display: flex;
  justify-content: center;
  padding:3%;
  display: flex;
  background: #f8f8f8;
  width: 60%;
  margin: 3% auto;
}
@media(max-width:767px){
  .introduction .text_middle{
    width:90%;
  }
}
@media(max-width:575px){
  .introduction .text_middle{
    display:block;
    padding-left:20%;
    width:initial;
  }
}
.introduction .text_middle .leftbox{
  padding-right:10%;
}
@media(max-width:575px){
  .introduction .text_middle .leftbox{
    padding-right:0;
}
}
.introduction .text_middle .leftbox,.introduction .text_middle .rightbox{
  list-style-type: initial;
}
.introduction .selfbox .title_self{
  font-size: 20px;
  padding: 1%;
  font-size: 20px;
  border-radius: 7px;
  background: -webkit-repeating-linear-gradient(-45deg, #dae9db, #dae9db 4px,#dae9db 3px, #fff 8px);
  position:relative;
}
.introduction .selfbox .title_self:after{
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #dae9db;
  width: 0;
  height: 0;
}

.introduction .selfbox .text_self{
  padding:2% 1%;
}
@media(max-width:575px){
  .introduction .selfbox .text_self{
    padding:5% 1%;
}
}
.introduction .text_bottom{
  padding:20px;
  margin: 0 auto;
  width:80%;
}
@media(max-width:767px){
  .introduction .text_bottom{
  width:initial;
}
}
.introduction .selfbox {
  padding:3%;
}
/* サロン紹介ここまで */

/* アクセスここから */
.access_p .access_wrapper{
  max-width:1150px;
  margin:0 auto;
  padding:100px;
  display: flex;
  justify-content: space-evenly;
}
@media(max-width:991px){
  .access_p .access_wrapper{
    display:block
}
}
@media(max-width:767px){
  .access_p .access_wrapper{
    padding:50px ;
}
}
@media(max-width:575px){
  .access_p .access_wrapper{
    padding:30px 15px;
}
}
.access_p .access_wrapper .salon_right .map{
  padding-bottom: 56.25%;
  position: relative;
  overflow: hidden;
  width: 100%;
  height:0;
}
.access_p .access_wrapper .salon_right{
  width:60%;
}
@media(max-width:991px){
  .access_p .access_wrapper .salon_right{
    width:100%;
}
}
@media(max-width:991px){
  .access_p .access_wrapper .salon_right .map{
    margin: 30px auto;
}
}
.access_p .access_wrapper .salon_right .map iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.access_p .access_wrapper .salon_left{
  padding:0 20px;
  width:40%;
}
@media(max-width:991px){
  .access_p .access_wrapper .salon_left{
    padding:0;
    width:100%
}
}
@media(max-width:575px){
  .access_p .access_wrapper .salon_left{
    padding:0;
}
}
.access_p .access_wrapper .salon_left .salon_name{
  padding:0.5em 0;
  border-top:solid 3px #dae9db;
  border-bottom: solid 3px #dae9db;
}
.access_p .access_wrapper .salon_left .salon_deta{
  margin: 30px 0;
  max-width:400px;
  width:100%;
}
.access_p .access_wrapper .salon_left .salon_deta .salon_box th{
  padding-right:20px;
  white-space: nowrap;
  vertical-align: baseline;
  width:70px;
}
.access_p .access_wrapper .salon_left .salon_deta .salon_box td{
  word-wrap:break-word;
}
.access_p .access_wrapper .salon_left .salon_deta tbody{
  display:flex;
  flex-direction: column;
}
.access_p .access_wrapper .salon_left .salon_deta tbody .salon_box{
  margin-bottom:10px;
}

/* アクセスここまで */
/* リーディングここから */
.reading{
  padding: 50px 0;
}
@media(max-width:575px){
  .reading{
    padding: 30px 0;
}
}
.reading .reading_box{
  display: flex;
  max-width: 1000px;
  margin: 0 auto;
  justify-content: center;
  padding: 0 10px
}
@media(max-width:767px){
  .reading .reading_box{
    display:block;
  }
}
.reading .reading_box .text_box{
  max-width: 500px;
  width: 100%;
}
@media(max-width:767px){
  .reading .reading_box .text_box{
   max-width: initial;
}
}
.reading .reading_box .text_box .textbox_top{
  font-size: 20px;
  padding-top: 2rem;
  display:flex;
  align-items: center;
}
.reading .reading_box .text_box .textbox_top::before{
  content:"";
  background-image:url(../images/reading.png);
  position: relative;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  height: 3rem;
  width: 15%;
  margin: 0 0 2em 0;
}
.reading .reading_box .text_box .textbox_top::after{
  content:"";
  flex-grow: 1;
  border-bottom:1px dotted #bbb5b3;
  margin-left:10px;
  padding-right: 15px;
}
.reading .reading_box .text_box p{
  line-height: 2.3;
}
@media(max-width:575px){
  .reading .reading_box .text_box p{
    line-height: 1.5;
  }
}
.reading .reading_box .img_box{
  padding: 30px;
  width: 100%;
  max-width:300px;
}
@media(max-width:767px){
  .reading .reading_box .img_box{
  margin:0 auto;
  padding:0;
}
}
.reading .middle_box .reading_box{
  justify-content: flex-end;
}

/* ご予約 ここから*/
.reservation{
  max-width: 800px;
  margin: 100px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media(max-width:575px){
  .reservation{
    text-align: center;
    display: block;
}
}
  .reservation_wrapper{
    padding: 2%;
}
@media(max-width:575px){
  .reservation_wrapper{
    text-align: center;
    margin: 0 auto;
    display: block;
}
}
.reservation .reservation_wrapper .text{
  font-size:clamp(15px,3vw,20px);
  text-align: left;
  display: inline-block;
}
.reservation::before{
  content:url("../images/moon.png");
  position:relative;
} 
@media(max-width:575px){
  .reservation::before{
    display:none;
  } 
}
/* ご予約 ここまで*/

/* お問い合わせ */
.container .form-group .box {
  margin:20px auto;
  display: flex;
  justify-content: space-between;
}
.container .form-group .box .require_box{
  display: flex;
  max-width: 180px;
  width:100%;
  justify-content: space-between;
}
@media(max-width:575px){
  .container .form-group .box{
    display:block;
    text-align: center;
  }
}
.container .form-group .box .require_box .input{
  max-width: 130px;
  width: 100%;
  padding-right:1%;
}

.container .form-group .box .text input,.box .text textarea{
  width:360px;
  padding: 4px 6px;
  border: 1px solid #aaa;
  border-radius: 2px;
}
@media(max-width:575px){
  .container .form-group .box .text input,.box .text textarea{
  width:100%;
  }
}
.container form{
  padding:50px 0;
}


/* contact.php */
.require_item {
  background-color: #ff0000;
  color: #fff;
  text-align: center;
  max-width:40px;
  padding: 1px 5px;
  font-size: 13px;
}


.error_msg {
  font-size: 14px;
  color: #ff0000;
  height: 14px;
}
.container .form-group .box .require_box{
    display:flex;
}


/* confirm.php */
.container .confirm{
  text-align: center;
  padding:3%;
}
.container .submit_btn{
  text-align: center;
}
.container .submit_btn button{
  color: #fff;
  background: #58473e;
  padding: 10px 20px;
  border-radius: 5px;
  border:none;
  cursor: pointer;
}
.container .submit_btn button:hover{
  text-decoration: none;
  background:#937667;
}
.container .form_btn ._btn{
  display: flex;
  align-items: center;
  justify-content: center;
}
.container .form_btn ._btn .return_btn{
  border: 1px solid #888;
  padding: 7px 20px;
  border-radius: 5px;
  margin-right: 10px;
  cursor:pointer;
}
.container .form_btn ._btn .return_btn a{
  text-decoration: none;
  color:#000;
}
.container .form_btn ._btn .return_btn a:hover{
  color: #937667;
}
.container .form-group .display_box,
.container .form-group .display_box_last{
  vertical-align: baseline;
}

.container .form-group{
  padding: 0 20px;
  max-width: 700px;
  margin: 0 auto;
}

.container .form-group .display_box .input,
.container .form-group .display_box_last .input{
  white-space: nowrap;
  border:1px solid #888;
  border-collapse: collapse;
  padding:5px;
  background:#f2f2f2;
}
.container .form-group  .display{
  word-break: break-all;
  padding:5px;
  border:1px solid #888;
  border-collapse: collapse;
}
.container .form_btn{
  padding:3%;
}
@media(max-width:575px){
  .container .form-group {
    width:90%;
  }
  .container .form-group .input ,
  .container .form-group .display{ 
    border-bottom: none;
    border-top:none;
    display: block;
    width:100%
  }
  .container .form-group .display_box_last .display{
    border-bottom:1px solid #888;
    width:100%;
  }
  .container .form_btn{
    padding:8%;
}
}

/* thanks.php */
.thanks_msg {
  padding:50px 0;
  background-color: #f8f8f8;
  margin: 50px auto;
  max-width: 500px;
}
.thanks_msg p{
  text-align: center;
}

.reading_box-under {
  max-width: 460px;
  margin: 0 auto 60px;
}

.reading_box-under h4 {
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 20px;
}

.reading_box-under__flex {
  display: flex;
  align-items: center;
}

.reading_box-under__flex ul {
  margin-right: 30px;
  line-height: 2;
}

.reading_box-under__flex__circle {
  border-radius: 200px;
  background: #fff;
  padding: 30px  60px;
}

.reading_box-under__flex__circle p {
  text-align: center;
}
.reading_box-under_text {
  text-align: center;
  margin-bottom: 50px;
}
.reading_box__desc {
  max-width: 560px;
  margin: 30px auto 80px;
}

br.sp {
  display: block;
}
@media screen and (max-width: 768px) { 
  br.sp {
    display: none;
  }
}

@media screen and (max-width: 768px) { 
  .reading_box-under {
    margin-bottom: 30px;
  }
  .reading_box-under__flex {
    flex-direction: column;
    align-items: baseline;
  }
  .reading_box-under__flex ul {
    margin-bottom: 6px;
    line-height: 1.6;
    /* order: 1; */
  }
  .reading_box-under__flex ul li {
    font-size: .94rem;
  }
  .reading_box-under__flex__circle { 
   padding: 12px 20px; 
   /* order: 0; */
  }
  .reading_box-under h4 {
    font-size: 1rem;
    margin-bottom: 8px;
  }
  .reading_box-under__flex__circle p {
    font-size: .8rem;
    text-align: left;
  }
  .reading_box-under_text {
    text-align: left;
    font-size: .9rem;
  }
  .reading_box__desc {
    margin: 30px auto 50px;
  }
}