@charset "utf-8";

/*========= レイアウトのためのCSS ===============*/

body{
  font-family: "游明朝", serif;
  font-size:1rem;
  color:#2a2a2a;
  font-weight:500;
  letter-spacing:0.05em;
  background:#F4F7F9;
}

* {
  box-sizing: border-box;
}



/*▼▼ヘッダーのCSS▼▼*/

header{
  width:100%;
}

.logo:hover{
  opacity:0.5;
}

.header_nav{
  display:flex;
  align-items: center;
  justify-content: center;
  padding: 48px 100px 16px 100px;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:#DEF1F7;
  z-index:999;
  height:128px;
}

.header_nav02{
  display:flex;
  justify-content: flex-end;
  width:75%;
}

.header_nav02 p{
  margin-left:8%;
  font-size:1.2rem;
  transition: all .2s;
}

.header_nav02 a{
  text-decoration: none;
  color:inherit;
}

.header_nav02 p:hover{
  color: #5f9EA0;
}

.logo{
  width:240px;
}


/*▼▼新ヘッダーのCSS▼▼*/

.c-header {
  align-items: center;
  background-color: #DEF1F7;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: 48px 100px 16px 100px;
  width: 100%;
  height:128px;
  position:fixed;
  z-index:999;
}

.c-header__list {
  box-sizing: border-box;
  display: flex;
  margin: 0;
  padding: 0;
}

.c-header__list-item {
  list-style: none;
  text-decoration: none;
  align-items: center;
  display: flex;
}

.c-header__list-link {
  color: #2a2a2a;
  display: block;
  margin-left: 40px;
  text-decoration: none;
  padding: 10px 0px;
  font-size:1.2rem;
}

.r-header__list-link {
  color: #fff;
  display: block;
  margin-left: 40px;
  text-decoration: none;
  padding: 25px 20px;
  background-color:#5f9EA0;
  font-size:1rem;
  border-radius:10px;
}

.r-header__list-link:hover{
  border:1px #5f9EA0 solid;
  background-color:#fff;
  color:#5f9EA0;
  transition:all 1s;
}

.c-header__list-link:hover {
  filter: opacity(0.6);
}



/*▼▽▼▽トップページのCSS▼▽▼▽*/

/*▼▼トップ画像のCSS▼▼*/

.top_image{
  width:100%;
}

.top_image_area{
  padding:128px 0 0 0;
  position:relative;
}

.top_comment{
  position:absolute;
  top:76%;
  left:10%;
  font-family:Yu Mincho,"游明朝",serif;
  font-size:2rem;
  line-height:1.4em;
  z-index:888;
}

/*▼メイン画像スライドショーのCSS▼*/

.img-frame{
   position: relative;
   width: 100%;
   height: 640px;
   overflow: hidden;
   margin: 0 auto;
   z-index:888;
}

.img-01, .img-02, .img-03{
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
}

.img-01{
   background-image: url('../image/top_image01.png');
   animation: slide-animation-01 24s infinite;
}

.img-02{
   background-image: url('../image/top_image02.png');
   animation: slide-animation-02 24s infinite;
}

.img-03{
   background-image: url('../image/top_image03.jpeg');
   animation: slide-animation-03 24s infinite;
}

@keyframes slide-animation-01 {
    0% {opacity: 1; transform: scale(1.0);}
  30% {opacity: 1;}
  40% {opacity: 0; transform: scale(1.15);}
  90% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}

@keyframes slide-animation-02 {
    0% {opacity: 0;}
  30% {opacity: 0; transform: scale(1.1);}
  40% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}

@keyframes slide-animation-03 {
    0% {opacity: 0;}
  60% {opacity: 0;  transform: scale(1.0);}
  70% {opacity: 1;}
  90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.1);}
}


/*▼▼ABOUTエリアのCSS▼▼*/

.about_area_inner{
  padding:64px 128px;
  margin:150px 100px;
  background:#ffffff;
  display:flex;
  align-items:center;
  position: relative;
}

