@charset "UTF-8";
/* CSS Document */
*,*::before,*::after{box-sizing:border-box;margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}
ul[role='list'],ol[role='list']{list-style:none}
body{min-height:100vh;line-height:1.8}
h1,h2,h3,h4,button,input,label{line-height:1.1}
h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}
img,picture{max-width:100%;display:block}
input,button,textarea,select{font:inherit}
textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
a{text-decoration: none;color: inherit;}
table{border-collapse: collapse;border-spacing: 0;}
/*
font-family: "Shippori Mincho B1", serif;45678
font-family: "Dancing Script", cursive;4567
*/

/*共通*/
html {
font-size: 62.5%;
}
body{
background-image: 
  url("/img/body_b01.png"),
  url("/img/body_b02.png"),
  url("/img/staff_b02.png"),
  url("/img/back.jpg");
background-repeat: 
  no-repeat,
  no-repeat,
  no-repeat,
  repeat;
background-position:
  top 650px left calc((100% - 1300px)/2 + 0rem),
  top 1150px right calc((100% - 1300px)/2 + 28rem),
  top 320rem right calc((100% - 1300px)/2 + 5rem),
  center center;
background-size: 
  1200px,
  700px,
  440px,
  auto;
font-size: 1.6rem;
font-family: "Shippori Mincho B1", serif;
font-weight: 400;
text-align: justify;
position: relative;
}
h1,h2,h3,h4{
line-height: 1.4;
}
a,button{
display: block;
transition: 0.5s;
}
a:hover,button:hover {
opacity: 0.5;
}
p{
line-height: 1.8;
}
.contents-p0{
max-width: 1300px;
margin: 0 auto;
}
.contents{
max-width: 1330px;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
@media screen and (max-width: 768px) {
body{
background-image: 
  url("/img/body_b01.png"),
  url("/img/body_b02.png"),
  url("/img/staff_b02.png"),
  url("/img/back.jpg");
background-repeat: 
  no-repeat,
  no-repeat,
  no-repeat,
  repeat;
background-position:
  top 850px left -400px,
  top 1300px right -50px,
  top 2650px right -7rem,
  center center;
background-size: 
  600px,
  250px,
  200px,
  auto;
font-size: 1.4rem;}
}
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeInAnime{
  from {opacity: 0;}
  to {opacity: 1;}
}

/*ヘッダー*/
.headbox{
background-image: url("/img/head_b01.png"),url("/img/head_b02.png");
background-repeat: no-repeat,no-repeat;
background-position: top left calc((100% - 1300px)/2 + 5rem),top 1rem right calc((100% - 1300px)/2 + 6rem);
background-size: 18rem,30rem;
}
header {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
  position: relative;
padding-top: 1.5rem;
}
h1{
max-width: 500px;
}
.span-container,
.checkbox {
  width: 25px;
  height: 25px;
  position: fixed;
  right: 2rem;
  top: 2rem;
}
.checkbox {
  opacity: 0;
  z-index: 30;
}
.span-container {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  z-index: 29;
}
.span-container span {
  width: 100%;
  height: 3px;
  background: #a6a6a7;
  transition: all 250ms ease-out;
  transform-origin: 0 0;
}
.checkbox:checked ~ .span-container span:nth-last-child(1) {
    transform: rotate(-45deg) translate(-1px, 0px);
    background: #000;
}
.checkbox:checked ~ .span-container span:nth-last-child(2) {
    transform: rotate(0deg) scale(0.2, 0.2);
    opacity: 0;
}
.checkbox:checked ~ .span-container span:nth-last-child(3) {
    transform: rotate(45deg) translate(0px, -1px);
    background: #000;
}
nav {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  z-index: 29;
  background: rgba(219,231,224,0.9);
  transition: all 250ms ease-out;
  transform: translateX(-100%);
}
nav a {
  text-decoration: none;
  margin: 1rem auto;
}
.checkbox:checked ~ nav {
  transform: translateX(0%);
}
nav ul{
list-style: none;
text-align: center;
}
nav ul li{
display: inline-block;
}
nav ul.sns li{
width: 55px;
}
nav ul.sns li.tel{
width: 100%;
display: block;
font-family: "Dancing Script", serif;
font-size: 2rem;
letter-spacing: 0.2rem;
}
nav ul.sns li.tel img{
width: 25px;
display: inline;
vertical-align: text-bottom;
}
nav ul.navi li{
display: block;
}
nav ul.navi li a:hover {
  color: #2d4629;
}
.swiper-container {
display: block;
width: 90%;
overflow: hidden;
position: relative; /* 要素を相対位置に */
margin-top: 3rem;
}
.swiper-slide img {
max-width: 100%;
max-height: 100%;
}
/* 上下中央に配置するスタイル */
.swiper-button-next, .swiper-button-prev {
color: #fff;
cursor: pointer;
outline: none;
}
.swiper-button-next {
right: 10px;
}
.swiper-button-prev {
left: 10px;
}

.head-menu{
position: relative;
z-index: 1;
margin-top: -3rem;
padding: 0 10%;
}
.head-menu ul{
list-style: none;
display: flex;
align-items:center;
justify-content: center;
}
.head-menu ul li{
width: 18%;
}
.head-menu ul li:last-of-type{
width: auto;
padding-left: 3rem;
color: #727374;
font-weight: 600;
letter-spacing: 0.1rem;
}
.head-menu ul li img{
width: 100%;
}

@media screen and (min-width: 1000px) {
.checkbox,.span-container{display: none;}
header {
max-width: 1330px;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
nav{
position: relative;
left: none;
top: none;
width: auto;
height: 100%;
z-index: 10;
background: transparent;
transition: none;
transform: none;
}
nav ul li{
display: inline-block;
}
nav ul.sns li{
width: 60px;
}
nav ul.sns li.tel{
display: inline-block;
width: auto;
font-size: 3rem;
letter-spacing: 0.2rem;
vertical-align: top;
padding: 1rem 1rem 0 0;
}
nav ul.sns li.tel img{
width: 50px;
display: inline;
}
nav ul.navi{
margin-top: 2rem;
display:flex;
justify-content: space-between;
background: #fff;
border: 1px solid #c4c4c4;
border-radius: 50px;
padding: 0 1.5rem;
box-shadow: 5px 8px 8px rgba(0, 0, 0, 0.2);
}
nav ul.navi li{
padding: 1.5rem;
}
nav ul.navi li:first-of-type{
margin-left: 1.5rem;
}
nav ul.navi li:last-of-type{
margin-right: 1.5rem;
}
}
@media screen and (min-width: 768px) {/*PC*/
a[href^="tel:"] {pointer-events: none;}
}
@media screen and (max-width: 1300px) {
.headbox {background-position: top left -3rem,top 1rem right -8rem;}
}
@media screen and (max-width: 1180px) {
nav ul.navi{margin-top: 1rem;padding: 0 .5rem;}
nav ul.navi li{padding: 1rem;}
.head-menu{margin-top: -1rem;;padding: 0 15px;}
.head-menu ul li{width: 15%;}
}
@media screen and (max-width: 768px) {
.headbox{background-position: top left -1rem,top -6rem right 5rem;background-size: 9rem,11rem;}
header {padding: 1rem;}
h1{width: 50%;}
.swiper-container {width: 100%;margin-top: 0rem;}
.headbox .contents{padding: 0;}
.swiper-button-next:after,.swiper-button-prev:after {font-size: 18px;}
.swiper-button-next {right: 0px;}
.swiper-button-prev {left: 0px;}
.head-menu ul{display: block;text-align: center;}
.head-menu ul li{display: inline-block;width: 30%;}
.head-menu ul li:last-of-type{display: block;padding: 0;letter-spacing: 0;}
}

.reserv{
position: fixed;
cursor: pointer;
z-index: 20;
}
.reserv .pc-show{
top: 40rem;
right: 0;
width: 8rem;
}
.reserv a img{
width: 100%;
}
@media screen and (max-width: 768px) {
.reserv .sp-show{
bottom: 1rem;
right: 1rem;
width: 8rem;
display: block!important;
}
}

/*NEWS*/
#news{
margin: 4rem 0 0;
}
#news .contents-p0{
padding-left: 320px;
}
#news .box{
background-color: rgba(0, 0, 0, 0.12);
width: 100%;
padding: 7rem 6rem 6rem 10rem;
position: relative;
}
#news h2{
font-family: "Dancing Script", serif;
font-size: 10rem;
text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
position: absolute;
top:-6.5rem;
left: 4rem;
line-height: 1;
}
#news ul{
list-style: none;
padding: 0 15px;
background: #fff;
width: 100%;
}
#news ul li{
background: url("/img/news_icon01.png") no-repeat center right 1.5rem / 18px;
padding: 2rem 3.8rem 2rem 1rem;
border-bottom: 0.5px solid #a6a6a7;
}
#news ul li:last-of-type{
border: none;
}
#news ul li .day{
font-family: "Dancing Script", serif;
}
#news ul li p{
display: inline-block;
margin: 0 1rem;
padding: 0 1rem;
background-color: #a6a6a7;
border-radius: 15px;
color: #fff;
font-family: "Dancing Script", serif;
font-size: 1.3rem;
line-height: 1;
}
@media screen and (max-width: 1300px) {
#news .contents-p0{padding-left: 20%;}
}
@media screen and (max-width: 1000px) {
#news .contents-p0{padding-left: 0;}
}
@media screen and (max-width: 768px) {
#news .box{padding: 3rem 1.5rem;}
#news h2{font-size: 5rem;top:-3rem;left: 3rem;}
#news ul li{padding: 1.5rem 3.8rem 1.5rem 1rem;}
}

