@charset "UTF-8";
.clearfix {
	overflow:hidden;
	height:100%;
}
#wrapper {
	width: 100%;
	height: auto;
	margin: 0 auto;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background-color: #000;
	color: #fff;
	position: relative;
}
.wraprs{
	max-width: 1020px;
	margin-right: auto;
	margin-left: auto;
	clear: both;
}
.wraprsh{
	width: 100%;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	clear: both;
	background-color: rgba(0,0,0,0.8);
	position: fixed !important;  
    position: absolute;  
    top: 0;  
    z-index: 999;
    display: block;
}
a, a:hover, a:active, a:visited{
	text-decoration: none;
	color: #fff;
	-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
	-o-transition: all .6s ease-in-out;
	transition: all .6s ease-in-out;
}
a:hover{
	filter: alpha(opacity=50);
	-moz-opacity: .5;
	-webkit-opacity: .5;
	opacity: .5;
}
a img:hover {
	filter: alpha(opacity=50);
	-moz-opacity: .5;
	-webkit-opacity: .5;
	opacity: .5;
}
a img{
	-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
	-o-transition: all .6s ease-in-out;
	transition: all .6s ease-in-out;
}
header {
	max-width: 1020px;
	padding: 20px 0;
	margin-right: auto;
	margin-left: auto;
	clear: both;
}
h1 {
	height: 60px;
	padding: 10px;
	position: absolute;
	box-sizing: border-box;
	right: 0;
}
h1 img {
	height: 100%;
	width: auto;
	z-index: 999;
}
#main_nav {
	float: left;
	padding: 10px 11%;
	width: 78%;
	font-family: 'Raleway', sans-serif;
}
#main_nav li {
	float: left;
	width: 33%;
	text-align: center;
}
h2 {
	position: relative;
	text-align: center;
	font-family: 'Domine', serif;
	font-size: 1.6em;
}
#concept h2 span {
	position: relative;
	z-index: 2;
	display: inline-block;
	margin: 0 2.5em;
	padding: 0 1em;
	background-color: #000;
	text-align: left;
}
#concept h2::before {
	position: absolute;
	top: 50%;
	z-index: 1;
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background-color: #ccc;
}
#story h2 span, #photo h2 span {
	position: relative;
	z-index: 2;
	display: inline-block;
	margin: 0 2.5em;
	padding: 0 1em;
	background-color: #fff;
	text-align: left;
}
#story h2::before, #photo h2::before {
	position: absolute;
	top: 50%;
	z-index: 1;
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background-color: #000;
}
h2{
	margin: 0 0 40px 0;
}
#mainimg {
	width: 100%;
	background-image: url(../img/mainbg.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#mainimg img{
	padding: 100px 0 50px 0;
	width: 70%;
}
#copyimg {
	width: 100%;
}
#copyimg img{
	padding: 0 0 100px 0;
	width: 70%;
}
#jyu-box, #go-box{
	width: 40%;
	padding: 0 5%;
	float: left;
	font-size: 0.9em;
}
#jyu-box h3 img, #go-box h3 img{
	width: 20%;
	padding: 0 40%;
}
#story{
	color: #000;
}
#story h3{
	width: 80%;
	padding: 0 10%;
}
#story h3 img{
	width: 100%;
}
#story #no01{
	background-image: url(../img/story01-bg.png);
	background-repeat: no-repeat;
	background-position: left 180px;
	margin: 0 0 50px 0;
}
#story #no01 p{
	margin-left:50%;
	width: 50%;
}
#story #no02{
	background-image: url(../img/story02-bg.png);
	background-repeat: no-repeat;
	background-position: right 180px;
	margin-bottom: 150px;
	margin: 0 0 50px 0;
	min-height: 500px;
}
#story #no02 p{
	margin-right:50%;
	margin-left: 12%;
	width: 38%;
}
#story #no03{
	background-image: url(../img/story03-bg.png);
	background-repeat: no-repeat;
	background-position: left 180px;
	margin: 0 0 50px 0;
	min-height: 500px;
}
#story #no07{
	background-image: url(../img/story07-bg.png);
	background-repeat: no-repeat;
	background-position: left 180px;
	margin: 0 0 50px 0;
	min-height: 500px;
}
#story #no03 p, #story #no07 p, #story #no09 p{
	margin-left:50%;
	width: 50%;
}
#story #no09{
	background-image: url(../img/story09-bg.png);
	background-repeat: no-repeat;
	background-position: left 180px;
	margin: 0 0 50 0;
	min-height: 500px;
}

