@charset "utf-8";
@import url('button.css');

/* YUI 3.5.0 reset.css (http://developer.yahoo.com/yui/3/cssreset/) - http://cssreset.com */
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

body {
	font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "???? ??ゴシ????", "MS P Gothic", sans-serif;
	background: #000000;
	margin: 0 auto;
	line-height: 1.6;
}
div.container {
	max-width: 1000px;
	background: #ffffff;
	margin: 0 auto;
	border-radius: 40px;
}

/* common style for element */
.oneword {display: inline-block;}
img {	max-width: 100%;}
p.red {color: #fa484c;}
.ind32 {margin-left: 32px;}
.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mb10 {margin-bottom: 10px;}
hr {margin-top: 30px;}

a.hv-img img:hover {opacity: 0.6;}

/** header start **/
header {background: linear-gradient(-135deg, rgba(0,117,194,.6), rgba(231,213,232,.8));}
.header-img {}
nav {
	margin: 0;
	padding: 0;
}
nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
nav ul li {
	float: left;
	text-align: center;
	width: 100%;
	margin-right: 0;
	border-bottom: 1px solid #fff;
}
nav ul li:last-child {margin-right: 0; width: 100%; margin-bottom: 15px;}
nav ul li a {
	display: block;
	zoom: 1;
	height: 42px;
	padding-top: 20px;
	text-decoration: none;
	color: #ffffff;
	font-size: normal;
	font-weight: bold;
	background-color: rgba(122,122,122,1);
	background-repeat: no-repeat;
	background-position: center top;
	border: solid 5px rgba(255,255,255,1);
}
nav ul li a span.popup {
	display: none;
}
nav ul li a:hover {
	color: #ffffff;
	font-weight: bold;
	background-position: center bottom;
	background-color: rgba(180,180,180,.7);
}
nav ul li a:hover span.popup {
	display: block;
	position: relative;
	background: rgba(180,180,180,.7);
	color: #000;
	top: 40px/*-90px*/;
	padding: 10px;
	margin: 0 /*50px*/;
	border-radius: 10px;
}
nav ul li a.active {
	color: #ffffff;
	font-weight: bold;
	background-position: center bottom;
	background-color: rgba(80,80,80,1);
}
navi:after {
	content: ".";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}
.not-box {
	padding: 30px 5px 18px;
	margin: 60px auto 0;
}
.not-box p {
	color: rgba(0,122,180,1);
	font-weight: bold;
	font-size: 20px;
	text-align: center;
}

.news-box {margin: 10px 13px 0; padding: 10px 30px; background: rgba(255,255,255,.4); border: solid 1px rgba(200,200,200,.8);}
.news-box h2 {margin-bottom: 2px !important; font-size: 120%; font-weight: bold;}
.news-box li {list-style: none;}
.news-box li a {text-decoration: none; color: rgba(30,30,30,.9);}
.news-box li a:hover {color: rgba(50,50,50,.7);}

/** content start **/
.content {
	padding: 0 15px;
}
.header-sub {
	margin: 0 0 22px;
	font-size: 20px;
	text-align: center;
}
.content a {
	text-decoration: none;
	color: rgba(0,122,180,.7);
}
.content a:hover {
	text-decoration: none;
	color: rgba(0,122,180,.9);
}
.content h1 {
	margin-top: 18px;
	margin-bottom: 10px;
	display: inline-block;
	font-weight: bold;
	font-size: 22px;
	color: rgba(0,122,180,1);
	padding-left: 12px;
	border-left: 12px solid rgba(0,122,180,1);
}
.content h2 {margin-top: 8px;	color: rgba(0,122,180,1);	font-size: 20px; font-weight: bold; padding: 0 0 0 16px;}
.content h3 {margin-top: 6px;	font-weight: bold; font-size: 18px; padding-left: 18px;}
.content h4 {font-weight: bold; padding-left: 20px;}
.content p {padding-left: 20px;}
.content p.lg {font-size: 20px;}

.company-info {font-size: smaller;}
.company-info span {display: inline-block; margin-right: 12px;}

.p-ind-box p {text-indent: 16px;}
.ind-cont-box {margin-bottom: 10px; padding-bottom: 10px; border-bottom: solid 1px rgba(200,200,200,.3);}
.ind-cont-box:after {content: "."; display: block;	height: 0; font-size: 0; clear: both;	visibility: hidden;}
.ind-cont-box p {text-indent: 16px;}
.lead-box {max-width: 65%; float: left;}
.img-box {width: 35%; float: left;}
@media all and (max-width: 520px) {
.lead-box {max-width: 100%;}
.img-box {width: 250px;}
}
figure {margin: 5px 15px;}
figcaption {font-size: 12px; text-align: center; margin-left: -15px; margin-right: -15px;}

div.exp-box {margin: 8px;	background: rgba(0,153,68,0.2);	padding: 10px 18px 16px; -o-border-radius: 15px; -ms-border-radius: 15px; -moz-border-radius: 15px;	-webkit-border-radius: 15px; border-radius: 15px;}
div.exp-box h2 {font-weight: bold;}
div.exp-box p {padding-left: 5px;}

div.sample-items {padding-left: 20px;}
div.sample-items:after {content: "."; display: block;	height: 0; font-size: 0; clear: both;	visibility: hidden;}
div.sample-items section {display: block;	float: left; width: 300px; padding: 5px 10px 0;	min-height: 100px;}
div.sample-items img {margin-top: 10px;	margin-bottom: 34px; width: 280px;}
div.sample-items h2 {padding: 0 0 5px 10px;	text-decoration: underline; margin-top: 4px; color: #000;	font-size: 18px; font-weight: normal;}

p.form {
	display: inline-block;
	background: rgba(0,153,68,1);
	-o-border-radius: 15px;
	-ms-border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	color: #ffffff;
	font-size: 20px;
	font-weight: bold;
	padding-top: 7px;
	padding-right: 20px;
	padding-bottom: 4px;
	padding-left: 20px !important;
	text-decoration: none;
}

p.form:hover {
	background: rgba(0,153,68,0.8);
}

div.ad-box {
	border: solid 2px #fff;
	margin: 8px;
	padding: 12px;
	max-width: 300px;
}
div.gaiyou h3 {
	color: #000;
}
div.sub-info-box {
	margin: 20px 0 0;
	-o-border-radius: 10px;
	-ms-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	padding: 20px;
	background: rgba(0,153,68,0.2);
}
.res-table {width: 98%;	margin: 8px auto;	font-size: 18px;}
.res-table th{padding: 3px;	display: block;}
.res-table td{padding: 5px 5px 5px 25px; display: block;}

.pre-table {width: 90%;	margin: 12px auto; font-size: 14px;}
.pre-table caption {padding: 5px; font-weight: bold; text-align: center; color: rgba(100,100,100,.8); /*border: solid 1px rgba(100,100,100,.8); border-bottom: none;*/}
.pre-table tr {border: solid 1px rgba(100,100,100,.8);}
.pre-table th {padding: 7px 2px 2px 2px; text-align: center; display: block;}
.pre-table th:nth-child(odd) {background: rgba(0,122,180,.2);}
.pre-table td {padding: 5px 5px 5px 25px; display: block;}
.pre-table td:nth-child(odd) {background: rgba(0,122,180,.2);}

p.flyer {
	margin-left: 20px;
}
p.flyer a {
	margin-bottom: -20px;
}
div.flyer-box p {
	margin-top: 10px;
	text-indent: 0;
	float: left;
}
div.flyer-box img {
	float: left;
	margin-left: 10px;
}
div.flyer-box::after{
	content:"";
	display:block;
	clear:both;
}
.door-list {
	position: relative;
	top: 7px;
	-o-border-radius: 10px;
	-ms-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	margin-right: 10px;
}
.door-list-box p {
}
.door-list-box span {
	display: block;
	margin-top: 8px;
	padding-left: 10px;
}
.door-newline {
	margin-left: 0;
	margin-top: 0;
}
.guest-box {
	margin: 10px 0 10px 16px;
}
.guest-box:after {
	content: ".";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}
.guest-box img {
	width: 30%;
	float: left;
	padding-top: 3px;
	padding-bottom: 10px;
}
.guest-info {
	display: inline-block;
	float: left;
	width: 100%;
	padding-left: 0;
}
.guest-info p {
	padding-left: 0;
}
.supervisor {margin-left: 20px;}
.supervisor tr {vertical-align: top;}
.supervisor td {padding: 0 20px 5px 0; min-width: 100px;}
/** sidebar start **/
.sidebar {
	margin-top: 15px;
}

  aside ul.banner {margin: 0 5%; padding: 0 0 1em 0; list-style: none;}
  aside ul.banner li {margin: 3%; padding: 0; display:inline-block;}
  aside ul.banner li p.center {text-align: center;}
  aside ul.banner li a:hover {top: 1px;	left: 1px; position: relative;}
  aside div.history-box-t h2 {text-align: center;}
  aside div.history-box {margin: 0 5%;}
  aside ul.history {list-style: circle; margin: 20px; font-size: 95%;}
  aside ul.history li {margin-bottom: 10px;}
  aside ul.history span.time {font-size: smaller;}
  aside ul.history a {text-decoration: none; color: rgba(90,90,50,1);}
  aside ul.history a:hover {color: rgba(90,90,50,.7);}

/** footer start **/
footer {
	padding: 10px 0;
	background: #ffffff;
	text-align: center;
	clear: both;
}
footer .section-box2 {
  margin: 10px;
  padding: 10px;
  line-height: 1.5;
}
.section-box2 h2 {
  color: #e42e32;
}
address {
  font-size: smaller;
}

header, section, footer, aside, nav, article, figure {
	display: block;
}

@media all and (min-width: 600px) {
  nav ul li {width: 24.8%; margin-right: 0.2%; border-bottom: none;}
  nav ul li:last-child {margin-right: 0; width: 25%; margin-bottom: 0;}
	nav ul li a {font-size: large;}
	nav ul li a {height: 42px;}
	nav ul li a:hover span.popup {top: -92px;	margin: 0;}
	.not-box p {font-size: 28px;}
	.not-box-l {font-size: 36px;}
	
	/* content */
	div.sample-items section {height: 400px; padding: 5px 10px 0;	margin: 0 10px 0;}
	.guest-box img {width: 17%;	padding-bottom: 0;}
	.guest-info {width: 80%; padding-left: 3%;}
}

@media all and (min-width: 768px) {
	.container {
		overflow: hidden;
	}
	.content {
		float: left;
		width: 73%;
		padding: 5px 20px 5px 25px;
	}
	.sidebar {
		float: right;
		width: 21%;
	}
  aside ul.banner {margin: 0;}
	aside ul.banner li {display:block;}
	aside div.history-box-t h2 {
		text-align: left;
	}
	aside div.history-box {
		margin: 0;
	}
	
}

@media all and (min-width: 840px) {
	.res-table {width:98%;	margin:5px auto;}
	.res-table tr {}
	.res-table tr:last-child {}
	.res-table th {width:22%; padding:5px 10px; display:table-cell; vertical-align: top;}
	.res-table td {width:76%; padding:5px 10px; display:table-cell;}
	
	.pre-table {width:90%; margin:10px auto 12px;}
	.pre-table tr {}
	.pre-table tr:last-child {}
	.pre-table th {padding:5px 10px; display:table-cell; vertical-align: top;}
  .pre-table th:nth-child(odd) {width: 40%;}
	.pre-table td {padding:5px 10px; display:table-cell; vertical-align: top;}
}