.about_area_inner::before,.about_area_inner::after{
  width: calc(100% - 160px);
	height: 0;
	display: block;
	position: absolute;
	left: 0;
	content: "";
}

.about_area_inner::before{
  border-bottom: solid 80px #ffffff;
  border-right: solid 80px transparent;
  border-left: solid 80px transparent;
  bottom: 100%;
}

.about_area_inner::after{
  border-top: solid 80px #ffffff;
  border-left: solid 80px transparent;
  border-right: solid 80px transparent;
  top: 100%;
}

.about_menu_comment{
  width:50%;
}

.about_image01{
  display:block;
  width:80%;
  margin:0 0 32px 0;
}

.about_image02{
  display:block;
  width:70%;
  margin-left:10%;
}

.about_menu_image{
  width:50%;
}

.about_menu_title{
  font-family: 'Times New Roman', serif;
  font-size:2.3rem;
  position:relative;
  margin:0 0 48px 0;
}

.about_menu_title::before{
  background-color:#5f9EA0;
  border-radius:5px;
  bottom:-5px;
  content:"";
  height:3px;
  left:0%;
  position:absolute;
  width:180px;
}

.about_menu_subtitle{
  font-size:1.5rem;
  font-weight:1000;
  line-height:1.4em;
  margin:0 0 8px 0;
}

.about_menu_massage{
  font-family:'Verdana', serif;
  margin:0 0 32px 0;
  color:#BDB76B;
  font-size:0.9rem;
}

.about_menu_text{
  line-height:2.3em;
  margin:0 0 32px 0;
}

.about_menu_text span{
  background-color:#ff9;
}

.about_menu_btn{
  background-color:#fff;
  border-radius:60px;
  text-align:center;
  max-width:300px;
  margin:0 auto;
  font-size:0.9rem;
}

.about_menu_btn a{
  display: block;
  text-decoration:none;
  color:#2a2a2a;
  border-radius:60px;
  padding:15px 40px;
  border:1px solid #2a2a2a;
}

.about_menu_btn a:hover{
  background-color:#5f9EA0;
  color:#fff;
  border:1px solid #5f9EA0;
  transition:all 0.6s;
}

/*▼▼MENUエリアのCSS▼▼*/

.menu_image01{
  display:block;
  width:80%;
  margin:0 0 32px 20%;
}

.menu_image02{
  display:block;
  width:70%;
  margin-left:30%;
}

.menu_area_inner{
  padding:64px 128px;
  margin:250px 100px;
  background:#ffffff;
  display:flex;
  align-items:center;
  position: relative;
}

.menu_area_inner::before,.menu_area_inner::after{
  width: calc(100% - 160px);
	height: 0;
	display: block;
	position: absolute;
	left: 0;
	content: "";
}

.menu_area_inner::before{
  border-bottom: solid 80px #ffffff;
  border-right: solid 80px transparent;
  border-left: solid 80px transparent;
  bottom: 100%;
}

.menu_area_inner::after{
  border-top: solid 80px #ffffff;
  border-left: solid 80px transparent;
  border-right: solid 80px transparent;
  top: 100%;
}

/*▼▼STAFFエリアのCSS▼▼*/

.staff_area_inner{
  padding:64px 128px;
  margin:150px 100px;
  background:#ffffff;
  position: relative;
}

.staff_area_inner::before,.staff_area_inner::after{
  width: calc(100% - 160px);
	height: 0;
	display: block;
	position: absolute;
	left: 0;
	content: "";
}

.staff_area_inner::before{
  border-bottom: solid 80px #ffffff;
  border-right: solid 80px transparent;
  border-left: solid 80px transparent;
  bottom: 100%;
}

.staff_area_inner::after{
  border-top: solid 80px #ffffff;
  border-left: solid 80px transparent;
  border-right: solid 80px transparent;
  top: 100%;
}

.center_title{
  font-family: 'Times New Roman', serif;
  font-size:2.3rem;
  position:relative;
  margin:0 auto 64px;
  text-align:center;
}

