@charset "UTF-8";

:root{
  --brown-dark: #3e2410;
  --brown-mid: #7a5e42;
  --brown-light: #c9a97a;
  --cream: #faf6ef;
  --cream2: #f4ede2;
	--cta:#a0522d;
  --jp: 'M PLUS 1p', sans-serif;
  --en: 'Rubik', sans-serif;
}


/*================================================
 *  CSSリセット
 ================================================*/
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: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.6;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

img{
	width: 100%;
	vertical-align:bottom; /* img要素にここを指定 */
}

a:link {
	text-decoration: none;	
}

a:hover img {
    opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}


html{scroll-behavior:smooth}
body{font-family:var(--jp);
	color:var(--brown-dark);
	background:#fff;
	overflow-x:hidden}

/* LOADING */
#loading{
  position:fixed;
	inset:0;background:#d4b896;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  transition:opacity 0.8s ease,visibility 0.8s ease;
}
#loading.hidden{opacity:0;visibility:hidden;pointer-events:none}
#loading img{width:600px;max-width:70vw;height:auto}

/* HEADER */
header{

	top:0;left:0;right:0;
	background:var(--cream2);
z-index:1000;
padding:12px 0px;
}



#hdr{
	position:sticky;
	top:0;
	z-index:1000;
}

.header_flex{
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1160px;
	margin-left: auto;
	margin-right: auto;
	background: var(--cream2);

}




.header-logo{width: 20%;}
/* 大きい画面用の設定-------------- */
@media (min-width:768px){
header.compact.header_flex{padding:8px 40px}
	header.compact .header-logo{width: 15%;}
}
/* -------------end------------- */


/* 小さい画面用の設定-------------- */
@media (max-width:767px){
	  header{padding:10px 10px;
}
	

	
.header-logo{width: 45%;}
}
/* -------------end------------- */


/*.header-logo img{height:44px;
	transition:height 0.3s;
	display:block}
header.compact .header-logo img{height:36px}*/

nav ul{display:flex;
	align-items:center;
	gap:20px}
nav ul li a{
  font-family:var(--en);
	font-size:82%;

  color:var(--brown-dark);
	text-transform:uppercase;
  transition:color 0.2s;
}
nav ul li a:hover{color:var(--brown-mid)}
nav ul li.nav-res a{
  background:var(--cta);
	color:var(--cream2);
  padding:9px 18px;

  transition:background 0.2s;
}
nav ul li.nav-res a:hover{background:var(--brown-dark)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;z-index:1100}
.hamburger span{display:block;width:24px;height:2px;background:var(--brown-dark);transition:all 0.3s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{
  display:none;position:fixed;inset:0;background:rgba(255,255,255,0.98);
  z-index:999;flex-direction:column;align-items:center;justify-content:center;gap:32px;
}
.mobile-nav.open{display:flex}
.mobile-nav a{
  font-family:var(--en);font-size:18px;letter-spacing:0.2em;
  color:var(--brown-dark);text-decoration:none;font-weight:500;text-transform:uppercase;
}
.mobile-nav a:hover{color:var(--brown-mid)}
.mobile-nav .m-res{
  background:var(--brown-mid);color:#fff !important;
  padding:12px 36px;
}

/* HERO */
#hero{background:var(--cream2);
}

.hero-inner{
	display:flex;
	max-width:1160px;
	margin-left:auto;
	margin-right:auto;
	
}

.hero-img-wrap {
	position: relative;

	width: 65%;
	height: 660px;
}

/* 画像を画面左端まで広げる */
.hero-img-wrap::before{
	content:"";
	position:absolute;

	top:0;
	right:0;
	bottom:0;

	width:100vw;

	background-image:url(../img/key.png);
	background-position:right center;
	background-size:contain;
	background-repeat:no-repeat;
border-radius: 0 30px 30px 0;
}

.hero-right_wrap{
	width:35%;
	background:var(--cream2);
	position: relative;   /* 追加 */
	padding-top: 0px;
}

.hero-logo{
width: 86%;
margin-left: auto;
margin-right: 0;}

.hero-copy{position:absolute;
	right:0;
	top:62%;
display:flex;
	flex-direction:column;
white-space:nowrap;   /* 追加 */
	text-align: right;
}

