@charset "UTF-8";

/*-----------------------------------------------------
10px = 77%     11px = 85%     12px = 93%     13px = 100%
14px = 108%    15px = 116%    16px = 123.1%  17px = 131%
18px = 138.5%  19px = 146.5%  20px = 153.9%  21px = 161.6%
22px = 167%    23px = 174%    24px = 182%    25px = 189%
26px = 197%
------------------------------------------------------*/

/* 共通
=======================================*/
body {
	font:14px "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","游ゴシック",YuGothic,"メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	*font-size:small; 	/* for IE */
	*font:x-small; 		/* for IE in quirks mode */
	color:#FFF;
	line-height:160%;
	background:url("../img/common/bg.png") repeat;
	-webkit-text-size-adjust:100%;	/* iOS */
}

a{
	color:#FFF;
	text-decoration:none;
}

ul{
	list-style:none outside;
}

.sp_none{
	display:block !important;
}

.pc_none{
	display:none !important;
}

.o480_none{	/* 481px以上 */
	display:none !important;
}

.u480_none{　/* 480px以下 */
	display:block !important;
}

.o768_none{	/* 769px以上 */
	display:none !important;
}


a.readmore{
	transition:0.5s;
}

a:hover.readmore{
	opacity:0.5;
}

@media screen and (max-width:480px){
	a.readmore{
		display:block;
		width:100%;
		text-align:center;
	}
}

/* フェードイン */
.fadein{
	opacity:0;
	transition:all 0.5s;
}

.fadein.second{
	-moz-transition-delay:0.5ms;
	-webkit-transition-delay:0.5ms;
	-o-transition-delay:0.5ms;
	-ms-transition-delay:0.5ms;
	/*-moz-transition-delay:0.6s;*/
}

.fadein.scrollin{
	opacity:1;
}

/* 下から上へフェードイン */
.fadein_up{
	opacity:0;
	transform:translate(0px, 100px);
	transition:all 0.6s;
}

.fadein_up.scrollin{
	opacity:1;
	transform:translate(0px, 0px);
}

/* 上から下へフェードイン */
.fadein_down{
	opacity:0;
	transform:translate(0px, -100px);
	transition:all 0.9s;
}

.fadein_down.scrollin{
	opacity:1;
	transform:translate(0px, 0px);
}

.fadein_down.second{
	-moz-transition-delay:0.3s;
	-webkit-transition-delay:0.3s;
	-o-transition-delay:0.3s;
	-ms-transition-delay:0.3s;
}

.fadein_down.third{
	-moz-transition-delay:0.6s;
	-webkit-transition-delay:0.6s;
	-o-transition-delay:0.6s;
	-ms-transition-delay:0.6s;
}

/* 左から右へスライドイン */
.slidein_right{
	opacity:0;
	transform:translate(-100px, 0px);
	transition:all 0.9s;
}

.slidein_right.scrollin{
	opacity:1;
	transform:translate(0px, 0px);
}

/* 右から左へスライドイン */
.slidein_left{
	opacity:0;
	transform:translate(100px, 0px);
	transition:all 0.9s;
}

.slidein_left.scrollin{
	opacity:1;
	transform:translate(0px, 0px);
}

#sidenavi{
	position: fixed;
	top: 20%;
	right: 0px;
	z-index:99;
}

/* 画面幅768px以下
=======================================*/
@media screen and (max-width:768px){
	.sp_none{
		display:none !important;
	}

	.pc_none{
		display:block !important;
	}
	
	.o768_none{
		display:block !important;
	}
}

/* 画面幅480px以下
=======================================*/
@media screen and (max-width:480px){
	.u480_none{
		display:none !important;
	}
	
	.o480_none{
		display:block !important;
	}
	
	#sidenavi{
		display:none;
	}
}

/* ヘッダー
---------------------------------------*/
header{
	position:fixed;
	top:0;
	z-index:100;
	height:auto;
	width:100%;
	background-color:#000;
}

header.down{
	opacity:1;
	transform:translate(0px, 0px);
}

