﻿*{
	font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",YuGothic,'Yu Gothic',Verdana,Meiryo,sans-serif;
	-webkit-box-sizing : border-box;
	-moz-box-sizing : border-box;
	-o-box-sizing : border-box;
	-ms-box-sizing : border-box;
	box-sizing : border-box;
}
.clear{
	clear : both;
}
.hidden_word{
	color : rgba(255,255,255,0) !important;
	font-size : 1pt !important;
	letter-spacing : -100px !important;
	text-indent : -2000em !important;
	line-height : 0;
}
img{
	border : 0px;
}
a{
	color:#8b1319;
}
a:hover{
	color:#ff1d4c;
}
a:hover img{
	filter : alpha(opacity=60);
	-webkit-opacity : 0.60;
	-moz-opacity : 0.60;
	-o-opacity : 0.60;
	-ms-opacity : 0.60;
	opacity : 0.60;
	transition : 0.1s;
}
body{
	margin : 0px;
	padding : 0px;
	vertical-align : top;
	text-align : center;
	background:#ffffff;
}
.base{
	width: 100%;	
	max-width: 1000px;
	margin : 0 auto;
	padding : 0px;
	vertical-align : top;
	text-align : center;
	background-image: url('../i/b_stripe_a.png');
	background-color:#f5911e;
	background-position: 0 0;
	background-repeat: repeat;
}
.base:after{
	content : "";
	clear : both;
	display : block;
}

header{
	width: 100%;
	max-width: 1000px;
	height: 100px;
	margin:0;
	padding : 0;
	background:#ffffff;
	overflow:hidden;
}

#menu,
#menu ul{
	width: 100%;
	max-width: 1000px;
	height: 85px;
	margin:0;
	padding:0;
}
#menu ul{
	list-style:none;
	position:relative;
	overflow:hidden;
}
#menu ul:after{
	content : "";
	clear : both;
	display : block;
}
#menu li,
#menu li a{
	height: 85px;
	margin :0;
	padding:0;
	background-position: 0 0;
	background-repeat: no-repeat!important;
	display : block;
	overflow:hidden;
}
#menu li{
	top:0px;
	float: left;
}
#menu li:nth-child(1) {
	width: 190px;
	margin:0 20px 0 20px!important;
}
#menu li:nth-child(1) img {
	width: 100%;
	filter : alpha(opacity=40);
	-webkit-opacity : 0.40;
	-moz-opacity : 0.40;
	-o-opacity : 0.40;
	-ms-opacity : 0.40;
	opacity : 0.40;
}
#menu li:nth-child(2) a {
	width: 120px;
	background-image: url('../i/menu_a.png');
}
#menu li:nth-child(6) a {
	width: 180px;
	background-image: url('../i/menu_b.png');
}
#menu li:nth-child(7) a {
	width: 170px;
	background-image: url('../i/menu_c.png');
}
#menu li a:hover {
	background-position: 0 -100px;
}
#menu li a.now {
	background-position: 0 -100px;
}
#menu li a{
	color : rgba(255, 255, 255, 0);
	background: rgba(255, 255, 255, 0);
}

.headbar {
	z-index : 9000;
	width: 100%;
	height: 30px;
	position: fixed;
	left: 0;
	top: -30px;
	margin:0;
	padding:0;
	background: #302519;
	overflow:hidden;
}
.headbar ul {
	margin:0;
	padding:0;
	list-style:none;
	position:relative;
	display: block;
}
.headbar ul:after{
	content : "";
	clear : both;
	display : block;
}
.headbar li {
	z-index : 9002;
	float: left;
	margin:0;
	padding:0;
}
.headbar li{
	height: 30px;
	margin:0 0 0 10px;
	padding:5px 10px;
	font-size : 13px;
	font-weight:600;
	color : #ffffff;
	position:relative;
	display : block;
	overflow:hidden;
}
.headbar li a{
	font-size : 13px;
	font-weight:600;
	color : #ffffff;
	text-decoration : none;
	position:relative;
	display : block;
	transition : 0.3s;
	overflow:hidden;
}
.headbar li a:hover{
	filter : alpha(opacity=60);
	-webkit-opacity : 0.60;
	-moz-opacity : 0.60;
	-o-opacity : 0.60;
	-ms-opacity : 0.60;
	opacity : 0.60;
	transition : 0.3s;
}

