@charset "Shift_JIS";
/*PCSP‹¤’ÊÝ’è*/
html {scroll-behavior: smooth;}/*smooth scroll*/
div.artcleWrap:nth-of-type(2n+1) {background: #e2f3f7;}
div.artcleWrap:nth-of-type(2n) {background: #FFF;}
/*759pxˆÈ‰º*/
@media screen and (max-width: 759.9px) {
#wrapper {line-height: 1.4;}
.spnone{display:none;}
/* CSS */
#dirPathBlock,
#anchorLinkBlock {
font-size: 10px;
margin: 1% 1% 0 1%;
}
#dirPathBlock p,
#anchorLinkBlock a{font-size: 12px;}
h1 {
font-size: 28px;
font-weight: bold;
margin: 0 1%;
position:relative;
}
h1:before {
content: "";
width: 50px;
height: 53px;
display: block;
position: absolute;
top: -50%;
left: 2%;
background: url(../images/pb-pixta96650884.png) no-repeat;
background-size: contain;
}
body *{
font-family:"ƒƒCƒŠƒI", Meiryo, sans-serif;
}
/* CSS‰ŠúÝ’è */
#bg{
font-size:12px;
overflow:hidden;
}
#bg img {
border:0;
vertical-align:bottom;
}
#bg ul,#bg ol {
list-style:none;
}
#bg a {
overflow: hidden;
}
#bg strong {
font-weight:bold;
}
.clear {
clear: both;
}
.clearFloat:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
line-height: 0;
}
.clearFloat {
display: inline-table;
min-height: 1%;
}
/* for macIE \*/
* html .clearFloat {
height: 1%;
}
.clearFloat {
display: block;
}
/* end of for macIE */
.clearFloat {
overflow:hidden;
}
a.OpaChange:hover *{
filter:alpha(opacity=70); /*IE*/
-moz-opacity:0.70; /*FF*/
opacity:0.70;
}
.clearfix:after {
content: "";
clear: both;
display: block;
}
div#dirPathBlock{
display:block;
margin:5px 0 5px 0!important;
font-size:10px!important;
width:auto!important
}
div#dirPathBlock a{
display:inline!important;
font-size:10px;
}
#wrap #wrapInner{
width:100%;
overflow:hidden;
}
.smpnone{
display:none
}
/* ------------------------------------------
title
------------------------------------------ */
#title{
width:100%;
background:#fff url(../images/bg.jpg) no-repeat 50% 50%;
background-size:cover;
text-align:center;
}
#title img{
width: 100%;
height: auto;
}
#title h2{
margin: 0;
padding: 0;
}
#guide {
background: #fff4ca;
color: #292220;
text-align: center;
padding: 25px 0;
font-size: 20px;
line-height: 1.4;
}
/* ------------------------------------------
naviMenu
------------------------------------------ */
.naviMenu{
margin: 0;
padding: 5px 10px !important;
background: #4ebbd2;
}
.naviMenu li{
display: inline-block;
width: 48%;
vertical-align: top;
}
.naviMenu li span{
border-bottom: dotted 1px #fff;
}
.naviMenu li a{
display: block;
padding: 8px 10px 8px 25px !important;
text-decoration: none;
font-size: 110%;
color: #fff;
background: url("../images/arrow_under.png") no-repeat left 10px;
background-size: 15px;
}
/* ------------------------------------------
artcleWrap
------------------------------------------ */
.artcleWrap{
width:100%!important;
background:#fff;
display:block;
margin:0 auto 0;
padding:10px 0 20px 0;
position:relative;
}
.inner{
margin:10px 15px 10px;
}
.commonTit{
text-align:center;
margin-bottom:15px;
font-family:"ƒqƒ‰ƒMƒmŠpƒS Pro W3", "Hiragino Kaku Gothic Pro", "ƒƒCƒŠƒI", Meiryo, Osaka, "‚l‚r ‚oƒSƒVƒbƒN", "MS PGothic", sans-serif;
}
.commonTit span{
position: relative;
display:inline-block;
padding: 0.3em 0.5em;
font-weight:bold;
font-size:18px;
color:#333;
border-bottom: solid 2px #ccc;
font-family:"ƒqƒ‰ƒMƒmŠpƒS Pro W3", "Hiragino Kaku Gothic Pro", "ƒƒCƒŠƒI", Meiryo, Osaka, "‚l‚r ‚oƒSƒVƒbƒN", "MS PGothic", sans-serif;
}
.commonTit span img{
display: block;
width:40px;
margin:0 auto 5px auto;
height:auto;
}
/* ------------------------------------------
information
------------------------------------------ */
#information{
background:#e2f3f7;
}
.infoBox{
margin: 30px 5px 0 5px;
padding: 10px 13px;
font-size:120%;
font-weight: bold;
text-align: center;
background:#fff;
}
.infoBox p{
padding: 5px 0;
}
.infoBox .sizeL{
padding-top: 10px;
font-size:120%;
line-height: 1.5;
}
.cPnk{
color:#f12773;
}
/* ------------------------------------------
flow
------------------------------------------ */
#flow .flowBox{
padding: 0;
}
#flow .flowBox ol{
margin:0;
padding: 0;
}
#flow .flowBox ol li{
position: relative;
padding: 15px 0;
}
#flow .flowBox ol li div{
overflow: hidden;
background: #e2f3f7;
border:solid 1px #c5e4eb;
}
#flow .flowBox ol li::before{
position: absolute;
left: 50%;
top:-10px;
content:'';
width: 18px;
height: 24px;
margin-left: -9px;
background: url("../images/arrow_flow.png") no-repeat;
background-size: 16px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#flow .flowBox ol li:nth-child(1)::before{
background: none;
}
#flow .flowBox ol li p{
float: left;
width: 59%;
padding: 10px 0 10px 15px;
font-size: 110%;
}
#flow .flowBox ol li p b{
font-weight: bold;
}
#flow .flowBox ol li .imFlow{
float: right;
width: 35%;
vertical-align: top;
}
#flow .flowBox.drink ol li .imFlow{
width: 100%;
float: none;
}
.underRed{
text-decoration: underline;
color: #f12773;
}
.uncer_btn a {
display: block;
width: 100%;
text-align: center;
font-weight: bold;
margin: 15px auto;
padding: 10px;
box-sizing: border-box;
background: #5bc4d9;
color: #FFF;
border: solid 2px #FFF;
font-size: 0.9rem;
box-shadow: 3px 3px 1px #5bc4d9;
position: relative;
}
.uncer_btn a:before {
content: "";
width: 18px;
height: 18px;
background: #FFF;
border-radius: 12px;
position: absolute;
top: 22px;
right: 10px;
}
.uncer_btn a:after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0;
position: absolute;
top: 28px;
right: 14px;
border-color: #f97198 transparent transparent transparent;
}
/*icon*/
.uncer_btn a small:before {
content: "";
width: 40px;
height: 40px;
border-radius: 50%;
position: absolute;
top: 10px;
left: 5px;
}
.uncer_btn a:nth-of-type(1) small:before {
background: #FFF url(../images/ic_gift.png) no-repeat 50%;
background-size: 80%;
}
.uncer_btn a:nth-of-type(2) small:before {
background: #FFF url(../images/ic_drink.png) no-repeat 50%;
background-size: 80%;
}
/* ------------------------------------------
attention
------------------------------------------ */
#attention{
background:#e2f3f7;
}
.attBox h3{
margin:25px 0 0 0;
}
.attBox ul{
margin:10px 0 10px 0 !important;
padding: 0;
}
.attBox ul li{
padding:0 0 10px 13px !important;
position:relative;
font-size: 110%;
}
.attBox ul li:before {
content:'';
float:left;
border-radius:5px;
border:solid 2px #0792b0;
position:absolute;
top:8px;
left:0px;
}
/* ------------------------------------------
planlist
------------------------------------------ */
.planlistBox ul{
margin:25px 0 20px 0;
padding: 0;
}
.planlistBox ul li{
padding:0 0 15px 20px !important;
position:relative;
font-size: 110%;
}
.planlistBox ul li:before {
content:'';
float:left;
width:16px;
height:16px;
background: url("../images/arrow_link.png") no-repeat;
background-size: 16px;
position:absolute;
top:2px;
left:0px;
}
/* btn
------------------------------------------ */
.btn a{
background:#ef7a00 url(../images/arrow_right_w.png) no-repeat 97% center;
background-size: 10px;
display:block;
padding:15px;
text-align:center;
text-decoration: none;
color:#FFF!important;
-webkit-border-radius: 5px;
border-radius: 5px;
width:90%;
font-size:130%;
font-family:"ƒqƒ‰ƒMƒmŠpƒS Pro W3", "Hiragino Kaku Gothic Pro", "ƒƒCƒŠƒI", Meiryo, Osaka, "‚l‚r ‚oƒSƒVƒbƒN", "MS PGothic", sans-serif;
margin:30px auto 0;
}
/* hotelBox
------------------------------------------ */
.hotelBox {
margin:0;
padding:0;
}
.hotelBox li{
width: 84%;
margin: 10px auto 10px auto !important;
padding: 0 !important;
background: #fff;
}
.hotelBox li img{
width: 100%;
margin-bottom:5px;
}
}
/*760pxˆÈã*/
@media screen and (min-width: 760px),print {
/* CSS */
#wrapper {line-height: 1.231;}
#dirPathBlock,
h1,
.iframe_end-content_gadget,
#anchorLinkBlock{
width: 100%;
max-width:970px;
min-width:760px;
margin: auto;
}
/*panlist&back*/
#dirPathBlock,
#anchorLinkBlock {
width: 100%;
margin: 0 auto;
display: block;
font-size: 12px;
}
#dirPathBlock p,
#anchorLinkBlock a{font-size: 12px;}
h1 {
font-size: 40px;
font-weight: bold;
width: auto;
max-width:970px;
min-width:760px;
margin: 0 auto 5px;
position:relative;
}
h1:before {
content: "";
width: 80px;
height: 85px;
display: block;
position: absolute;
top: -60%;
left: 20%;
background: url(../images/pb-pixta96650884.png) no-repeat;
background-size: contain;
}
/* CSS‰ŠúÝ’è */
.f10{
font-size:10px!important;
}
#bg img {
border:0;
vertical-align:bottom;
}
#bg ul,#bg ol {
list-style:none;
}
#bg a {
overflow: hidden;
}
#bg strong {
font-weight:bold;
}
.clear {
clear: both;
}
.clearFloat:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
line-height: 0;
}
.clearFloat {
display: inline-table;
min-height: 1%;
}
/* for macIE \*/
* html .clearFloat {
height: 1%;
}
.clearFloat {
display: block;
}
/* end of for macIE */
.clearFloat {
overflow:hidden;
}
a.OpaChange:hover *{
filter:alpha(opacity=70); /*IE*/
-moz-opacity:0.70; /*FF*/
opacity:0.70;
}
.clearfix:after {
content: "";
clear: both;
display: block;
}
#wrapInner{
width:100%!important;
}
.pcnone{
display:none;
}
.inner950{
width:950px;
margin:0 auto;
}
/* ------------------------------------------
mainArea
------------------------------------------ */
#mainArea{
width:100%!important;
margin:0 auto;
display:block;
position:relative;
padding:0 0 20px 0;
}
#mainArea table {border-collapse: collapse;}
#mainArea img { border: none; vertical-align: bottom;}
#mainArea ol,#mainArea ul,#mainArea dl,#mainArea li,#mainArea dd{ list-style-type: none; margin: 0; padding: 0;}
#mainArea a:hover {opacity: 0.7;}
#mainArea {font-size:14px;line-height: 1.5;}
/* ------------------------------------------
title
------------------------------------------ */
#title{
width:100%;
background:#fff url(../images/bg.jpg) no-repeat 50% 50%;
background-size: cover;
text-align:center;
height:365px;
}
#title p{
margin:0;
padding:0;
}
#guide {
background: #fff4ca;
color: #292220;
text-align: center;
padding: 50px 0;
font-size: 28px;
line-height: 1.5;
}
/* ------------------------------------------
naviMenu
------------------------------------------ */
.naviMenu{
background:#4ebbd2;
margin: 0;
padding:10px 0;
text-align:center;
display:block;
}
.naviMenu li{
display:inline-block;
font-size:16px;
border-left:1px solid #FFF;
}
.naviMenu li:nth-of-type(1){
border-left:none
}
.naviMenu li a{
color:#FFF;
display:block;
padding:10px 20px 10px 20px;
background:url(../img/im_arrow_u.png) no-repeat 50% 95%;
background-size:17px auto;
}
.naviMenu li a:hover{
transition: 0.2s ;
opacity: 0.5 ;
background:url(../img/im_arrow_u.png) no-repeat 50% 98%;
background-size:17px auto;
}
/* ------------------------------------------
artcleWrap
------------------------------------------ */
.artcleWrap{
width:100%!important;
background:#fff;
display:block;
margin:0 auto 0;
padding:20px 0 30px 0;
position:relative;
}
.inner{
width:950px;
margin:40px auto;
}
.commonTit{
text-align:center;
margin-bottom:40px;
font-family:"ƒqƒ‰ƒMƒmŠpƒS Pro W3", "Hiragino Kaku Gothic Pro", "ƒƒCƒŠƒI", Meiryo, Osaka, "‚l‚r ‚oƒSƒVƒbƒN", "MS PGothic", sans-serif;
}
.commonTit span{
position: relative;
display:inline-block;
padding: 0.5em 0.2em 0.3em 0;
font-weight:bold;
font-size:28px;
color:#333;
border-bottom: solid 2px #ccc;
}
.commonTit span img{
width:40px;
margin:0 10px 2px 0;
height:auto;
}
/* ------------------------------------------
information
------------------------------------------ */
#information{
background:#e2f3f7;
}
.infoBox{
padding: 30px 0 30px 0;
background: #fff;
text-align: center;
font-size:130%;
font-weight: bold;
}
.infoBox .sizeL{
padding-top: 10px;
font-size:120%;
line-height: 2;
}
.cPnk{
color:#f12773;
}
/* ------------------------------------------
flow
------------------------------------------ */
#flow .flowBox{
padding: 20px 0 30px 0;
}
#flow .flowBox ol li{
list-style-type: none;
position: relative;
float: left;
padding: 0 15px;
text-align: center;
width: 215px;
}
#flow .flowBox ol li:nth-child(1){
padding-left: 0;
}
#flow .flowBox ol li:last-child{
padding-right: 0;
}
#flow .flowBox ol li div{
overflow: hidden;
background: #e2f3f7;
border:solid 1px #c5e4eb;
}
#flow .flowBox ol li::before{
position: absolute;
left: -10px;
top:50%;
content:'';
width: 22px;
height: 32px;
margin-top: -16px;
background: url("../images/arrow_flow.png") no-repeat;
}
#flow .flowBox ol li:nth-child(1)::before{
background: none;
}
#flow .flowBox ol li p{
padding: 20px 10px 0 15px;
text-align: left;
font-size: 110%;
}
#flow .flowBox ol li .imFlow{
width: 155px;
}
#flow .flowBox.drink ol {
width: fit-content;
margin:auto;
}
#flow .flowBox.drink ol li,
#flow .flowBox.drink ol li .imFlow{width: 310px;}
.underRed{
text-decoration: underline;
color: #f12773;
}
.uncer_btn {
display: flex;
gap: 1em;
}
.uncer_btn a {
display: block;
width: 100%;
text-align: center;
font-weight: bold;
margin: 15px auto;
padding: 10px;
box-sizing: border-box;
background: #5bc4d9;
color: #FFF;
border: solid 2px #FFF;
font-size: 1.2rem;
box-shadow: 3px 3px 1px #5bc4d9;
position: relative;
}
.uncer_btn a:before {
content: "";
width: 24px;
height: 24px;
background: #FFF;
border-radius: 12px;
position: absolute;
top: 25px;
right: 15px;
}
.uncer_btn a:after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 8px 6px 0;
position: absolute;
top: 34px;
right: 21px;
border-color: #f97198 transparent transparent transparent;
}
/*icon*/
.uncer_btn a small:before {
content: "";
width: 48px;
height: 48px;
border-radius: 50%;
position: absolute;
top: 15px;
left: 15px;
}
.uncer_btn a:nth-of-type(1) small:before {
background: #FFF url(../images/ic_gift.png) no-repeat 50%;
background-size: 80%;
}
.uncer_btn a:nth-of-type(2) small:before {
background: #FFF url(../images/ic_drink.png) no-repeat 50%;
background-size: 80%;
}
/* ------------------------------------------
attention
------------------------------------------ */
#attention{
background:#e2f3f7;
}
.attBox h3{
font-size:120%;
font-weight: bold;
}
.attBox ul{
margin:20px 0 20px 0 !important;
}
.attBox ul li{
padding:0 0 10px 15px !important;
position:relative;
font-size: 16px;
}
.attBox ul li:before {
content:'';
float:left;
border-radius:5px;
border:solid 2px #0792b0;
position:absolute;
top:10px;
left:0px;
}
/* ------------------------------------------
planlist
------------------------------------------ */
.planlistBox ul{
margin:20px 0 20px 35px;
}
.planlistBox ul li a{
padding:0 0 15px 20px !important;
background: url("../images/arrow_link.png") no-repeat left 3px;
background-size: 16px;
font-size: 110%;
}
/* btn
------------------------------------------ */
.btn a{
background:#ef7a00 url(../images/arrow_right_w.png) no-repeat 95% center;
background-size: 13px;
display:block;
padding:15px;
text-align:center;
color:#FFF!important;
text-decoration: none;
-webkit-border-radius: 5px;
border-radius: 5px;
width:50%;
font-size:20px;
font-family:"ƒqƒ‰ƒMƒmŠpƒS Pro W3", "Hiragino Kaku Gothic Pro", "ƒƒCƒŠƒI", Meiryo, Osaka, "‚l‚r ‚oƒSƒVƒbƒN", "MS PGothic", sans-serif;
margin:30px auto 0;
}
.btn:hover{
opacity: 0.7 ;
transition: 0.2s ;
text-decoration:none!important;
}
}