/*ABOUT -ChaiDeeについて-*/
#about{
margin: 4rem 0 0;
}
#about .contents{
padding: 0 12rem;
}
#about h2{
font-family: "Dancing Script", serif;
font-size: 9rem;
text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
}
#about h2 span{
font-family: "Shippori Mincho B1", serif;
font-weight: 700;
font-size: 3.5rem;
}
#about .box{
padding: 0 7rem 3rem 7rem;
margin: 3rem 0 0 7rem;
border-left: 1px solid #333;
}
#about .inner{
border: 1px solid #bfc0c0;
background: rgba(255, 255, 255, 0.7);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
padding: 4rem 5rem 5rem;
}
#about .inner h3{
font-weight: 700;
font-size: 4rem;
}
#about .inner p{
margin-top: 1.5rem;
}
#about h4{
font-weight:600;
font-size: 2.7rem;
background-image: linear-gradient(90deg, rgba(140, 167, 150, 1), rgba(171, 191, 161, 1) 50%, rgba(140, 167, 150, 1));
padding: 0.5rem;
margin-top: 1.5rem;
color: #fff;
letter-spacing: 0.1rem;
text-align: center;
}
#about h4 p{
border: 0.5px solid #fff;
line-height: 120%;
padding: 1rem;
}

#about .contents-p0{
padding-left: 350px;
position: relative;
}
#about .contents-p0 .photo{
width: 400px;
position: absolute;
top:10rem;
left: 0;
}
#about .box02{
background: url("/img/about_logo.png") no-repeat bottom 1rem right 7rem;
background-color: rgba(0, 0, 0, 0.12);
width: 100%;
padding: 7rem 7rem 7rem 10rem;
}
#about .box02-inner{
padding: 1rem 2rem;
background: #fff;
}
#about table tr{
border-bottom: 0.5px solid #a6a6a7;
}
#about table tr:last-of-type{
border: none;
}
#about table th{
padding: 1.5rem .5rem 2rem 0;
}
#about table td{
padding: 1.5rem .5rem;
}
#about table th{
white-space: nowrap;
text-align-last: justify;
}
#about table span{
letter-spacing: 0.1rem;
}
@media screen and (max-width: 1300px) {
#about .contents{padding: 0 3rem;}
}
@media screen and (max-width: 1000px) {
#about .contents{padding: 0 1.5rem;}
#about .contents-p0{padding-left: 200px;}
#about .contents-p0 .photo{width: 240px;top:5rem;}
#about .box02{padding: 5rem 5rem 5rem 7rem;}
}
@media screen and (max-width: 768px) {
#about h2{font-size: 4rem;}
#about h2 span{font-size: 2rem;}
#about .box{padding: 0 0 3rem 2rem;margin: 1.5rem 0 0 1.5rem;}
#about .inner{padding: 1.5rem 2rem 2rem;}
#about .inner h3{font-size: 2.5rem;}
#about .inner p{margin-top: 1.5rem;}
#about h4{font-size: 2rem;padding: 0.5rem;margin-top: 1.5rem;}
#about .contents-p0{padding-left: 0;}
#about .contents-p0 .photo{width: 100%;position: relative;padding: 0 1.5rem;top:0;}
#about .box02{background-size: 200px auto;background-position: bottom right;
margin-top: 1rem;padding: 1.5rem 1.5rem 3rem;}
#about .box02-inner{padding: .5rem 1rem;}
#about table{font-size: 85%;}
#about table th{padding: .5rem 0 .5rem 0;}
#about table td{padding: .5rem .5rem;}
#about table th{text-align-last:left;}
}