.itemmenu{
	width: 100%;
	max-width: 1000px;
	margin : 0;
	padding : 0;
	position:relative;
	overflow:hidden;
}
h1{
	z-index : 100!important;
	width: 100%;
	max-width: 1000px;
	height: 190px;
	margin : 15px 0 0 0;
	padding : 0;
	background-color:#f5911e;
}
h1 > img{
	z-index : 51;
	width: 240px;
	margin : 33px auto;
	padding : 0;
	position:relative;
	transition : 0.5s;
}
.itemmenu > ul{
	z-index : 50;
	width: 720px;
	height: 300px;
	margin : 0 auto;
	padding : 0;
	list-style:none;
	position:relative;
	overflow:hidden;
}
.itemmenu > ul:after{
	content : "";
	clear : both;
	display : block;
}
.itemmenu > ul > li{
	width: 240px;
	margin : 0;
	padding : 0;
	float: left;
}
.itemmenu > ul > li > a{
	margin : 0;
	padding : 0;
}
.itemmenu > ul > li > a > img{
	width: 100%;
	margin : 0;
	padding : 0;
}
.itemmenu > .bottom{
	width: 100%;
	height: 115px;
	margin : 0;
	padding : 0;
	background-color:#f5911e;
	transition : 0.5s;
}
.itemmenu > img{
	z-index : 49;
	width: 100%;
	top: 0;
	left: 0;
	margin : 0;
	padding : 0;
	position:absolute;
	transition : 0.3s;
}

.box{
	width: 100%;
	max-width: 1000px;
}

footer{
	width: 100%;
	max-width: 1000px;
	margin:0 auto;
	padding:0;
	background-color:#f9bd78;
	background-image: url('../i/footer_back.png');
	background-size: contain;
	background-position: bottom right;
	background-repeat: no-repeat;
	position:relative;
	overflow:hidden;
}
.contact{
	width: 100%;
	margin:60px 0 80px 170px;
	padding:0;
	color:#302519;
	font-size:22px;
	vertical-align : top;
	text-align : left;
	transition : 0.3s;
}
.contact img{
	width: 160px;
	display : block;
}
.contact div{
	margin:10px 0 0 0!important;
	font-size:16px;
	line-height: 1.2;
	display : block;
}
footer .stripebox{
	width: 100%;
	height:20px;
	bottom:0px;
	margin:0 auto;
	background-image: url('../i/b_stripe_b.png');
	background-position: 0 0;
	background-repeat: repeat;
	position:absolute;
	display : block;
}

.bottom{
	width: 100%;
	max-width: 1000px;
	height: 20px;
	margin:0 auto;
	background:#000000;
	position:relative;
	display : block;
}

br.pc { display:block; }
br.sp { display:none; }