.hero-copy-a{margin-bottom: 30px;
}


.hero-copy-b{margin-bottom: 50px;
}

.hero-copy-a span{background-color: var(--brown-dark);
color: var(--cream2);
font-size:225%;
padding: 10px 30px ;
	font-weight: 700;
}



.hero-copy-b span{background-color: var(--brown-dark);
color:var(--cream2);
font-size:180%;
padding: 10px 30px ;}

/*ここから流れるコピー*/
.hero-copy span{
display:inline-block;
background:var(--brown-dark);
color:var(--cream2);
padding:10px 30px;

clip-path: inset(0 100% 0 0);
animation: textReveal 1.4s cubic-bezier(.65,0,.35,1) forwards;
}

/* 2行目少し遅らせる */
.hero-copy-b span{
animation-delay:0.5s;
}

@keyframes textReveal{
to{
clip-path: inset(0 0 0 0);
}
}

/*END流れるコピー*/


.hero-btns{
  display:flex;
	justify-content: flex-end;

}
.btn-fill{
  padding:15px 20px;
	background:transparent;
  border:1px solid var(--brown-mid);
  font-family:var(--en);
	color:var(--brown-mid);

  transition:all 0.2s;
	display:inline-block;
	font-size: 113%;
	margin-left: 10px;
}
.btn-fill:hover{background:var(--brown-mid);
	color:#fff

}


