@charset "UTF-8";
/* WLリニューアル（2016.09）　施設案内CSS*/
@import url("../css/jsp-common.css");


/*webfont*/
@import 'https://fonts.googleapis.com/css?family=Khand';
@import 'https://fonts.googleapis.com/css?family=Josefin+Sans';
@import 'https://fonts.googleapis.com/css?family=Titillium+Web:600';

/*calendar*/
.calendar {background-color:rgba(255,255,255,0.40); font-size:1.0em; border-collapse:collapse; margin:5px 0; font-family: 'Josefin Sans', sans-serif;}
table.calendar{border:1px #FFFFFF solid;}
table.calendar td {border: solid 1px #333333; text-align:center;}
.calendar-off {background-color:rgba(255,181,181,0.30);}
/* Holiday */
.calendar td.closed {color:#EF2F33; font-weight:bold; background-color:rgba(255,215,216,0.50);}
/* rinji */
table.calendar16 td.working { }


/*--------------------------------------------------------------------------------------------------------------------------*/

@media screen and (min-width: 50px) and (max-width: 736px){

/**facility*****************************************************/

.mboff{display:none;}/*非表示*/

#facilictyWrap{font-family:"Shin Go Regular";}
#facilictyWrap .frontImg{background-image: url(../images/23416679_m.jpg); width: 100%; background-position: center center; background-size: cover; background-repeat:repeat-y; border-bottom:#ffffff dotted 5px;}
#facilictyWrap .frontImg #frontTxt{text-align:center; margin:70px auto auto auto;}
#facilictyWrap .frontImg #frontTxt H1{font-family:"Folk Medium"; width:100%; font-size:2.5em; color:#FFFFFF; margin:0 auto 30px auto; text-shadow:0px 0px 10px #123245; line-height:1.3em;}
#facilictyWrap .frontImg #frontTxt H1 span{font-family: 'Khand', sans-serif; display:block; margin:0 0 10px 0; font-size:0.8em; line-height:1.3em;}

#facilictyWrap .frontImg #frontDes{width:100%; margin:0 auto; padding:20px 10px; box-sizing:border-box; background-color:rgba(0,173,236,0.60); color:#FFFFFF; font-size:0.9em; line-height:2.0em; text-shadow:0px 2px 3px #4a4a4a;}


#facilictyWrap .info{padding:0; width:100%; background-color:#FFFFFF; position: relative; box-sizing:border-box;}
#facilictyWrap .info .photo{background-image: url(../images/facilitiesInfo-img.jpg); width: 100%; height: 250px; overflow: hidden; position: relative; vertical-align: middle; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover;}
#facilictyWrap .info .txt{width: 100%; height: auto; overflow: hidden; position: relative; vertical-align: middle; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; padding:30px 20px; box-sizing:border-box; font-size:0.9em; line-height:1.7em; color:#ffffff; text-shadow:0px 2px 3px #4a4a4a; background-color:#E3A874; background:url("../images/hemp-bg3.png"); border-bottom:#FFFFFF dotted 5px;}
#facilictyWrap .info .txt h2{font-family: 'Khand', sans-serif; color:#003764; font-size:2.5em; margin:0 0 10px 0; padding:0;}

#storage , 
#slope , 
#wash , 
#pier , 
#refueling , 
#wooddeck , 
#premiumdeck , 
#changingroom , 
#toilet , 
#reception , 
#service{padding:0; width:100%; background-color:#f8e8c2; display: table; position: relative; box-sizing:border-box;}

#facilictyWrap .leftWrap, 
#facilictyWrap .rightWrap{width: 100%; display: block; background:url("../images/hemp-bg.png");}

#storage .rightWrap , 
#wash .rightWrap , 
#pier .rightWrap , 
#refueling .rightWrap , 
#toilet .rightWrap , 
#service .rightWrap{height: 250px; position: absolute; top: 0; left: 0;}/*右に写真*/

#slope .leftWrap , 
#premiumdeck .leftWrap , 
#wooddeck .leftWrap , 
#changingroom .leftWrap , 
#reception .leftWrap{height: 250px; position: absolute; top: 0; left: 0;}/*左に写真*/

#facilictyWrap .inner{font-size:0.9em; line-height:1.5em; color:#4A2015; text-shadow:0px 2px 3px #AFAFAF; padding:320px 20px 40px 20px; box-sizing:border-box;}
#facilictyWrap .inner p{font-family: 'Folk Medium'; color:#004B76; font-size:2.0em; margin:0 0 20px 0; padding:0;}

#facilictyWrap #storage .rightWrap{height:300px; background-image: url(../images/facility-storage.jpg); background-repeat:no-repeat; background-position:center center; background-size:cover;}/*保管設備*/
#facilictyWrap #slope .leftWrap{height:300px; background-image: url(./images/slope.webp); background-repeat:no-repeat; background-position:center center; background-size:cover;}/*揚降用トロッコ*/
#facilictyWrap #wash .rightWrap{height:300px; background-image: url(./images/wash.webp); background-repeat:no-repeat; background-position:center center; background-size:cover;}/*洗艇設備*/
#facilictyWrap #premiumdeck .leftWrap{height:300px; background-image: url(./images/premium-deck.webp); background-repeat:no-repeat; background-position:center center; background-size:cover;}/*プレミアムデッキ*/


#facilictyWrap #pier .rightWrap{height:300px; background-image: url(./images/jacuzzi.webp); background-repeat:no-repeat; background-position:center center; background-size:cover;}/*ジャグジーエリア*/
#facilictyWrap #refueling .rightWrap{height:300px; background-image: url(../images/facility-refueling.jpg); background-repeat:no-repeat; background-position:center center; background-size:cover;}/*給油設備*/
#facilictyWrap #wooddeck .leftWrap{height:300px; background-image: url(../images/facility-wooddeck.webp); background-repeat:no-repeat; background-position:center center; background-size:cover;}/*ウッドデッキ*/
#facilictyWrap #changingroom .leftWrap{height:300px; background-image: url(../images/facility-changingroom.jpg); background-repeat:no-repeat; background-position:center center; background-size:cover;}/*更衣室*/
#facilictyWrap #toilet .rightWrap{height:300px; background-image: url(../images/facility-toilet.jpg); background-repeat:no-repeat; background-position:center center; background-size:cover;}/*トイレ*/
#facilictyWrap #reception .leftWrap{height:300px; background-image: url(../images/facility-reception.jpg); background-repeat:no-repeat; background-position:center center; background-size:cover;}/*受付事務所*/
#facilictyWrap #service .rightWrap{height:300px; background-image: url(../images/facility-service.jpg); background-repeat:no-repeat; background-position:center center; background-size:cover;}/*技術サービス*/



/**staff*****************************************************/
#staffWrap{font-family:"Shin Go Regular";}
#staffWrap .frontImg{background-image: url(../images/23416679_m.jpg); width: 100%; background-position: center center; background-size: cover; background-repeat:repeat-y; border-bottom:#ffffff dotted 5px;}
#staffWrap .frontImg #frontTxt{text-align:center; margin:70px auto auto auto;}
#staffWrap .frontImg #frontTxt H1{font-family:"Folk Medium"; width:100%; font-size:2.5em; color:#FFFFFF; margin:0 auto 30px auto; text-shadow:0px 0px 10px #123245; line-height:1.3em;}
#staffWrap .frontImg #frontTxt H1 span{font-family: 'Khand', sans-serif; display:block; margin:0 0 10px 0; font-size:0.8em; line-height:1.3em;}

#staffWrap .frontImg #frontDes{width:100%; margin:0 auto; padding:20px 10px; box-sizing:border-box; background-color:rgba(0,173,236,0.60); color:#FFFFFF; font-size:0.9em; line-height:2.0em; text-shadow:0px 2px 3px #4a4a4a;}


#staffWrap .info{padding:0; width:100%; background-color:#FFFFFF; position: relative; box-sizing:border-box;}
#staffWrap .info .photo{background-image: url(../images/facilitiesInfo-img.jpg); width: 100%; height: 250px; overflow: hidden; position: relative; vertical-align: middle; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover;}
#staffWrap .info .txt{width: 100%; height: auto; overflow: hidden; position: relative; vertical-align: middle; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; padding:30px 20px; box-sizing:border-box; font-size:0.9em; line-height:1.7em; color:#ffffff; text-shadow:0px 2px 3px #4a4a4a; background-color:#E3A874; background:url("../images/hemp-bg3.png"); border-bottom:#FFFFFF dotted 5px;}
#staffWrap .info .txt h2{font-family: 'Khand', sans-serif; color:#003764; font-size:2.5em; margin:0 0 10px 0; padding:0;}

#maki , #saka{padding:0; width:100%; background-color:#f8e8c2; display: table; position: relative; box-sizing:border-box;}
#staffWrap .leftWrap, #staffWrap .rightWrap{width: 100%; display: block; background:url("../images/hemp-bg.png");}
#staffWrap #maki .rightWrap{height: 400px; position: absolute; top: 0; left: 0;}/*右に写真*/
#staffWrap #saka .leftWrap{height: 400px; position: absolute; top: 0; left: 0;}/*左に写真*/
#staffWrap .inner{font-size:0.9em; line-height:1.5em; color:#4A2015; text-shadow:0px 2px 3px #AFAFAF; padding:270px 20px 40px 20px; box-sizing:border-box;}
#staffWrap .inner p{font-family: 'Folk Medium'; color:#004B76; font-size:2.0em; margin:0 0 20px 0; padding:0;}

#staffWrap #maki .rightWrap{background-image: url(../images/staff-makihara.jpg); background-repeat:no-repeat; background-position:center center;}/*牧原*/
#staffWrap #saka .leftWrap{background-image: url(../images/staff-sakakibara.jpg); background-repeat:no-repeat; background-position:center center;}/*榊原*/

}

/*----------------------------------------------------------------------------------------------------------------------*/


@media screen and (min-width: 737px) and (max-width: 5000px){

/**facility*****************************************************/
#facilictyWrap{font-family:"Shin Go Regular";}
#facilictyWrap .frontImg #pnkz{position:absolute; top:5px; left:320px; font-size:14px; color:#FFFFFF; text-shadow:0px 0px 5px #5E7680;}
#facilictyWrap .frontImg #pnkz a{color:#FFFFFF; text-decoration:none;}
#facilictyWrap .frontImg #pnkz a:hover{color:#FFFFFF; text-decoration:underline;}

#facilictyWrap .frontImg{background-image: url(../images/23416679_m.jpg); background-repeat:repeat-y; width: 100%; background-position: center center; background-size: cover;}
#facilictyWrap .frontImg #frontWrap{display:table; width:100%; padding:0 0 0 300px; min-height:400px; box-sizing:border-box;}
#facilictyWrap .frontImg #frontTxt{display:table-cell; width:40%; vertical-align:middle;}
#facilictyWrap .frontImg #frontTxt H1{font-family:"Folk Medium"; width:100%; font-size:3.0em; color:#FFFFFF; margin:0 auto; padding:0 40px; box-sizing:border-box; text-shadow:0px 0px 10px #123245; text-align:right;}
#facilictyWrap .frontImg #frontTxt H1 span{font-family: 'Khand', sans-serif; display:inline-block; margin:0 20px 0 0; font-size:0.8em;}
#facilictyWrap .frontImg #frontDes{display:table-cell; width:60%; color:#FFFFFF; font-size:1.0em; line-height:2.3em; text-shadow:0px 2px 3px #4a4a4a; background-color:rgba(0,173,236,0.60); vertical-align:middle; padding:20px 80px 20px 40px; box-sizing:border-box;}

#facilictyWrap .info{padding:0 0 0 300px; width:100%; min-height:500px; background-color:#FFFFFF; display: table; position: relative; box-sizing:border-box;}
#facilictyWrap .info .photo{background-image: url(../images/facilitiesInfo-img.jpg); width: 50%; height: auto; overflow: hidden; position: relative; display: table-cell; vertical-align: middle; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover;}
#facilictyWrap .info .txt{width: 50%; height: auto; overflow: hidden; position: relative; display: table-cell; vertical-align: middle; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; padding:50px 80px; box-sizing:border-box; font-size:0.9em; line-height:2.0em; color:#ffffff; text-shadow:0px 2px 3px #4a4a4a; background-color:#E3A874; background:url("../images/hemp-bg3.png");}
#facilictyWrap .info .txt h2{font-family:'Khand', sans-serif; color:#003764; font-size:2.5em; margin:0 0 20px 0; padding:0;}


#storage , #slope , #wash , #pier , #refueling , #wooddeck , #premiumdeck , #changingroom , #toilet , #reception , #service {padding:0 0 0 300px; width:100%; min-height:450px; background-color:#f8e8c2; display: table; position: relative; box-sizing:border-box;}
#facilictyWrap .leftWrap, #facilictyWrap .rightWrap{width: 50%; height: auto; overflow: hidden; position: relative; display: table-cell; vertical-align: middle; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; background:url("../images/hemp-bg.png");}
#facilictyWrap .inner{font-size:0.9em; line-height:2.0em; color:#4A2015; text-shadow:0px 2px 3px #AFAFAF; padding:50px 80px; box-sizing:border-box;}
#facilictyWrap .inner p{font-family: 'Folk Medium'; color:#004B76; font-size:2.3em; margin:0 0 20px 0; padding:0;}

#facilictyWrap #storage .rightWrap{background-image: url(../images/facility-storage.jpg); background-repeat:no-repeat; background-position:center center;}/*保管設備*/
#facilictyWrap #slope .leftWrap{background-image: url(./images/slope.webp); background-repeat:no-repeat; background-position:center center;}/*揚降用トロッコ*/
#facilictyWrap #wash .rightWrap{background-image: url(./images/wash.webp); background-repeat:no-repeat; background-position:center center;}/*洗艇設備*/
#facilictyWrap #premiumdeck .leftWrap{background-image: url(./images/premium-deck.webp); background-repeat:no-repeat; background-position:center center;}/*プレミアムデッキ*/
#facilictyWrap #pier .rightWrap{background-image: url(./images/jacuzzi.webp); background-repeat:no-repeat; background-position:center center;}/*ジャグジーエリア*/


#facilictyWrap #refueling .rightWrap{background-image: url(../images/facility-refueling.jpg); background-repeat:no-repeat; background-position:center center;}/*給油設備*/
#facilictyWrap #wooddeck .leftWrap{background-image: url(../images/facility-wooddeck.webp); background-repeat:no-repeat; background-position:center center;}/*ウッドデッキ*/
#facilictyWrap #changingroom .leftWrap{background-image: url(../images/facility-changingroom.jpg); background-repeat:no-repeat; background-position:center center;}/*更衣室*/
#facilictyWrap #toilet .rightWrap{background-image: url(../images/facility-toilet.jpg); background-repeat:no-repeat; background-position:center center;}/*トイレ*/
#facilictyWrap #reception .leftWrap{background-image: url(../images/facility-reception.jpg); background-repeat:no-repeat; background-position:center center;}/*受付事務所*/
#facilictyWrap #service .rightWrap{background-image: url(../images/facility-service.jpg); background-repeat:no-repeat; background-position:center center;}/*技術サービス*/

}

/*-------------------------------------*/

@media screen and (min-width: 737px) and (max-width: 1200px){
	
/**facility**/
#facilictyWrap .frontImg #pnkz{position:absolute; top:5px; left:220px; font-size:14px; color:#FFFFFF; text-shadow:0px 0px 5px #5E7680;}
#facilictyWrap .frontImg #frontTxt{position: absolute; top: 200px; left: 200px;}
#facilictyWrap .info{padding:0 0 0 200px; width:100%; min-height:400px; background-color:#FFFFFF; display: table; position: relative; box-sizing:border-box;}
#storage , #slope , #wash , #pier , #refueling , #wooddeck , #premiumdeck , #changingroom , #toilet , #reception , #service{padding:0 0 0 200px; width:100%; min-height:450px; background-color:#f8e8c2; display: table; position: relative; box-sizing:border-box;}
#facilictyWrap .frontImg #frontDes{display:table-cell; width:60%; color:#FFFFFF; font-size:0.9em; line-height:2.0em; text-shadow:0px 2px 3px #4a4a4a; background-color:rgba(0,173,236,0.60); vertical-align:middle; padding:20px 40px 20px 20px; box-sizing:border-box;}
#facilictyWrap .frontImg #frontTxt H1{font-family:"Folk Medium"; width:100%; font-size:2.0em; color:#FFFFFF; margin:0 auto; padding:0 40px; box-sizing:border-box; text-shadow:0px 0px 10px #123245; text-align:right;}
#facilictyWrap .frontImg #frontTxt H1 span{font-family: 'Khand', sans-serif; display:inline-block; margin:0 20px 0 0; font-size:0.8em;}

}

@media screen and (min-width: 737px) and (max-width: 1539px){
/*calendar*/
.calendarttl{font-family: 'Titillium Web', sans-serif; color:#FFFFFF; font-size:1.5em; margin:0 0 10px 0; padding:0; text-shadow:0px 0px 4px #004B76;}
#calendar{width:80%; margin:20px auto;}
#calendar td{padding:5px; width:14.28%;}
.calendar_rd{ width:95% !important; margin:0 auto; float:none !important;}
.calendar_rd2{ width:95% !important; margin:0 auto; float:none !important;}
}

/* Access */
#address { padding: 80px 0 40px 320px; background: url(../images/hemp-bg.png);}

#address h2 {
    margin: 0 0 10px;
    color: #003764; font-size: 2.5em;
    font-family: 'Khand', sans-serif;}

#address .dis-tbl_tab { width: 100%;}
#address .dis-tbl_tab > * { display: table-cell; padding: 0 20px; vertical-align: top;}

#address p { 
    color: #4A2015; font-size: 14px; line-height: 1.5em;
    text-shadow: 0px 2px 3px #AFAFAF;}    

#address iframe { width: 100%; height: 400px;}

@media screen and (max-width:1200px){
    #address { padding: 80px 0 40px 220px;}
    #address .dis-tbl_tab,
    #address .dis-tbl_tab > * { display: block;}
}

@media screen and (max-width:736px){
    #address { padding: 0 0 40px;}
}


/* LastUp2025.01.21_kimata */