@charset "utf-8";

/*============================================================
    TUKI to TAIYOU to DAICHI 2ND LAYER
  ============================================================ */
/*
layout.css
color:#5d4535;
background: #f5f0e5;
point color:background:#659D9E;


/*--------------------------------------------------
   01 ABOUT
 --------------------------------------------------*/  

/* EACH CONTENS
--------------------------------------------*/
#about, #menu, #salon, #sidenote, #mailform{
width: 100%;
}

/* ABOUT CONCEPT
--------------------------------------------*/
.about-concept {
width: 95%;
min-height:540px;
margin:10px auto 15px;
padding-top:0px;
padding-left: 10px;
text-align: center;
overflow: hidden;
}
@media screen and (max-width: 767px) {
.about-concept {
width: 99%;
margin:5px auto 50px;
padding: 10px 2px 10px -10px !important;
}
}
.ab-cont{
margin: 30px auto 30px;
}
@media screen and (max-width: 767px) {
.ab-cont{
margin: 30px auto 10px;
}
}

.about-concept img{
max-width: 520px;
margin: 25px auto 0px;
}
@media (min-width: 768px) and (max-width: 1200px) {
.about-concept img{
min-width: 530px;
text-align: center !important;
margin: 40px auto 10px !important;
}
}
@media screen and (max-width: 767px) {
.about-concept img{
width: 96%;
padding-top:15px;
margin:0 auto !important;
}
}

.about-concept p {
max-width: 1000px;
font-size: 100%;
margin:18px auto 0px;
padding:0px 20px 5px;
line-height: 1.8;
text-align: left !important;
}

@media (min-width: 768px) and (max-width: 1219px) {
.about-concept p {
line-height: 1.7 !important;
}
}
@media screen and (max-width: 767px) {
.about-concept p {
margin:10px auto 10px;
}
}

/* ABOUT MASSAGE
--------------------------------------------*/
.about-massage {
width: 100%;
margin: 0 auto;
padding: 20px 20px 60px;
background-color: #E8E3D6;
}
@media screen and (max-width: 767px) {
.about-massage  {
width: 100%;
margin:5px auto 50px;
padding: 10px 2px 10px !important;
}
}
.about-massage h2{
margin:20px auto 30px;
}
.about-massage img{
margin: 10px 0 -10px;
}
@media screen and (max-width: 767px) {
.about-massage img{
width: 100%;
padding-top: -10px;
margin:-5px auto 15px !important;
}
}
.about-massage p {
font-size: 100%;
margin:0 auto 10px;
padding:5px 5px 5px 20px ;
line-height: 1.8;
text-align: left !important;
}
@media screen and (max-width: 767px) {
.about-concept p {
line-height: 1.7 !important;
padding:5px 10px 5px 5px;
}
}

.about-massage ul {
margin:-5px 0px 10px 30px;
}
.about-massage li {
padding: 4px 0 5px;
line-height: 150%; 
}

