/* CSS Document */

article[data-deco]{
	position: relative;
	}
	article[data-deco]:before{
		content: attr(data-deco);
		margin-bottom: clamp(16px, 3.6vw, 24px);
		font-family: sofia-pro, sans-serif;
		font-size: min(8.2vw, 100px);
		font-weight: bold;
		letter-spacing: 0.15em;
		white-space: nowrap;
		color: #fff;
		text-align: center;
		text-indent: -0.075em;
		}

#pagePath{
	display: none;
	}

#main{
	display: grid;
	overflow: hidden;
	}
	#main :where(#about, #campaign, #way, #shop, #faq) h2{
		font-family: toppan-bunkyu-midashi-go-std, sans-serif;
		font-size: clamp(24px, 4.8vw, 32px);
		font-weight: bold;
		line-height: 1.5;
		text-align: center;
		letter-spacing: 0.025em;
		}
	#main :where(#about, #campaign, #way) h2{
		display: grid;
		grid-template-columns: auto auto;
		align-items: center;
		grid-gap: 0.5em;
		justify-content: center;
		}
		#main :where(#about, #campaign, #way) h2:before{
			content: "";
			height: max(25px, 1em);
			background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 25"><path fill="%23fff000" d="m11.88.75s-.08,0-.12,0h0s-2.73,0-2.73,0c-.08.03-.17.05-.27.05-.03,0-.06,0-.09,0-.18-.02-.36-.04-.54-.04C4.06.75.75,6.02.75,12.5s3.31,11.75,7.38,11.75c.18,0,.36-.02.54-.04.02,0,.05,0,.07,0,.08,0,.17.02.25.05h2.77s.08,0,.12,0c4.07,0,7.38-5.27,7.38-11.75S15.94.75,11.88.75Z"/><path fill="%23231916" d="m15.56,11.5h-3.4c-.55,0-1,.45-1,1s.45,1,1,1h2.37c-.22,3.26-1.48,5.29-2.37,5.29-.98,0-2.4-2.45-2.4-6.29s1.42-6.29,2.4-6.29c.56,0,1.22.79,1.69,2.01.2.52.78.77,1.29.57.51-.2.77-.78.57-1.29-.81-2.09-2.1-3.29-3.56-3.29-2.51,0-4.4,3.56-4.4,8.29s1.89,8.29,4.4,8.29,4.4-3.56,4.4-8.29c0-.55-.45-1-1-1ZM12.5.05v-.05h-3.75v.05c-.21-.02-.41-.05-.62-.05C3.64,0,0,5.6,0,12.5s3.64,12.5,8.12,12.5c.21,0,.42-.02.62-.05v.05h3.75v-.05c4.19-.49,7.5-5.87,7.5-12.45S16.69.54,12.5.05ZM1.5,12.5C1.5,6.61,4.46,1.63,8,1.51,5.47,3.63,3.75,7.76,3.75,12.5s1.72,8.87,4.25,10.99c-3.54-.12-6.5-5.1-6.5-10.99Zm10.38,11c-3.59,0-6.62-5.04-6.62-11S8.28,1.5,11.88,1.5s6.62,5.04,6.62,11-3.03,11-6.62,11Z"/></svg>');
			background-size: cover;
			aspect-ratio: 0.8 / 1;
			}
	@media (min-width: 992px) {
		#main{}
			#main:has(#campaign) :where(#shop, #faq){
				grid-row: 5;
				}
			#main :where(#shop, #faq){
				grid-column: 1;
				grid-row: 4;
				grid-template-rows: 100px 80px auto;
				}
			#main #shop{
				grid-template-columns: auto calc(50vw - 44px) 20px;
				margin-right: 50%;
				}
			#main #faq{
				grid-template-columns: 20px calc(50vw - 44px) auto;
				margin-left: 50%;
				}
			}
	@media (min-width: 1148px) {
		#main #shop{
			grid-template-columns: auto 510px 40px;
			margin-right: 50%;
			}
			#main #shop:before{
				font-size: 80px;
				}
		#main #faq{
			grid-template-columns: 40px 510px auto;
			margin-left: 50%;
			}
			#main #faq:before{
				font-size: 80px;
				}
		}
	@media (min-width: 1200px) {
		#main :where(#about, #campaign, #way) h2{
			font-size: 40px;
			}
		}

