@charset "utf-8";

@media screen and (max-width: 559px) { /* sp */ }
@media screen and (max-width: 959px) { /* tab */ }

/*------------------------
 common
------------------------*/
@media screen and (max-width: 959px) {
	#layout{width:100%; }
}

/* Table Of Contents
----------------------------------------

# header
# visual
# pageBody
# footer
# clearfix

----------------------------------------*/


/* # header
---------------------------------------------------------------------------- */

div#header {
	background: none;
	margin: 0 auto;
	width: 1000px;
	padding: 0 100px;
	position: relative;
	z-index: 50;
	height: auto;
}

div#header h1#logo {
	position: absolute;
	top: 671px;
	left: 99px;
}

div#header ul#hNav {
	position: absolute;
	top: 21px;
	right: 100px;
}

div#header ul#hNav li {
	font-size: 0;
	width: auto;
}

div#header ul#hNav li a {
	background: url(../common/images/hnav_contact.png) no-repeat left top; 
	display: block; 
	height: 10px; 
	text-indent: -9999px; 
	width: 68px;
	cursor: pointer;
}

div#header ul#hNav li a:hover {
	background: url(../common/images/hnav_contact_o.png) no-repeat left top; width: 68px;
}
@media screen and (max-width: 959px) {
	div#header { box-sizing: border-box; width:100%;}
	div#header h1#logo { width:180px; top:40px;left:40px;}
	div#header h1#logo img{ width:100%;}
	div#header ul#hNav { top:40px; right:40px;}
}
@media screen and (max-width: 559px) {
	div#header h1#logo { width:150px;top:15px;left:10px;}
	div#header ul#hNav { top:15px; right:10px;}
}

/* # visual
---------------------------------------------------------------------------- */

div#visual {
	background: #333;
}

div#visual div.visualInner {
	margin: 0 auto;
	position: relative;
	width: 1200px;
	overflow: hidden;
}

div#visual div.visualInner p.contact {
	position: absolute;
	top: 21px;
	right: 100px;
	z-index: 50;
}

#bigPic {
	height: 770px;
	width: 1200px;	
}

#bigPic img {
	display: none;
	position: absolute;	
	top: 0;
	left: 0;
	text-align: center;
}

#bigPic img.first {
	display: block;
}

ul#thumbs {
	position: absolute;
	top: 395px;
	right: 94px;
}
@media screen and (max-width: 959px) {
	.visualInner{ width:100% !important;height:58vw !important;}
	#bigPic {
		width:100%;
	}
	#bigPic li{ display: flex; align-items: center;width:100%;height:100%;}
	#bigPic img {width:100%;height:auto;}
	ul#thumbs { display:none !important;}
}

* html ul#thumbs {
	right: 89px;
}

ul#thumbs li {
	float: left;
	margin: 0 5px 0 0;
	width: auto;
	position: relative;
	height: 10px;
	width: 10px;
}

ul#thumbs li a {
	display: block;
	height: 10px;
	width: 10px;
	cursor: pointer;	
}

ul#thumbs li a {
	background: url(../images/bg_circle.png) no-repeat left top;
	behavior: url("common/js/iepngfix.htc");
	font-size: 0;
	text-indent: -9999px;	
}

ul#thumbs li span {
	background: url(../images/bg_circle_o.png) no-repeat left top;
	behavior: url("common/js/iepngfix.htc");
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	height: 10px;
	float: left;
	width: 10px;
	text-indent: -9999px;	
}

ul#thumbs li.active span {
	display: block;
	height: 10px;
	width: 10px;	
}

.b-covid{
	box-sizing: border-box;
	position: absolute;
	z-index: 5;
	background:rgba(255,255,255,.5);
	color:#222;
}
.b-covid b{
	display:flex;
	align-items: center;
	line-height:1;
	font-size:1.25em;
	margin-bottom:.2em;
}
.b-covid b::before{
	content:"";
	display: block;
	background:url(../images/mask.png) center center / contain no-repeat;
	margin-right:.5em;
}
.b-covid p{
	font-weight: bold;
	line-height:1.7;
}

@media screen and (max-width: 959px) {
	.b-covid{
		width:94%;
		left:3%;
		bottom:3vw;
		padding:1.8vw 3.8vw;
		font-size:1.7vw;
	}
	.b-covid b::before{
		width:3.3vw;
		height:3.3vw;
	}
	.b-covid p br{
		display: none;
	}
}
@media screen and (min-width: 960px) {
	.b-covid{
		top:45px;
		left:0;
		padding:15px 25px;
		font-size:12px;
	}
	.b-covid b::before{
		width:26px;
		height:26px;
	}
}

