/* --------------------
カスタム変数
-------------------- */

:root {
    --main-color:#FFF6A1;
    --key-color:#FFC300;
    --accent-color:#EA6500;
    --text-color:#000;
    --color-transparent: #ffffff00;
    --color-white: #ffffff;
    --font-common: 游ゴシック, YuGothic, "hiragino kaku gothic pron", sans-serif;
    --font-zenmaru: 'Zen Maru Gothic', serif;
    --font-jost:'Jost', sans-serif;
}

/* --------------------
初期化
-------------------- */
* {
	box-sizing: border-box;
	word-break: break-all;
}
*:focus {
	outline: none;
}
html {
	scroll-behavior: smooth;
	font-family: var(--font-zenmaru);
	font-size: clamp(14px, 1.14vw, 16px);
	overflow-x: hidden;
}
body {
	position: relative;
	margin: 0;
	overflow-x: hidden;
}
p, ul, ol, dl, dd, figure {
	margin: 0;
	padding: 0;
}
ul {
	list-style: none;
}
a {
	color: inherit;
	cursor: pointer;
	text-decoration: none;
	-webkit-tap-highlight-color: var(--color-transparent);
}
picture {
	display: block;
}

/* --------------------
共通
-------------------- */
section {
	padding: 160px 0;
}
.bg-main {
	background: var(--main-color);
}

img {
	width: 100%;
	object-fit: cover;
}

.balloon {
	width: clamp(70px, 10.14vw, 142px);
}

.section-ttl {
	font-size: clamp(32px, 4.57vw, 64px);
	margin-top: 0;
}
.badge.free {
	font-weight: bold;
	font-size: clamp(18px, 5vw, 32px);
	width: clamp(63px, 9vw, 126px);
    height: clamp(63px, 9vw, 126px);
    padding: 3%;
    background: var(--accent-color);
    line-height: 1;
    color: #fff;
    mask-image: url(../img/img_badge_free.svg);
	mask-size: cover;
}
.coin-1 {
	max-width: clamp(52px, 7.5vw, 105px);
	bottom: 0;
    left: -7%;
}
.coin-2 {
	max-width: clamp(92px, 13.14vw, 184px);
	bottom: 0;
    right: -30%;
}
.flex-box {
	display: flex;
}
.text-center {
	text-align: center;
}
.box-wh {
	background: var(--color-white);
	max-width: 1000px;
	margin: auto;
	border-radius: 20px;
	text-align: center;
}
.box-wh .note {
	text-align: left;
}
.box-shadow {
	box-shadow: 0 0 20px var(--key-color);
}
.absolute {
	position: absolute;
}
.en {
	font-family: var(--font-jost);
	font-weight: 600;
	font-size: clamp(63px, 9vw, 126px);
	color: var(--accent-color);
	text-shadow: 4px 5px 0 var(--key-color);
}
.note {
	font-size: clamp(11px, 0.92vw, 13px);
}
.badge-list {
	display: flex;
	gap: 1vw;
	justify-content: center;
	text-align: center;
	align-items: center;
}
.badge-list li {
	width: 180px;
}
.badge-list li:nth-child(1) {
	width: 224px;
}
.dot {
	position: relative;
}
.dot:before {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background-color: var(--accent-color);
}
.asterisk:after {
	position: absolute;
	top: 0;
	right: -1em;
	content: "※";
	font-size: 25%;
}
.marker-y {
	position: relative;
	display: inline-block;
}
.marker-y:before {
	position: absolute;
	bottom: 0;
	content: "";
	display: block;
	width: 100%;
	height: 10px;
	background: var(--key-color);
	z-index: -1;
}
.loop-wrap {
	position: relative;
	left: calc(50% - 50vw);
	width: 100vw;
	padding-inline: 0;
	margin-inline: 0;
	transform: translateX(-1em);
}
.loop-wrap li {
	white-space: nowrap;
	animation: marquee-left 28s linear infinite;
	padding-left: 1em;
}
.list-num {
	list-style: decimal;
}
.lower-header {
	padding: 2em;
	background: var(--main-color);
}
.inr {
	max-width: 1400px;
	margin: 0 auto;
}
.header-logo {
	width: clamp(120px, 12.8vw, 240px);
}
.sp {
	display: none;
}

@media screen and (max-width: 1400px) {
	.badge.free {
		padding: 1.8vw;
		font-size: 2.6vw;
	}
	.inr {
		max-width: 1200px;
		padding: 0 2em;
	}
}

@media (orientation: portrait) {
	.badge.free {
		font-size: 2.6vw;
	}
	.inr {
		padding: 0 2em;
	}
	.lower-header {
		padding: 2em 0;
	}
}