.center_title::before{
  background-color:#5f9EA0;
  border-radius:5px;
  bottom:-5px;
  content:"";
  height:3px;
  left:50%;
  position:absolute;
  transform:translateX(-50%);
  width:180px;
}

.staff_text{
  line-height:2;
  margin:0 0 64px 0;
}

.stylist_list{
  display: flex;
  justify-content: center;
  text-align: center;
}

.stylist{
  margin:0 16px;
  width: 60%;
}

.stylist img{
  width: 80%;
}

.stylist_inner{
  text-align: left;
  border-top: #2a2a2a solid 2px;
  border-bottom: #2a2a2a solid 2px;
  padding: 32px 16px;
  margin: 32px 8px;
}

.job_title{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  margin-bottom: 16px;
}

.name{
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 32px;
}

.comment{
  font-size: 0.9rem;
  line-height: 2.2;
}

/*▼▼GALLERYエリアのCSS▼▼*/

.gallery_access_area_inner{
  padding:64px 128px;
  margin:250px 100px 200px 100px;
  background:#ffffff;
  position: relative;
}

.gallery_access_area_inner::before,.gallery_access_area_inner::after{
  width: calc(100% - 160px);
	height: 0;
	display: block;
	position: absolute;
	left: 0;
	content: "";
}

.gallery_access_area_inner::before{
  border-bottom: solid 80px #ffffff;
  border-right: solid 80px transparent;
  border-left: solid 80px transparent;
  bottom: 100%;
}

.gallery_access_area_inner::after{
  border-top: solid 80px #ffffff;
  border-left: solid 80px transparent;
  border-right: solid 80px transparent;
  top: 100%;
}

.gallery_list{
  display:flex;
  justify-content:center;
  margin:0 64px 64px 64px;
}

.gallery_list img{
  width:30%;
  border-radius:50%;
  padding:0 20px;
}

/*▼▼ACCESSエリアのCSS▼▼*/

.access_list li{
  border-bottom:2px dashed #95aaaa;
  list-style: none;
  padding: 16px 0;
}

.access_information{
  display: flex;
  justify-content: center;
  align-items:flex-start;
}

.access_list{
  flex:1;
  background-color: #FFF9E6;
  padding: 48px;
  margin-right:32px;
}

.access_map{
  flex:1;
}

.access_salon_name{
  font-size:1.4rem;
}

.map_text{
  margin-bottom:32px;
}

.access_detail{
  font-size:0.9rem;
}


/*▼▼footerエリアのCSS▼▼*/

footer{
  background:#5f9EA0;
}

.footer_nav{
  display:flex;
  align-items: center;
  justify-content: center;
  padding: 48px 100px 64px 100px;
  width:100%;
}

.footer_nav02{
  display:flex;
  justify-content: flex-end;
  width:75%;
}

.footer_nav02 p{
  margin-left:8%;
  font-size:1.2rem;
  transition: all .2s;
}

.footer_nav02 a{
  text-decoration: none;
  color:inherit;
}

.footer_nav02 p:hover{
  color: #F4F7F9;
}

.copyright{
  text-align:center;
  font-size:0.8rem;
  padding:0 0 32px 0;
}

/*▼▽▼▽ABOUT/MENUページのCSS▼▽▼▽*/

/*▼▼上部画像のCSS▼▼*/

.about_menu_page_image{
  width:100%;
  margin-top:128px;
}

/*▼▼ABOUT詳細ページのCSS▼▼*/

.about_detail_inner{
  padding:32px 64px;
  margin:150px 100px;
  background:#ffffff;
  position: relative;
}

.about_detail_inner::before,.about_detail_inner::after{
  width: calc(100% - 160px);
	height: 0;
	display: block;
	position: absolute;
	left: 0;
	content: "";
}

.about_detail_inner::before{
  border-bottom: solid 80px #ffffff;
  border-right: solid 80px transparent;
  border-left: solid 80px transparent;
  bottom: 100%;
}

