@charset "UTF-8";

/*----------------------------------------------------
Copyright (C) 2015- Hiforest T.okawada　
http://www.hiforest.com/
----------------------------------------------------*/


article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,div,p,ul,li{
	display:block;
	box-sizing:border-box;
	border-collapse:collapse;
}
html{width:100%; height:100%; margin:0; padding:0;}
body{
	width:100%; height:100%; margin:0; padding:0;
	background-color:#ffffff;
	background-image:url(../img/indexbg.jpg);
	text-align:center; font-size:16px; line-height:22px; font-family:Noto Sans JP, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif, Verdana, Arial, Helvetica;
}

h1{
	display:block;
	width:600px;
	margin:0 0;
	padding:0 0 100px;
	position:fixed;
	top:calc(50% - 50px);
	left:calc(50% - 300px);
	z-index:2;
	overflow:hidden;
	background-image:url(../img/sitelogo.png);
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:contain;
	overflow:hidden;
}
@media(max-width:600px){
	h1{
		width:100%;
		padding:0 0 16.66%;
		top:44%;
		left:0px;
	}
}
h1 span{
	display:block;
	width:100%;
	margin:0 0;
	padding:0 0;
	position:absolute;
	top:0;
	left:0;
	font-size:12px;
	line-height:20px;
	opacity:0;
}

img {border:none;}

div.catwalk_outer{
	display:block;
	width:100%;
	height:100%;
	margin:0 0;
	padding:0 0;
	position:fixed;
	top:0;
	left:0;
	z-index:0;
	overflow:hidden;
}
div.catwalk{
	display:block;
	width:180px;
	height:180px;
	margin:0 auto;
	padding:0 0;
	position:absolute;
	top:calc(50% - 90px);
	left:calc(50% - 90px);
	z-index:1;
	overflow:hidden;
}
div.catwalk img{
	display:block;
	width:100%;
	height:100%;
	margin:0;
	-webkit-transition:.3s ease-in-out;
	transition:.3s ease-in-out;
}
#cat2{ transform: scale(-1, 1); }
#cat4{ transform: scale(-1, 1); }

p.copyright{
	display:block;
	width:100%;
	height:20px;
	margin:0 auto;
	padding:0 0;
	position:fixed;
	bottom:12px;
	left:0;
	z-index:2;
	overflow:hidden;
	font-size:10px;
	line-height:20px;
	color:#333333;
	text-align:center;
}

ul.topmenu{
	display:block;
	width:300px;
	margin:0 auto;
	padding:0 0;
	position:fixed;
	top:calc(50% + 50px);
	left:calc(50% - 150px);
	z-index:2;
	overflow:hidden;
}
ul.topmenu li{
	display:block;
	width:300px;
	margin:0 auto;
	padding:0 0;
}
ul.topmenu li a{
	display:block;
	width:100%;
	margin:0 auto;
	padding:0 0;
	font-size:16px;
	line-height:26px;
	font-weight:700;
	color:#454545;
	text-decoration:none;
	text-align:center;
	-webkit-transition:.3s ease-in-out;
	transition:.3s ease-in-out;
}
ul.topmenu li a:hover{
	color:#82ae46;
}

div.cbox{
	display:none;
	width:calc(100% - 80px);
	height:calc(100% - 80px);
	margin:0 auto;
	padding:0 0;
	position:fixed;
	top:40px;
	left:40px;
	z-index:10;
	overflow:hidden;
	border-radius:20px;
	background-image:url(../img/cboxbg.png);
	background-position:95% 40px;
	background-repeat:no-repeat;
	background-size:120px;
	background-color:#fbfaf5;
	box-shadow:2px 2px 4px gray;
}
div.cbox_inner{
	display:block;
	width:calc(100% - 60px);
	height:calc(100% - 100px);
	margin:0 auto;
	padding:0 0 15px;
	font-size:14px;
	line-height:22px;
	font-weight:500;
	color:#454545;
	text-align:left;
	overflow:auto;
	-webkit-transition:.3s ease-in-out;
	transition:.3s ease-in-out;
}

