@charset "utf-8";
:root {
	--header-height: 60px;

	--finance-50: #fbf5eb;
	--finance-100: #f6ead7;
	--finance-200: #f8daac;
	--finance-300: #ff9c01;
	--finance-400: #ff6738;
	--business-50: #f0f9fb;
	--business-100: #d9eff5;
	--business-200: #b2e7f6;
	--business-400: #14c5f9;
	--donate-50: #fbf1ef;
	--donate-100: #f6e4de;
	--donate-200: #f8cbbd;
	--donate-100: #f6e4de;
	--donate-400: #ff6738;
	--activity-50: #eff5f1;
	--activity-100: #dfeae2;
	--activity-200: #bedac7;
	--activity-400: #3e9a59;
	--last-50: #f7fbeb;
	--last-100: #f0f6d7;
	--last-200: #e0edaa;
	--green: #009d66;
}

/* layout */
.hidden {
	overflow: hidden;
	height: 100%;
}
body {
	max-width: 480px;
	width: 100%;
	margin: 0 auto;
}
.site-header,
.progress-bar {
	transition: background, opacity, visibility 2s;
}
.section-main,
.section-page-wrap {
	transition: all 2s;
}
body.isMainPage .site-header,
body.isMainPage .progress-bar {
	visibility: hidden;
	opacity: 0;
}
body:not(.isMainPage) .site-header {
	visibility: visible;
	opacity: 1;
}
body.isMainPage .section.section-main {
	visibility: visible;
	opacity: 1;
}
body:not(.isMainPage) .section.section-main {
	visibility: hidden;
	opacity: 0;
}
body.isMainPage .section-page-wrap {
	visibility: hidden;
	opacity: 0;
}
body:not(.isMainPage) .section-page-wrap {
	visibility: visible;
	opacity: 1;
}
.container {
	position: relative;
	width: 100%;
	max-width: 100%;
	padding: 0 32px;
	margin: 0;
	overflow: hidden;
}

/* common */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}
.back-finance {
	background-color: var(--finance-100);
}
.back-business {
	background-color: var(--business-100);
}
.back-donate {
	background-color: var(--donate-100);
}
.back-activity {
	background-color: var(--activity-100);
}
.back-last {
	background-color: var(--last-100);
}
.point-finance {
	background-color: var(--finance-200);
}
.point-business {
	background-color: var(--business-200);
}
.point-donate {
	background-color: var(--donate-200);
}
.color-finance {
	color: var(--finance-400);
}
.color-business {
	color: var(--business-400);
}
.color-donate {
	color: var(--donate-400);
}
.color-activity {
	color: var(--activity-400);
}
.color-black {
	color: #000;
}
.flex {
	display: flex;
}
.text-center {
	text-align: center;
}
.mb-80 {
	margin-bottom: 80px;
}
.mb-64 {
	margin-bottom: 64px;
}
.mb-48 {
	margin-bottom: 48px;
}
.mt-36 {
	margin-top: 36px;
}
.mb-36 {
	margin-bottom: 36px;
}
.mb-32 {
	margin-bottom: 32px;
}
.mb-26 {
	margin-bottom: 26px;
}
.mb-24 {
	margin-bottom: 24px;
}
.mb-18 {
	margin-bottom: 18px;
}
.mb-16 {
	margin-bottom: 16px;
}
.mb-6 {
	margin-bottom: 6px;
}
.highlight {
	position: relative;
	display: inline-block;
	z-index: 0;
}
.highlight:before {
	content: "";
	position: absolute;
	bottom: 2px;
	left: 0;
	display: block;
	width: 100%;
	height: 6px;
	background: var(--finance-400);
	z-index: -1;
}
.highlight.green:before {
	background: var(--green);
}
.section-finance .highlight:before {
	background: var(--finance-300);
}
.section-business .highlight:before {
	background: var(--business-400);
}
.section-donate .highlight:before {
	background: var(--donate-400);
}
.section-activity .highlight:before {
	background: var(--activity-400);
}

/* btn */
.btn-black,
.btn-orange {
	position: relative;
	display: block;
	width: 247px;
	height: 48px;
	font-size: 14px;
	font-weight: 700;
	line-height: 48px;
	color: #fff;
	padding: 0 24px;
	margin: 0 auto;
	background-color: #000;
	border-radius: 30px;
	box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.25);
	text-align: left;
}
.btn-orange {
	width: 257px;
	color: #000;
	background-color: #fcb034;
}
.btn-plus {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 28px;
	height: 28px;
	font-size: 24px;
	font-weight: 400;
	line-height: 22px;
	color: #000;
	padding: 5px 0 8px;
	border: 1px solid #000;
	border-radius: 50%;
	background-color: #fcb034;
	box-shadow: 2px 4px 0px 0px rgba(0, 0, 0, 0.12);
	text-align: center;
}
.btn-black .btn-plus,
.btn-orange img {
	position: absolute;
	top: 10px;
	right: 11px;
}