/* THERAPIST
--------------------------------------------*/
.therapist{
max-width: 1000px;
margin: 60px auto 60px;
padding:10px 25px 28px 26px !important;
background-color: #FBF9F3;
}
.thera-name{
font-size: 90%;
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.luna{
text-align:left;
}
.luna img{
max-width:200px;
height:auto;
}

/* ---- MOBILE ----*/
@media screen and (max-width: 768px){
.therapist{
margin: 40px 18px 50px;
padding:0px 24px 18px !important;
}
.luna{
float:none;
text-align:center;
}
.luna img{
max-width:220px;
margin:40px auto 30px;
height:auto;
text-align:center;
}
.luna p{
text-align:left;
}
}



/*--------------------------------------------------
   02 MENU
 --------------------------------------------------*/  
.menu-concept {
width: 100%;
margin:10px auto 0;
padding:5px 0 25px 10px;
text-align: center;
background-image: url("../img/menu/lotus.png");
background-position:center bottom;
background-repeat: no-repeat;
background-size: 105%;
}
.menu-concept h1{
margin:30px auto 14px;
}
.budda{
margin:0 auto;
text-align:center !important;
}
.budda img{
width:190px;
height:auto;
margin:0px auto 0px;
text-align: center;
}
.menu-intro{
max-width:780px;
margin:5px auto 15px;
text-align: center;
}
.menu-concept p{
margin:0px 0 25px;
text-align: left;
}
.menu-concept ul {
margin:-5px 0px 5px 10px !important;
}
.menu-concept li {
padding: 4px 0 4px;
line-height: 150%; 
}

/* ---- TAB ----*/
@media screen and (max-width: 1000px) {
.menu-concept {
width: 100%;
margin:10px auto 0;
padding:5px 0 25px 10px;
text-align: center;
background-image: url("../img/menu/lotus02.png");
background-position:center bottom;
background-repeat: no-repeat;
background-size: 105%;
}
}

/* ---- MOBILE ----*/
@media screen and (max-width: 767px) {
.menu-concept {
width: 99%;
margin:5px auto 0px;
padding: 10px 10px 10px 10px !important;
background-size: 130%;
}
.budda{
float:none;
text-align:center;
}
.budda img{
max-width:300px;
height:auto;
margin:0 auto 20px;
text-align:center;
}

.menu-concept p{
margin:15px auto 25px;
padding:0 10px 0;
text-align: left;
}
}

/* CARES
--------------------------------------------*/
.menu-space {
width: 100%;
margin: 0 auto;
padding: 20px 20px 60px;
background-color: #E8E3D6;
}
@media screen and (max-width: 767px) {
.menu-space  {
width: 100%;
margin:0 auto 30px;
padding: 10px 2px 10px !important;
}
}

.course{
max-width: 1160px;
width: 95%;
margin: 50px auto 30px;
padding:32px 25px 32px 25px !important;
text-align: left;
background-color: #FBF9F3;
border-radius: 20px;
}
.course p{
margin: 10px 0 10px 20px;
font-size: 94% !important;
line-height: 1.68;
}
.option{
font-size: 1.28rem;
font-weight: 550;
margin: 20px 0 5px 20px;
line-height: 1.6;
}
.thai-massa img{
margin-bottom: 20px;
}
.remarks{
font-size: 0.94rem;
margin: 40px 0 5px 0px;
line-height: 1.6;
}

@media (max-width: 910px) {
.course img{
margin-top:5px;
min-height: 180px;
}
}

@media screen and (max-width: 767px) {
.course{
max-width: 1000px;
width: 94%;
margin: 40px auto 35px;
padding:28px 15px 28px !important;
text-align: left;
background-color: #FBF9F3;
border-radius: 20px;
}
.course p{
margin: 10px 0 10px 0;
font-size: 98% !important;
line-height: 1.5;
}
.course img{
width: 96%;
margin: 5px auto 25px;
}
}

/* ---- PRICE ----*/
.flex-row {
  display: flex;
  gap: 0px;
		margin: 15px 0 5px 20px;
		padding-bottom: 5px;
}
.flex-row+.flex-row {
  margin-top: 40px;
}
.flex-item {
  background: #Fff;
  padding: 15px 20px 15px 15px;
		border:solid 1px #BCA793;
}
.flex-item:nth-child(1) {
  width: 210px;
}
.flex-item:nth-child(2) {
  flex: 2;
		text-align: right;
}
@media screen and (max-width: 910px) {
.flex-row {
  display: flex;
  gap: 0px;
		margin-left: 9px;
		padding-bottom: 5px;
}
.flex-item {
 font-size: 88%;
  background: #Fff;
  padding: 10px 8px 10px;
		border:solid 1px #BCA793;
}
}
@media screen and (max-width: 767px) {
.flex-row {
  display: flex;
  gap: 0px;
		margin-left: 0;
}
.flex-item {
font-size: 88%;
  background: #Fff;
  padding: 10px 8px 10px;
		border:solid 1px #BCA793;
}
.flex-item:nth-child(1) {
 width: 160px;
}
}

/* OTHERS
--------------------------------------------*/
.others {
max-width:1200px;
width: 90%;
margin: 0 auto 20px;
padding: 10px 20px 15px;
text-align: center;
}
.others img{
width: 400px;
margin: 5px auto;
padding: 18px 10px 5px;
text-align: center;
border-radius: 40px;
}
.others .ac02, .ac04 img{
margin-top: 30px;
}
.others p{
font-size: 88%;
text-align: left;
padding: 0px 18px 5px 20px;
line-height: 1.4;
}

@media (max-width: 910px) {
.others img{
width: 98%;
margin: 5px auto;
padding: 5px 0 5px;
border-radius: 20px;
}
}

@media (max-width: 767px) {
.others {
max-width:1200px;
width: 100%;
margin:-20px auto -10px !important;
padding: 5px 10px 10px;
}
.others img{
width: 90%;
margin: 0px auto 5px;
padding: 5px 0 5px;
border-radius: 20px;
}
.others .ac02, .ac04 img{
margin-top: 0;
}
.others p{
font-size:.9375rem !important;
text-align: left;
padding: 0px 14px 5px;
line-height: 1.4;
}
}


/*--------------------------------------------------
   03 SALON
 --------------------------------------------------*/  
.salon-concept {
width: 100%;
margin:20px auto 15px;
padding-top:0px;
padding-left: 0;
text-align: center !important;
overflow: hidden;
}

.salon-concept p, .access p{
margin-top:10px;
height: auto;
padding:0px 34px;
text-align: left;
}
.around-text{
padding-top:60px;
}
@media screen and (max-width: 1280px) {
.salon-concept p, .access p{
font-size: 93% !important;
margin:0 auto 15px;
padding:0 14px;
text-align: left;
}
.around-text{
padding-top:10px;
}
}
@media screen and (max-width: 767px) {
.salon-concept p{
font-size: 97% !important;
margin:5px auto 15px;
}
}

.salon-concept img{
margin: 0px auto 10px;
border-radius:20px;
}
.around-photo img{
margin-top:50px;
right: 0;
margin: 0px auto 10px;
}
@media screen and (max-width: 1200px) {
.around-photo img{
padding-top:140px;
}
}
@media screen and (max-width: 767px) {
.salon-concept img{
width: 90%;
padding-top:20px;
margin:0 auto 20px !important;
border-top-left-radius:40px;
border-top-right-radius:50px;
border-bottom-left-radius:50px;
border-bottom-right-radius:30px;
}
}

/* ACCESS
--------------------------------------------*/
.access {
width: 100%;
margin: 0 auto;
padding: 20px 20px 60px;
background-color: #E8E3D6;
}
@media screen and (max-width: 767px) {
.access {
width: 100%;
margin:5px auto 50px;
padding: 10px 2px 10px !important;
}
}
.access h2{
margin:20px auto 30px;
}
.access img{
width: 100%;
max-width: 500px;
margin: 0 auto;
padding: 10px 10px 0px;
}
.parking{
font-size:86%;
margin: -15px 0 30px 10px;
text-align: left;
}



/*--------------------------------------------------
   04 SIDE NOTE
 --------------------------------------------------*/  
.side-note {
width: 95%;
min-height:540px;
margin:10px auto 10px;
padding-top:0px;
padding-left: 10px;
text-align: left;
overflow: hidden;
}
@media screen and (max-width: 767px) {
.side-note {
width: 99%;
margin:5px auto 50px;
padding: 10px 2px 10px -10px !important;
}
}
.side-note h2{
margin-top:18px;
font-size: 1.7rem;
text-align: center;
}
/* ---- MOBILE ----*/
@media screen and (max-width: 768px){
.side-note h2{
font-size: 1.54rem;
letter-spacing: 0.03em;
line-height: 1.2 !important;
}
}

.note-space{
max-width: 880px;
margin: 60px auto 60px;
padding:5px 34px 28px !important;
background-color: #FBF9F3;
border-radius: 25px;
}
.note-space p{
line-height: 2.0 !important;
}
/* ---- MOBILE ----*/
@media screen and (max-width: 768px){
.note-space{
margin: 40px 18px 10px;
padding:0px 24px 18px !important;
}
}

.notephoto{
float:left;
text-align:left;
}
.notephoto img{
max-width:220px;
height:auto;
margin:35px 30px 20px 0;
}
/* ---- MOBILE ----*/
@media screen and (max-width: 768px){
.notephoto{
float:none;
text-align:center;
}
.notephoto img{
max-width:60%;
height:auto;
margin:25px auto 20px;
text-align:center;
}
}