@charset "UTF-8";


/*//////////////////////////////////////////////////////////////////
[ RESTYLE TAG ]*/

* { margin: 0px;  padding: 0px;  box-sizing: border-box;}

body, html { height: 100%;font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;}

/*---------------------------------------------*/
a { font-size: 16px; line-height: 1.7; color: #444; text-decoration: none; margin: 0px; transition: all 0.4s; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s;}

a:focus { outline: none !important;}
a:hover {text-decoration: none; color: #137ec2;}

/*---------------------------------------------*/
h1,h2,h3,h4,h5,h6 { margin: 0px;}

p { font-size: 16px; line-height: 200%; color: #444; margin: 0px;}
ul, li { margin: 0px; list-style-type: none;}



/*---------------------------------------------*/
input { outline: none; border: none; background: none; color: #fff; cursor: pointer;}
textarea { outline: none; border: none;}
textarea:focus, input:focus { border-color: transparent !important;}

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }

textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }
textarea:focus::-moz-placeholder { color:transparent; }
textarea:focus:-ms-input-placeholder { color:transparent; }

input::-webkit-input-placeholder { color: #fff;}
input:-moz-placeholder { color: #fff;}
input::-moz-placeholder { color: #fff;}
input:-ms-input-placeholder { color: #fff;}

textarea::-webkit-input-placeholder { color: #fff;}
textarea:-moz-placeholder { color: #fff;}
textarea::-moz-placeholder { color: #fff;}
textarea:-ms-input-placeholder { color: #fff;}

label { margin: 0; /*display: block;*/}

/*---------------------------------------------*/
button { outline: none !important; border: none; background: transparent;}
button:hover { cursor: pointer;}
iframe { border: none !important;}



/*//////////////////////////////////////////////////////////////////　 ここからログイン　*/

#msbLogin {width: 100%; margin: 0 auto;}
#msbLogin .loginform { width: 100%;}

#msbLogin .box { width: 500px; border-radius: 10px; overflow: hidden; padding: 55px 55px 37px 55px; background: #9152f8;
 background: -webkit-linear-gradient(top, #71cff3, #137ec2);
 background: -o-linear-gradient(top, #71cff3, #137ec2);
 background: -moz-linear-gradient(top, #71cff3, #137ec2);
 background: linear-gradient(top, #71cff3, #137ec2);
}


.pageSubTitle {font-size: 16px; color: #000; text-align: center; display: block; padding: 5% 0 2% 0;}
.pageTitle {font-size: 30px; color: #0075c1; text-align: center; display: block; padding-bottom: 5%;}

#msbLogin .container { width: 100%;  min-height: 100vh; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 15px;
 background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; z-index: 1; }

#msbLogin .container::before { content: ""; display: block; position: absolute; z-index: -1; width: 100%; height: 100%;
 top: 0; left: 0; background: linear-gradient(rgba(113, 207, 243, 0.8), rgba(19, 124, 194, 0.8));}



#msbLogin .loginwrap { width: 500px; border-radius: 10px; overflow: hidden; padding: 2% 3%; background: rgba(255, 255, 255, 0.8);}

#msbLogin .loginwrap .logo { font-size: 60px;  color: #333333; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; width: 200px; height: 200px;
 border-radius: 50%; background-color: #fff; margin: 0 auto;}
#msbLogin .loginwrap .logo img{ width: 80%;}

@-moz-document url-prefix() { /*Firefox*/
#msbLogin .loginwrap .logo {margin-top: 5%;}
}

#msbLogin .loginwrap a{color: #fff;}
#msbLogin .loginwrap a:hover {color: #ccc;}


/*--------------------[ Button ]*/
#msbLogin .btnBox { width: 100%; display: flex; flex-wrap: wrap; justify-content: center;
 display: -webkit-box;
 display: -webkit-flex;
 display: -moz-box;
 display: -ms-flexbox;}

#msbLogin .btn { font-size: 16px; color: #555555; line-height: 1.2;
 display: -webkit-box;
 display: -webkit-flex;
 display: -moz-box;
 display: -ms-flexbox;
 display: flex; justify-content: center; align-items: center; padding: 0 20px; width: 60%; height: 50px; border-radius: 25px; background: #71cff3; position: relative; z-index: 1;
 -webkit-transition: all 0.4s;
 -o-transition: all 0.4s;
 -moz-transition: all 0.4s;
 transition: all 0.4s;}

#msbLogin .btn::before { content: ""; display: block; position: absolute; z-index: -1; width: 100%; height: 100%; border-radius: 25px; background: linear-gradient(135deg, rgb(19, 124, 194), rgb(113, 207, 243)); top: 0; left: 0; opacity: 1;
 -webkit-transition: all 0.4s;
 -o-transition: all 0.4s;
 -moz-transition: all 0.4s;
 transition: all 0.4s;}

#msbLogin .btn:hover { color: #fff;}
#msbLogin .btn:hover:before { opacity: 0;}

#msbLogin .btn a{color: #fff; text-decoration: none;}
#msbLogin .btn a:hover{color: #fff; text-decoration: none;}

/*-------------------------------[ Input ]*/

/*#msbLogin .inputwaku { width: 100%; position: relative; border-bottom: 2px solid rgba(255,255,255,0.24); margin-bottom: 30px;}*/
#msbLogin .inputwaku { width: 100%; position: relative; background-color: #fff; margin-bottom: 30px;}

#msbLogin .validate-input { position: relative;}

#msbLogin .input { font-size: 16px; color: #555; line-height: 1.2; display: block; width: 100%; height: 45px; background: transparent; padding: 0 5px 0 38px; font-family: "メイリオ","meiryo";}

.focus-input { color: #555; position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none;}
.focus-input::before { content: ""; display: block; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; background: #7fcef4;}

.focus-input::after { font-family: Material-Design-Iconic-Font; font-size: 22px; color: #555; content: attr(data-placeholder); display: block; width: 100%; position: absolute; top: 6px; left: 0px; padding-left: 5px;
 -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s;}

.input:focus { padding-left: 5px;}
.input:focus + .focus-input::after { top: -22px; font-size: 18px;}
.input:focus + .focus-input::before { width: 100%;}
.has-val.input + .focus-input::after { top: -22px; font-size: 18px;}
.has-val.input + .focus-input::before { width: 100%;}
.has-val.input { padding-left: 5px;}


/*-------------------------------[ checkbox ]*/

.Checkbox { padding-left: 5px; padding-top: 5px; padding-bottom: 35px;}

@media (max-width: 500px){
#msbLogin .loginwrap .logo {width: 150px; height: 150px; margin-top: 3%;}
.pageTitle {font-size: 20px; font-weight: bold;}
.pageSubTitle {font-size: 15px;}
.pretty {font-size: 90%;}
#msbLogin .btn {font-size: 90%; font-weight: bold; height: 40px;width: 50%;}
#msbLogin .input {font-size: 15px; height: 35px;padding: 0 5px 0 30px;}
}


/*-------------------------------[ maintenance ]*/

.mainteTitle {font-size: 30px; color: #0075c1; text-align: center; display: block; padding:  5% 0 2% 0;}
.mainteSubTitle {font-size: 16px; color: #000; text-align: center; display: block; padding-bottom: 5%;}
.mainteTime {font-size: 16px; color: #000; text-align: center; display: block; padding-bottom: 5%;}
.mainteTime span {font-weight: bold;}



/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
ここからメインページ　
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */


/* header */
header {background: #137ec2; width: 100%; padding: 0.7% 0 1% 0; text-align: center; height: 45px;}
#headerinner{max-width: 1100px; margin: 0 auto; overflow: hidden; width: 85%;}

#headerArea {width: 100%; height: 500px!important; overflow: hidden; background: #137ec2; text-align: center; position: relative; background-image: url(../img/TitleBG.jpg); background-repeat: no-repeat; background-position: left top;background-size: cover;}


/*--------------------[ Button ]*/
#msbLogout .btnBox {position: absolute; top: 4%; right: 0;}
#msbLogout .btnBox { width: 25%; display: inline-flex; flex-wrap: wrap; justify-content: center;
 display: -webkit-box;
 display: -webkit-flex;
 display: -moz-box;
 display: -ms-flexbox;}

#msbLogout .btn { font-size: 16px; color: #555555; line-height: 1.2;
 display: -webkit-box;
 display: -webkit-flex;
 display: -moz-box;
 display: -ms-flexbox;
 display: flex; justify-content: center; align-items: center; padding: 0 20px; width: 200px; height: 50px; border-radius: 25px; position: relative; z-index: 20;
 -webkit-transition: all 0.4s;
 -o-transition: all 0.4s;
 -moz-transition: all 0.4s;
 transition: all 0.4s;}

#msbLogout .btn::before { content: ""; display: block; position: absolute; z-index: -1; width: 100%; height: 100%; border-radius: 25px; background: linear-gradient(135deg, rgb(19, 124, 194), rgb(113, 207, 243)); top: 0; left: 0; opacity: 1;
 -webkit-transition: all 0.4s;
 -o-transition: all 0.4s;
 -moz-transition: all 0.4s;
 transition: all 0.4s;}

/*#msbLogout .btn:hover { color: #fff;}
#msbLogout .btn:hover:before { opacity: 0.8;}*/

#msbLogout .btn a {color: #fff; text-decoration: none; line-height:0;}
#msbLogout .btn a:hover {color: #fff; text-decoration: none;}


#MainTitle {position: absolute; top:0; left:10%; right:0; z-index: 10; }
#MainTitle img {height: 500px;}

.Title {font-weight: bold; font-size: 200%; color: #137ec2; font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;width: 100%; text-align: center; margin: 5% 0;}


/* MENU */
#MainMenu ul {display: flex; flex-wrap: wrap; justify-content: center;}
#MainMenu nav ul li { display: inline; margin: 0 1.5%; text-align: center;}
#MainMenu nav ul li a {color: #fff; display: block; width: 100%; text-decoration: none; font-weight: 500; line-height: 140%; font-size: 100%;}
#MainMenu nav ul li a:hover {color: #7fcef4;}


#msbwrapper {width: 100%; margin-top: 5%; overflow: hidden;}


/* TITLE */
.SubTitle {font-size: 180%; color:#555; font-weight: 500; margin-bottom: 2%; text-align: left; position: relative;}
.SubTitle span {color: #0075c1; padding-left: 1%;}
.SubTitle:before {content: ""; display: inline-block; position: relative; background-image: url(../img/ico_triangle.png); width: 32px; height: 26px; background-repeat: no-repeat; background-size: contain; vertical-align: middle;}
#webconditioning .SubTitle {color: #fff;}
#webconditioning .SubTitle span {color: #06b3ff;}
#webconditioning .SubTitle:before {content: ""; display: inline-block; position: relative; background-image: url(../img/ico_triangle2.png); width: 32px; height: 26px; background-repeat: no-repeat; background-size: contain; vertical-align: middle;}


/* ━━━━━━━━━━━━ お知らせ ━━━━━━━━━━━━ */
#noticeArea {width: 100%;padding-bottom: 5%;}
#notice {width: 90%; max-width: 1100px; margin: 2% auto; text-align: left;}
#noticeinner {margin: 0% auto;padding: 5% 0 5% 0;}


/* タブ切り替え */

#notice .tab-group {display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 0 3% 0;}
#notice .tab-group a {text-decoration: none; display: block;}
#notice .tab-group i {color: #555; display: inline-block; margin-right: 3%;}

#notice .tab {display: block; width: 25%; list-style:none; text-align:center; cursor:pointer; border-bottom: 2px solid #ededed; padding-bottom: 1%;}
#notice .tab.active {transition: all 0.2s ease-out; border-bottom: 2px solid #0075c1; color: #0075c1;}
#notice .tab.active i {color: #0075c1;}

@media (max-width: 889px){
    #notice .tab{width: 50%; padding-bottom: 1%; margin-bottom: 2%;}
}

#notice .tabContents {display: none;}
#notice .tabContents.active {display: block;}

#notice .tabContents i {display: inline-block; color: #fff; margin-right: 1%; padding: 8px;}
#notice .tabContents i.fa-building {background-color: #00b0ec;}
#notice .tabContents i.fa-shopping-bag {background-color: #1c9a0f;}
#notice .tabContents i.fa-flag {background-color: #ef5d15;}


/* 一覧 */
#notice nav { position: relative; width: 100%; margin: 0 auto ;}
#notice nav ul { padding: 0; margin: 0; z-index: 2; text-align: left;}
#notice nav ul li { display: block; width: 98%; margin: 0% 0; padding: 1% 0; margin-bottom: 1%; border-bottom: 1px dashed #ccc; }
#notice nav ul li a:hover {opacity: 0.7 ; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s;}
#notice nav ul li a {color: #555; transition: color .3s;text-decoration: none; font-weight: normal; line-height: 140%;}



/* ━━━━━━━━━━━━ 各種届出･申請書 ━━━━━━━━━━━━ */
#applicationArea {width: 100%; margin: 0; padding: 5% 0; background: url(../img/BGappli.png); background-repeat: repeat; background-color:rgba(255,255,255,0.4); background-blend-mode:lighten;}
#application {width: 90%; max-width: 1100px; margin: 2% auto; }
#applicationinner {width: 90%; margin: 0% auto;padding: 4% 0 5% 0;}


#application .alist {display: flex; flex-wrap: wrap; justify-content: space-between;}
#application .alist:after {content:""; display:block; width: 330px; height:0;}
#application .alist li {display: block; width: 30%; background-color: #fff; border: 1px solid #cfcfcf; text-align: center; padding: 3%; margin-top: 4%;}
#application .alist li h3 {font-size: 110%; font-weight: 500; margin: 0 auto 5%; text-decoration: none;}
#application .iconlist img {width: 20%;}


/* 問合せボタン */
.square_btn{ position: relative; display: inline-block; font-weight: bold; padding: .5% 2% .5% 1.5%; text-decoration: none; color: #0075c1; background: #ECECEC; transition: .4s; margin: 1% 0;  }

.square_btn:hover { background: #0075c1; color: #fff;}


/* ━━━━━━━━━━━━ 各種マニュアル ━━━━━━━━━━━━ */
#guidanceArea {width: 100%; margin: 0; padding: 0; background: #fff;
background-image: url(../img/BGguidance.jpg); background-repeat: no-repeat; background-position: center;background-size: cover;}
.bg-mask {height: 100%;  background: rgba(255,255,255,0.6);}
#guidance {width: 90%; max-width: 1100px; margin: 0% auto;  padding: 3% 0 5% 0;}
#guidanceinner {width: 100%; margin: 0% auto;padding: 4% 0 5% 0;}


#guidance .glist {display: flex; flex-wrap: wrap; justify-content: space-between; line-height: 0;}
#guidance .glist li {width: 48%; background: #fff; text-align: center; padding:0;}
#guidance .glist li img {width: 100%;}


/* ━━━━━━━━━━━━ 各種予約 ━━━━━━━━━━━━ */
#reserveArea {width: 100%; margin: 0; padding: 0; background: #fff;}
#reserve {width: 90%; max-width: 1100px; margin: 0% auto;  padding: 3% 0 5% 0;}
#reserveinner {width: 100%; margin: 0% auto;padding: 4% 0 5% 0;}


#reserve .rlist {display: flex; flex-wrap: wrap; justify-content: space-between;}
#reserve .rlist li {display: flex; flex-direction: column; justify-content: space-between; width: 48%;}
#reserve .rlist li img {width: 100%;}
#reserve .rlist li p {display: flex; height: 100%; margin-bottom: 5%;}


/* ━━━━━━━━━━━━ 空調 ━━━━━━━━━━━━ */
@media (min-width: 1200px){
#webconditioningArea {width: 100%; margin: 0; padding: 5% 0; background: linear-gradient(100deg, #33558e 0%, #33558e 50%, #d0e8f4 50%, #d0e8f4 100%); text-align: center; display: flex; flex-wrap: wrap;}
#webconditioning, #restaurant {width: 50%; margin: 2% auto; }
#webconditioning, #restaurant {max-width: 550px}
}
#webconditioning p {color: #fff; text-align: left;}
#restaurant p {color: #555; text-align: left;}


#webconditioning .linkbtn {width: 80%; padding: 2.5% 4% 2% 4%; margin: 5% auto; background: #fff; text-align: center; box-shadow: 0px 0px 0px 10px #fff; border: dashed 2px #33558e;}
#restaurant .linkbtn {width: 80%; padding: 2.5% 4% 2% 4%; margin: 5% auto; background: #fff; text-align: center; box-shadow: 0px 0px 0px 10px #fff; border: dashed 2px #e95fa9;}
#webconditioning .linkbtn img, #restaurant .linkbtn img {width: 70%;}

@media (max-width: 1199px){
#webconditioningArea {width: 100%; margin: 0; padding: 5% 0; background: linear-gradient(180deg, #33558e 0%, #33558e 50%, #d0e8f4 50%, #d0e8f4 100%); text-align: center; display: flex; flex-wrap: wrap;}
#webconditioning {width: 90%; margin: 0 auto;}
#restaurant {width: 90%; margin: 0 auto; padding-top: 10%;}
}


/* ━━━━━━━━━━━━ 問合せ ━━━━━━━━━━━━ */
#contactArea {width: 100%; margin: 0; padding: 5% 0; background: #fff; text-align: center;}
#contact {width: 90%; max-width: 1100px; margin: 2% auto; }


#contact .intro {text-align: left;}
#contact h5 { margin-top: 5%;font-size: 180%; text-align: center; line-height: 120%; color: #444;  padding: 10px 0; margin-bottom: .2%; font-weight: 500;}
#contact h6 {text-align: center; color: #444!important; font-size: 460%; font-weight: 600; font-family: 'Century Gothic'; margin-bottom: 5%;  border-top: 2px solid #0075c1; display: inline-block;padding-top: 1%;}

#contact .Plist{width: 100%; margin: 1% auto 10% auto; text-align: center;}
#contact .Plist:after {display: block;  visibility: hidden;  clear: both;  height: 0;  content: '.'; }
#contact .Plist li {width: 48%;  margin: 20px auto 0; background: #fff; text-align: center; padding:0;}
#contact .Plist li  img {width: 100%;}
#contact .Plist li .pdfbt {background: #c11329; color: #fff; padding: 0.3% 3%; float: right; margin-right: 2%; font-size: 90%;}
#contact .Plist li h4 {width: 100%; text-align: center; float: left; font-size: 120%; font-weight: 600; text-decoration: underline;}



/* ━━━━━━━━━━━━ pageTop ━━━━━━━━━━━━ */

#pageTop {position: fixed; bottom: 60px; right: 20px;}
#pageTop a {
 display: block;
 z-index: 999;
 width: 100px;
 height: 100px;
 font-weight: normal;
 text-decoration: none;
 text-align: center;
 font-size: 90%;
 font-weight: bold;
 color: #fff;
 opacity: 0.5;
 padding-top: 10%;
 border-radius: 50%;
 background: #137ec2;
 text-align: center;
 position: relative;
 background: -moz-linear-gradient(65deg, #71cff3, #137ec2);
 background: -webkit-linear-gradient(65deg, #71cff3, #71cff3);
 background: linear-gradient(65deg, #71cff3, #137ec2);
}

#pageTop a:hover {
text-decoration: none;
opacity: 0.9;
color: #fff;
background-color:#d7b156;
-webkit-transition:0.5s ease;
-webkit-transition-property:opacity,border,color,background;
-moz-transition:0.5s ease;
-moz-transition-property:opacity,border,color,background;
-o-transition:0.5s ease;
-o-transition-property:opacity,border,color,background;
transition:0.5s ease;
transition-property:opacity,border,color,background;
}



/* ━━━━━━━━━━━━ footer ━━━━━━━━━━━━ */
footer {background: #2d2d32; width: 100%; padding: .5% 0 1% 0;}
.footinner{width: 90%; max-width: 1100px; text-align: center; margin: 0 auto; }
.footMenu ul { padding: 0; margin: 0; z-index: 2; width: 100%; text-align: center;}
.footMenu ul li { margin: 0 1%; display: inline-block; margin: 1% 1%;}
.footMenu ul li a {color: #fff; transition: color .3s;text-decoration: none; font-weight: 400; font-size: 90%;}
.footMenu ul li a:hover {opacity: 0.7 ; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s;}


@media (min-width: 950px){
.footinner{width: 80%; max-width: 1100px; text-align: center; margin: 0 auto; }
}


@media (max-width: 1050px){
.footinner{width: 98%; max-width: 1100px; text-align: center; margin: 0 auto; }
.footMenu ul li a {font-size: 80%;}
}

@media screen and (min-width:600px) and (max-width:890px) {

}

/* ━━━━━━━━━━━━━━━━━━━━━
accordion
━━━━━━━━━━━━━━━━━━━━━━ */

.btn-more {width: 35%; text-align: center; padding: 2% 0 3% 0; cursor: pointer; font-weight: 600; text-decoration:none !important; background: #0075c1; color: #fff; position: relative; margin: 5% auto 1% auto;}

.btn-more::before {font-family: 'FontAwesome'; content: "\f078"; color:#fff; position: absolute; left: 45%; bottom: 20%;}

/*.btn-more.close::before {font-family: 'FontAwesome'; content: "\f077"; color:#fff; position: absolute; left: 45%; bottom: 20% }*/
.dropdown {padding: 0;}


.nonPC {display: none!important;}