@charset "UTF-8";



/* color */
:root {
	--bg:#A16F8C;
	--sub-bg:#EDEDED;
	--thin-bg:#FFECB2;
	--grad-bg-top:#FFEABF;
	--grad-bg-bottom:#946F00;

	--error-color:#F00;
}



/* btn */
:root {
	--btn-bg-top:#EBEBEB;
	--btn-bg-bottom:#CCC;
	--btn-color:#1A1A1A;
}



/* mail */
:root {
	--distribution-color:#1A1A1A;
	--quick-push-color:#1A1A1A;
	--qr-code-border:#888;
	--qr-code-bg:#FFF;
}



html {font-size:10px;}
body {font-size:1.2rem;}


@media screen and (min-width:768px) {
	body {font-size:1.4rem;}
}



/* bg */
.bg,
#footer_bnr {background:var(--sub-bg);}



/* mail */
#mail {padding-top:48px;}


@media screen and (min-width:768px) {
	#mail {padding-top:96px;}
}



/* distribution_contents */
.distribution_contents {padding:0 16px;}

.distribution_contents .contents {
	padding:1px;
	border:1px solid;
	border-image:linear-gradient(to top, var(--grad-bg-bottom), var(--grad-bg-top) 50%, var(--grad-bg-bottom)) 1;
	box-sizing:border-box;
}

.distribution_text {
	padding:24px 16px;
	color:var(--distribution-color);
	font-weight:500;
	background:var(--thin-bg);
}


@media screen and (min-width:768px) {
	.distribution_contents {padding:0 48px;}

	.distribution_text {padding:48px;}
}


@media screen and (min-width:1024px) {
	.distribution_text {text-align:center;}
}


@media screen and (min-width:1120px) {
	.distribution_contents {padding:0;}
}



/* quick_push */
#quick_push {
	margin-top:24px;
	padding-top:0;
}

.quick_push_text_contents {
	padding:1px;
	border:1px solid;
	border-image:linear-gradient(to top, var(--grad-bg-bottom), var(--grad-bg-top) 50%, var(--grad-bg-bottom)) 1;
	box-sizing:border-box;
}

.quick_push_text {
	padding:24px 16px;
	color:var(--quick-push-color);
	font-weight:500;
	background:var(--thin-bg);
}

.quick_push_text p:nth-of-type(2) {
	margin-top:8px;
	color:var(--error-color);
}

.quick_push_image {margin-top:24px;}


@media screen and (min-width:768px) {
	#quick_push {margin-top:48px;}

	.quick_push_text {
		padding:48px;
		text-align:center;
	}

	.quick_push_image {margin-top:48px;}
}



/* qr_code */
.qr_code {margin-top:16px;}

.qr_code ul {
	display:flex;
	flex-wrap:wrap;
}

.qr_code ul li {
	width:calc(50% - 4px);
	margin:16px 8px 0 0;
}

.qr_code ul li:nth-of-type(-n+2) {margin-top:0;}
.qr_code ul li:nth-of-type(2n) {margin-right:0;}

.qr_code ul li p:nth-of-type(1) {
	border:1px solid var(--qr-code-border);
	border-radius:8px;
	background:var(--qr-code-bg);
}

.qr_code ul li .btn {margin-top:8px !important;}


@media screen and (min-width:768px) {
	.qr_code {margin-top:24px;}

	.qr_code ul {justify-content:center;}

	.qr_code ul li {
		width:calc(33.3% - 6px);
		margin:24px 9px 0 0;
	}

	.qr_code ul li:nth-of-type(-n+3) {margin-top:0;}
	.qr_code ul li:nth-of-type(2n) {margin-right:9px;}
	.qr_code ul li:nth-of-type(3n) {margin-right:0;}

	.qr_code ul li .btn {width:100% !important;}
}


@media screen and (min-width:1024px) {
	.qr_code ul li {
		width:calc(20% - 8px);
		margin:0 10px 0 0;
	}

	.qr_code ul li:nth-of-type(2n),
	.qr_code ul li:nth-of-type(3n) {margin-right:10px;}

	.qr_code ul li:nth-of-type(5n) {margin-right:0;}
}



/* procedure */
#procedure {margin-top:24px;}

.procedure_pc {display:none;}

#procedure .btn_area {margin-top:0 !important;}

#procedure .btn_area p {width:calc(50% - 4px);}

#procedure .btn_area p a {
	padding:1px;
	font-size:1.4rem;
	font-weight:700;
	border:1px solid;
	border-image:linear-gradient(to top, var(--btn-bg-bottom), var(--btn-bg-top)) 1;
}

#procedure .btn_area p a span {
	padding:14px 0;
	color:var(--btn-color);
	text-align:center;
	display:block;
	background:linear-gradient(to top, var(--btn-bg-bottom), var(--btn-bg-top));
}

#procedure .btn_area p a.tab_active {border-image:linear-gradient(to top, var(--grad-bg-bottom), var(--grad-bg-top)) 1;}

#procedure .btn_area p a.tab_active span {background:linear-gradient(to top, var(--grad-bg-bottom), var(--grad-bg-top));}

#procedure .tab_inner:last-of-type {display:none;}

#tab_contents {margin-top:24px;}


@media screen and (min-width:768px) {
	#procedure {margin-top:48px;}

	#procedure .btn_area p {width:calc(50% - 12px);}

	#procedure .btn_area p a {
		font-size:1.6rem;
		font-weight:500;
	}
}


@media screen and (min-width:1024px) {
	.procedure_sp {display:none;}
	.procedure_pc {display:block;}

	#procedure .procedure_pc .btn_area p {
		padding:1px;
		border:1px solid;
		border-image:linear-gradient(to top, var(--grad-bg-bottom), var(--grad-bg-top)) 1;
		box-sizing:border-box;
	}

	#procedure .procedure_pc .btn_area p span {
		padding:14px 0;
		color:var(--btn-color);
		font-size:1.6rem;
		font-weight:700;
		text-align:center;
		display:block;
		background:linear-gradient(to top, var(--grad-bg-bottom), var(--grad-bg-top));
	}

	.procedure_contents {
		margin-top:24px;
		display:flex;
		justify-content:space-between;
	}

	.procedure_image {width:calc(50% - 12px);}
}



/* magazine */
.magazine_text {margin-bottom:8px;}

#magazine .btn_area {
	margin-top:8px;
	display:flex;
	justify-content:space-between;
}

#magazine .btn_area .btn {
	width:calc(50% - 1px);
	margin-top:0;
}


@media screen and (min-width:768px) {
	.magazine_text {margin-bottom:24px;}

	#magazine .btn_area {margin-top:24px !important;}

	#magazine .btn_area .btn {width:calc(50% - 4px);}
}


@media screen and (min-width:1024px) {
	.magazine_text {text-align:center;}
}