@charset "utf-8";

main.spirit section.x1 {
	padding:100px 0 0;
}
main.spirit section.x1 .inner {
	padding:30px 0 31vw;
	position:relative;
	z-index:1;
}
main.spirit section.x1 .inner .top_bx {
	margin:0 0 0 10vw;
	position:relative;
	z-index:10;
}
main.spirit section.x1 .inner .top_bx h1 {
	font-size:64px;
	line-height:1.1;
	position:relative;
	z-index:10;
	overflow:hidden;
}

main.spirit section.x1 .inner .top_bx h1 span {
	margin:0;
	padding:0;
	display:block;
	line-height:inherit;
}
main.spirit section.x1 .inner .top_bx p {
	font-size:24px;
	font-weight:500;
}
main.spirit section.x1 .inner .top_bx p span {
	display:block;
	color:#216fc6;
}
main.spirit section.x1 .inner .bg {
    width: 72vw;
	max-width:1100px;
    height: auto;
    aspect-ratio: 3 / 2;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
main.spirit section.x1 .inner .bg img {
    width: 100%;
    position: relative;
    top: 5vw;
}
main.spirit section.x1 .inner .bg .gradation {
	position:absolute;
	width:100%;
	height:100%;
	display:block;
	background:linear-gradient(110deg, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 30%);
	left:0;
	top:0;
}


main.spirit section.x2 {margin:100px 0 0;}
main.spirit section.x2 .inner {
	width:100%;
	max-width:1500px;
	margin:0 auto 100px;
	padding:0 50px;
}
main.spirit section.x2 .inner .wp {
	display:flex;
	justify-content:center;
	align-items:flex-start;
}
main.spirit section.x2 .inner .wp .img {
	width:100%;
	max-width:413px;
}
main.spirit section.x2 .inner .wp .img img {
	width:100%;
}
main.spirit section.x2 .inner .wp .txt {
	margin:0 5vw 0 0;
}
main.spirit section.x2 .inner .wp .txt .bx {
	margin:0 0 50px;
}
main.spirit section.x2 .inner .wp .txt .bx h2 {
	font-size:36px;
	margin:0 0 0.8em;
}
main.spirit section.x2 .inner .wp .txt .bx p {
	font-size:18px;
	line-height:2.7;
	text-align:justify;
	letter-spacing:0.05em;
}
main.spirit section.x2 .inner .wp2 {
	margin:0 0 80px;
}
main.spirit section.x2 .inner .wp2 h2 {
	font-size:36px;
	margin:0 0 0.8em;
}
main.spirit section.x2 .inner .wp2 p {
	font-size:18px;
	line-height:2.7;
	text-align:justify;
	letter-spacing:0.05em;
}
main.spirit section.x2 .inner .wp3 {
	margin:0 0 80px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}
main.spirit section.x2 .inner .wp3 h2 {
	font-size:36px;
	margin:0 0 2.4em;
	text-align:left;
	width:100%;
}
main.spirit section.x2 .inner .wp3 img {
	width:100%;
	max-width:max-content;
	margin:0 0 50px;
}
main.spirit section.x2 .inner .wp3 dl {
	width:100%;
	max-width:750px;
	margin:0 0 25px;
}
main.spirit section.x2 .inner .wp3 dl>* {
	font-size:18px;
	font-weight:500;
	line-height:2.2;
	text-align:left;
}
main.spirit section.x2 .inner .wp3 dl dd {margin:0 0 0 1em;}

main.spirit section.x3 .inner {
	width:100%;
	margin:0 auto;
	padding:100px 50px;
	background-color:#eff2f5;
}
main.spirit section.x3 .inner h2 {
	width:100%;
	max-width:1200px;
	margin:0 auto 1.4em;
	font-size:36px;
	text-align:left;
}
main.spirit section.x3 .inner .wp2 {
	width:100%;
	max-width:1200px;
	margin:0 auto 2.4em;
	display:flex;
	justify-content:flex-start;
	z-index:10;
	position:relative;
}
main.spirit section.x3 .inner .wp2 h3 {
	font-size:28px;
	width:30%;
}
main.spirit section.x3 .inner .wp2 ul {
	width:70%;
	margin-top:-0.8em;
}
main.spirit section.x3 .inner .wp2 ul li {
	font-size:18px;
	line-height:4.2;
	border-bottom:solid 1px #bbc0c5;
}
main.spirit section.x3 .inner .wp2 ul li.end {border:none;}

/* 動画部 */
main.spirit section.x4 .inner {
	width:100%;
	margin:0 auto;
	position:relative;
	overflow:hidden;
}
main.spirit section.x4 .inner .bg {
	position:absolute;
	width:70vw;
	top:-38vw;
	margin:auto;
	right:-10vw;
	z-index:1;
	animation:60s linear infinite rotation;
}
main.spirit section.x4 .inner .wp {
	display:flex;
	width:100%;
	max-width:1200px;
	justify-content:center;
	align-items:center;
	margin:0 auto;
	padding:80px 0;
	position:relative;
	z-index:10;
}
main.spirit section.x4 .inner .wp .txt {
	width:50%;
	padding:50px;
}
main.spirit section.x4 .inner .wp .txt h2 {margin:0 0 1em;}
main.spirit section.x4 .inner .wp .txt p {
	font-size:18px;
	line-height:2;
	margin:0 0 1em;
}
main.spirit section.x4 .inner .wp .txt a {
	text-decoration:none;
	font-weight:bold;
	color:#1f1f1f;
	border-bottom:dashed 1px;
}
main.spirit section.x4 .inner .wp .thumb {
	width:50%;
	padding:50px;
}
main.spirit section.x4 .inner .wp .thumb a {
	display:block;
	position:relative;
	line-height:0;
}
main.spirit section.x4 .inner .wp .thumb a::after {
	content:"";
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.03);
	position:absolute;
	top:0;
	left:0;
	border-radius:15px;
}

