@charset "utf-8";

/* reset
------------------------------------------------------------------------------------------ */
figure {margin:0;}
img { max-width: 100%; image-rendering: -webkit-optimize-contrast; }

/* PaidBrandCulture
------------------------------------------------------------------------------------------ */
html {
	scroll-behavior: smooth;
}
#pan {
	width:100%;
	padding:0;
	overflow: hidden;
	line-height: 1.45;
	background-color: #03AF7A;
}
main p{
	color: #ffffff;
	font-size: 21px;
	font-style: normal;
	font-weight: 800;
	line-height: 150%;
}
/* fv
------------------------------------------------------------------------------------------ */
#pan #fv {
	width:100%;
	height:100vh;
	background: linear-gradient(to bottom, #097A57 0%, #03AF7A 50%);
	position: relative;
	background-attachment: fixed;
}
#pan .fv-wrap {
	width:100%;
	min-width: 1400px;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	height:100vh;
	background-image: url("/img/contents/anniversary/fv_bg_star.svg");
	position:fixed;
	background-size: 80%;
	background-repeat: repeat;
	background-position: center;
}
#pan .fv-flex {
	position:fixed;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	top: 45vh;
}
#pan .fv-bg-inner {
	display: flex;
	justify-content: center;
}
#pan .fv-bg-left img,
#pan .fv-bg-right img {
	display: block;
	height: auto;
}
#pan .fv-bg-sp img{
	display: none;
}
#pan .fv-bg-left {
	position: absolute;
	right: calc(50% + 180px);
	bottom: calc(50% - 180px);
	width: 240px;
	z-index: 1;
}
#pan .fv-bg-right {
	position: absolute;
	left: calc(50% + 200px);
	bottom: calc(50% - 150px);
	width: 187px;
	z-index: 1;
}
#pan .fv-bg-sp {
	position: absolute;
	right: 50%;
	bottom: 47%;
	transform: translate(50%, 47%);
	width: 325px;
	z-index: 1;
}
#pan .fv-wrap-inner {
	position: relative;
	width: 100%;
	margin: 0 auto;
}
#pan .fv-main-flex {
	position: absolute;
	inset: 0;
}
#pan .fv-inner-man img,
#pan .fv-inner-woman img,
#pan .fv-inner-title img {
	display: block;
	height: auto;
}
#pan .fv-inner-man {
	position: absolute;
	right: calc(50% + 135px);
	bottom: calc(50% - 95px);
	z-index: 3;
}
#pan .fv-inner-woman {
	position: absolute;
	left: calc(50% + 130px);
	bottom: calc(50% + 25px);
	z-index: 3;
}
#pan .fv-inner-title {
	position: absolute;
	width: 470px;
	height: auto;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}