a.btn_close{
	position:absolute;
	width:4px;
	height:24px;
	margin:0 0;
	padding:0 0;
	top:22px;
	right:32px;
	background-color:#454545;
	transform:rotate(-45deg);
}
a.btn_close:hover{
	background-color:#82ae46;
}
a.btn_close::after{
	content: "";
	position: absolute;
	top:10px;
	left:-10px;
	width:24px;
	height:4px;
	background-color:#454545;
}
a.btn_close:hover::after{
	background-color:#82ae46;
}

div.cbox h2{
	display:block;
	width:calc(100% - 60px);
	margin:30px auto 0 30px;
	padding:0 0 15px;
	font-size:22px;
	line-height:32px;
	font-weight:700;
	color:#454545;
	text-align:left;
	-webkit-transition:.3s ease-in-out;
	transition:.3s ease-in-out;
}
div.cbox p{
	display:block;
	width:96%;
	margin:0 auto;
	padding:0 0 15px;
	font-size:14px;
	line-height:22px;
	font-weight:500;
	color:#454545;
	text-align:left;
}

ul.hisotory_list{
	display:block;
	width:96%;
	margin:0 auto;
	padding:0 0 15px;
}
ul.hisotory_list:after{
	display:table;
	content:"";
	visibility:visible;
	box-sizing:border-box;
	border-collapse:collapse;
	clear:both;
}
ul.hisotory_list li{
	display:block;
	width:calc(12.49% - 20px);
	margin:0 10px 10px;
	padding:0 0;
	float:left;
}
@media(max-width:1920px){
	ul.hisotory_list li{
		width:calc(16.66% - 20px);
	}
}
@media(max-width:1280px){
	ul.hisotory_list li{
		width:calc(24.99% - 20px);
	}
}
@media(max-width:768px){
	ul.hisotory_list li{
		width:calc(49.99% - 20px);
	}
}
ul.hisotory_list li img{
	width:100%;
	margin:0 auto;
	box-shadow:2px 2px 4px gray;
}
ul.hisotory_list li span{
	display:block;
	width:100%;
	min-height:15em;
	margin:0 10px 10px;
	padding:0 0;
}
@media(max-width:1920px){
	ul.hisotory_list li span{
		min-height:12em;
	}
}
@media(max-width:1280px){
	ul.hisotory_list li span{
		min-height:12em;
	}
}
@media(max-width:768px){
	ul.hisotory_list li span{
		min-height:6em;
	}
}
ul.hisotory_list li a{
	font-size:12px;
	line-height:18px;
	font-weight:500;
	color:#454545;
	text-align:left;
}
ul.hisotory_list li a:hover{
	color:#82ae46;
}



.tbox {position:absolute; display:none; padding:14px 17px; z-index:9999999999;}
.tinner {padding:15px; -moz-border-radius:5px; border-radius:5px; background-color:#ffffff; background-image:url('../img/tinybox/preload.gif'); background-repeat:no-repeat; background-position:50% 50%; overflow:hidden; }
.tmask {position:absolute; display:none; top:0px; left:0px; height:100%; width:100%; background:#000; z-index:999999999;}
.tclose {position:absolute; top:0px; right:0px; width:30px; height:30px; cursor:pointer; background:url('../img/tinybox/close.png') no-repeat;}
.tclose:hover {background-position:0 -30px;}
.tclosec{position:absolute; top:25px; right:30px; width:15px; height:15px; cursor:pointer; background:url('../img/tinybox/batsu.png') no-repeat;}
.tclosec:hover {background-position:0 0;}
.tcontent iframe{
	width:calc(100% - 20px);
}
.tcontent div{
	width:100%;
	margin:0 auto;
	padding:0;
	text-align:center;
	font-size:10px;
	line-height:13px;
}
.tcontent div:hover{
	filter:alpha(opacity=80) !important; -moz-opacity:0.8 !important; opacity:0.8 !important;
}
.tcontent div a{color:#000000; text-decoration:none;}
#mskbg {background:#666666;}