@charset "UTF-8";

.area1{
/*	position: relative;*/
	margin-top: -2.75vw;
}

.mv{
	width: 100vw;
	height: 150vh;
	background-size: 100%;
	position:fixed;
	opacity:1.0;
	transition: 0.7s;
	animation: mv_zoom 6.0s infinite linear;
	pointer-events: none;
}

.scrollWrap:hover{
	transition: 0.4s;
	transform:scale(0.90);
	opacity:1.0;
}


.scrollWrap{
	opacity:0;
}

.scrollWrap img:nth-child(1){
	position: absolute;
    left: 50%;
    top: 0.75vw;
    width: 0.625vw!important;
    margin-left: -0.3125vw;
	animation: scrollAct1 2.5s infinite;
}
.scrollWrap img:nth-child(2){
	position: absolute;
    left: 50%;
    top: -1.75vw;
    width: 0.625vw!important;
    margin-left: -0.3125vw;
	animation: scrollAct1 2.5s infinite;
}

.scrollWrap.on{
	opacity:1.0;
	transition: 0.7s;
	transition-delay: 3.0s;
}

.scrollWrap.off{
	opacity:0;
	transition: 0.7s;
}

@keyframes scrollAct1{
	0%{margin-top:0;}
	5%{margin-top:-0.15vw;}
	35%{margin-top:2.6vw;}
	100%{margin-top:2.6vw;}
}

body:after{
	content: "";
	position: fixed;
	left:0;
	bottom:0;
	width: 100vw;
	height: 0.55555vw;
	background: #312928;
	z-index:1000;
}

.mv img{
	width: 100vw;
}

.mv1,.mv2,.mv3{
	position:absolute;
	left:0;
	top:0;
	width: 100vw;
	height: 100vh;
}



.mv.bgoff{
	opacity:0;
	transition: 0.7s;
}

.mv .obj{position: absolute; transform:scale(1.05); transition: 1.0s; opacity: 0;}
.mv .obj img{width:100%; }
.mv .on .obj{transform:scale(1.0); transition: 1.5s; opacity:2.0; margin-top:0; transition-delay:0.5s;}
.mv .on .bg_front, .mv .on .bg_back{transform:scale(1.0); transition: 1.5s; transition-delay:0.5s; opacity:1.0;  margin-top:0;}

.mv .obj1{width: 55.34722222vw; left: 48.5vw; top: 46vw; margin-top:-1vw;}
.mv .obj2{    width: 45.763889vw;
    left: 55.1vw;
    top: 6.9vw;}
.mv .obj3{ width: 20.833333vw; left: -3.6vw; top:29.8vw; margin-top:-1.5vw; animation: 4.0s obj3 infinite;}
/*
@keyframes obj3{
	0%{ transform: rotate(0);}
	50%{ transform: rotate(1deg);}
	100%{ transform: rotate(0);}
}
*/

.mv .obj4{
	width: 70.208333vw;
    left: -3.5vw;
    top: 23vw;
	margin-top: -2vw;
}
.mv .obj5{
	width: 38.05555555vw;
	left: 0vw;
    top: 3vw;
}
.mv .obj6{    width: 8.68055555vw; left: 10.8vw; top: 5.5vw; animation: 3.0s obj6 infinite;}

/*
@keyframes obj6{
	0%{transform: rotate(0);}
	5%{transform: rotate(2deg);}
	10%{transform: rotate(-2deg);}
	15%{transform: rotate(0);}
	100%{transform: rotate(0);}
}
*/

.mv .obj7{width: 8.68055555vw; left: 50.8vw; top: 22vw; animation: 2.5s obj7 infinite;}

/*
@keyframes obj7{
	0%{transform: rotate(0);}
	50%{transform: rotate(3deg);}
	100%{transform: rotate(0);}
}
*/



/*
.mv3{
	opacity:1.0;
	transition: 0.7s;
	z-index:50;
}

.mv3 .obj{opacity:1.0; transform: scale(1.0); margin-top:0!important;}

.mv3.on{
	opacity: 1.0;
	transition: 0.7s;
}
*/

/*
.mv3 .bg_front,.mv3 .bg_back{
	opacity: 1.0!important;
}
*/

.mv3 .bg_front,.mv3 .bg_back{
	width: 114vw!important;
    left: -1.4vw!important;
    top: -11.3vw!important;
}

.mv1 .bg_front{
    width: 119.563889vw!important;
    top: -5vw!important;
    left: -4.5vw!important;
}
.mv1 .bg_back{
    width: 119.563889vw!important;
    top: -5vw!important;
    left: -2vw!important;
}

