@charset "utf-8";

@import url(ini.css);
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://use.fontawesome.com/releases/v5.0.6/css/all.css);
@import url(https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);

html{ font-size: 62.5%;}
body{ background: #fff; color: #282828; font-size: 1.8rem;}

div.inner{ width: 980px; margin: 0 auto; overflow: hidden;}

header{ overflow: hidden; margin: 20px 0;}
header div#logo{ float: left; text-align: center;}
header div#logo a{ text-decoration: none; color: #454545; font-size: 2.0rem; line-height: 72px; font-weight: 600; text-shadow:1px 1px 3px #aaa;}
header div#logo a span{ font-size: 4.2rem; margin-left: 10px;}

#headermenu {float: right; font-size: 0;}
#headermenu li{ display: inline-block; vertical-align: middle;}
#headermenu li:first-child{margin-right: 20px;}

#headermenu li#headerdl { text-align: center; font-size: 1.2rem; text-shadow: 1px 1px 1px #454545; line-height: 26px;}
#headermenu li#headerdl a{	display: block;	text-decoration: none;	background: #4bacd2; color: #FFF; padding: 10px 10px;	border-radius: 4px;}
#headermenu li#headerdl a:hover{ background: #333;}
#headermenu li#headerdl a span{ font-weight: 600; display: block; font-size: 1.6rem;}

#headermenu li#headertel{ font-size: 1.2rem; background: #ff8a00; background: linear-gradient(#ffa600, #ff8a00); color: #FFF;	text-align: center;	text-shadow: 1px 1px 1px #454545;	padding: 5px 10px;	border-radius: 5px;	border: 1px solid #ff8a00;	line-height: 27px;}
#headermenu li#headertel a{	font-size: 2.6rem; text-decoration: none; color: #fff;}
#headermenu li#headertel span{display: block;	font-size: 1.2rem;}



div#menubar {	clear: both;	overflow: hidden; margin-bottom: 20px;}
div#menubar #menuBtnH{ display: none;}
div#menubar nav{ clear: both; }
div#menubar div.inner{ }
div#menubar nav ul{ overflow: hidden; background: #454545; background: linear-gradient(#555 0%, #444 50%, #333 50%, #444 100%); border-radius: 5px; list-style: none; margin: 0; padding: 0;}
div#menubar nav ul li{ float: left; text-align: center; width: 20%; border-left: 1px dotted #888; }
div#menubar nav ul li:first-child{border-left: none;}
div#menubar nav ul li a{ display: block; text-decoration: none; color: #fff; font-size: 1.5rem; padding: 10px 0; text-shadow:0 -1px 0px #333,0 1px 0px #555; font-weight: 600;}
div#menubar nav ul li a:hover{ background: #000;}




div#pagetop{ clear: both;}
div#pagetop a{ display: block; float: right; background: #333; padding:10px 20px; color: #fff; text-decoration: none;}
footer{ clear: both; background: #333; color: #fff;}
footer a { color:#fff; }
footer p { padding: 10px 0;}
footer p a{display: block; float: left;}
footer div#copyright{ background: #242424; padding: 5px 0; font-size: 1.4rem;}
footer div#copyright i{ padding-right: 0.5em;}
footer div#copyright small{ float: right;}

div#top{ clear: both; height: 610px; background: url(image/home_top1.jpg) center bottom no-repeat; padding-top: 80px;}
div#top div.inner{ color: #fff; text-shadow: 1px 1px 1px #333;}
div#top div.inner h1{ font-size: 3.2rem;}
div#top div.inner p{ margin-top: 20px;}
div#top div.inner .bgBox{ background: rgba(0,0,0,0.3); padding: 50px 50px; border-radius: 5px;}

div#content{ margin-top: -140px; overflow: hidden;}
div#content div.inner{ background:rgba(255,255,255,0.8); overflow: hidden; padding: 20px; width: 980px; border-radius: 3px;}
div#content div#main{ width: 640px; float:left ; background: #fff;}
div#content div#main h1{  position: relative; padding-left: 14px; padding-bottom: 14px; margin:0 0 20px 0; font-size: 2.6rem; font-weight: 600; border-bottom: 1px solid #aaa;}
div#content div#main h1::after {  content: "";  position: absolute;  top: 0;  left: 0;  width: 0;  height: 0;  border-top: 14px solid #48c4d3;  border-right: 14px solid transparent;}

div#content #main h2 {	clear: both;	 font-weight: 600; margin-top: 30px;	margin-bottom: 20px;	padding: 0.5em 0.5em;	border: 1px solid #dcdcdc;	font-size: 2.2rem;	background: #fff;	background: linear-gradient(#fff 50%, #e7edf7);	box-shadow: 0px 0px 3px 1px #fff inset;	letter-spacing: 0.1em;}
div#content #main h2:first-letter {	border-left: 3px solid #4bacd2;	padding-left: 0.5em;}
div#content #main h2:first-child {	margin-top: 0;}
div#content #main h3{	clear: both;	margin: 30px 0 20px 0;	padding: 0px 0.5em 0.5em 0.5em;	border-bottom: 1px solid #ccc;	font-size: 1.8rem;	letter-spacing: 0.1em;	 font-weight: bold;}
div#content #main h3::first-letter {	border-left: 3px solid #474747;	padding-left: 0.5em;}
div#content #main p{ margin: 0.5em;}
div#content #main div.twitterbox{ padding: 30px; background: #fafafa; border: 1px solid #ddd; margin: 20px;}
div#content #main section{margin-bottom: 60px;}

div#content #main ul.l1 {  padding: 0.5em 1em 0.5em 2.5em;  position: relative;}
div#content #main ul.l1 li {  line-height: 1.5;  padding: 0.5em 0;  list-style-type: none!important; font-size: 2.0rem; font-weight: 500;}
div#content #main ul.l1 li:before {  font-family: "FontAwesome";  content: "\f086";  position: absolute;  left : 1em; color: #5c9ee7;}

div#content #main ul.l2 {  padding: 0.5em 1em 0.5em 2.5em;  position: relative;}
div#content #main ul.l2 li {  line-height: 1.5;  padding: 0.5em 0;  list-style-type: none!important; font-size: 2.0rem; font-weight: 500;}
div#content #main ul.l2 li:before {  font-family: "FontAwesome";  content: "\f15c";  position: absolute;  left : 1em; color: #fc0;}

div#content #main ul.l3 { padding:0 1em;}
div#content #main ul.l3 li { line-height: 1.5;  list-style-type: none!important; font-size: 2.0rem; font-weight: 500; margin-bottom: 10px;}
div#content #main ul.l3 li a{ display: block; text-decoration: none; padding: 0.5em 0 0.5em 2em; background: #4bacd2;	color: #FFF; position: relative; border-radius: 5px;}
div#content #main ul.l3 li a:before {  font-family: "FontAwesome";  content: "\f15c";  position: absolute;  left : 0.5em; color: #fff;}
div#content #main ul.l3 li a:hover{background: #333;}


div#content #main ol{  counter-reset:number;  list-style-type: none!important;  padding:0 20px;}
div#content #main ol li{  position: relative;  padding: 0.5em;  line-height: 1.5em;  background: #f1f8ff;  border-left : solid 35px #5c9ee7;  margin-bottom: 10px;}
div#content #main ol li:before{  position: absolute;  counter-increment: number;  content: counter(number);  display:inline-block;  color: white;  font-family: 'Avenir','Arial Black','Arial',sans-serif;  font-weight:bold;  font-size: 1.5rem;  top: 50%;  -moz-transform: translateY(-50%);  	-webkit-transform: translateY(-50%);  	-o-transform: translateY(-50%);  	-ms-transform: translateY(-50%);  	transform: translateY(-50%);  left: -35px;  width: 35px;  height: 1em;  line-height: 1;  text-align:center;}

div#content #main div.imgBox{ width: 40%; float: left; padding: 10px; height: 190px; overflow: hidden;}
div#content #main div.contBox{ width: 60%; float: right; padding: 10px;}
div#content #main div.contBox h3{ margin: 0 0 10px 0; padding: 0 0 10px 0; font-size: 2.0rem;}
div#content #main div.contBox h3::first-letter {	border-left:none;	padding-left:0;}
div#content #main div.contBox p{ margin: 0 0 10px 0;}

/*
-------------------*/
div.more{}
div.more a{	display: block;	text-decoration: none;	background: #4bacd2;	color: #FFF;	text-align: center;	padding: 10px 0; font-weight: 600;	border-radius: 4px;}
div.more a:hover{	background: #333;}

div.googlemap{overflow:hidden; height:450px; width: 100%;}
div.googlemap iframe{ max-width: 100%;border:none; margin-top:-200px;}

div#content #main ul.chintaiBox{ font-size: 0;}
div#content #main ul.chintaiBox li{ display: inline-block; width: 48%; margin: 1%;}

div#content #main span.infoTel{ font-size: 3.6rem;}

div#content #main table.formArea th span{ font-size: 1.2rem; padding: 0.1em 0.25em; margin-left: 0.5em; background: #ff0808; color: #fff; border-radius: 3px;  }
div#content #main table.formArea td input,
div#content #main table.formArea td select,
div#content #main table.formArea td textarea{ display: block; width:90%; margin: 0 auto; padding:5px; border-radius:3px;  background:#feffcc; border:solid 1px #ccc;}
div#content #main table.formArea td textarea{ height:200px;}
div#content #main table.formArea td p.attention{ width: 90%; margin: 0 auto; border: 2px solid #fc0; padding: 0.5em; margin-bottom: 10px; font-weight: bold; font-size:1.4rem;}
div#content #main div.formEnd{ margin-top: 30px; text-align: center;}

div#content #main div.formEnd ul{ font-size: 0; text-align: center;}
div#content #main div.formEnd ul li{ display: inline-block; font-size: 1.8rem; margin: 10px;}
div#content #main div.formEnd ul li input{ display: block; cursor: pointer; font-weight: bold; color: #fff; background: #4bacd2; border-radius: 3px;}
div#content #main div.formEnd ul li input:hover{ background: #333;}
div#content #main div.formEnd ul li input.back{ color: #272727; background: #ccc; border-color: #aaa;}
div#content #main div.formEnd ul li input.back:hover{ background: #bbb;}
div#content #main p.meilto{ font-weight: bold; text-align: center; background: #feffcc; padding: 1em;}


div#content div#side{ width: 280px; float:right ;}
div#content div#side div.box{ background: #fff; margin-bottom: 20px; padding: 18px; border: 1px solid #dcdcdc;}
div#content div#side div.box h2 {  position: relative;  margin: -17px -17px 0px -17px;  padding: 18px; font-weight: 600;}
div#content div#side div.box h2::after {  content: "";  position: absolute;  top: 0;  left: 0;  width: 0;  height: 0;  border-top: 20px solid #cf0334;  border-right: 20px solid transparent;}
div#content div#side div.box p{ margin:0 0px 10px 0px; font-size: 1.5rem;}
div#content div#side div.box p img{ display: block; margin: 0 auto;}
div#content div#side div.box dl{font-size: 1.5rem; margin-bottom: 20px;}
div#content div#side div.box dl dt{font-size: 1.2rem; border-bottom: 1px dotted #ccc;}
div#content div#side div.box dl dd{ margin-bottom: 10px;}


/*--
--------------------------------------------------------*/
div#baibaiTop,
div#chintaiTop,
div#columnTop,
div#companyTop,
div#infoTop,
div#ownerTop,
div#downloadTop,
div#privacyTop{ clear: both; height: 440px; padding: 60px 0;}

div#baibaiTop div.inner .bgBox,
div#chintaiTop div.inner .bgBox,
div#columnTop div.inner .bgBox,
div#companyTop div.inner .bgBox,
div#infoTop div.inner .bgBox,
div#ownerTop div.inner .bgBox,
div#downloadTop div.inner .bgBox,
div#privacyTop div.inner .bgBox{ background: rgba(0,0,0,0.3); padding: 50px 50px; border-radius: 5px;}

div#baibaiTop{ background: url(image/baibai_top.jpg)center bottom no-repeat;}
div#chintaiTop{ background: url(image/chintai_top.jpg)center bottom no-repeat;}
div#columnTop{ background: url(image/column_top.jpg)center bottom no-repeat;}
div#companyTop{ background: url(image/company_top.jpg)center bottom no-repeat;}
div#infoTop{ background: url(image/info_top.jpg)center bottom no-repeat;}
div#ownerTop{ background: url(image/owner_top.jpg)center bottom no-repeat;}
div#downloadTop{ background: url(image/download_top.jpg)center bottom no-repeat;}
div#privacyTop{ background: url(image/privacy_top.jpg)center bottom no-repeat;}

div#baibaiTop div.inner,
div#chintaiTop div.inner,
div#columnTop div.inner,
div#companyTop div.inner,
div#infoTop div.inner,
div#ownerTop div.inner,
div#downloadTop div.inner,
div#privacyTop div.inner{ color: #fff; text-align: center; text-shadow: 1px 1px 1px #333;}

div#baibaiTop div.inner h1,
div#chintaiTop div.inner h1,
div#columnTop div.inner h1,
div#companyTop div.inner h1,
div#infoTop div.inner h1,
div#ownerTop div.inner h1,
div#downloadTop div.inner h1,
div#privacyTop div.inner h1{ font-size: 3.2rem;}


table {	border-collapse: collapse;	width:100%;	border-top: #dcdcdc 1px dotted;}
th {	width: 30%;	border-bottom: #dcdcdc 1px dotted;	padding: 20px;	font-weight: normal;	background: #fafafa;	text-align: center;	font-size: 1.4rem;}
td {	border-bottom: #e3e3e3 1px dotted;	text-align: left;	padding: 20px;}



/* ----------------------------------------
* レスポンシブ
* ~ / 1199px / 991px / 767px 
* desctop / laptop / tablet / phone
---------------------------------------- */
@media print,screen and (max-width: 1024px) {
  /* laptop */
  /* laptop end */
}
@media screen and (max-width: 979px) {
  /* tablet */
	div.inner{ width: 100%;}
	header{ overflow: hidden; margin: 20px 10px;}
	footer p{ padding: 10px;}
	footer div#copyright{ padding: 10px;}
	div#menubar{ margin-bottom: 0;}
	div#menubar nav ul{ border-radius: 0px;}

	div#top{ clear: both; height: auto; padding: 0;}
	div#top div.inner{ color: #fff; text-align: left; padding: 50px 50px 100px 50px;}
	div#top div.inner h1{ font-size: 2.6rem;}
	
	div#baibaiTop,
	div#chintaiTop,
	div#columnTop,
	div#companyTop,
	div#infoTop,
	div#ownerTop,
	div#downloadTop,
	div#privacyTop{ height: auto; padding: 0;}

	div#baibaiTop div.inner,
	div#chintaiTop div.inner,
	div#columnTop div.inner,
	div#companyTop div.inner,
	div#infoTop div.inner,
	div#ownerTop div.inner,
	div#downloadTop div.inner,
	div#privacyTop div.inner{ text-align: left; padding: 50px 50px 100px 50px;}

	div#baibaiTop div.inner h1,
	div#chintaiTop div.inner h1,
	div#columnTop div.inner h1,
	div#companyTop div.inner h1,
	div#infoTop div.inner h1,
	div#ownerTop div.inner h1,
	div#downloadTop div.inner h1,
	div#privacyTop div.inner h1{ font-size: 2.6rem;}


	div#content{ margin-top: 0px; overflow: hidden;}
	div#content div.inner{ padding: 20px; width: 100%;}
	
	div#content div#main{ width: 100%; float:none;}
	div#content div#side{ width: 100%; float:none; margin: 0 auto;}

	div#content div#side div.box{  padding: 28px;}



  /* tablet end */
}
@media screen and (max-width: 767px) {
  /* phone */

	header{ overflow: hidden; margin:0 5px 10px 5px;}
	header div#logo{ float: none; text-align: center;}

	#headermenu {float: none; font-size: 0; }
	#headermenu ul li{ width: 49%;}
	#headermenu ul li:first-child{ margin-right: 2%;}
	#headermenu li#headerdl { font-size: 0.8rem; line-height: 19px;}
	#headermenu li#headerdl a span{font-size: 1.3rem;}

	#headermenu li#headertel{ font-size: 1.2rem; line-height: 22px;}
	#headermenu li#headertel a{	font-size: 1.6rem;}
	#headermenu li#headertel span{ font-size: 0.8rem;}
	
	footer p {  font-size: 1.2rem;}
	footer div#copyright{ font-size: 1.2rem; }
	footer div#copyright small{ float: none; display: block; margin-top: 10px; }

	div#menubar #menuBtnH{ display: block; text-align: center; color: #fff; cursor: pointer; padding: 10px 0; background: #454545; background: linear-gradient(#555 0%, #444 50%, #333 50%, #444 100%); }
	div#menubar #menuBtnH i{ padding-right: 0.5em;}
	div#menubar #hide-menu{ display: none;}
	div#menubar nav ul{ background: #454545;}
	div#menubar nav ul li{ float: none; text-align: left; width: 100%; border: none; border-top: 1px dotted #888;}
	div#menubar nav ul li:first-of-type{border-top: 1px solid #aaa;}
	div#menubar nav ul li a{ font-size: 1.5rem; padding:15px 10px ;}

	div#top{ clear: both; height: auto; padding-top: 20px;}
	div#top div.inner{padding: 10px 10px 80px 10px;}
	div#top div.inner .bgBox{ background: rgba(0,0,0,0.5); padding: 10px; border-radius: 5px;}
	div#top div.inner h1{ font-size: 1.5rem; font-weight: bold;}
	div#top div.inner p{ font-size: 1.4rem;}
	
	div#baibaiTop div.inner,
	div#chintaiTop div.inner,
	div#columnTop div.inner,
	div#companyTop div.inner,
	div#infoTop div.inner,
	div#ownerTop div.inner,
	div#downloadTop div.inner,
	div#privacyTop div.inner{ padding: 50px 10px 50px 10px;}

	div#baibaiTop div.inner .bgBox,
	div#chintaiTop div.inner .bgBox,
	div#columnTop div.inner .bgBox,
	div#companyTop div.inner .bgBox,
	div#infoTop div.inner .bgBox,
	div#ownerTop div.inner .bgBox,
	div#downloadTop div.inner .bgBox,
	div#privacyTop div.inner .bgBox{ padding: 25px 10px;}


	div#content { font-size: 1.5rem;}
	div#content div.inner{ padding: 5px;}
	div#content div#side div.box{  padding: 18px;}
	
	div#content #main h2 { font-size: 1.8rem;}

	div#content #main ul.l1 {  padding: 0.5em 1em 0.5em 3.0em;}
	div#content #main ul.l1 li { font-size: 1.8rem;}
	
	div#content #main ul.l2 {  padding: 0.5em 1em 0.5em 3.0em;}
	div#content #main ul.l2 li { font-size: 1.8rem;}

	table {	border:none;}
	th { display: block; width: 100%; text-align: left;	border:none; padding:0.5em; background: #e5e5e5;}
	td { display: block; width: 100%; border:none; padding:0.5em;}




  /* phone end */
}

/* IE11 */
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .inner { }
	div#menubar nav ul li{ width: 195px;}
	

}