@charset "utf-8";

@font-face {
  font-family: 'notol';
  src: url('../fonts/NotoSansJP-Light.woff2') format('woff2');
  src: url('../fonts/NotoSansJP-Light.woff') format('woff');
  src: url('../fonts/NotoSansJP-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'notolb';
  src: url('../fonts/NotoSansJP-Medium.woff2') format('woff2');
  src: url('../fonts/NotoSansJP-Medium.woff') format('woff');
  src: url('../fonts/NotoSansJP-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: bold;
  font-display: swap;
}

@font-face {
  font-family: 'boric';
  src: url('../fonts/Boricua.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

* {margin: 0px; padding: 0px; }
body {font: 12px notol; color: #333333;	background-color: #fff; height: 100%;}
html {height: 100%;}
h1,h2,h3,h4,h5,h6 {margin: 0px; padding: 0px;}
a {text-decoration: none !important; color: #333333}
a:hover {color: #9cb38c;}
a img {border: 0px;}
ul {list-style: none}

.contener {	width: 100%; height: 100%; *margin: 0px auto -62px; min-width: 408px;}
.top {width: 100%; height:0px; background-color: #fff;}
.center {height: 100px; background-color: #fff; }
.lefttitle span {width: 424px; height:100px;float:left; margin-left: 70px; background: url(../images/bannerS2left.png) no-repeat; display: inline-block; background-color: #fff; }

.rightmenucontainer {overflow:hidden; width: 500px; height: 100px; float:right; top: 30px; right: 0px; font: 27px notol;}
.rightmenucontainer ul { float:right; margin-right: 100px;}
.rightmenucontainer ul li{ display: inline; overflow:hidden; float:left; padding-left: 10px; padding-right: 10px; margin-top: 30px;}
.rightmenucontainer ul li:hover{ display: inline; overflow:hidden; float:left; padding-left: 10px; padding-right: 10px; margin-top: 30px; color: #9cb38c; text-decoration:underline;}
.active {color: #9cb38c;}

.mobilemenulinks {display: none;}

.homebg { width: 100%; height: 0; padding-top: 39.58%; background: url(../images/homebgmain1920760.jpg) no-repeat top center; display:block; background-size:contain;}
.contactbg { width: 100%; height: 0; padding-top: 39.58%; background: url(../images/contactbgmain1920760.jpg) no-repeat top center; display:block; background-size:contain;}

.midcont {width: 100%; height: 78px; background-color: #9cb38c;}
.midleft {width: 12px; height: 78px; background-color: #444444; display: block; float: left;}
.midright {height: 78px; width: 500px; display:block; float: left; color: #fff; text-align: left; margin-left: 10px;}
.midright p {font: 67px boric; padding-top: 4px;}

.maincont {width: 100%; height: 100%px; background-color: #fff;}
.maincenter { width: auto; height: 100%;}

.maincentertext {padding-top: 50px; padding-bottom: 130px;}
.maincentertext p {font: 42px notol; text-align:center; }

.clear {clear:both;}

.mbox { display:block; margin: auto; padding-top: 20px; width: 680px; height: 500px; background-color: #fff; }
.mtexttop {font: notolb; font-size:30px;}
.mboxtitle {font: notob; font-size: 36px; display: block; height: 40px; text-align:left;}
.mtextmid {width: 170px; font: notolb; font-weight: bold; font-size:18px; display: inline-block; margin: 10px 0px 0px 0px; padding: 9px 10px; float: left; text-align:right;}
.mtext18 { font: notol; font-weight: bold; font-size:24px; display: inline-block; margin: 10px 0px 0px 0px; padding: 9px 10px; float: left; color: #000;  background-color: #fff; }

.mtext32 { font: notolb; font-size:22px; display:block; margin: 0px 0px 10px 0px; padding: 7px 10px; float: left; color: #000; border: 2px #9cb38c solid; background-color: #fff;}
.sendbutton {font: notol; font-size:14px; margin: 10px 0px 0px 0px; width: 94px; text-align: center; cursor:pointer; background-color: #9cb38c; color: #fff; border: 1px solid #bababa; float:right;}
.sendbutton:hover {color: #9cb38c; background-color: #fff;}

.contactbox { margin: 10px 0px 0px 10px; width: 450px; height: 23px; border: 1px solid #bababa; float:right;}
.contactinput { margin-top: -5px; width: 450px; height: 30px; box-sizing: border-box; outline:none; border: none; background-color: #fff; color: #000; font: 20px notol;}
.contacttextbox { margin: 10px 0px 0px 10px; width: 450px; height: 240px; border: 1px solid #bababa; float:right; }
.contactinputtext { margin: 0px 0px 0px 0px; width: 450px; height: 240px; background-color: #fff; color: #000; font: 20px notol; outline:none; border: none; max-height: 240px;}
textarea {resize: none !important;}

.mtextmid em {color: #af0000;}

.bottomcont {width: 100%; height: 200px; background-color: #9cb38c;}
.btmcenter { height: 150px; display: block;}
.btmbottom { height: 50px; display: block;}
.btmbottom p {font: 22px notol; text-align:center; }

.mobmenu {display: none;}

@media only screen and (max-width: 750px) {
html {overflow-x: hidden;}
body {font: 12px notol; color: #333333;	background-color: #fff; height: 100%; overflow-x: hidden;}

.homebg { width: 100%; height: 0; padding-top: 83.38%; background: url(../images/homem211920.jpg) no-repeat top center; display:block; background-size:contain;}
.contactbg { width: 100%; height: 0; padding-top: 84.62%; background: url(../images/contactbgmobile13201117.jpg) no-repeat top center; display:block; background-size:contain;}

.center {height: 74px; background-color: #fff; }
.lefttitle span {width: 300px; height:74px;float:left; margin-left: 10px; background: url(../images/bannerS2mobile.jpg) no-repeat; display: block; background-color: #fff; }
.rightmenucontainer {display: block; float:right; width: 100px; height: 70px; background-color: #fff; margin-right: 50px;}
.mtextmenu {font: notob; font-weight:normal; font-size: 17px; margin: auto; padding-top: 29px; }
.mtextmenu:hover {font: notob; font-weight:bold; font-size: 17px; margin: auto; padding-top: 29px; cursor:pointer; color: #7e918a; }

.midcont {width: 100%; height: 58px; background-color: #9cb38c;}
.midleft {width: 12px; height: 58px; background-color: #444444; display: block; float: left;}
.midright {height: 58px; width: 500px; display:block; float: left; color: #fff; text-align: left; margin-left: 10px;}
.midright p {font: 47px boric; padding-top: 4px;}

.mobilemenulinks {display: inline-block; float: right; height: 74px; margin-top: 25px;}
.rightmenucontainer { width: 50px; margin-right: 20px;}
.rightmenucontainer ul {display:none;}

.mobmenu {width: 100%; background-color: #333; display: none; height: 130px;}
.mobmenu ul { display:block; width: 100%; color: #fff;}
.mobmenu ul li {height: 30px; width: 100%; display: block; overflow:hidden; margin-top: 5px; float:left; font: 17px notolb; text-align: left; padding: 14px 16px;}
.mobmenu ul li a {color: #fff;}
.mobmenu ul li:hover { background-color: #fff; }
.mobmenu ul li:hover a {color: #9cb38c;}

.maincentertext p {font: 26px notol; text-align:center; }

.mboxtitle {font: notob; font-size: 30px; display: block; height: 30px; text-align:left; padding-bottom: 40px;}
.mbox { display:block; margin: auto; padding-top: 20px; width: 400px; height: 700px; background-color: #fff; }
.mtextmid {width: 170px; font: notolb; font-weight: bold; font-size:16px; display: inline-block; margin: 10px 0px 0px 0px; padding: 9px 10px; float: left; text-align:left;}
.contactbox { margin: 10px 10px 0px 10px; width: 350px; height: 23px; border: 1px solid #bababa; float:right;}
.contactinput { margin-top: -5px; width: 350px; height: 30px; box-sizing: border-box; outline:none; border: none; background-color: #fff; color: #000; font: 20px notol;}

.contacttextbox { margin: 10px 10px 0px 10px; width: 350px; height: 240px; border: 1px solid #bababa; float:right; }
.contactinputtext { margin: 0px 0px 0px 0px; width: 350px; height: 240px; background-color: #fff; color: #000; font: 20px notol; outline:none; border: none; max-height: 240px;}
.sendbutton {font: notol; font-size:14px; margin: 10px 10px 0px 0px; width: 94px; text-align: center; cursor:pointer; background-color: #9cb38c; color: #fff; border: 1px solid #bababa; float:right;}

.bottomcont {width: 100%; height: 130px; background-color: #9cb38c;}
.btmcenter { height: 100px; display: block;}
.btmbottom { height: 30px; display: block;}
.btmbottom p {font: 12px notol; text-align:center; }
}

@media only screen and (max-width: 1050px) {
html {overflow-x: hidden;}
body {font: 12px notol; color: #333333;	background-color: #fff; height: 100%; overflow-x: hidden;}

.homebg { width: 100%; height: 0; padding-top: 83.38%; background: url(../images/homem211920.jpg) no-repeat top center; display:block; background-size:contain;}
.contactbg { width: 100%; height: 0; padding-top: 84.62%; background: url(../images/contactbgmobile13201117.jpg) no-repeat top center; display:block; background-size:contain;}

.center {height: 74px; background-color: #fff; }
.lefttitle span {width: 300px; height:74px;float:left; margin-left: 5px; background: url(../images/bannerS2mobile.jpg) no-repeat; display: block; background-color: #fff; }
.rightmenucontainer {display: block; float:right; width: 200px; height: 70px; background-color: #fff; margin-right: 50px;}
.mtextmenu {font: notob; font-weight:normal; font-size: 17px; margin: auto; padding-top: 29px; }
.mtextmenu:hover {font: notob; font-weight:bold; font-size: 17px; margin: auto; padding-top: 29px; cursor:pointer; color: #7e918a; }

.midcont {width: 100%; height: 58px; background-color: #9cb38c;}
.midleft {width: 12px; height: 58px; background-color: #444444; display: block; float: left;}
.midright {height: 58px; width: 300px; display:block; float: left; color: #fff; text-align: left; margin-left: 10px;}
.midright p {font: 47px boric; padding-top: 8px;}

.mobilemenulinks {display: inline-block; float: right; height: 74px; margin-top: 25px;}
.rightmenucontainer { width: 50px; margin-right: 20px;}
.rightmenucontainer ul {display:none;}

.mobmenu {width: 100%; background-color: #333; display: none; height: 130px;}
.mobmenu ul { display:block; width: 100%; color: #fff;}
.mobmenu ul li {height: 30px; width: 100%; display: block; overflow:hidden; margin-top: 5px; float:left; font: 17px notolb; text-align: left; padding: 14px 16px;}
.mobmenu ul li a {color: #fff; width: 100%; height: 100%; display: block;}
.mobmenu ul li:hover { background-color: #fff; }
.mobmenu ul li:hover a {color: #9cb38c;}

.maincentertext p {font: 26px notol; text-align:center; }

.mboxtitle {font: notob; font-size: 30px; display: block; height: 30px; text-align:left; padding-bottom: 40px;}
.mbox { display:block; margin: auto; padding-top: 20px; width: 400px; height: 700px; background-color: #fff; }
.mtextmid {width: 170px; font: notolb; font-weight: bold; font-size:16px; display: inline-block; margin: 10px 0px 0px 0px; padding: 9px 10px; float: left; text-align:left;}
.contactbox { margin: 10px 10px 0px 10px; width: 350px; height: 23px; border: 1px solid #bababa; float:right;}
.contactinput { margin-top: -5px; width: 350px; height: 30px; box-sizing: border-box; outline:none; border: none; background-color: #fff; color: #000; font: 20px notol;}

.contacttextbox { margin: 10px 10px 0px 10px; width: 350px; height: 240px; border: 1px solid #bababa; float:right; }
.contactinputtext { margin: 0px 0px 0px 0px; width: 350px; height: 240px; background-color: #fff; color: #000; font: 20px notol; outline:none; border: none; max-height: 240px;}
.sendbutton {font: notol; font-size:14px; margin: 10px 10px 0px 376px; width: 94px; text-align: center; cursor:pointer; background-color: #9cb38c; color: #fff; border: 1px solid #bababa; float:right;}


.bottomcont {width: 100%; height: 130px; background-color: #9cb38c;}
.btmcenter { height: 100px; display: block;}
.btmbottom { height: 30px; display: block;}
.btmbottom p {font: 12px notol; text-align:center; }
}