.mv .obj2_1{
	width: 61.25vw;
	left:-8.2vw;
	top: 6.3vw;
} 
.mv .obj2_2{
	width: 41.38888vw;
    left: 40.6472222vw;
    top: 37.416667vw;
}

.mv .obj2_3{
	width: 31.7361111vw;
	left: 72.5694444vw;
	top: 38.0833333vw;
}

.mv .obj2_4{
	width: 111.66666vw;
	left: -8.88888vw;
	top: 26.983333vw;
}

.mv .obj2_5{
    width: 47.22222vw;
    left: 42.638889vw;
    top: 33.097222vw;}

.mv .obj2_6{
	width: 58.8194444vw;
	left: 43.8vw;
	top:-2vw;
}

.mv2 .bg_front,.mv2 .bg_back{
	top: -3.6vw!important;
}

.mv .obj3_1{
    width: 60.13888vw;
    left: 7vw;
    top: 5.6vw;
}

.mv .obj3_2{
    width: 111vw;
    top: 32vw;
    left: -1.5vw;
}
.mv .obj3_3{
	width: 84.0277777vw;
	top: 19.8vw;
	left:-1.7vw;
}

.mv .obj3_4{
    width: 67.9166666vw;
    left: 43.5vw;
    top: 8vw;
}

.mv:before{
	content:"";
	position:absolute;
	left:0;
	top:50vw;
	width:100vw;
	height:100vh;
	background: #a48a4c;
	opacity:0;
	transition: 1.0s;
}

.mv2.on:before{
	content:"";
	position:absolute;
	left:0;
	top:50vw;
	width:100vw;
	height:100vh;
	background: #4e8d95;
	opacity:0;
	transition: 1.0s;
}

.mv3.on:before{
	content:"";
	position:absolute;
	left:0;
	top:50vw;
	width:100vw;
	height:100vh;
	background: #883c17;
	opacity:0;
	transition: 1.0s;
}


.mv1:after{
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:100vw;
	height:150vh;
	background: #a48a4c;
	opacity:0;
	transition: 1.0s;
	z-index:100;
}

.mv2:after{
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:100vw;
	height:150vh;
	background:#883c17;
	opacity:0;
	transition: 1.0s;
	z-index:100;
}

.mv3:after{
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:100vw;
	height:150vh;
	background:#4e8d95;
	opacity:0;
	transition: 1.0s;
	z-index:100;
}


.mv.on{
	filter:blur(3px);
	transition:0.5s;
}

.mv.on .mv1.on:after,.mv.on .mv2.on:after,.mv.on .mv3.on:after{
	opacity: 0.6;
	transition: 0.5s;
	transition-delay: 0.5s;
}

.mv .bg_front,.mv .bg_back{
	width: 113vw;
    left: -9.5vw;
    top: -13.6vw;
	position: absolute;
	opacity:0;
	transition: 2.0s;
}

.mv .bg_front img,.mv .bg_back img{
	width: 100%;
}



.ttl{
	position: absolute;
	transform: scale(0.95);
	opacity:0;
	right:7vw;
	width: 20.34722222vw;}

.ttlinner{
	background: url("../img/index/ttl_bg.svg") no-repeat;
	background-size: contain;
	width: 20.3472222vw;
	height: 45vw;
}

.scrollWrap{
	position: fixed;
	right:7vw;
	bottom:-2.9vw;
	z-index: 2000;
	width: 20.3472222vw;
}

.scrollWrap .scroll{
	position: relative;
	right: 0;
	background: #312928;
	width: 5.83333333vw;
	height: 5.83333333vw;
	z-index:2000;
	border-radius: 50%;
	overflow: hidden;

}