.sptitle,
header input,
header label,
#menu ul li span{
	display:none;
}
@media (max-width: 1020px) {
	h1{
		height: auto;
		max-height: 190px;
	}
	h1 > img{
		width: 50vw;
		max-width: 240px;
		margin : 0 auto;
		display : block;
	}

	.itemmenu > ul{
		width: 96vw;
		max-width: 720px;
		height: auto;
		max-height: 300px;
	}
	.itemmenu > ul > li{
		width: 32vw;
		max-width: 240px;
	}
	.itemmenu > img{
		filter : alpha(opacity=0);
		-webkit-opacity : 0.00;
		-moz-opacity : 0.00;
		-o-opacity : 0.00;
		-ms-opacity : 0.00;
		opacity : 0.00;
	}
	.itemmenu > .bottom{
		width: 100%;
		height: 0;
		margin : 0;
		padding : 0;
		background-color:#f5911e;
	}
}
@media (max-width: 920px) {
	.sptitle{
		height: 54px;
		display:block;
		background-color:#ffffff;
		vertical-align : top;
		text-align : right;
		overflow:hidden;
	}
	.sptitle img{
		height: 54px;
		margin : 0 4vw 0 0;
		padding : 0;
	}

	.headbar,
	.main_note img.pc,
	.main_note .note.web img{
		display:none;
	}
	.main_note img.sp{
		display:initial;
	}
	header label{
		display:block;
	}
	header{
		width: 100%;
		height: auto;
		margin:0;
		display:inline;
	}
	#menu li:nth-child(5) {
		display:initial;
	}
	#menu{
		background-image:none;
	}
	#menu ul{
		position:initial;
		overflow:initial;
	}
	#menu,
	#menu ul,
	#menu li,
	#menu li a,
	#menu li img{
		width: initial;
		height: initial;
		overflow:initial;
		float: none;
	}
	#menu li{
		top:initial;
		position:initial;
	}
	#menu ul li img{
		display:none;
	}
	#menu ul li span{
		display:initial;
	}
	#button{
		z-index : 9998;
		position: fixed;
		top: 0;
		left : 0;
		width: 40px;
		height: 54px;
		outline: none;
		border: none;
		background: #302519;
		color: #ffffff;
		font-size: 12px;
		cursor: pointer;
	}
	#button .line {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 28px;
		height: 2px;
		border-radius : 2px;
		background: #ffffff;
		-webkit-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
	}
	#button .line_01 { top: 8px;left: 6px; }
	#button .line_02 { top: 18px;left: 6px; }
	#button .line_03 { top: 28px;left: 6px; }
	#button.is-active .line_01 {
		top: 18px;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#button.is-active .line_02 {
		opacity: 0;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#button.is-active .line_03 {
		top: 18px;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
	}
	.button_name{
		position: absolute;
		top: 34px;
		left: 0px;
		width: 40px;
		text-align: center;
	}
	
	input#navTgl,
	label#button,
	label.close{
		position : fixed;
	}
	#menu{
		z-index : 9980;
		position : fixed;
		overflow : auto;
		top : 0;
		left : 0;
		height : 100%;
		padding : 0px;
		margin : 0px;
		transform : translateX(-100%);
		-webkit-transform : translateX(-100%);
		-moz-transform : translateX(-100%);
		transition : transform 0.3s;
		-webkit-transition : -webkit-transform 0.3s;
		-moz-transition : -moz-transform 0.3s;
	}
	#navTgl:checked ~ #menu{
		transform : translateX(0);
		-webkit-transform : translateX(0);
		-moz-transform : translateX(0);
	}
	#menu_sp_back{
		position:fixed;
		width:100%;
		height:100%;
		left:0;
		top:0;
		background:#ffffff;
		filter:alpha(opacity=60);
		-moz-opacity:0.60;
		opacity:0.60;
		z-index : -1;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;
		opacity: 0;
	}
	#navTgl:checked ~ #menu_sp_back{
		position:fixed;
		width:100%;
		height:100%;
		left:0;
		top:0;
		background:#ffffff;
		filter:alpha(opacity=60);
		-moz-opacity:0.60;
		opacity:0.60;
		z-index:100;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;
		opacity: 0.7;
	}
	#menu li a{
		color : #ffffff;
		width : 100%;
		margin : 0 0 5px 0 ;
		padding : 12px 45px;
		transition : 0.4s;
		background: #302519;
		text-decoration : none;
		border-radius: 5px;
		display : block;
	}
	#menu li a:hover {
		color : #ffffff;
		transition : 0.4s;
		background : #8b1319;
	}
	
	#menu ul{
		padding : 0px;
		margin: 59px 0 0 5vw ;
	}
	#menu li,
	#menu li a{
		width: 90vw!important;
		background-image: none!important;
	}
	#menu li{
		list-style-type : none;
	}
	#menu li:first-child{
		margin : 59px 0 0 0 ;
	}

	.contact{
		margin:40px 0 60px 0;
		font-size:20px;
		text-align : center;
	}
	.contact img{
		width: 50vw;
		max-width: 160px;
		margin:0 auto;
	}
}
