@charset "UTF-8";

body {
	}
#wrapper {
	}
	
.photoArea {
	position: absolute;	
	top: 0;
	bottom: 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center 0;
	width: calc(100% - 670px);
	height: 100%;
	display: flex;         
	/*justify-content: center;*/
	align-items: center; 
	opacity: 0;
	-webkit-transition: all ease 1s;
	-moz-transition: all ease 1s;
	-ms-transition: all ease 1s;
	-o-transition: all ease 1s;
	transition: all ease 1s;
	-webkit-transform: translateY(600px);
	-moz-transform: translateY(600px);
	-ms-transform: translateY(600px);
	-o-transform: translateY(600px);
	transform: translateY(600px);
	overflow: hidden;
	z-index: -1;
	pointer-events: none;
	}
	.photoArea .photoArea_bg {
		position: absolute;
		left: 50%;
		top: 50%;
		-webkit-transition: all ease 1s;
		-moz-transition: all ease 1s;
		-ms-transition: all ease 1s;
		-o-transition: all ease 1s;
		transition: all ease 1s;
		-webkit-transform: translateY(-700px);
		-moz-transform: translateY(-700px);
		-ms-transform: translateY(-700px);
		-o-transform: translateY(-700px);
		transform: translateY(-700px);
		pointer-events: none;
		}
	
.contArea {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 600px;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	-webkit-transition: all ease 1s;
	-moz-transition: all ease 1s;
	-ms-transition: all ease 1s;
	-o-transition: all ease 1s;
	transition: all ease 1s;
	}
	.contArea .contInner {
		position: relative;
		width: 600px;
		padding-bottom: 150px;
		}
		.cont_exp {
			width: 282px;
			margin: 0 auto;
			opacity: 1;
			}
		.cont_exp.hide {
			opacity: 0;
			}

.on .photoArea {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
	z-index: 1;
	}
	.on .photoArea img {
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
		}
.on .contArea {
	opacity: 1;
	}
	
.sectionRight .photoArea { left: 670px; right: 0; }
.sectionRight .contArea { left: 70px; }

.sectionLeft .photoArea { left: 70px; right: 670px; }
.sectionLeft .contArea { right: 0; }

#section3 .contArea .contInner { padding-top: 360px; }
#section12 .photoArea {
	width: 550px;
	left: 170px;
	}
#section12 .contArea {
	width: calc(100% - 550px - 170px);
	right: 0;
	}
	
.nombre {
	display: block;
	position: absolute;
	right: 20px;
	bottom: 20px;
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
	z-index: 100;
	}
	.nombre .nombre1 {
		color: #000000;
		font-weight: bold;
		}
	.nombre .nombre_sep {
		margin: 0 5px;
		color: #000000;
		}
	.nombre .nombre2 {
		color: #333;
		font-weight: bold;
		}
		
	.nombre_w .nombre1 {
		color: #FFF;
		font-weight: bold;
		}
	.nombre_w .nombre_sep {
		margin: 0 5px;
		color: #FFF;
		}
	.nombre_w .nombre2 {
		color: #CCC;
		font-weight: bold;
		}



/* VIEW ITEM */
.btn_viewitem {
	display: block;
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 55px;
	margin-left: -23px;
	}
	.btn_viewitem svg {
		opacity: 1;
		width: 55px;
		height: 60px;
		}
.btn_viewitem.open {
	background: url(../images/il_btn_close.svg) no-repeat center bottom / 48px auto;
	}