/*STAFF*/
#staff{
margin: 4rem 0 0;
background: url("/img/staff_b01.png") no-repeat bottom left calc((100% - 1300px)/2 + 3rem)  / 480px;
padding-bottom: 22rem;
}
#staff h2{
font-family: "Dancing Script", serif;
font-size: 10rem;
text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
line-height: 1;
padding-left: 10rem;
}
#staff .box a{
display: inline;
}
#staff .links{
display: flex;
justify-content: center;
margin-top: 3rem;
}
#staff .links button{
width: 300px;
margin: 0 15px;
position: relative;
color: #000;
}
#staff .links button img{
width: 100%;
}
#staff .links button .name{
position: relative;
}
#staff .links button .name-inner{
position: absolute;
top: -2rem;
left: 2rem;
border-left: 1px solid #000;
padding: 4rem 0 0 2rem;
text-align: left;
}
#staff .links button .name-inner h4{
font-size: 2rem;
letter-spacing: 0.1rem;
font-weight: 600;
}
#staff .links button .name-inner p{
margin-top: 1rem;
}
.modal {
display: none; 
position: fixed; 
z-index: 30; 
left: 50%;
top: 5%;
max-width: 1000px;
inset: 0;
margin: auto;
width: 90%;
height: 90%;
background-color: rgba(0,0,0,0.8);
padding: 3rem;
}
.modal-content {
height: 100%;
margin: auto; /* 垂直・水平方向の中央揃え */
padding: 5rem 2rem 5rem;
border: 1px solid #fff;
position: relative; /* 相対配置 */
color: #fff;
overflow:scroll; 
}
.modal-content .box{
display: flex; 
}
.modal-content .box1{
margin: 0 3rem;
width: 65%;
}
.modal-content .box1 h2{
font-size: 9.5rem;
text-shadow: none;
padding-left: 0!important;
}
.modal-content .box1 .name-inner{
border-left: 1px solid #fff;
padding-left: 2rem;
}
.modal-content .box1 h4{
margin-top: 4rem;
font-size: 2.5rem;
letter-spacing: 0.1rem;
font-weight: 600;
}
.modal-content .box1 h3{
font-size: 2rem;
margin: 2rem 0 0;
}
.modal-content .box1 > p{
margin: 2rem 0 0;
}
.modal-content .box2{
width: 30%;
margin: 2rem 3rem 0;
}
.modal-content .box2 img{
width: 100%;
display: inline-block;
}
.modal-content .box2 p{
margin: 1rem 0;
line-height: 140%;
}
.modal-content table{
margin: 3rem 3rem;
}
.modal-content table tr{
border-bottom: 0.5px solid #a6a6a7;
}
.modal-content table tr:last-of-type{
border: none;
}
.modal-content table th{
white-space: nowrap;
padding: 1.5rem .5rem 2rem 0;
}
.modal-content table td{
padding: 1.5rem .5rem;
}
.close {
position: absolute; /* 絶対配置 */
top: 0;
right: 2rem;
color: #fff;
font-size: 4rem;
font-weight: bold;
cursor: pointer;
}
.close:hover,
.close:focus {
color: #c3c3c3;
text-decoration: none;
}
/* モーダルが表示されるとき */
.modal.show {
display: block;
}
@media screen and (max-width: 768px) {
#staff{margin: 2.5rem 0 0;background: url("/img/staff_b01.png") no-repeat bottom left -9rem / 150px;
}
#staff h2{font-size: 4rem;padding-left: 1.5rem;}
#staff .links{margin-top: 1.5rem;}
#staff .links button{margin: 0 5px;}
#staff .links button .name-inner{top: -1.5rem;left: 0.5rem;padding: 2rem 0 0 1.5rem;}
#staff .links button .name-inner h4{font-size: 1.6rem;}
#staff .links button .name-inner p{margin-top: 1rem;font-size: 85%;}
.modal {
left: 0;
top: 0;
width: 100%;
height: auto;
padding: 1.5rem;
}
.modal-content {padding: 1.5rem 0;}
.modal-content .box{display: block; }
.modal-content .box1{margin: 0;padding: 0  1.5rem; width: 100%;}
.modal-content .box1 h2{font-size: 3rem;}
.modal-content .box1 .name-inner{padding-left: 1rem;}
.modal-content .box1 h4{margin-top: 1.5rem;font-size: 1.8rem;}
.modal-content .box1 h3{font-size: 1.8rem;margin: 1rem 0 0;}
.modal-content .box1 > p{margin: 1rem 0 0;width: auto;}
.modal-content .box2{width: 100%;margin:0;padding: 1.5rem;text-align: center;}
.modal-content .box2 img{width: 100%;}
.modal-content .box2 p{margin: 1rem 0;line-height: 140%;width: 50%;font-size: 90%;margin: 0 auto;}
.modal-content .box2 p span{padding: 0 1.5rem;display: inline-block;}
.modal-content table{margin: 0 1.5rem;}
.modal-content table td{padding: 1rem .5rem;}
.close {top: -2rem;right: 0rem;font-size: 4rem;}
}