#hero{
	display: grid;
	overflow: hidden;
	}
	#hero:before{
		content: "";
		grid-area: main;
		align-self: center;
		justify-self: center;
		width: 80%;
		background: url("../images/hero_logo.svg") center no-repeat;
		background-size: contain;
		font-size: 0;
		filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
		aspect-ratio: 3 / 1;
		z-index: 1;
		}
	#hero figure{
		grid-column: 1;
		grid-row: 1;
		display: grid;
		grid-template-areas: 'photo';
		}
		#hero figure img{
			grid-area: photo;
			width: 100%;
			aspect-ratio: 1 / 0.6;
			object-fit: cover;
			}
	#hero figcaption{
		grid-area: photo;
		align-self: end;
		color: #fff;
		padding: clamp(10px, 2.4vw, 16px);
		font-size: 10px;
		line-height: 1.65;
		text-shadow: 0 0 5px rgba(0, 0, 0, 1);
		text-align: right;
		filter: drop-shadow(0 0 20px rgba(0, 0, 0, 1));
		opacity: 0.8;
		}
	@media (max-width: 575.98px) {
		#hero{
			grid-template-rows: 1fr 1fr;
			grid-template-areas: 'main' 'main';
			}
		#hero figure{}
			#hero figure:nth-child(1){}
				#hero figure:nth-child(1) figcaption{
					padding-bottom: 12vw;
					}
			#hero figure:nth-child(2){
				grid-row: 2;
				}
		}
	@media (min-width: 576px) {
		#hero{
			grid-template-columns: 1fr 1fr;
			grid-template-areas: 'main main';
			}
			#hero:before{
				width: min(50%, 580px);
				}
		#hero figure{}
			#hero figure:nth-child(2){
				grid-column: 2;
				}
			#hero figure img{
				aspect-ratio: 1;
				}
		#hero figcaption{
			justify-self: end;
			padding: 16px 24px;
			font-size: 13px;
			}
		}
	@media (min-width: 992px) {
		#hero figure{}
			#hero figure img{
				aspect-ratio: 1 / 0.678;
				}
		}

#about{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	background: var(--color-point);
	padding: clamp(48px, 9.6vw, 64px) 0 clamp(48px, 12vw, 80px) 0;
	}
	#about:before,
	#about > *{
		grid-column: 2;
		z-index: 1;
		}
	#about:after{
		content: "";
		grid-column: 2;
		grid-row: 2 / 4;
		background: #fff;
		border-radius: 16px;
		}
	#about h2{
		grid-row: 2;
		position: relative;
		margin-top: 8px;
		padding: 16px;
		border-bottom: 2px solid var(--color);
		color: var(--color-theme);
		}
	#about h2+div{
		grid-row: 3;
		position: relative;
		display: grid;
		grid-gap: clamp(24px, 4.8vw, 32px);
		padding: clamp(24px, 4.8vw, 32px);
		}
	#about ul{
		display: grid;
		align-content: start;
		}
	#about li{
		display: grid;
		grid-template-columns: 1em auto;
		font-size: 18px;
		font-weight: bold;
		line-height: 1.65;
		}
		#about li:before{
			content: "";
			width: 8px;
			height: 8px;
			background: var(--color-theme);
			border-radius: 4px;
			transform: translateY(0.65em);
			}
		#about li > *{
			grid-column: 2;
			}
		#about li ul{
			margin-top: 8px;
			}
		#about li li{
			display: block;
			padding: 0 0 0 1em;
			text-indent: -1em;
			font-size: 14px;
			font-weight: normal;
			}
		#about li span{
			display: contents;
			color: var(--color-theme);
			}
	#about li+li{
		margin-top: clamp(16px, 2.7vw, 18px);
		padding-top: clamp(16px, 2.7vw, 18px);
		border-top: 1px dashed currentColor;
		}
	#about figure{
		justify-self: center;
		width: 180px;
		}
		#about figure img{
			width: 100%;
			height: auto;
			}
	#about dl{
		justify-self: center;
		display: grid;
		grid-template-columns: auto auto;
		align-items: center;
		justify-content: center;
		grid-gap: clamp(16px, 3.6vw, 24px);
		margin: 16px 0;
		}
	#about dt{
		order: 1;
		position: relative;
		padding: 1.5em 0;
		color: var(--color-theme);
		font-size: clamp(20px, 3.6vw, 24px);
		font-family: "fot-tsukuardgothic-std", sans-serif;
		line-height: 1.5;
		white-space: nowrap;
		}
		#about dt:before,
		#about dt:after{
			content: "";
			position: absolute;
			left: -0.5em;
			width: 160px;
			height: 2px;
			background: var(--color-theme);
			border-radius: 2px;
			transform-origin: center center;
			}
		#about dt:before{
			top: 0;
			transform: rotate(-15deg);
			}
		#about dt:after{
			bottom: 0;
			transform: rotate(15deg);
			}
	#about dd{
		width: 117px;
		}
		#about dd img{
			width: 100%;
			height: auto;
			}
	@media (min-width: 576px) and (max-width: 991.98px) {
		#about h2+div > ul{
			grid-column: 1 / 3;
			}
		#about figure{
			grid-column: 1;
			justify-self: end;
			}
		#about dl{
			grid-column: 2;
			}
		}
	@media (min-width: 992px) {
		#about figure{
			grid-column: 2;
			width: 220px;
			}
		#about dl{
			grid-column: 1 / 3;
			}
		#about dd{
			width: 134px;
			}
		}
	@media (min-width: 1200px) {
		#about{
			padding-bottom: 128px;
			}
			#about:after{
				border-radius: 40px;
				}
		#about h2+div{
			padding: 48px;
			}
		}