@media screen and (max-width: 600px) and (orientation: portrait) {
	section {
		padding: 60px 0;
	}
	.badge.free {
		font-size: 1.5em;
	}
	.dot:before {
		width: 6px;
		height: 6px;
	}
	.sp {
		display: block;
	}
}

/* --------------------
MV
-------------------- */
.mv {
	padding: 0;
}
.mv-wrap {
	position: relative;
	height: 100dvh;
}
.bg_mv {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bg_mv img {
	height: 100%;
	object-fit: cover;
}
.human-1 {
	bottom: 5%;
    left: 8%;
	max-width: clamp(220px, 32.5vw, 455px);
}
.human-1 .balloon {
	transform: translateX(130%);
}
.human-2 {
	bottom: 20%;
    left: 34%;
	max-width: clamp(30px, 4.14vw, 58px);
}
.human-2 .balloon {
	transform: translateX(-25%);
}
.human-3 {
	bottom: 22%;
    left: 48%;
	max-width: clamp(40px, 5.71vw, 80px);
}
.human-3 .balloon {
	transform: translateX(-25%);
}
.human-4 {
	bottom: 15%;
    right: 35%;
	max-width: clamp(40px, 5.71vw, 80px);
}
.human-5 {
	bottom: 16%;
    right: 30%;
	max-width: clamp(47px, 6.71vw, 94px);
}
.human-5 .balloon {
	transform: translateX(-10%);
}
.human-6 {
	bottom: 13%;
    right: 8%;
	max-width: clamp(45px, 6.42vw, 90px);
}
.human-6 .balloon {
	transform: translateX(-15%);
}
.human-7 {
	bottom: 13%;
    right: 4%;
	max-width: clamp(48px, 6.85vw, 96px);
}
.mv_txt {
	position: relative;
	z-index: 2;
	max-width: 1400px;
    margin: auto;
    padding-top: 12vh;
}
.logo {
	max-width: clamp(319px, 45.5vw, 638px);
	margin: auto;
	margin-top: 6vh;
}
.page_ttl {
	position: relative;
	display: inline-block;
}
.mv .badge {
	position: absolute;
	top: -25%;
    left: -15%;
}
.mv h1 {
	font-size: clamp(35px, 5vw, 70px);
	margin: 0;
}
.mv h1 .small {
	font-size: 67%;
}
.lead {
	font-weight: bold;
	font-size: clamp(18px, 5vw, 32px);
	margin-top: 2vh;
}
.btn-area {
	background: #FFCB0C;
	padding: 2em;
}
.btn-area .note {
	text-align: right;
	margin-bottom: 2em;
}
.info_area {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto 2em;
	padding: 2em;
	font-weight: bold;
}
.info_area.box-wh {
	text-align: left;
}
.info_area ul {
	margin: 1em 2em 1em;
}
.info-item + .info-item {
	margin-top: 2em;
	padding-top: 2em;
	border-top: 1px solid #ccc;
}
.scroll-area {
	max-height: 10em;
	overflow-y: scroll;
}
.date {
	color: var(--accent-color);
}

@media screen and (max-width:1920px) {
	.mv-wrap {
		height: 150dvh;
	}
	.mv .badge {
		top: -15%;
		left: -16%;
	}
}

@media screen and (max-width:1400px) {
	.mv .badge {
		top: -25%;
		left: -15%;
	}
	.mv-wrap {
		height: 120vh;
	}
}

@media screen and (max-height: 600px) and (orientation: landscape) {
	.mv-wrap {
		height: 720px;
	}
}

@media (orientation: portrait) {
	.mv-wrap {
		height: 90vh;
	}
}

@media screen and (max-width: 600px) and (orientation: portrait) {
	.mv-wrap {
		height: 100vh;
	}
	.mv_txt {
		padding-top: 8vh;
	}
	.mv .text-center.marker-y {
		margin-top: 1em;
	}
	.human-2,
	.human-4,
	.human-5 {
		display: none;
	}
	.mv .badge {
		top: -15%;
        left: -6%;
	}
}

@media screen and (min-height: 800px) and (orientation: portrait) {
	.mv-wrap {
		height: 90vh;
	}
}


/* --------------------
about
-------------------- */
.about {
	position: relative;
}
.about .img {
	max-width: clamp(127px, 18.1vw, 254px);
	margin: 60px auto;
	position: relative;
}
.illust-shop {
	max-width: clamp(258px, 36.8vw, 516px);
	left: -6%;
	bottom: 5%;
}
.illust-park {
	max-width: clamp(365px, 52.2vw, 731px);
	right: -6%;
	bottom: 20%;
	transform: translateX(10%);
}
.about_human-1 {
	max-width: clamp(37px, 5.35vw, 75px);
	left: 10%;
    top: 10%;
}
.about_human-2 {
	max-width: clamp(80px, 11.4vw, 160px);
	left: 20%;
    bottom: 10%;
}
.about_human-3 {
	max-width: clamp(48px, 6.85vw, 96px);
	right: 25%;
    bottom: 25%;
}
.about_human-4 {
	max-width: clamp(92px, 13vw, 183px);
	right: 5%;
    top: -5%;
}
@media screen and (max-width: 1920px) {
	.illust-park {
		transform: translateX(30%);
	}
	.illust-shop {
		transform: translate(-20%, -20%);
	}
}
@media screen and (max-width: 600px) and (orientation: portrait) {
	.about_human-1 {
		top: -10%;
		left: 5%;
	}
	.about_human-2 {
		bottom: -3%;
	}
	.about_human-4 {
		right: -5%;
	}
	.illust-park {
		transform: translateX(70%);
	}
	.illust-shop {
		transform: translate(-55%, 10%);
	}
}


/* --------------------
exchange
-------------------- */
.exchange {
	position: relative;
}
.mission-list {
	justify-content: center;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 1vw;
	max-width: 1400px;
	margin: 120px auto;
}
.mission-list li {
	width: clamp(120px, 17.1vw,200px);
	height: clamp(120px, 17.1vw,200px);
	background: var(--key-color);
	text-align: center;
	display: grid;
	border-radius: 50%;
	box-shadow: inset 0 0 10px rgba(230, 151, 0, 1) ;
}
.mission-list li .center {
	margin: auto;
}
.mission-list li p {
	font-size: clamp(16px, 2vw, 28px);
	font-weight: bold;
}
.icon {
	max-width: clamp(38px, 5.42vw, 76px);
	height: clamp(38px, 5.42vw, 76px);
	margin: auto;
}
.icon img {
	display: block;
	margin: auto;
}
.exchange-item {
	max-width: 1200px;
	margin: auto;
}
.exchange .note {
	max-width: 1200px;
	margin: 15px auto;
}
.exchange-human-1 {
	max-width: clamp(62px, 8.85vw, 124px);
    left: 15%;
    top: 15%;
}
.exchange-human-2 {
	max-width: clamp(68px, 9.78vw, 137px);
    right: 15%;
    top: 15%;
}
.craker-1,
.craker-2 {
	max-width: clamp(189px, 27.6vw, 378px);
}
.craker-1 {
    left: 8%;
    top: 7%;
}
.craker-2 {
    right: 8%;
    top: 7%;
	transform: scale(-1, 1);
}

@media screen and (max-width: 1920px) {
	.mission-list li {
		width: max(120px, 12.85vw);
		height: max(120px, 12.85vw);
	}
	.exchange-human-1 {
		transform: translateX(-70%);
	}
	.exchange-human-2 {
		transform: translateX(70%);
	}
	.craker-1 {
		transform: translateX(-60%);
	}
	.craker-2 {
		right: 8%;
		top: 7%;
		transform: scale(-1, 1) translateX(-60%);
	}
}

@media (orientation: portrait) {
	.mission-list li {
		width: max(100px, 12.85vw);
		height: max(100px, 12.85vw);
	}
}

@media screen and (max-width: 600px) and (orientation: portrait) {
	.mission-list {
		margin: 3em 0 14em;
	}
	.exchange-human-1 {
		top: 46%;
	}
	.exchange-human-2 {
		top: 46%;
	}
		.craker-1 {
		top: 40%;
	}
	.craker-2 {
		top: 40%;
	}		
}



/* --------------------
reason
-------------------- */
.reason {
	position: relative;
}
.reason .box-wh {
	position: relative;
	z-index: 0;
	padding: 80px;
	margin: 80px auto;
}
.box-ttl {
	background: var(--accent-color);
	color: var(--color-white);
	font-size: clamp(16px, 2vw, 28px);
	border-radius: 20px;
	max-width: 280px;
	margin: 0 auto 40px;
}
.graph-box {
	width: 50%;
}
.graph-ttl {
	color: var(--accent-color);
}
.chart {
	display: table;
	table-layout: fixed;
	width: 100%;
	height: 200px;
	background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1) 2%, rgba(0, 0, 0, 0) 2%);
	background-size: 100% 50px;
	background-position: left top;
	border-top: 1px solid transparent;
}
.chart li {
	position:relative;
	display:table-cell;
	vertical-align:bottom;
	height: 200px;
}
.chart li span {
	margin: 0 1em;
	display:block;
	background: #ddd;
	animation: draw 1s ease-in-out;
}
.chart li span.accent {
	background: var(--accent-color);
}
.chart li span.accent:before,
.chart li span.accent:after {
	color: var(--accent-color);
}
.chart li span:before,
.chart li span:after {
	font-size: clamp(11px, 0.92vw, 13px);
	color: #999;
	font-weight: bold;
}
.chart li span:before {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	padding: 5px 1em 0;
	display: block;
	text-align: center;
	content: attr(title);
	word-wrap: break-word;
}
.chart li span:after {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 75%;
	content: attr(data-num);
	display: block;
	text-align: center;
}