/*MENU*/
#menu{
position: relative;
padding-top: 40rem;
margin-top: -40rem;
overflow: hidden;
}
#menu > img:nth-of-type(1){
position: absolute;
top: 0rem;
right: calc((100% - 1300px)/2 + -30rem);
z-index: -2;
}
#menu > img:nth-of-type(2){
position: absolute;
top: 45rem;
left: calc((100% - 1300px)/2 + -27rem);
z-index: -2;
}
#menu .bk-img{
position: absolute;
top: 62rem;
left: calc((100% - 1300px)/2);
background: url("/img/menu_01.jpg") no-repeat center center / cover;
width: 100%;
max-width: 1300px;
height: 257px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}
#menu .box{
background: rgba(177,177,177,0.4);
padding: 5rem 0 0;
}
#menu .contents-p0{
display: flex;
grid-gap: 14rem;
}
#menu .menu1{
background: #fff;
text-align: center;
margin-left: 10rem;
padding-bottom: 3rem;
}
#menu hr{
margin: 0.7rem;
border-top: 13px solid #000;
}
#menu .menu1 h2{
font-family: "Dancing Script", serif;
font-size: 10rem;
text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
line-height: 1;
margin: 3rem 3rem 3rem;
}
#menu .menu1 a{
position: relative;
width: 19rem;
margin: 0 auto;
z-index: 10;
}
#menu .menu1 a img{
width: 100%;
}
#menu .menu2{
background: rgba(255, 255, 255, 0.7);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
margin-top: 8rem;
padding: 5rem 8rem 3rem;
}
#menu .menu2 h4{
font-weight: 700;
font-size: 3rem;
}
#menu .menu2 h3{
font-weight: 700;
font-size: 3.8rem;
}
#menu .menu2 .menu-box{
margin: 2rem auto;
padding: 2rem 5rem 1rem 2rem;/*内側の余白*/
background: none;/*元のボックス背景色なし*/
border: 0.5px solid #000 ;/*線の太さ・種類・色*/
position: relative;/*配置（基準）*/
z-index: 2;
}
#menu .menu2 .menu-box:after{
border:none;
content: '';
position: absolute;
top: 7px;
left: 7px;
width: 100%;
height: 100%;
z-index: 0;
}
#menu .menu2 .menu-box img{
position: absolute;
top: -4rem;
right: -3rem;
width: 80px;
transform: rotate(15deg);
z-index: 3;
}
#menu .menu2 .menu-box.seitai:after {
background-color:rgba(202, 225, 207, 0.4);/*ずらしたボックスの背景色*/
}
#menu .menu2 .menu-box.riraku:after {
background-color:rgba(219, 218, 236, 0.4);/*ずらしたボックスの背景色*/
}
#menu .menu2 .menu-box.este:after {
background-color:rgba(197, 221, 222, 0.4);/*ずらしたボックスの背景色*/
}
#menu .menu2 .menu-box.baby:after {
background-color:rgba(231, 229, 191, 0.4);/*ずらしたボックスの背景色*/
}
#menu .menu2 h5{
font-weight: 700;
font-size: 1.8rem;
letter-spacing: 0.1rem;
position: relative;
z-index: 2;
}
#menu .menu2 .price{
font-family: "Dancing Script", serif;
font-size: 2rem;
letter-spacing: 0.2rem;
padding: 0.5rem 1rem 0.5rem;
text-align: right;
position: relative;
z-index: 2;
}
#menu .menu2 .price span{
font-size: 80%;
}
#menu .menu2 img{
display: inline-block;
width: 100%;
margin-top: 3rem;
}
#menu > img:nth-of-type(3){
position: absolute;
bottom: 0;
left:  calc((100% - 1300px)/2 + 37.5rem);
mix-blend-mode: multiply;
}
@media screen and (max-width: 1300px) {
#menu .bk-img{left: 0;height: 207px;}
#menu .contents-p0{grid-gap: 7rem;}
#menu .menu1{margin-left: 7rem;}
#menu .menu1 h2{margin: 3rem 3rem 3rem;font-size: 7rem;}
#menu .menu2{padding: 3rem 8rem 3rem;}
}
@media screen and (max-width: 768px) {
#menu{padding-top: 16rem;margin-top: -16rem;}
#menu > img:nth-of-type(1){top: -3rem;right: -15rem;width: 500px}
#menu > img:nth-of-type(2){top: 20rem;left: -3rem;width: 150px}
#menu .bk-img{top: 37rem;left: 0;height: 80px;}
#menu .box{padding: 1.5rem 0 0;}
#menu .contents-p0{display: block;}
#menu .menu1{margin: 0.5rem 1.5rem 2rem;padding: 0 0 1.5rem;}
#menu hr{margin: 0.7rem;border-top: 7px solid #000;}
#menu .menu1 h2{font-size: 4rem;margin: 1.5rem 3rem 1.5rem;}
#menu .menu1 a{position: relative;display: inline-block;width: 7.3rem;margin: 0 auto;}
#menu .menu2{margin-top: 0rem;padding: 2em 1.5rem 3rem;}
#menu .menu2 h4{font-size: 1.8rem;}
#menu .menu2 h3{font-size: 2rem;}
#menu .menu2 .menu-box{padding: 2rem 3rem 0rem 2rem;}
#menu .menu2 .menu-box img{width: 65px;top: -3rem;right: -1.5rem;}
#menu .menu2 h5{font-size: 1.5rem;letter-spacing: 0;padding-right: 2rem; line-height: 140%}
#menu .menu2 .price{font-size: 1.6rem;padding: 0 0 1rem;margin-bottom: 1rem;margin-top:1rem; line-height: 100%;}
#menu .menu2 img{margin-top: 1.5rem;}
#menu > img:nth-of-type(3){position: absolute;bottom: 7rem;left: auto;right: -5rem;width: 100px;opacity: 0.5;mix-blend-mode: multiply;}
}