.about_detail_inner::after{
  border-top: solid 80px #ffffff;
  border-left: solid 80px transparent;
  border-right: solid 80px transparent;
  top: 100%;
}

.about_summary{
  display:flex;
  align-items: center;
}

.about_summary01{
  font-size:1.4rem;
  width:40%;
  line-height:2;
  margin:0 32px 0 0;
  padding:0 32px 0 0;
  border-right:1px solid #2a2a2a;
}

.about_summary02{
  width:60%;
  line-height:2.2;
}

.about_content01,.about_content02{
  background-color:#fff;
  margin:100px;
  padding:128px 128px;
  display:flex;
  align-items: center;
}

.about_content01_wrapper{
  margin:0 32px 0 0;
}

.about_content_text{
  line-height:2.2;
}

.about_image{
  width:45%;
}

.about_icon{
  width:15%;
}

.about_icon_wrapper{
  text-align:center;
  margin:0 0 16px 0;
}

.about_content_title01,.about_content_title02,.about_content_title03,.about_content_title04{
  font-size:1.3rem;
  margin:0 0 32px 0;
}

.about_content_title01::before{
  content:'';
  display:inline-block;
  background-image:url(../image/number01.png);
  background-repeat:no-repeat;
  width:50px;
  height:50px;
  background-size:contain;
  vertical-align:middle;
}

.about_content02_wrapper{
  margin:0 0 0 32px;
}

.about_content_title02::before{
  content:'';
  display:inline-block;
  background-image:url(../image/number02.png);
  background-repeat:no-repeat;
  width:50px;
  height:50px;
  background-size:contain;
  vertical-align:middle;
}

.about_content_title03::before{
  content:'';
  display:inline-block;
  background-image:url(../image/number03.png);
  background-repeat:no-repeat;
  width:50px;
  height:50px;
  background-size:contain;
  vertical-align:middle;
}

.about_content_title04::before{
  content:'';
  display:inline-block;
  background-image:url(../image/number04.png);
  background-repeat:no-repeat;
  width:50px;
  height:50px;
  background-size:contain;
  vertical-align:middle;
}

.menu_title{
  font-family:Arial, Helvetica, sans-serif;
  font-size:2.4rem;
  margin:0 80px 32px 80px;
}

.menu_list li{
  margin: 0 80px;
  padding: 32px 64px 24px 64px;
  display:flex;
  border-bottom:5px dashed #DEF1F7;
}

.menu_list span{
  display:block;
  width:50em;
  font-size:1.1rem;
}

.menu_title02{
  font-family:Arial, Helvetica, sans-serif;
  font-size:2.4rem;
  margin:128px 80px 32px 80px;
}

/*▼▽▼▽GALLERYページのCSS▼▽▼▽*/

.gallery_text01{
  font-family:"Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  margin:0 0 16px 0;
  padding:0 0 8px 0;
  border-bottom:solid #2a2a2a 1px;
  font-size:1.1rem;
}

.gallery_text02{
  font-family:"Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  margin:0 0 32px 0;
  font-size:1.1rem;
}

.gallery_img{
  width:70%;
  display:block;
  margin:0 auto;
}

.gallery_inner{
  background-color:#e8ecef;
  padding:40px 32px;
  margin-bottom:32px;
  line-height:1.4;
}

.gallery_menu{
  margin-bottom:16px;
}


/*▼カルーセルのCSS▼*/