.text-center.marker-y {
	font-size: clamp(16px, 1.7vw, 24px);
	font-weight: bold;
	margin-top: 40px;
} 
.benefit-ttl {
	background: var(--accent-color);
	color: var(--color-white);
	margin-top: 0;
	padding: 5px 0 10px;
	line-height: 1;
}
.benefit-box {
	width: 50%;
	border: 4px solid var(--accent-color);
	border-radius: 10px;
}
.benefit-box p {
	padding: 0 1em 1em;
}
.benefit-box .hook {
	display: block;
	text-align: center;
	color: var(--accent-color);
	font-size: clamp(16px, 2vw, 28px);
	font-weight: bold;
}
.box-wh .flex-box {
	gap: 2vw;
	margin: 40px 0;
}
.box-wh .coin-1 {
	bottom: -5%;
    left: -5%;
}
.box-wh .coin-2 {
	bottom: -5%;
    right: -10%;
}
.reason-human-1 {
	max-width: clamp(111px, 15.8vw, 222px);
	left: 15%;
    top: 30%;
}
.reason-human-2 {
	max-width: clamp(52px, 7.35vw, 103px);
	right: 12%;
    bottom: 15%;
}
.illust-wood {
	max-width: clamp(220px, 31.5vw, 441px);
	left: -5%;
    top: 35%;
}
.illust-train {
	max-width: clamp(551px, 71.6vw, 1003px);
	bottom: 0;
    right: -30%;
}