/* header */
.site-header {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	max-width: 480px;
	width: 100%;
	height: var(--header-height);
	padding: 15px 20px 13px 20px;
	background: rgba(255, 255, 255, 0.6);
	border-bottom: 1px solid rgba(7, 6, 6, 0.2);
	overflow: hidden;
	z-index: 99;
}
body.page-1 .site-header,
body.page-1 .progress-bar {
	background-color: var(--finance-50);
}
body.page-2 .site-header,
body.page-2 .progress-bar,
body.before-page-2 .site-header,
body.before-page-2 .progress-bar {
	background-color: var(--business-50);
}
body.page-3 .site-header,
body.page-3 .progress-bar,
body.before-page-3 .site-header,
body.before-page-3 .progress-bar {
	background-color: var(--donate-50);
}
body.page-4 .site-header,
body.page-4 .progress-bar,
body.before-page-4 .site-header,
body.before-page-4 .progress-bar {
	background-color: var(--activity-50);
}
body.page-5 .site-header,
body.before-page-5 .site-header {
	background-color: var(--last-50);
}
.site-header nav {
	flex: 1;
	margin: 0 32px;
}
.site-header .nav {
	display: flex;
	justify-content: center;
}
.site-header .nav li {
	flex: 1;
	padding: 0 15px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	color: #666;
	text-align: center;
}
.site-header .btn-audio {
	position: relative;
}
.site-header .btn-audio:before {
	content: "";
	position: absolute;
	top: -2px;
	left: -26px;
	width: 1px;
	height: 19px;
	background: #cdb7a6;
}
body.page-1 .site-header .nav li:nth-of-type(1) {
	color: var(--finance-300);
}
body.page-2 .site-header .nav li:nth-of-type(2) {
	color: var(--business-400);
}
body.page-3 .site-header .nav li:nth-of-type(3) {
	color: var(--donate-400);
}
body.page-4 .site-header .nav li:nth-of-type(4) {
	color: var(--activity-400);
}

/* page */
#loader {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: 100;
}
.site-main {
	position: relative;
}
body.page-1 .section-page-wrap {
	background-color: var(--finance-100);
}
body.page-2 .section-page-wrap,
body.before-page-2 .section-page-wrap {
	background-color: var(--business-100);
}
body.page-3 .section-page-wrap,
body.before-page-3 .section-page-wrap {
	background-color: var(--donate-100);
}
body.page-4 .section-page-wrap,
body.before-page-4 .section-page-wrap {
	background-color: var(--activity-100);
}
body.page-5 .section-page-wrap,
body.before-page-5 .section-page-wrap {
	background-color: var(--last-100);
}
.section.section-main {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	color: #fff;
	background: #fff;
}
.section .section-inner {
	position: relative;
}
.section.section-main .section-inner {
	height: 100%;
}
.section.section-page .section-inner {
	min-height: 100vh;
	padding-top: var(--header-height);
	padding-bottom: 100px;
}
.section.section-page.section-last .section-inner {
	padding-bottom: 0;
}
.video-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.video-wrap:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-image: url(../images/pattern.png);
	background-repeat: repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.6;
}
.video-wrap video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.main-wrap {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.main-wrap .main-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding: 20px;
	z-index: 1;
}
.main-wrap .main-top img {
	width: 143px;
	height: auto;
}
.main-wrap .main-top .title {
	padding: 2px 3px 1px 4px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	background: rgba(0, 0, 0, 0.7);
	border-radius: 5px;
}
.main-wrap .main-bottom {
	margin-top: auto;
	padding: 20px 26px;
}
.main-wrap .main-text {
	position: relative;
	margin-bottom: 86px;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	text-align: center;
}
.main-wrap .main-text p + p {
	margin-top: 24px;
}
.main-wrap .main-text .btn-down {
	position: absolute;
	bottom: -52px;
	left: 50%;
	transform: translateX(-50%);
}
.main-wrap .main-text .btn-down:after {
	content: "";
	position: absolute;
	bottom: -78px;
	left: 8px;
	width: 1px;
	height: 78px;
	background: #fff;
}
.main-wrap .btn-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.main-wrap .main-btn {
	display: flex;
	align-items: center;
	column-gap: 8px;
	font-size: 13px;
	font-weight: 400;
	line-height: 24px;
	color: #fff;
	z-index: 1;
}
.section-page .page-title-wrap {
	position: relative;
	padding-left: 8px;
	padding-top: 64px;
	z-index: 1;
}
.section-page .page-title {
	position: relative;
}
.section-page .page-desc {
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	margin-top: 8px;
}
.section-page .page-title-image {
	position: relative;
	height: 0;
	padding-top: calc(100% + 71px);
	margin-right: -81px;
	margin-top: -78px;
	margin-left: 10px;
	background: #ddd;
	border-radius: 50%;
	z-index: 0;
}
.section-page .page-title-image:before {
	content: "";
	position: absolute;
	top: -15px;
	left: 16px;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
.section-page.section-finance .page-title-image:before {
	background: var(--finance-200);
}
.section-page.section-business .page-title-image:before {
	background: var(--business-200);
}
.section-page.section-donate .page-title-image:before {
	background: var(--donate-200);
}
.section-page.section-activity .page-title-image:before {
	background: var(--activity-200);
}
.section-page .page-title-image .inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	border-radius: 50%;
	overflow: hidden;
}
.section-page .page-title-image img {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: auto;
	margin-top: -55%;
}
.section-page .marquee-wrap {
	position: relative;
	height: 32px;
	margin-top: -65px;
	z-index: 1;
}
.section-page .hand {
	position: relative;
	z-index: 1;
}
.section-page .hand img {
	position: absolute;
}
.section-page .track-image {
	margin-top: -32px;
	margin-left: -12px;
	margin-right: -32px;
}