@media screen and (min-height:50vw) {
	.on .ttl{
		opacity:1.0;
		transition: 1.5s;
		transition-delay:2.5s;
		top: 6.6vh;
		transform: scale(0.9);

	}
	.scrollWrap .scroll{
		transform:scale(0.9);
	}
	.scrollWrap{
		transform: scale(1.0);
   		display: flex;
   		justify-content: center;
	}
	
	.ttl2{
	background: url("../img/index/second_ttl_bg.svg") no-repeat;
	width: 15.7638888888vw;
	height: 31.736111111vw;
	background-size: cover;
	padding-left: 4.34444vw;
	padding-top: 3.33333vw;
    position: absolute;
    right: 9.7vw;
    bottom: 0;
	transform: scale(1.0);}
.ttl3{
	background: url("../img/index/second_ttl_bg.svg") no-repeat;
	width: 15.7638888888vw;
	height: 31.736111111vw;
	background-size: cover;
	padding-left: 4.34444vw;
	padding-top: 3.33333vw;
    position: absolute;
    right: 9.7vw;
    bottom: 0;
	transform: scale(1.0);
}
.ttl4{
	background: url("../img/index/second_ttl_bg.svg") no-repeat;
	width: 15.7638888888vw;
	height: 31.736111111vw;
	background-size: cover;
	padding-left: 7vw;
	padding-top: 3.33333vw;
    position: absolute;
    right: 9.7vw;
  	top: 100vh;	
	transform: scale(1.0);
}
	
}
@media screen and (max-height:49.9vw) {
	.scrollWrap{
		transform: scale(0.8);
/*
		right: 18%;
	    margin-right: -4.21666vw;
*/
	}
.on .ttl{
	opacity:1.0;
	top:4vh;
	transition: 1.5s;
	transition-delay:2.5s;
	right:7vw;
/*	margin-right: -10.17vw;*/
	transform: scale(0.8);
	}
	
	.scrollWrap .scroll{
		transform:scale(0.8);
	}
	.scrollWrap{
		transform: scale(1.0);
   		display: flex;
   		justify-content: center;
	}
	
.ttl2{
	background: url("../img/index/second_ttl_bg.svg") no-repeat;
	width: 15.7638888888vw;
	height: 31.736111111vw;
	background-size: cover;
	padding-left: 4.34444vw;
	padding-top: 3.33333vw;
    position: absolute;
    right: 9.7vw;
    bottom: 0;
/*	transform: scale(0.8);*/
}
.ttl3{
	background: url("../img/index/second_ttl_bg.svg") no-repeat;
	width: 15.7638888888vw;
	height: 31.736111111vw;
	background-size: cover;
	padding-left: 4.34444vw;
	padding-top: 3.33333vw;
    position: absolute;
    right: 9.7vw;
    bottom: 0;
/*	transform: scale(0.8);*/
}
.ttl4{
	background: url("../img/index/second_ttl_bg.svg") no-repeat;
	width: 15.7638888888vw;
	height: 31.736111111vw;
	background-size: cover;
	padding-left: 7vw;
	padding-top: 3.33333vw;
    position: absolute;
    right: 9.7vw;
  	top: 100vh;
/*	transform: scale(0.8);*/
	}

}

.ttl h1 img{
    width: 13vw;
    margin-left: 3.72vw;
    margin-top: 4vw;
}

.ttl ul{
    margin-left: 3.8vw;
    margin-top: 6.4vw;
}

.ttl ul li{
	height: 1.111111vw;
	margin-bottom:1.6666vw;	
    opacity:1.0;
    transition: 0.4s;
    cursor: pointer;
}

.ttl ul li:hover{
    opacity:0.7;
    transition: 0.4s;
}

.ttl li img{
	height: 1.111111vw;
}
.area2{	
	padding-top: 200vh;
	height: 150vh;
	position: relative;
}
.area2,.area3,.area4{
	opacity:0;
	margin-top: 2vw;
	pointer-events: none;
}
.area2.on,.area3.on,.area4.on{
	opacity:1.0;
	margin-top:0;
	transform: scale(1.00);
	transition: 0.7s;
}
.area2 img,.area3 img{
	width: 7.0138888vw;
}

.area4 img{
	width: 1.527777vw;
}

.area3,.area4{
	padding-top: 100vh;
	height: 150vh;
	position: relative;
}
.area4{
	padding-bottom: 100vh;
}



.area5 .inner{
	position: fixed;
	left:0;
	top:0;
	background: url("../img/index/area5Bg.jpg") no-repeat;
	background-size: cover;
	height: 100vh;
    width: 100vw;
    overflow: hidden;
	opacity:0;
	transition: 0.4s;
	transform: scale(1.05);
}

.area5.on .inner{
	opacity:1.0;
	transition: 1.2s;
	transform: scale(1.0);
}

.area5 .decoTxt img{
	height:5.208333333vw;
}

.area5{
	height: 250vh;
	pointer-events: none;
}

.area5 video{
	min-width: 100vw;
	min-height: 100vh;
}

.area5 .decoTxt figure{
	margin-bottom: 0.5vw;
}

