@charset "UTF-8";



/*==================================================================

INTRODUCTION_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.smp{
display:none;
}
p{
font-size:14px;
line-height:1.5em;
text-align:justify;
}
img.grow{
-webkit-transition:0.2s ease-in-out;
-moz-transition:0.2s ease-in-out;
-ms-transition:0.2s ease-in-out;
-o-transition:0.2s ease-in-out;
transition:0.2s ease-in-out;
}
img.grow:hover{
-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-ms-transform:scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
transform:scale(1.1,1.1);
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.smp{
display:none;
}
.pc{
display:none;
}
.tablet{
display:block;
}
p{
font-size:13px;
line-height:1.5em;
text-align:justify;
}
img.grow{
-webkit-transition:0.2s ease-in-out;
-moz-transition:0.2s ease-in-out;
-ms-transition:0.2s ease-in-out;
-o-transition:0.2s ease-in-out;
transition:0.2s ease-in-out;
}
img.grow:hover{
-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-ms-transform:scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
transform:scale(1.1,1.1);
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.pc{
display:none;
}
p{
font-size:14px;
line-height:1.35em;
text-align:justify;
}
}









/*==================================================================

ONKATSU_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.onkatsu_area{
width:1000px;
margin:0 auto;
padding:60px 0 0px;
}
.onkatsu_area h2{
width:32%;
margin:0 auto;
}
.onkatsu_area h4{
font-family: "Sawarabi Mincho";
font-size:24px;
letter-spacing:0.15em;
text-align:center;
margin:4em auto 1em;
}
.onkatsu_area p{
float:left;
width:82%;
margin:4em auto 0 0;
}
.onkatsu_area p span{
color:#C11823;
}
.onkatsu_area div{
width:12%;
float:right;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.onkatsu_area{
width:98%;
margin:0 auto;
padding:40px 0 20px;
}
.onkatsu_area h2{
width:36%;
margin:0 auto;
}
.onkatsu_area h4{
font-family: "Sawarabi Mincho";
font-size:20px;
letter-spacing:0.15em;
text-align:center;
margin:3em auto 1em;
}
.onkatsu_area p{
float:left;
width:70%;
margin:4em auto 0 5%;
}
.onkatsu_area p span{
color:#C11823;
}
.onkatsu_area div{
width:15%;
float:right;
margin-right:5%;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.onkatsu_area{
width:94%;
margin:0 auto;
padding:20px 0 0;
}
.onkatsu_area h2{
width:80%;
margin:0 auto;
}
.onkatsu_area h4{
font-family: "Sawarabi Mincho";
font-size:20px;
line-height:1.35em;
letter-spacing:0.15em;
text-align:center;
margin:2em auto 1em;
}
.onkatsu_area p{
margin:1.5em auto 0;
}
.onkatsu_area p span{
color:#C11823;
}
.onkatsu_area div{
width:30%;
margin:15px auto 0;
}
}









/*==================================================================

ABOUT_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.about_area{
width:1000px;
margin:60px auto 0;
padding:0px 0 30px;
}
.about{
position:relative;
width:100%;
margin:50px auto 0;
}
.about_image{
padding-right:40%;
}
.about img{
width:100%;
}
.about div.yomogi{
position:absolute;
background-color:rgba(255,255,255,0.7);
padding:3em 0 3em 3em;
width:50%;
top:15%;
right:0;
}
.about div.yomogi h5{
font-family: "Sawarabi Mincho";
font-size:20px;
letter-spacing:0.15em;
margin-bottom:1em;
}
.about div.yomogi p{
font-size:14px;
line-height:1.5em;
letter-spacing:0.03em;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.about_area{
width:98%;
margin:0 auto;
padding:0px 0 20px;
}
.about{
position:relative;
width:100%;
margin:50px auto 0;
}
.about_image{
padding-right:40%;
}
.about img{
width:100%;
}
.about div.yomogi{
position:absolute;
background-color:rgba(255,255,255,0.7);
padding:2em 1em 2em 2em;
width:55%;
top:8%;
right:0;
}
.about div.yomogi h5{
font-family: "Sawarabi Mincho";
font-size:20px;
letter-spacing:0.15em;
margin-bottom:1em;
}
.about div.yomogi p{
font-size:13px;
letter-spacing:0.03em;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.about_area{
width:94%;
margin:0 auto;
padding:20px 0 0;
}
.about{
width:100%;
margin:50px auto 0;
}
.about_image{
margin-bottom:20px;
}
.about img{
width:100%;
}
.about div.yomogi{
background-color:rgba(255,255,255,0.7);
width:100%;
}
.about div.yomogi h5{
font-family: "Sawarabi Mincho";
font-size:18px;
text-align:center;
letter-spacing:0.1em;
margin-bottom:1em;
}
.about div.yomogi p{
font-size:13px;
letter-spacing:0.03em;
}
}









/*==================================================================

EFFECTIVMESS_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.effectiveness_area{
width:1000px;
margin:60px auto 0;
padding:0px 0 30px;
}
.effectiveness{
border:1px solid #54917F;
position:relative;
margin-top:1em;
}
.effectiveness h3{
font-family: "Sawarabi Mincho";
font-size:20px;
text-align:center;
letter-spacing:0.1em;
position:absolute;
right:0;
left:0;
top:-0.5em;
}
.effectiveness span{
padding:0 1em;
background:#FFF;
color:#000;
}
.effectiveness .effectiveness_details{
padding:2em 3em 2em 3em;
}
.effectiveness .effectiveness_details dl{
}
.effectiveness .effectiveness_details dl dt{
font-family: "Sawarabi Mincho";
font-size:18px;
letter-spacing:0.1em;
line-height:1.8em;
background:url("../../relax/images/effectiveness_mark.png") top left no-repeat;
background-size:18px;
padding-left:2em;
}
.effectiveness .effectiveness_details dl dd{
font-size:14px;
line-height:1.55em;
padding-left:2.5em;
margin-bottom:1em;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.effectiveness_area{
width:98%;
margin:0 auto;
padding:0px 0 20px;
}
.effectiveness{
border:1px solid #54917F;
position:relative;
margin-top:3em;
}
.effectiveness h3{
font-family: "Sawarabi Mincho";
font-size:20px;
text-align:center;
letter-spacing:0.1em;
position:absolute;
right:0;
left:0;
top:-0.5em;
}
.effectiveness span{
padding:0 1em;
background:#FFF;
color:#000;
}
.effectiveness .effectiveness_details{
padding:3em 2em 2em 2em;
}
.effectiveness .effectiveness_details dl{
}
.effectiveness .effectiveness_details dl dt{
font-family: "Sawarabi Mincho";
font-size:18px;
letter-spacing:0.1em;
line-height:2em;
background:url("../../relax/images/effectiveness_mark.png") top left no-repeat;
background-size:16px;
padding-left:2em;
}
.effectiveness .effectiveness_details dl dd{
font-size:13px;
line-height:1.4em;
padding-left:2.5em;
margin-bottom:1em;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.effectiveness_area{
width:94%;
margin:0 auto;
padding:20px 0 0;
}
.effectiveness{
border:1px solid #54917F;
position:relative;
margin-top:2em;
}
.effectiveness h3{
font-family: "Sawarabi Mincho";
font-size:18px;
text-align:center;
letter-spacing:0.1em;
position:absolute;
right:0;
left:0;
top:-0.5em;
}
.effectiveness span{
padding:0 1em;
background:#FFF;
color:#000;
}
.effectiveness .effectiveness_details{
padding:2em 1em 1em 1em;
}
.effectiveness .effectiveness_details dl{
}
.effectiveness .effectiveness_details dl dt{
font-family: "Sawarabi Mincho";
font-size:17px;
letter-spacing:0.1em;
line-height:1.8em;
background:url("../../relax/images/effectiveness_mark.png") top left no-repeat;
background-size:16px;
padding-left:2em;
}
.effectiveness .effectiveness_details dl dd{
font-size:14px;
line-height:1.35em;
padding-left:2.2em;
margin-bottom:1em;
}
}









/*==================================================================

FLOW_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.flow_area{
width:1000px;
margin:40px auto 0;
padding:0px 0 30px;
}
.flow_area h3{
font-family: "Sawarabi Mincho";
font-size:20px;
text-align:center;
letter-spacing:0.1em;
margin-bottom:30px;
}
.flow_area ol{
counter-reset:number;
list-style-type:none!important;
width:78%;
margin:30px 0 0 0;
float:right;
}
.flow_area ol li{
position:relative;
padding-left:0px;
line-height:1.5em;
padding:0.5em 0.5em 0.5em 2em;
font-size:16px;
font-weight:600;
letter-spacing:0.03em;
}
.flow_area ol li:before{
position:absolute;
counter-increment:number;
content:counter(number);
display:inline-block;
background:#C11823;
color:#FFF;
font-family:'Avenir','Arial Black','Arial',sans-serif;
font-weight:bold;
font-size:17px;
border-radius:50%;
left:0;
width:25px;
height:25px;
line-height:25px;
text-align:center;
top:50%;
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
}
.flow_area div{
width:18%;
float:left;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.flow_area{
width:98%;
margin:30px auto 0;
padding:0px 0 20px;
}
.flow_area h3{
font-family: "Sawarabi Mincho";
font-size:20px;
text-align:center;
letter-spacing:0.1em;
margin-bottom:30px;
}
.flow_area ol{
counter-reset:number;
list-style-type:none!important;
width:80%;
margin:10px 0 0 0;
float:right;
}
.flow_area ol li{
position:relative;
padding-left:0px;
line-height:1.5em;
padding:0.5em 0.5em 0.5em 2em;
font-size:13px;
font-weight:600;
letter-spacing:0.03em;
}
.flow_area ol li:before{
position:absolute;
counter-increment:number;
content:counter(number);
display:inline-block;
background:#C11823;
color:#FFF;
font-family:'Avenir','Arial Black','Arial',sans-serif;
font-weight:bold;
font-size:14px;
border-radius:50%;
left:0;
width:25px;
height:25px;
line-height:25px;
text-align:center;
top:50%;
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
}
.flow_area div{
width:18%;
float:left;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.flow_area{
width:94%;
margin:20px auto 0;
padding:20px 0 0;
}
.flow_area h3{
font-family: "Sawarabi Mincho";
font-size:18px;
text-align:center;
letter-spacing:0.1em;
margin-bottom:1em;
}
.flow_area ol{
counter-reset:number;
list-style-type:none!important;
}
.flow_area ol li{
position:relative;
line-height:1.35em;
padding:0.5em 0.5em 0.5em 2.5em;
font-size:13px;
font-weight:600;
letter-spacing:0.03em;
}
.flow_area ol li:before{
position:absolute;
counter-increment:number;
content:counter(number);
display:inline-block;
background:#C11823;
color:#FFF;
font-family:'Avenir','Arial Black','Arial',sans-serif;
font-weight:bold;
font-size:14px;
border-radius:50%;
left:0;
width:25px;
height:25px;
line-height:25px;
text-align:center;
top:50%;
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
}
.flow_area div{
width:30%;
margin:15px auto 0;
}
}









/*==================================================================

FEE_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.fee_bg{
width:100%;
margin:60px auto 0;
background-color:#B2AB80;
background-image:linear-gradient(45deg, #C3BB84 25%, transparent 25%, transparent 75%, #C3BB84 75%, #C3BB84), linear-gradient(45deg, #C3BB84 25%, transparent 25%, transparent 75%, #C3BB84 75%, #C3BB84);
background-position:0 0, 25px 25px;
background-size:50px 50px;
}
.fee_area{
width:1000px;
margin:0 auto;
padding:50px 0;
color:#FFF;
text-align:center;
}
.fee_area table th, .fee_area table td{
border:solid 1px #C3BB84;
}
.fee_area table{
width:60%;
margin:0 auto;
color:#000;
letter-spacing:0.1em;
border-collapse:collapse;
}
.fee_area th, .fee_area td {

font-size:16px;
text-align:center;
background-color:#FFF;
padding:1em;
}
.fee_area table td span{
font-size:0.8em;
margin-left:1em;
}
.fee_area table th{
font-size:18px;
font-weight:500;
text-align:center;
background-color:#FFF;
padding:1em;
position: sticky;
top: 0;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.fee_bg{
width:100%;
margin:40px auto 0;
background-color:#B2AB80;
background-image:linear-gradient(45deg, #C3BB84 25%, transparent 25%, transparent 75%, #C3BB84 75%, #C3BB84), linear-gradient(45deg, #C3BB84 25%, transparent 25%, transparent 75%, #C3BB84 75%, #C3BB84);
background-position:0 0, 25px 25px;
background-size:50px 50px;
}
.fee_area{
width:100%;
margin:0 auto;
padding:40px 0;
color:#FFF;
text-align:center;
}
.fee_area table th, .fee_area table td{
border:solid 1px #C3BB84;
}
.fee_area table{
width:70%;
margin:0 auto;
color:#000;
letter-spacing:0.1em;
border-collapse:collapse;
}
.fee_area th, .fee_area td {
font-size:15px;
text-align:center;
background-color:#FFF;
padding:1em;
}
.fee_area table td span{
font-size:0.8em;
margin-left:1em;
}
.fee_area table th{
font-size:16px;
font-weight:600;
text-align:center;
background-color:#FFF;
padding:1em;
position: sticky;
top: 0;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.fee_bg{
width:100%;
margin:30px auto 0;
background-color:#B2AB80;
background-image:linear-gradient(45deg, #C3BB84 25%, transparent 25%, transparent 75%, #C3BB84 75%, #C3BB84), linear-gradient(45deg, #C3BB84 25%, transparent 25%, transparent 75%, #C3BB84 75%, #C3BB84);
background-position:0 0, 25px 25px;
background-size:50px 50px;
}
.fee_area{
width:100%;
margin:0 auto;
padding:40px 0;
color:#FFF;
text-align:center;
}
.fee_area table th, .fee_area table td{
border:solid 1px #C3BB84;
}
.fee_area table{
width:90%;
margin:0 auto;
color:#000;
letter-spacing:0.1em;
border-collapse:collapse;
}
.fee_area th,.fee_area td{
font-size:18px;
text-align:center;
background-color:#FFF;
padding:1em;
}
.fee_area td.fee{
font-size:18px;
text-align:center;
background-color:#1F3134;
color:#FFF;
padding:1em;
}
.fee_area table td span{
font-size:0.8em;
margin-left:1em;
}
.fee_area table th{
font-size:18px;
font-weight:600;
text-align:center;
padding:1em;
position: sticky;
top: 0;
}
.fee_area table td{
display:block;
}
}









/*==================================================================

RESERVE_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.reserve_area{
width:1000px;
margin:40px auto 0;
padding:0px;
}
.reserve_area h3{
font-family: "Sawarabi Mincho";
font-size:24px;
text-align:center;
letter-spacing:0.1em;
}
.reserve_area p{
text-align:center;
margin:3em auto 0;
}
.reserve_area p span{
background-color:#C11823;
color:#FFF;
padding:0.1em 0.4em;
}
.reserve_area div{
width:42%;
margin:20px auto 0;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.reserve_area{
width:98%;
margin:30px auto 0;
padding:0px 0 50px;
}
.reserve_area h3{
font-family: "Sawarabi Mincho";
font-size:20px;
text-align:center;
letter-spacing:0.1em;
}
.reserve_area p{
text-align:center;
margin:3em auto 0;
}
.reserve_area p span{
background-color:#C11823;
color:#FFF;
padding:0.1em 0.4em;
}
.reserve_area div{
width:50%;
margin:20px auto 0;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.reserve_area{
width:94%;
margin:20px auto 0;
padding:20px 0 30px;
}
.reserve_area h3{
font-family: "Sawarabi Mincho";
font-size:20px;
text-align:center;
letter-spacing:0.1em;
}
.reserve_area p{
text-align:center;
margin:2em auto 0;
}
.reserve_area p span{
background-color:#C11823;
color:#FFF;
padding:0.1em 0.4em;
line-height:2em;
}
.reserve_area div{
width:86%;
margin:20px auto 0;
}
}









/*==================================================================

INFORMATION_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.information_area{
width:1000px;
margin:0 auto;
padding:60px 0 30px;
}
.information_area h3{
font-family: "Sawarabi Mincho";
font-size:28px;
font-weight:500;
letter-spacing:0.15em;
text-align:center;
}
.information_area h2{
width:28%;
margin:40px auto;
}
.information_area h4{
font-size:20px;
font-weight:500;
letter-spacing:0.2em;
text-align:center;
background-color:#C11823;
color:#FFF;
border-radius:50px;
width:6em;
margin:1em auto 0;
padding:0.5em 2em;
}
.information_area h5{
font-size:18px;
font-weight:600;
text-align:center;
letter-spacing:0.05em;
word-spacing:0.5em;
margin-top:1.3em;
}
.massage{
position:relative;
width:100%;
margin:50px auto 0;
}
.massage_image{
padding-right:40%;
}
.massage img{
width:100%;
}
.massage p{
position:absolute;
background-color:rgba(255,255,255,0.7);
padding:3em 0 3em 3em;
width:50%;
top:20%;
right:0;
font-size:14px;
line-height:1.5em;
letter-spacing:0.03em;
}
/*#massage{
padding-top:100px;
margin-top:-100px;
}*/
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.information_area{
width:98%;
margin:0 auto;
padding:40px 0 20px;
}
.information_area h3{
font-family: "Sawarabi Mincho";
font-size:24px;
font-weight:500;
letter-spacing:0.15em;
text-align:center;
}
.information_area h2{
width:32%;
margin:40px auto;
}
.information_area h4{
font-size:18px;
font-weight:500;
letter-spacing:0.2em;
text-align:center;
background-color:#C11823;
color:#FFF;
border-radius:50px;
width:6em;
margin:1em auto 0;
padding:0.5em 2em;
}
.information_area h5{
font-size:18px;
font-weight:600;
text-align:center;
letter-spacing:0.05em;
word-spacing:0.5em;
margin-top:1.3em;
}
.massage{
position:relative;
width:100%;
margin:50px auto 0;
}
.massage_image{
padding-right:40%;
}
.massage img{
width:100%;
}
.massage p{
position:absolute;
background-color:rgba(255,255,255,0.7);
padding:3em 0 3em 3em;
width:50%;
top:10%;
right:0;
font-size:13px;
line-height:1.5em;
letter-spacing:0.03em;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.information_area{
width:94%;
margin:0 auto;
padding:20px 0 0;
}
.information_area h3{
font-family: "Sawarabi Mincho";
font-size:20px;
font-weight:500;
letter-spacing:0.15em;
text-align:center;
line-height:1.35em;
}
.information_area h2{
width:80%;
margin:30px auto;
}
.information_area h4{
font-size:16px;
font-weight:500;
letter-spacing:0.2em;
text-align:center;
background-color:#C11823;
color:#FFF;
border-radius:50px;
width:6em;
margin:1em auto 0;
padding:0.5em 2em;
}
.information_area h5{
font-size:16px;
font-weight:600;
text-align:center;
letter-spacing:0.05em;
word-spacing:0.5em;
margin-top:1em;
}
.massage{
width:100%;
margin:20px auto 0;
}
.massage_image{
margin-bottom:10px;
}
.massage img{
width:100%;
}
.massage p{
background-color:rgba(255,255,255,0.7);
width:100%;
font-size:13px;
letter-spacing:0.03em;
}
}