header div{
	width:960px;
	height:100px;
	margin:0 auto;
	overflow:hidden;
	box-sizing:border-box;
}

header div h1{
	float:left;
	margin:10px 0 0 5px;
}

header div ul.language{
	float:right;
	display:block;
	overflow:hidden;
	margin-top:40px;
}

header div ul.language li{
	float:left;
}

header div ul.language li a{
	transition:0.5s;
}

header div ul.language li a:hover{
	opacity:0.5;
}

header div nav#spnavi{
	display:none;
}


/* 画面幅768px未満
=======================================*/
@media screen and (max-width:768px){
	header{
		position:relative;
	}
	
	header div{
		overflow:visible;
		height:auto;
	}
	
	header div h1{
		float:none;
		height:100px;
		margin-top:0;
		position:relative;
		top:0;
	}
	
	header div h1 a img{
		width:80%;
		max-width:419px;
		position:absolute;
		bottom:2px;
	}
	
	header div ul.language{
		display:none;
	}
	
	header div{
		width:100%;
	}
	
	header div nav#spnavi{
		display:block;
	}

	header div nav#spnavi #switch{
		position:absolute;
		top:54px;
		right:10px;
		width:30px;
		height:30px;
		cursor:pointer;
		margin-left:auto;
	}

	header div nav#spnavi #switch:before {
		content:"";
		position:absolute;
		border-top:5px solid #FFFFFF;
		border-bottom:15px double #FFFFFF;
		width:30px;
		height:5px;
	}
	
	header div nav#spnavi #switch:before,
	header div nav#spnavi #switch:after{
		content:"";
		position:absolute;
	}
	
	header div nav#spnavi ul{
		display:none;
		background:url("../img/common/bg.png") repeat;
		border-top:1px solid #333;
	}
	
	header div nav#spnavi ul li{
		box-sizing:border-box;
		width:100%;
		border-bottom:1px solid #333;
	}
	
	header div nav#spnavi ul li.parent > a{
		display:block;
		width:100%;
		padding:16px;
		box-sizing:border-box;
	}
	
	header div nav#spnavi ul li.parent.language{
		padding:14px 6px 8px 16px;
	}
	
	header div nav#spnavi ul li.parent.language a{
		display:inline;
		width:auto;
		padding:0;
	}
	
	header div nav#spnavi ul li.parent ul{
		border-top:1px solid #666;
	}
	
	header div nav#spnavi ul li.parent ul li{
		background-color:rgba(255,255,255,0.2);
		border-bottom:1px solid #666;
	}
	
	header div nav#spnavi ul li.parent ul li a{
		display:block;
		width:100%;
		padding:16px;
		box-sizing:border-box;
	}
}

/* 画面幅480px未満
=======================================*/
@media screen and (max-width:480px){
	header div h1 a img{
		bottom:18px;
		width:84%;
	}
}

/* メイン画像・グローバルナビ
---------------------------------------*/
div#main_visual{
	width:100%;
	height:240px;
	position:relative;
	top:100px;
	background-size:cover;
	background-position:center center;
}

div#main_visual img#photo{
	display:none;
}
	
div#main_visual video#video{
	display:block;
}

div#main_visual img.bg,
div#main_visual video.bg{
	width:100%;
}

div#main_visual nav#gnavi{
	width:100%;
	height:85px;
	position:absolute;
	bottom:0;
	z-index:10;
}

div#main_visual nav#gnavi.up{
	opacity:1;
	transform:translate(0px, 0px);
}

div#main_visual nav#gnavi ul{
	width:920px;
	margin:0 auto;
}
	
div#main_visual nav#gnavi ul li{
	float:left;
	height:85px;
}

div#main_visual nav#gnavi ul li a{
	transition:0.5s;
}

div#main_visual nav#gnavi ul li a:hover{
	opacity:0.5;
}

div#main_visual nav#gnavi ul li a span{
	display:none;
}

div#main_visual nav#gnavi ul li.parent ul{
	display:none;
}