@media screen and (max-width: 1920px) {
	.reason-human-1 {
		transform: translate(-70%, -150%);
	}
	.illust-wood {
		transform: translate(-15%, -80%);
	}
	.illust-train {
		transform: translate(15%);
	}
}

@media (orientation: portrait) {
	.reason-human-1 {
		transform: translate(-70%, -220%);
	}
	.illust-wood {
		transform: translate(-15%, -120%);
	}
}

@media screen and (max-width: 600px) and (orientation: portrait) {
	.reason .box-wh {
		padding: 2em;
	}
	.box-wh .flex-box {
		flex-wrap: wrap;
		gap: 4vh;
	}
	.graph-box {
		width: 100%;
	}
	.benefit-box {
		width: 100%;
	}
	.reason-human-1 {
		transform: translate(-90%, -500%);
	}
	.reason-human-2 {
		transform: translate(-30%, 210%);
	}
	.illust-wood {
		transform: translate(-55%, -300%);
	}
	.illust-train {
		transform: translate(60%, 20%);
	}
}



/* --------------------
faq
-------------------- */
.faq {
	padding-top: 0;
}
.faq-list {
	max-width: 1200px;
	margin: 0 auto;
}

.faq-list .faq-item {
	background: var(--key-color);
	color: #000;
	font-size: clamp(16px, 2vw, 28px);
	font-weight: bold;
	border: 10px solid var(--key-color);
	border-radius: 30px;
	margin-bottom: 1em;
	transition: .4s;
}
.faq-list .faq-item:hover {
	box-shadow: 0 10px 0 rgba(234, 101, 0, 1);
}
.faq-list .faq-item .question,
.faq-list .faq-item .answer-box {
	padding: 1em;
}
.faq-list .faq-item .question:hover {
	cursor: pointer;
}
.faq-list .faq-item .answer-box {
	background: var(--main-color);
	border-radius: 0 0 20px 20px;
	font-size: clamp(14px, 1.14vw, 16px);
	display: none;
}
.faq-list .faq-item .answer-box > ul {
	list-style: disc;
	margin-left: 2em;
}
.faq-list .faq-item .answer-box > ol {
	margin-left: 2em;
}
.faq-list .faq-item .answer-box p {
	margin: 1em 0;
}
.faq-list .faq-item .answer-box a {
	text-decoration: underline;
}
.faq-list .faq-item .question:before {
	display: inline;
	content: "Q.";
}


