@charset "UTF-8";
/* ===========================================
 * Totop
 * ======================================== */
.totopWrap {
	margin-inline: auto;
}
.totopInner {
	position: relative;
	z-index: auto;
	margin-inline: auto;
}
.totopInner > a {
	position: fixed;
	z-index: 1;
	right: max(calc((100vw - 1024px) / 2 + 50px), 50px);
	bottom: calc(100vh / 20);
	width: 75px;
	height: 75px;
	border-radius: 9999px;
	background-color: #40210F;
	display: block;
}
.totopInner > a::before {
	position: absolute;
	z-index: 2;
	inset: 0;
	bottom: 10px;
	content: "";
	width: 37px;
	height: 32px;
	margin: auto;
	clip-path: polygon(50% 15%, 0% 100%, 100% 100%);
	background-color: #FFFFFF;
}
@media screen and (max-width: 767px) {
	.totopInner > a {
		right: 15px;
		bottom: calc(100vh / 10);
		width: 45px;
		height: 45px;
	}
	.totopInner > a::before {
		bottom: 5px;
		content: "";
		width: 20px;
		height: 16px;
		margin: auto;
		clip-path: polygon(50% 15%, 0% 100%, 100% 100%);
		background-color: #FFFFFF;
	}
}

/* ===========================================
 * TOP
 * ======================================== */
.topWrap {
	padding: 50px 0;
	margin-inline: auto;
	background-color: #FEF1DD;
}
.topInner {
	width: 1000px;
	padding: 0 50px;
	margin-inline: auto;
}
.topInner > h1 {
	margin-bottom: 50px;
	display: block;
}
.topBox {
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 50px;
}
.topGroup {
	width: fit-content;
	text-align: center;
	display: grid;
}
.topGroup > strong {
	font: 700 6.6rem / 1.2 "Zen Maru Gothic", serif;
	color: #005E2D;
	display: block;
}
.topGroup > strong > span {
	font: bold 2.8rem / 1.5	"Zen Maru Gothic", serif;
	color: #F08300;
	display: block;
}
.topGroup > a, .topBox > a {
	width: 100%;
	padding: 0.5em 2em;
	margin-inline: auto;
	text-align: center;
	font: bold 2.0rem / 1.5 "Zen Maru Gothic", serif;
	color: #ffffff;
	border-radius: 9999px;
	background-color: #005E2D;
	display: block;
}
@media screen and (max-width: 767px) {
	.topWrap {
		padding: 30px 0;
	}
	.topInner {
		width: min(100%, 346px);
		padding: 0 15px;
	}
	.topInner > h1 {
		margin-bottom: 30px;
	}
	.topBox {
		grid-template-columns: auto 40%;
		grid-template-rows: auto auto;
		gap: 10px;
	}
	.topGroup {
		width: fit-content;
	}
	.topGroup > strong {
		font: 700 2.6rem / 1.2 "Zen Maru Gothic", serif;
	}
	.topGroup > strong > span {
			font: bold 1.2rem / 1.5	"Zen Maru Gothic", serif;
		}
	.topGroup > a, .topBox > a {
		font: bold 1.6rem / 1.5 "Zen Maru Gothic", serif;
		grid-column: 1 / 3;
		grid-row: 2 / 3;
	}
}

/* ===========================================
 * Contents
 * ======================================== */