#campaign{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	padding: clamp(48px, 9.6vw, 64px) 0 clamp(48px, 12vw, 80px) 0;
	background: #d6ecf3;
	}
	#campaign:before,
	#campaign > *{
		grid-column: 2;
		}
	#campaign h2{
		color: #d6c400;
		}
	#campaign h2+section{
		margin-top: 16px;
		}
	#campaign section{
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-gap: 16px clamp(20px, 3.6vw, 24px);
		margin-top: clamp(32px, 6vw, 40px);
		padding: clamp(16px, 3.6vw, 24px);
		background: #fff;
		border-radius: clamp(16px, 3.6vw, 24px);
		}
	#campaign h3{
		position: relative;
		padding-bottom: 16px;
		color: var(--color-theme);
		font-size: clamp(20px, 3.6vw, 24px);
		font-weight: bold;
		line-height: 1.65;
		}
		#campaign h3:before{
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 2px;
			background: var(--color);
			border-radius: 1px;
			}
	#campaign h3+div{
		width: 100%;
		aspect-ratio: 1 / 0.3;
		}
	#campaign h3+div+div{
		justify-self: center;
		display: flex;
		margin-top: 8px;
		}
		#campaign h3+div+div a{
			display: grid;
			grid-template-columns: auto 20px;
			align-items: center;
			grid-gap: 16px;
			color: var(--color-theme);
			font-size: 18px;
			font-weight: bold;
			line-height: 1.5;
			text-align: center;
			text-decoration: none;
			}
			#campaign h3+div+div a:after{
				content: "";
				width: 20px;
				height: 20px;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m19.96,9.61c-.01-.06-.03-.11-.05-.17-.02-.07-.04-.14-.06-.2-.03-.07-.07-.13-.1-.19-.03-.05-.05-.1-.08-.15-.07-.11-.16-.21-.25-.31L11.41.59c-.78-.78-2.05-.78-2.83,0-.78.78-.78,2.05,0,2.83l4.59,4.59H2c-1.1,0-2,.9-2,2s.9,2,2,2h11.17l-4.59,4.59c-.78.78-.78,2.05,0,2.83.39.39.9.59,1.41.59s1.02-.2,1.41-.59l8-8c.09-.09.18-.2.25-.31.03-.05.05-.1.08-.15.03-.06.07-.12.1-.19.03-.07.04-.13.06-.2.02-.06.04-.11.05-.17.05-.26.05-.52,0-.78Z"/></svg>') center no-repeat;
				-webkit-mask-size: contain;
				background: currentColor;
				}
	#campaign figure{
		grid-row: 1;
		border-radius: 8px;
		overflow: hidden;
		}
		#campaign figure img{
			width: 100%;
			aspect-ratio: 1 / 0.667;
			object-fit: cover;
			}
	#campaign .fr-view{
		line-height: 1.65;
		overflow: visible;
		}
	@media (min-width: 576px) {
		#campaign section{
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
			}
			#campaign section > *{
				grid-column: 2;
				}
		#campaign figure{
			grid-column: 1;
			grid-row: 1 / 4;
			align-self: start;
			}
		#campaign h3+div+div{
			justify-self: end;
			margin-top: 8px;
			}
		}
	@media (min-width: 992px) {
		#campaign section{
			grid-template-columns: 326px minmax(0, 1fr);
			}
		#campaign h3+div{
			aspect-ratio: 1 / 0.2;
			}
		}
	@media (min-width: 1200px) {
		#campaign{
			padding-bottom: 128px;
			}
		#campaign section{
			padding: 36px;
			border-radius: 40px;
			}
		#campaign h3+div{
			aspect-ratio: 1 / 0.15;
			}
		#campaign figure{
			border-radius: 24px;
			}
		}