/*==================================================================

NOTE_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.note_area{
width:1000px;
margin:60px auto 0;
padding:0px 0 30px;
}
.note{
border:1px solid #C11823;
position:relative;
margin-top:1em;
}
.note h3{
font-family: "Sawarabi Mincho";
font-size:24px;
text-align:center;
letter-spacing:0.1em;
position:absolute;
right:0;
left:0;
top:-0.5em;
}
.note span{
padding:0 1em;
background:#FFF;
color:#000;
}
.note .note_details{
padding:3em 0 3em;
}
.note .note_details p{
font-size:18px;
text-align:center;
line-height:1em;
}
.note .note_details p span{
border-bottom:1px solid #000;
padding:0 0 0.1em 0;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.note_area{
width:98%;
margin:0 auto;
padding:0px 0 20px;
}
.note{
border:1px solid #C11823;
position:relative;
margin-top:3em;
}
.note h3{
font-family: "Sawarabi Mincho";
font-size:20px;
text-align:center;
letter-spacing:0.1em;
position:absolute;
right:0;
left:0;
top:-0.5em;
}
.note span{
padding:0 1em;
background:#FFF;
color:#000;
}
.note .note_details{
padding:3em 0em 3em;
}
.note .note_details p{
font-size:16px;
text-align:center;
line-height:1em;
}
.note .note_details p span{
border-bottom:1px solid #000;
padding:0 0 0.1em 0;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.note_area{
width:94%;
margin:0 auto;
padding:20px 0;
}
.note{
border:1px solid #C11823;
position:relative;
margin-top:2em;
}
.note h3{
font-family: "Sawarabi Mincho";
font-size:18px;
text-align:center;
letter-spacing:0.1em;
position:absolute;
right:0;
left:0;
top:-0.5em;
}
.note span{
padding:0 1em;
background:#FFF;
color:#000;
}
.note .note_details{
padding:2em 0;
}
.note .note_details p{
font-size:14px;
text-align:center;
line-height:1.8em;
}
.note .note_details p span{
border-bottom:1px solid #000;
padding:0 0 0.1em 0;
}
}