/*MENU-コンテンツ共通*/
.me-con{
position: relative;
overflow: hidden;
z-index: 0;
padding: 7rem 20rem;
}
.me-con h2{
font-size: 2.6rem;
margin: 0 3rem 3rem 0;
}
.toggle {
	display: none;
}
.Label {		/*タイトル*/
	display: block;
background: #a8b5b7;
  margin: 20px 0 0;
  padding: 0.5rem;
}
.Label h3{
  color: #fff;
  border: 0.5px solid #fff;
  padding: 1rem 1.5rem;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.2rem;
}
.Label::before{		/*タイトル横の矢印*/
  content: "";
  background: url("/img/menu_a01.png") no-repeat center center / cover;
  width: 34px;
  height: 34px;
  position: absolute;
  top: calc(50% - 17px);
  right: 33px;
  transition:0.8s;
}
.Label,
.content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.content {		/*本文*/
	height: 0;
	margin-bottom:10px;
	padding:0;
	overflow: hidden;
}
.content > div{  
background: #fff;
margin-top: 1.5rem;
padding: 1.5rem;
}
.content > div h4{
font-size: 1.9rem;
letter-spacing: 0.1rem;
position: relative;
}
.content > div .price{
font-family: "Dancing Script", serif;
font-size: 2.4rem;
position: absolute;
top: 0;
right: 0;
}
.content > div p{
padding-top: 0.5rem;
margin-top: 0.5rem;
border-top: 1px solid #000;
font-size: 90%;
}
.content > img{
width: 100%;
display: inline-block;
margin-top: 1.5rem;
}
.toggle:checked + .Label + .content {	/*開閉時*/
	height: auto;
	padding:1.5rem 0 3rem;
	transition: all 1s;
}
.toggle:checked + .Label::before {
	transform: rotate(-180deg) !important;
}
@media screen and (max-width: 768px) {
.me-con{padding: 4rem 3rem;width: 100%;}
.me-con h2{font-size: 2.6rem;margin: 0 0 2rem;}
.toggle {display: none;}.Label {		/*タイトル*/  margin: 15px 0 0;  padding: 0.3rem;}
.Label h3{  padding: 0.5rem 1rem;  font-size: 2rem;}
.Label::before{ width: 20px; height: 20px;  top: calc(50% - 10px); right: 20px;}
.content > div{ margin-top: 0.5rem;padding: 0.5rem 1rem;}
.content > div h4{font-size: 1.6rem;position: relative;}
.content > div .price{font-size: 1.7rem;}
.content > div p{border-top: 0.1px solid #000;margin-top: 0.5rem;font-size: 90%;}
.content > img{margin-top: 0.5rem;}
.toggle:checked + .Label + .content { height: auto;	padding:1rem 0 0rem;	transition: all 1s;}
.toggle:checked + .Label::before {	transform: rotate(-180deg) !important;}
}

/*menu-整体*/
#menu-s .Label {
background: #8aa594;
}
#menu-s{
background: #d4ddd7;
}
#menu-s > img:nth-of-type(1){
position: absolute;
top: 4rem;
left: calc((100% - 1300px)/2 - 20rem);
z-index: -2;
}
#menu-s > img:nth-of-type(2){
position: absolute;
top: -13rem;
right: calc((100% - 1300px)/2 - 30rem);
z-index: -2;
}
#menu-s > img:nth-of-type(3){
position: absolute;
top: 50rem;
right: calc((100% - 1300px)/2 - 16rem);
z-index: -2;
}
@media screen and (max-width: 1300px) {
 #menu-s > img:nth-of-type(1){top: 2rem;left: -20rem;}
 #menu-s > img:nth-of-type(2){top: 22rem;right: 1rem;}
}
@media screen and (max-width: 768px) {
#menu-s{margin-top: 10px;}
#menu-s > img:nth-of-type(1){top: 5rem;left: -7rem;width: 150px;}
#menu-s > img:nth-of-type(2){top: -3rem;right: -20rem;}
#menu-s > img:nth-of-type(3){top: 31rem;right: -5rem;}
}