/* カルーセル全体 */
.carousel {
  /* 水平方向中央寄せ */
  display: flex;
  justify-content: center;
}
/* カルーセル内容 */
.contains {
  /* サイズは自由に変更してください。*/
  /* 下の.slideも同じサイズにしてください。 */
  width: 500px;
  height: 700px;
  overflow: hidden;
  position: relative;
  padding: 0;
  list-style: none;
}
/* スライド切り換え用ラジオボタンは常に非表示 */
.slide_select {
  display: none;
}
/* 各スライド */
.slide {
  /* サイズは自由に変更してください。*/
  /* 上の.containsも同じサイズにしてください。 */
  width: 500px;
  height: 700px;
  position: absolute;
  /* スライドの初期値は選択されていないので透明にしておく */
  opacity: 0;
}
/* 前へ次へボタン */
.scroll_button {
  position: absolute;
  display: block;
  height: 30px;
  width: 30px;
  /* 縦中央から20px上の位置 */
  top: 50%;
  margin-top: -20px;
  /* 上辺と右辺のみ幅5pxの枠線 */
  border-width: 5px 5px 0 0;
  border-style: solid;
  border-color: #5f9EA0;
  cursor: pointer;
  /* 普段はボタンはやや薄くする */
  opacity: 0.5;
  /* スライドよりも前面にする */
  z-index: 3;
}
/* ホバー時にボタンを強調 */
.scroll_button:hover {
  opacity: 1;
}
/* 前へボタン */
.scroll_prev {
  left: 10px;
  /* 上辺と右辺の枠線を回転して"＜"にする */
  transform: rotate(-135deg);
}
/* 次へボタン */
.scroll_next {
  right: 10px;
  /* 上辺と右辺の枠線を回転して"＞"にする */
  transform: rotate(45deg);
}
/* スライド移動ボタンエリア */
.move_controler {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
}
/* スライド移動の各ボタン */
.button_move {
  display: inline-block;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  border-radius: 100%;
  cursor: pointer;
  /* 普段はやや薄くする */
  opacity: 0.5;
  /* スライドより前面にする */
  z-index: 2;
}
/* ホバー時はやや明るくする */
.button_move:hover {
  opacity: 0.75;
}
/* スライド移動ボタンの色 */
.button_move {
  background-color: #fdfdfd;
}
/* 1番目のスライド選択時 */
/* 1番目のスライドの透明度を0にして表示する */
.slide_select:nth-of-type(1):checked ~ .slide:nth-of-type(1) {
  opacity: 1;
}
/* スライド移動ボタンの1個目を明るくする */
/* （今選択されていることが分かるように） */
.slide_select:nth-of-type(1):checked ~ .move_controler .button_move:nth-of-type(1) {
  opacity: 1;
}
.slide_select:nth-of-type(2):checked ~ .slide:nth-of-type(2) {
  opacity: 1;
}
/* 2番目のスライド選択時（1番目のスライドと同じことをする） */
.slide_select:nth-of-type(2):checked ~ .move_controler .button_move:nth-of-type(2) {
  opacity: 1;
}
/* 3番目のスライド選択時 */
.slide_select:nth-of-type(3):checked ~ .slide:nth-of-type(3) {
  opacity: 1;
}
.slide_select:nth-of-type(3):checked ~ .move_controler
  .button_move:nth-of-type(3) {
  opacity: 1;
}
/* 4番目のスライド選択時 */
.slide_select:nth-of-type(4):checked ~ .slide:nth-of-type(4) {
  opacity: 1;
}
.slide_select:nth-of-type(4):checked
  ~ .move_controler
  .button_move:nth-of-type(4) {
  opacity: 1;
}


/*▼ページトップリンクのCSS▼*/

/*スクロールリンクの形状*/
.scroll-top {
  /*表示位置*/
  position: fixed;
  right: 20px;
  bottom: 10px;
  z-index: 2;
  /*はじめは非表示*/
  opacity: 0;
  visibility: hidden; 
  transition: opacity .5s, visibility .5s; /*それぞれに0.5秒の変化のアニメーション*/
  /*縦書き*/
  -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
  /*改行禁止*/
    white-space: nowrap;
  /*矢印の動き*/
  animation: arrowmove 1s ease-in-out infinite;
}

.scroll-top a:hover{
  opacity: 0.5;
}

@keyframes arrowmove{
      0%{bottom:20px;}
      50%{bottom:25px;}
     100%{bottom:20px;}
 }


