@charset "UTF-8";

#fullpage {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.section {
	position: relative;
}
.font_titan {
	font-family: 'Titan One', cursive;
}
.logo_wrap {
	display: block;
	position: fixed;
	width: 100%;
	height: 100px;
	background-color: rgba(255, 255, 255, 0.6);
	z-index: 800;
}
.logo_wrap .logo {
	display: block;
	position: absolute;
	left: 3%;
	top: 50%;
	width: 140px;
	height: 40px;
	transform: translateY(-50%);
}
.logo_wrap .logo img {
	width: 100%;
}
.btn_store {
	display: inline-block;
	position: relative;
	width: 200px;
	height: 60px;
	border: 2px solid #522672;
	border-radius: 50px;
	background-color: rgba(255, 255, 255, 0.7);
	font-family: 'Titan One', cursive;
	vertical-align: center;
	text-align: left;
	text-align: center;
	font-size: 16px;
	color: #522672;
	line-height: 58px;
	box-sizing: border-box;
}
.btn_store::before {
	content: "";
	display: block;
	position: absolute;
	left: 30px;
	top: 50%;
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-size: 100%;
	transform: translateY(-50%);
}
.btn_store:hover ,
.btn_store:focus {
	background-color: #522672;
	color: #fff;
}
.btn_store.app_store {
	padding-left: 20px;
}
.btn_store.google_store {
	padding-left: 30px;
}
.btn_store.app_store::before {
	width: 19px;
	height: 22px;
	background-image: url("../img/ico_apple_b.svg");
}
.btn_store.app_store:hover:before ,
.btn_store.app_store:focus:before {
	background-image: url("../img/ico_apple_w.svg");
}
.btn_store.google_store::before {
	width: 19px;
	height: 21px;
	background-image: url("../img/ico_google_b.svg");
}
.btn_store.google_store:hover:before ,
.btn_store.google_store:focus:before {
	background-image: url("../img/ico_google_w.svg");
}
.page_navi_wrap {
	position: fixed;
	right: 50px;
	bottom: 48px;
	z-index: 800;
}
.page_navi_wrap ul {
	display: flex;
}
.page_navi_wrap li + li {
	margin-left: 8px;
}
.page_navi_wrap li a {
	display: block;
	width: 32px;
	height: 32px;
	border: 1.7px solid #522672;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.7);
	font-family: 'Titan One', cursive;
	text-align: center;
	font-size: 16px;
	color: #522672;
	line-height: 32px;
}
.page_navi_wrap li a.locate {
	background-color: #522672;
	color: #fff;
}
.page_navi_wrap li a:hover ,
.page_navi_wrap li a:focus {
	background-color: #522672;
	color: #fff;
}
.bg_line_effect {
	background-image: url("../img/effect_line.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 80%;
	animation: mainBackScale 10s infinite;
}
.store_wrap {
	display: flex;
	justify-content: space-between;
	line-height: 0;
	letter-spacing: 0;
	z-index: 100;
}
.sec1 .store_wrap {
	gap: 12px;
	position: absolute;
	left: 50px;
	bottom: 39px;
}
.next_arrow {
	position: absolute;
	left: 50%;
	bottom: 65px;
	width: 24px;
	animation: scrollArrow 1.4s infinite;
	transform: translateX(-50%);
	opacity: 0;
}
.next_arrow img {
	width: 100%;
}
.slogan_wrap {
	display: block;
	position: relative;
	width: 100%;
	font-family: 'Titan One', cursive;
	color: #B99AD6;
}
.sec1 .slogan_wrap {
	font-size: 182px;
}
.sec1 .slogan_back {
	top: calc(50% - 180px);
	transform: translateY(-50%);
	z-index: 11;
}
.sec1 .slogan_left {
	left: calc(50% - 300px);
	transform: translateX(-50%);
}
.sec1 .slogan_right {
	right: calc(50% - 310px);
	transform: translateX(50%);
}
.slogan_wrap strong ,
.slogan_wrap .slogan_middle {
	position: absolute;
	letter-spacing: 10px;
}
.slogan_middle img {
	width: 100%;
}
.sec1 .slogan_middle {
	left: 50%;
	top: 50%;
	width: 300px;
	transform: translate(-50%, -40%) scale(0.8);
	z-index: 12;
}
.locate_section.sec1 .slogan_middle {
	animation: openScale .45s forwards;
}
.sec1 .slogan_top {
	left: 50%;
	top: calc(50% + 90px);
	transform: translate(-50%, -50%);
	z-index: 13;
}
.deco_img {
	position: absolute;
	transition: all 0.3s;
	z-index: 3;
}
.deco_img img {
	width: 100%;
}
.locate_section .deco_img img {
	animation: fadeInScale 0.4s forwards;
	opacity: 0;
}
.deco_img.camp {
	right: 24%;
	top: 20%;
	width: 100px;
	transform: rotateZ(37deg);
}
.deco_img.camp:hover ,
.deco_img.camp:focus {
	transform: rotateZ(-185deg) scale(1.2);
}
.locate_section .deco_img.camp img {
	animation-delay: 0.1s;
}
.deco_img.fire {
	left: 17%;
	bottom: 27%;
	width: 123px;
	transform: rotateZ(23deg);
}
.deco_img.fire:hover ,
.deco_img.fire:focus {
	transform: rotateZ(-40deg) scale(0.7);
}
.locate_section .deco_img.fire img {
	animation-delay: 0.2s;
}
.deco_img.tree {
	right: 17%;
	bottom: 20%;
	width: 123px;
	transform: rotateZ(-36deg);
}
.deco_img.tree:hover ,
.deco_img.tree:focus {
	transform: rotateZ(62deg) scale(1.4);
}
.locate_section .deco_img.tree img {
	animation-delay: 0.3s;
}
.section_wrap {
	display: flex;
	justify-content: center;
	gap: 100px;
	align-items: center;
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100vh;
	padding: 0 8%;
	box-sizing: border-box;
}
.section_wrap.sec1 ,
.section_wrap.sec5 {
	justify-content: center;
	align-items: center;
	max-width: 100%;
}
.txt_wrap {
	display: block;
	flex: 1;
	position: relative;
}
.fc_522672 {
	color: #522672;
}
.txt_title {
	display: block;
	word-break: keep-all;
	font-size: 38px;
	font-weight: 700;
	letter-spacing: 0px;
	opacity: 0;
}
.txt_title + .txt_summary {
	margin-top: 44px;
}
.txt_summary {
	display: block;
	font-size: 22px;
	line-height: 152%;
	font-weight: 500;
	letter-spacing: 0px;
	opacity: 0;
}
.txt_desc {
	display: block;
	word-break: keep-all;
	font-size: 22px;
	line-height: 152%;
	font-weight: 400;
	letter-spacing: 0px;
	opacity: 0;
}
.txt_desc + .about_maru {
	margin-top: 74px;
}
.sec3_maru .txt_title,
.sec3_maru .txt_summary,
.sec3_maru .txt_desc {
	opacity: 0;
}
.sec3_maru {
	display: none;
}
.sec3_maru.switch {
	display: flex;
}
.about_maru {
	display: inline-block;
	font-size: 18px;
	color: #999999;
	font-weight: 400;
	opacity: 0;
}
.about_maru:hover ,
.about_maru:focus {
	transition: all 0.3s;
	scale: 1.05;
	rotate: -1.2deg;
}
.about_maru b {
	color: #522672;
	font-weight: 400;
}
.back_maru_world {
	position: absolute;
	left: 55%;
	top: 50%;
	width: 50%;
	transform: translateY(-50%);
	opacity: 0.6;
}
.back_maru_world img {
	width: 100%;
}
.txt_return {
	position: absolute;
	left: 0;
	top: -100px;
	font-size: 18px;
	color: #999;
	opacity: 0;
}
.txt_return:hover ,
.txt_return:focus {
	transition: all 0.3s;
	scale: 1.05;
	rotate: -1.2deg;
}
.btn_return {
	position: absolute;
	left: 500px;
	top: -40px;
	border-radius: 60px;
	opacity: 0;
	rotate: 21deg;
}
.btn_return:hover ,
.btn_return:focus {
	transition: all 0.3s;
	rotate: -20deg;
	scale: 1.15;
}
.deco_wrap {
	position: absolute;
	opacity: 0;
}
.deco_wrap img {
	width: 100%;
}
.deco_wrap.star01 {
	left: 620px;
	top: -50px;
	opacity: 0;
	rotate: 20deg;
}
.deco_wrap.star02 {
	left: 560px;
	top: 60px;
	width: 28px;
	opacity: 0;
}
.deco_wrap.star03 {
	left: 470px;
	top: -35px;
	opacity: 0;
}
.img_wrap {
	display: block;
	flex: 1;
	position: relative;
	opacity: 0;
}
.img_wrap img {
	position: absolute;
	transform: translate(-50%, -50%);
}
.oneday_carbon img:nth-child(1) {
	left: 50%;
	top: 50%;
	width: 300px;
}
/* .oneday_carbon img:nth-child(2) {
	left: calc(50% - 210px);
	top: calc(50% - 106px);
	width: 366px;
} */
.oneday_carbon img:nth-child(2) {
	left: calc(50% + 142px);
	top: calc(50% + 100px);
	width: 303px;
}
.stamp_collection img:nth-child(1) {
	left: calc(50% - 12.5%);
	top: 50%;
	width: 297px;
	z-index: 1;
}
.stamp_collection img:nth-child(2) {
	left: calc(50% + 12.5%);
	top: 50%;
	width: 300px;
}
.graph_tip img:nth-child(1) {
	left: calc(50% - 40%);
	top: calc(50% + 20px);
	width: 234px;
}
.graph_tip img:nth-child(2) {
	left: calc(50% - 18.5%);
	top: 50%;
	width: 300px;
}
.graph_tip img:nth-child(3) {
	left: calc(50% + 3%);
	top: 50%;
	width: 261px;
}
/* .graph_tip img:nth-child(4) {
	left: calc(50% + 90px);
	top: calc(50% + 250px);
	width: 327px;
} */
.sec5 .slogan_wrap {
	font-size: 140px;
}
.sec5 .slogan_back {
	top: calc(50% - 196px);
	transform: translateY(-50%);
	z-index: 11;
}
.sec5 .slogan_left {
	left: calc(50% - 266px);
	transform: translateX(-50%);
}
.sec5 .slogan_right {
	right: calc(50% - 375px);
	transform: translateX(50%);
}
.sec5 .slogan_middle {
	left: calc(50% - 50px);
	top: calc(50% - 370px);
	width: 280px;
	transform: translate(-50%, -50%);
	transform: rotateZ(30deg);
	z-index: 12;
}
.sec5 .slogan_top {
	left: 50%;
	top: calc(50% + 20px);
	white-space: nowrap;
	transform: translate(-50%, -50%);
	z-index: 13;
}
.sec5 .store_wrap {
	gap: 36px;
	position: absolute;
	left: 50%;
	top: calc(50% + 260px);
	transform: translate(-50%, -50%);
	z-index: 13;
}
.sec5 .btn_store {
	position: relative;
	width: 400px;
	height: 120px;
	border-radius: 66px;
	text-align: left;
	text-align: center;
	font-size: 40px;
	line-height: 116px;
	box-sizing: border-box;
}
.sec5 .btn_store::before {
	content: "";
	display: block;
	position: absolute;
	left: 10%;
	top: 50%;
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-size: 100%;
	transform: translateY(-50%);
}
.sec5 .btn_store.app_store {
	padding-left: 5%;
}
.sec5 .btn_store.google_store {
	padding-left: 14%;
}
.sec5 .btn_store.app_store::before {
	width: 51px;
	height: 61px;
	padding-bottom: 4px;
}
.sec5 .btn_store.google_store::before {
	width: 51px;
	height: 55.5px;
}
.active .txt_wrap .txt_title {
	animation: fadeInUp .8s forwards;
	animation-delay: 0.4s;
}
.active .txt_wrap .txt_summary {
	animation: fadeInUp .8s forwards;
	animation-delay: 0.45s;
}
.active .txt_wrap .txt_desc {
	animation: fadeInUp .8s forwards;
	animation-delay: 0.5s;
}
.active .txt_wrap .about_maru {
	animation: fadeInUp .8s forwards;
	animation-delay: 0.6s;
}
.active .img_wrap {
	animation: fadeInLeft 0.8s forwards;
	animation-delay: 0.4s;
}
.active .img_wrap.oneday_carbon {
	animation: fadeInRight 0.8s forwards;
	animation-delay: 0.4s;
}
.active .img_wrap.graph_tip {
	animation: fadeInRight 0.8s forwards;
	animation-delay: 0.4s;
}
/* ** SVG Animation */
.txt_effect {
	position: relative;
}
.svg_img {
	position: absolute;
}
.svg_img.svg_round_wrap {
	left: calc(50% - 10px);
	top: 50%;
	width: 280px;
	transform: translate(-50%, -50%);
}
.svg_img.svg_arrow {
	left: calc(50% - 50px);
	top: 20%;
	width: 144px;
	height: 147px;
	border-radius: 0px 300px 0px 300px;
	transition: all 0.3s;
	transform: translateX(-50%);
	cursor: pointer;
	rotate: -74deg;
}
.svg_img.svg_arrow:hover , .svg_img.svg_arrow:focus {
	transform: translateX(-50%) rotate(-10deg);
}
.svg_img.svg_square_wrap {
	left: 50%;
	top: 50%;
	width: 238px;
	transform: translate(-50%, -50%);
}
.green_line_path {
	fill: none;
	stroke: #3F8CFF;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 20px;
}
.sec5 .slogan_wrap {
	height: 100%;
}
.notice_wrap {
	font-size: 16px;
	/* max-height: 30px; */
	position: absolute;
	z-index: 10;
	left: 0;
	bottom: 38px;
	margin-bottom: 16px;
	line-height: 1;
}
.notice_wrap a {
	font-size: 20px;
	color: #838383;
	padding: 7px 5px;
}
.notice_wrap a + a {
	margin-left: 20px;
}
/* SVG Round Effect */
.svg_round_wrap .svg_round01 {
	stroke-dasharray: 6062.4px;
	stroke-dashoffset: 6062.4px;
}
.svg_round_wrap .svg_round02 {
	stroke-dasharray: 5787.6px;
	stroke-dashoffset: 5787.6px;
}
.svg_round_wrap .svg_round03 {
	stroke-dasharray: 5804.6px;
	stroke-dashoffset: 5804.6px;
}
.svg_round_wrap .svg_round04 {
	stroke-dasharray: 5904.3px;
	stroke-dashoffset: 5904.3px;
}
.locate_section .svg_round_wrap .svg_round01 {
	animation: svgRound01 0.4s ease-in-out 0.2s forwards;
}
.locate_section .svg_round_wrap .svg_round02 {
	animation: svgRound02 0.4s ease-in-out 0.2s forwards;
}
.locate_section .svg_round_wrap .svg_round03 {
	animation: svgRound03 0.4s ease-in-out 0.2s forwards;
}
.locate_section .svg_round_wrap .svg_round04 {
	animation: svgRound04 0.4s ease-in-out 0.2s forwards;
}
/* // SVG Round Effect */
/* SVG Arrow Effect */
.svg_arrow .arrow_body01 {
	stroke-dasharray: 1353.3px;
	stroke-dashoffset: 1353.3px;
}
.svg_arrow .arrow_body02 {
	stroke-dasharray: 1291px;
	stroke-dashoffset: 1291px;
}
.svg_arrow .arrow_body03 {
	stroke-dasharray: 1322px;
	stroke-dashoffset: 1322px;
}
.svg_arrow .arrow_head01 {
	stroke-dasharray: 257.3px;
	stroke-dashoffset: 257.3px;
}
.svg_arrow .arrow_head02 {
	stroke-dasharray: 250.6px;
	stroke-dashoffset: 250.6px;
}
.svg_arrow .arrow_head03 {
	stroke-dasharray: 234.7px;
	stroke-dashoffset: 234.7px;
}
.svg_arrow .arrow_head04 {
	stroke-dasharray: 116.1px;
	stroke-dashoffset: 116.1px;
}
.locate_section .svg_arrow .arrow_body01 {
	animation:  svgArrowBody01 0.4s ease-in-out 0.2s forwards;
}
.locate_section .svg_arrow .arrow_body02 {
	animation:  svgArrowBody02 0.4s ease-in-out 0.2s forwards;
}
.locate_section .svg_arrow .arrow_body03 {
	animation:  svgArrowBody03 0.4s ease-in-out 0.2s forwards;
}
.locate_section .svg_arrow .arrow_head01 {
	animation: svgArrowHead01 0.2s ease-in-out 0.6s forwards;
}
.locate_section .svg_arrow .arrow_head02 {
	animation: svgArrowHead02 0.2s ease-in-out 0.6s forwards;
}
.locate_section .svg_arrow .arrow_head03 {
	animation: svgArrowHead03 0.2s ease-in-out 0.6s forwards;
}
.locate_section .svg_arrow .arrow_head04 {
	animation: svgArrowHead04 0.2s ease-in-out 0.6s forwards;
}
/* // SVG Arrow Effect */
/* SVG Square Effect */
.svg_square_wrap .svg_square01 {
	stroke-dasharray: 3981.6px;
	stroke-dashoffset: 3981.6px;
}
.svg_square_wrap .svg_square02 {
	stroke-dasharray: 3997px;
	stroke-dashoffset: 3997px;
}
.svg_square_wrap .svg_square03 {
	stroke-dasharray: 4059.8px;
	stroke-dashoffset: 4059.8px;
}
.svg_square_wrap .svg_square04 {
	stroke-dasharray: 4030.8px;
	stroke-dashoffset: 4030.8px;
}
.locate_section .svg_square_wrap .svg_square01 {
	animation: svgSquare01 0.4s ease-in-out 0.2s forwards;
}
.locate_section .svg_square_wrap .svg_square02 {
	animation: svgSquare02 0.4s ease-in-out 0.2s forwards;
}
.locate_section .svg_square_wrap .svg_square03 {
	animation: svgSquare03 0.4s ease-in-out 0.2s forwards;
}
.locate_section .svg_square_wrap .svg_square04 {
	animation: svgSquare04 0.4s ease-in-out 0.2s forwards;
}
/* // SVG Square Effect */