/* 回転アニメーション */
@keyframes rotation {
	  0% {transform:rotate(0);}
	100% {transform:rotate(360deg);}
}


/* メディアクエリ------------------------------------------------------------------*/
@media print, screen and (max-width:1600px){
	main.spirit section.x1 .inner {padding:30px 0 38vw;}
}
@media print, screen and (max-width:1500px){
	main.spirit section.x4 .inner .wp {padding:5vw 0;}
	main.spirit section.x4 .inner .bg {top:-33vw;}
}
@media print, screen and (max-width:1400px){
}
@media print, screen and (max-width:1300px){
}
@media print, screen and (max-width:1200px){
	main.spirit section.x2 .inner .wp .txt {width:60%;}
	main.spirit section.x2 .inner .wp .img {width:40%;}
	main.spirit section.x4 .inner .bg {top:-24vw;}
}
@media print, screen and (max-width:1100px){
	main.spirit section.x1 .inner .bg .gradation {background: linear-gradient(110deg, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 50%);}
}
@media print, screen and (max-width:1000px){
}
@media print, screen and (max-width:900px){
	main.spirit section.x2 .inner {padding:0 5vw;}
	main.spirit section.x2 .inner .wp {flex-direction:column-reverse;}
	main.spirit section.x2 .inner .wp .img {margin:0 auto;}
	main.spirit section.x2 .inner .wp .txt {
		width:100%;
		margin:7vw 0 0;
	}
	main.spirit section.x3 .inner {padding:10vw 5vw;}
	main.spirit section.x4 .inner .wp .thumb {padding:15px;}
	main.spirit section.x4 .inner .bg {
		width:80vw;
		top:-27vw;
		right:-21vw;
	}
}
@media print, screen and (max-width:768px){
	main.spirit section.x1 .inner .bg .gradation {display:none;}
	main.spirit section.x1 .inner {padding:0;}
	main.spirit section.x1 .inner .top_bx {margin:0 0 0 5vw;}
	main.spirit section.x1 .inner .top_bx h1 {font-size:12vw;}
	main.spirit section.x1 .inner .top_bx p {font-size:6vw;}
	main.spirit section.x1 .inner .bg {
        position: relative;
        width: 90%;
        height: 50vw;
        margin: 0 0 0 auto;
    }

	main.spirit section.x2 {margin:10vw 0 0;}
	main.spirit section.x2 .inner {margin:0 0 15vw;}
	main.spirit section.x2 .inner .wp .img {width:70%;}
	main.spirit section.x2 .inner .wp .txt .bx {margin:0 0 10vw;}
	main.spirit section.x2 .inner .wp .txt .bx h2 {
		font-size:7.2vw;
		margin:0 0 0.5em;
	}
	main.spirit section.x2 .inner .wp .txt .bx p {
		font-size:4.2vw;
		line-height:2;
	}
	main.spirit section.x2 .inner .wp2 {margin:0 0 10vw;}
	main.spirit section.x2 .inner .wp2 h2 {
		font-size:7.2vw;
		margin:0 0 0.5em;
	}
	main.spirit section.x2 .inner .wp2 p {
		font-size:4.2vw;
		line-height:2;
	}
	main.spirit section.x2 .inner .wp3 {margin:0 0 15vw;}
	main.spirit section.x2 .inner .wp3 h2 {
		font-size:7vw;
		margin:0 0 0.5em;
	}
	main.spirit section.x2 .inner .wp3 img {margin:0 0 10vw;}
	main.spirit section.x2 .inner .wp3 dl>* {
		font-size:4.2vw;
		line-height:2;
	}

	main.spirit section.x3 .inner h2 {
		font-size:7.2vw;
		margin:0 0 0.5em;
	}
	main.spirit section.x3 .inner .wp2 {
		flex-direction:column;
		margin:0 auto;
	}
	main.spirit section.x3 .inner .wp2 h3 {
		font-size:5.6vw;
		margin:0 0 0.5em;
	}
	main.spirit section.x3 .inner .wp2 ul {width:100%;}
	main.spirit section.x3 .inner .wp2 ul li {
		font-size:4.2vw;
		margin:0 0 0 0.5em;
	}

	main.spirit section.x4 .inner .wp {flex-direction:column;}
	main.spirit section.x4 .inner .bg {
		width:140vw;
		top:-37vw;
		right:-71vw;
	}
	main.spirit section.x4 .inner .wp .txt {
		width:100%;
		padding:7vw 8vw;
	}
	main.spirit section.x4 .inner .wp .thumb {
		width:100%;
		padding:0 8vw 7vw;
	}
	main.spirit section.x4 .inner .wp .txt h2 {
		margin:0;
		line-height:0;
	}
	main.spirit section.x4 .inner .wp .txt p {
		font-size:4.2vw;
		padding:0 0 0 10px;
		line-height:1.8;
		margin:0 0 5px;
	}
	main.spirit section.x4 .inner .wp .txt a {margin:0 0 0 10px;}
}