hightouch@charset "UTF-8";

p {margin-bottom:1em;}
p:last-child {margin-bottom:0;}
img {max-width: 100%; width:100%; height: auto; vertical-align:top;user-select: none;-webkit-user-select: none;-webkit-user-drag: none;image-rendering: crisp-edges;}


/*class setting*/
.flex{display:flex;flex-wrap:wrap;}
a.nolink {background:lightgray !important; color:white !important; border-color:lightgray !important;}
.graybutton{
    display: block;
    background: #BBB;
    border: 2px solid #BBB;
    color: #fff;
    font-size: 125%;
    padding: 0.35em 0.5em;
    border-radius: 5px;
    text-align:center;
}


/* html */

section h2 {
font-family: "Noto Serif JP", serif !important;
font-size:clamp(1.6rem,2vw,3rem);
margin-bottom: 1em;
}

/*common class*/
.flex {
position: relative;
display: flex;
flex-wrap: wrap;
}
.line-through {text-decoration:line-through;}
.nowrap{white-space: nowrap;}
.small {font-size:clamp(1.2rem,85%,1.6rem);}
.center {text-align:center;}
@media (max-width: 760px){
.alignright{ float: none; margin-left: 0; }
.alignleft{ float: none; margin-right: 0;}
.small {font-size:clamp(1rem,85%,1.4rem);}
}
.precautions li { display: flex; align-items: baseline;}
.precautions li:before { content: "\203B"; margin-right: 2px; }
.anchor { padding-top: 70px; margin-top: -70px;}

/*body*/
#body {font-size: 100%; padding-bottom:3em;}
@media(max-width: 768px) { #body {font-size: 110%;} }
#body .section {
 width: 100%;
 margin-bottom:3em;
}
#body h2 {font-size:150%;}
.main {
	background: url('../img/page_bg.svg') repeat-y center center/cover;
	position: relative;
	font-size: 1.6rem;
	position:relative;
	z-index:0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing:grayscale;
	color:#544;
	padding:0 8vw;
}
.main:after {
content:"";
	background: url('../img/leaves_bg.svg') repeat-y center top;
	position: absolute;
	z-index:1;
	inset:0;
	width:100%;
	height:100%;
	background-size:100%;
}
@media(max-width: 768px) { .main {padding:0 3vw;} }

/* mainvisual */
.main #header {margin-top:0;}
#header h2{margin:0 0 10px; width:100%;}

#lead {font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-style: normal; font-weight: 700;width:75%; margin:0 auto; padding-top:0; font-weight: 500; text-align:center; font-size:clamp(1rem,1.6vw,2rem);}
#lead span {white-space: nowrap;}
@media (max-width: 760px){
#price {padding-top: 4em !important; background-size:60% !important;}
#lead {width:90%; font-size:clamp(110%,2.1vw,200%);}
}

#price {margin:3em auto 2em;padding-top:8vw;background: url("../img/menus_bg.svg") no-repeat 50% 0 / 35vw; padding-bottom:1em;}
#price h2 {text-align:center; margin-bottom:2em;}
#price h3 span {display:inline-block; font-size:clamp(1.4rem,1.4vw,2.0rem); transform: scale(0.8, 1); transform-origin: top left;}
#price li p {font-size:clamp(1.4rem,1.4vw,2.0rem); padding-top:.35em;}

#reservation {margin:0 auto; padding-top:8vw; background: url("../img/reservation_bg.svg") no-repeat 50% 0 / 30vw; padding-bottom:1em;}
#reservation h2 {text-align:center; margin-bottom:2em;}
#reservation .salonname {font-family: "Noto Serif JP", serif !important; font-weight: 700; font-size:clamp(1.8rem,1.8vw,2.4rem); margin-bottom:0; line-height: 1;}
#reservation .salonname span {display:inline-block; font-size:clamp(.9rem,1vw,1.2rem); transform: scale(0.8, 1); transform-origin: top left;}
#reservation .tel { font-size:clamp(1.8rem,2vw,2.4rem); margin-bottom:0.1em; position:relative; z-index:2;}
@media(min-width: 768px) { a[href^="tel:"] { pointer-events: none; text-decoration:none; color:#544; } }
#reservation p,#reservation ul { margin-bottom:1.5em;}
#reservation .flex{justify-content:space-between;}
#reservation .flex > div {flex-basis:48%;}

/*access*/
#mapcontainer {margin-top:1.5vw;}
@media(max-width: 768px) { #reservation .flex > div {flex-basis:100%;} }
iframe {display: block;}


/* 今すぐご予約 */
#reservation_btn {
display:block;
position: fixed;
z-index:2;
right: 15px;
bottom: 15px;
}
#reservation_btn a {
display: grid; place-content: center;
color:#fff;text-align:center;
background: #910016;
padding: 10px;
width:80px;
height:80px;
border-radius: 50%;
box-shadow: 0 0 5px rgba(100,50,75,.5);
font-size:.75rem;
font-weight:900;
text-decoration:none;
}
#reservation_btn a:hover {
transform: scale(1.1); transform-origin: center center;
color:#fff;
}