#way{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	padding: clamp(48px, 9.6vw, 64px) 0 clamp(48px, 12vw, 80px) 0;
	background: var(--color-theme);
	}
	#way:before,
	#way > *{
		grid-column: 2;
		}
	#way h2{
		color: #fff;
		}
	#way h2+section{
		margin-top: 16px;
		}
	#way section{
		grid-column: 1 / 4;
		display: grid;
		grid-template-columns: 1fr var(--wrap) 1fr;
		margin-top: clamp(32px, 7.2vw, 48px);
		overflow: hidden;
		}
		#way section > *{
			grid-column: 2;
			}
	#way h3{
		position: relative;
		justify-self: center;
		color: #fff;
		font-family: "fot-tsukuardgothic-std", sans-serif;
		line-height: 1.65;
		}
	@media (min-width: 1200px) {
		#way{
			padding-bottom: 128px;
			}
		}

#wayStep{
	padding-bottom: clamp(24px, 4.8vw, 32px);
	}
	#wayStep h3{
		display: grid;
		grid-template-columns: 1.5em auto 1.5em;
		grid-gap: 1em;
		align-items: center;
		justify-content: center;
		margin-top: clamp(48px, 9.6vw, 64px);
		font-size: 24px;
		font-family: "fot-tsukuardgothic-std", sans-serif;
		line-height: 1.5;
		text-align: center;
		}
		#wayStep h3:before,
		#wayStep h3:after{
			content: "";
			justify-self: center;
			width: 2px;
			height: 1.5em;
			background: currentColor;
			border-radius: 2px;
			transform-origin: center center;
			}
		#wayStep h3:before{
			transform: rotate(-45deg) translateY(10%);
			}
		#wayStep h3:after{
			transform: rotate(45deg) translateY(10%);
			}
		#wayStep h3 span{
			display: contents;
			}
	#wayStep h3+div{
		grid-row: 1;
		display: grid;
		background: #fff;
		border-radius: clamp(16px, 3.6vw, 24px);
		overflow: hidden;
		}
	#wayStep h3+div+div{
		margin-top: clamp(24px, 4.8vw, 32px);
		}
		#wayStep h3+div+div ul{
			display: flex;
			justify-content: center;
			grid-gap: clamp(28px, 6vw, 40px) 
			}
		#wayStep h3+div+div img{
			width: auto;
			height: clamp(57px, 10.8vw, 72px);
			}
	#wayStep dl{
		position: relative;
		display: grid;
		align-content: start;
		grid-gap: 16px 24px;
		padding: 24px;
		}
		#wayStep dl:after{
			content: "";
			position: absolute;
			top: 100%;
			left: 0;
			width: 100%;
			height: 18px;
			background: #fff;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 18"><polygon points="0 0 36 18 72 0 0 0"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
			z-index: 1;
			}
		#wayStep dl:nth-child(even){
			background: #f7f7f7;
			}
			#wayStep dl:nth-child(even):after{
				background: #f7f7f7;
				}
		#wayStep dl:nth-child(2) dt+dd+dd{
			display: grid;
			font-size: clamp(10px, 1.8vw, 12px);
			text-align: center;
			}
	#wayStep dt{
		grid-column: 1 / 3;
		position: relative;
		padding-bottom: 16px;
		color: var(--color-theme);
		font-size: clamp(24px, 4.8vw, 32px);
		font-family: sofia-pro, sans-serif;
		text-align: center;
		}
		#wayStep dt:before{
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 2px;
			background: var(--color);
			border-radius: 1px;
			}
		#wayStep dt span{
			font-size: clamp(32px, 7.2vw, 48px);
			}
	#wayStep dt+dd{
		grid-column: 1 / 3;
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		}
	#wayStep dt+dd+dd{
		align-self: center;
		justify-self: end;
		}
	#wayStep dt+dd+dd+dd{
		align-self: center;
		}
	#wayStep dd{
		line-height: 1.65;
		}
		#wayStep dd ul{
			display: grid;
			grid-gap: 16px;
			}
	#wayStep img{}
		#wayStep img[src*="wayStep-01"]{
			width: 100px;
			height: auto;
			}
		#wayStep img[src*="wayStep-02"]{
			width: 130px;
			height: auto;
			}
		#wayStep img[src*="wayStep-03"]{
			width: 93px;
			height: auto;
			}
		#wayStep img[src*="apps.apple.com"]{
			aspect-ratio: 300 / 110;
			}
		#wayStep img[src*="play.google.com"]{
			aspect-ratio: 300 / 89;
			}
	@media (min-width: 992px) {
		#wayStep h3+div{
			grid-template-columns: repeat(3, auto);
			}
		#wayStep dl{}
			#wayStep dl:after{
				top: 0;
				left: 100%;
				width: 18px;
				height: 100%;
				-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 72"><polygon points="0 72 18 36 0 0 0 72"/></svg>');
				}
		}
	@media (min-width: 1200px) {
		#wayStep h3+div{
			padding: 0 16px;
			border-radius: 40px;
			}
		#wayStep dl{
			padding: 54px 36px;
			}
		}

