@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: linear-gradient(-135deg, rgba(161,187,74,.6), rgba(159,189,116,.6));	margin: 0 auto;	line-height: 1.6;}   /* 茶色グラデ rgba(202,185,115,.6), rgba(208,200,120,.8) */
div.container {max-width: 1000px;	background: #ffffff; margin: 0 auto;}

/* 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(146,138,68,.8), rgba(255,245,147,.8));}
.header-img {}
nav {margin: 0;	padding: 0;}
nav ul {list-style: none;	margin: 0; padding: 0; display: flex; flex-flow: column; align-items: center; justify-content: center;}
nav ul li {width: 100%; border-bottom: 1px solid #fff; text-align: center;}
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: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: 0 5px 18px;	margin: 0 auto 0;} /* ナビゲーションがある場合は padding: 30px 5px 18px;	margin: 60px auto 0; */
.not-box p {color: rgba(10,10,10,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: inside;}
.news-box li a {text-decoration: none; color: rgba(30,30,30,.9);}
.news-box li a:hover {color: rgba(50,50,50,.7);}

.youtube-wrap{position: relative; width: 100%; height: 0; padding-top: 56.25%;}
.youtube-wrap iframe{position: absolute; top: 0; left: 2%; width: 96%; height: 96%;}

/** 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(146,138,68,.6);}
.content a:hover {text-decoration: none; color: rgba(146,138,68,.9);}
.content h1 {margin-top: 18px; margin-bottom: 10px;	display: inline-block; font-weight: bold;	font-size: 22px; color: rgba(146,138,68,1); padding-left: 12px; border-left: 12px solid rgba(146,138,68,1);}
.content h2 {margin-top: 8px;	color: rgba(146,138,68,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 {}
.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(146,138,68,.2);}
.pre-table td {padding: 5px 5px 5px 25px; display: block;}
.pre-table td:nth-child(odd) {background: rgba(146,138,68,.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 {flex-flow: row;}
  nav ul li {width: 33%; margin-right: .5%; border-bottom: none;}
	nav ul li:last-child {margin-right: 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;}
}