/* 小さい画面用の設定-------------- */
@media (max-width: 767px) {
  #hero {
    position: relative;
  }
  /* 横並びを解除 */
  .hero-inner {
    display: block;
  }
  /* 画像エリア */
  .hero-img-wrap {
    width: 100%;
    max-height: 500px;
  }
  /* PC用の100vwを解除 */
  .hero-img-wrap::before {
    width: 100%;
    left: 0;
    right: 0;
    background-image: url(../img/key_sp.png);
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
	  border-radius: 0 0px 0px 0;
  }
  /* テキストを画像の上に */
  .hero-right_wrap {
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    padding-top: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /* コピー位置 */
  .hero-copy {
    position: relative;
    top: auto;
    right: auto;
    text-align: center;
    white-space: normal;
  }
  /* ロゴ */
  .hero-logo {
    width: 60%;
    margin-bottom: 30px;
	  margin-left: auto;
margin-right: auto;
  }
	
.hero-logo img{
  filter:
    drop-shadow(0 0 2px #f4ede2)
    drop-shadow(0 0 6px #f4ede2)
    drop-shadow(0 0 15px #f4ede2)
    drop-shadow(0 0 35px #f4ede2);
}
  .hero-copy-a {
    margin-bottom: 10px;
  }
  .hero-copy-b {
    margin-bottom: 30px;
  }
  .hero-copy-a span {
    font-size: 120%;
    padding: 10px 10px;
  }
  .hero-copy-b span {
    font-size: 100%;
    padding: 10px 10px;
  }
  .hero-btns {
    justify-content: center;
  }
  .btn-fill {
    padding: 10px 15px;
    background: var(--cream2);
    font-size: 100%;
    margin-left: 5px;
	 background:rgba(250,246,239,0.80);
  }
  /* ボタン中央 */
  .hero-btns {
    justify-content: center;
  }
}
/* -------------end------------- */
/* 小さい画面用の設定-------------- */
@media (max-width:320px){
  .hero-copy-a span {
    font-size: 100%;
  }
}
/* -------------end------------- */



/* TITLE------------------------------------------------------------ */
.sec-title {
  text-align: center;
	margin-bottom: 30px;
}

.sec-title .sub {
  position: relative;
  display: inline-block;
}

/* 日本語部分だけに罫線 */
.sec-title .title_jp {
  position: relative;
  display: inline-block;
  padding: 0 20px; /* 線との余白 */
	color: var(--brown-dark);
	letter-spacing:0.1em;
}

/* 左右の線 */
.sec-title .title_jp::before,
.sec-title .title_jp::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 60px;
  height: 1px;
  background: var(--brown-dark);
}

.sec-title .title_jp::before {
  left: 0;
  transform: translateX(-100%);
}

.sec-title .title_jp::after {
  right: 0;
  transform: translateX(100%);
}

/* 英語 */
.sec-title .title_en {
  display: block;
  font-size: 300%;
  color: var(--brown-mid);
	line-height: 1.2;
	
	font-family:var(--en);
  font-weight:600;}
	
	
	/* 小さい画面用の設定-------------- */
	@media (max-width:767px) {
	  .sec-title {
	    margin-bottom: 20px;
	  }
	  .sec-title .title_jp {
	    padding: 0 10px; /* 線との余白 */
	  }
	  .sec-title .title_jp::before, .sec-title .title_jp::after {
	    width: 40px;
	  }
	  /* 英語 */
	  .sec-title .title_en {
	    font-size: 200%;
	  }
	}
	/* -------------end------------- */







/* CONCEPT------------------------------------------------------------ */

#concept{background:var(--cream2);
	overflow:hidden;
	padding:80px 0;
}

.concept-wrap{
	max-width:1160px;
	margin:0 auto;
	padding:0 20px;
}

/* Block 1: text left, big image right (right edge bleeds) */
.concept-b1{
display: flex;
justify-content: space-between;
		align-items: center;
	margin-bottom: 50px;
}

.concept-b1 > .concept-text-b1{width: 46%;}

.concept-img-b1{ width:50vw; margin-right:calc(50% - 50vw); } .concept-img-b1 img{ width:100%; height:auto; display:block; min-height:420px; object-fit:cover; }


.concept-heading{
  color: var(--brown-dark);
  font-weight: 700;
  margin-bottom: 30px;
  font-size: 163%;
}

.concept-heading .marker,
.res-txt .marker{
  display:inline-block;
	background: linear-gradient(rgba(226,205,184,0.8), rgba(226,205,184,0.8)) no-repeat;
  background-repeat:no-repeat;
background-position: left 70%;
background-size:0% 25%;
}

/* アニメ開始 */
.concept-heading.animate .marker,
.res-txt.animate .marker{
  animation:marker 1.2s ease forwards;
}

.concept-heading.animate .marker:nth-of-type(2),
.res-txt.animate .marker:nth-of-type(2){
  animation-delay:0.4s;
}

.concept-heading.animate .marker:nth-of-type(3),
.res-txt.animate .marker:nth-of-type(3){
  animation-delay:0.4s;
}

@keyframes marker{
  from{
    background-size:0% 25%;
  }
  to{
    background-size:100% 25%;
  }
}

.concept-txt{
  font-size: 113%;
line-height:2.0;
	font-weight: 300;

}

.concept-txt > span{
	border-bottom:1px dashed #d4b896;
}

/* Block 2: small image left, text right */
.concept-b2{
display: flex;
justify-content: space-between;
	align-items: center;
}

.concept-img-b2{
	width:36%;
	
}

.concept-b2 > .concept-text-b2{width: 60%;}

/* 小さい画面用の設定-------------- */
@media (max-width:767px) {
	
#concept{
	padding:40px 0;
}
	
  .concept-b1 {
    flex-wrap: wrap;
    margin-bottom: 30px;
  }
  .concept-b1 > .concept-text-b1 {
    width: 100%;
	  
  margin-bottom: 20px;}
	
	
  .concept-img-b1 {
    width: 100%;
    margin-right: 0;
  }


  .concept-img-b1 img{
    min-height: 0;
  }
  .concept-heading {
    font-size: 113%;
    margin-bottom: 15px;
  }
  .concept-txt {
    font-size: 88%;
  }
  /* Block 2: small image left, text right */
  .concept-b2 {
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
  .concept-img-b2 {
    width: 100%;
  }
  .concept-b2 > .concept-text-b2 {
    width: 100%;
	    margin-bottom: 20px;
  }
}
/* -------------end------------- */



/* price------------------------------------------------------------ */

#menu{
	background:var(--cream);
	overflow: hidden;
	padding: 80px 0;
	background-image: url(../img/menu_bg_right_top.png);
	background-repeat: no-repeat;
	background-position: right top;
	background-size: 30% auto;
}



.menu-wrap{max-width:100%;
	margin:0 auto;
	position:relative
		;z-index:1}
.tabs{display:flex;
	flex-wrap:wrap;
	gap:0;
	margin-bottom:40px;
	border:1px solid #d9c9b8}
.tab{
  flex:1;
	min-width:0;
  padding:12px 8px;text-align:center;
  font-family:var(--en);
	font-size:125%;
	text-transform:uppercase;
  background:none;
	border:none;
	border-right:1px solid #d9c9b8;
  color:var(--brown-mid);
	cursor:pointer;
  transition:all 0.2s;
}
.tab:last-child{border-right:none}
.tab .tlab{
  display:block;font-family:var(--jp);
  font-size:70%;
	font-weight: 300;
		margin-top:3px;
color:var(--brown-dark);
}
.tab.active{background:var(--brown-mid);color:#fff}
.tab.active .tlab{color:rgba(255,255,255,0.8)}
.tab:hover:not(.active){background:rgba(139,99,67,0.06)}
.panel{display:none}
.panel.active{display:block;animation:pfade 0.3s ease}
@keyframes pfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.panel{width: 86%;
	margin-left: auto;
	margin-right: auto;
margin-bottom: 10px;}

.msubhead{background-color:var(--cream2);
padding: 5px 10px;

}

.tb_menu {
  border-spacing: 0;
  border-collapse: collapse;
  color: var(--brown-dark);
	margin-bottom: 20px;
}



.tb_menu td {
	padding-bottom: 5px;
	padding-top: 5px;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: var(--brown-light);

}

.mname {
padding-left: 10px;
}


.mname::before {
  content: "\f111"; /* FontAwesome の丸（solid circle）Unicode */
  font-family: "Font Awesome 6 Free"; /* FA5の場合 */
  font-weight: 900; /* solid用 */
  display: inline-block;
  margin-right: 6px; /* アイコンと文字の間隔 */
}

.mprice {
  text-align: right;
  white-space: nowrap;
  padding-left: 20px;
	width: 15%;
	  font-family:var(--en);
	font-size:150%;
  font-weight:700;
	
}

.non_tax {
  text-align: right;
  white-space: nowrap;
  padding-left: 10px;
	padding-right: 10px;
	width: 10%;
	font-size: 88%;
}

.menu_attension{width: 86%;
	margin-left: auto;
	margin-right: auto;
	text-align:right;
		font-size: 88%;
	font-weight: 300;
}

/* 小さい画面用の設定-------------- */
@media (max-width:767px) {
  #menu {
    padding: 40px 0;
    background-image: url(../img/menu_bg_right_top.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 60% auto;
  }
  .tabs {
    flex-wrap: wrap;
    margin-bottom: 30px;
  }
  .tab {
    flex: 0 0 33.333%;
    border-bottom: 1px solid #d9c9b8;
    padding: 8px 2px;
    font-size: 80%;
  }
  /* 3番目と6番目の右線を消す */
  .tab:nth-child(3), .tab:nth-child(6) {
    border-right: none;
  }
  .tab:last-child {
    border-right: none
  }
  .tab .tlab {
    margin-top: 1px;
  }
  .panel {
    width: 100%;
  }
  .msubhead {
    font-size: 88%;
  }
  .tb_menu td {
    padding-bottom: 3px;
    padding-top: 3px;
  }
  .mname {
    padding-left: 5px;
    font-size: 88%;
  }
  .mprice {
    font-size: 100%;
    padding-left: 5px;
    width: 15%;
  }
  .non_tax {
    font-size: 75%;
  }
  .menu_attension {
    width: 100%;
    font-size: 75%;
  }
}
/* -------------end------------- */

/* SALON INFO------------------------------------------------------------ */

#saloninfo{
background-image:url('../img/shop_info_img02.png');
  background-size:cover;background-position:center;
position: relative;

}

#saloninfo::after{content:'';
	position:absolute;
	inset:0;
	background:rgba(61,36,15,0.50);}


/*#saloninfo{position:relative;overflow:hidden;padding:0}
.si-bg{
  position:absolute;inset:0;
  
}
*/
.si-inner{
  position:relative;
/*display: flex;*/
	
  max-width:1160px;
	margin-left: auto;
	margin-right: auto;
	z-index: 99;

 /* display:grid;
	grid-template-columns:1fr 1fr;
  gap:0;
	align-items:center;*/
}
.si-img{
position: absolute;
top:-80px;
	
	
}
.si-img img{
  width:100%;
	max-width:380px;
  display:block;
  border:10px solid #fbf6ef;
  object-fit:cover;
	height:290px;
}
.si-box{
	padding: 80px 30px;
	width: 35%;
	margin-right: 0;
	margin-left: auto;
	background-color: rgba(250,246,239,0.80);
	color: var(--brown-dark);
	background-image: url(../img/kanban.png);
	background-position: right 30px bottom;
	background-repeat: no-repeat;
	background-size: 25%;}

.si-name{font-size: 225%;
font-family: var(--en);
font-weight: 600;
line-height: 1.4;}

.si-name > span{font-size: 80%;}

.si-tel{font-size: 240%;
font-family: var(--en);
font-weight: 600;
	margin-bottom: 20px;
}

.si-tel::before{content: "\f095"; 
  font-family: "Font Awesome 6 Free"; 
  font-weight: 900; /* solid用 */
  display: inline-block;
  margin-right: 6px; /* アイコンと文字の間隔 */}


/* 小さい画面用の設定-------------- */
@media (max-width:767px){
/*#saloninfo{
background-image:url('../img/IMG_0678.jpeg');
  background-size:cover;background-position:center;
position: relative;

}

#saloninfo::after{content:'';
	position:absolute;
	inset:0;
	background:rgba(61,36,15,0.50);}*/


/*#saloninfo{position:relative;overflow:hidden;padding:0}
.si-bg{
  position:absolute;inset:0;
  
}
*/
	
	  .si-inner{padding:0 20px}
	
.si-inner{
/*  position:relative;*/
/*display: flex;*/
	
/*  max-width:1160px;
	margin-left: auto;
	margin-right: auto;
	z-index: 99;*/

 /* display:grid;
	grid-template-columns:1fr 1fr;
  gap:0;
	align-items:center;*/
}
.si-img{
/*position: absolute;*/
top:-40px;
	left: 10px;
	z-index: 999;
	
	
}
.si-img img{
  width:100%;
	max-width:120px;
  display:block;
  border:5px solid #fbf6ef;
  object-fit:cover;
	height: auto;
}
.si-box{
	padding: 60px 20px;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	
	background-image: url(../img/kanban.png);
	background-position: right 20px bottom;
	background-repeat: no-repeat;
	background-size: 25%;}

.si-name{font-size: 175%;
	text-align: center;}


.si-tel{font-size: 188%;
	text-align: center;
}
.si-txt {font-size: 88%;}

}
/* -------------end------------- */


/* RESERVATION------------------------------------------------------------ */

#reservation{padding: 80px 0;
	background:var(--cream2);}