#story #no06{
	background-image: url(../img/story06-bg.png);
	background-repeat: no-repeat;
	background-position: right 180px;
	margin: 0 0 50px 0;
	min-height: 500px;
}
#story #no06 p{
	margin-right:50%;
	width: 50%;
}
#story #no08{
	background-image: url(../img/story08-bg.png);
	background-repeat: no-repeat;
	background-position: right 180px;
	margin: 0 0 50px 0;
	min-height: 500px;
}
#story #no08 p{
	margin-right:50%;
	width: 50%;
}
#story #no10{
	background-image: url(../img/story10-bg.png);
	background-repeat: no-repeat;
	background-position: right 180px;
	margin: 0 0 50px 0;
	min-height: 500px;
}
#story #no10 p{
	margin-right:50%;
	width: 50%;
}
#story #no04{
	background-image: url(../img/story04-bg.png);
	background-repeat: no-repeat;
	background-position: right 180px;
	margin: 0 0 50px 0;
	min-height: 500px;
}
#story #no04 p{
	margin-right:50%;
	width: 50%;
}
#story #no05{
	margin: 0 20px 50px 0;
	min-height: 500px;
	text-align: right;
}
#story #no05 p{
	margin-left:0%;
	width: 100%;
}
.toggle_box{
    display:none;
    margin-top:20px;
}
.btn{
			background: -webkit-gradient(top, rgba(255,255,255,0.5), white); /* Chrome,Safari */
			background: -moz-linear-gradient(top, rgba(255,255,255,0.5), white); /* Firefox */
			background: -o-linear-gradient(top, rgba(255,255,255,0.5), white); /* Opera */
			background: -ms-linear-gradient(top, rgba(255,255,255,0.5), white); /* IE10 */
			filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#80ffffff,EndColorStr=#ffffffff); /* IE9- */
			text-align: right;
			background-image: linear-gradient( 180deg, rgba(255,255,255,0.5), white );	/* 上から下へ：[白色半透明]から[白色]へグラデーション */
			padding-top: 8.5em;	/* ボタンの上側でグラデーションを見せる距離(長さ) */
			margin-top: -8.5em;	/* ボックスを上側に重ねる距離(長さ) */
			position: relative;	/* ボックス全体を上に重ねるために必要 */
	width: 50%;
	float: right;
}
#no04 .btn,#no06 .btn,#no08 .btn,#no10 .btn{
	float: left !important;
}
.active{
			background: none !important;
			background-image: none !important;
}
.btn:hover{
    cursor:pointer;
}
.btn_img {
	background-image: url(../img/more.svg);
	background-repeat: no-repeat;
	background-size: contain;
	min-height: 50px;
	background-position: right;
	display: block;
	  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
		}
.active .btn_img {
	background-image: url(../img/more2.svg);
		}
.btn_img2 {
	background-image: url(../img/more.svg);
	background-repeat: no-repeat;
	background-size: contain;
	min-height: 50px;
	background-position: left;
	display: block;
	  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
		}
.active .btn_img2 {
	background-image: url(../img/more2.svg);
		}
.photoitem{
	margin: 0;
	padding: 0;
	width: 33.3%;
	height: auto;
	float:left;
	display: block;
}
.photoitem img{
	width: 100%;
	vertical-align: bottom;
}
.cs{
	text-align: center;
	font-size: 1.2em;
	color: #ccc;
}
footer {
	padding: 20px 0 !important;
	clear: left;
	width: auto ;
}
footer #address{
	float: left;
	width: 50%;
	padding: 30px 0 0 20px;
	background-repeat:no-repeat;
	font-size: .83em;
	line-height:1.5em;
	box-sizing: border-box;
}
footer .fb-page{
	float: left;
	width: 50%;
	padding: 0 10px 0 0;
	background-repeat:no-repeat;
	font-size: .83em;
	line-height:1.5em;
	box-sizing: border-box;
}