:root {
	--rp-primary: #009f64;
	--rp-accent: #19b676;
	--rp-ink: #39423e;
	--rp-muted: #6a706b;
	--rp-mist: #f0f5f3;
}

html {
	scroll-behavior: smooth;
}

body .pageContainer01, body .pageContainer01 * {
	box-sizing: border-box;
}

body .pageContainer01 {
	background: #fff;
	color: var(--rp-ink);
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 1.8;
}

.pageContainer01 img {
	display: block;
	opacity: 1;
	max-width: 100%;
}

.pageContainer01 a {
	cursor: pointer;
}

.displaySp01 {
	display: none;
}

.siteHeader01 {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
	width: 100%;
	height: 60px;
	background: rgba(255, 255, 255, 1.0);
}

.headerInner01 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: min(100% - 48px, 1200px);
	min-width: 1200px;
	height: 100%;
	margin: 0 auto;
	gap: 24px;
}

.bankLogoList01, .headerNavigation01 {
	display: flex;
	align-items: center;
}

.bankLogoList01 {
	flex: 1 1 auto;
	min-width: 0;
	gap: 16px;
}

.bankLogoList01 a {
	display: flex;
	flex: 0 1 auto;
	align-items: center;
	min-width: 0;
	height: 43px;
}

.bankLogoList01 img {
	width: auto;
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

.bankLogoList01 a:nth-child(1) img {
	height: 37px;
	margin-top:5px;
}

.bankLogoList01 a:nth-child(2) img {
	height: 23px;
	margin-top:5px;
}

.bankLogoList01 a:nth-child(3) img {
	height: 38px;
	margin-top:5px;
}

.bankLogoList01 a:nth-child(4) img {
	height: 43px;
}

.headerNavigation01 {
	flex: 0 0 auto;
	gap: 24px;
	font-size: 1.4rem;
	font-weight: 500;
	white-space: nowrap;
}

.headerLink01 {
	position: relative;
	padding: 8px 0;
	font-size: 1.4rem;
}

.headerButton01, .buttonPrimary01 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 12px 24px;
	background: var(--rp-accent);
	color: #fff !important;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	border-radius: 12px;
	transition: background-color .2s, transform .2s;
}

.headerButton01 {
	min-height: 40px;
	border-radius: 8px;
}

.headerButton01:hover, .buttonPrimary01:hover {
	background: #008f5b;
	transform: translateY(-1px);
}

.heroSection01 {
	overflow: visible;
	overflow-x: clip;
	position: relative;
	z-index: 1;
	max-width: 100vw;
	height: 1024px;
	background: #fff;
}

.heroInner01 {
	position: relative;
	width: 100%;
	max-width: 1440px;
	height: 100%;
	margin: 0 auto;
}

.heroContent01 {
	--hero-content-top: 215px;
	--hero-content-left: 120px;
	position: absolute;
	top: var(--hero-content-top);
	left: var(--hero-content-left);
	z-index: 2;
	width: fit-content;
	color: var(--rp-primary);
}