.res-txt{text-align: center;
margin-bottom: 50px;
font-size: 125%;
font-weight: 700;}

/*.res-wrap > p{
  font-size:14px;line-height:2;color:#5a3e2b;
  font-weight:300;margin-bottom:36px;
}*/
.res-btns{display:flex;
	gap:16px
	;justify-content:center;
	flex-wrap:wrap}

.res-btn{
  flex:1;
	max-width:400px;
  padding:20px 20px;
	text-align:center;
  font-family:var(--jp);
	font-weight:700;
	font-size: 225%;
display:flex;
	line-height: 1.4;
	flex-direction:column;
  align-items:center;
	gap:4px;
	transition:all 0.2s;
}
.res-btn-web{background:var(--cta);
	color:var(--cream2);
position: relative;}

.res-btn-web:hover{background:var(--brown-dark)}


.res-btn-tel{background:rgba(250,246,239,0.80);
	color:var(--brown-mid);
	border:2px solid var(--brown-mid);
}

.res-btn-tel:hover{background:var(--brown-mid);color:var(--cream2);}

.res-btn .rbsub{font-size: 50%;
	font-weight:400;
	font-family:var(--jp)}

.res-btn{
  position: relative;
}

.res-btn-web,
.res-btn-tel{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.res-btn-web > p::before,
.res-btn-tel > p::before{
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 8px;
}
.res-btn-web > p::before{
  content: "\f073";
}

.res-btn-tel > p::before{
  content: "\f095";
}

/* 小さい画面用の設定-------------- */
@media (max-width:767px) {
  #reservation {
    padding: 40px 0;
  }
  .res-txt {
    text-align: center;
    margin-bottom: 30px;
    font-size: 113%;
    font-weight: 700;
  }
  .res-btns {
    flex-direction: column;
    align-items: center; /* 中央寄せ */
	  font-size: 70%;
  }
  .res-btn {
    width: 100%;
  }
  .res-btn {
    padding: 15px 20px;
  }
}
/* -------------end------------- */


