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

/*=======================================================
共通
=======================================================*/

/*=======================================================
MV
=======================================================*/
#mv{
    height: 792px;
    background: url("../images/top/mv_bg.png") top -85px center no-repeat;
	position: relative; 
	z-index: 2;
}
#mv .ly_cont_inner{
}
#mv .el_mainTtl{
	position: absolute;
	top: 255px;
	left: 0;
	right: 0;
    margin-right: auto;
    margin-left: auto;
	text-align: center;
	color: #fff;
	font-size: 42px;
	letter-spacing: 0.1em;
}
@media screen and (max-width : 750px){
	#mv {
		height: 1209px;
		background: url(../images/top/mv_bg_sp.png) top -125px center no-repeat;
	}
	#mv .el_mainTtl {
		top: 360px;
		font-size: 44px;
	}
}
/*=======================================================
intro
=======================================================*/
#intro {
    background: url(../images/top/mv_bg2.jpg) top center no-repeat;
    margin-top: -236px;
    padding-top: 236px;
	padding-bottom: 60px;
}
#intro .ly_cont_inner {
	padding-top: 37px;
}
#intro .el_txt {
	text-align: center; 
	color: #fff; 
	font-size: 28px;
	text-shadow: 1px 2px 4px #000;
	margin-bottom: 50px;
}
/*THE LABOとは？ボタン*/
#intro .el_btn {
	margin-bottom: 58px;
	width: 437px;
	height: 60px;
	border: 1px solid #fff; 
	border-radius: 0;
	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
	font-size: 24px;
	text-shadow: 1px 2px 4px #000;
	padding-top: 3px;
	background: linear-gradient(to bottom,#b68833,#805a18);
}
#intro .el_btn::after {
	width: 16px;
	height: 18px;
	background: url(../images/top/el_btn_after.png);
	border: 0;
}
/*第1話*/
#intro .bl_notice {
	margin: auto;
	width: 350px;
	height: 177px;
	background: url(../images/top/bl_notice_bg.png) center / contain no-repeat;
}
#intro .bl_notice_body {
	padding-top: 2px;
}
#intro .bl_notice_ttl {
	border-radius: 30px;
	border: 2px solid #fff;
	box-shadow: 0 0px 3px 5px #2a2f4a inset;
	background: linear-gradient(to bottom,#3c4269,#242b45);
	width: 177px;
	height: 36px;
	color: #fff;
	font-size: 21px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 7px;
	letter-spacing: 1.8px;
}
#intro .bl_notice_txt {
	padding-right: 56px;
}
#intro .bl_notice_txt a {
	text-align: center;
	padding-right: 23px;
	position: relative;
	display: flex;
    justify-content: center;
}
#intro .bl_notice_txt a img {
	width: 186px;
}
#intro .bl_notice_txt a::before {
	content: "";
	background: #333;
	border-radius: 50%;
	width: 22px;
	height: 22px;
	display: block;
	position: absolute;
	top: 35px;
	right: -8px;
}
#intro .bl_notice_txt a::after {
	content: "";
	display: block;
	position: absolute;
	top: 41px;
	right: -1px;
	width: 0;
	height: 0;
	margin-top: auto;
	margin-bottom: auto;
	border-style: solid;
	border-width: 5.5px 0 5.5px 7px;
	border-color: transparent transparent transparent #fff;
}
@media screen and (max-width : 750px){
	#intro {
    	background: url(../images/top/mv_bg2_sp.jpg) top center no-repeat;
    	margin-top: -302px;
    	padding-top: 106px;
    	padding-bottom: 25px;
	}
	#intro .ly_cont_inner {
		padding-top: 39px;
	}
	#intro .el_txt {
		font-size: 34px;
		line-height: 1.43;
		margin-bottom: 40px;
		letter-spacing: 0.08em;
	}
	#intro .el_txt:last-of-type {
		margin-bottom: 52px;
	}
	#intro .el_btn {
    	margin-bottom: 90px;
    	width: 552px;
    	height: 90px;
    	font-size: 32px;
    	letter-spacing: 0.01em;
    	padding-right: 30px;
		padding-top: 0;
	}
	#intro .el_btn::after {
    	width: 18px;
    	height: 20px;
    	background: url(../images/top/el_btn_after_sp.png);
		right: 15px;
	}
	#intro .bl_notice {
    	width: 549px;
    	height: 291px;
    	background: url(../images/top/bl_notice_bg_sp.png) center / contain no-repeat;
	}
	#intro .bl_notice_body{
		padding-top: 14px;
	}
	#intro .bl_notice_ttl {
    	width: 259px;
    	height: 51px;
    	font-size: 32px;
    	margin-bottom: 22px;
    	letter-spacing: 2.8px;
 }
	#intro .bl_notice_txt {
    	padding-right: 27px;
	}
	#intro .bl_notice_txt a img {
    	width: 300px;
 }
	#intro .bl_notice_txt a {
    	padding-right: 57px;
 }
	#intro .bl_notice_txt a::before {
    	width: 32px;
    	height: 32px;
    	top: 39px;
    	right: 61px;
 }
	#intro .bl_notice_txt a::after {
    	top: 47px;
    	right: 70px;
    	border-width: 8.5px 0 8.5px 11px;
 }
}
/*=======================================================
NEWS
=======================================================*/
#news {
    background: url(../images/top/news_bg.png) top center no-repeat;
	padding-top: 52px;
	padding-bottom: 45px;
}
#news .el_sec_mainTtl {
	font-size: 34px;
	margin-bottom: 15px;
	color: #222;
}
#news .el_btn {
	width: 236px;
	height: 46px;
	font-size: 20px;
}
@media screen and (max-width : 750px){
	#news {
    	background: url(../images/top/news_bg_sp.png) top center no-repeat;
		padding-bottom: 65px;
	}
	#news .el_sec_mainTtl {
    	font-size: 44px;
    	margin-bottom: 30px;
	}
	#news .el_btn {
		width: 352px;
		height: 69px;
		font-size: 30px;
	}
}