#pan .fv-bottom-wrap {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	min-width: 1200px;
	width: 100vw;
	line-height: 0;
}
#pan .fv-bottom {
	margin: 0;
}
#pan .fv-bottom-img  {
	display: block;
	width: 100%;
	height: auto;
}
#pan .fv-bottom-img-sp  {
	display: none;
}
#pan .fv-arrow-wrap {
	position: absolute;
	left: 50%;
	bottom: 25px;
	transform: translateX(-50%);
	width: 50px;
	height: auto;
	line-height: 0;
}
#pan .fv-arrow {
	margin: 0;
}
#pan .fv-arrow img {
	display: block;
	width: 100%;
	height: auto;
}
@media screen and (max-width: 940px) {
	#pan .fv-bottom-wrap {
		min-width: 670px;
		width: 100vw;
	}
	#pan .fv-bg-left img,
	#pan .fv-bg-right img {
		display: none;
	}
	#pan .fv-bg-sp img{
		display: block;
	}
	#pan .fv-inner-man {
		width: 80px;
		height: auto;
		right: calc(50% + 90px);
		bottom: calc(50% - 55px);
	}
	#pan .fv-inner-woman {
		width: 85px;
		height: auto;
		left: calc(50% + 80px);
		bottom: calc(50% + 15px);
	}
	#pan .fv-inner-title {
		width: 300px;
	}
	#pan .fv-bottom-img {
		display: none;
	}
	#pan .fv-bottom-img-sp {
		display: block;
		width: 100%;
		height: auto;
	}
	#pan .fv-arrow-wrap {
		bottom: 25px;
		width: 35px;
	}
}
/* history
------------------------------------------------------------------------------------------ */
#pan #history {
	position: relative;
	z-index: 10;
	width: 100%;
	background-color: #03AF7A;
	isolation: isolate;
	overflow:visible;
}
#pan .history-bg-star{
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 2100px;
	z-index: 0;
}
#pan #history > *:not(.history-bg-star) {
	position: relative;
	z-index: 1;
}
#pan .history-bg-star-img{
	display: block;
}
#pan .history-bg-star-img-sp{
	display: none;
}
#pan .history-intro{
	padding: 100px 0 140px 0;
	text-align: center;
	font-size: 21px;
	font-weight: 600;
	letter-spacing: 5.25px;
	background: linear-gradient(180deg, #097A57 0%, rgba(3, 175, 122, 0.00) 100%);
}
.history-intro-break {
	display: inline-block;
	white-space: nowrap;
}
#pan .history-title{
	text-align: center;
	background-image: url("/img/contents/anniversary/history_title.png");
	background-repeat: no-repeat;
	background-position: center;
	margin-bottom:30px;
}
#pan .history-title-top{
	padding-bottom: 30px;
	font-size: 37px;
	font-weight: 600;
	letter-spacing: 9.25px;
}
#pan .history-title-bottom{
	font-size: 18px;
}
#pan .history-main-wrap {
	width: 100%;
	height: 900px;
	background-image: url("/img/contents/anniversary/history_main.png");
	background-size: 600px auto;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
}
#pan .history-main {
	width: 100%;
	justify-content: center;
	text-align: center;
}
#pan .history-st,
#pan .history-fin{
	display: flex;
	max-width: 640px;
	align-items: center;
	margin: 0 auto;
}
#pan .history-st{
	position: absolute;
	top: 3.5%;
	left: calc(50% - 25px);
	transform: translateX(-50%);
	display: flex;
	width: 590px;
	align-items: center;
	margin: 0 auto;
	justify-content: center;
}
#pan .history-fin{
	position: absolute;
	top: 79%;
	left: calc(50% + 15px);
	transform: translateX(-50%);
	display: flex;
	width: 590px;
	align-items: center;
	margin: 0 auto;
	justify-content: center;
}
#pan .history-text-wrap{
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	width: 590px;
	align-items: center;
	margin: 0 auto;
	justify-content: center;
}
#pan .history-year{
	font-size: 90px;
	text-align: right;
}
#pan .history-txt{
	font-size: 21px;
	line-height: 45px; 
	text-align: left;
}
#pan .history-text{
	font-size: 19px;
	line-height: 41px; 
}
#pan .history-icon-st,
#pan .history-icon-fin{
	width: 36px;
	height: 36px;
}
#pan .history-icon-st{
	margin-top:120px;
}
#pan .history-icon-fin{
	margin-bottom:120px;
}
#pan .history-road{
	padding-top:20px;
	position: relative;
	top: 0;
	left: calc(50% - 10px);
	transform: translateX(-50%);
	display: flex;
	width: 200px;
	height: auto;
	align-items: center;
	justify-content: center;
	padding-bottom: 170px;
	z-index: 1;
}
#pan .history-bottom-wrap {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	min-width: 1200px;
	width: 100vw;
	display: flex;
	flex-direction: column;
	line-height: 0;
}
#pan .history-bottom-wrap span{
	height:140px;
	width:100%;
	flex: 0 0 140px;
	display: block;
	background: linear-gradient(180deg,rgba(3, 175, 122, 0.00)  0%, #097A57 100%);
}
#pan .history-bottom {
	margin: 0;
	flex: 0 0 auto;
}
#pan .history-bottom img {
	display: block;
	width: 100%;
	height: auto;
}
@media screen and (max-width: 940px) {
	#pan .history-intro{
		font-size:18px;
		padding: 100px 0;
	}
	#pan .history-bg-star {
		width: 940px;
	}
	#pan .history-bg-star-img{
		display: none;
	}
	#pan .history-bg-star-img-sp{
		display: block;
		max-width: 940px;
	}
	#pan .history-title{
		background-size: 300px auto;
	}
	#pan .history-title-top{
		padding-bottom: 35px;
		font-size: 32px;
	}
	#pan .history-title-bottom{
		font-size:14px;
	}
	#pan .history-main-wrap {
		height: 480px;
		background-image: url("/img/contents/anniversary/history_main.png");
		background-size: 325px auto;
	}
	#pan .history-st{
		left: 50%;
	}
	#pan .history-year{
		font-size:50px;
	}
	#pan .history-txt{
		font-size:14px;
		line-height: 22px;
	}
	#pan .history-text{
		font-size:14px;
		line-height: 24px;
	}
	#pan .history-st {
		top: -15px;
	}
	#pan .history-icon-st{
		margin-top: 85px;
	}
	#pan .history-fin {
		top: 78%;
		left: calc(50% + 20px);
	}
	#pan .history-icon-fin {
		margin-bottom: 75px;
	}
	#pan .history-road{
		width: 115px;
		height: auto;
		padding-bottom: 70px;
	}
	#pan .history-bottom-wrap {
		min-width: 940px;
	}
}
/* stats
------------------------------------------------------------------------------------------ */
#pan #stats {
	position: relative;
	z-index: 10;
	width: 100%;
	background-color: #03AF7A;
}
#pan .stats-main-wrap{
	z-index: 10;
	width: 100%;
	background-color: #03AF7A;
}
#pan .stats-heading {
	padding-top:50px;
	position: relative;
	top: 0;
	left:50%;
	transform: translateX(-50%);
	width: 850px;
	max-width: 1000px;
	min-width: 500px;
	height: auto;
	align-items: center;
	justify-content: center;
}
#pan .stats-title{
	font-size: 45px;
	font-weight: 600;
}
#pan .stats-title span{
	margin-left: 10px;
	font-size: 24px;
	font-weight: 600;
}
#pan .stats-sub-title{
	font-size:20px;
}
#pan .stats-value{
	font-size: 45px;
	margin-top: 30px;
	margin-bottom: 25px;
}
#pan .stats-value span{
	font-family: Roboto;
	font-size: 110px;
}
#pan .stats-value span:nth-child(2) {
	font-size: 75px;
}
#pan .stats-underline{
	width: 100%;
	height: 4px;
	background-color: #ffffff;
}
#pan .stats-txt {
	font-size: 24px;
	line-height: 150%;
	margin-top: 25px;
	display: flex;
	align-items: stretch;
	gap: 20px;
}
#pan .stats-txt::before {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 15px;
	background-color: #A8E23D;
}
#pan .retention-text-inner .stats-title span,
#pan .approval-text-inner .stats-sub-title {
	font-size: 12px;
}
@media screen and (max-width: 940px) {
	#pan .stats-heading{
		min-width: 325px;
		max-width: 335px;
	}
	#pan .stats-title {
		font-size: 22.848px;
		font-weight: 500;
	}
	#pan .stats-title span{
		font-size: 12px;
		font-weight: 400;
	}
	#pan .stats-sub-title{
		font-size: 12px;
		font-weight: 500;
	}
	#pan .stats-value{
		font-size: 22px;
		margin-top: 18px;
		margin-bottom: 10px;
	}
	#pan .stats-value span{
		font-size: 55px;
	}
	#pan .stats-value span:nth-child(2) {
		font-size: 37px;
	}
	#pan .stats-txt{
		font-size: 12px;
		margin-top: 15px;
	}
	#pan .stats-underline{
		height: 1.2px;
	}
}
/* company
------------------------------------------------------------------------------------------ */
#pan #company{
	height: 800px;
	position: relative;
}
#pan .company-bg-star{
	position: absolute;
	top: -180px;
	left: 50%;
	transform: translateX(-50%);
	width: 2100px;
	z-index: 0;
}
#pan .company-bg-star-img{
	display: block;
}
#pan .company-bg-star-img-sp{
	display: none;
}
#pan .company-flex {
	display: flex;
	width: 100%;
	margin:50px 20px 0 20px;
}
#pan .company-img {
	position: absolute;
	left: 50%;
	bottom: clamp(0px, calc(0px + 10 * ((100vw - 1200px) / 200)), 10px);
	transform: translateX(-50%);
	min-width: 1200px;
	max-width: 1400px;
	width: 100vw;
	line-height: 0;
}
#pan .company-img-building {
	width: 450px;
	height: auto;
	display: block;
	position: absolute;
	bottom: 70px;
	left: 120px;
	z-index: 2;
}
#pan .company-img-woman {
	width: 290px;
	height: auto;
	position: absolute;
	bottom: 450px;
	left: 30px;
	z-index: 1;
}
#pan .company-text-wrap{
	position: absolute;
	left: calc(50% - 620px);
	transform: translateX(50%);
	top: 150px;
	min-width: 1200px;
	max-width: 1400px;
	width: 100vw;
	line-height: 0;
}
#pan .company-text-inner{
	display: flex;
	flex-direction: column;
	position: absolute;
	width: fit-content;
}
#pan .company-gr {
	height: 450px;
	width: 100%;
	flex: 0 0 450px;
	display: block;
	background: linear-gradient(to bottom, #097A57 0%, #03AF7A 100%);
	position: absolute;
	bottom: -230px;
	left: 50%;
	min-width: 2600px;
	transform: translateX(-50%);
	clip-path: polygon(0 0%, 100% 60%, 100% 100%, 0% 100%);
}
@media screen and (max-width: 940px) {
	#pan #company {
		height: 480px;
	}
	#pan .company-bg-star {
		width: 940px;
		top: -100px;
	}
	#pan .company-bg-star-img{
		display: none;
	}
	#pan .company-bg-star-img-sp{
		display: block;
		max-width: 940px;
	}
	#pan .company-img {
		bottom: 0px;
		min-width: 360px;
		max-width: 940px;
		transform: translateX(-315px);
	}
	#pan .company-img-building {
		width: 202px;
		bottom: 70px;
		left: 120px;
	}
	#pan .company-img-woman {
		width: 107px;
		bottom: 240px;
		left: 100px;
	}
	#pan .company-text-wrap{
		left:50%;
		transform: translateX(-80px);
		top: 20px;
		width: 100vw;
		max-width: 940px;
		min-width: 360px;
	}
}
/* member
------------------------------------------------------------------------------------------ */
#pan #member{
	height: 950px;
	position: relative;
	padding-top:200px;
}
#pan .member-bg-star{
	position: absolute;
	top: -125px;
	left: 50%;
	transform: translateX(-50%);
	width: 2100px;
	z-index: 0;
}
#pan .member-bg-star-img{
	display: block;
}
#pan .member-bg-star-img-sp{
	display: none;
}
#pan .member-flex {
	display: flex;
	width: 100%;
	margin:50px 20px;	
}
#pan .member-img {
	position: absolute;
	left:calc(50% - 50px);
	transform: translateX(-50%);
	bottom: 0;
	min-width: 1200px;
	max-width: 1400px;
	width: 100vw;
	line-height: 0;
}
#pan .member-img-flag{
	width: 270px;
	height: auto;
	display: block;
	position: absolute;
	bottom: clamp(730px, calc(730px + 10 * ((100vw - 1200px) / 200)), 740px);
	right: 290px;
	z-index: 3;
}
#pan .member-img-man{
	width: 190px;
	height: auto;
	display: block;
	position: absolute;
	bottom: clamp(730px, calc(730px + 10 * ((100vw - 1200px) / 200)), 740px);
	right: 100px;
	z-index: 4;
}
#pan .member-img-graph{
	width: 850px;
	height: auto;
	display: block;
	position: absolute;
	bottom: clamp(60px, calc(60px + 10 * ((100vw - 1200px) / 200)), 70px);
	right: 120px;
	z-index: 2;
}
#pan .member-text-wrap{
	position: absolute;
	right: calc(50% - 170px);
	transform: translateX(50%);
	top: 300px;
	min-width: 1200px;
	max-width: 1400px;
	width: 100vw;
	line-height: 0;
}
#pan .member-text-inner{
	display: flex;
	flex-direction: column;
	position: absolute;
	width: fit-content;
}
#pan .member-gr {
	height: 500px;
	width: 100%;
	flex: 0 0 350px;
	display: block;
	background: linear-gradient(to bottom, #097A57 0%, #03AF7A 100%);
	position: absolute;
	left: 50%;
	bottom: -120px;
	min-width:2600px;
	transform: translateX(-50%);
	clip-path: polygon(0 60%, 100% 0%, 100% 100%, 0% 100%);
}
@media screen and (max-width: 940px) {
	#pan #member{
		height: 380px;
	}
	#pan .member-bg-star {
		width: 940px;
		top: -50px;
	}
	#pan .member-bg-star-img{
		display: none;
	}
	#pan .member-bg-star-img-sp{
		display: block;
		max-width: 940px;
	}
	#pan .member-text-wrap{
		right:0%;
		left: 50%;
		transform: translateX(-160px);
		top: 10px;
		max-width: 940px;
		min-width: 360px;
	}
	#pan .member-img {
		position: absolute;
		transform: translateX(-80px);
		left: 50%;
		bottom: -35px;
		min-width: 360px;
		max-width: 360px;
	}
		#pan .member-img-graph{
		width: 320px;
		bottom: 200px;
	}
	#pan .member-img-man{
		width: 91px;
		bottom:453px;
		right: 113px;
	}
	#pan .member-img-flag{
		display: none;
	}
	#pan .member-gr {
		height: 250px;
		width: 100%;
		flex: 0 0 250px;
		display: block;
		background: linear-gradient(to bottom, #097A57 0%, #03AF7A 100%);
		position: absolute;
		left: 50%;
		bottom: 60px;
		min-width:940px;
		transform: translateX(-50%);
		clip-path: polygon(0 60%, 100% 0%, 100% 100%, 0% 100%);
	}
}