.area5 .decoTxt figure:nth-child(1){animation: slide1 350s infinite linear;}
.area5 .decoTxt figure:nth-child(2){animation: slide1 420s infinite linear;}
.area5 .decoTxt figure:nth-child(3){animation: slide3 350s infinite linear;}
.area5 .decoTxt figure:nth-child(4){animation: slide3 400s infinite linear;}
.area5 .decoTxt figure:nth-child(5){animation: slide5 350s infinite linear;}
.area5 .decoTxt figure:nth-child(6){animation: slide5 350s infinite linear;}
.area5 .decoTxt figure:nth-child(7){animation: slide7 350s infinite linear;}
.area5 .decoTxt figure:nth-child(8){animation: slide7 350s infinite linear;}
.area5 .decoTxt figure:nth-child(9){animation: slide9 320s infinite linear;}
.area5 .decoTxt figure:nth-child(10){animation: slide9 350s infinite linear;}
.area5 .decoTxt figure:nth-child(11){animation: slide9 450s infinite linear;}


/*
@keyframes slide1{
	0%{margin-left:0;}
	100%{margin-left: -1337vw;}
}
@keyframes slide2{
	0%{margin-left:-1337vw;}
	100%{margin-left: 0;}
}
@keyframes slide3{
	0%{margin-left:-150vw;}
	100%{margin-left: -1337vw;}
}
@keyframes slide4{
	0%{margin-left:-1237vw;}
	100%{margin-left: 0;}
}
@keyframes slide5{
	0%{margin-left:-100vw;}
	100%{margin-left: -1200vw;}
}
@keyframes slide6{
	0%{margin-left:-1337vw;}
	100%{margin-left: 0;}
}
@keyframes slide7{
	0%{margin-left:-150vw;}
	100%{margin-left: -1337vw;}
}
@keyframes slide8{
	0%{margin-left:-1237vw;}
	100%{margin-left: 0;}
}
@keyframes slide9{
	0%{margin-left:-400vw;}
	100%{margin-left: -1037vw;}
}
@keyframes base{
	0%{}
	100%{margin-left: -1037vw;}
}
*/

.area5 .txt img{
	width: 64.44444vw;
}

.area5 .txt{
    height: 28vw;
    background: #fefaf7;
    width: 100vw;
    position: absolute;
    left: 0vw;
    top: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -15vw;
	padding-left: 3vw;
/*	border-radius: 1.666666vw;*/
}

.area5 .txt img{
	position: relative;
	margin-top: -0.9vw;
}

.area5 .txt:before{
	content: "";
    position: absolute;
    left: 17.86555vw;
    top: 50%;
    background: #feb768;
    width: 0vw;
    height: 6.855555vw;
    border-radius: 0.55555vw;
    margin-top: -1.9vw;
}

.area5 .obj{
    position: fixed;
    opacity: 1.0;
    left: 0;
    top: 0;
    z-index: 10;
	height: 100vh;
}

.area5 .obj li{
	position: absolute;
}

.area5 .obj li:nth-child(1){
	left: 4.6vw;
	top: 50%;
    margin-top: 7.1vw;
}
.area5 .obj li:nth-child(1) img{
	width: 19.30555vw;
	opactiy:0;
}
.area5.on .obj li:nth-child(1) {
	animation: animView 1.5s forwards;
	animation-delay: 1.3s;
	opacity:0;
}
.area5 .obj li:nth-child(2){
    left: 77.888888vw;
    top: 50%;
    margin-top: -23vw;
}
.area5 .obj li:nth-child(2) img{
	width: 12.708333vw;
	opactiy:0;
}
.area5.on .obj li:nth-child(2) img{
	animation: animView 1.5s forwards;
	animation-delay: 1.2s;
	opacity:0;
}

@keyframes animView{
	0%{opacity:0; transform:scale(0.7) rotate(5deg);}
	25%{transform: scale(1.05) rotate(-5deg);}
	50%{opacity:1.0; transform: scale(1.0) rotate(1.0);}
	100%{opacity: 1.0;}
}

.area5.on .txt:before{
    width: 57.2vw;
	transition: 0.5s;
	transition-delay: 0.5s;

}

.area6{
	position: relative;
	width: 100vw;
	margin: 0 auto;
	opacity:0;
	background: #F7EFE8;
	padding: 8.333333vw 13.0555556vw;
}

.area6.on{
	opacity:1.0;
	transition: 0.7s;
}

.area6 strong{
	position: relative;
	margin-bottom: 1.9vw;
	display: block;
}