/* MAP------------------------------------------------------------ */

#mapwrap{height:440px;overflow:hidden;padding:0}
#mapwrap iframe{width:100%;height:100%;border:none;display:block}
iframe {
  display: block;
}

/* FOOTER------------------------------------------------------------ */

footer{
  background:var(--brown-mid);
  padding:52px 40px 28px;
  text-align:center;
}
.footer-logo{width:10%;
	margin-bottom:30px;
margin-left: auto;
margin-right: auto;}

.footer-nav{
  display:flex;
	flex-wrap:wrap;
	gap:6px 4px;
  justify-content:center;
	margin-bottom:60px;
}
.footer-nav a{
  font-family:var(--en);
	font-size:88%;
	color:var(--cream);
  padding:0 10px;
  border-right:1px solid var(--cream);
  line-height:1;
  transition:color 0.2s;
}
.footer-nav a:last-child{border-right:none}
.footer-nav a:hover{color:#fff}

.footer-copy{font-size:75%;
	color:var(--cream);
	font-family:var(--en);
}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){

.footer-logo{width:30%;}


}
/* -------------end------------- */
/* FLOAT------------------------------------------------------------ */

#floatbtn{
  position:fixed;
  right:0;
  top:50%;
  transform:translateY(-50%) translateX(100%);
  z-index:900;
  transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