.heroContent01 h1 {
	background: linear-gradient(62deg, #019a62 38%, #21df1e 100%);
	background-clip: text;
	color: transparent;
	font-size: 8rem;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.0em;
	white-space: nowrap;
	-webkit-background-clip: text;
}

.heroContent01 p {
	margin-top: 10px;
	font-size: 2rem;
	line-height: 1.8;
	letter-spacing: 0.1em;
}

.heroCity01 {
	position: absolute;
	top: 44px;
	left: calc(100% - 5px);
	z-index: -1;
	width: 1000px;
	max-width: none !important;
	animation: rp-slide-fade-in 0.5s ease-out both;
}

.heroPlane01 {
	position: absolute;
	top: 90px;
	left: 55%;
	width: 180px;
	max-width: none !important;
	animation: rp-plane-slide-fade-in 0.5s ease-out both;
}

@keyframes rp-slide-fade-in {
	from {
		opacity: 0;
		transform: translateY(80px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}

}

@keyframes rp-plane-slide-fade-in {
	from {
		opacity: 0;
		transform: translate(80px, 80px);
	}

	to {
		opacity: 1;
		transform: translate(0, 0);
	}

}

.scrollAnimationReady01 {
	opacity: 0;
	transform: translateY(80px);
}

.scrollAnimationActive01 {
	animation: rp-slide-fade-in 0.5s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
	.heroCity01, .heroPlane01 {
		animation: none;
	}
}

.aboutSection01 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 1024px;
	padding: 200px 120px 0px;
	text-align: center;
}

.aboutLogo01 {
	overflow: hidden;
	position: relative;
	width: 180px;
	height: 182px;
}

.aboutLogo01 > img:first-child {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 180px;
}

.aboutSpark01 {
	position: absolute;
	top: 0;
	right: 9px;
	width: 45px;
}

.aboutSection01 p {
	max-width: 960px;
	margin-top: 48px;
	font-size: 2rem;
	line-height: 1.8;
	letter-spacing: 0.1em;
}

.lifeSection01, .couponSection01, .brandSection01, .howtoSection01 {
	overflow: hidden;
	position: relative;
	background: var(--rp-mist);
}

.lifeSection01, .howtoSection01 {
	overflow: visible;
}

.lifeSection01 {
	min-height: 2418px;
	padding: 200px 120px 0px;
}

.sectionTitle01 {
	position: relative;
	z-index: 2;
	text-align: center;
	font-weight: 700;
}

.sectionTitleLead01 {
	display: block;
	color: var(--rp-muted);
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1.8;
}

.sectionTitle01 h2 {
	color: var(--rp-ink);
	font-size: 4.8rem;
	font-weight: 700;
	line-height: 1.8;
}

.sectionTitle01 strong {
	color: var(--rp-primary);
	font-size: 6.4rem;
	font-weight: 700;
}

.lifeCardList01 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 368px));
	justify-content: center;
	position: relative;
	z-index: 2;
	max-width: 1200px;
	gap: 120px 48px;
	margin: 120px auto 0px;
}

.lifeCardList01 figure {
	display: flex;
	flex-direction: column;
	position: relative;
	gap: 24px;
	text-align: center;
}

.lifeCardList01 figure:nth-child(3n + 2) {
	padding-top: 120px;
}

.lifeCardList01 img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 20px;
}

.lifeCardList01.lifeAnimationReady01 img {
	opacity: 0;
	transform: translateY(80px);
}

.lifeCardList01.lifeAnimationActive01 img {
	animation: rp-slide-fade-in 0.5s ease-out both;
}

.lifeCardList01.lifeAnimationActive01 figure:nth-child(2) img {
	animation-delay: 0.1s;
}

.lifeCardList01.lifeAnimationActive01 figure:nth-child(3) img {
	animation-delay: 0.2s;
}

.lifeCardList01.lifeAnimationActive01 figure:nth-child(4) img {
	animation-delay: 0.3s;
}

.lifeCardList01.lifeAnimationActive01 figure:nth-child(5) img {
	animation-delay: 0.4s;
}

.lifeCardList01.lifeAnimationActive01 figure:nth-child(6) img {
	animation-delay: 0.5s;
}

.lifeCardList01 figcaption {
	position: relative;
	font-size: 2.4rem;
	letter-spacing: 0.1em;
	white-space: nowrap;
}

.lifeCardList01 figcaption::after {
	content: "";
	position: absolute;
	right: 24px;
	bottom: -42px;
	width: 34px;
	height: 33px;
	background: url("../img/resonaplus/resonaplus_ico_01.svg") center / contain no-repeat;
}

.lifeCardList01 figure:nth-child(odd) figcaption::after {
	right: auto;
	left: 24px;
}

.lifeMessage01 {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 2;
	margin: 120px 0 0px;
	padding: 240px 0;
	text-align: center;
}

.lifeMessage01 p {
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1.8;
}

.decorationImage01 {
	pointer-events: none;
	position: absolute;
}

.decorationLife01 {
	right: -7%;
	bottom: 14%;
	width: 403px;
}