.area6 .section1 strong{
	margin-bottom: 2.4vw;
}

.area6 figure img{
	width: 40.2777777vw;
}

.area6 .decoTxt{
    position: absolute;
    left: 0vw;
	top: 22vw;}

.area6 .decoTxt img{
	width: 8vw;
}

.area6 .section1,.area6 .section2,.area6 .section3{
	display: flex;
}


.area6 .section3 .blockRight{
	margin-top: -0.8vw;
}

.area6 img{
	position: relative;
}
.area6 .section1{
	padding-top: 8vw;
}

.area6 .section1 strong img{
	height: 12.70833333vw;
}
.area6 .section1,.area6 .section2,.area6 .section3 {
	border-bottom: 1px solid #2b2522;
}
.area6 .section2 strong img{
	height: 5.76388888vw;
}

.area6 .blockLeft{
	margin-bottom: 2.777777vw;
	margin-right: 2.013333vw;
}
.area6 .section1 .blockLeft, .area6 .section3 .blockLeft{
	margin-left: -5vw;
}

.area6 .blockRight{
	width: 32.63888vw;
	margin-left: 1.7vw;
}

.area6 strong{
	margin-top: 5.555555vw;
}

.area6 .section4 img{
	width: 40.208333vw;
}

.ttlItem li{
	background: #36626d;
	position: relative;
	border-radius: 0.2vw;
}

.area6 .section1,.area6 .section2,.area6 .section3,.area6 .section4{
	opacity:0;
	transform: scale(1.05);
}

.area6 .section1.on,.area6 .section2.on,.area6 .section3.on,.area6 .section4.on{
	opacity:1.0;
	transform: scale(1.00);
	transition: 0.7s;
}

.area6 .section1 .ttlItem li:nth-child(1){
	position: absolute;
	width: 0;
	height: 3.19444444vw;
	left:0;
	top:2.6vw;
}

.area6 .section1 .ttlItem li:nth-child(2){
	position: absolute;
	width: 0;
	height: 2.84722222vw;
	left:5.1vw;
	top:6.7vw;
}

.area6 .section1 .ttlItem li:nth-child(3){
	position: absolute;
	width: 0;
	height: 2.84722222vw;
	left:0;
	top:10.3vw;
}

.area6 .section1.on .ttlItem li:nth-child(1){
	width: 21.73611111vw;
	transition: 0.7s;
}

.area6 .section1.on .ttlItem li:nth-child(2){
	width: 16.5277777777vw;
	transition: 0.75s;
}
.area6 .section1.on .ttlItem li:nth-child(3){
	width: 19.09722222vw;
	transition: 0.8s;
}

.area6 .section2{
	margin-top:5.1vw;
	border-bottom: 1px solid #2b2522;
}

.area6 .section2 .ttlItem li:nth-child(1){
	position: absolute;
	width: 0vw;
	height: 3.2vw;
    left: -0.3vw;
    top: -0.2vw;
}

.area6 .section2.on .ttlItem li:nth-child(1){
	width: 22.4vw;
	transition:0.7s;
}

.area6 .section2 p,.area6 .section3 p{
	width: 33.541666vw;
	margin-bottom: 2.15vw;
}

.area6 .section3 strong img{
	height: 17.152777777vw;
}

.area6 .section3{
	margin-top :5.5555vw;
	padding-bottom: 2.777777vw;
}

.area6 .section3 .ttlItem li:nth-child(1){
    position: absolute;
    width: 0;
    height: 3.65vw;
    left: -0.1vw;
    top: 2.75vw;
}

.area6 .section3 .ttlItem li:nth-child(2){
	position: absolute;
    width: 0;
	height: 3.522222vw;
    left: -0.1vw;
    top: 10.6vw;
}

.area6 .section3.on .ttlItem li:nth-child(1){
    width: 20.45vw;
	transition:0.7s;
}
.area6 .section3.on .ttlItem li:nth-child(2){
    width: 20.527778vw;
	transition:0.75s;
}

.area6 .section4{
	margin: 0 auto;
	margin-top: 5.555555vw;
	background: #fefaf7;
	border-radius: 1.66666vw;
	padding: 4.444444vw 5.555555vw;
	width: 55.0555555vw;
}

.area6 .section4 strong{
	margin-top:0;
}

.area7{
	margin-top: 8.888888vw;
	opacity:0;
}

.area7.on{
	opacity:1.0;
	transition: 0.7s;
}