.btn_viewitem_black.open {
	background: url(../images/il_btn_close_b.svg) no-repeat center bottom / 48px auto;
	}
	
	.btn_viewitem.open svg {
		opacity: 0;
		}
	
	.btn_viewitem .cls-1 {
		opacity: 0;
		-webkit-transform: translateX(-20px);	
		-moz-transform: translateX(-20px);	
		-ms-transform: translateX(-20px);	
		-o-transform: translateX(-20px);	
		transform: translateX(-20px);	
		-webkit-transform-origin: 50% 50%;
		-moz-transform-origin: 50% 50%;
		-ms-transform-origin: 50% 50%;
		-o-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		fill: #FFF;
		}
	.btn_viewitem .cls-2 {
		-webkit-transform: scale(0);
		-moz-transform: scale(0);
		-ms-transform: scale(0);
		-o-transform: scale(0);
		transform: scale(0);
		-webkit-transform-origin: 50% 50%;
		-moz-transform-origin: 50% 50%;
		-ms-transform-origin: 50% 50%;
		-o-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		fill: #FFF;
		}
	.btn_viewitem .cls-3 {
		-webkit-transform-origin: 50% 50%;
		-moz-transform-origin: 50% 50%;
		-ms-transform-origin: 50% 50%;
		-o-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		opacity: 0;
		fill: #FFF;
		}
	.section.on .btn_viewitem .cls-1 {
		-webkit-animation: showCaption .5s ease 1.0s 1 normal forwards;
		-moz-animation: showCaption .5s ease 1.0s 1 normal forwards;
		-ms-animation: showCaption .5s ease 1.0s 1 normal forwards;
		-o-animation: showCaption .5s ease 1.0s 1 normal forwards;
		animation: showCaption .5s ease 1.0s 1 normal forwards;
		}
	.section.on .btn_viewitem .cls-2 {
		-webkit-animation: circleUp .6s ease .5s 1 normal forwards;
		-moz-animation: circleUp .6s ease .5s 1 normal forwards;
		-ms-animation: circleUp .6s ease .5s 1 normal forwards;
		-o-animation: circleUp .6s ease .5s 1 normal forwards;
		animation: circleUp .6s ease .5s 1 normal forwards;
		}
	.section.on .btn_viewitem .cls-3 {
		-webkit-animation: showPass1 .3s ease .5s 1 normal forwards;
		-moz-animation: showPass1 .3s ease .5s 1 normal forwards;
		-ms-animation: showPass1 .3s ease .5s 1 normal forwards;
		-o-animation: showPass1 .3s ease .5s 1 normal forwards;
		animation: showPass1 .3s ease .5s 1 normal forwards;
		}
	.btn_viewitem_black .cls-1,
	.btn_viewitem_black .cls-2,
	.btn_viewitem_black .cls-3 { fill: #000; }
	
	
@keyframes circleUp {
	0% { transform: scale(0); opacity: 1; }
	70% { transform: scale(1); opacity: 1; }
	100% { transform: scale(1); opacity: 0; }
	}
@-webkit-keyframes circleUp {
	0% { -webkit-transform: scale(0); opacity: 1; }
	70% { -webkit-transform: scale(1); opacity: 1; }
	100% { -webkit-transform: scale(1); opacity: 0; }
	}
	
@keyframes showPass1 {
	0% { opacity: 0; }
	70% { opacity: 0; }
	100% { opacity: 1; }
	}
@-webkit-keyframes showPass1 {
	0% { opacity: 0; }
	70% { opacity: 0; }
	100% { opacity: 1; }
	}
	
@keyframes showCaption {
	0% { opacity: 0; }
	50% { opacity: 1; }
	100% { opacity: 1; transform:translateX(0);}
	}
@-webkit-keyframes showCaption {
	0% { opacity: 0; }
	50% { opacity: 1; }
	100% { opacity: 1; transform:translateX(0); }
	}

	
.section .turnAnime {
	-webkit-transition: all ease-out .8s;
	-moz-transition: all ease-out .8s;
	-ms-transition: all ease-out .8s;
	-o-transition: all ease-out .8s;
	transition: all ease-out .8s;
	-webkit-transform: translateY(-20px);
	-moz-transform: translateY(-20px);
	-ms-transform: translateY(-20px);
	-o-transform: translateY(-20px);
	transform: translateY(-20px);
	opacity: 0;
	}
.section.on .turnAnime {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
	}
		
.section p {
	
	}


.section	 {
	height: 100%;
	overflow: hidden;
	}
	.section .clock {
		width: 130px;
		height: 70px;
		margin: 0 auto 32px;
		text-align: left;
		overflow: hidden;
		}
		.section .cl_am {
			display: block;
			float: left;
			width: 15px;
			margin: 0 15px 0 0;
			}
		.section .cl_time {
			display: block;
			float: left;
			width: 25px;
			height: 40px;
			margin: 0 2px 0 0;
			}
		.section .cl_tc {
			display: block;
			float: left;
			width: 15px;
			height: 40px;
			margin: 0 2px 0 0;
			}
	.section h2 {
		display: block;
		height: 38.5px;
		margin: 0 0 25px;
		text-align: left;
		}
	.section h3 {
		display: block;
		height: 15.5px;
		margin: 0 0 12px;
		text-align: left;
		}
	.section p.leadCP {
		display: block;
		width: 282px;
		margin: 0 auto;
		color: #000;
		font-weight: normal;
		font-size: 14px;
		line-height: 1.75;
		text-align: justify;
		text-justify: inter-ideograph;
		}



#section1 	{	background-color: #FFF; }
#section2	{	background-color: #F1F9FD; }
#section3	{	background-color: #F1F9FD; }
#section4	{	background-color: #F1F9FD; }
#section5	{	background-color: #E3F2FC; }
#section6	{	background-color: #C6E6F9; }
#section7	{	background-color: #B8E0F7; }
#section8	{	background-color: #AAD9F6; }
#section9	{	background-color: #9CD3F4; }
#section10	{	background-color: #9CD3F4; }
#section11	{	background-color: #ADD0E4; }
#section12	{	background-color: #BDCCD4; }
#section13	{	background-color: #CEC9C4; }
#section14	{	background-color: #DEC6B4; }
#section15	{	background-color: #EFC2A4; }
#section16	{	background-color: #FFBF94; }
#section17	{	background-color: #A2918C; }
#section18	{	background-color: #446284; }
#section35	{	background-color: #000; }

	#section1 h1 {
		display: block;
		position: absolute;
		top: 16px;
		left: 18px;
		width:192px;
		height: 48px;
		font-size: 8px;
		overflow: hidden;
		}
		#section1 h1 em {
			display: block;
			width: 102px;
			height: 0;
			margin: 0 0 8px 2px;
			padding-top: 30px;
			background: url(../../common/images/h_title.svg) no-repeat 0 0 / 102px auto;
			line-height: 30px;
			overflow: hidden;
			}
		#section1 h1 span {
			display: block;
			width: 159px;
			height: 0;
			padding-top: 10px;
			background: url(../../common/images/h_subtitle.svg) no-repeat 0 0 / 159px auto;
			line-height: 10px;
			overflow: hidden;
			}
	#section1 h2 {
		display: block;
		width: 475px;
		height: 160px;
		margin: 0 20px 24px 60px;
		}
	#section1 p.leadCP {
		padding-top: 140px;
		color: #1B7EC7;
		}
	#section1 p.noticeCP {
		display: block;
		position: absolute;
		left: 5%;
		bottom: 3%;
		color: #FFF;
		font-size: 10px;
		line-height: 1.1;
		text-align: left;
		}