/* --------------------
con-footer
-------------------- */
.con-footer {
	background: var(--key-color);
	position: relative;
	margin-top: 180px;
	padding-bottom: 0;
}
.arc {
	position: absolute;
	width: 100%;
	background-color: var(--main-color);
	top: 0;
}
.arc img {
	vertical-align: bottom;
}
.img-ui {
	position: relative;
	max-width: clamp(190px, 27.1vw, 380px);
	margin: 0 auto 3vh;
	z-index: 2;
}
.img-ui .badge {
	position: absolute;
	top: -5%;
	right: -5%;
	padding: 8%;
}
.sub-catch {
	font-size: clamp(16px, 3.4vw, 24px);
	font-weight: bold;
}
.dl-box .catch {
	font-size: clamp(20px, 6.8vw, 48px);
	font-weight: bold;
}
.dl-box .logo {
	margin-top: 2vh;
}
.con-footer .badge-list {
	margin: 2em;
}
.foot-link {
	max-width: 1400px;
	margin: auto;
	padding: 2em;
	display: flex;
	justify-content: space-between;
}
.link-list {
	font-size: clamp(16px, 3.4vw, 24px);
	font-weight: bold;
	gap: 2em;
}
.grass-1 {
	max-width: clamp(110px, 15.7vw, 221px);
	top: 8%;
    left: 3%;
}
.grass-2 {
	max-width: clamp(84px, 12vw, 169px);
	top: -1%;
    right: 28%;
}
.grass-3 {
	max-width: clamp(93px, 13.2vw, 186px);
	top: 30%;
	left:20%;
}
.grass-4 {
	max-width: clamp(60px, 8.57vw, 120px);
	top: 15%;
    right: 20%;
}
.grass-5 {
	max-width: clamp(68px, 9.7vw, 136px);
	bottom: 55%;
    right: 30%;
}
.grass-6 {
	max-width: clamp(96px, 13.7vw, 193px);
	bottom: 20%;
	left:5%;
}
.grass-7 {
	max-width: clamp(118px, 16.8vw, 236px);
	bottom: 15%;
    right: 5%;
}
.footer_human-1 {
	max-width: clamp(90px, 12.8vw, 180px);
	bottom: 40%;
    left: 5%;
}
.footer_human-2 {
	max-width: clamp(75px, 9.28vw, 130px);
	bottom: 20%;
    right: 20%;
}
.footer_human-3 {
	max-width: clamp(80px, 11.5vw, 161px);
	top: -10%;
    right: 5%;
}
.footer_human-4 {
	max-width: clamp(95px, 13.5vw, 189px);
	top: -16%;
    left: 20%;
}
@media screen and (max-width: 1400px) {
	.img-ui .badge {
		padding: 1.8vw;
	}
}

@media (orientation: portrait) {
	.footer_human-2 {
		right: 15%;
	}
	.foot-link {
		flex-wrap: wrap;
		justify-content: center;
	}
	.link-list {
		width: 100%;
		justify-content: center;
		font-size: clamp(16px, 3.4vw, 20px);
	}
	.copyrights {
		margin-top: 2em;
	}
}

@media screen and (max-width: 600px) and (orientation: portrait) {
	.con-footer {
		margin-top: 60px;
	}
	.link-list {
		flex-wrap: wrap;
		gap: 2vh;
	}
	.footer_human-1 {
		bottom: 55%;
	}
	.footer_human-2 {
		right: -3%;
		bottom: 45%;
	}
	.grass-6 {
		left: -15%;
	}
	.grass-7 {
		right: -15%;
	}
}


/* --------------------
unauthorized
-------------------- */
.list-disc {
	list-style: disc;
}
.link {
	text-decoration: underline;
}
.link:hover {
	text-decoration: none;
}

/* --------------------
terms
-------------------- */
.terms {
	padding-top: 2em;
}
.terms .page-ttl {
	font-size: clamp(16px, 2vw, 28px);
}
.article-wrapper {
	max-width: 1200px;
	background: var(--color-white);
	margin: auto;
	padding: 2em;
	border-radius: 20px;
}
.article-wrapper p {
	margin: 1em 0;
}
.article-wrapper article ul {
	margin-left: 1em;
}
.article-wrapper article ol {
	margin-left: 2em;
}


/* --------------------
rate
-------------------- */
table {
	width: 100%;
	table-layout: fixed;
	border-collapse:collapse;
}
tr {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
th {
	background: #eee;
}
th,
td {
	padding: 1em;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
}
td {
	text-align: right;
}

@keyframes draw{
	0%{height:0;} 
}

@keyframes marquee-left {
	100% {
		transform: translateX(-100%);
	}
}