.area7 h2{
	background: #383533;
    width: 0vw;
    height: 5.4166666vw;
    position: relative;
    padding-left: 6.75vw;
    padding-top: 1.38vw;
    opacity: 0;
    margin-bottom: 5.15vw;
    transform: scale(1.1);
}

.area7.on h2{
	transition: 0.7s;
	width: 40.416666666vw;
	opacity:1.0;
}

.area7 h2 img{
	height:2.5vw;
}

.area7 h2:after{
    content: "";
    position: absolute;
    left: 40.35vw;
    border: 2.7vw transparent solid;
    border-left: 2.4vw #383533 solid;
    top: 0;
	opacity:0;
}

.area7.on h2:after{
	opacity: 1.0;
	transition: 0.7s;
	transition-delay: 0.4s;
}

.area7 .block:nth-child(2) h3 img{
	width: 10.347222vw;
}
.area7 .block:nth-child(3) h3 img{
	width: 11.319444vw;
}
.area7 .block:nth-child(4) h3 img{
	width: 12.847222vw;
}

.area7 div.block{
	opacity:0;
	transform: scale(1.05);
}

.area7 div.block.on{
	opacity:1.0;
	transform: scale(1.00);
	transition: 0.7s;
}

.area7 > div{
	width: 88.88888vw;
	margin: 0 auto 4.8vw;
	display: flex;
	margin-top: 3.33333vw;
	
}

.area7 > div .txtBlock{
	margin-left: -3.88888vw;
	margin-top: 5.55555vw;
	background: #fefaf7;
	padding: 5vw;
	border-radius: 1.666666vw;
}

.area7 figure img{
	width: 56.38888888vw;
	border-radius: 1.666666vw;
}

.area7 .txtBlock p{
	margin-top: 1.11111vw;
	margin-bottom:  1.11111vw;
}

.area7 p.linkBlock{
	text-align:center;
	opacity:0;
}

.area7 p.linkBlock.on{
	opacity:1.0;
	transition: 0.7s;
}

.area7 a.link{
	position:relative;
	display:inline-block;
}
.area7 a.link:before{
	content: "";
	position: absolute;
	width: 0;
	height: 0.138888vw;
	background: #383533;
	left:0;
	bottom:0vw;
}

.area7 a.link:after{
	content: "";
	background: url("../img/common/arrowBtn.png") no-repeat;
	background-size: cover;
	background-position: 80% 20%;
	width: 1.5972222vw;
	height: 1.5972222vw;
	display: inline-block;
	margin-left: 0.8vw;
    margin-top: -0.5vw;
}

.area7 .linkBlock.on a.link:before{
	width: 100%;
	transition: 0.5s;
}

.area8 {
	transform: scale(1.05);
	opacity:0;
	text-align: center;
	margin-top: 8.8888vw;
	position: relative;
}

.area8 .decoTxt{
	position: absolute;
	left:0;
	width: 300vw;
	display: flex;
	top:14.7vw;
	animation: videoLoop 45s infinite linear;
}

.area8 .decoTxt img{
	height: 7.9861111vw;
}

@keyframes videoLoop{
	0%{	left:0;}
	100%{ left:-190vw;}
}

.area8.on{
	transform: scale(1.0);
	opacity:1.0;
	transition: 0.7s;
}

.area8 h2 img{
	height: 2.013888888vw;
}

.area8 .video > a > img{
	width: 46.666666vw;
	margin: 0 auto;
	border-radius: 1.666666vw;
}

.area8 .video{
	position: relative;
	border-radius: 1.666666vw;
	width: 46.666666vw;
	margin: 0 auto;
	overflow:hidden;
}

.area8 .video:after{
	content: "";
	background: #383533;
	width: 100%;
	height: 100%;
	position: absolute;
	left:0;
	top:0;
	opacity: 0.7;
	transition: 0.4s;
}

.area8 .video:hover:after{
	opacity:0;
	transition:0.4s;
	pointer-events: none;
}

.area8 .video p.playBtn{
	position: absolute;
    left: 43.7%;
    top: 38.8%;
	z-index:1;
	transition:0.4s;
}

.area8 .video:hover p.playBtn{
	opacity:0;
	transition: 0.4s;
}

.area8 .video p.playBtn img{
	width: 5.90277777vw;
}

.area8 h2{
	margin-bottom: 3.333333vw;
}

.area9 {
	margin-top: 8.88888vw;
	position: relative;
	transform: scale(1.05);
	opacity:0;
}

.area9.on {
	transform: scale(1.00);
	opacity:1.0;
	transition:0.7s;
}