#wayMovie{
	grid-gap: clamp(32px, 7.2vw, 48px) 0;
	}
	#wayMovie h3{
		position: relative;
		font-size: clamp(24px, 4.8vw, 32px);
		transform: translateX(0.25em);
		}
		#wayMovie h3:before,
		#wayMovie h3:after{
			content: "";
			position: absolute;
			top: 50%;
			width: 50vw;
			height: 2px;
			background: currentColor;
			border-radius: 2px;
			}
		#wayMovie h3:before{
			right: calc(100% + 1em);
			}
		#wayMovie h3:after{
			left: calc(100% + 1em);
			}
	#wayMovie h3+div{
		display: grid;
		grid-gap: clamp(32px, 6vw, 40px) 56px;
		color: #fff;
		}
		#wayMovie h3+div > div{
			display: grid;
			justify-items: center;
			grid-gap: 16px;
			}
	#wayMovie h4{
		font-size: clamp(20px, 3.6vw, 24px);
		font-weight: bold;
		line-height: 1.65;
		}
	#wayMovie h4+div{
		justify-self: stretch;
		}
	#wayMovie iframe{
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		}
	#wayMovie p{
		padding-left: 1em;
		text-indent: -1em;
		font-size: clamp(10px, 1.8vw, 12px);
		}
	@media (min-width: 992px) {
		#wayMovie h3+div{
			grid-template-columns: repeat(2, 1fr);
			}
		}
	@media (min-width: 1200px) {
		#wayMovie h3+div{
			grid-gap: 100px;
			}
		}