#section2 {}
	#section2 .cl_tt {
		display: block;
		width: 94px;
		margin: 0 0 0;
		}	
	#section2 h2 {
		width: 115px;
		height: 37.5px;
		}
	#section2 h3 {
		width: 240px;
		height: 15.5px;
		}		

#section3 {}
	#section3 video {
		position: absolute;
		right: 0;
		bottom: 0;
		top:0;
		left:70px;
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
		background-color: black; /* in case the video doesn't fit the whole page*/
		background-image: none; /* our video */
		background-position: center center;
		background-size: contain;
		object-fit: cover; /*cover video background */
		}	
		
	#section3 .btn_viewitem {
		display: block;
		position: absolute;
		left: 50%;
		bottom: 50px;
		width: 55px;
		margin-left: -23px;
		}
		
		
#section4 {}
	#section4 .cl_tt {
		display: block;
		width: 57px;
		margin: 0 0 0;
		}
	#section4 h2 {
		display: block;
		width: 267.5px;
		}
	#section4 h3 {
		display: block;
		width: 268.5px;
		height: 15.5px;
		}	
	
#section5 {}
	#section5 .cl_tt {
		display: block;
		width: 132.5px;
		}
	#section5 h3 {
		display: block;
		width: 258px;
		}	

#section6 {}
	#section6 .cl_tt {
		display: block;
		width: 132.5px;
		}
	#section6 h3 {
		display: block;
		width: 288px;
		}	
		