.area9 .area4Bg{
	position: absolute;
	left:0;
	top:3.333333vw;
	background: #fefaf7;
	height: 29.652777777vw;
	width: 100vw;
}

.area9 .inner{
	margin-left: 13.0555555vw;
	display: flex;
	position: relative;
}

.area9 .inner figure{
	margin-top:-2vw;
}

.area9.on .inner figure{
	margin-top:0;
	transition:0.7s;
}


.area9 p{
	width: 32.6388888vw;
}

.area9 h2{
	position: relative;
	margin-top: 7.94444444vw;
	margin-bottom: 1.8055555vw;
}

.area9.on h2{
	margin-top: 6.94444444vw;
	transition:0.7s;
}

.area9 .ttlItem li:nth-child(1){
	position: absolute;
    width: 11.8vw;
    height: 3.847222vw;
    left: -0.1vw;
    top: 3.2vw;
}

.area9 .inner > figure img{
	width: 26.5277777vw;
	margin-right: 3.33333vw;
}

.area9 h2 img{
	position: relative;
	height: 6.666666vw;
}

.area9 p{
	margin-bottom: 1.8055555vw;
}

.area10 {
	opacity:0;
	transform: scale(1.05);
	margin-top: 6.1vw;
}

.area10.on{
	opacity:1.0;
	transform: scale(1.0);
	transition: 0.7s;
}

.area10 .inner{
	width: 100vw;
	background: #fefaf7;
	display: flex;
	align-items: center;
}

.area10 .inner .blockLeft{
	margin-left: 6.166666vw;
    margin-right: 2.166666vw;
    width: 35vw;
}

.area10 .inner .blockLeft img{
	height: 5.8333333vw;
}

.area10 .inner .blockRight{
	width: 100%;
	position: relative;
	background: #ffffff;
}

.area10 .inner .blockRight > *{
	width: 47.847222vw;
	margin: 0 auto;
}

.area10 h2{
	position: relative;
}

.area10 .inner .blockRight ul{
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 3.333333vw;
}

.area10 .inner .blockRight ul li{
	width: 15.9490740vw;
	display: flex;
    justify-content: center;
    align-items: center;
	margin-bottom: 2.7777vw;
}

.area10 .inner .blockRight ul li img{
	width: 90%;
}

.area10 .inner .blockRight > span{
	position: absolute;
    font-size: 0.6944444vw;
    right: -26.5vw;
    top: 24.65vw;
    display: inline;
}

.area10 .blockLeft h2{
	margin-bottom: 2vw;
}

.area10 .ttlItem li:nth-child(1){
    position: absolute;
    width: 11.7vw;
    height: 3.3vw;
    left: 6.3vw;
    top: -0.2vw;
}

.area10 h2 img{
	position: relative;
}

.area10 .blockRight{
	padding: 4.4444vw 0;
}

.area10 .blockRight p{
	padding-top: 3.333333vw;
	border-top: 1px solid #383533;
}

.area11 {
	display: flex;
	width: 82.6388888vw;
	margin: 8.88888vw auto 0;
}


.area11 div.block{
	margin-top:2vw;
	opacity:0;
}

.area11.on div.block:nth-child(1){
	margin-top:0;
	opacity:1.0;
	transition: 0.7s;
}
.area11.on div.block:nth-child(2){
	margin-top:0;
	opacity:1.0;
	transition: 0.7s;
	transition-delay:0.1s;
}
.area11.on div.block:nth-child(3){
	margin-top:0;
	opacity:1.0;
	transition: 0.7s;
	transition-delay:0.2s;
}


.area11 p{
	width: 22.08333333vw;
	margin-top: 2vw;
	margin-bottom: 2vw;
}

.area11 p a{
	color:#ba3b35;
	}

.area11 .block:not(:last-child){
	margin-right: 3.611111vw;
	padding-right: 3.61111vw;
	border-right: 1px solid #383533;
}

.area12{
	width: 82.63888888vw;
	margin: 8.8888vw auto 0;
	text-align: center;
	background: #fefaf7;
	border-radius: 1.66666vw;
	padding: 3.2vw 0 4.444444444vw;
	transform: scale(1.05);
	opacity:0;
}

.area12 p.decoTxt img{
	height: 7.9861111vw;
}

.area12.on{
	transform:scale(1.0);
	opacity: 1.0;
	transition: 0.7s;
}

.area12 h2{
	margin-top: -4.5vw;
	margin-bottom: 1.66666vw;
}

