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


/*=======================================================
MV
=======================================================*/
.bl_lower_mv_ttl::before{
	background: url(../images/history/mv_img01.png) top left / contain no-repeat;
	width: 82px;
	height: 82px;
	top: -8px;
	left: -42px;
}
.bl_lower_mv_ttl::after{
	background: url(../images/history/mv_img02.png) top right / contain no-repeat;
	width: 80px;
	height: 77px;
	top: -9px;
	right: -40px;
}
@media screen and (max-width : 750px){
	.bl_lower_mv_ttl::before{
		width: 128px;
		height: 128px;
		top: -14px;
		left: -57px;
	}
	.bl_lower_mv_ttl::after{
		width: 120px;
		height: 115px;
		top: -10px;
		right: -54px;
	}
}

/*=======================================================
共通
=======================================================*/
main{
	background: #FCFBF7;
}
.ly_cont_inner{
	width: 672px;
}
.bl_sec_mainTtl{
	font-size: 26px;
}
.ly_cont_main:nth-of-type(2){
	width: auto;
	margin-left: -352px;
	padding-bottom: 56px;
}
@media screen and (max-width : 750px){
	.ly_cont_inner{
		width: 670px;
	}
	.bl_sec_mainTtl{
		font-size: 40px;
	}
	.ly_cont_main:nth-of-type(2){
		margin-left: 0;
		padding-bottom: 0;
	}
	.bl_aside_item{
		padding-bottom: 28px;
	}
}

/*=======================================================
アルゴリズムとは
=======================================================*/
#algorithm .ly_cont_inner{
	padding: 0 0 56px 0;
}
#algorithm .bl_txt + .bl_txt{
	margin-top: 20px;
}
@media screen and (max-width : 750px){
	#algorithm .ly_cont_inner{
		padding: 0 0 112px 0;
	}
	#algorithm .bl_txt + .bl_txt{
		margin-top: 25px;
	}
}

/*=======================================================
主なGoogleのアルゴリズムについて
=======================================================*/
#main_algorithm .ly_cont_inner{
	padding: 0 0 56px 0;
}
#main_algorithm .bl_media{
	border: 1px solid #76B9FF;
	border-radius: 16px;
	background: #fff;
	padding-top: 16px;
}
#main_algorithm .bl_media +.bl_media{
	margin-top: 32px;
}
#main_algorithm .bl_media_ttl{
	color: #7289FF;
	font-size: 24px;
	/* border-bottom: 1px solid #76B9FF; */
	padding-left: 16px;
	padding-bottom: 3px;
	position: relative;
}
#main_algorithm .bl_media_ttl::after{
	content: '';
	position: absolute;
	background: #76B9FF;
	width: 672px;
	height: 1px;
	bottom: 0;
	left: 0;
}
#main_algorithm .bl_media_imgWrapper{
	width: 232px;
}
#main_algorithm .bl_media_body{
	width: 672px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: flex-start;
	padding: 24px 16px 21px;
}
#main_algorithm .bl_txt{
	width: 392px;
	letter-spacing: 0.68px;
}
#main_algorithm .bl_media_body > * + *{
	margin-top: 0;
}
@media screen and (max-width : 750px){
	#main_algorithm .ly_cont_inner{
		padding: 112px 0 112px 0;
	}
	#main_algorithm .bl_media{
		border: 2px solid #76B9FF;
		border-radius: 32px;
		padding-top: 29px;
	}
	#main_algorithm .bl_media +.bl_media{
		margin-top: 48px;
	}
	#main_algorithm .bl_media_ttl{
		font-size: 38px;
		padding-left: 40px;
		padding-bottom: 16px;
		line-height: 1.5;
		letter-spacing: 2.28px;
	}
	#main_algorithm .bl_media_ttl::after{
		width: 100%;
		height: 2px;
	}
	#main_algorithm .bl_media_body{
		padding: 32px 40px 48px;
	}
	#main_algorithm .bl_media_imgWrapper{
		margin-bottom: 32px;
	}
	#main_algorithm .bl_txt{
		width: 100%;
		letter-spacing: 1.68px;;
	}
}

