@charset "utf-8";

/*VisualImage-------------*/

div.visual-area { height: 48vw; max-height: 500px; width: 100%; max-width: 1037px; background: #fff url(../images/visual.jpg) no-repeat center top; background-size: 100%; }

@media only screen and (max-width: 768px) {
div.visual-area { height: 48vw; margin: 80px 0 0 0; min-width: 200px; background: #fff url(../images/visual.jpg) no-repeat center top; background-size: 100%; }
}

/*MainMenu-------------*/
ul.main-menu { width: 100%; max-width: 1037px; margin: 45px auto; }
ul.main-menu li { width: 30%; height: 280px; float: left; margin: 0 0 0 0; }
ul.main-menu li.margin { margin: 0 5% 0 0; }
ul.main-menu li div { font-size: 14px; margin-top: 5px; }
ul.main-menu li div span { font-size: 18px; }
ul.main-menu li img { width: 100%; margin: 0; padding: 0; vertical-align: bottom; }
ul.main-menu div { padding: 8px 10px 0; height: 110px; }

@media only screen and (max-width: 768px) {
ul.main-menu li { width: 90%; float: none; margin: 25px 5% 45px; height: auto; }
ul.main-menu li.margin { margin: 0 5% 25px; }
ul.main-menu li div { font-size: 14px; margin-top: 0; }
ul.main-menu li div span { font-size: 18px; }
ul.main-menu div { padding: 15px 10px 0; height: 110px; }
}

/*-What'sNew-------------*/
div.contact-banner { margin: 0 auto 0; }
div.contact{ float: left; width: 70%; margin: 45px auto 0;  background:	#F5F5DC; }
div.contact div.title { float:left; width:26%; height:60px; background: #fff url(../images/contact.png) no-repeat right top; background-size: 120%; color:#333; font-size: 19px; text-align: center; letter-spacing:0.2em; padding: 35px 1%; text-shadow: 0.1em 0.1em 0.2em rgba(255,255,255,1); }
div.contact div.content { float:right; width:68%; height:71px; padding: 16px 2%; font-size: 20px; }
div.contact div.content div.tel { float:left; background:#1E90FF; margin: 16px 5px 0 0; padding: 10px 4%; width:34%; border-radius: 15px; height: 30px;  font-size: 19px;  color:#fff; text-align: center;  text-align: center;}
div.contact div.content div.tel img { width:30px; margin:0 5px 0 0; vertical-align: -5px; }
div.contact div.content div.mail { float:right; background:#FF8C00; margin-top: 16px; padding: 10px 4%; width:47%; border-radius: 15px; height: 30px;  font-size: 19px; color:#fff; text-align: center; }
div.contact div.content div.mail img { width:30px; margin:0 5px 0 0; vertical-align: -5px; }

div.banner { float: right; width: 25%; margin: 45px 0 0 0; }
div.banner div.orion { border : #959595 1px solid; background-color: #fff; text-align: center; padding: 42px 0 37px; margin: 0 0 20px 0; }
div.banner  div.orion img { width: 130px ; }

@media only screen and (max-width: 1038px) {
div.contact div.title { background-size: 140%; }
div.contact div.content div.tel { font-size: 17px; }
div.contact div.content div.tel img { width:22px; }
div.contact div.content div.mail { font-size: 17px; }
div.contact div.content div.mail img { width:22px; }

@media only screen and (max-width: 900px) {
div.contact div.title { background-size: 180%; }
div.contact div.content div.tel { font-size: 15px; padding: 10px 4% 4px; margin: 10px 5px 0 0; }
div.contact div.content div.tel img { width:20px; }
div.contact div.content div.mail { font-size: 15px; margin-top: 10px; padding: 10px 4% 4px; }
div.contact div.content div.mail img { width:20px; }
}

@media only screen and (max-width: 768px) {
div.contact div.title { background-size: 100%; height:80px; }
div.contact{ float: none; width: 100%; margin: -45px auto 0; }
div.contact div.title { float:none; width:98%; height: 5px; }
div.contact div.content { float:none; width:98%; height: 140px; }
div.contact div.content div.tel { float:none; width:90%; }
div.contact div.content div.mail { float:none; width:90%; }


div.banner { float: none; margin: 25px 0 0 0; width: 96%; padding: 2%; }
div.banner div.orion { width: 96%; box-shadow:0px 0px 0px; margin: 0 2% 25px; }

}

/*-Projector-------------*/
div.projector { width: 100%; max-width: 1037px; margin: 85px auto 0; }
div.projector div.left { float: left; width: 500px; }
div.projector div.right { float: right; width: 500px; }
div.projector img { width: 100%; }
@media only screen and (max-width: 768px) {
div.projector { width: 95%; margin: 0 5% 45px; }
div.projector div.left { float: none; width: 95%; }
div.projector div.right { float: none; width: 95%; margin: 20px 0 0 0; }
}