@charset "UTF-8";
/* CSS Document */

#lp_{
	margin: 0 auto 150px;
	width: 1120px;
}

#lp_ .frame_{
	margin: auto;
	width: 1100px;}

#lp_ img{
	width: 100%;
}

#lp_ .credit{
	font-family: serif;
	font-size: 14px;
	font-weight: bold;
	margin: 50px auto;
	text-align: center;
}

#lp_ .credit a{
	text-decoration: underline;
}


/* -----------------------------------------------
フェードインの動きの大きさ設定
-------------------------------------------------- */
@keyframes fadeInUpsmall{
	0%{opacity:0;transform:translate3d(0,10%,0)}
	to{opacity:1;transform:none}
}
.fadeInUpsmall{	animation-name:fadeInUpsmall}

@keyframes fadeInDownsmall{
	0%{opacity:0;transform:translate3d(0,-10%,0)}
	to{opacity:1;transform:none}
}
.fadeInDownsmall{animation-name:fadeInDownsmall}

@keyframes fadeInRightsmall{
	0%{opacity:0;transform:translate3d(10%,0,0)}
	to{opacity:1;transform:none}
}
.fadeInRightsmall{animation-name:fadeInRightsmall}

@keyframes fadeInLeftsmall{
	0%{opacity:0;transform:translate3d(-10%,0,0)}
	to{	opacity:1;transform:none}
}
.fadeInLeftsmall{animation-name:fadeInLeftsmall}

/* -----------------------------------------------
フェードインの動きの大きさ設定
-------------------------------------------------- */



#lp_ .title{
	width: 70%;
	margin: 50px auto;
}

#lp_ .content_1{
	height: 1520px;
	margin: 100px auto 0;
	position: relative;
	width: 87%;
}

#lp_ .content_1 li{
	position: absolute;
}

#lp_ .content_1 .item1{
	left: 10px;
	top: 0;
	width: 500px;
}

#lp_ .content_1 .item2{
	right: 0;
	top:300px;
	width: 420px;
}

#lp_ .content_1 .item3{
	bottom: 0px;
	left: 200px;
	width: 460px;
}

#lp_ .content_1 .item4{
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 700px;
}

#lp_ .content_1 .item4 img{
	opacity: 0.5;
}

#lp_ .content_1 .item5{
	left: -30px;
	top: -30px;
	width: 140px;
}

#lp_ .content_1 .item6{
	right:140px;
	top: 180px;
	width: 300px;
}



#lp_ .content_2{
	height: 900px;
	margin: 200px auto 0;
	position: relative;
	width: 100%;
}

#lp_ .content_2 li{
	position: absolute;
	width: 400px;
}

#lp_ .content_2 .item2{
	right: 0;
	bottom: 0px;
}

#lp_ .content_2 .item3{
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 450px;
}

#lp_ .content_2 .item4{
	width: 325px;
	right: 295px;
	top: 75px;
}

#lp_ .content_2 .item5{
	width: 300px;
	left: -20px;
	bottom: 170px;
}



#lp_ .content_3{
	position: relative;
	margin:160px auto 0;
	width: 100%;
	height: 1580px;
}

#lp_ .content_3 li{
	position: absolute;
	width: 400px;
}
#lp_ .content_3 .item1{
	width: 500px;
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}

#lp_ .content_3 .item1{
	width: 570px;
	margin: 30px auto 0;
}

#lp_ .content_3 .item2{
	width: 800px;
	bottom: 40px;
	right: 120px;
}

#lp_ .content_3 .item3{
	width: 800px;
	bottom: 0px;
	left: 120px
}

#lp_ .content_3 .item4{
	width: 220px;
	top: 0;
	right: 240px
}

#lp_ .content_3 .item5{
	width: 120px;
	top: 350px;
	right: 100px
}



#lp_ .content_4{
	position: relative;
	margin: 200px auto 0;
	width: 82%;
	height: 1930px;
}

#lp_ .content_4 li{
	position: absolute;
	width: 430px;
}

#lp_ .content_4 .item1{
	left: 0px;
	top: 750px;
}

#lp_ .content_4 .item2{
	right: 120px;
	bottom: 0px;
}

#lp_ .content_4 .item3{
	right: 0px;
	top: 640px;
}

#lp_ .content_4 .item4{
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 480px;
}

#lp_ .content_4 .item5{
	left: 100px;
	bottom: 130px;
}

#lp_ .content_4 .item5 img{
opacity: 0.7;
}

#lp_ .content_4 .item6{
	width: 200px;
	right: 155px;
	top: -58px;
}

#lp_ .content_4 .item7{
	width: 110px;
	left: 90px;
	top: 170px;
}


#lp_ .content_5{
	position: relative;
	margin: 200px auto 0;
	width: 74%;
	height: 1280px;
}

#lp_ .content_5 li{
	position: absolute;
	width: 450px;
}

#lp_ .content_5 .item1{
	left: 0px;
	top: 0px;
}

#lp_ .content_5 .item2{
	right: 0px;
	top: 200px;
	width: 400px;
}

#lp_ .content_5 .item3{
	left: 60px;
	bottom: 0px;
	width: 400px;
}

#lp_ .content_5 .item4{
	left: -55px;
	top: -52px;
	width: 250px;
}

#lp_ .content_5 .item5{
	right:127px;
	top: -20px;
	width: 100px;
	transform:rotate(-90deg);    /* 中心を基準点に回転する */
}


#lp_ .content_6{
	position: relative;
	margin: 200px auto 0;
	width: 79%;
	height: 1450px;
}

#lp_ .content_6 li{
	position: absolute;
	width: 450px;
}

#lp_ .content_6 .item1{
	left: 0px;
	top: 0px;
}

#lp_ .content_6 .item2{
	right: 0px;
	top: 200px;
}

#lp_ .content_6 .item3{
	width: 790px;
	bottom: 0px;
	 left: 0;
}

#lp_ .content_6 .item4{
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 600px;
}
#lp_ .content_6 .item4 img{
opacity: 0.5;
}


#lp_ .content_6 .item5{
	right: -35px;
	top: 160px;
	width: 170px;
}

#lp_ .content_6 .item6{
	left: -10px;
	top: 680px;
	width: 250px;
}





#lp_ .content_link{
	display: flex;
	gap:60px;
	justify-content: center;
	margin: 150px auto 0;
}

#lp_ .content_link :hover{
	opacity: 0.5;
	transition: all 0.4s;
}

#lp_ .content_link li{
	background-color: #dfeff5;
	width: 370px;
}

#lp_ .content_link p{
	color: #6d7578;
	font-family: serif;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 0.2rem;
	padding: 30px;
	text-align: center;
}