@charset "UTF-8";

/*---------- ページ全体の指定 ----------*/
html > * {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
html, body, header, section, article, nav, footer,
div, span, p, h1, h2, h3, h4,
ul, ol, li, dl, dt, dd,
table, tr, th, td, tbody, thead, tfoot,address,strong {
margin: 0;
padding: 0;
font-style: normal;
font-weight: normal;
}
li {list-style: none;}
img {border: 0;}
body {
width: 100%;
background: #fff;
font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
font-weight: 400;
font-style: normal;
line-height: 2;
-webkit-text-size-adjust:100%;
}
p,ul,address{
font-size: 1rem;
}
a {
text-decoration:none;
color: #000000;
}
header img,main img{
width: 100%;
}
@media screen and (max-width:350px) {
html{
font-size: 93.75%;
}
}
/*---------- header ----------*/
#header_cnt01{
position: relative;
}
#logo{
position: absolute;
width: 80px;
bottom: 1%;
right: 3%;
}
#mainimg{
position: relative;
line-height: 0;
height: 300px;
z-index: -99;
overflow: hidden;
}
#mainimg img{
    position: absolute;
    height: 100%;
    width: auto;
    margin-left: -240px;
    top: 0;
    left: 50%;
}
header h1{
position: absolute;
top: 6%;
left: 3%;
width: 45%;
}
#period{
margin: -5px 0 0 10px;
width: 120px;
text-align: center;
padding: 7px 5px;
background-color: #1479b3;
transform: rotate(-18deg);
color: #ffffff;
font-size: 14px;
}
#period span{
font-size: 10px;
}
#catch{
margin: 15px 20px 0 30px;
}
@media screen and (min-width:450px) {
header h1{
width: 40%;
}
#mainimg{
position: relative;
line-height: 0;
height: auto;
width: 100%;
}
#mainimg img{
position: static;
height:auto;
width: 100%;
margin-left: 0;
top: 0;
left: 0;
}
}
/*---------- main ----------*/
.txt01{
margin: 30px 15px 0;
}
#benefit{
box-sizing: border-box;
background: #fefbe8 url(../img/line01.png) left top repeat;
margin-top: 50px;
padding: 30px 0;
line-height: 1.8;
}
#benefit ul{
box-sizing: border-box;
}
#benefit h2{
text-align: center;
color: #1479b3;
font-size: 1.375rem;
font-weight: 600;
}
#benefit li{
width: 95%;
padding: 15px 5px 10px;
border-radius: 20px;
box-sizing: border-box;
background-color: #ffffff;
margin: 20px auto 0;
}
#benefit li h3{
font-size: 1.125rem;
text-align: center;
padding-left: 10px;
}
#benefit div{
display: flex;
align-items: flex-start;
}
.benefit_img01{
width: 35%;
margin-top: 10px;
padding: 7px 7px 13px 11px;
background: url(../img/circle.png) center center no-repeat;
background-size: 100% auto;
line-height: 0;
}
.benefit_txt01{
box-sizing: border-box;
width: 65%;
margin-top: 15px;
padding-left: 5px;
line-height: 1.7;
}
#corona{
color: #fff;
box-sizing: border-box;
background-color: #1479b3;
padding: 20px;
margin: 50px 10px 0 15px;
border-radius: 3px;
}
#corona h2{
text-align: center;
font-size: 1rem;
margin-bottom: 10px;
}
.link_plan.child{
background-color: #009f92;
}
#spot{
line-height: 1.8;
}
#spot_tit{
text-align: center;
}
#spot_tit span{
box-sizing: border-box;
background-color: #e3c900;
display: inline-block;
padding: 20px 20px 15px;
border-radius: 50%;
border: solid 13px #fced7c;
margin: 100px auto 0;
color: #ffffff;
font-size: 16px;
text-align: center;
font-weight: bold;
line-height: 1.7;
}
.cnt01{
margin-top: 40px;
}
.cnt01:first-child{
margin-top: 60px;
}
.box01{
position: relative;
}
.box02{
position: relative;
background-color: #fff;
padding: 10px 15px;
}
.box02 h2{
text-align: center;
font-size: 1.0625rem;
margin-bottom: 5px;
}
@media screen and (min-width:400px) {
.cnt01:first-child, .cnt02 {
margin-top: 100px;
}
.cnt01{
display: flex;
align-items: flex-start;
}
.box01{
width: 43%;
min-width: 43%;
max-width: 43%;
}
.box02{
width: auto;
padding: 0 15px 0 10px;
}
}
@media screen and (min-width:600px) {
#corona{
width: 560px;
margin: 50px auto 0;
}
.cnt01{
margin-left: 30px;
margin-right: 30px;
}
.box02{
padding: 0 0 0 25px;
}
.box02 h2{
margin-top: 10px;
margin-bottom: 10px;
}
}
@media screen and (min-width:800px) {
#spot{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#spot_tit{
width: 100%;
}
#spot_tit div{
margin: 120px auto 0;
}
.cnt01{
display: block;
width: 30%;
margin:50px 0 0;
}
.cnt01.last{
margin:50px 0 0 20px;
}
.box01{
width: auto;
min-width: auto;
max-width: 100%;
}
.box02{
padding-left: 0;
}
}
.link_list01{
width: 250px;
margin: 0 auto;
padding: 60px 0 0;
}
.link_list01 li{
border-radius: 5px;
}
.link_list01 a{
display: block;
color:#fff;
padding: 15px;
font-weight: bold;
text-align: center;
}
.link_hp{
background-color: #a8adb2;
margin-bottom: 10px;
}
.link_plan{
background-color: #00988c;
}
@media screen and (min-width:350px) {
h1{
top: 45px;
right: 6%;
line-height: 1.7;
}
#benefit li{
padding: 20px 10px 15px;
width: 90%;
}
.benefit_img01{
width: 40%;
}
.benefit_txt01{
width: 60%;
padding-left: 10px;
}
footer address{
letter-spacing: 0;
}
}
@media screen and (min-width:450px) {
#logo{
width: 100px;
}
#benefit li {
padding: 20px 20px 10px;
width: 400px;
}
.benefit_txt01{
padding-left: 10px;
}
}
@media screen and (min-width:620px) {
#logo{
width: 130px;
}
#period{
margin: -10px 0 0 10%;
font-size: 16px;
width: 150px;
}
#catch{
text-align: center;
margin: 15px 20px 0 30px;
}
#catch span::before{
content: "\A" ;
white-space: pre;
}
}
@media screen and (min-width:700px) {
header h1 {
width: 300px;
}
#benefit{
padding: 40px 0;
}
#benefit ul{
padding: 0 10px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#benefit li{
width: 47%;
padding: 20px 15px 10px;
}
.benefit_img01{
width: 40%;
}
.benefit_txt01{
width: 60%;
padding-left: 10px;
}
#benefit li:nth-child(1){
position: relative;
width: 55%;
min-height: 220px;
margin: 40px auto 0;
}
#benefit li:nth-child(1) h3{
padding: 0 10px 0 40%;
padding-top: 10px;
}
#benefit li:nth-child(1) .benefit_txt01{
padding:0 10px 0 45%;
width: auto;
}
#benefit li:nth-child(1) .benefit_img01 {
width: 35%;
position: absolute;
top: 10px;
left: 15px;
}
#benefit li:nth-child(2),#benefit li:nth-child(3){
margin-top: 30px;
}
}
@media screen and (min-width:750px) {
#period{
margin: -10px 0 0 15%;
font-size: 17px;
width: 160px;
}
#benefit ul{
padding: 0 25px;
}
.link_list01 {
width: 500px;
display: flex;
justify-content: space-between;
}
.link_list01 li{
width: 48%;
}
.link_hp {
margin-bottom: 0;
}
}
@media screen and (min-width:800px) {
header h1 {
width: 330px;
top: 8%;
left: 5%;
}
#period{
margin: -10px 0 0 20%;
}
}
@media screen and (min-width:950px) {
header,#benefit,#spot,footer div{
width: 950px;
margin-left:auto;
margin-right:auto;
}
#benefit{
border-radius: 30px;
}
#benefit ul {
padding: 0 35px;
}
.link_list01 {
padding: 80px 0 0;
}
}
/* #ginpaso */
#spa{
margin-top: 100px;
text-align: center;
}
#spa_box01{
position: relative;
height: 400px;
overflow: hidden;
}
#thumbnail{
position: absolute;
/*background: url(../img/thumbnail.png) top left no-repeat;
background-size: cover;*/
height: 400px;
width: 711px;
z-index: 200;
top: 0;
left: 0;
}
#thumbnail img{
height: 100%;
}
#thumbnail.none{
display: none;
}
#spa_box01 video{
height: 100%;
}
#video_spa_btn01,#video_spa_btn02,#video_spa_btn03{
position: absolute;
bottom: 10px;
z-index: 250;
width: 30px;
height: 30px;
opacity: 0.5;
}
#video_spa_btn01{
left: 10px;
background-image: url(../img/play.png);
background-repeat: no-repeat;
background-size: cover;
}
#video_spa_btn02{
left: 40px;
background-image: url(../img/pause.png);
background-repeat: no-repeat;
background-size: cover;
}
#video_spa_btn03{
left: 75px;
background-image: url(../img/music_off.png);
background-repeat: no-repeat;
background-size: cover;
}
#video_spa_btn03.on{
background-image: url(../img/music.png);
background-repeat: no-repeat;
background-size: cover;
}
#spa h2{
padding: 40px 0 0;
font-size: 1rem;
}
#kaiseki{
margin-top: 50px;
text-align: left;
padding: 60px 20px;
background: url(../img/bg.jpg) left top repeat;
text-shadow:0 0 10px #fff;
box-sizing: border-box;
}
#kaiseki h2 {
font-size: 1.1875rem;
text-align: center;
line-height: 1.9;
padding: 50px 0 ;
}
#kaiseki h2 span::before{
content: "\A" ;
white-space: pre;
}
#kaiseki .img{
max-width: 600px;
margin: 0 auto;
}
#kaiseki_box02{
margin: 0 10px;
}
#kaiseki_list01 {
padding: 20px 30px 0;
}
#kaiseki_list01 li{
padding: 30px 0 0;
max-width: 350px;
margin: 0 auto;
}
#kaiseki_list01 li span{
display: block;
margin-top: 5px;
line-height: 1.7;
}
#menu{
margin-top: 60px;
padding: 30px 20px;
background: rgba(225, 225, 225, 0.1);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
#kaiseki h4{
text-align: center;
}
#kaiseki dd{
line-height: 1.7;
margin: -29px 0 0 70px;
}
#kaiseki dt{
margin-top: 15px;
}
#ginpa_img_list{
display: flex;
flex-wrap: wrap;
line-height: 0;
margin: 50px 0 0;
justify-content: space-between;
}
#ginpa_img_list a:hover{
opacity: 0.8;
}
#ginpa_img_list li:nth-of-type(1){
width: 42.86%;
}
#ginpa_img_list li:nth-of-type(2){
width: 57.14%;
}
#ginpa_img_list_notice{
margin-top: 5px;
text-align: right;
opacity: 0.8;
font-size: 0.875rem;
margin-right: 10px;
}
@media screen and (min-width:650px) {
#kaiseki h2 span::before{
content: none;
white-space: normal;
}
#spa_box01{
width: 100%;
height: auto;
max-height: 600px;
}
#thumbnail{
height: auto;
width: 100%;
}
#thumbnail img{
height: auto;
width: 100%;
}
#spa_box01 video{
height: auto;
width: 100%;
}
#kaiseki_box01,#kaiseki_box02,#kaiseki_box03{
margin: 0 auto;
width: 560px;
}
#menu{
padding: 30px 30px;
}
#kaiseki dt{
letter-spacing: 3px;
}
#kaiseki dd{
line-height: 1.7;
margin: -29px 0 0 80px;
}
#ginpa_img_list{
padding: 0 20px;
margin: 60px auto 0;
max-width: 950px;
box-sizing: border-box;
}
#ginpa_img_list_notice{
padding:  0 20px;
max-width: 950px;
box-sizing: border-box;
margin: 5px auto;
}
}
@media screen and (min-width:750px) {
#hamo_detail{
max-width: 800px;
}
#hamo_detail li{
display: flex;
flex-flow: row-reverse;
margin-top: 60px;
justify-content: space-between;
}
#hamo_detail li div,.hamo_detail_img{
width: 47%;
}
.hamo_detail_img{
margin-top: 0;
}
#hamo_detail h5 {
margin: 20px 0;
}
}
@media screen and (min-width:850px) {
#kaiseki_list01{
display: flex;
width: 750px;
margin: 50px auto 0;
}
#kaiseki_list01 li {
padding: 0;
}
#kaiseki_list01 span{
padding: 0 5px;
}
}
@media screen and (min-width:950px) {
#spa h3 {
padding: 50px 0 0;
}
#ginpa_img_list {
margin-top: 50px;
}
#kaiseki_box05{
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: space-between;
}
#kaiseki .img{
width: 50%;
line-height: 0;
margin: 0;
}
#kaiseki_box01{
width: 45%;
margin: 0;
padding-right: 1%;
}
#kaiseki_box01 h2{
padding-top: 60px;
}
#kaiseki_box02{
width: 100%;
margin-top: 80px;
}
#kaiseki_box02 p{
width: 700px;
margin: 0 auto;
}
#kaiseki_box03{
width: 100%;
}
#kaiseki_list01{
width: 800px;
margin: 80px auto 0;
}
#menu{
height: 400px;
box-sizing: border-box;
max-width: 900px;
margin: 80px auto 0;
}
#menu div{
writing-mode: vertical-rl;
-ms-writing-mode     : tb-rl;
-webkit-writing-mode : vertical-rl;
float: right;
}
#menu h4{
text-align: left;
padding: 20px 30px 0 40px;
}
#kaiseki dt{
margin-top: 0;
}
#kaiseki dd{
margin: 75px -30px 0 30px;
}
}
@media screen and (min-width:1100px) {
#ginpaso h3 {
font-size: 1.0625rem;
}
}
@media screen and (min-width:1200px) {
#kaiseki_box05{
position: relative;
padding: 0 50px 0 700px;
min-height: 410px;
box-sizing: border-box;
}
#kaiseki .img {
position:absolute;
top: 0;
left: 40px;
width: 600px;
}
#kaiseki_box01, #kaiseki_box02,#kaiseki_box02 p{
width: auto;
}
#kaiseki_box02{
max-width: 600px;
margin: 60px auto 0;
}
#kaiseki_box01 h3 {
padding-top: 30px;
}
}
/* #access */
#access{
margin-top: 40px;
}
#access h2 {
font-size: 1.1875rem;
text-align: center;
line-height: 1.9;
padding: 50px 0 30px;
}
#access iframe{
width: 100%;
}
#access h3.ginpa{
padding: 10px 20px;
font-size: 1rem;
}
#access address{
margin: 0 20px 15px;
}
#access ul{
border-top: dotted 1px #a5a5a5;
padding: 20px 0 0;
margin: 0 20px;
line-height: 1.3;
}
#access ul img{
width: 30px;
position: absolute;
top: 0;
left: 0;
}
#access li{
position: relative;
padding: 0 0 20px 40px;
}
#access .inquiry li:first-of-type{
margin-bottom: 10px;
}
#access li span{
display: block;
margin-top: 5px;
}
#access .inquiry img:first-of-type{
width: 25px;
}
#access ul a{
text-decoration: underline;
}
@media screen and (min-width:650px) {
#access{
margin-top: 100px;
}
#access h2 {
padding: 50px 0;
}
}
@media screen and (min-width:900px) {
#access{
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
}
#access h2,#access h3{
width: 100%;
}
.access_map{
width: 55%;
}
#access_box01{
width: 45%;
}
}
@media screen and (min-width:1100px) {
#access h4.ginpa,#access address {
font-size: 1.0625rem;
}
}
/*---------- footer ----------*/
footer{
margin-top: 100px;
text-align: center;
position: relative;
background-color:#dde0e2;
padding: 45px 10px 5px 15px;
color: #000;
letter-spacing: 0;
}
footer a{
color: #000;
text-decoration: underline;
}
footer address img{
width: 110px;
margin-bottom: 40px;
opacity: 1;
}
footer address{
font-size: 0.875rem;
letter-spacing: 1px;
opacity: 0.9;
line-height: 1.7;
}
#footer_tel{
margin-top: 30px;
text-align: center;
font-size: 0.875rem;
opacity: 0.9;
}
#footer_tel img{
width: 20px;
margin: -5px 5px 0 10px;
vertical-align: middle;
}
#footer_tel a{
font-size: 1.125rem;
}
#footer_tel span{
font-size: 0.875rem;
opacity: 0.6;
}
footer #footer_links{
display: flex;
flex-flow: wrap;
text-align: left;
margin-top: 40px;
font-size: 0.875rem;
opacity: 0.6;
}
@media screen and (max-width:350px) {
footer address img{
width: 100px;
margin-bottom: 30px;
opacity: 1;
}
footer address{
letter-spacing: 0px;
}
}
footer #sns_img{
text-align: center;
margin-top: 50px;
opacity: 0.8;
}
footer #sns_img li{
display: inline-block;
margin-left: 5px;
}
footer #sns_img li:last-child{
text-align: center;
display: block;
margin-top: 6px;
margin-bottom: 15px;
}
footer #sns_img li img{
width: 27px;
}
footer #sns_img li:last-child img{
width: 80px;
height: 25px;
}
.copyright{
text-align: center;
margin-top: 30px;
font-size: 0.8125rem;
padding-bottom: 10px;
opacity: 0.5;
}
@media screen and (min-width:1100px) {
footer {
padding: 60px 10px 5px 15px;
}
footer address img {
width: 130px;
}
footer address,#footer_tel,#footer_tel span{
font-size: 0.9375rem;
}
#footer_tel a{
font-size: 1.1875rem;
}
}