/*menu-エステ*/
#menu-e{
background: #d8e1e2;
margin-top: 30px;
}
#menu-e > img:nth-of-type(1){
position: absolute;
top: 15rem;
left: calc((100% - 1300px)/2 - 25rem);
z-index: -2;
mix-blend-mode: multiply;
}
#menu-e > img:nth-of-type(2){
position: absolute;
top: 22rem;
right: calc((100% - 1300px)/2 - 16rem);
z-index: -2;
}
@media screen and (max-width: 1300px) {
#menu-e > img:nth-of-type(1){top: -10rem;left: -30rem;}
#menu-e > img:nth-of-type(2){top: 22rem;right: calc((100% - 1300px)/2 - 16rem);z-index: -2;}
}
@media screen and (max-width: 768px) {
#menu-e > img:nth-of-type(1){top: 5rem;left: -7rem;width: 150px;}
#menu-e > img:nth-of-type(2){top: -8rem;right: -5rem;width: 130px;}
}

/*menu-リラク*/
#menu-r .Label {
background: #b1b2be;
}
#menu-r{
background: #e6e3ea;
margin-top: 30px;
}
#menu-r > img:nth-of-type(1){
position: absolute;
top: 10rem;
right: calc((100% - 1300px)/2 - 38rem);
z-index: -2;
mix-blend-mode: multiply;
}
@media screen and (max-width: 1300px) {
#menu-r > img:nth-of-type(1){top: 15rem;right: -40rem;}
}
@media screen and (max-width: 768px) {
#menu-r{margin-top: 10px;}
#menu-r > img:nth-of-type(1){top: 5rem;right: -15rem;width: 300px;}
}

