@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;
}
}









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

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:14%;
margin:60px auto 0;
}
.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;
}
.seasonal_menu{
width:70%;
height:auto;
margin:30px auto 0;
}
.pdf{
text-align:center;
margin-top:1em;
}
}
@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:14%;
margin:40px auto 0;
}
.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;
}
.seasonal_menu{
width:80%;
height:auto;
margin:20px auto 0;
}
.pdf{
text-align:center;
margin-top:0.5em;
}
}
@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:30%;
margin:30px auto 0;
}
.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;
}
.seasonal_menu{
width:100%;
height:auto;
margin:20px auto 0;
}
.pdf{
text-align:center;
margin:0.5em auto 0em;
}

}









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

BATH_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.bath_area{
width:1000px;
margin:0 auto;
padding:0 0 30px;
}
.bath_area ol{
}
.bath_area ol li{
width:46%;
margin:30px 2% 0;
float:left;
}
.bath_area h3{
width:20%;
height:auto;
margin:0 auto 15px;
}
.bath_area div{
width:100%;
height:auto;
display:inline-block;
position:relative;
}
.bath_area div:after{
position:absolute;
content:"";
box-shadow:0 15px 10px rgba(0,0,0, .5);
transform:rotate(3deg);
right:5px;
left:auto;
top:auto;
bottom:15px;
z-index:-1;
width:50%;
height:20%;
}
.bath_area p{
font-family: 'Noto Serif JP', serif;
font-size:15px;
text-align:center;
letter-spacing:0.05em;
margin-top:1.5em;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.bath_area{
width:98%;
margin:0 auto;
padding:0 0 20px;
}
.bath_area ol{
}
.bath_area ol li{
width:48%;
margin:20px 1% 0;
float:left;
}
.bath_area h3{
width:24%;
height:auto;
margin:0 auto 15px;
}
.bath_area div{
width:100%;
height:auto;
display:inline-block;
position:relative;
}
.bath_area div:after{
position:absolute;
content:"";
box-shadow:0 15px 10px rgba(0,0,0, .5);
transform:rotate(3deg);
right:5px;
left:auto;
top:auto;
bottom:15px;
z-index:-1;
width:50%;
height:20%;
}
.bath_area p{
font-family: 'Noto Serif JP', serif;
font-size:14px;
text-align:center;
letter-spacing:0.05em;
margin-top:1.5em;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.bath_area{
width:94%;
margin:0 auto;
padding:20px 0 0;
}
.bath_area ol{
}
.bath_area ol li{
width:90%;
margin:20px 5% 0;
}
.bath_area h3{
width:30%;
height:auto;
margin:0 auto 5px;
}
.bath_area div{
width:100%;
height:auto;
display:inline-block;
position:relative;
}
.bath_area div:after{
position:absolute;
content:"";
box-shadow:0 15px 10px rgba(0,0,0, .5);
transform:rotate(3deg);
right:5px;
left:auto;
top:auto;
bottom:15px;
z-index:-1;
width:50%;
height:20%;
}
.bath_area p{
font-family: 'Noto Serif JP', serif;
font-size:14px;
text-align:left;
letter-spacing:0.05em;
margin-top:0.5em;
}
}









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

HOWTO_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.howto_area{
width:1000px;
margin:0 auto;
padding:50px 0 30px;
}
.howto_area h4{
font-family: "Sawarabi Mincho";
font-size:28px;
font-weight:500;
letter-spacing:0.15em;
text-align:center;
}
.turn{
position:relative;
width:100%;
margin:50px auto 0;
}
.turn_image{
padding-left:40%;
}
.turn img{
width:100%;
}
.howto_area ol{
counter-reset:number;
list-style-type:none!important;
position:absolute;
background-color:rgba(255,255,255,0.7);
padding:2em 2em 2em 0;
width:50%;
top:10%;
left:0;
}
.howto_area ol li{
position:relative;
padding-left:0px;
line-height:1.8em;
padding:0.5em 0.5em 0.5em 2em;
font-size:16px;
font-weight:600;
letter-spacing:0.03em;
}
.howto_area ol li:before{
position:absolute;
counter-increment:number;
content:counter(number);
display:inline-block;
background:#005C2C;
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%);
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.howto_area{
width:98%;
margin:0 auto;
padding:20px 0 20px;
}
.howto_area h4{
font-family: "Sawarabi Mincho";
font-size:24px;
font-weight:500;
letter-spacing:0.15em;
text-align:center;
}
.turn{
position:relative;
width:100%;
margin:50px auto 0;
}
.turn_image{
padding-left:40%;
}
.turn img{
width:100%;
}
.howto_area ol{
counter-reset:number;
list-style-type:none!important;
position:absolute;
background-color:rgba(255,255,255,0.7);
padding:1.5em 1.5em 1.5em 0;
width:55%;
top:5%;
left:0;
}
.howto_area ol li{
position:relative;
padding-left:0px;
line-height:1.8em;
padding:0.5em 0.5em 0.5em 2em;
font-size:14px;
font-weight:600;
letter-spacing:0.03em;
}
.howto_area ol li:before{
position:absolute;
counter-increment:number;
content:counter(number);
display:inline-block;
background:#005C2C;
color:#FFF;
font-family:'Avenir','Arial Black','Arial',sans-serif;
font-weight:bold;
font-size:15px;
border-radius:50%;
left:0;
width:25px;
height:25px;
line-height:25px;
text-align:center;
top:50%;
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.howto_area{
width:94%;
margin:0 auto 30px;
padding:20px 0 0;
}
.howto_area h4{
font-family: "Sawarabi Mincho";
font-size:20px;
font-weight:500;
letter-spacing:0.15em;
text-align:center;
line-height:1.35em;
}
.turn{
width:100%;
margin:20px auto 0;
}
.turn_image{
margin-bottom:10px;
}
.turn img{
width:100%;
}
.howto_area ol{
counter-reset:number;
list-style-type:none!important;
}
.howto_area ol li{
position:relative;
line-height:1.4em;
padding:0.5em 0.5em 0.5em 2.5em;
font-size:14px;
font-weight:600;
letter-spacing:0.03em;
}
.howto_area ol li:before{
position:absolute;
counter-increment:number;
content:counter(number);
display:inline-block;
background:#005C2C;
color:#FFF;
font-family:'Avenir','Arial Black','Arial',sans-serif;
font-weight:bold;
font-size:15px;
border-radius:50%;
left:0;
width:25px;
height:25px;
line-height:25px;
text-align:center;
top:50%;
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
}
}









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

FEE_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.fee_bg{
width:100%;
margin:0 auto;
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:0 auto;
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:0 auto;
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;
}
}