.decorationLife02 {
	bottom: -7%;
	left: 50%;
	z-index: 3;
	width: 747px;
}

.pageContainer01 .decorationLife02 {
	opacity: 0.7 !important;
}

.couponSection01 {
	overflow: visible;
	z-index: 1;
	min-height: 934px;
	padding: 240px 120px;
}

.couponSection01 > h2 {
	position: relative;
	z-index: 2;
	margin-bottom: 48px;
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1.8;
	text-align: center;
}

.couponCard01 {
	display: grid;
	grid-template-columns: 1fr 200px;
	width: min(960px, 100%);
	min-height: 300px;
	column-gap: 48px;
	margin: 0 auto;
	padding: 48px;
	background: #fff;
	border-radius: 24px;
}

.couponContent01 h3 {
	font-size: 2.4rem;
	font-weight: 700;
}

.couponLead01 {
	color: var(--rp-primary);
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1.8;
}

.couponIllustration01 {
	overflow: hidden;
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	position: relative;
	width: 200px;
	height: 180px;
	border-radius: 17px;
}

.couponIllustration01 img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.decorationCoupon01 {
	top: 0;
	left: 37px;
	z-index: 1;
	width: 319px;
	height: 314px;
}

.brandSection01 {
	min-height: 1264px;
	padding: 240px 120px;
}

.sectionTitleLarge01 {
	margin-bottom: 120px;
}

.brandCard01 {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	z-index: 2;
	width: min(960px, 100%);
	min-height: 483px;
	margin: 0 auto;
	padding: 48px;
	background: #fff;
	border-radius: 24px;
}

.brandCard01 h3 {
	font-size: 3.2rem;
	font-weight: 700;
}

.brandLogoSquareList01 {
	display: flex;
	justify-content: center;
	margin-top: 48px;
	gap: 32px;
}

.brandLogoSquareList01 img {
	width: 101px;
	height: 101px;
	object-fit: contain;
	border-radius: 11px;
}

.brandLogoWideList01 {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	gap: 32px;
	margin: 32px 0 48px;
}

.brandLogoWideList01 img:first-child {
	width: 263px;
}

.brandLogoWideList01 img:last-child {
	width: 282px;
}

.brandNote01 {
	font-size: 1.6rem;
}

.decorationBrand01 {
	top: 132px;
	left: 4.4%;
	width: 277px;
}

.howtoSection01 {
	min-height: 2084px;
	padding: 240px 120px;
}

.howtoStepList01 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	position: relative;
	z-index: 2;
	max-width: 1200px;
	gap: 48px;
	margin: 120px auto 48px;
}

.howtoStepList01 article {
	overflow: hidden;
	background: #fff;
	text-align: center;
	border-radius: 24px;
}

.howtoStepList01.howtoAnimationReady01 article {
	opacity: 0;
	transform: translateY(80px);
}

.howtoStepList01.howtoAnimationActive01 article {
	animation: rp-slide-fade-in 0.5s ease-out both;
}

.howtoStepList01.howtoAnimationActive01 article:nth-child(2) {
	animation-delay: 0.1s;
}

.howtoStepList01.howtoAnimationActive01 article:nth-child(3) {
	animation-delay: 0.2s;
}

.howtoStepList01 h3 {
	padding: 56px 24px;
	color: var(--rp-primary);
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.8;
}

.howtoStepList01 img {
	width: 100%;
	aspect-ratio: 368 / 538;
	object-fit: cover;
}

.howtoButton01 {
	display: flex;
	position: relative;
	z-index: 2;
	width: 510px;
	margin: 0px auto 120px;
}

.scrollGuide01 {
	display: none;
}

.howtoButton01 > img {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	margin-left: 8px;
}

.appPromotion01 {
	display: flex;
	overflow: hidden;
	align-items: stretch;
	position: relative;
	z-index: 2;
	width: min(960px, 100%);
	margin: 0 auto;
	background: #fff;
	border-radius: 24px;
}

.appPromotionContent01 {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	z-index: 2;
	min-width: 540px;
	gap: 24px;
	padding: 48px;
}