#floatbtn.show{
  transform:translateY(-50%) translateX(0);
}
#floatbtn a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;

  background:var(--cta);
  color:var(--cream2);
  padding:20px 15px;
  text-decoration:none;
  border-radius:10px 0 0 10px;
font-size: 113%;
  font-weight:600;
}

#floatbtn .jp{
  writing-mode: vertical-rl;
  text-orientation: upright;
	font-family: "Noto Sans JP", sans-serif;
}





/* Reservation：縦方向に積む（回転しない） */
#floatbtn .en{
  writing-mode: vertical-rl;
  text-orientation: mixed;
	font-weight:400;
	font-size: 88%;
}

#floatbtn a i{
  font-size:30px;
}

#floatbtn a:hover{background:var(--brown-dark)}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
#floatbtn{
font-size: 80%;
}
	#floatbtn a{
  padding:10px 10px;
}

}
/* -------------end------------- */

/* BACK TOP------------------------------------------------------------ */

#backtop{
  position:fixed;right:24px;bottom:28px;
  width:42px;height:42px;
  background:var(--brown-mid);color:#fff;
  display:flex;align-items:center;justify-content:center;
  border-radius:2px;cursor:pointer;
  opacity:0;transform:translateY(8px);
  transition:opacity 0.3s,transform 0.3s,background 0.2s;
  z-index:900;pointer-events:none;
}
#backtop.show{opacity:1;transform:translateY(0);pointer-events:auto}
#backtop:hover{background:var(--brown-dark)}

