@charset "UTF-8";

/* -----------------------------------------------------------
   COMPANY
------------------------------------------------------------*/
#contents-visual .ttl-cover h1.ttl{
	padding-top: 51.83%;
}
.cont-2nd #data .ttl-box{
	margin-bottom: 64px;
}
#data .ttl-box h2.ttl{
	background-image: url(../company/img/ttl_data.png);
}
.cont-2nd #data{
	margin-bottom: 120px;
}
#data .data-wrap{
	display: flex;
	justify-content: space-between;
}
#data .data-wrap ul.data-list-l{
	width: 49.5%;
}
#data .data-wrap ul.data-list-r{
	width: 48%;
}
#data .data-wrap li{
	border-radius: 16px;
	border: 1px dashed #000;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

#data .data-wrap li img{
	width: 100%;
	opacity: 0;
}
#data .data-wrap li.d1{ aspect-ratio: 563 / 437;}
#data .data-wrap li.d2{ aspect-ratio: 563 / 333;}
#data .data-wrap li.d3{ aspect-ratio: 563 / 271;}
#data .data-wrap li.d4{ aspect-ratio: 545 / 241;}
#data .data-wrap li.d5{ aspect-ratio: 545 / 200;}
#data .data-wrap li.d6{ aspect-ratio: 545 / 220;}
#data .data-wrap li.d7{ aspect-ratio: 545 / 360;}

#data .data-wrap li.d1 figure{ width: 81%;}
#data .data-wrap li.d2 figure{ width: 65%;}
#data .data-wrap li.d3 figure{ width: 48%;}
#data .data-wrap li.d4 figure{ width: 33%;}
#data .data-wrap li.d5 figure{ width: 37%;}
#data .data-wrap li.d6 figure{ width: 40%;}
#data .data-wrap li.d7 figure{ width: 70%;}

#data .data-wrap.is-active .d1 img{animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) 0.2s forwards;}
#data .data-wrap.is-active .d2 img{animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) 0.4s forwards;}
#data .data-wrap.is-active .d3 img{animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) 0.6s forwards;}
#data .data-wrap.is-active .d4 img{animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) 0.8s forwards;}
#data .data-wrap.is-active .d5 img{animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1.0s forwards;}
#data .data-wrap.is-active .d6 img{animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1.2s forwards;}
#data .data-wrap.is-active .d7 img{animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1.4s forwards;}

#brand{
	background-image: url(../company/img/bg_brand.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	padding-bottom: 120px;
}
#brand .brand-inner{
	width: min(96%,1160px);
	margin: 0 auto;
	padding: 70px 0 0;
}
#brand .brand-ttl{
	width: 66%;
	height: 0;
	background-image: url(../company/img/ttl_brand.png);
	padding-top: calc(12.91% * 0.66);
	background-size: cover;
	margin:0 auto 28px;
}
#brand .msg{
	width: 100%;
	height: 0;
	background-image: url(../company/img/brand_msg.png);
	padding-top: 15.81%;
	background-size: cover;
	margin-bottom: 28px;
	opacity: 0;
}
#brand .msg.is-active{
	animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

#brand .msg-list{
	width: 86%;
	margin: 0 auto 54px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#brand .msg-list li{
	width: 49%;
	margin-bottom: 2%;
}
#brand .msg-list li img{
	width: 100%;
	opacity: 0;
}
#brand .msg-list.is-active li:nth-child(1) img{animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) 0.4s forwards;}
#brand .msg-list.is-active li:nth-child(2) img{animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) 0.8s forwards;}
#brand .msg-list.is-active li:nth-child(3) img{animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1.2s forwards;}
#brand .msg-list.is-active li:nth-child(4) img{animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1.6s forwards;}


#brand .btn-common{
	width: max(46% , 539px);
	margin:0 auto;
}
#brand .btn-common.vision2030{
	margin-top: 1em;
}

@media all and (min-width: 768px) {
	#data .data-wrap li.d3,
	#data .data-wrap li.d7{
		margin-bottom: 0;
	}
	#brand .msg-list li:nth-child(3),
	#brand .msg-list li:nth-child(4){
	margin-bottom: 0;
}
}
@media all and (max-width: 767px) {
	
	.cont-2nd #data{
		margin-bottom: 0;
	}
	.cont-2nd #data .ttl-box{
		margin-bottom: 7.6vw;
	}
	.cont-2nd #qa .ttl-box{
		display: flex;
		flex-wrap: wrap;
	}
	.cont-2nd #qa .ttl-box .toptxt-box{
		order: 2;
	}
	.cont-2nd #qa .ttl {
		order: 1;
	}
	#data .data-wrap{
		display: block;
	}
	#data .data-wrap ul.data-list-l{
		width: 100%;
	}
	#data .data-wrap ul.data-list-r{
		width: 100%;
	}
	#data .data-wrap li{
		margin-bottom: 3.3vw;
	}
	#brand .brand-inner{
		width: 100%;
		margin: 0 auto;
		padding: 16vw 0 0;
	}
	#brand .brand-ttl{
		width: 93%;
		padding-top: calc(12.91% * 0.93);
		margin:0 auto 12vw;
	}
	#brand .msg{
		background-image: url(../company/img/brand_msg_smp.png);
		padding-top: 25.31%;
		margin-bottom: 8.7vw;
	}
	#brand .msg-list{
		margin: 0 auto 11vw;
	}
	#brand .msg-list li{
		width: 100%;
	}
	#brand .btn-common{
		width: 90%;
	}
	.btn-common a{
		text-align: left;
		font-size: 1.7rem;
		padding: 1.0em 1.0em;
		position: relative;
	}
}