/* WLリニューアル（2016.09）　フォームCSS*/

@charset "UTF-8";

/*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';


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

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

/**facility*****************************************************/
#mailWrap , #subscriptionWrap{font-family: 'Noto Sans Japanese';}

#mailWrap .frontImg{background-image: url(../images/title-BG.jpg); width: 100%; background-position: 50% 50%; background-size: cover; background-repeat:repeat-y; border-bottom:#ffffff solid 3px;}
#mailWrap .frontImg #frontTxt{text-align:center; margin:40px auto auto auto;}
#mailWrap .frontImg #frontTxt H1{font-family: 'Noto Sans Japanese'; width:100%; font-size:2.5em; color:#FFFFFF; margin:0 auto 10px auto; text-shadow:0px 0px 10px #123245; line-height:1.3em;}
#mailWrap .frontImg #frontTxt H1 span{font-family: 'Khand', sans-serif; display:block; margin:0 0 10px 0; font-size:0.8em; line-height:1.3em;}

#mailWrap .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;}



#mailWrap .info , #subscriptionWrap .info{padding:0; width:100%; background-color:#FFFFFF; position: relative; box-sizing:border-box;}
#mailWrap .info .photo , #subscriptionWrap .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;}
#mailWrap .info .txt , #subscriptionWrap .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;}
#mailWrap .info .txt h2 , #subscriptionWrap .info .txt h2{font-family: 'Khand', sans-serif; color:#003764; font-size:2.5em; margin:0 0 10px 0; padding:0;}

#mailWrap .inner , #subscriptionWrap .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;}
#mailWrap .inner p , #subscriptionWrap .inner p{font-family: 'Folk Medium'; color:#004B76; font-size:2.0em; margin:0 0 20px 0; padding:0;}

}

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


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

footer{position:absolute; bottom:0;}

#mailWrap{font-family: 'Noto Sans Japanese';}

#mailWrap .frontImg #pnkz{position:absolute; top:5px; left:290px; font-size:14px; color:#FFFFFF; text-shadow:0px 0px 5px #5E7680;}
#mailWrap .frontImg #pnkz a{color:#FFFFFF; text-decoration:none;}
#mailWrap .frontImg #pnkz a:hover{color:#FFFFFF; text-decoration:underline;}

#mailWrap .frontImg{background-image: url(../images/title-BG.jpg); background-repeat:repeat-y; width: 100%; background-position: 50% 50%; background-size: cover;}
#mailWrap .frontImg #frontWrap{display:table; width:100%; padding:0; min-height:150px; box-sizing:border-box;}
#mailWrap .frontImg #frontTxt{display:table-cell; width:40%; vertical-align:middle;}
#mailWrap .frontImg #frontTxt H1{font-family: 'Noto Sans Japanese'; width:100%; font-size:3.0em; color:#FFFFFF; margin:0 auto; padding:0 40px 0 290px; box-sizing:border-box; text-shadow:0px 0px 10px #123245; text-align:left;}
#mailWrap .frontImg #frontTxt H1 span{font-family: 'Khand', sans-serif; display:inline-block; margin:0 20px 0 0; font-size:0.8em;}
#mailWrap .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;}

#mailWrap .info , #subscriptionWrap .info{padding:0 0 0 300px; width:100%; min-height:500px; background-color:#FFFFFF; display: table; position: relative; box-sizing:border-box;}
#mailWrap .info .photo , #subscriptionWrap .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;}
#mailWrap .info .txt , #subscriptionWrap .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");}
#mailWrap .info .txt h2 , #subscriptionWrap .info .txt h2{font-family:'Khand', sans-serif; color:#003764; font-size:2.5em; margin:0 0 20px 0; padding:0;}


#mailWrap .inner , #subscriptionWrap .inner{font-size:0.9em; line-height:2.0em; color:#4A2015; text-shadow:0px 2px 3px #AFAFAF; padding:50px 80px; box-sizing:border-box;}
#mailWrap .inner p , #subscriptionWrap .inner p{font-family: 'Folk Medium'; color:#004B76; font-size:2.3em; margin:0 0 20px 0; padding:0;}

/*調整*/
.container {width: 100% !important; padding: 0 0 0 250px !important; margin:0 !important; box-sizing: border-box !important;}
form#mailform {width: 80% !important; max-width:1000px; margin:100px auto !important;}

.form-group {margin-bottom:30px;}

/*送信ボタン*/
input#mail_submit_button{border-radius:3px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100;White+3D */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */}
input#mail_submit_button:hover {background:#b1b1b1; color: #fff;}


}

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

@media screen and (min-width: 737px) and (max-width: 1200px){
	
#mailWrap .frontImg #pnkz , #subscriptionWrap .frontImg #pnkz{position:absolute; top:5px; left:220px; font-size:14px; color:#FFFFFF; text-shadow:0px 0px 5px #5E7680;}
#mailWrap .frontImg #frontTxt , #subscriptionWrap .frontImg #frontTxt{position: absolute; top: 200px; left: 200px;}
#mailWrap .info , #subscriptionWrap .info{padding:0 0 0 200px; width:100%; min-height:400px; background-color:#FFFFFF; display: table; position: relative; box-sizing:border-box;}
#mailWrap .frontImg #frontDes , #subscriptionWrap .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;}
#mailWrap .frontImg #frontTxt H1 , #subscriptionWrap .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;}
#mailWrap .frontImg #frontTxt H1 span , #subscriptionWrap .frontImg #frontTxt H1 span{font-family: 'Khand', sans-serif; display:inline-block; margin:0 20px 0 0; font-size:0.8em;}

/*調整*/
.container {width: 100% !important; padding: 0 0 0 220px !important; margin:0 !important; box-sizing: border-box !important;}
form#mailform {width:95% !important; margin:30px auto 50px auto !important;}

}

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