/* # pageBody
---------------------------------------------------------------------------- */

div#pageBody {	
	background: #d9d9d9;
	clear: both;
	padding: 0;
	min-width: 1200px;
	width: auto;
	width: expression(document.body.clientWidth < 1202? "1200px": "auto" );
}

div#pageBody div.pageBodyInner {	
	margin: 0 auto;
	position: relative;
	width: 1000px;
}
@media screen and (max-width: 959px) {
	div#pageBody { min-width:100%;	}
	div#pageBody div.pageBodyInner { width:100%;	}
}

div.topic {
	float: left;
	width: 460px;
}

div.topic h2 {
	float: left;
	width: 74px;
}

div.topic div.topicList {
	float: right;		
	overflow: hidden;
	width: 372px;
	z-index: 99999;
}

div.topic div.topicList li {	
	vertical-align: middle;
}

div.topic div.topicList li div {
	padding: 6px 0 6px 0;
}

* html div.topic div.topicList li div {
	padding: 8px 0 4px 0;
}

div.topic div.topicList strong {
	float: left;
	display: block;
	font-size: 10px;
	font-weight: bold;
	padding: 2px 15px 0 0;
	vertical-align: middle;
}

div.topic div.topicList span {
	vertical-align: middle;
}

div.topic div.topicList a {
	color: #000000;
	text-decoration: none;
}

div.topic div.topicList a:hover {
	text-decoration: underline;
}

* html div.topic div.topicList strong {
	padding: 0 13px 0 0;
}

ul.bannerList {	
	float: right;
	height: 1px;
	width: 540px;
	z-index: 50;
	position: relative;
}

ul.bannerList li {
	position: absolute;
	bottom: 1px;
	left: 0;
	width: auto;
	width: 176px;	
}

* html ul.bannerList li {
	bottom: -30px;
}

ul.bannerList li a {
	display: block;
	width: 176px;
	text-indent: -9999px;
	height: 159px;
	margin-top: 20px;
	cursor: pointer;
}

ul.bannerList li.banner02 {
	left: 176px;
}

ul.bannerList li.banner03 {
	left: 343px;
}

ul.bannerList li.banner01 a {
	background: url(/images/img_banner01_o.png) no-repeat left top;
	behavior: url("/common/js/iepngfix.htc");
	margin-right: -9px;
	position: relative;	
	width: 185px;
	z-index: 20;
}

ul.bannerList li.banner02 a {
	background: url(/images/img_banner02_o.png) no-repeat left top;
	behavior: url("/common/js/iepngfix.htc");
	margin-right: -9px;
	margin-left: -9px;
	width: 185px;
	position: relative;
	z-index: 20;
}

ul.bannerList li.banner03 a {
	background: url(/images/img_banner03_o.png) no-repeat left top;
	behavior: url("/common/js/iepngfix.htc");
	margin-right: -9px;
	margin-left: -9px;
	position: relative;
	width: 185px;
}
@media screen and (max-width: 959px) {
	ul.bannerList,ul.bannerList *{box-sizing: border-box;}
	ul.bannerList {
		width:100%; height:32vw; float: none; padding-left:1.5%;
		position:static;
		display: flex; justify-content: center;
		background:#2e2017 !important;
	}
	ul.bannerList li{ width:31%;height:89%; position: static; margin-top:3vw; }
	ul.bannerList li a{
		width:100% !important; height:100% !important;
		position:static;
		margin-right:0 !important; margin-left:0 !important; margin-top:0 !important;
		background-size: contain !important;
	}
}


/* # footer
---------------------------------------------------------------------------- */

div#footer {
	background: none;
	padding: 16px 0 22px 0;
}

div#footer p {
	float: left;
}

div#footer p.facebook {
	padding: 0 10px 0 0;
	width: 30px;
}

div#footer p.contact {
	width: 400px;
}

div#footerInner p#copyright {
	padding-right: 1px;
	padding-top: 5px;
}	

/* # clearfix
---------------------------------------------------------------------------- */

div.topic div.topicList li,
ul.bannerList, 
div.topic,
div#pageBody div.pageBodyInner {
	zoom: 1;
}

div.topic div.topicList li:after,
ul.bannerList:after, 
div.topic:after,
div#pageBody div.pageBodyInner:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	line-height: 0;
	visibility: hidden;
}

@media screen and (max-width: 959px) {
	#gNav{ display: none;}
}