.appPromotion01 h3 {
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.8;
}

.appPromotion01 h3 strong {
	color: var(--rp-primary);
	font-size: 3.2rem;
	font-weight: 700;
}

.appPromotion01 p {
	font-size: 1.6rem;
	line-height: 1.8;
}

.appPromotionPhoneList01 {
	overflow: hidden;
	position: relative;
	width: 380px;
}

.appPromotionPhoneList01 img {
	position: absolute;
	width: 181px;
	border: 7px solid #fff;
	border-radius: 30px;
	box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.appPromotionPhoneList01 img:first-child {
	top: 112px;
	right: 90px;
	z-index: 1;
}

.appPromotionPhoneList01 img:last-child {
	top: 181px;
	left: 60px;
	z-index: 2;
}

.noteText01 {
	position: relative;
	z-index: 2;
	max-width: 960px;
	margin: 16px auto 0px;
	color: var(--rp-muted);
	font-size: 1.6rem;
	line-height: 1.8;
}

.couponCaption01 {
	width: min(960px, 100%);
	margin: 16px auto 0;
	font-size: 1.6rem;
}

.decorationHowto01 {
	top: -200px;
	right: -13%;
	z-index: 1;
	width: 443px;
}

.futureSection01 {
	min-height: 1059px;
	padding: 240px 100px;
	background: #fff;
}

.futureSection01 .sectionTitle01 {
	margin-bottom: 80px;
}

.futureCard01 {
	display: flex;
	align-items: center;
	width: min(960px, 100%);
	min-height: 356px;
	gap: 48px;
	margin: 0 auto;
	padding: 48px;
	border: .5px solid #cfd8d4;
	border-radius: 24px;
}

.futureContent01 {
	flex: 1;
}

.futureComingSoon01 {
	margin-bottom: 24px !important;
	color: #e59b00;
	font-size: 2.4rem;
	font-weight: 700;
}

.futureContent01 h3 {
	margin-bottom: 4px;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.8;
}

.futureContent01 h3 strong {
	color: var(--rp-primary);
	font-size: 3.2rem;
	font-weight: 700;
}

.futureContent01 > p:not(.futureComingSoon01) {
	font-size: 1.6rem;
	line-height: 1.8;
}

.futureIllustration01 {
	display: block;
	flex: 0 0 auto;
	width: 200px;
	height: 180px;
}

.futureReleaseNoteSp01 {
	display: none;
}

.downloadSection01 {
	position: relative;
	min-height: 674px;
	padding: 120px;
	background: var(--rp-primary);
	color: #fff;
}

.downloadSection01 h2 {
	margin-bottom: 48px;
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1.8;
	text-align: center;
}

.downloadDate01 {
	position: absolute;
	top: -40px;
	right: 220px;
	color: var(--rp-ink);
	font-size: 1.6rem;
}

.downloadCard01 {
	width: min(960px, 100%);
	margin: 0 auto;
	padding: 48px;
	background: #fff;
	color: var(--rp-ink);
	border-radius: 24px;
}

.downloadLabel01 {
	margin-bottom: 24px !important;
	font-size: 2rem;
	letter-spacing: 0.1em;
	text-align: center;
}

.downloadBadgeList01 {
	display: flex;
	align-items: center;
	height: 104px;
	gap: 24px;
}

.storeBadge01 {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	height: 76px;
	gap: 14px;
	background: #050505;
	color: #fff !important;
	font-size: 2rem;
	line-height: 1;
	border-radius: 10px;
}

.storeBadgeImage01 {
	height: auto;
	padding: 0;
	background: transparent;
	border-radius: 0;
}

.storeBadgeImage01 img {
	width: 100%;
	height: auto;
}

.downloadQr01 {
	flex: 0 0 94px;
	width: 94px;
	height: 94px;
}

.downloadLinkList01 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	color: var(--rp-accent);
	font-weight: 500;
	font-size: 1.6rem;
}

.downloadLinkList01 a:last-child {
	display: block;
	position: relative;
	width: 100%;
	padding: 0 28px;
	text-align: center;
}