.contentsWrap {
	padding: 50px 0;
	margin-inline: auto;
	color: #40210F;
	background-color: #FEF1DD;
}
.contentsInner {
	width: 1000px;
	margin-inline: auto;
}
.contentsInner > h2 {
	margin-bottom: 25px;
	text-align: center;
	font: 700 5.0rem / 1.5 "Zen Maru Gothic", serif;
	display: block;
}
.contentsBox {
	width: fit-content;
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(2, auto);
	gap: 25px;
}
.contentsGroup {
	margin-bottom: 40px;
	display: grid;
	gap: 1em;
}
.contentsGroup > b {
	font: 700 3.5rem / 1.5 "Zen Maru Gothic", serif;
	color: #F08300;
}
.contentsGroup > p {
	font: 700 2.4rem / 1.5	"Zen Maru Gothic", serif;
}
.contentsGroup > a {
	width: 100%;
	padding: 0.5em 2em;
	margin-inline: auto;
	text-align: center;
	font: bold 2.0rem / 1.5 "Zen Maru Gothic", serif;
	color: #40210F;
	border: 2px solid #40210F;
	border-radius: 9999px;
	background-color: #FFFFFF;
	display: block;
}
.contentsBoxFlow {
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 50px;
}
.contentsBoxFlow > li {
	position: relative;
	z-index: auto;
	margin-inline: auto;
}
.contentsBoxFlow > li::after {
	position: absolute;
	z-index: auto;
	content: "";
	top: 85px;
	right: -40px;
	width: 27px;
	height: 30px;
	background-color: #F08300;
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
.contentsBoxFlow > li:last-child::after {
	display: none;
}
.contentsBoxFlow > li > dl > dt {
	text-align: center;
	font: bold 4.0rem / 1.5 "Zen Maru Gothic", serif;
	color: #F08300;
}
.contentsBoxFlow > li > dl > dd {
	font: bold 1.8rem / 1.5 "Zen Maru Gothic", serif;
	color: #40210F;
}
@media screen and (max-width: 767px) {
	.contentsWrap {
		padding: 30px 0;
	}
	.contentsInner {
		width: min(100%, 346px);
		padding: 0 15px;
	}
	.contentsInner > h2 {
		margin-bottom: 0.5em;
		font: 700 2.0rem / 1.5 "Zen Maru Gothic", serif;	
	}
	.contentsBox {
		display: none;
	}
	.contentsGroup {
		margin-bottom: 40px;
		gap: 1em;
	}
	.contentsBoxFlow {
		grid-template-columns: auto;
		grid-template-rows: repeat(3, auto);
		gap: 50px;
	}

	.contentsBoxFlow > li {
		display: grid;
		justify-content: center;
		grid-template-columns: auto 50%;
		gap: 10px;
	}
	.contentsBoxFlow > li::after {
		top: initial;
		right: 0;
		left: 0;
		bottom: -35px;
		width: 26px;
		height: 20px;
		margin: auto;
		clip-path: polygon(50% 100%, 0 0, 100% 0);
	}
	.contentsBoxFlow > li > dl > dt {
		text-align: left;
		font: bold 1.6rem / 1.5 "Zen Maru Gothic", serif;
	}
	.contentsBoxFlow > li > dl > dd {
		font: bold 1.2rem / 1.5 "Zen Maru Gothic", serif;
	}
}

/* ===========================================
 * Example
 * ======================================== */
.exampleWrap {
	padding-bottom: 35px;
	background-color: #FEF1DD;
}
.exampleInner {
	width: 1000px;
	padding: 0 50px;
	margin-inline: auto;
}
.exampleText {
	margin-bottom: 25px;
	text-align: center;
	font: bold 4.0rem / 1.25 "Zen Maru Gothic", serif;
	color: #F08300;
}
.exampleText > span {
	font: bold 6.0rem / 1.5 "Zen Maru Gothic", serif;
	color: #005E2D;
}
.exampleLinkContainer {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: repeat(3, auto);
	gap: 35px;
}
.exampleLink {
	width: 100%;
	height: 100px;
	text-align: center;
	font: bold 3.2rem / 1.0 "Zen Maru Gothic", serif;
	color: #FFFFFF;
	border-radius: 9999px;
	background-color: #005E2D;
	display: flex;
	align-items: center;
	justify-content: center;
}
.exampleLink > span {
	display: block;
}
@media screen and (max-width: 767px) {
	.exampleWrap {
		padding-bottom: 45px;
	}
	.exampleInner {
		width: min(100%, 346px);
		padding: 0 15px;
	}
	.exampleText {
		margin-bottom: 12px;
		font: bold 1.7rem / 1.25 "Zen Maru Gothic", serif;
		}
	.exampleText > span {
		font: bold 2.6rem / 1.5 "Zen Maru Gothic", serif;
	}
	.exampleLinkContainer {
		gap: 16px;
	}
	.exampleLink {
		height: 48px;
		font: bold 1.4rem / 1.2 "Zen Maru Gothic", serif;
	}
}


/* ===========================================
 * PRODUCT
 * ======================================== */
.productWrap {
	padding: 50px 0;
	margin-inline: auto;
	color: #40210F;
	background-color: #FEF1DD;
}
.productInner {
	width: 1000px;
	margin-inline: auto;
}
.productInner > h2 {
	margin-bottom: 25px;
	text-align: center;
	font: 700 5.0rem / 1.5 "Zen Maru Gothic", serif;
	display: block;
}
.productInner > h2 > span {
	font: 700 4.0rem / 1.2 "Zen Maru Gothic", serif;
	color: #F08300;
	display: block;
}
.productBox {
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	justify-content: space-between;
	gap: 27px;
}
.productBox > li {
	width: fit-content;
}
.productBox > li > p {
	margin-top: 0.5em;
	text-align: center;
	font: bold 1.6rem / 1.5 "Zen Maru Gothic", serif;
}
.productBox > li > p > span {
	display: block;
}
@media screen and (max-width: 767px) {
	.productWrap {
		padding: 0 0 30px 0;
	}
	.productInner {
		width: min(100%, 346px);
		padding: 0 15px;
	}
	.productInner > h2 {
		margin-bottom: 15px;
		font: 700 2.0rem / 1.5 "Zen Maru Gothic", serif;
	}
	.productInner > h2 > span {
		font: 700 1.5rem / 1.2 "Zen Maru Gothic", serif;
	}
	.productBox {
		width: fit-content;
		grid-template-columns: repeat(2, 1fr);
		gap: 40px;
		row-gap: 15px;
		justify-content: center;
	}
	.productBox > li {
		width: min(100%, 120px);
	}
	.productBox > li > p {
		font: bold 1.2rem / 1.5 "Zen Maru Gothic", serif;
	}
}

/* ===========================================
 * Banner
 * ======================================== */
.bannerwrap {
	padding: 50px 0;
	margin-inline: auto;
	background-color: #FEF1DD;
}
.bannerInner {
	width: 1000px;
	padding: 0 50px;
	margin-inline: auto;
	display: grid;
	gap: 25px;
}
.bannerInner > p {
	width: min(100%, 800px);
	margin-inline: auto;
	display: block;
}
.bannerInner > a {
	width: fit-content;
	padding: 0.5em 2em;
	margin-inline: auto;
	font: 700 3.2rem / 1.0 "Zen Maru Gothic", serif;
	color: #ffffff;
	border-radius: 9999px;
	background-color: #40210F;
	display: block;
}
@media screen and (max-width: 767px) {
	.bannerwrap {
		padding: 30px 0;
	}
	.bannerInner {
		width: min(100%, 346px);
		padding: 0 15px;
		gap: 15px;
	}
	.bannerInner > p {
		width: min(100%, 280px);
	}
	.bannerInner > a {
		width: min(100%, 280px);
		font: 700 1.4rem / 1.5 "Zen Maru Gothic", serif;
	}
}

/* ===========================================
 * Flow
 * ======================================== */
.flowWrap {
	padding: 50px 0;
	margin-inline: auto;
	background-color: #FEF1DD;
}
.flowInner {
	width: 1000px;
	padding: 0 50px;
	margin-inline: auto;
	display: grid;
}
.flowInner h2 {
	margin-bottom: 25px;
	text-align: center;
	font: 700 5.0rem / 1.5 "Zen Maru Gothic", serif;
	display: block;
}
.flowInner h2 > span {
	font: 700 4.0rem / 1.2 "Zen Maru Gothic", serif;
	color: #F08300;
	display: block;
}
.flowBox {
	display: grid;
	gap: 50px;
}
.flowcard:last-child figure {
	width: fit-content;
}
.flowBox > li > h4 {
	margin-bottom: 25px;
	padding: 0.5em 1.5em;
	font: 700 2.0rem / 1.5 "Zen Maru Gothic", serif;
	background-color: #F6BD7F;
	display: block;
}
.flowGroup {
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
}
.flowGroup figure {
	width: calc((100% - (25px * 2)) / 3);
}
.flowGroup p {
	flex: 1;
	font: 700 1.6rem / 1.5 "Zen Maru Gothic", serif;
}
@media screen and (max-width: 767px) {
		.flowWrap {
		padding: 15px 0;
	}
	.flowInner {
		width: min(100%, 346px);
		padding: 0 15px;
	}
	.flowInner h2 {
		margin-bottom: 15px;
		font: 700 2.0rem / 1.5 "Zen Maru Gothic", serif;
	}
	.flowBox {
		gap: 30px;
	}
	.flowcard {

	}
	.flowBox > li > h4 {
		margin-bottom: 15px;
		font: 700 1.4rem / 1.5 "Zen Maru Gothic", serif;
	}
	.flowGroup {
		flex-direction: column;
		gap: 10px;
	}
	.flowGroup figure {
		width: 230px;
		margin-inline: auto;
	}
	.flowGroup p {
		font: 700 1.2rem / 1.5 "Zen Maru Gothic", serif;
	}
}

/* ===========================================
 * Store
 * ======================================== */
.storeWrap {
	padding: 50px;
	margin-inline: auto;
	background-color: #FEF1DD;
}
.storeInner {
	width: 1000px;
	margin-inline: auto;
}
.storeBox {
	padding: 25px 50px;
	border-radius: 30px;
	background-color: #6FBA2C;
	display: grid;
	grid-template-columns: repeat(2, auto);
	align-items: center;
	justify-content: space-between;
}
.storeBox h3 {
	margin-bottom: 0.25em;
	text-align: center;
	font: 700 4.0rem / 1.2 "Zen Maru Gothic", serif;
	color: #F5D660;
	letter-spacing: -0.03em;
	display: block;
}
.storeBox h3 > span {
	margin-bottom: 0.5em;
	font: 700 2.6rem / 1.2 "Zen Maru Gothic", serif;
	color: #ffffff;
	display: block;
}
.storeGroup a {
	width: 100%;
	padding: 0.25em 2em;
	margin-top: 25px;
	margin-inline: auto;
	text-align: center;
	font: 700 2.0rem / 1.5 "Zen Maru Gothic", serif;
	color: #40210F;
	border: 2px solid #40210F;
	border-radius: 9999px;
	background-color: #ffffff;
	display: block;
}
.storeBox p {
	font: 700 1.6rem / 1.5 "Zen Maru Gothic", serif;
	color: #FFFFFF;
}
@media screen and (max-width: 767px) {
	.storeWrap {
		padding: 30px 15px;
	}
	.storeInner {
		width: min(100%, 346px);
	}
	.storeBox {
		padding: 15px;
		border-radius: 10px;
		grid-template-columns: auto;
		gap: 15px;
	}
	.storeBox h3 {
		font: 700 1.8rem / 1.2 "Zen Maru Gothic", serif;
		
	}
	.storeBox h3 > span {
		margin-bottom: 0.25em;
		font: 700 1.8rem / 1.2 "Zen Maru Gothic", serif;
	}
	.storeGroup a {
		width: min(100%, 280px);
		padding: 0.25em 2em;
		margin-top: 10px;
		font: 700 1.4rem / 1.5 "Zen Maru Gothic", serif;
	}
	.storeBox p {
		font: 700 1.2rem / 1.5 "Zen Maru Gothic", serif;
	}
}

/* ===========================================
 * Question
 * ======================================== */
.questionWrap {
	padding: 50px 0;
	color: #40210F;
	margin-inline: auto;
	background-color: #F5D660;
}
.questioninner {
	width: 1000px;
	padding: 0 50px;
	margin-inline: auto;
}
.questioninner h2 {
	margin-bottom: 0.25em;
	text-align: center;
	font: 700 5.0rem / 1.2 "Zen Maru Gothic", serif;
	color: #40210F;
	display: block;
}
.questionBox {
	display: grid;
	gap: 25px;
}
.questionGroup > dt {
	font: 700 3.0rem / 1.5 "Zen Maru Gothic", serif;
}
.questionGroup > dt > span {
	width: 50px;
	font: 700 5.0rem / 1.5 "Zen Maru Gothic", serif;
	display: inline-block;
}
.questionGroup > dd {
	padding-left: 50px;
	font: 700 2.2rem / 1.5 "Zen Maru Gothic", serif;
}
.questionGroup > dd > picture {
	width: fit-content;
	margin-right: auto;
	display: block;
}
@media screen and (max-width: 767px) {
	.questionWrap {
		padding: 30px 0;
	}
	.questioninner {
		width: min(100%, 346px);
		padding: 0 15px;
	}
	.questioninner h2 {
		font: 700 2.0rem / 1.2 "Zen Maru Gothic", serif;
	}
	.questionBox {
		gap: 10px;
	}
	.questionGroup > dt {
		font: 700 1.8rem / 1.5 "Zen Maru Gothic", serif;
		text-indent: -25px;
		margin-left: 25px;
		
	}
	.questionGroup > dd {
		padding-left: 25px;
		font: 700 1.4rem / 1.5 "Zen Maru Gothic", serif;
	}
	.questionGroup > dt > span {
		width: 25px;
		font: 700 2.6rem / 1.5 "Zen Maru Gothic", serif;
		text-indent: 0;
	}
}

/* ===========================================
 * Point
 * ======================================== */
.pointWrap {
	padding: 50px 0;
	margin-inline: auto;
	color: #40210F;
	background-color: #FEF1DD;
}
.pointInner {
	width: 1000px;
	padding: 0 50px;
	margin-inline: auto;
}
.pointBox {
	display: grid;
	grid-template-columns: repeat(2, auto);
  gap: 50px;
	align-items: center;
	justify-content: center;
}
@media screen and (max-width: 767px) {
	.pointWrap {
		padding: 30px 0;
	}
	.pointInner {
		width: min(100%, 346px);
		padding: 0 15px;
	}
	.pointBox {
		gap: 15px;
	}
}