/*=== index ====================================================================*/
.cnpTop_bannerArea{
	width					:100%;
	display				:flex;
	overflow-x			:scroll;
	scroll-snap-type	:x mandatory;
   -webkit-overflow-scrolling: touch;
}
.cnpTop_bannerArea::-webkit-scrollbar {
    display				:none;
}
.cnpTop_banner{
	flex-shrink			:0;
	width					:100%;
	aspect-ratio		:16 / 9;
	position				:relative;
	overflow				:hidden;
	scroll-snap-align	:start;
}
.cnpTop_banner img{
	width					:100%;
	height				:100%;
	object-fit			:scale-down;
}
.cnpTop_banner a{
	position				:absolute;
	inset					:0;
}

.advance_notice_tag{
	position				:absolute;
	top					:-1rem;
	left					:-11rem;
	background			:linear-gradient(to right bottom, #eb1c24, rgb(207,0,8));
	transform			:rotate(-45deg);
	padding				:0 10rem;
	padding-top			:6rem;
	padding-bottom		:1rem;
}
.advance_notice_tag p{
	font-size			:2rem;
	font-weight			:900;
	line-height			:1;
	color					:#f8f6f1;
}

.cnp_kardArea{
	width					:100%;
	margin-top			:3rem;
}
.cnp_kardArea h1{
	width					:100%;
	font-size			:2.5rem;
	font-weight			:900;
	position				:relative;
	text-align			:center;
}
.cnp_kardArea h1:after{
	content				:'';
	background			:linear-gradient(to right bottom, #eb1c24, rgb(207,0,8));
	border-radius		:20px;
	height				:1rem;
	width					:10%;
	position				:absolute;
	bottom				:-2rem;
	left					:50%;
	transform			:translateX(-50%);
}

.cnp_kardList{
	width					:100%;
	margin-top			:5rem;
}
.cnp_kardList:after{
	content				:"";
	display				:block;
	clear					:both;
}

.cnp_kard{
	float					:left;
	width					:calc(calc(100% / 2) - 0.5rem);
	background			:#fff;
	border-radius		:20px;
	overflow				:hidden;
	box-shadow			:2px 2px 4px #c8c8c8;
	position				:relative;
	transition			:.3s;
	padding-bottom		:2rem;
}
.cnp_kard:nth-child(2n){
	margin-left			:1rem;
}
.cnp_kard img{
	width					:100%;
	aspect-ratio		:16 / 9;
	
}
.cnp_kard h2{
	font-size			:1.6rem;
	font-weight			:900;
	object-fit			:scale-down;
	transition			:.3s;
	padding				:0 1rem;
	box-sizing			:border-box;
}
.cnp_kard a{
	position				:absolute;
	inset					:0;
}

.cnp_kard:hover{
	transition			:.3s;
	box-shadow			:none;
	transform			:translate3d(0, 5px, 0);
}
.cnp_kard:hover h2{
	color					:#eb1c24;
	transition			:.3s;
}

/*==============================================================================*/


/*=== content ==================================================================*/
.cnpPage_topArea{
	width					:100%;
}
.cnpPage_topArea img{
	width					:100%;
}
.cnpPage_index, .cnpPage_spanArea, .cnpPage_termsArea, .cnpPage_inquiryArea, .cnpPage_outLink{
	width					:100%;
	margin-top			:4rem;
}
.cnpPage_index h1{
	font-size			:2.5rem;
	font-weight			:900;
}

.cnpPage_spanArea h2, .cnpPage_termsArea h3, .cnpPage_inquiryArea h3{
	font-size			:1.6rem;
	font-weight			:900;
}
.cnpPage_spanArea p, .cnpPage_inquiryArea p, .cnpPage_outLink p{
	font-size			:1.6rem;
}

.cnpPage_termsArea p{
	font-size			:1.6rem;
	line-height			:2;
}

.cnpPage_inquiryArea a{
	font-size			:1.6rem;
	margin-top			:1rem;
	color					:#eb1c24;
	text-decoration	:none;
}

.cnpPage_outLink p{
	text-align			:center;
}
.cnpPage_outLinkBtn{
	width					:fit-content;
	padding				:1rem 5rem;
	text-align			:center;
	margin				:0 auto;
	margin-top			:1rem;
	background			:linear-gradient(to right bottom, #eb1c24, rgb(207,0,8));
	border-radius		:20px;
	box-sizing			:border-box;
	position				:relative;
}
.cnpPage_outLinkBtn p{
	font-size			:1.8rem;
	font-weight			:900;
	color					:#f8f6f1;
}


.cnpPage_backBtn{
	width					:80%;
	margin				:0 10%;
	margin-top			:2rem;
	padding				:1rem 0;
	text-align			:center;
	background			:linear-gradient(to right bottom, #eb1c24, rgb(207,0,8));
	border-radius		:20px;
	box-sizing			:border-box;
	position				:relative;
}
.cnpPage_backBtn p{
	font-size			:1.8rem;
	font-weight			:900;
	color					:#f8f6f1;
}
.cnpPage_outLinkBtn a, .cnpPage_backBtn a{
	position				:absolute;
	inset					:0;
}
	
@media screen and (min-width: 768px)
{
	.cnpPage_backBtn:hover, .cnpPage_outLinkBtn:hover
	{
		cursor				:pointer;
		filter				:opacity(60%);
	}
}
	
/*==============================================================================*/


/*=== メールリワード ===========================================================*/
.mail_rewards_top_area{
	width					:80%;
	margin				:0 10%;
	margin-bottom		:2rem;
}
.mail_rewards_top_thumbnail{
	width					:100%;
}
.mail_rewards_top_thumbnail img{
	width					:100%;
	aspect-ratio		:1 / 1;
	object-fit			:scale-down;
}
.mail_rewards_top_name{
	width					:100%;
	margin-top			:2rem;
}
.mail_rewards_top_name p:nth-of-type(1){
	font-size			:1.2rem;
	color					:#888;
}
.mail_rewards_top_name p:nth-of-type(2){
	font-size			:1.6rem;
	font-weight			:900;
}
.mail_rewards_top_status{
	margin-top			:1.6rem;
}
.mail_rewards_top_status p:nth-of-type(1){
	font-size			:1.6rem;
	font-weight			:900;
	color					:#3f48cc;
}
.completion p:nth-of-type(1){
	color					:#FFA500;
}

.mail_rewards_top_status p span:nth-of-type(1){
	font-size			:1.2rem;
	font-weight			:400;
}
.mail_rewards_top_status p span:nth-of-type(2){
	font-size			:1rem;
	font-weight			:400;
}
.mail_rewards_top_status p:nth-of-type(2){
	font-size			:1.4rem;
	color					:#888;
}
.mail_rewards_top_receiveBox{
	width					:80%;
	margin				:0 10%;
	margin-top			:2rem;
}
.mail_rewards_top_receiveBox p{
	font-size			:1.4rem;
	color					:#888;
}
.mail_rewards_top_receiveForm{
	width					:100%;
}
.mail_rewards_top_receiveForm form{
	width					:100%;
}
.mail_rewards_top_receiveForm p{
	font-size			:1.4rem;
	color					:#888;
}
.mail_rewards_top_receiveForm input[type=email], .mail_rewards_top_receiveForm input[type=password]{
	width					:100%;
	font-size			:1.6rem;
	border-radius		:10px;
	box-sizing			:border-box;
	padding				:1rem;
	border				:1px solid #ddd;
}
.mail_rewards_top_receiveForm input[type=email]:focus, .mail_rewards_top_receiveForm input[type=password]:focus{
	outline				:none;
	background			:#C5DFFF;
}
.mail_rewards_top_receiveForm input[type=submit]{
	width					:100%;
	padding				:1rem 0;
	box-sizing			:border-box;
	border-radius		:20px;
	margin-top			:2rem;
	margin-bottom		:10rem;
	background			:linear-gradient(to right bottom, #eb1c24, rgb(207,0,8));
	color					:#f8f6f1;
	font-size			:1.6rem;
	font-weight			:900;
	border				:none;
	box-shadow			:2px 2px 4px #c8c8c8;
}
	
/*==============================================================================*/