/*.scroll-viewクラスがついたら出現*/
.scroll-top.scroll-view {
  opacity: 1;
  visibility: visible;
}

/*リンク全体の aタグの形状*/
.scroll-top a {
  text-decoration: none;
  color: #2a2a2a;
  text-transform: uppercase;
  font-size:0.9rem;
  display: block;
  margin:0 1px;
}

/*スクロールリンクの形状*/

.js-scroll a::after{
  content:"";
  position: absolute;
  top:0;
  right:0;
  width:1px;
  height: 50px;
  background:#666;
}

.js-scroll a::before {
    content: "";
    position: absolute;
    top: 30px;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #666;
    transform: skewX(-31deg);
}

/*Edge IE11 hack*/
_:-ms-lang(x), .js-scroll a::before{
  right:-11px;
}

/*ページトップリンクの形状*/

.js-pagetop a::after{
  content:"";
  position: absolute;
  top:0;
  right:0;
  width:1px;
  height: 50px;
  background:#666;
}

.js-pagetop a::before {
    content: "";
    position: absolute;
    top: 0;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #666;
    transform: skewX(31deg);
}

/*Edge IE11 hack*/
_:-ms-lang(x), .js-pagetop a::before{
  right:0;
}


/*▼▼アニメーションのCSS▼▼*/

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1.8s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(25px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}

.c-hamburger-menu {
  position: fixed;
  
}

.reserve_btn{
  display:none;
}

/*▼▼レスポンシブ対応のCSS▼▼*/


@media screen and (max-width:992px) {


/*▼トップページのレスポンシブ▼*/

.header_nav{
  padding:48px 50px 16px 50px;
}

.about_area_inner{
  margin:150px 50px;
  padding:32px 64px;
}

.menu_area_inner{
  margin:250px 50px;
  padding:32px 64px;
}

.staff_area_inner{
  margin:150px 50px;
  padding:32px 64px;
}

.gallery_access_area_inner{
  margin:250px 50px 200px 50px;
  padding:32px 64px;
}

.access_information{
  display:block;
}

.access_list{
  margin:0 0 32px 0;
}

.access_map{
  text-align:center;
}

.footer_nav{
  padding:48px 50px 64px 50px;
}

.logo{
  width:208px;
}

.c-header{
  padding:48px 50px 16px 50px;
}

.img-01{
  background-position:-400px 0;
}

.img-02{
  background-position:-400px 0;
}

/*▼アバウトページのレスポンシブ▼*/

.about_content01{
  display:block;
  padding:96px 64px;
}

.about_content02{
  flex-direction:column-reverse;
  padding:96px 64px;
}

.about_image{
  display:block;
  margin:32px auto 0 auto;
}

.about_content01_wrapper{
  margin:0;
}

.menu_list li{
  padding:32px 32px 24px 32px;
  margin:0 32px;
}

.about_detail_inner{
  padding:64px 32px;
}

.about_image{
  width:60%;
}

}

@media screen and (max-width:768px) {

/*▼トップページのレスポンシブ▼*/
/*▽ハンバーガー▽*/

.c-hamburger-menu__list {
    background-color: #eeeeee; /* カスタマイズしてください */
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    left: 0;
    padding: 2rem; /* カスタマイズしてください */
    position: absolute;
    transform: translateX(-100%);
    transition: 0.3s; /* カスタマイズしてください */
    top: 100%;
    width: 100%;
  }

  #hamburger:checked ~ .c-hamburger-menu__list {
    transform: translateX(0%);
    transition: 0.3s;
  }
}

.c-hamburger-menu__input {
  display: none;
}

.c-hamburger-menu__bg {
  background-color: #000; /* カスタマイズしてください */
  cursor: pointer;
  display: none;
  height: 100vh;
  left: 0;
  opacity: 0.4; /* カスタマイズしてください */
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

#hamburger:checked ~ .c-hamburger-menu__bg {
  display: block;
}

.c-hamburger-menu__button {
  display: none;
}

