@charset "utf-8";
:root {
  --green: #3ab913;
  --light-green: #e9f7e5;
  --light-yellow: #ffffba;
  --light-gray: #f3f4f4;
  --black: #0f1f1f;
  --red: #e50000;
}
@media screen and (min-width:391px) {
	.page {
		font-size: 1.15em;
		margin: 0 auto;
		padding: 0 0 3em 0;
		width: 940px;
	}
	.page h2 {
		margin: 0;
		padding: 0;
	}
	.page h3 {
		color: var(--green);
		font-size: 2.3em;
		margin: 1.5em 0 0 0;
		padding: 0;
		text-align: center;
	}
	.page .about {
		background-color: #daf2d2;
		padding: 1.55em 1em 0 1em;
	}
	.page .about h3 {
		color: var(--black);
		text-align: center;
		margin: 0;
		padding: 0;
	}
	.page .about h3 + p {
		border-bottom: solid 1px var(--black);
		margin: 0 0 1.25em 0;
		padding: 0.25em 0 1.25em 0;
		text-align: center;
	}
	.page .about h4 {
		color: var(--green);
		font-size: 1.55em;
		margin: 0 0 0.5em 0;
		padding: 0;
		text-align: center;
	}
	.page .about .voice {
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		width: 85%;
	}
	.page .about .voice li {
		width: 163px;
	}
	.page .feature ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.page .feature li {
		position: relative;
		width: 48%;
	}
	.page .feature li p {
		align-items: center;
		background-color: var(--light-yellow);
		border-radius: 50%;
		display: flex;
		height: 140px;
		justify-content: center;
		left: 0;
		margin: auto;
		position: absolute;
		right: 0;
		width: 140px;
		z-index: 1;
	}
	.page .feature li:nth-of-type(1) p img {
		width: 50%;
	}
	.page .feature li:nth-of-type(2) p img {
		width: 60%;
	}
	.page .feature li:nth-of-type(3) p img {
		width: 75%;
	}
	.page .feature li:nth-of-type(4) p img {
		width: 45%;
	}
	.page .feature li dl {
		background-color: var(--light-gray);
		margin: 3.8em 0 0.8em 0;
		padding: 5.5em 1.5em 1.5em 1.5em;
	}
	.page .feature li dl dt {
		color: var(--green);
		font-size: 1.35em;
		font-weight: bold;
		text-align: center;
	}
	.page .feature li dl dd {
		margin: 0;
		padding: 0;
		text-align: left;
	}
	.page .howtouse {
		border-top: solid 1px var(--black);
		margin-top: 2.5em;
	}
	.page .howtouse p {
		padding: 0.35em 1.75em;
	}
	.page .flow {
		background-color: var(--light-green);
		margin: 3.5em 0 0 0;
		padding: 0 1.8em 1em 1.8em;
	}
	.page .flow h3 {
		padding: 0.75em 0 0 0;
	}
	.page .flow ul {
		margin: 0 auto;
		padding: 1em 0 1.75em 0;
		width: 80%;
	}
	.page .flow li {
		border-bottom: solid 1px var(--black);
		display: flex;
		justify-content: space-between;
		padding: 2em 1.25em;
	}
	.page .flow li:first-of-type {
		padding-top: 0;
	}
	.page .flow li:last-of-type {
		border-bottom: none;
		padding-bottom: 0;
	}
	.page .flow li p:first-of-type {
		align-items: center;
		background-color: var(--green);
		border-radius: 50%;
		color: #FFF;
		display: flex;
		font-size: 1.35em;
		font-weight: bold;
		height: 43px;
		justify-content: center;
		line-height: 1;
		width: 43px;
	}
	.page .flow li p {
		margin: 0;
		width: 85%;
	}
	.page .flow li img.pc {
		padding: 1em 0 0 0;
		width: 100%;
	}
	.page .flow li img.sp {
		display: none;
	}
	.page .flow li strong {
		color: var(--red);
	}
	.page .flow li p .note {
		display: block;
		margin: 0.75em 0 0 0;
	}
	.page .caution {
		margin-top: 4em;
	}
	.page .caution ul {
		margin: 1em auto;
		width: 94%;
	}
	.page .caution ul li {
		display: flex;
		padding: 0.25em 0;
	}
	.page .caution ul li::before {
		content: "●";
		display: block;
		margin: 0 0.25em 0 0;
	}
	.page .faq {
		margin-top: 4em;
	}
	.page .faq h4 {
		font-size: 1.25em;
		margin-top: 3em;
	}
	.page .faq h4::before {
		content: "【 ";
	}
	.page .faq h4::after {
		content: " 】";
	}
	.page .faq dl {
		background-color: var(--light-green);
		margin: 1em 0 0 0;
		padding: 0;
	}
	.page .faq dl.close {
		padding-bottom: 1em;
	}
	.page .faq dt {
		cursor: pointer;
		display: flex;
		justify-content: space-between;
		padding: 1em;
	}
	.page .faq dt::after {
		content: "";
		display: inline-block;
		background-image: url("/parts/contents/shop-receive/arrow.svg");
		background-position: top right;
		background-repeat: no-repeat;
		background-size: 2em;
		width: 2em;
		height: 1.25em;
	}
	.page .faq dl.close dt::after {
		background-position: bottom left;
		transform: rotateZ(180deg);
	}
	.page .faq dd {
		background-color: #FFF;
		display: none;
		margin: 0 1em;
		padding: 0.75em 1em;
	}
}
@media screen and (max-width:390px) { 
	.page {
		font-size: 1em;
		margin-bottom: 2em;
	}
	.page h2 {
		margin: 0;
		padding: 0;
	}
	.page h3 {
		background-color: var(--green);
		color: #FFF;
		font-size: 1.55em;
		margin: 1.5em 0 0 0;
		padding: 0;
		text-align: center;
	}
	.page .about {
		background-color: #daf2d2;
		padding: 1.55em 1em 0 1em;
	}
	.page .about h3 {
		background-color: transparent;
		color: var(--black);
		text-align: center;
		margin: 0;
		padding: 0.15em 0;
	}
	.page .about h3 + p {
		border-bottom: solid 1px var(--black);
		margin: 0 0 1.25em 0;
		padding: 0.25em 0 1.25em 0;
		text-align: left;
	}
	.page .about h4 {
		color: var(--green);
		font-size: 1.05em;
		margin: 0;
		padding: 0;
		text-align: center;
	}
	.page .about .voice {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 auto;
		width: 90%;
	}
	.page .about .voice li {
		margin: 1em 0 0 0;
		width: 47%;
	}
	.page .feature ul {
		margin: 0 auto;
		width: 92%;
	}
	.page .feature li {
		border-bottom: solid 1px var(--black);
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 1em 0;
	}
	.page .feature li:last-of-type {
		border-bottom: none;
		padding-bottom: 0;
	}
	.page .feature li p {
		align-items: center;
		background-color: var(--light-yellow);
		border-radius: 50%;
		display: flex;
		height: 80px;
		justify-content: center;
		width: 80px;
	}
	.page .feature li:nth-of-type(1) p img {
		width: 50%;
	}
	.page .feature li:nth-of-type(2) p img {
		width: 60%;
	}
	.page .feature li:nth-of-type(3) p img {
		width: 75%;
	}
	.page .feature li:nth-of-type(4) p img {
		width: 45%;
	}
	.page .feature li dl {
		margin: 0;
		padding: 0;
		width: 70%;
	}
	.page .feature li dl dt {
		color: var(--green);
		font-size: 1.15em;
		font-weight: bold;
	}
	.page .feature li dl dd {
		margin: 0;
		padding: 0;
	}
	.page .howtouse {
		margin-top: 2.5em;
	}
	.page .howtouse h3 {
		margin-bottom: 0.5em;
	}
	.page .howtouse p {
		padding: 0.35em 1.75em;
	}
	.page .flow {
		background-color: var(--light-green);
		margin: 2em 0 0 0;
		padding: 0 0 1em 0;
	}
	.page .flow h3 {
		background-color: transparent;
		color: var(--green);
		padding: 0.75em 0 0 0;
	}
	.page .flow ul {
		margin: 0 auto;
		padding: 1em 0;
		width: 92%;
	}
	.page .flow li {
		border-bottom: solid 1px var(--black);
		display: flex;
		justify-content: space-between;
		padding: 2em 0;
	}
	.page .flow li:first-of-type {
		padding-top: 0;
	}
	.page .flow li:last-of-type {
		border-bottom: none;
		padding-bottom: 0;
	}
	.page .flow li p:first-of-type {
		align-items: center;
		background-color: var(--green);
		border-radius: 50%;
		color: #FFF;
		display: flex;
		font-size: 1.35em;
		font-weight: bold;
		height: 43px;
		justify-content: center;
		line-height: 1;
		width: 43px;
	}
	.page .flow li p {
		margin: 0;
		width: 82%;
	}
	.page .flow li img.pc {
		display: none;
	}
	.page .flow li img.sp {
		padding: 1em 0 0 0;
		width: 100%;
	}
	.page .flow li strong {
		color: var(--red);
	}
	.page .flow li p .note {
		display: block;
		margin: 0.75em 0 0 0;
	}
	.page .caution {
	}
	.page .caution ul {
		margin: 1em auto;
		width: 92%;
	}
	.page .caution ul li {
		display: flex;
		padding: 0.25em 0;
	}
	.page .caution ul li::before {
		content: "●";
		display: block;
		margin: 0 0.25em 0 0;
	}
	.page .faq > div {
		margin: 0 auto;
		width: 92%;
	}
	.page .faq h4 {
		font-size: 1.25em;
		margin: 1.5em 0 0 0;
	}
	.page .faq h4::before {
		content: "【 ";
	}
	.page .faq h4::after {
		content: " 】";
	}
	.page .faq dl {
		background-color: var(--light-green);
		margin: 1em 0 0 0;
		padding: 0;
	}
	.page .faq dl.close {
		padding-bottom: 1em;
	}
	.page .faq dt {
		cursor: pointer;
		display: flex;
		justify-content: space-between;
		padding: 1em;
	}
	.page .faq dt::after {
		content: "";
		display: inline-block;
		background-image: url("/parts/contents/shop-receive/arrow.svg");
		background-position: top right;
		background-repeat: no-repeat;
		background-size: 2em;
		width: 2em;
		height: 1.25em;
	}
	.page .faq dl.close dt::after {
		background-position: bottom left;
		transform: rotateZ(180deg);
	}
	.page .faq dd {
		background-color: #FFF;
		display: none;
		margin: 0 1em;
		padding: 0.75em 1em;
	}
}