#wayFlow{
	grid-gap: clamp(32px, 7.2vw, 48px) 0;
	}
	#wayFlow h3{
		position: relative;
		font-size: clamp(24px, 4.8vw, 32px);
		transform: translateX(0.25em);
		}
		#wayFlow h3:before,
		#wayFlow h3:after{
			content: "";
			position: absolute;
			top: 50%;
			width: 50vw;
			height: 2px;
			background: currentColor;
			border-radius: 2px;
			}
		#wayFlow h3:before{
			right: calc(100% + 1em);
			}
		#wayFlow h3:after{
			left: calc(100% + 1em);
			}
	#wayFlow h4{
		color: #fff;
		font-size: clamp(20px, 3.6vw, 24px);
		font-weight: bold;
		line-height: 1.65;
		}
	#wayFlow h4+div{
		display: grid;
		margin-top: 16px;
		background: #fff;
		border-radius: clamp(16px, 3.6vw, 24px);
		overflow: hidden;
		}
	#wayFlow dl{
		position: relative;
		counter-increment: count;
		display: grid;
		align-content: start;
		grid-gap: 16px;
		padding: 24px;
		}
		#wayFlow dl:after{
			content: "";
			position: absolute;
			top: 100%;
			left: 0;
			width: 100%;
			height: 18px;
			background: #fff;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 18"><polygon points="0 0 36 18 72 0 0 0"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
			z-index: 1;
			}
		#wayFlow dl:nth-child(even){
			background: #f7f7f7;
			}
			#wayFlow dl:nth-child(even):after{
				background: #f7f7f7;
				}
	#wayFlow dt{
		order: 1;
		line-height: 1.65;
		}
		#wayFlow dt:before{
			content: counter(count);
			position: absolute;
			top: 0;
			left: 16px;
			color: var(--color-theme);
			font-size: 72px;
			font-family: sofia-pro, sans-serif;
			line-height: 1;
			}
			#wayFlow h3+div+div dt:before{
				color: #d6c400;
				}
	#wayFlow dt+dd{
		margin-top: 20px;
		}
	#wayFlow dd{}
		#wayFlow dd img{
			width: 100%;
			height: auto;
			}
	@media (max-width: 991.98px) {
		#wayFlow h4{
			text-align: center;
			}
		}
	@media (min-width: 576px) and (max-width: 991.98px) {
		#wayFlow dl{
			grid-template-columns: 1fr 2fr;
			align-items: center;
			}
		}
	@media (min-width: 992px) {
		#wayFlow h4+div{
			grid-template-columns: repeat(3, 1fr);
			}
		#wayFlow dl{
			padding: 36px;
			}
			#wayFlow dl:after{
				top: 0;
				left: 100%;
				width: 18px;
				height: 100%;
				-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 72"><polygon points="0 72 18 36 0 0 0 72"/></svg>');
				}
		#wayFlow dt+dd{
			margin-top: 0;
			}
		}
	@media (min-width: 1200px) {
		#wayFlow h4+div{
			padding: 0 16px;
			border-radius: 40px;
			}
		}

#shop{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	padding: clamp(48px, 9.6vw, 64px) 0;
	background: #f2e841;
	}
	#shop:before,
	#shop > *{
		grid-column: 2;
		}
	#shop h2{
		margin-bottom: clamp(24px, 4.8vw, 32px);
		color: var(--color-theme)
		}
	#shop h2+div{
		grid-row: 3;
		display: grid;
		grid-template-columns: auto auto;
		align-items: center;
		justify-content: center;
		grid-gap: clamp(16px, 3.6vw, 24px);
		padding: 16px;
		padding-top: calc(80px + 40px);
		background: #fff;
		border-radius: 40px;
		}
	#shop h2+div+div{
		grid-row: 3;
		}
	#shop p{
		order: 1;
		position: relative;
		margin: 1.5em 0;
		padding: 1.5em 0;
		color: var(--color-theme);
		font-size: clamp(16px, 2.7vw, 18px);
		font-weight: bold;
		line-height: 1.65;
		white-space: nowrap;
		}
		#shop p:before,
		#shop p:after{
			content: "";
			position: absolute;
			left: -0.5em;
			width: 160px;
			height: 2px;
			background: var(--color-theme);
			border-radius: 2px;
			transform-origin: center center;
			}
		#shop p:before{
			top: 0;
			transform: rotate(-10deg);
			}
		#shop p:after{
			bottom: 0;
			transform: rotate(10deg);
			}
	#shop figure{
		width: min(24vw, 117px);
		}
		#shop figure img{
			width: 100%;
			height: auto;
			}
	@media (min-width: 576px) {
		#shop h2+div{
			padding: 24px;
			padding-top: calc(64px + 24px);
			border-radius: 32px;
			}
		}
	@media (min-width: 1200px) {
		#shop{
			padding-bottom: 80px;
			}
		#shop figure{
			width: 134px;
			}
		}