@media screen and (max-width: 768px) {
  .c-hamburger-menu__button {
    align-items: center;
    appearance: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 12px; /* カスタマイズしてください */
    height: 32px; /* カスタマイズしてください */
    justify-content: center;
    width: 32px; /* カスタマイズしてください */
  }
}

.c-hamburger-menu__button-mark {
  background-color: #000; /* カスタマイズしてください */
  display: block;
  height:1px; /* カスタマイズしてください */
  transition: 0.3s; /* カスタマイズしてください */
  width: 40px; /* カスタマイズしてください */
}

@media screen and (max-width: 768px) {
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(1) {
    transform: translate(2px, 1px) rotate(45deg); /* カスタマイズしてください */
    transform-origin: 0%; /* カスタマイズしてください */
  }
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(2) {
    opacity: 0;
  }
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(3) {
    transform: translate(2px, 3px) rotate(-45deg); /* カスタマイズしてください */
    transform-origin: 0%; /* カスタマイズしてください */
  }
/*▽ハンバーガー終わり▽*/

.reserve_btn{
  display:block;
  position:fixed;
  right:0;
  top:300px;
  background:#5f9EA0;
  padding:20px 5px;
  color:#fff;
  z-index:777;
  font-size:0.8rem;
  line-height:1.3;
  border-radius:10px;
}

.reserve_btn:hover{
  border:1px #5f9EA0 solid;
  background:#fff;
  color:#5f9EA0;
  transition:1s;
}

.top_comment{
  font-size:1.5rem;
}

.about_area_inner{
  flex-direction: column-reverse;
  padding:32px;
}

.about_menu_comment{
  width:100%;
}

.about_menu_image{
  width:100%;
}

.about_image01{
  margin:32px auto;
  width:70%;
}

.about_image02{
  width:70%;
  margin:0 auto;
}

.menu_area_inner{
  flex-direction: column;
  padding:32px;
}

.menu_image01{
  margin:32px auto;
  width:70%;
}

.menu_image02{
  margin:0 auto;
  width:70%;
}

.staff_area_inner{
  padding:32px;
}

.stylist_list{
  display:block;
}

.stylist{
  margin:0 auto;
  width:100%;
}

.staff_text{
  margin:0 0 32px 0;
}

.stylist img{
  width:60%;
}

.gallery_access_area_inner{
  padding:32px;
}

.gallery_list{
  display:block;
  text-align:center;
  margin:0 0 32px 0;
}

.gallery_list img{
  width:50%;
  margin:0 0 16px 0;
}

.access_map iframe{
  width:100%;
}

.access_list{
  padding:32px;
}

.footer_nav02{
  display:none;
}

.about_detail_inner{
  margin:150px 32px;
}

.img-01{
  background-position:-500px 0;
}

.img-02{
  background-position:-500px 0;
}

.img-03{
  background-position:-150px 0;
}*


/*▼アバウトページのレスポンシブ▼*/

.about_summary{
  display:block;
}

.about_summary01{
  margin:0 0 32px 0;
  padding:0 0 16px 0;
  border-bottom:1px solid #2a2a2a;
  border-right:0px;
  width:100%;
}

.about_summary02{
  width:100%;
}

.about_detail_inner{
  padding:32px;
}

.about_content01{
  margin:100px 32px;
  padding:64px 32px;
}

.about_content02{
  margin:100px 32px;
  padding:64px 32px;
}

.about_content02_wrapper{
  margin:0;
}

.menu_list li{
  margin:0;
  padding:16px 16px 24px 16px;
}

.menu_title{
  text-align:center;
  font-size:2rem;
}

.menu_title02{
  text-align:center;
  font-size:2rem;
}

/*▼ギャラリーページのレスポンシブ▼*/

.slide{
  width:100%;
  height:100%;
}

.gallery_img{
  width:80%;
}

.scroll_prev{
  left:5px;
}

.scroll_next{
  right:5px;
}

.scroll_button{
  top:60%;
}


}