/* amount
------------------------------------------------------------------------------------------ */
#pan #amount{
	height: 1000px;
	position: relative;
}
#pan .amount-bg-star{
	position: absolute;
	top: -125px;
	left: 50%;
	transform: translateX(-50%);
	width: 2100px;
	z-index: 0;
}
#pan .amount-bg-star-img{
	display: block;
}
#pan .amount-bg-star-img-sp{
	display: none;
}
#pan .amount-flex {
	display: flex;
	width: 100%;
	margin:50px 20px 0 20px;
}
#pan .amount-img-coins {
	position: absolute;
	left:calc(50% - 100px);
	top: 0;
	line-height: 0;
}
#pan .amount-img-coin1,
#pan .amount-img-coin2,
#pan .amount-img-coin3,
#pan .amount-img-coin4{
	height: auto;
	display: block;
	position: absolute;
}
#pan .amount-img-coin1{
	width: 160px;
	top: 0px;
	left: 100px;
}
#pan .amount-img-coin2{
	width: 100px;
	top: 120px;
	left: 20px;
	transform: scaleX(-1) rotate(5deg);
}
#pan .amount-img-coin3{
	width: 90px;
	top: 220px;
	left: 70px;
}
#pan .amount-img-coin4{
	width: 65px;
	top: 310px;
	left: 20px;
	transform: scaleX(-1) rotate(15deg);
}
#pan .amount-img {
	position: absolute;
	left:calc(50% - 50px);
	transform: translateX(-50%);
	bottom: 0;
	min-width: 1200px;
	max-width: 1500px;
	width: 100vw;
	line-height: 0;
}
#pan .amount-img-coin{
	width: 656px;
	height: auto;
	display: block;
	position: absolute;
	bottom: 0px;
	left: -100px;
	z-index: 3;
}
#pan .amount-img-woman{
	width: 250px;
	height: auto;
	display: block;
	position: absolute;
	bottom: clamp(30px, calc(30px + 15 * ((100vw - 1200px) / 300)), 45px);
	left: 380px;
	z-index: 4;
}
#pan .amount-text-wrap{
	position: absolute;
	left: calc(50% - 500px);
	transform: translateX(50%);
	top: 350px;
	min-width: 1200px;
	max-width: 1400px;
	width: 100vw;
	line-height: 0;
}
#pan .amount-text-inner{
	display: flex;
	flex-direction: column;
	position: absolute;
	width: fit-content;
}
#pan .amount-gr {
	height: 900px;
	width: 100%;
	flex: 0 0 900px;
	display: block;
	background: linear-gradient(188deg, #03AF7A 37%,#097A57 100%);
	position: absolute;
	left: 50%;
	bottom: -280px;
	min-width:2600px;
	transform: translateX(-50%);
	clip-path: polygon(0 0%, 100% 60%, 100% 100%, 0% 100%);
}
#pan .amount-bottom-cut {
	height: 450px;
	width: 100%;
	flex: 0 0 450px;
	display: block;
	background: #03AF7A;
	position: absolute;
	bottom: -280px;
	left: 50%;
	min-width: 2600px;
	transform: translateX(-50%);
	clip-path: polygon(0 0%, 100% 60%, 100% 100%, 0% 100%);
	margin-bottom: -1px;
}
@media screen and (max-width: 940px) {
	#pan #amount {
		height:130px;
	}
	#pan .amount-gr {
		min-width: 940px;
		transform: translateX(-50%) scaleY(0.5);
		transform-origin: center bottom;
		background: linear-gradient(205deg, #03AF7A 37%, #097A57 100%);
	}
	#pan .amount-bottom-cut {
		min-width: 940px;
		transform: translateX(-50%) scaleY(0.5);
		transform-origin: center bottom;
	}
	#pan .amount-bg-star {
		width: 940px;
		top: -150px;
	}
	#pan .amount-bg-star-img{
		display: none;
	}
	#pan .amount-bg-star-img-sp{
		display: block;
		max-width: 940px;
	}
	#pan .amount-img-coins {
		left:calc(50% - 160px);
		top:-190px;
	}
	#pan .amount-img-coin1{
		width: 64px;
		top: 0px;
		left:50px;
	}
	#pan .amount-img-coin2{
		width: 36px;
		top: 60px;
		left: 30px;
	}
	#pan .amount-img-coin3{
		width: 34px;
		top: 95px;
		left: 50px;
	}
	#pan .amount-img-coin4{
		width: 20px;
		top: 130px;
		left: 40px;
	}
	#pan .amount-img {
		bottom: -155px;
	}
	#pan .amount-img-woman{
		width: 120px;
		bottom:30px;
		left: calc(50% - 75px);
	}
	#pan .amount-img-coin{
		width: 210px;
		bottom: 10px;
		left: 50%;
		transform: translateX(-210px);
	}
	#pan .amount-text-wrap{
		left: calc(50% - 220px);
		top: -130px;
		min-width: 360px;
		max-width: 360px;
	}
}
/* retention
------------------------------------------------------------------------------------------ */
#pan #retention{
	height: 800px;
	position: relative;
}
#pan .retention-bg-star{
	position: absolute;
	top: -105px;
	left: 50%;
	transform: translateX(-50%);
	width: 2100px;
	z-index: 0;
}
#pan .retention-bg-star-img{
	display: block;
}
#pan .retention-bg-star-img-sp{
	display: none;
}
#pan .retention-flex {
	display: flex;
	width: 100%;
	margin:50px 20px 0 20px;
}
#pan .retention-gr{
	height: 625px;
	width: calc(50% + 400px);
	position: absolute;
	background: linear-gradient(245deg, #11986E 32.4%, #09A575 96.67%);
	top:50%;
	transform: translateY(-50%);
	left: 0;
	z-index: 1;
}
#pan .retention-img {
	position: absolute;
	left: calc(50% - 500px);
	transform: translateX(50%);
	bottom: 87px;
	min-width: 1200px;
	max-width: 1400px;
	width: 100vw;
	line-height: 0;
	z-index: 2;
}
#pan .retention-img-building-bottom,
#pan .retention-img-building-ink,
#pan .retention-img-building-top{
	width: 350px;
	height: auto;
	display: block;
	position: absolute;
	bottom: 0px;
	left: 0px;
	z-index: 3;
}
#pan .retention-img-man{
	width: 220px;
	height: auto;
	display: block;
	position: absolute;
	bottom: 0px;
	left: -120px;
	z-index: 3;
}
#pan .retention-text-wrap{
	position: absolute;
	right: calc(50% - 170px);
	transform: translateX(50%);
	top: 225px;
	min-width: 1200px;
	max-width: 1400px;
	width: 100vw;
	line-height: 0;
	z-index: 2;
}
#pan .retention-text-inner{
	display: flex;
	flex-direction: column;
	position: absolute;
	width: fit-content;
}
@media screen and (max-width: 940px) {
	#pan #retention{
	height: 650px;
}
	#pan .retention-gr{
		width: calc(50% + 150px);
		height: 510px;
		top:400px;
	}
	#pan .retention-bg-star {
		width: 940px;
		top: -85px;
	}
	#pan .retention-bg-star-img{
		display: none;
	}
	#pan .retention-bg-star-img{
		display: none;
	}
	#pan .retention-bg-star-img-sp{
		display: block;
		max-width: 940px;
	}
	#pan .retention-img {
		position: absolute;
		left: calc(50% - 280px);
		transform: translateX(50%);
		bottom: -5px;
		min-width: 360px;
		max-width: 360px;
	}
	#pan .retention-img-building-bottom,
	#pan .retention-img-building-ink,
	#pan .retention-img-building-top{
		width: 170px;
	}
	#pan .retention-img-man{
		width: 110px;
		left: 120px;
		transform: scaleX(-1);
	}
	#pan .retention-text-wrap{
		right: calc(50% - 320px);
		top: 180px;
		min-width: 940px;
		max-width: 940px;
	}
}
/* approval
------------------------------------------------------------------------------------------ */
#pan #approval{
	height: 800px;
	position: relative;
}
#pan .approval-flex {
	display: flex;
	width: 100%;
	margin:50px 20px 0 20px;
}
#pan .approval-gr{
	height: 625px;
	width: calc(50% + 400px);
	position: absolute;
	background: linear-gradient(245deg, #11986E 32.4%, #09A575 96.67%);
	top:50%;
	transform: translateY(-50%);
	right: 0;
	z-index: 1;
}
#pan .approval-img {
	position: absolute;
	right: calc(50% - 50px);
	transform: translateX(50%);
	bottom: 87px;
	min-width: 1200px;
	max-width: 1400px;
	width: 100vw;
	line-height: 0;
	z-index: 2;
}
#pan .approval-img-document{
	width: 450px;
	height: auto;
	display: block;
	position: absolute;
	bottom: 0px;
	left: 0px;
	z-index: 3;
}
#pan .approval-img-man{
	width: 210px;
	height: auto;
	display: block;
	position: absolute;
	bottom: 0px;
	left: 350px;
	z-index: 3;
}
#pan .approval-text-wrap{
	position: absolute;
	left: calc(50% - 500px);
	transform: translateX(50%);
	top: 225px;
	min-width: 1200px;
	max-width: 1400px;
	width: 100vw;
	line-height: 0;
	z-index: 2;
}
#pan .approval-text-inner{
	display: flex;
	flex-direction: column;
	position: absolute;
	width: fit-content;
}
@media screen and (max-width: 940px) {
	#pan #approval{
		height: 500px;
	}
	#pan .approval-gr{
		width: calc(50% + 150px);
		height: 510px;
	}
	#pan .approval-img {
		position: absolute;
		right: calc(50% - 50px);
		transform: translateX(50%);
		bottom: 0px;
		min-width: 360px;
		max-width: 360px;
	}
	#pan .approval-img-document {
		width: 210px;
	}
	#pan .approval-img-man{
		width: 100px;
		left: 150px;
	}
	#pan .approval-text-wrap{
		left: calc(50% - 230px);
		top: 30px;
		min-width: 360px;
		max-width: 360px;
	}
}
/* saving
------------------------------------------------------------------------------------------ */
#pan #saving {
	position: relative;
	z-index: 10;
	width: 100%;
	background: linear-gradient(to bottom, #03AF7A 0%, #11986E 10%);
}
#pan .saving-bg-star{
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 2100px;
	z-index: 0;
}
#pan .saving-bg-star-img{
	display: block;
}
#pan .saving-bg-star-img-sp{
	display: none;
}
#pan .saving-heading {
	padding-top:50px;
	position: relative;
	top: 0;
	left:50%;
	transform: translateX(-50%);
	width: 850px;
	max-width: 1000px;
	min-width: 500px;
	height: auto;
	align-items: center;
	justify-content: center;
	margin-bottom: 150px;
}
#pan .saving-issuance,
#pan .saving-dispatch,
#pan .saving-support{
	height: 595px;
	position: relative;
	justify-content: center;
}
#pan .saving-issuance .saving-flex {
	right: clamp(150px, 100vw - 1200px, 180px);
}
#pan .saving-dispatch .saving-flex {
	left: clamp(-160px, 100vw - 1400px, 100px);
}
#pan .saving-support .saving-flex {
	right: clamp(150px, 100vw - 1200px, 180px);
}
#pan .saving-flex {
	display: flex;
	width: 1080px;
	height: 525px;
	margin:100px auto;
	background-color: #C9F583;
	border-radius: 10px;
	position: relative;
}
#pan .saving-gr {
	height: 525px;
	width: 50vw;
	max-width: 1400px;
	background-color: #C9F583;
	left:0;
	position: absolute;
	z-index: 1;
}
#pan .saving-dispatch .saving-gr{
	right: 0;
	left:unset;
}
#pan .saving-left {
	line-height: 0;
	z-index: 2;
	margin-left:10px;
	position: absolute;
	bottom: 0;
	right: clamp(500px, calc(500px + (100vw - 1200px) / 2), 550px);
}
#pan .saving-dispatch .saving-left {
	right: clamp(500px, calc(500px + (100vw - 1200px) / 2), 550px);
}
#pan .saving-img-before{
	width:425px;
	height: auto;
}
#pan .saving-title{
	color: #1E6859;
	text-align: center;
	font-size: 41px;
	font-weight: 800;
	line-height: 60px;
	margin-bottom: 30px;
}
#pan .saving-right{
	line-height: 0;
	z-index: 2;
	position: absolute;
	top: -45px;
	left: clamp(calc(50% + 310px), calc(50% + 300px + (100vw - 1080px) / 2), calc(50% + 350px));
	transform: translateX(-50%);
}
#pan .saving-img-after{
	width:550px;
	height: auto;
}
#pan .saving-img-after-img{
	display: block;
}
#pan .saving-img-after-sp-img{
	display: none;
}
#pan .saving-text{
	width:fit-content;
	color: #1E6859;
	text-align: center;
	font-size: 41px;
	font-weight: 800;
	line-height: 60px;
	z-index: 3;
	position: absolute;
	top: 75px;
	left: 120px;
}
#pan .saving-text span{
	font-family: Roboto;
	font-size: 109px;
	background: linear-gradient(195deg, #03AF7A 11.18%, #81CE04 90.61%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
#pan .saving-text span:nth-child(2) {
	background: linear-gradient(195deg, #03AF7A 11.18%, #81CE04 90.61%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 63px;
}
#pan .saving-text span:nth-child(3) {
	background: linear-gradient(195deg, #03AF7A 11.18%, #81CE04 90.61%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 37px;
}
#pan .saving-txt{
	font-size: 12px;
	color: #1E6759;
	position: absolute;
	bottom: -20px;
	left: 10px;
	width: 500px;
}
#pan .saving-total{
	margin-top: 150px;
	height: 700px;
}
.saving-total-text-wrap{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
#pan .saving-total-text{
	font-size: clamp(40px, calc(40px + (100vw - 940px) * (7 / 140)), 47px);
	color: #ffffff;
	text-align: center;
	line-height: 86.5px; 
	margin-bottom: 50px;
}
#pan .saving-total-text span{
	color: #FFF000;
}
#pan .saving-total-text span:nth-child(2){
	font-size: 69px;
}
#pan .saving-total-left img{
	display: block;
	height: 300px;
	width: auto;
}
#pan .saving-total-right img{
	display: block;
	height: 300px;
	width: auto;
}
#pan .saving-total-img-bg{
	width:900px;
	height: auto;
	position: absolute;
	bottom: -280px;
	left: 50%;
	transform: translateX(-50%);
}
#pan .saving-total-img-bottom{
	width:750px;
	height: auto;
	position: absolute;
	bottom: 25px;
	left: 50%;
	transform: translateX(-50%);
}
#pan .saving-total-img{
	width:450px;
	height: auto;
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
}
@media screen and (max-width: 940px) {
	#pan .saving-heading {
		width: 345px;
		min-width: 345px;
		margin-bottom: 50px;
	}
	#pan .saving-bg-star {
		width: 940px;
	}
	#pan .saving-bg-star-img{
		display: none;
	}
	#pan .saving-bg-star-img-sp{
		display: block;
		max-width: 940px;
	}
	#pan .saving-img-before{
		display: none;
	}
	#pan .saving-gr{
		display: none;
	}
	#pan .saving-left{
		position: unset;
		margin: 0 auto;
	}
	#pan .saving-title{
		font-size:26px;
		text-align: center;
		margin-top: 15px;
		margin-bottom: 0px;
		line-height: 38px;
	}
	#pan .saving-flex{
		width: 350px;
		margin: 25px auto;
		height: 475px;
	}
	#pan .saving-right {
		left:50%;
		top:unset;
		bottom:30px;
	}
	#pan .saving-img-after {
		width: 350px;
	}
	#pan .saving-img-after-img{
		display: none;
	}
	#pan .saving-img-after-sp-img{
		display: block;
	}
	#pan .saving-text{
		font-size: 31px;
		left:50%;
		transform: translateX(-50%);
		top: 30px;
		width: 350px;
	}
	#pan .saving-text span{
		font-size:70px;
	}
	#pan .saving-text span:nth-child(2){
		font-size: 50px;
	}
	#pan .saving-text span:nth-child(3){
		font-size: 24px;
	}
	#pan .saving-txt{
		font-size: 10px;
		font-weight: 400;
		width: 350px;
		text-align: center;
	}	
	#pan .saving-issuance,
	#pan .saving-dispatch,
	#pan .saving-support {
		height: 500px;
	}
	#pan .saving-issuance .saving-flex,
	#pan .saving-dispatch .saving-flex,
	#pan .saving-support .saving-flex{
		left:unset;
		right: unset;
	}
	#pan .saving-total{
		margin-top:25px;
		height: 300px;
	}
	#pan .saving-total-text{
		font-size: 14px;
		line-height: 35px;
		margin-bottom: 25px;
	}
	#pan .saving-total-text span:nth-child(2){
		font-size: 24px;
	}
	#pan .saving-total-left img {
		height: 125px;
	}
	#pan .saving-total-right img {
		height: 125px;
	}
	#pan .saving-total-img {
		width: 200px;
	}
	#pan .saving-total-img-bottom {
		width: 350px;
	}
	#pan .saving-total-img-bg {
		width: 450px;
		bottom: -135px;
	}
}
/* paperless
------------------------------------------------------------------------------------------ */
#pan #paperless {
	position: relative;
	z-index: 10;
	width: 100%;
	background-color: #CBFE7A;
	height: 1600px;
}
#pan .paperless-gr{
	height: 1200px;
	width: 100vw;
	position: absolute;
	background: linear-gradient(180deg, #078771 -0.11%, #A9E44B 97.83%, #CBFE7A 100%);
}
#pan .paperless-text{
	width: 850px;
	text-align: center;
	font-size: 47px;
	position: absolute;
	z-index: 2;
	top: 100px;
	left: 50%;
	transform: translateX(-50%);
}
#pan .paperless-text span{
	background: linear-gradient(180deg, #FF0 0%, #9CFE24 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 86px;
}
#pan .paperless-fuji-text-wrap{
	position: absolute;
	top: 400px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	background-color: #ffffff;
	padding: 20px 40px;
	width: fit-content;
	border-radius: 10px;
	position: relative;
}
#pan .paperless-fuji-text-wrap::after{
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	border-top: 16px solid #ffffff;
}
#pan .paperless-fuji-text{
	font-size: 32px;
	color: #1E6859;
	text-align: center;
}
#pan .paperless-fuji-txt{
	font-size: 12px;
	color: #1E6859;
	text-align: right;
	margin-top: 10px;
}
#pan .paperless-fuji-img-wrap{
	position: absolute;
	top: 1100px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
}
#pan .paperless-fuji-img-mtfuji{
	width:800px;
	height: auto;
	position: absolute;
	bottom: 0px;
	left: 50%;
	transform: translateX(-50%);
}
#pan .paperless-fuji-img-count{
	width:350px;
	height: auto;
	position: absolute;
	bottom: 370px;
	left: calc(50% - 45px);
	transform: translateX(-50%);
}
#pan .paperless-fuji-img-paper{
	width:150px;
	height: auto;
	position: absolute;
	bottom: 50px;
	left: calc(50% - 250px);
	transform: translateX(-50%);
}
#pan .paperless-bottom-wrap{
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	min-width: 1200px;
	width: 100vw;
	display: flex;
	flex-direction: column;
	line-height: 0;
}
#pan .paperless-bottom{
	margin: 0;
	flex: 0 0 auto;
}
#pan .paperless-bottom img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: -3px;
}
#pan .paperless-gr-bottom{
	height: 550px;
	width: 100%;
	flex: 0 0 550px;
	display: block;
	background-color: #6AB83D;
}
#pan .paperless-bottom-text-wrap{
	position: absolute;
	left: 50%;
	bottom: 325px;
	transform: translateX(-50%);
	justify-content: center;
	align-items: center;
	z-index: 2;
	width: 850px;
}
#pan .paperless-bottom-text{
	font-size: 27px;
	text-align: center;
	text-shadow: 1px 1px 5px #008159;
	line-height: 60px;
}
#pan .paperless-bottom-text span{
	font-size: 38px;
}