/*menu-ベビーマッサージ*/
#menu-b .Label {
background: #b3aa6d;
}
#menu-b{
background: #eae8c2;
margin-top: 30px;
}
#menu-b > img:nth-of-type(1){
position: absolute;
top: 13rem;
right: calc((100% - 1300px)/2 - 28rem);
z-index: -2;
}
#menu-b .box a{
display: inline;
text-decoration: underline;
}
#menu-b .box > p{
margin-top: 2rem;
}
@media screen and (max-width: 1300px) {
#menu-b > img:nth-of-type(1){top: 13rem;right: -11rem;}
}
@media screen and (max-width: 768px) {
#menu-b{margin-top: 10px;}
#menu-b > img:nth-of-type(1){top: 5rem;right: -5rem;width: 100px;}
}

#map {
text-align: center;
}
#map iframe{
margin-top: 3rem;
width: 100%;
height: 300px;
}
#map > div{
background: url("/img/f_01.png") no-repeat top 350px right / 150px auto;
}
#map .logo{
display: inline-block;
margin: 6rem auto 0;
width: 30rem;
}
#map ul {
margin: 3rem auto 0;
list-style: none;
vertical-align: top;
}
#map li{
text-align: left;
display: inline-block;
vertical-align: top;
margin: 0 1.5rem;
}
#map li p{
padding: 0.5rem 0;
font-size: 1.8rem;
letter-spacing: 0.2rem;
}
#map li a{
padding: 0.5rem 3rem 0.5rem 1.5rem;
border-left: 1px solid #000;
font-size: 90%;
}
@media screen and (max-width: 768px) {
#map iframe{height: 200px;}
#map > div{background: url("/img/f_01.png") no-repeat top 240px right / 100px auto;}
#map .logo{margin: 3rem auto 0;width: 20rem;}
#map ul {margin: 2rem auto 0;}
#map li{margin: 0 0.8rem;}
#map li p{font-size: 1.6rem;}
#map li a{padding: 0.6rem 0rem 0.6rem 1rem;line-height: 110%;}
}

