@charset "utf-8";

/* index.css */

#wrapper {
	padding: 0 0 4.2rem;
}

/* header------------------------------------------ */
header {
	position: relative;
	padding-top: 3.3rem;
	padding-bottom: 4.0rem;

	border-top: 15px solid #E50012;
	border-bottom: 10px solid #E50012;
}

header::before {
	content: "";
	position: absolute;
	bottom: -54px;
	left: 50%;
	border: 20px solid transparent;
	border-top: 40px solid #FFFFFF;
	z-index: 2;
	transform: translateX(-50%);
}

header::after {
	content: "";
	position: absolute;
	bottom: -80px;
	left: 50%;
	border: 25px solid transparent;
	border-top: 50px solid #E50012;
	z-index: 1;
	transform: translateX(-50%);
}

header .header-pinkbg {
	background-image: url(../images/header_bg_01.jpg);
	background-size: cover;
	background-position: center;

	/* width: 100%;
	background: url("../images/header_bg_04.png") right center no-repeat;
	background-size: contain; */
}

header .header-inner {
	width: 100%;
	max-width: 724px;
	margin: 0 auto;
	padding-left: 2.0rem;
	padding-right: 2.0rem;

}



.header-inner ul {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	width: 73.206%;
	margin: 0 auto 5rem auto;
}

.header-inner ul li {
	width: 45.664%;
}

/* .header-inner h1 {
	width: 100%;
	background: url("../images/head_lp_title_bg_03.png") right center no-repeat;
	background-size: contain;
} */
.header-inner .main-img {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.header-inner h1 img {
	width: 96%;
	height: auto;
}

.header-inner p {
	font-weight: 900;
	font-size: 2.8rem;
	text-align: center;
	line-height: 1.3;
}

/* footer ----------------------------------------- */
footer {
	width: 100%;
	padding: 3.0rem 2.0rem;
	border-top: 10px solid #E50012;
	border-bottom: 2px solid #918B8A;
}

#footer-inner p.logo-asajuku {
	width: 34.53%;
	margin: 0 auto;
}

#footer-inner p.logo-collaboration {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 25.69%;
}

/* ------------------------------------------------ */
.btn {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
}

.btn a {
	width: calc(50% - 2em);
	max-width: calc(212px + 2em);
	margin: 0 1em;
	padding: 0.5rem 2.0rem;
	background-color: #FFFFFF;
	border: 2px solid #E50012;
	border-radius: 99em;
	font-weight: 900;
	font-size: 2.0rem;
	text-align: center;
	line-height: 1.2;
	color: #E50012;
}

.btn a:hover {
	background-color: #E50012;
	color: #FFFFFF;
}

ul.btn li {
	width: calc(50% - 2em);
	max-width: calc(212px + 2em);
	margin: 0 1em;
}

ul.btn li a {
	display: block;
	width: 100%;
	margin: 0;
}

.btn.order {
	width: 100%;
	max-width: calc(724px + 4.0rem);
	margin: 0 auto;
	padding: 6.0rem 2.0rem;
}

.btn.order a {
	width: 100%;
	max-width: 314px;
	margin: 0;
	font-size: 3.0rem;
}

/* ------------------------------------------------ */
#benefits {
	border-bottom: 4px solid #E50012;
	padding: 8.0rem 2.0rem 6.0rem;
	text-align: center;
}

#benefits h2 {
	display: inline-block;
	margin-bottom: 3.2rem;
	padding: 1.0rem 2.2rem;
	background-color: #E50012;
	border-radius: 99em;
	line-height: 1.2;
	font-weight: 900;
	font-size: 3.4rem;
	color: #FFFFFF;
}

#benefits h2+p {
	margin-bottom: 3.8rem;
	padding: 0 0 2.6rem;
	border-bottom: 2px solid #E50012;
	line-height: 1.2;
	font-weight: 900;
	font-size: 2.8rem;
}

.present01 h3 {
	margin-bottom: 1.8rem;
}

.present01 h3>span {
	display: block;
	margin-top: 1.4rem;
	line-height: 1.2;
	font-weight: 900;
	font-size: 2.8rem;
	color: #E50012;
}

.present01 .text {
	line-height: 1.3;
	font-size: 1.7rem;
	color: #e50113;
	text-align: left;
	margin-bottom: 25px;
	letter-spacing: 1px;
}

.present01 ul {
	margin-bottom: 2.4rem;
	margin-top: 5.2rem;
}

.present01 ul .red-26 {
	margin-top: 1.4rem;
	line-height: 1.2;
	font-weight: 900;
	font-size: 2.6rem;
	color: #E50012;
}

.present01 ul .red-26>span {
	font-weight: 900;
	font-size: 2.2rem;
	color: #000;
}

.present01 ul .black-28 {
	display: block;
	margin-top: 1.2rem;
	line-height: 1.2;
	font-weight: 900;
	font-size: 2.8rem;
	color: #000;
	margin-bottom: 2.4rem;
}



.present01-2 h3 {
	margin-bottom: 3.8rem;
	background: url("../images/benefits_02_img01_bg.png") center top no-repeat;
}

.present01-2 ul {
	margin-bottom: 2.4rem;
	margin-left: 4.2rem;
	margin-right: 4.2rem;
}



.present02 h3 {
	margin-bottom: 3.8rem;
	background: url("../images/benefits_02_img01_bg.png") center top no-repeat;
}


.present02 h3>.red38 {
	display: block;
	font-weight: 900;
	font-size: 3.8rem;
	color: #E50012;
}

.present02 h3>.red22 {
	display: block;
	margin-top: 2.8rem;
	font-weight: 900;
	font-size: 2.2rem;
	color: #E50012;
}