#pan .paperless-tree-wrap{
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	min-width: 1600px;
	width: 100vw;
	display: flex;
	flex-direction: column;
	line-height: 0;
}
#pan .paperless-tree{
	margin: 0;
	flex: 0 0 auto;
}
#pan .paperless-tree-img img{
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: -3px;
}
@media screen and (max-width: 940px) {
	#pan #paperless {
		height: 850px;
	}
	#pan .paperless-text{
		font-size: 20px;
		line-height: 36px;
		top:50px;
	}
	#pan .paperless-text span{
		font-size: 40px;
	}
	#pan .paperless-fuji-text{
		font-size: 16px;
	}
	#pan .paperless-fuji-text-wrap {
		top: 175px;
	}
	#pan .paperless-gr{
		height: 500px;
	}
	#pan .paperless-fuji-txt{
		font-size: 10px;
		text-align: center;
	}
	#pan .paperless-fuji-img-wrap{
		top: 525px;
	}
	#pan .paperless-fuji-img-mtfuji {
		width: 340px;
	}
	#pan .paperless-fuji-img-paper {
		width: 65px;
		bottom: 18px;
		left: calc(50% - 110px);
	}
	#pan .paperless-fuji-img-count {
		width: 150px;
		bottom: 157px;
		left: calc(50% - 10px);
	}
	#pan .paperless-bottom-text {
		font-size: 14px;
		line-height: 32px;
	}
	#pan .paperless-bottom-text span {
		font-size: 19px;
	}
	#pan .paperless-bottom-wrap{
		min-width:940px;
	}
	#pan .paperless-gr-bottom {
		height: 350px;
		flex: 0 0 350px;
	}
	#pan .paperless-bottom-text-wrap{
		bottom:200px;
	}
}
/* voice
------------------------------------------------------------------------------------------ */
#pan #voice {
	position: relative;
	z-index: 10;
	width: 100%;
	background-color: #008159;
	height: 1700px;
	z-index: 10;
}
#pan .voice-heading-wrap{
	position: absolute;
	left: 50%;
	top: 0px;
	transform: translateX(-50%);
	min-width: 1600px;
	max-width: 1800px;
	width: 100vw;
	display: flex;
	flex-direction: column;
	line-height: 0;
}
#pan .voice-heading{
	margin: 0;
	flex: 0 0 auto;
}
#pan .voice-heading-img-tree img{
	display: block;
	width: 100%;
	height: auto;
	position: absolute;
	top: -250px;
	margin-bottom: -3px;
}
#pan .voice-title-wrap{
	position: absolute;
	left: 50%;
	top: 150px;
	transform: translateX(-50%);
	justify-content: center;
	align-items: center;
	z-index: 2;
	width: 850px;
}
#pan .voice-title{
	font-size: 37px;
	text-align: center;
	color: #FFEC19;
	line-height: 60px;
}
#pan .voice-img-wrap{
	position: relative;
}
#pan .voice-img{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 350px;
	min-width: 940px;
	max-width: 1400px;
	width: 100vw;
	line-height: 0;
	z-index: 10;
}
#pan .voice-img-01,
#pan .voice-img-02,
#pan .voice-img-03,
#pan .voice-img-04,
#pan .voice-img-05,
#pan .voice-img-06,
#pan .voice-img-07{
	position: absolute;
	line-height: 0;
}
#pan .voice-img-01{
	top: clamp(0px, calc(100px - (100vw - 940px) * (100 / 260)), 100px);
	left: -20px;
}
#pan .voice-img-01 img{
	width: clamp(400px, calc(400px + (100vw - 940px) * (50 / 260)), 450px);
	height: auto;
}
#pan .voice-img-02{
	top: clamp(-30px, calc(-30px + (100vw - 940px) * (80 / 260)), 50px);
	left: clamp(calc(50% - 10px), calc(50% + (100vw - 1080px) * (60 / 400)), calc(50% + 50px));
	transform: translateX(-50%);
}
#pan .voice-img-02 img{
	width: clamp(245px, calc(245px + (100vw - 940px) * (50 / 260)), 295px);
	height: auto;
}
#pan .voice-img-03{
	top: 20px;
	right: clamp(-20px, calc(-20px + (100vw - 940px) * (60 / 260)), 40px);
}
#pan .voice-img-03 img{
	width: 365px;
	height: auto;
}
#pan .voice-img-04{
	top: clamp(375px, calc(375px + (100vw - 940px) * (75 / 260)), 400px);
	left: clamp(calc(50% - 60px), calc(50% + 50px - (100vw - 940px) * (110 / 260)), calc(50% + 50px));
	transform: translateX(-50%);
}
#pan .voice-img-04 img{
	width: 300px;
	height: auto;
}
#pan .voice-img-05{
	top: clamp(560px, calc(560px + (100vw - 940px) * (60 / 260)), 580px);
	left: clamp(40px, calc(0px - (100vw - 940px) * (40 / 260)), 0px);
}
#pan .voice-img-05 img{
	width: clamp(280px, calc(280px + (100vw - 990px) * (50 / 260)), 330px);
	height: auto;
}
#pan .voice-img-06{
	top: clamp(750px, calc(860px - (100vw - 990px) * (110 / 260)), 860px);
	left: clamp(calc(50% - 130px), calc(50% - 130px + (100vw - 940px) * (50 / 260)), calc(50% - 80px));
	transform: translateX(-50%);
}
#pan .voice-img-06 img{
	width: clamp(280px, calc(280px + (100vw - 990px) * (50 / 260)), 330px);
	height: auto;
}
#pan .voice-img-07{
	top: clamp(425px, calc(650px - (100vw - 990px) * (225 / 260)), 650px);
	right:-30px;
}
#pan .voice-img-07 img{
	width: clamp(450px, calc(450px + (100vw - 990px) * (100 / 260)), 550px);
	height: auto;
}
#pan .voice-bottom-wrap{
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	min-width: 1200px;
	width: 100vw;
	display: flex;
	flex-direction: column;
	line-height: 0;
	z-index: 9;
}
#pan .voice-bottom{
	margin: 0;
	flex: 0 0 auto;
}
#pan .voice-bottom-img img{
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: -3px;
}
@media screen and (max-width: 940px) {
	#pan #voice {
		height: 1050px;
	}
	#pan .voice-heading-wrap{
		min-width: 400px;
		max-width: 940px;
		top: clamp(30px, calc(80px - (100vw - 400px) * (50 / 540)), 80px);
	}
	#pan .voice-title-wrap {
		top: -50px;
	}
	#pan .voice-title{
		font-size: 18px;
		line-height: 30px;
	}
	#pan .voice-img{
		top:150px;
		min-width: 360px;
		max-width: 360px;
	}
	#pan .voice-img-01{
		top: -70px;
		left: calc(50% - 85px);
		transform: translateX(-50%);
		width: 160px;
	}
	#pan .voice-img-02{
		top: 20px;
		left: calc(50% + 80px);
		transform: translateX(-50%);
		width: 180px;
	}
	#pan .voice-img-03{
		top: 115px;
		right: calc(50% + 85px);
		transform: translateX(50%);
		width: 180px;
	}
	#pan .voice-img-04{
		top: 252px;
		left: calc(50% + 90px);
		transform: translateX(-50%);
		width: 170px;
	}
	#pan .voice-img-05{
		top: 350px;
		left: calc(50% - 85px);
		transform: translateX(-50%);
		width: 170px;
	}
	#pan .voice-img-06{
		top: 455px;
		left: calc(50% + 90px);
		transform: translateX(-50%);
		width: 180px;
	}
	#pan .voice-img-07{
		top: 565px;
		left: calc(50% - 85px);
		transform: translateX(-50%);
		width: 190px;
	}
	#pan .voice-bottom-wrap {
		min-width: 940px;
		max-width: 940px;
	}
}
/* future
------------------------------------------------------------------------------------------ */
#pan #future {
	position: relative;
	z-index: 10;
	width: 100%;
	background-color: #1E6759;
}
#pan .future-main-wrap{
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: fit-content;
	margin: 0px auto;
	height: 600px;
	padding-bottom: 80px;
}
#pan .future-heading-text{
	font-size: 32px;
	margin-bottom: 30px;
	display: flex;
	align-items: center;
	gap: 40px;
}
#pan .future-heading-text::before,
#pan .future-heading-text::after {
	content: '';
	display: block;
	flex: 1;
	min-width: 120px;
	height: 1px;
	background-color: #ffffff;
}
#pan .future-text{
	font-size: 20px;
	line-height: 60px;
	margin-bottom: 60px;
}
#pan .future-btn{
	display: inline-block;
	padding: 35px 200px;
	border-radius: 10px;
	background: #F29137;
	color: #ffffff;
	border: 2px solid #F29137;
	font-size: 20px;
	font-weight: bold;
	text-decoration: none;
	transition: background-color 0.3s ease;
}
#pan .future-btn:hover {
	background-color: #ffffff;
	color: #F29137;
}
@media screen and (max-width: 940px) {
	#pan .future-main-wrap{
		height: 350px;
		padding-bottom: 30px;
	}
	#pan .future-heading-text{
		font-size:16px;
		gap: 25px;
	}
	#pan .future-text{
		font-size: 12px;
		line-height: 32px;
		margin-bottom:40px;
	}
	#pan .future-heading-text::before,
	#pan .future-heading-text::after {
		min-width: 90px;
	}
	#pan .future-btn {
		padding: 15px 95px;
		font-size: 14px;
		border-radius: 5px;
	}
}
/* footer
------------------------------------------------------------------------------------------ */
footer{
	position: relative;
	z-index: 10;
}