/*=======================================================
アルゴリズムの歴史
=======================================================*/
#history{
	border-top: 2px dashed #76B9FF;
	border-bottom: 2px dashed #76B9FF;
	padding-top: 56px;
}
#history .ly_cont_inner{
	padding: 0 0 56px 0;
}
.bl_history_item + .bl_history_item{
	margin-top: 32px;
}
.bl_history_ttl{
	width: 672px;
	height: 48px;
	background: #BFDEFF;
	border-radius: 6px;
	display: flex;
	align-items: center;
	padding-left: 59px;
	padding-bottom: 3px;
	position: relative;
	cursor: pointer;
}
.bl_history_ttl span{
	padding-left: 20px;
}
.bl_history_ttl::before,
.bl_history_ttl::after{
	content: '';
	position: absolute;
}
.bl_history_ttl::before{
	background: url(../images/history/icon_history_ttl.png) top left / contain no-repeat;
	width: 27px;
	height: 24px;
	top: 12px;
	left: 10px;
}
.bl_history_ttl::after{
	background: url(../images/history/icon_plus.svg) top right / contain no-repeat;
	width: 24px;
	height: 24px;
	top: 12px;
	right: 24px;
	transition: all .2s ease-in-out;
}
.bl_history_item.open .bl_history_ttl::after{
	transform: rotate(135deg);
	transition: all .2s ease-in-out;
}
.bl_history_body{
	border: 4px solid #BFDEFF;
	border-radius: 0 0 6px 6px;
	background: #fff;
	margin-top: -4px;
	padding: 24px;
	cursor: pointer;
}
.bl_history_body .bl_txt{

}
.bl_history_body .bl_txt + .bl_txt{
	margin-top: 20px;
}
.bl_history_body .hp_color__orange{
	font-weight: normal;
}
.bl_history_body .bl_numList.bl_numList__circle{
	margin: 20px 0;
}
.bl_history_body .bl_numList.bl_numList__circle li + li{
	margin-top: 8px;
}
/* パンダ */
.bl_panda_list{
	margin: 20px 0;
}
.bl_panda_item{

}
.bl_panda_item + .bl_panda_item{
	margin-top: 20px;
}
.bl_panda_ttl{
	color: #76B9FF;
	position: relative;
	margin-bottom: 4px;
	padding-left: 1em;

}
.bl_panda_ttl::before{
	content: "・";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
}
.bl_panda_txt{
	padding-left: 1em;

}
@media screen and (max-width: 750px){
	#history{
		border-top: none;
		border-bottom: none;
		padding-top: 0;
	}
	#history .ly_cont_inner{
		padding: 0 0 112px 0;
	}
	.bl_history_ttl{
		width: 670px;
		height: auto;
		border-radius: 12px;
		padding: 20px 94px 28px 80px;
		font-size: 24px;
		line-height: 1.5;
	}
	.bl_history_ttl span{
		font-size: 30px;
		padding-left: 24px;
		width: 377px;
		letter-spacing: 1.8px;
	}
	.bl_history_ttl::before{
		width: 34px;
		height: 29px;
		top: calc(50% - 15px);
		left: 25px;
	}
	.bl_history_ttl::after{
		width: 32px;
		height: 32px;
		top: calc(50% - 15px);
		right: 32px;
	}
	.bl_history_body{
		border: 8px solid #BFDEFF;
		border-radius: 0 0 12px 12px;
		margin-top: -8px;
		padding: 32px 40px 48px;
	}
}

/*=======================================================
コアアルゴリズムのアップデートについて
=======================================================*/
#core_algorithm .ly_cont_inner{
	padding: 56px 0 0;
}
.bl_balloon{
	padding: 18px 24px 22px;
	margin-bottom: 48px;
	width: 564px;
	border: 1px solid #76B9FF;
	border-radius: 10px;
	background: #fff;
	position: relative;
}
.bl_balloon::before,
.bl_balloon::after{
	content: '';
	position: absolute;
}
.bl_balloon::before{
	background: url(../images/history/bubble.svg) top right / contain no-repeat;
	width: 28px;
	height: 22px;
	top: 142px;
	right: -21px;
}
.bl_balloon::after{
	background: url(../images/history/balloon_zombie.png) top right / contain no-repeat;
	width: 120px;
	height: 138px;
	top: 167px;
	right: -109px;
}

.bl_balloon .bl_txt + .bl_txt{
	margin-top: 20px;
}
@media screen and (max-width : 750px){
	#core_algorithm .ly_cont_inner{
		padding: 0 0 112px;
	}
	.bl_balloon{
		padding: 48px 40px;
		margin-bottom: 235px;
		width: 100%;
		border: 2px solid #76B9FF;
		border-radius: 20px;
	}
	.bl_balloon::before{
		width: 56px;
		height: 44px;
		top: 618px;
		right: 492px;
	}
	.bl_balloon::after{
		width: 200px;
		height: 231px;
		top: 606px;
		right: 232px;
	}
	.bl_balloon .bl_txt{
	letter-spacing: 1.68px;
	line-height: 1.5;
}
	.bl_balloon .bl_txt + .bl_txt{
		margin-top: 32px;
	}
}
/*=======================================================
コアアルゴリズムアップデートの対策
=======================================================*/
#measures.bl_measures{
	border: 1px solid #76B9FF;
	border-radius: 16px;
	padding: 16px 16px 24px;
	background: #fff;
}
.bl_measures_ttl{
	color: #7289FF;
	font-size: 24px;
	margin-bottom: 27px;
	position: relative;
}
.bl_measures_ttl::after{
	content: '';
	position: absolute;
	background: #76B9FF;
	width: 672px;
	height: 1px;
	bottom: -2px;
	left: -16px;
}
.bl_measures .bl_txt{

}
.bl_measures .bl_txt + .bl_txt{
	margin-top: 20px;
}
.bl_measures_list{
	margin: -16px 0 40px;
}
.bl_measures_listTtl{
	color: #fff;
	background: url(../images/history/ribbon01.svg) top left / contain no-repeat;
	position: relative;
	width: 309px;
	height: 36px;
	margin: 24px 0 -2px -24px;
	padding: 0 0 3px 48px;
}
.bl_measures_listTtl:nth-of-type(2){
	background: url(../images/history/ribbon02.svg) top left / contain no-repeat;
	width: 327px;
}
.bl_measures_listTtl:nth-of-type(3){
	background: url(../images/history/ribbon03.svg) top left / contain no-repeat;
	width: 337px;
}
.bl_measures_listTtl:last-of-type{
	background: url(../images/history/ribbon04.svg) top left / contain no-repeat;
	width: 210px;
}
.bl_numList > .bl_measures_listTtl:before{
	counter-increment: num;
	content: counter(num)'.';
	position: absolute;
	top: 0;
	left: 24px;
}