footer{
margin-top: 6rem;
background: #e1e1e0;
background-blend-mode: multiply;
}
footer > div{
display: flex;
justify-content: space-between;
max-width: 1000px;
padding: 3rem;
}
footer h3{
font-size: 2rem;
letter-spacing: 0.3rem;
margin-bottom: 1rem;
}
footer ul li{
width: 55px;
display: inline-block;
}
footer ul li.tel{
display: inline-block;
width: auto;
font-family: "Dancing Script", serif;
font-size: 3rem;
letter-spacing: 0.3rem;
vertical-align: top;
padding: 1rem 1rem 0 0;
}
footer ul li.tel img{
width: 40px;
display: inline;
vertical-align: text-bottom;
}
footer > p{
background: #bbb;
padding: 0.5rem;
font-size: 80%;
text-align: center;
margin-top: 2rem;
letter-spacing: 0.2rem;
}
@media screen and (max-width: 1100px) {
footer{text-align: center;}
footer > div{display: block;}
footer ul{margin-top: 2rem;}
}
@media screen and (max-width: 768px) {
footer{margin-top: 3rem;}
footer > div{padding: 3rem 1.5rem 1.5rem;}
footer h3{font-size: 1.8rem;}
footer ul{margin-top: 0;}
footer ul li{width: 55px;display: inline-block;}
footer ul li.tel{display: block;font-size: 2rem;padding: 1rem 1rem 0 0;}
footer ul li.tel img{width: 20px;display: inline;vertical-align: text-bottom;}
}

/*Reservation*/
#reserv .contents{
text-align: center;
}
#reserv .box{
margin: 3rem auto;
}
#reserv  h2{
font-family: "Dancing Script", serif;
font-size: 5rem;
text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
line-height: 1;
margin: 3rem 3rem 1.5rem;
}

.sp-show{display: none;}
@media (max-width: 768px) {
.sp-show{display: inline;}
.pc-show{display: none;}
}