/* RESPONSIVE */
@media(max-width:1024px){
/*  header{padding:12px 24px}*/
  header.compact{padding:8px 24px}
  nav{display:none}
  .hamburger{display:flex}
/*  #hero{grid-template-columns:55% 45%}
  .hero-right{padding:32px 32px}*/
/*  .concept-b1,.concept-b2{gap:40px}
  .concept-b1-img{margin-right:-24px}*/

}
@media(max-width:768px){
/*  section{padding:60px 0}
  #hero{
    margin-top:60px;height:calc(100vh - 60px);
    grid-template-columns:1fr;grid-template-rows:55% 45%;
  }
  .hero-img-wrap{order:1}
  .hero-right{order:2;padding:24px 24px 32px;justify-content:flex-start}
  .hero-right .hero-logo img{width:130px}
  .hero-copy-line .txt{font-size:clamp(16px,5vw,22px)}
  .hero-btns{gap:10px}
  .btn-fill{padding:11px 20px;font-size:10px}
  .concept-wrap{padding:0 20px}
  .concept-b1,.concept-b2{grid-template-columns:1fr;gap:28px}
  .concept-b1-img{margin-right:0}
  .concept-b1-img img,.concept-b2-img img{height:220px;border-radius:4px}
  .menu-wrap{padding:0 20px}
  .tabs{overflow-x:auto;flex-wrap:nowrap}
  .tab{min-width:80px;flex:0 0 auto;font-size:9.5px;padding:10px 8px}
  .si-inner{grid-template-columns:1fr;padding:48px 20px;gap:28px;min-height:auto}
  .si-img{margin:0}
  .si-img img{max-width:100%;height:220px}
  .si-box{margin-left:0;padding:28px 24px}
  .res-wrap{padding:0 20px}
  .res-btns{flex-direction:column;align-items:center}
  .res-btn{max-width:100%;width:100%}
  footer{padding:40px 20px 24px}
  .footer-nav{gap:8px 0}*/
}

/*.nav_fixed {
		position:fixed;
		top:0;
		left:0;
z-index: 10000;
}*/

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.on {
  opacity: 1;
  transform: translateY(0);
}

/************************************
下層プライバシー・お問い合わせ
*************************************/

  /* PAGE HERO */
  .page-hero {
    background: var(--color-light);
    padding: 40px 0px 0px;
    text-align: center;
    position: relative;
    overflow: hidden;
	background:var(--cream);
  }

/* ------------------------------------------------------------ */
#contact,
#privacy{background:var(--cream);
	overflow:hidden;
	padding:80px 0;
}
/* 小さい画面用の設定-------------- */
@media (max-width:767px){
#contact,
	#privacy{
	padding:40px 0;
}
	
}
/* -------------end------------- */
.contact-wrap,
.privacy-wrap{
	max-width:1000px;
	margin:0 auto;
	padding:0 20px;
}



  .privacy-intro {
margin-bottom: 60px;
text-align: center;

  }
  .privacy-section {
    margin-bottom: 30px;
  }
  .privacy-section h2 {
	  font-size: 113%;
    font-weight: 700;
    color: var(--brown-dark);
    margin-bottom: 10px;
  }
  .privacy-section p {
	   padding-left: 20px;
  }


.ordinary_ol {
counter-reset:item; /* 数字のカウントをリセットする */
padding-left: 20px;
	margin-top: 8px;
}

.ordinary_ol > li{
  text-indent: -1.8em;
  padding-left:1.8em;
}

.ordinary_ol > li:before{
/* カウンタ（数字になる部分） */
counter-increment: item; /* 任意の名前を付けて！ */
content: counter(item); /* 名前を付けたカウンターを呼び出し */
/* 色を変えたり、背景画像を敷いたり！自由自在！ */
	  counter-increment: item;/* 任意の名前を付ける（もちろん英語で） */
  content: counter(item)'.';/* 名前を付けたカウンターをcontentで発動！ */
  /* 以下は自由に装飾... */
  padding-right: .5em;

}

  .privacy-date {
    text-align: right;
    font-size: 82%;
    padding-top: 20px;
  }

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
  .privacy-intro {
margin-bottom: 30px;
text-align: left;
	  font-size: 88%;

  }
	
	  .privacy-section h2 {
	  font-size: 100%;

  }
  .privacy-section p {
	  font-size: 88%;
  }
}
/* -------------end------------- */

/************************************
送信完了
*************************************/

.thanks_img{width:30%;
margin-left: auto;
margin-right: auto;
padding-top: 50px;}


/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.thanks_img{width: 50%;
margin-left: auto;
margin-right: auto;
padding-top: 50px;}
	}
/* -------------end------------- */


#concept_link,
#menu_link,
#saloninfo_link,
#reservation_link{
    padding-top: 75px;
        margin-top:-75px;}