@charset "UTF-8";
/********************************************************************
	このcssはメインのcssです。
********************************************************************/

/********************************************************************
	common styles
********************************************************************/
#cmoaguild{
	position: relative;
	background-color: #cdf0f6;
}

#cmoaguild::before{
	content: "";
	position: absolute;
	inset: 0;
	background: url(/sol/auto/images/fix/feature/260810_cmoaguild/lp/bg-main.png) top center repeat-y;
	background-size: contain;
	opacity: .9;
	pointer-events: none;
	z-index: 0;
}

#cmoaguild > *{
	position: relative;
	z-index: 1;
}

/********************************************************************
	section spacing
********************************************************************/
#cmoaguild .top{padding: 5px 0 20px 0;}
#cmoaguild .result{padding: 20px 0 35px 0;}
#cmoaguild .recommend{padding: 75px 0 0 0;}
#cmoaguild .scroll{padding: 75px 0 200px 0;}

/********************************************************************
	section wrap
********************************************************************/
#cmoaguild .result__wrap{padding: 0 6% 0 6%;}
#cmoaguild .comics__wrap{padding: 25px 4% 60px 4%;}
#cmoaguild .recommend__wrap{padding: 0 6% 0 6%;}

/********************************************************************
	result
********************************************************************/
#cmoaguild .result__box {
	padding: 40px 8% 40px 8%;
	position: relative;
	border: 7px solid #4b304d;
	background: #fff;
}

#cmoaguild .result__box::before {
	content: "";
	position: absolute;
	inset: 4px;
	border: 3px solid #4b304d;
}

#cmoaguild .result__box p {
	text-align: left;
	color: #4b304d;
	font-size: 1.8rem;
	line-height: 1.2;
}

#cmoaguild .result__button{
	padding: 0 12% 0 12%;
	text-align: center;
}

/********************************************************************
	reset
********************************************************************/
#cmoaguild .reset-btn {cursor: pointer;}

/********************************************************************
	comics
********************************************************************/
#cmoaguild .comics__list{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

#cmoaguild .comics__item{
	width: calc((100% - 40px) / 3);
	display: flex;
	flex-direction: column;
}

#cmoaguild .comics__thumb{flex-grow: 1;}

#cmoaguild .comics__thumb img{border: 1px solid #4b304d;}

#cmoaguild .comics__purchase-image,
#cmoaguild .equip-btn{
	margin: 0 auto;
	max-width: 190px; 
}

/********************************************************************
	scroll
********************************************************************/
#cmoaguild .scroll{padding: 55px 0 0 0;}

#cmoaguild .scroll__track{overflow: hidden;}

#cmoaguild .scroll__content{
	display: flex;
	width: max-content;
	gap: 10px;
	animation: scroll 20s linear infinite;
}

@keyframes scroll{

	from{
		transform: translateX(0);
	}

	to{
		transform: translateX(-50%);
	}

}

#cmoaguild .scroll__group{
	display: flex;
	align-items: flex-end;
	gap: 10px;
	flex-shrink: 0;
}

#cmoaguild .scroll__bottom{
	height: 200px;
	background: #8cd3df;
}