/* EAT意味 */
.bl_eat_list{
	margin: 20px 0;
}
.bl_eat + .bl_eat{
	margin-top: 16px;
}
.bl_eat_ttl{
	color: #76B9FF;
	position: relative;
	padding-left: 30px;
	margin-bottom: 4px;
}
.bl_eat_ttl::before{
	position: absolute;
	top: 0;
	left: 0;
}
.bl_eat:first-of-type .bl_eat_ttl::before{
	content: 'E：';
}
.bl_eat:nth-of-type(2) .bl_eat_ttl::before{
	content: 'E：';
}
.bl_eat:nth-of-type(3) .bl_eat_ttl::before{
	content: 'A：';
}
.bl_eat:last-of-type .bl_eat_ttl::before{
	content: 'T：';
}
.bl_eat .bl_txt{
	padding-left: 2rem;
}
@media screen and (max-width : 750px){
	#measures.bl_measures{
		border: 2px solid #76B9FF;
		border-radius: 32px;
		padding: 32px 40px 48px;
	}
	.bl_measures_ttl{
		font-size: 38px;
		letter-spacing: 2.28px;
		margin-bottom: 41px;
	}
	.bl_measures_ttl::after{
		width: 670px;
		height: 2px;
		bottom: -10px;
		left: -42px;
	}
	.bl_measures .bl_txt{
		letter-spacing: 1.68px;
		line-height: 1.5;
	}
	.bl_measures .bl_txt + .bl_txt{
		margin-top: 20px;
	}
	.bl_measures_list{
		margin: 48px 0 48px;
	}
	.bl_measures_listTtl,
	.bl_measures_listTtl:nth-of-type(n+2){
		background: url(../images/history/ribbon_sp.svg) top left / contain no-repeat;
		width: 646px;
		height: 72px;
		margin: 47px 0 3px -58px;
		padding: 5px 0 0 102px;
	}
	.bl_numList .bl_txt{
		padding-left: 45px;
	}
	.bl_numList > .bl_measures_listTtl:before{
		top: 5px;
		left: 58px;
	}

	/* EAT意味 */
	.bl_eat + .bl_eat{
		margin-top: 48px;
	}
	.bl_eat_ttl{
		padding-left: 47px;
		margin-bottom: 4px;
	}
	.bl_eat .bl_txt{
		padding-left: 3rem;
	}
}

/*=======================================================
aside
=======================================================*/
.bl_aside_item_ttl{
	margin-bottom: 19px;
}
.bl_aside_item_ttl::before{
	background: url(../images/history/icon_aside_ttl.svg) top left / contain no-repeat;
	width: 20px;
	height: 16px;
	top: 8px;
	left: 6px;
}
.bl_content_item{
	padding: 8px 10px 11px 40px;
	width: 304px;
	position: relative;
}
.bl_content_item + .bl_content_item{
	margin-top: 2px;
}
.bl_content_item::before{
	content: '';
	position: absolute;
	background: url(../images/history/icon_book.png) top left / contain no-repeat;
	width: 14px;
	height: 18px;
	top: 16px;
	left: 10px;
}
.bl_content_item:hover{
	background: #F2F2FF;
	border-radius: 4px;
}
.bl_content_item > a{
	font-size: 14px;
}
@media screen and (max-width : 750px){
	.bl_aside_item_ttl{
		margin-bottom: 19px;
	}
	.bl_aside_item_ttl::before{
		width: 40px;
		height: 31px;
		top: 25px;
		left: 17px;
	}
	.bl_content_item{
		padding: 24px 10px 27px 75px;
		width: 100%;
	}
	.bl_content_item + .bl_content_item{
		margin-top: 8px;
	}
	.bl_content_item::before{
		width: 32px;
		height: 43px;
		top: 29px;
		left: 19px;
	}
	.bl_content_item:hover{
		border-radius: 8px;
	}
	.bl_content_item > a{
		font-size: 28px;
	}
}