@charset "UTF-8";
/*
Author: あそびラボ
*/

/*=======================================================
MV
=======================================================*/
#wrapper.mv {
	height: 480px;
}
.bl_mv{
	width: 480px;
	box-shadow: 0px 4px 20px rgba(2, 60, 255, 0.2);
	border: 1px solid #FFFFFF;
	border-radius: 16px;
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	background: rgba(255,255,255,0.3);
	margin: 162px auto 0;
	padding: 40px 0 30px 40px;
	position: relative;
}
.bl_mv::after{
	content: "";
	position: absolute;
	background: url(../images/top/mv_zombie.png) top right / contain no-repeat;
	width: 200px;
	height: 231px;
	top: -46px;
	right: 20px;
}
.bl_mv_mainTtl{
	color: #7A54F7;
	font-size: 42px;
	text-align: left;
	letter-spacing: 3.5px;
	margin-top: -7px;
}
.bl_mv_sTtl{
	background: #7A54F7;
	border-radius: 12px;
	width: 234px;
	height: 24px;
	font-weight: bold;
	color: #FCFBF7;
	padding: 0 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15px;
	padding-bottom: 3px;
}
.bl_mv_sTtl img{
	width: 14px;
	margin-bottom: 18px;
}
.bl_mvTxt{
	color: #7A54F7;
	font-size: 20px;
	text-align: left;
	font-weight: bold;
	letter-spacing: 0px;
}
@media screen and (max-width : 750px){
	#wrapper.mv {
		height: 712px;
	}
	.mv .ly_cont_inner{
		width: 670px;
	}
	.bl_mv{
		width: 670px;
		/* height: 280px; */
		border: 1px solid #FFFFFF;
		background: rgba(255,255,255,0.3);
		margin: 237px auto 0;
		padding: 58px 0 18px 24px;
	}
	.bl_mv::after{
		width: 300px;
		height: 346px;
		top: -78px;
		right: -14px;
	}
	.bl_mv_mainTtl{
		font-size: 64px;
		padding-left: 15px;
		letter-spacing: 6.2px;
	}
	.bl_mv_sTtl{
		border-radius: 24px;
		width: 380px;
		height: 48px;
		font-size: 28px;
		padding: 0 20px 3px;
		margin-bottom: 10px;
	}
	.bl_mv_sTtl img{
		width: 26px;
		margin-bottom: 36px;
	}
	.bl_mvTxt{
		font-size: 32px;
		padding-left: 15px;
		margin-top: -10px;
	}
}

/*=======================================================
共通
=======================================================*/
section .ly_cont_inner{
	padding: 57px 0;
}
@media screen and (max-width : 750px){
	section .ly_cont_inner{
		padding: 112px 0;
	}
}