.area12 h2 img{
	height: 3.95833333vw;
}

.area12 p{
	margin-bottom: 1.96666vw;
}

.area12 ul{
	display: flex;
	justify-content: center;
	
}

.area12 ul li:first-child{
	margin-right: 0.8333333vw;
}

.area13{
	width: 58.263888888vw;
	margin: 0 auto 8.333333vw;
	transform: scale(1.05);
	opacity:0;
}

.area13.on{
	transform: scale(1.0);
	opacity:1.0;
	transition:0.7s;
}

.area13 h2{
	text-align: center;
	border-top: 1px solid #312928;
	border-bottom: 1px solid #312928;
	padding: 1.666666vw;
	margin-top: 8.8888vw;
	margin-bottom: 3.8888888vw;
}

.area13 strong{
	font-size: 1.3888888vw;
	font-weight: 600;
	line-height: 1.5;
	display: block;
	margin-top: 1vw;
	height: 6.25vw;
}

.area13 span{
	font-size: 0.9722222vw;
	display: block;
	margin-top: 0vw;
}

.area13 ul{
	display: flex;
}

.area13 ul li{
	opacity:0;
	margin-top:2vw;
}

.area13.on ul li:nth-child(1){
	opacity:1.0;
	margin-top:0;
	transition:0.7s;
}
.area13.on ul li:nth-child(2){
	opacity:1.0;
	margin-top:0;
	transition:0.7s;
	transition-delay: 0.1s;
}
.area13.on ul li:nth-child(3){
	opacity:1.0;
	margin-top:0;
	transition:0.7s;
	transition-delay: 0.2s;
}
.area13 ul li {
	width: 15.625vw;
}
.area13 ul li:not(:last-child){
	margin-right: 5.55555555vw;
}

.area13 ul li img{
	height: 22.5vw;
	display: block;
}

.readModal{
    opacity:0;
    transition:0.7s;
    pointer-events: none;
}

.readModal.on{
    opacity: 1.0;
    transition: 0.7s;
    pointer-events: auto;
}

.readModal .modalInner{
    transform: scale(0.95);
    transition: 0.7s;
}
.readModal.on .modalInner{
    transform: scale(1.0);
    transition: 0.7s;
}

.readModal{
    position:fixed;
    width: 100vw;
    height: 100vh;
    z-index:2010;
    left:0;
    top:0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.readModal .modalBg{
    background: #000;
    opacity:0.7;
    position: fixed;
    width: 100vw;
    height: 100vh;
}
.readModal .modalInner{
    position: relative;
    background: #FEFAF7;
    width: 93.0555vw;
    height: 40.06vw;
    display: flex;
    border-radius: 1.66666vw;

}

.readModal .modalInner .block{
    width: 33.33333%;
}
.readModal .modalInner figure,.readModal .modalInner figure img{
    width: 100.5%;
        overflow:hidden;
}
.readModal .modalInner .block:nth-child(2) figure{
    border-radius: 1.66666vw 0 0 0;
}
.readModal .modalInner .block:last-child figure{
    border-radius: 0 1.66666vw 0 0;
}
.readModal .modalInner .txtBlock{
    padding: 3.3333vw;
}

.readModal .modalInner .block:nth-child(2) h3 img,.readModal .modalInner .block:nth-child(3) h3 img,.readModal .modalInner .block:nth-child(3) h3{
    height: 3.88888vw;
}

.readModal .modalInner .block:nth-child(4) h3 img{
    height: 1.8vw;
}
.readModal .modalInner .txtBlock p{
    margin-top: 1.1111vw;
}

.readModal .modalInner .txtBlock a.btn1{
    margin-top: 1.1111vw;
}
.readModal .modalClose{
    position:absolute;
    top: -2.2222vw;
    right:0.5555vw;
    opacity:1.0;
    transform: scale(1.0);
    transition:0.3s;
    width: 2vw;
    height:2vw;
    cursor: pointer;
}
.readModal .modalClose:hover{
    opacity:0.7;
    transform: scale(0.95);
    transition: 0.3s;
}
.readModal .modalClose li{
    position:absolute;
    top:0;
    right:0;
}

.readModal .modalClose li:nth-child(1){
    transform:rotate(45deg);
}
.readModal .modalClose li:nth-child(2){
    transform:rotate(-45deg);
}

.readModal .modalClose li{
    height: 0.3vw;
    width: 2.2222vw;
    background: #FEFAF7;
    border-radius: 1.1111vw;
}