@charset "utf-8";

main.company section.x1 {
	padding:100px 0 0;
}
main.company section.x1 .inner {
	padding:30px 0 271px;
	position:relative;
	z-index:1;
}
main.company section.x1 .inner .top_bx {
	margin:0 0 0 10vw;
	position:relative;
	z-index:10;
}
main.company section.x1 .inner .top_bx h1 {
	font-size:64px;
	line-height:1.1;
	position:relative;
	z-index:10;
	overflow:hidden;
	opacity:0;
	transition:opacity 0.45s ease 1.0s;
}
main.company section.x1 .inner .top_bx h1 span {
	margin:0;
	padding:0;
	display:block;
	line-height:inherit;
	transform:translate3d(0, 100%, 0);
	transition:transform 0.5s cubic-bezier(0.04, 0.97, 0.86, 0.94) 1.0s;
}
main.company section.x1 .inner .top_bx h1.active {opacity:1;}
main.company section.x1 .inner .top_bx h1.active span {transform:translate3d(0, 0, 0);}

main.company section.x1 .inner .top_bx p {
	font-size:24px;
	font-weight:500;
	position:relative;
	overflow:hidden;
	opacity:0;
	transition:opacity 0.45s ease 1.25s;
}
main.company section.x1 .inner .top_bx p.active {opacity:1;}
main.company section.x1 .inner .top_bx p span {
	display:block;
	color:#216fc6;
	transform:translate3d(0, 100%, 0);
	transition:transform 0.5s cubic-bezier(0.04, 0.97, 0.86, 0.94) 1.2s;
}
main.company section.x1 .inner .top_bx p.active span {transform:translate3d(0, 0, 0);}

main.company section.x1 .inner .bg {
	width:72vw;
	height:400px;
	position:absolute;
	top:0;
	right:0;
	z-index:1;
	overflow:hidden;
	display:flex;
	justify-content:center;
	align-items:center;
}
main.company section.x1 .inner .bg::before {
	content:"";
	display:block;
	position:absolute;
	width:100vw;
	height:100%;
	background-color:#005eaf;
	top:0px;
	left:0;
	transform:translate3d(0, 0, 0);
//	transition:transform 0.52s cubic-bezier(.83,0,.17,1) 1.0s;
	transition:transform 0.45s cubic-bezier(0.04, 0.97, 0.86, 0.94) 0.6s;
	z-index:1;
}
main.company section.x1 .inner .bg::after {
	content:"";
	display:block;
	position:absolute;
	width:100vw;
	height:100%;
	background-color:#fff;
	top:0px;
	left:0;
	transform:translate3d(0, 0, 0);
//	transition:transform 0.52s cubic-bezier(.83,0,.17,1) 0.5s;
	transition:transform 0.45s cubic-bezier(0.04, 0.97, 0.86, 0.94) 0.2s;
	z-index:10;
}
main.company section.x1 .inner .bg.active::before {transform:translate3d(0, 100%, 0);}
main.company section.x1 .inner .bg.active::after {transform:translate3d(0, 100%, 0);}

/*
main.company section.x1 .inner .bg::before {
	content:"";
	width:100%;
	height:100%;
	z-index:100;
	position:absolute;
	top:0;
	left:0;
	background-image:linear-gradient(90deg, rgba(255, 255, 255, 1) 10vw, rgba(255, 255, 255, 0) 30vw);
}
*/

main.company section.x1 .inner .bg img {width:100%;}

main.company section.x2 {margin:50px 0 0;}
main.company section.x2 .inner {
	width:100%;
	max-width:1200px;
	margin:0 auto 100px;
}
main.company section.x2 .inner dl {
    width: 100%;
    font-weight: 500;
    display: flex;
    flex-wrap: wrap;
    border-top: solid 1px #d8d8d8;
}
main.company section.x2 .inner dl dt {
    width: 30%;
    border-bottom: solid 1px #d8d8d8;
    padding: 1em 1.5em;
    font-weight: bold;
}
main.company section.x2 .inner dl dd {
    width: 70%;
    border-bottom: solid 1px #d8d8d8;
    padding: 1em 1.5em;
}

/* メディアクエリ------------------------------------------------------------------*/
@media print, screen and (min-width:1900px){}
@media print, screen and (max-width:1500px){
	main.company section.x1 .inner .bg img {
		width:auto;
		height:100%;
	}
	main.company section.x2 .inner {
    max-width: 1500px;
    padding: 0 50px;
	}
}
@media print, screen and (max-width:768px){
	main.company section.x1 .inner {padding:0;}
	main.company section.x1 .inner .top_bx {margin:0 0 0 5vw;}
	main.company section.x1 .inner .top_bx h1 {font-size:12vw;}
	main.company section.x1 .inner .top_bx p {font-size:6vw;}
	main.company section.x1 .inner .bg {
		position:relative;
		width:100%;
		height:40vw;
		margin:0 0 5vw 10vw;
	}
main.company section.x2 {
    margin: 10vw 0 0;
}
main.company section.x2 .inner {
    padding: 0 5vw;
}
main.company section.x2 .inner dl dt {
    padding: 1em 0.5em;
}
main.company section.x2 .inner dl dd {
    padding: 1em 0;
}

}