.bl_cardList{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.bl_card{
	width: 320px;
}

/*=======================================================
about
=======================================================*/
.about{
	box-shadow: 0px -3px 6px #5486B34D;
	border: 32px solid #76B9FF;
	background: #FCFBF7;
	z-index: 1;
}
.about .ly_cont_inner{
	padding: 24px 0;
	position: relative;
}
.about .ly_cont_inner::before{
	content: '';
	position: absolute;
	border-right: 16px solid transparent;
	border-bottom: 24px solid #76B9FF;
	border-left: 16px solid transparent;
	top: -52px;
	left: 500px;
}
.el_zombie01{
	position: absolute;
	top: -90px;
	right: 30px;
	width: 300px;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
}
.el_zombie01 *{
	image-rendering: -webkit-optimize-contrast;
}
.about .bl_txt{
	width: 672px;
}
@media screen and (max-width : 750px){
	.about .ly_cont_inner{
		padding: 46px 8px 238px;
	}
	.about .ly_cont_inner::before{
		border-right: 24px solid transparent;
		border-bottom: 36px solid #76B9FF;
		border-left: 24px solid transparent;
		top: -58px;
		left: 297px;
	}
	.el_zombie01{
		position: absolute;
		top: 345px;
		right: 192px;
	}
	.about .bl_txt{
		width: 622px;
		line-height: 1.5;
	}
}
/*=======================================================
knowedge
=======================================================*/
.knowedge{
	border-bottom: 2px dashed #76B9FF;
	background: #FCFBF7;
	z-index: 1;
}
.knowedge .bl_sec_mainTtl{
	margin-bottom: 28px;
}
.knowedge .bl_balloon{
	border: 1px solid #76B9FF;
	border-radius: 10px;
	width: 740px;
	padding: 20px 40px;
	background: #fff;
	margin: 0 0 0 196px;
	position: relative;

/* 	animation-name:fadeLeft100Anime;
	animation-duration:2s;
	animation-fill-mode:forwards;
	opacity:0; */
}
/* @keyframes fadeLeft100Anime{
	from {
		opacity: 0;
		transform: translateX(-100px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
} */
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
/* .fadeLeft100Trigger {
	opacity: 0;
} */
.knowedge .bl_balloon::before{
	content: '';
	position: absolute;
	background: url(../images/top/knowedge_zombie.png) top left / contain no-repeat;
	width: 100px;
	height: 171px;
	top: -12px;
	left: -153px;
	image-rendering: -webkit-optimize-contrast;
}
.knowedge .bl_balloon:after{
	content: '';
	position: absolute;
	background: url(../images/common/balloon_parts.svg) top left / contain no-repeat;
	width: 28px;
	height: 22px;
	top: 68px;
	left: -21px;
}
.knowedge .bl_cardList{
	margin-top: 48px;
}
.knowedge .bl_card{
	width: 320px;
	box-shadow: 0px 8px 15px #B6B3FF66;
	border: 1px solid #FFFFFF;
	border-radius: 8px;
	background: #fff;
	overflow:hidden;

}
.knowedge .bl_card > a{
	width: 100%;
	height: 100%;
	display: block;
	cursor: pointer;
}
.knowedge .bl_card > a:hover{
	opacity: 1;
}
.knowedge .bl_card_body{
	padding: 16px 15px;
}
.knowedge .bl_card_imgWrapper{
	transition:.5s all;
	width: 320px;
	height: 178px;
	overflow: hidden;
}
.knowedge .bl_card > a:hover .bl_card_imgWrapper img{
	transform:scale(1.1,1.1);
	transition:.5s all;
	image-rendering: -webkit-optimize-contrast;
}
.knowedge .bl_cardTtl{
	color: #7289FF;
	font-size: 24px;
	text-align: center;
	letter-spacing: 1.44px;
	margin-bottom: 16px;
}
.knowedge .bl_cardTxt{
	color: #222;
}
@media screen and (max-width : 750px){
	.knowedge{
		border-bottom: 4px dashed #76B9FF;
	}
	.knowedge .ly_cont_inner{
		width: 670px;
	}
	.knowedge .bl_sec_mainTtl{
		margin-bottom: 32px;
	}
	.knowedge .bl_balloon{
		border: 2px solid #76B9FF;
		border-radius: 20px;
		width: 100%;
		padding: 48px 40px;
		margin: 0;
		line-height: 1.5;
	}
	.knowedge .bl_balloon::before{
		width: 100px;
		height: 171px;
		top: 371px;
		left: 285px;
	}
	.knowedge .bl_balloon:after{
		width: 56px;
		height: 44px;
		top: 417px;
		left: 400px;
	}
	.knowedge .bl_cardList{
		margin: 144px auto 0;
		width: 640px;
	}
	.knowedge .bl_card{
		box-shadow: 0px 16px 30px #B6B3FF66;
		border-radius: 16px;
	}
	.knowedge .bl_card + .bl_card{
		margin-top: 80px;
	}
	.knowedge .bl_card_body{
		padding: 32px 32px 48px;
	}
	.knowedge .bl_card_imgWrapper{
		height: 356px;
	}
	.knowedge .bl_cardTtl{
		font-size: 38px;
		letter-spacing: 2.28px;
	}
}
/*=======================================================
history
=======================================================*/
main .history{
	background: #FCFBF7;
	z-index: 1;
}
.history .bl_media{
	border: 1px solid #76B9FF;
	border-radius: 10px;
	background: #fff;
	padding: 40px;
}
.history .el_zombie02{
	width: 450px;
	image-rendering: -webkit-optimize-contrast;
}
.history .bl_media_body{
	width: 456px;
}
.history .el_moreBtn{
	margin-top: 43px;
}
@media screen and (max-width : 750px){
	.history .ly_cont_inner{
		width: 670px;
	}
	.history .bl_media{
		border: 2px solid #76B9FF;
		border-radius: 32px;
		padding: 32px 40px 80px;
	}
	.history .el_zombie02{
		width: 100%;
		margin-bottom: 25px;
	}
	.history .bl_media_body{
		width: 590px;
	}
	.history .el_moreBtn{
		margin-top: 80px;
		width: 464px;
	}
}
/*=======================================================
standard
=======================================================*/
.standard{
	border-bottom: 2px dashed #76B9FF;
	height: 615px;
}
.standard .bl_card{
	width: 498px;
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	border-radius: 16px;
	box-shadow: 0px 4px 20px #b6b3ff66;
	border: 1px solid #FFFFFF;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.standard .bl_card:hover{
	transform: translate(0, -5px);
	transition:.5s all;

}
.standard .bl_card > a{
	width: 100%;
	height: 100%;
	display: block;
	cursor: pointer;
}
.standard .bl_card a:hover{
	position: relative;
	opacity: 1;
}
.standard .bl_card a:hover:before{
	content: "";
	position: absolute;
	display: block;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	top: -1px;
	left: -1px;
	border: 7px solid rgba(2, 60, 255,0.7);
	border-radius: 16px;
	-webkit-transition: all .3s ;
	transition: all .3s ;
}
.standard .bl_card_imgWrapper{
	width: 496px;
}
.standard .bl_card_imgWrapper img{
	image-rendering: -webkit-optimize-contrast;
}
.standard .bl_card_body{
	padding: 16px 0 28px;
	width: 434px;
	margin: 0 auto;
}
.standard .bl_card_ttl{
	font-size: 24px;
	color: #7289FF;
	margin-bottom: 16px;
	letter-spacing: 1.44px;
	text-align: center;
}
.standard .bl_card_txt{
	color: #222;
}
@media screen and (max-width : 750px){
	.standard{
		border-bottom: 4px dashed #76B9FF;
		height: 1636px;
	}
	.standard .bl_card{
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border-radius: 32px;
		box-shadow: 0px 8px 40px #b6b3ff66;
		border: 2px solid #FFFFFF;
		-webkit-transition: all .3s;
		transition: all .3s;
	}
	.standard .bl_card + .bl_card{
		margin-top: 80px;
	}
	.standard .bl_card_imgWrapper{
		background: rgba(252, 251, 247,0.1);
		width: 496px;
	}
	.standard .bl_card_body{
		padding: 32px 0 48px;
		width: 570px!important;
	}
	.standard .bl_card_ttl{
		font-size: 38px;
		letter-spacing: 2.28px;
	}
}

/*=======================================================
information
=======================================================*/
#information{
	background: #FCFBF7;
}
.bl_verPosts_list{
	border: 1px solid #76B9FF;
	border-radius: 16px;
	background: #fff;
	padding: 40px;
}
.bl_vertPosts_item{
	border-bottom: 2px dashed #76B9FF;
}
.bl_vertPosts_item:last-of-type{
	border-bottom: none;
}
.bl_vertPosts_item:last-of-type a{
	padding-bottom: 0;
}
@media screen and (max-width : 750px){
	#information .ly_cont_inner{
		width: 670px;
	}
	.bl_verPosts_list{
		border: 2px solid #76B9FF;
		border-radius: 32px;
		padding: 47px 40px;
	}
	.bl_vertPosts_item{
		border-bottom: 4px dashed #76B9FF;
	}
	.bl_vertPosts_item{
		padding: 32px 0;
	}
}
/**Mac,iPad Safari**/
@media only screen and (min-device-width:768px){
	_::-webkit-full-page-media, _:future, :root {

	}
}


/*========= レイアウトのためのCSS ===============*/

#wrapper{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align:center;
	color: #222;
}

a{
	color: #fff;
}

/*========= particle js を描画するエリア設定 ===============*/


#particles-js{ 
	position:fixed;/*描画固定*/
	z-index:-1;/*描画を一番下に*/
	width: 100%;
	height: 100%;
	background: -moz-linear-gradient(65deg, #FFDFFE, #F8FEFF,#B2B6FF,#BFE4FF,#FFF8E5,#E1CCFF); 
	background: -webkit-linear-gradient(65deg, #FFDFFE, #F8FEFF,#B2B6FF,#BFE4FF,#FFF8E5,#E1CCFF); 
	background: linear-gradient(150deg, #BFE4FF,#FFF8E5,#E1CCFF,#FFDFFE); 
}

#wrapper{
	position: relative;/*描画を#particles-jsよりも上にするためposition:relative;を指定*/
	z-index: 1;/*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
	width:100%;
	height: 100%;
}