.downloadLinkList01 a:last-child img {
	position: absolute;
	top: 50%;
	right: 0;
	width: 24px;
	height: 24px;
	filter: brightness(0) saturate(100%) invert(57%) sepia(84%) saturate(448%) hue-rotate(103deg) brightness(93%) contrast(91%);
	transform: translateY(-50%);
}

.siteFooter01 {
	position: relative;
	background: #fff;
}

.footerInner01 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30px 20px 17px;
}

.footerColumnRight01 {
	display: flex;
	align-items: center;
}

.footerLogoList01 {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.footerLogoList01 img {
	display: block;
	width: 405px;
	max-width: 100%;
	height: auto;
}

.footerNav01 {
	margin-bottom: 0;
}

.footerLinkList01 {
	text-align: center;
}

.footerLinkItem01 {
	display: inline-block;
	padding: 0 10px;
	border-left: 1px solid #DBDBDB;
}

.footerLinkItem01:first-child {
	padding-left: 0;
	border-left: 0;
}

.footerLink01 {
	display: block;
	color: #4A4D4C;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
}

.footerCopyrightWrap01 {
	margin-left: 40px;
}

.footerCopyright01 {
	line-height: 1;
	text-align: center;
}

.footerCopyrightText01 {
	color: #999;
	font-size: 1.1rem;
	font-weight: 400;
	letter-spacing: 0.0em;
}

@media screen and (min-width: 768px) {
	.siteHeader01 {
		min-width: 1200px;
	}

	.heroSection01 {
		--hero-viewport-unit: max(12px, 1vw);
		max-width: max(1200px, 100vw);
		height: min(calc(var(--hero-viewport-unit) * 71.1), 1024px);
	}

	.heroContent01 {
		--hero-content-top: min(calc(var(--hero-viewport-unit) * 14.9), 215px);
		--hero-content-left: min(calc(var(--hero-viewport-unit) * 100 / 12), 120px);
		width: min(calc(var(--hero-viewport-unit) * 36.5), 525px);
	}

	.heroContent01 h1 {
		width: max-content;
		font-size: min(calc(var(--hero-viewport-unit) * 5.6), 8rem);
		letter-spacing: normal;
		transform: translateX(max(calc(var(--hero-viewport-unit) * -1.2), -17.5px));
	}

	.heroContent01 p {
		font-size: clamp(1.6rem, calc(var(--hero-viewport-unit) * 1.4), 2rem);
	}

	.heroCity01 {
		top: min(calc(var(--hero-viewport-unit) * 23.5), 339px);
		left: min(calc(var(--hero-viewport-unit) * 38.7), 557px);
		width: min(calc(var(--hero-viewport-unit) * 83.7), 1205px);
	}

	.heroPlane01 {
		top: min(calc(var(--hero-viewport-unit) * 11.6), 167px);
		left: min(calc(var(--hero-viewport-unit) * 66.5), 957px);
		width: min(calc(var(--hero-viewport-unit) * 14.9), 214px);
	}

	.decorationLife02 {
		left: 50%;
		transform: translateX(-50%);
	}

	.lifeCardList01 figure {
		height: 555px;
	}

	.lifeCardList01 figure:nth-child(2), .lifeCardList01 figure:nth-child(5) {
		justify-content: flex-end;
		padding: 60px 0 0px;
	}

	.lifeCardList01 figure:nth-child(2) figcaption, .lifeCardList01 figure:nth-child(5) figcaption {
		order: -1;
	}

	.lifeCardList01 figure:nth-child(2) figcaption::after, .lifeCardList01 figure:nth-child(5) figcaption::after {
		top: -42px;
		right: 26px;
		bottom: auto;
		left: auto;
	}

	.couponContent01 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 8px;
	}
}