.present02 ul {
	display: flex;
	flex-flow: row nowrap;
	margin-bottom: 3.0rem;
}

.present02 .small {
	font-size: 0.9rem;
	margin-bottom: 3.8rem;
	line-height: 1.6;
}






p.closing {
	margin-bottom: 4.2rem;
	padding: 3.6rem 0 3.2rem;
	border-top: 2px solid #E50012;
	border-bottom: 2px solid #E50012;
	text-align: center;
	font-weight: 900;
	font-size: 3.8rem;
	color: #E50012;
}

p.closing small {
	display: block;
	margin-top: 2.0rem;
	line-height: 1.3;
	font-weight: 500;
	font-size: 1.4rem;
	color: #000000;
}

/* ------------------------------------------------ */
#sample {
	border-bottom: 4px solid #E50012;
	padding: 6.0rem 2.0rem;
}

#sample h2 {
	margin-bottom: 3.2rem;
	text-align: center;
	font-weight: 900;
	font-size: 3.8rem;
	color: #E50012;
}

#sample h2+p {
	margin-bottom: 3.4rem;
	line-height: 1.8;
}

.np-sample {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	margin-bottom: 4.2rem;
}

.np-sample>div {
	width: 42%;
	text-align: center;
}

.np-sample figcaption {
	margin-top: 1.4rem;
	text-align: left;
	font-size: 1.3rem;
}

.np-sample p {
	margin-top: 1em;
	text-align: left;
	line-height: 1.4;
	font-size: 1.5rem;
}

/* ------------------------------------------------ */
#howto {
	border-bottom: 4px solid #E50012;
	padding: 6.0rem 2.0rem;
}

#howto h2 {
	margin-bottom: 6.4rem;
	text-align: center;
	font-weight: 900;
	font-size: 3.8rem;
	color: #E50012;
}

.guide {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

.guide>div {
	width: 46%;
	margin-bottom: 8%;
}

.guide>div>a {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	width: 100%;
}

.guide h3 {
	width: 100%;
	margin-bottom: 1.5rem;
	font-weight: 900;
	font-size: 1.8rem;
	color: #E50012;
}

.guide p {
	width: 46.52%;
	line-height: 1.5;
	font-size: 1.4rem;
}

.guide figure {
	width: 45.14%
}

/* ------------------------------------------------ */
#review {
	border-bottom: 4px solid #E50012;
	padding: 6.0rem 2.0rem;
}

#review h2 {
	margin-bottom: 3.2rem;
	text-align: center;
	font-weight: 900;
	font-size: 3.8rem;
	color: #E50012;
}

#review h2+p {
	margin-bottom: 4.2rem;
	line-height: 1.5;
	font-size: 1.8rem;
}

#review a.item {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	width: 100%;
	padding-bottom: 4.2rem;
}

#review .text {
	width: 65.99%;
}

#review .text h3 {
	margin-bottom: 1.5rem;
	font-weight: 900;
	font-size: 2.0rem;
	color: #E50012;
}

#review .text p {
	line-height: 1.5;
	font-size: 1.4rem;
}

#review .text p+p {
	margin-top: 1rem;
}

#review .item figure {
	width: 27.95%
}

/* ================================================ */
@media (max-width: 640px) {

	span.sp-in-block {
		display: inline-block;
	}

	/* footer ----------------------------------------- */
	#footer-inner p.logo-asajuku {
		width: 60%;
		margin: 0 auto;
		text-align: center;
	}

	#footer-inner p.logo-collaboration {
		position: static;
		margin: 2.4rem auto 0;
		text-align: center;
		width: 50%;
	}

	/* ------------------------------------------------ */
	.btn {
		flex-flow: row wrap;
	}

	.btn a {
		width: calc(100% - 2em);
		max-width: calc(212px + 2em);
	}

	ul.btn li {
		width: calc(100% - 2em);
	}

	ul.btn li+li {
		margin-top: 1.25em;
	}

	/* ------------------------------------------------ */
	/*.present01 ul {
		flex-flow: row wrap;
		justify-content: center;
	}

	.present01 ul li:nth-of-type(1) {
		width: 100%;
		margin-bottom: 1.6rem;
	}

	.present01 ul li:nth-of-type(2) {
		width: 47%;
	}

	.present01 ul li:nth-of-type(3) {
		width: 53%;
	}*/

	.present01-2 ul {
		margin-left: 0;
		margin-right: 0;
	}

	.present02 ul {
		flex-flow: row wrap;
	}

	.present02 ul li {
		width: 100%;
	}

	.present02 ul li:last-child {
		width: 42%;
	}

	.present02 ul li+li {
		margin-top: 1.6rem;
	}

	/* ------------------------------------------------ */
	.guide {
		display: block;
	}

	.guide>div {
		width: 100%;
		margin-bottom: 3.4rem;
	}

	.guide p {
		width: 65.99%;
	}

	.guide figure {
		width: 27.95%
	}
}

/* ================================================ */
@media (max-width: 480px) {

	.header-inner p {
		font-size: 3.0rem;
	}

	.np-sample {
		display: block;
	}

	.np-sample>div {
		width: 100%;
		text-align: center;
	}

	.np-sample>div:nth-of-type(2) {
		margin-top: 2.4rem;
		padding-top: 2.4rem;
		border-top: 1px solid #E8E8E8;
	}

	.np-sample figcaption {
		width: 80%;
		max-width: 280px;
		margin: 1.2rem auto 0;
	}

	.np-sample p {
		width: 80%;
		max-width: 280px;
		margin: 1em auto 0;
	}

	.present02 .small {
		font-size: 1.4rem;
		text-align: left;
	}

}



@media screen and (max-width: 640px) {
	.br-sp {
		display: none;
	}
}