#faq{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	padding: clamp(48px, 9.6vw, 64px) 0;
	background: #d6ecf3;
	}
	#faq:before,
	#faq > *{
		grid-column: 2;
		}
	#faq h2{
		margin-bottom: clamp(24px, 4.8vw, 32px);
		color: #d6c400;
		}
	#faq h2+div{
		grid-row: 3;
		padding: 32px 16px;
		padding-top: calc(80px + 24px);
		background: #fff;
		border-radius: 40px;
		}
	#faq h2+div+div{
		grid-row: 3;
		}
	#faq p{
		color: var(--color-theme);
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		line-height: 2;
		}
		#faq p:nth-child(n+2){
			color: inherit;
			font-weight: inherit;
			margin-top: 1em;
			}
		#faq p span{
			color: var(--color-theme);
			font-size: min(9vw, 40px);
			font-weight: bold;
			line-height: 1.2;
			}
	@media (min-width: 576px) {
		#faq h2+div{
			padding: 32px 24px;
			padding-top: calc(64px + 24px);
			border-radius: 32px;
			}
		}
	@media (min-width: 1200px) {
		#faq{
			padding-bottom: 80px;
			}
		}

#article{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	padding: clamp(48px, 9.6vw, 64px) 0;
	}
	#article > *{
		grid-column: 2;
		}
	#article h2{
		display: grid;
		grid-template-columns: 1.5em auto 1.5em;
		grid-gap: 1em;
		align-items: center;
		justify-content: center;
		font-size: clamp(28px, 4.8vw, 32px);
		font-family: "fot-tsukuardgothic-std", sans-serif;
		line-height: 1.65;
		text-align: center;
		}
		#article h2:before,
		#article h2:after{
			content: "";
			justify-self: center;
			width: 2px;
			height: 1.5em;
			background: var(--color-theme);
			border-radius: 2px;
			transform-origin: center center;
			}
		#article h2:before{
			transform: rotate(-45deg) translateY(10%);
			}
		#article h2:after{
			transform: rotate(45deg) translateY(10%);
			}
		#article h2 span{
			display: contents;
			}
	#article h2+div{
		display: grid;
		grid-gap: 32px 24px;
		margin-top: clamp(24px, 4.8vw, 32px);
		}
	#article h2+div+div{
		display: flex;
		justify-content: center;
		margin-top: clamp(32px, 7.2vw, 48px);
		}
	#article dl{
		position: relative;
		display: grid;
		grid-gap: 16px;
		}
	#article dt{
		font-weight: bold;
		line-height: 1.65;
		}
	#article dt+dd{
		grid-row: 1;
		}
	#article dd{}
		#article dd img{
			width: 100%;
			height: auto;
			background: var(--color-theme);
			border-radius: 16px;
			aspect-ratio: 1 / 0.75;
			object-fit: cover;
			}
		#article dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
			}
	#article .button{
		width: min(100%, 400px);
		}
	@media (max-width: 575.98px) {
		#article dd{}
			#article dd img{
				border-radius: 24px;
				}
		}
	@media (min-width: 768px) {
		#article h2+div{
			grid-template-columns: repeat(3, 1fr);
			}
		}
	@media (min-width: 1200px) {
		#article h2+div{
			grid-gap: 48px;
			}
		#article dd{}
			#article dd img{
				border-radius:24px;
				}
		}

.button{
	display: grid;
	grid-template-columns: auto 1em;
	align-items: center;
	grid-gap: 8px;
	min-height: 80px;
	padding: 16px 24px;
	background: var(--color-theme);
	border-radius: 40px;
	color: #fff;
	font-size: 24px;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	}
	.button:after{
		content: "";
		width: 1em;
		height: 1em;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m19.96,9.61c-.01-.06-.03-.11-.05-.17-.02-.07-.04-.14-.06-.2-.03-.07-.07-.13-.1-.19-.03-.05-.05-.1-.08-.15-.07-.11-.16-.21-.25-.31L11.41.59c-.78-.78-2.05-.78-2.83,0-.78.78-.78,2.05,0,2.83l4.59,4.59H2c-1.1,0-2,.9-2,2s.9,2,2,2h11.17l-4.59,4.59c-.78.78-.78,2.05,0,2.83.39.39.9.59,1.41.59s1.02-.2,1.41-.59l8-8c.09-.09.18-.2.25-.31.03-.05.05-.1.08-.15.03-.06.07-.12.1-.19.03-.07.04-.13.06-.2.02-.06.04-.11.05-.17.05-.26.05-.52,0-.78Z"/></svg>') center no-repeat;
		-webkit-mask-size: contain;
		background: currentColor;
		}
	@media (min-width: 576px) {
		.button{
			min-height: 64px;
			padding: 4px 24px;
			border-radius: 32px;
			font-size: 20px;
			}
		}