/* 画面幅960px未満
=======================================*/
@media screen and (max-width:960px){
	div#main_visual{
		width:960px;
	}
}

/* 画面幅768px未満
=======================================*/
@media screen and (max-width:768px){
	div#main_visual{
		width:100%;
		height:180px;
		top:0;
	}
	
	div#main_visual nav#gnavi{
		display:none;
	}
}

/* 画面幅480px未満
=======================================*/
@media screen and (max-width:480px){
	div#main_visual{
		height:120px;
	}
	
	div#main_visual img#photo{
		display:block;
	}
	
	div#main_visual video#video{
		display:none;
	}
}

/* コンテンツ
---------------------------------------*/
article{
	width:100%;
	position:relative;
}

article section{
	width:960px;
	margin:0 auto;
	top:100px;
	position:relative;
}

article section div.title{
	margin:34px auto 0 auto;
	width:737px;
	height:162px;
	position:relative;
	z-index:30;
}

article#history section div.title{
	margin-top:64px;
}

article section div.title h1{
	position:relative;
	z-index:10;
	text-align:center;
}

article section div.title h1 img{
	margin-top:60px;
	width:100%;
}

article section div.title img.bg{
	position:absolute;
	top:0px;
	left:0px;
}



/* 画面幅768px以下
=======================================*/
@media screen and (max-width:768px){
	article section{
		width:100%;
		top:0;
	}
	
	article section div.title{
		width:100%;
		height:auto;
		max-width:737px;
	}
	
	article section div.title h1{
		margin-top:0;
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
	}

	article section div.title h1 img{
		margin-top:0;
		position:relative;
		top:50%;
		transform:translateY(-50%);
		-moz-transform:translateY(-50%);
		-webkit-transform:translateY(-50%);
		-o-transform:translateY(-50%);
		-ms-transform:translateY(-50%);
	}
	
	article section div.title img.bg{
		width:100%;
		max-width:737px;
		position:relative;
		top:auto;
		left:auto;
	}
}

/* Chrome, iOS向けハック */
@media screen and (max-width:768px) and (-webkit-min-device-pixel-ratio:0) {
	article section div.title h1 img{
		margin-top:70px;
	}
}


/* 画面幅480px以下
=======================================*/
@media screen and (max-width:480px){
	article section{
		width:100%;
		top:0;
	}

	article section div.title h1 img{
		top:0;
		transform:translateY(50%);
		-moz-transform:translateY(50%);
		-webkit-transform:translateY(50%);
		-o-transform:translateY(50%);
		-ms-transform:translateY(50%);
	}
}

/* Chrome, iOS向けハック */
@media screen and (max-width:480px) and (-webkit-min-device-pixel-ratio:0) {
	article section div.title h1 img{
		margin-top:0;
	}
}


/* フッター
---------------------------------------*/
footer{
	width:100%;
	height:540px;
	position:relative;
	top:100px;
}

footer div{
	width:100%;
	height:460px;
	text-align:center;
	background-image:url("../img/common/bg_footer.png");
	/*background-size:cover;*/
	background-position:center center;
	background-size:1920px 460px;
	background-repeat:no-repeat;
	padding-top:40px;
	box-sizing:border-box;
}

footer div h2{
	font-size:182%;
}

footer div p{
	margin:10px 0 25px 0;
}

footer small{
	display:block;
	height:80px;
	line-height:80px;
	text-align:center;
	background-color:#000;
	font-size:108%;
}

/* 画面幅1920px以上
=======================================*/
@media screen and (min-width:1920px){
	footer{
		background-size:cover;
	}
}

/* 画面幅960px未満
=======================================*/
@media screen and (max-width:960px){
	footer{
		width:960px;
	}
}

/* 画面幅768px未満
=======================================*/
@media screen and (max-width:768px){
	footer{
		width:100%;
		top:0;
	}
}

/* ページTOPボタン
---------------------------------------*/
#pagetop{
	position:fixed;
	right:15px;
	bottom:15px;
	z-index:100;
	display:none;
	cursor:pointer;
}