@charset "UTF-8";

@media (max-width : 1024px) {
	
	.logo_wrap {
		height: 80px;
	}
	.btn_store {
		width: 170px;
		height: 50px;
		line-height: 48px;
	}
	.btn_store::before {
		left: 20px;
	}
	.btn_store.app_store {
		padding-left: 25px;
	}
	.btn_store.google_store {
		padding-left: 28px;
	}
	.btn_store.app_store::before {
		width: 17px;
		height: 20px;
	}
	.btn_store.google_store::before {
		width: 17px;
		height: 20px;
		margin-top: 1px;
	}
	.sec1 .store_wrap {
		gap: 12px;
		left: 20px;
	}
	.sec1 .slogan_wrap {
		font-size: 132px;
	}
	.sec1 .slogan_back {
		top: calc(50% - 130px);
	}
	.sec1 .slogan_left {
		left: calc(50% - 210px);
	}
	.sec1 .slogan_right {
		right: calc(50% - 220px);
	}
	.slogan_wrap strong ,
	.slogan_wrap .slogan_middle {
		letter-spacing: 5px;
	}
	.sec1 .slogan_middle {
		width: 200px;
	}
	.sec1 .slogan_top {
		top: calc(50% + 60px);
	}
	.deco_img.camp {
		right: 16%;
		top: 19%;
		width: 80px;
	}
	.deco_img.fire {
		left: 10%;
		width: 96px;
	}
	.deco_img.tree {
		right: 10%;
		bottom: 16%;
		width: 110px;
	}
	.section_wrap {
		gap: 50px;
	}
	.txt_title {
		font-size: 24px;
	}
	.txt_title + .txt_summary {
		margin-top: 24px;
	}
	.txt_summary {
		font-size: 16px;
	}
	.txt_desc {
		font-size: 16px;
	}
	.txt_desc + .about_maru {
		margin-top: 74px;
	}
	.about_maru {
		font-size: 14px;
		color: #999999;
	}
	.txt_return {
		font-size: 14px;
	}
	.btn_return {
		display: block;
		left: 300px;
		top: -80px;
		width: 86px;
		height: 90px;
	}
	.btn_return img {
		width: 100%;
		height: 100%;
	}
	.deco_wrap.star01 {
		left: 400px;
		top: -95px;
		width: 16px;
	}
	.deco_wrap.star02 {
		left: 360px;
		top: 20px;
		width: 22px;
	}
	.deco_wrap.star03 {
		left: 270px;
		top: -75px;
		width: 12px;
	}
	.oneday_carbon img:nth-child(1) {
		width: 200px;
	}
	/* .oneday_carbon img:nth-child(2) {
		left: calc(50% - 140px);
		top: calc(50% - 72px);
		width: 244px;
	} */
	.oneday_carbon img:nth-child(2) {
		left: calc(50% + 92px);
		top: calc(50% + 70px);
		width: 202px;
	}
	.stamp_collection img:nth-child(1) {
		left: calc(50% - 22%);
		top: calc(50% - 4px);
		width: 198px;
	}
	.stamp_collection img:nth-child(2) {
		left: calc(50% + 22%);
		width: 200px;
	}
	.graph_tip img:nth-child(1) {
		left: calc(50% - 40%);
		top: calc(50% + 6px);
		width: 156px;
	}
	.graph_tip img:nth-child(2) {
		left: calc(50% - 4%);
		width: 200px;
	}
	.graph_tip img:nth-child(3) {
		left: calc(50% + 30%);
		top: calc(50% - 35px);
		width: 174px;
	}
	/* .graph_tip img:nth-child(4) {
		left: calc(50% + 160px);
		top: calc(50% + 180px);
		width: 218px;
	} */
	
	.sec5 .slogan_wrap {
		font-size: 120px;
	}
	.sec5 .slogan_back {
		top: calc(50% - 145px);
	}
	.sec5 .slogan_left {
		left: calc(50% - 215px);
	}
	.sec5 .slogan_right {
		right: calc(50% - 277px);
	}
	.sec5 .slogan_middle {
		left: calc(50% - 40px);
		top: calc(50% - 240px);
		width: 200px;
	}
	.sec5 .slogan_top {
		top: calc(50% + 35px);
	}
	.sec5 .store_wrap {
		gap: 24px;
		top: calc(50% + 180px);
	}
	.sec5 .btn_store {
		width: 300px;
		height: 88px;
		font-size: 26px;
		line-height: 85px;
	}
	.sec5 .btn_store.app_store::before {
		width: 33px;
		height: 40px;
	}
	.sec5 .btn_store.google_store::before {
		width: 34px;
		height: 37px;
	}
	.svg_img.svg_round_wrap {
		width: 175px;
	}
	.svg_img.svg_arrow {
		top: 16%;
		width: 100px;
		rotate: -68deg;
	}
	.svg_img.svg_square_wrap {
		width: 153px;
	}
}
@media (max-width : 767px) {
	.logo_wrap {
		height: 63px;
	}
	.logo_wrap .logo {
		top: 55%;
		width: 110px;
	}
	.btn_store {
		font-size: 15px;
		line-height: 47px;
	}
	.page_navi_wrap {
		right: 6.5%;
		bottom: 3.5%;
	}
	.sec1 .store_wrap {
		gap: 8px;
		left: 50%;
		bottom: calc(50% - 25%);
		transform: translate(-50%, 50%);
	}
	.sec1 .slogan_wrap {
		font-size: 80px;
		font-size: 15vw;
	}
	.sec1 .slogan_back {
		top: calc(50% - 100px);
	}
	.sec1 .slogan_left {
		left: 16vw;
	}
	.sec1 .slogan_right {
		right: 14vw;
	}
	.sec1 .slogan_middle {
		top: -33px;
		width: 28%;
	}
	.sec1 .slogan_top {
		top: -21px;
		bottom: 10%;
	}
	.deco_img.camp {
		right: 15%;
		top: 24%;
		width: 60px;
	}
	.deco_img.fire {
		bottom: 32%;
		width: 90px;
	}
	.deco_img.tree {
		bottom: 24%;
		width: 100px;
	}
	.section_wrap {
		flex-direction: column;
		justify-content: flex-start;
		gap: 0;
		align-items: flex-start;
		padding: 0 6.5%;
	}
	.section_wrap.sec2 ,
	.section_wrap.sec4 {
		flex-direction: column-reverse;
	}
	.txt_wrap {
		flex: none;
		margin-top: 16%;
	}
	.sec3_maru .txt_wrap {
		margin-top: 24%;
	}
	.txt_summary {
		font-size: 16px;
	}
	.txt_desc {
		font-size: 16px;
	}
	.txt_desc + .about_maru {
		margin-top: 35px;
	}
	.back_maru_world {
		left: 21%;
		top: 60%;
		width: 84%;
	}
	.txt_return {
		top: -30px;
	}
	.btn_return {
		left: 300px;
		top: -20px;
		width: 68.8px;
		height: 72px;
	}
	.deco_wrap.star01 {
		left: 365px;
		top: -31px;
		width: 10px;
	}
	.deco_wrap.star02 {
		left: 330px;
		top: 60px;
		width: 18px;
	}
	.deco_wrap.star03 {
		left: 285px;
		top: -15px;
	}
	
	.img_wrap {
		width: 100%;
	}
	.oneday_carbon img:nth-child(1) {
		width: 184px;
	}
	/* .oneday_carbon img:nth-child(2) {
		left: calc(50% - 155px);
		top: calc(50% - 67px);
	} */
	.oneday_carbon img:nth-child(2) {
		left: calc(50% + 150px);
		top: calc(50% + 78px);
		width: 201px;
	}
	.stamp_collection img:nth-child(1) {
		left: calc(50% - 13%);
		top: 44%;
	}
	.stamp_collection img:nth-child(2) {
		left: calc(50% + 13%);
		top: 44%;
	}
	.graph_tip img:nth-child(1) {
		left: calc(50% - 26%);
	}
	.graph_tip img:nth-child(3) {
		left: calc(50% + 18%);
	}
	/* .graph_tip img:nth-child(4) {
		left: calc(50% + 155px);
		top: calc(50% + 115px);
	} */
	.sec5 .slogan_wrap {
		font-size: 13vw;
	}
	.sec5 .slogan_back {
		top: calc(50% - 110px);
	}
	.sec5 .slogan_left {
		left: 20%;
	}
	.sec5 .slogan_right {
		right: calc(50% - 217px);
	}
	.sec5 .slogan_middle {
		left: calc(50% - 37px);
		top: calc(50% - 250px);
		width: 184px;
	}
	.sec5 .slogan_top {
		top: calc(50% + 8px);
	}
	.sec5 .store_wrap {
		gap: 20px;
	}
	.sec5 .btn_store {
		width: 206px;
		height: 66px;
		font-size: 22px;
		line-height: 64px;
	}
	.sec5 .btn_store::before {
		left: 8%;
	}
	.sec5 .btn_store.app_store {
		padding-left: 7%;
	}
	.sec5 .btn_store.app_store::before {
		width: 21px;
		height: 25.5px;
	}
	.sec5 .btn_store.google_store::before {
		width: 21.5px;
		height: 23.5px;
	}
	.svg_img.svg_arrow {
		left: 75%;
		top: 32%;
		width: 70px;
		rotate: 73deg;
	}

	.notice_wrap a {
		font-size: 16px;
	}


}
@media (max-width : 450px) {
	
	.logo_wrap {
		height: 40px;
	}
	.logo_wrap .logo {
		width: 70px;
		height: 28px;
	}
	.btn_store {
		width: 124px;
		height: 30px;
		border: 1.7px solid #522672;
		font-size: 12px;
		line-height: 26px;
	}
	.btn_store.app_store {
		padding-left: 19px;
	}
	.btn_store.google_store {
		padding-left: 18px;
	}
	.btn_store.app_store::before {
		left: 15px;
		top: calc(50% - 1px);
		width: 11px;
		height: 13px;
	}
	.btn_store.google_store::before {
		left: 12px;
		width: 12px;
		height: 13px;
		margin: 0;
	}
	.page_navi_wrap {
		right: 5%;
		bottom: 4%;
	}
	.page_navi_wrap li + li {
		margin-left: 4px;
	}
	.page_navi_wrap li a {
		width: 20px;
		height: 20px;
		font-size: 10px;
		line-height: 20px;
	}
	.bg_line_effect {
		background-size: 100%;
	}
	.sec1 .store_wrap {
		gap: 4px;
		bottom: 33%;
	}
	.next_arrow {
		width: 10px;
	}
	.sec1 .slogan_wrap {
		font-size: 50px;
	}
	.sec1 .slogan_back {
		top: calc(50% - 87px);
	}
	.sec1 .slogan_left {
		left: calc(50% - 87px);
	}
	.sec1 .slogan_right {
		right: calc(50% - 95px);
	}
	.slogan_wrap strong ,
	.slogan_wrap .slogan_middle {
		letter-spacing: 2px;
	}
	.sec1 .slogan_middle {
		top: calc(50% - 50px);
		width: 94px;
		transform: translate(-50%, -50%) scale(0.8);
	}
	.sec1 .slogan_top {
		top: -29px;
		bottom: 0;
	}
	.deco_img.camp {
		right: 22%;
		top: 27%;
		width: 26px;
	}
	.deco_img.fire {
		left: 13%;
		bottom: 48%;
		width: 34px;
	}
	.deco_img.tree {
		right: 13%;
		bottom: 42%;
		width: 44px;
	}
	.txt_wrap {
		margin-top: 20%;
	}
	.sec3_maru .txt_wrap {
		margin-top: 35%;
	}
	.txt_title {
		font-size: 28px;
	}
	.txt_title + .txt_summary {
		margin-top: 8px;
	}
	.txt_summary {
		font-size: 16px;
	}
	.txt_desc {
		font-size: 14px;
	}
	.txt_desc + .about_maru {
		margin-top: 16px;
	}
	.about_maru {
		font-size: 14px;
	}
	.btn_return {
		left: 193px;
		top: -15px;
		width: 40px;
		height: 42px;
	}
	.deco_wrap.star01 {
		left: 235px;
		top: -31px;
		width: 8px;
	}
	.deco_wrap.star02 {
		left: 221px;
		top: 25px;
		width: 12px;
	}
	.deco_wrap.star03 {
		left: 180px;
		top: -20px;
		width: 8px;
	}
	.oneday_carbon img:nth-child(1) {
		top: 40%;
		width: 138px;
	}
	/* .oneday_carbon img:nth-child(2) {
		left: calc(50% - 95px);
		top: calc(50% - 73px);
		width: 150px;
	} */
	.oneday_carbon img:nth-child(2) {
		left: calc(50% + 100px);
		top: calc(50% + 58px);
		width: 150.7px;
	}
	.stamp_collection img:nth-child(1) {
		left: 28%;
		width: 148.5px;
	}
	.stamp_collection img:nth-child(2) {
		right: 28%;
		width: 150px;
	}
	.graph_tip img:nth-child(1) {
		left: 18%;
		width: 117px;
	}
	.graph_tip img:nth-child(2) {
		left: calc(50% - 10px);
		width: 150px;
	}
	.graph_tip img:nth-child(3) {
		left: 77%;
		width: 130.5px;
	}
	/* .graph_tip img:nth-child(4) {
		left: 84%;
		top: calc(50% + 90px);
		width: 163.5px;
	} */
	
	.sec5 .slogan_wrap {
		font-size: 46px;
	}
	.sec5 .slogan_back {
		top: calc(50% - 75px);
	}
	.sec5 .slogan_left {
		left: calc(50% - 80px);
	}
	.sec5 .slogan_right {
		right: calc(50% - 110px);
	}
	.sec5 .slogan_middle {
		left: calc(50% - 6%);
		top: calc(50% - 138px);
		width: 92px;
	}
	.sec5 .slogan_top {
		top: calc(50% - 12px);
	}
	.sec5 .store_wrap {
		gap: 4px;
		top: calc(50% + 100px);
	}
	.sec5 .btn_store {
		width: 140px;
		height: 47px;
		font-size: 14px;
		line-height: 45px;
	}
	.sec5 .btn_store.app_store {
		padding-left: 8%;
	}
	.sec5 .btn_store.google_store {
		padding-left: 7%;
	}
	.sec5 .btn_store.app_store::before {
		width: 16.5px;
		height: 20px;
		margin: 0;
	}
	.sec5 .btn_store.google_store::before {
		width: 17px;
		height: 18.5px;
		margin: 0;
	}
	.svg_img.svg_round_wrap {
		width: 190px;
	}
	.svg_img.svg_arrow {
    left: 75%;
    top: 28%;
	}
	.svg_img.svg_square_wrap {
		width: 175px;
	}
	

	.notice_wrap a {
		font-size: 14px;
	}
}