@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700;800;900&family=Noto+Sans+JP:wght@700;800;900&family=Zen+Maru+Gothic:wght@700;900&display=swap');

/* 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}
h1 {margin-block-end: 0;}

body {font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "???? ??ゴシ????", "MS P Gothic", sans-serif;	background: rgba(233,232,216,.5); line-height: 1.6;}   /* 茶色グラデ rgba(202,185,115,.6), rgba(208,200,120,.8) */
div.container {max-width: 1000px;	background: #ffffff; margin: 0 auto; padding: 0 1em;}

/* common style for element */
.oneword {display: inline-block;}
img {	max-width: 100%;}
p.red {color: #fa484c;}
.strong {font-weight: bold; color: #e42e32;}
.ind32 {margin-left: 32px;}
.mt_1l {margin-top: 1em;}
.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mb10 {margin-bottom: 10px;}
hr {margin-top: 30px;}
p > a {font-weight: bold;}
.strg {font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; color: rgba(212,175,55,1);}
hr {color: rg8ba(212,175,55,1);}
a.hv-img img:hover {opacity: 0.6;}
.img_rnd2 {border-radius: 1.5em 0 1.5em 1.5em;}

/** header start **/


@media screen and (max-width: 1000px) {
.header-img img {content: url("../img/hat-tanken-banner_sml.png");}
}


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: 1.2em .5em;	margin: 0 auto 0; text-align: center;} /* ナビゲーションがある場合は padding: 30px 5px 18px;	margin: 60px auto 0; */
.not-box p {font-weight: bold;}

.news-box {margin: 0 auto .5em;}
.news-box ul {padding-left: 2em;}
.news-box li {list-style: outside;}
.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 **/
.header-sub {
	margin: 0 0 22px;
	font-size: 20px;
	text-align: center;
}
.content a {text-decoration: none; color: rgba(72,75,157,1);}
.content a:hover {text-decoration: none; color: rgba(72,75,157,.7);}
.content h1 {margin-top: 18px; margin-bottom: 10px;	font-weight: bold;	font-size: 26px; color: rgba(212,175,55,1); padding-left: 12px; border-left: 12px solid rgba(212,175,55,1); font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900;}
.content h2 {margin-top: 8px;	color: rgba(212,175,55,1); font-size: 20px; font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; 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: 1em;}
.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;}

.info_table {margin: .5em 0;}
.info_table tr:nth-child(odd) {background: rgba(212,175,55,.2);}
.info_table td {vertical-align: top; padding: .7em 1em .5em 0;}
.info_table td:nth-child(1) {min-width: 150px; padding-left: 1em;}

.btn-wrap {padding: 1.4em; text-align: center;}
.btn--purple, a.btn--purple {color: #fff; background-color: rgba(212,175,55,1); padding: .5em 1em; margin: 2em auto; font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 1.4em; border: double 8px white;}
.btn--purple:hover, a.btn--purple:hover {color: #fff; background: rgba(212,175,55,.6);}
a.btn--radius {border-radius: .5em;}

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(224,126,27,.2);}
.pre-table td {padding: 5px 5px 5px 25px; display: block;}
.pre-table td:nth-child(odd) {background: rgba(224,126,27,.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 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;}

	/* 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: 0 1em 0 0;}
	.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;}
}