#section7 {}
	#section7 .cl_tt {
		display: block;
		width: 132.5px;
		}
	#section7 h3 {
		display: block;
		width: 289.5px;
		}	
		
#section8 {}
	#section8 .cl_tt {
		display: block;
		width: 132.5px;
		}
	#section8 h3 {
		display: block;
		width: 271.5px;
		}	
		
#section9 {}
	#section9 .cl_tt {
		display: block;
		width: 132.5px;
		}
	#section9 h3 {
		display: block;
		width: 269.5px;
		}	

#section10 {}
	#section10 .cl_tt {
		display: block;
		width: 132.5px;
		}
	#section10 h3 {
		display: block;
		width: 244px;
		}	
		
#section11 {}
	#section11 .cl_tt {
		display: block;
		width: 132.5px;
		}
	#section11 h3 {
		display: block;
		width: 246px;
		}	
		
#section12 {}
	#section12 .cl_tt {
		display: block;
		width: 132.5px;
		}
	#section12 h3 {
		display: block;
		width: 229px;
		}	

#section13 {}
	#section13 h2 {
		display: block;
		width: 260px;
		height: 40.5px;
		}
	#section13 h3 {
		display: block;
		width: 286px;
		}
		
#section14 {}
	#section14 h3 {
		display: block;
		width: 252.5px;
		}
		
#section15 {}
	#section15 h3 {
		display: block;
		width: 241.5px;
		}

#section16 {}
	#section16 h3 {
		display: block;
		width: 283px;
		}
		
#section17 {}
	#section17 h3 {
		display: block;
		width: 257px;
		}
	#section17 p.leadCP {
		color: #FFF;
		margin-bottom: 8px;
		}
	#section17 p.noticeCP {
		display: block;
		color: #FFF;
		font-size: 10px;
		line-height: 1.3;
		text-align: left;
		}

#section18 {}
	#section18 h2 {
		display: block;
		width: 255.5px;
		}
	#section18 h3 {
		display: block;
		width: 283px;
		}
	#section18 p.leadCP {
		color: #FFF;
		}
	
		
#section19 {
	background-color: #000;
	}
#credit1 {
	display: block;
	width: 54px;
	height: 16px;
	margin: 0 auto 70px;
	}
#section19 #credit_box1 {
	width: 740px;
	margin: 0 auto;
	overflow: hidden;
	}
	#section19 #credit3 {
		color: #FFF;
		}
		#section19 #credit3 h4 {
			font-size: 16px;
			}
		#section19 #credit3 p {
			font-size: 14px;
			}
		#section19 #credit3 a {
			display: block;
			margin-bottom: .8em;
			font-size: 14px;
			color: #B5B5B5;
			text-decoration: none;
			}
	
	#credit2 {
		display: block;
		float: left;
		width: 341px;
		height: 290px;
		margin: 0 auto 70px;
		}
	#credit3 {
		display: block;
		float: right;
		width: 341px;
		height: 248px;
		margin: 0 auto 70px;
		}
	#credit4 {
		display: block;
		width: 100%;
		margin: 0 auto 20px;
		text-align: center;
		color: #FFF;
		font-size: 11px;
		}

	

/* プリローダー */
#preloaderScreen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #FFF;
	-webkit-animation: fadeOut .8s ease-in 2s 1 normal forwards;
	-moz-animation: fadeOut .8s ease-in 2s 1 normal forwards;
	-ms-animation: fadeOut .8s ease-in 2s 1 normal forwards;
	-o-animation: fadeOut .8s ease-in 2s 1 normal forwards;
	animation: fadeOut .8s ease-in 2s 1 normal forwards;
	z-index: 8000;
	overflow: hidden;
	}
	#preloaderScreen span {
		position: absolute;
		display: block;
		top: 50%;
		left: 16%;
		width: 300px;
		margin: -100px 0 0 0;
		}
				
@keyframes fadeOut {
	0% {opacity: 1}
	100% {opacity: 0; z-index:-1}
	}
@-webkit-keyframes fadeOut {
	0% {opacity: 1}
	100% {opacity: 0; z-index:-1}
	}