@media screen and (max-width: 767px) {
	.pageContainer01 { font-size: 1.6rem; }

	.displayPc01 {
		display: none;
	}

	.displaySp01 {
		display: inline;
	}

	.siteHeader01 {
		position: absolute;
		height: 62px;
	}

	.headerInner01 {
		width: 100%;
		min-width: inherit;
	}

	.bankLogoList01 {
		display: flex;
		justify-content: space-between;
		width: 100%;
		max-width: 402px;
		margin: 0 auto;
		gap: min(2vw, 8px);
	}

	.bankLogoList01 a {
		flex: 0 1 auto;
		justify-content: center;
		min-width: 0;
		height: auto;
	}

	.bankLogoList01 img {
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: none;
		object-fit: contain;
	}

	.bankLogoList01 a:nth-child(1) img {
		height: min(4.7vw, 19px);
	}

	.bankLogoList01 a:nth-child(2) img {
		height: min(3.2vw, 13px);
	}

	.bankLogoList01 a:nth-child(3) img {
		height: min(4.5vw, 18px);
	}

	.bankLogoList01 a:nth-child(4) img {
		height: min(5.2vw, 21px);
	}

	.headerNavigation01 {
		display: none;
	}

	.heroSection01 {
		height: 700px;
		margin-top: 42px;
	}

	.heroInner01 {
		--hero-sp-content-top: 48px;
		--hero-sp-title-size: clamp(3.2rem, 10.8vw, 4.2rem);
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		max-width: 402px;
		padding: var(--hero-sp-content-top) 24px 0;
	}

	.heroContent01 {
		flex: none;
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
	}

	.heroContent01 h1 {
		width: max-content;
		font-size: var(--hero-sp-title-size);
		line-height: 1.6;
		letter-spacing: -0.1em;
	}

	.heroContent01 p {
		font-size: clamp(1.4rem, 4vw, 1.6rem);
		letter-spacing: 0;
		text-shadow: 0 4px 24px #fff;
		white-space: normal;
	}

	.heroCity01 {
		flex: none;
		position: relative;
		top: auto;
		left: auto;
		width: 472px;
		/* Preserve the city position after taking the plane out of flow. */
		margin-top: calc(32px + 100px * 1234 / 1956);
		margin-left: 44px;
	}

	.heroPlane01 {
		top: calc(var(--hero-sp-content-top) + var(--hero-sp-title-size) * 3.2 - 15px);
		left: calc(100% - 80px);
		width: 100px;
	}

	.aboutSection01 {
		height: 874px;
		padding: 80px 24px 0px;
	}

	.aboutLogo01 {
		width: 100px;
		height: 101px;
	}

	.aboutLogo01 > img:first-child {
		width: 100px;
	}

	.aboutSpark01 {
		right: 5px;
		width: 25px;
	}

	.aboutSection01 p {
		margin-top: 32px;
		font-size: 1.6rem;
		line-height: 1.8;
	}

	.lifeSection01 {
		min-height: 1845px;
		padding: 120px 24px 0px;
	}

	.sectionTitleLead01 {
		font-size: 2rem;
	}

	.sectionTitle01 h2 {
		font-size: 3.2rem;
	}

	.sectionTitle01 strong {
		font-size: 3.2rem;
	}

	.lifeCardList01 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 354px;
		gap: 24px 16px;
		margin-top: 60px;
	}

	.lifeCardList01 figure {
		gap: 16px;
	}

	.lifeCardList01 figure:nth-child(3n + 2) {
		padding-top: 0;
	}

	.lifeCardList01 figure:nth-child(even) {
		padding-top: 60px;
	}

	.lifeCardList01 img {
		border-radius: 10px;
	}

	.lifeCardList01 figcaption {
		min-height: 58px;
		font-size: 1.4rem;
		line-height: 1.8;
	}

	.lifeCardList01 figcaption::after {
		right: 0;
		bottom: -2px;
		width: 24px;
		height: 24px;
	}

	.lifeCardList01 figure:nth-child(odd) figcaption::after {
		left: 0;
	}

	.lifeMessage01 {
		min-height: 480px;
	}

	.lifeMessage01 p {
		font-size: 2.4rem;
		line-height: 1.8;
	}

	.decorationLife01 {
		right: -32%;
		bottom: 18%;
		width: 270px;
	}

	.decorationLife02 {
		bottom: -3%;
		left: 0;
		width: 100%;
	}

	.couponSection01 {
		overflow: hidden;
		height: 868px;
		min-height: 0;
		padding: 120px 24px;
	}

	.couponSection01 > h2 {
		margin-bottom: 60px;
		font-size: 2rem;
	}

	.couponCard01 {
		display: flex;
		flex-direction: column;
		min-height: 447px;
		gap: 32px;
		padding: 20px;
		border-radius: 20px;
	}

	.couponContent01 {
		align-self: stretch;
	}

	.couponContent01 h3 {
		font-size: 2rem;
	}

	.couponLead01 {
		margin-top: 8px !important;
		font-size: 2rem;
	}

	.couponIllustration01 {
		order: 2;
		align-self: center;
		flex: 0 0 180px;
	}

	.decorationCoupon01 {
		display: none !important;
	}

	.brandSection01 {
		min-height: 908px;
		padding: 120px 24px;
	}

	.sectionTitleLarge01 {
		margin-bottom: 60px;
	}

	.sectionTitleLarge01 h2 {
		line-height: 1.6;
	}

	.sectionTitleLarge01 strong {
		display: block;
	}

	.brandCard01 {
		min-height: 307px;
		padding: 48px;
		border-radius: 20px;
	}

	.brandCard01 h3 {
		font-size: 2rem;
		text-align: center;
	}

	.brandLogoSquareList01 {
		margin-top: 24px;
		gap: 20px;
	}

	.brandLogoSquareList01 img {
		width: 68px;
		height: 68px;
	}

	.brandLogoWideList01 {
		width: 121px;
		height: auto;
		gap: 18px;
		margin: 24px 0;
	}

	.brandNote01 {
		font-size: 1.2rem;
		text-align: center;
	}

	.decorationBrand01 {
		top: 20px;
		left: -12%;
		width: 190px;
	}

	.howtoSection01 {
		height: auto;
		min-height: 0;
		padding: 120px 24px;
	}

	.howtoStepList01 {
		display: flex;
		overflow-x: auto;
		overflow-y: hidden;
		width: 100%;
		gap: 16px;
		margin: 60px auto 32px;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.howtoStepList01::-webkit-scrollbar {
		display: none;
	}

	.howtoStepList01 article {
		display: flex;
		flex: 0 0 100%;
		flex-direction: column;
		height: auto;
		border-radius: 20px;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.howtoStepList01 h3 {
		padding: 32px 16px;
	}

	.howtoStepList01 img {
		width: 100%;
		height: auto;
		aspect-ratio: 368 / 538;
		object-fit: cover;
		object-position: center;
	}

	.scrollGuide01 {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		color: #009F64;
		font-size: 2rem;
		text-align: right;
	}

	.scrollGuide01 img {
		width: 31px;
		height: 18px;
		margin-left: 8px;
	}

	.howtoButton01 {
		width: 100%;
		margin: 32px 0 60px;
	}

	.howtoButton01 > img {
		margin-left: 4px;
	}

	.appPromotion01 {
		display: block;
		height: 597px;
		border-radius: 20px;
	}

	.appPromotionContent01 {
		min-width: 0;
		padding: 20px;
	}

	.appPromotion01 h3 {
		font-size: 2rem;
	}

	.appPromotion01 h3 strong {
		font-size: 2.8rem;
	}

	.appPromotion01 p {
		font-size: 1.4rem;
	}

	.appPromotionContent01 .buttonPrimary01 {
		margin-top: 12px;
		font-size: 1.4rem;
	}

	.appPromotionPhoneList01 {
		position: absolute;
		bottom: 0;
		left: 20px;
		width: calc(100% - 40px);
		height: 236px;
	}

	.appPromotionPhoneList01 img {
		width: 158px;
	}

	.appPromotionPhoneList01 img:first-child {
		top: 36px;
		right: 40px;
	}

	.appPromotionPhoneList01 img:last-child {
		top: 84px;
		left: 27px;
	}

	.noteText01 {
		margin-top: 16px;
		font-size: 1.4rem;
	}

	.couponCaption01 {
		font-size: 1.6rem;
	}

	.decorationHowto01 {
		top: -40px;
		right: -30%;
		width: 260px;
	}

	.futureSection01 {
		min-height: 1019px;
		padding: 120px 24px;
	}

	.futureSection01 .sectionTitle01 {
		margin-bottom: 60px;
	}

	.futureCard01 {
		flex-direction: column;
		min-height: 567px;
		gap: 24px;
		padding: 20px;
		border-radius: 20px;
	}

	.futureComingSoon01 {
		font-size: 2rem;
	}

	.futureContent01 h3 {
		font-size: 2rem;
	}

	.futureContent01 h3 strong {
		font-size: 2.8rem;
	}

	.futureContent01 > p:not(.futureComingSoon01) {
		font-size: 1.4rem;
	}

	.futureIllustration01 {
		flex: 0 0 180px;
	}

	.futureReleaseNote01 {
		display: none;
	}

	.futureReleaseNoteSp01 {
		display: block;
		align-self: stretch;
		font-size: 1.4rem;
		line-height: 1.8;
	}

	.downloadSection01 {
		min-height: 702px;
		padding: 120px 24px;
	}

	.downloadSection01 h2 {
		margin-bottom: 24px;
		font-size: 2.4rem;
		line-height: 1.4;
		text-align: center;
	}

	.downloadDate01 {
		top: -45px;
		right: 24px;
		font-size: 1.4rem;
	}

	.downloadCard01 {
		padding: 20px;
		border-radius: 20px;
	}

	.downloadLabel01 {
		font-size: 1.6rem;
	}

	.downloadBadgeList01 {
		flex-direction: column;
		height: auto;
		gap: 16px;
	}

	.storeBadge01 {
		flex: none;
		width: 240px;
		height: 69px;
		font-size: 1.6rem;
	}

	.storeBadgeImage01 {
		height: auto;
	}

	.pageContainer01 .downloadQr01 {
		display: none;
	}

	.downloadLinkList01 {
		font-size: 1.4rem;
		text-align: center;
	}

	.siteFooter01 {
		min-height: 172px;
		padding: 24px;
		text-align: center;
	}

	.footerInner01 {
		flex-direction: column;
		padding: 30px 0;
	}

	.footerColumnRight01 {
		display: block;
	}

	.footerLogoList01 {
		justify-content: center;
		margin-bottom: 15px;
	}

	.footerLogoList01 img {
		width: 100%;
		max-width: 405px;
		height: auto;
	}

	.footerNav01 {
		margin-bottom: 12px;
	}

	.footerCopyrightWrap01 {
		margin-left: 0;
	}

}

@media screen and (max-width: 389px) {
	.heroInner01 {
		--hero-sp-content-top: 32px;
	}

	.heroContent01 p {
		font-size: 1.4rem;
	}

	.heroCity01 {
		width: 400px;
		margin-left: 0;
	}

	.aboutSection01{
		height: 632px;
		padding: 0px 24px 0px;
	}

	.lifeCardList01{
		width: 100%;
	}
}

.pageContainer01 :where(
	a[href],
	button:not([disabled]),
	input:not([disabled]),
	select:not([disabled]),
	textarea:not([disabled]),
	[tabindex]:not([tabindex="-1"])
):focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
	box-shadow: 0 0 0 6px #005fcc;
}

@supports not selector(:focus-visible) {
	.pageContainer01 :where(
		a[href],
		button:not([disabled]),
		input:not([disabled]),
		select:not([disabled]),
		textarea:not([disabled]),
		[tabindex]:not([tabindex="-1"])
	):focus {
		outline: 3px solid #fff;
		outline-offset: 3px;
		box-shadow: 0 0 0 6px #005fcc;
	}
}

@media (forced-colors: active) {
	.pageContainer01 :where(
		a[href],
		button:not([disabled]),
		input:not([disabled]),
		select:not([disabled]),
		textarea:not([disabled]),
		[tabindex]:not([tabindex="-1"])
	):focus-visible {
		outline-color: CanvasText;
		box-shadow: none;
	}
}