/* progress bar */
.progress-bar {
	position: fixed;
	top: 60px;
	left: 50%;
	transform: translateX(-50%);
	max-width: 480px;
	width: 100%;
	height: 12px;
	max-height: 12px;
	background: rgba(255, 255, 255, 0.6);
	transition: max-height 0.3s;
	z-index: 99;
}
.progress-bar.hide {
	max-height: 0;
}
.progress-bar .bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
}
.progress-bar:not(.hide) .bar:after {
	content: "";
	position: absolute;
	top: 0;
	right: -5px;
	display: block;
	width: 12px;
	height: 12px;
	background: url(../images/gif/run-progress.gif) no-repeat center;
	background-size: 12px;
}
body.page-1 .progress-bar .bar {
	background-color: var(--finance-300);
}
body.page-2 .progress-bar .bar {
	background-color: var(--business-400);
}
body.page-3 .progress-bar .bar {
	background-color: var(--donate-400);
}
body.page-4 .progress-bar .bar {
	background-color: var(--activity-400);
}
body.page-5 .progress-bar {
	max-height: 0;
}

/* marquee */
.marquee {
	width: calc(100% - 6px);
	height: 32px;
	margin: 0 auto;
	font-size: 15px;
	font-weight: 700;
	line-height: 30px;
	color: var(--finance-300);
	background: #000;
	border-radius: 24px;
	overflow: hidden;
}
.marquee .js-marquee {
	display: flex;
	align-items: center;
}

/* modal */
.blocker {
	padding: 20px 3px 3px 3px;
	z-index: 100;
}
.modal {
	max-width: 474px;
	width: 100%;
	min-height: 100%;
	padding: 24px 22px;
	border: 1px solid #000;
	border-radius: 20px;
	box-shadow: none;
}
.modal .modal-content {
	margin-bottom: 50px;
}
.btn-close {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #000;
	box-shadow: 2px 4px 0 0 rgba(0, 0, 0, 0.12);
}

.only_mobile { visibility: hidden; display: none !important; }
.modal-title-desc { margin-top: 20px; color: #555; line-height: 1.3; }

@media screen and (min-width: 481px) {
	body:not(.isMobile) {
		max-width: 100%;
		background: #ddd;
	}
	body:not(.isMobile) .section-page-wrap {
		width: 480px;
		margin: 0 auto;
	}
	body:not(.isMobile) .main-wrap .main-top {
		max-width: 936px;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	body:not(.isMobile) .main-wrap .main-bottom {
		width: 390px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media screen and (max-width: 1023px) {

.only_pc { visibility: hidden; display: none !important; }
.only_mobile { visibility: visible; display: flex !important; }

}