@charset "UTF-8";

:root{--px:calc((1 / 375) * 100vw)}


html {scroll-behavior:smooth;scroll-padding-top:98px;}



.header_logo_title{
	font-size:3.2vw;
	font-weight:700;
	line-height:1}
@media screen and (min-width:768px){
	.header_logo_title{font-size:24px;}
}

.header_logo_title a {display:inline-block;}

.header_logo_anchor{color:#000;text-decoration:none}

.footer_inner,.footnote_inner,.section_inner{
	width:calc(345 / 375 * 100%);
	margin-inline:auto}






@media screen and (min-width:768px){
	body::before {
		content:"";
		position:fixed;
		inset:0;z-index:-1}
}
body::before {
	background:url(../img/bg_page.jpg) no-repeat #B90000;
	background-position:top 98px center;
	background-size:100% auto;}
@media screen and (max-width:1920px){
	body::before {background-size:1920px auto;}
}
@media screen and (max-width:980px){
	body::before {
		background-position:top center;
		background-size:1920px auto;}
}
@media screen and (max-width:768px){
	body::before {background:none;}
}






.image{width:100%;height:auto}



.m-bttm-a {margin-bottom:3px;}
.m-bttm-b {margin-bottom:10px;}





.conversion_area{margin-inline:auto}

.conv_btn_anchor{
	position:relative;overflow:hidden;
	display:block;}

.conv_btn_anchor::after{
	content:"";position:absolute;
	top:0;left:-120%;width:60%;height:100%;
	background:linear-gradient(120deg,transparent,rgba(255,255,255,.8),transparent);
	transform:skewX(-20deg);
	animation:kirarin 2.5s infinite}

@keyframes kirarin{0%{left:-120%}40%{left:120%}100%{left:120%}}
@media (hover){
	.conv_btn_anchor {transition:opacity .3s}
	.conv_btn_anchor:hover {opacity:.7}
}





.kv{
	position:relative;overflow:hidden;
	padding-bottom:0;
	background:url(../img/bg-kv.png) no-repeat 50% 0 #B90000;
	background-size:100%;z-index:2}


.kv>*{position:relative;z-index:3;}


.kv_title {
	position:relative;
	margin-bottom:0;}




/*mission*/
.mission {
	width:100%;margin:0 auto;
	background:url(../img/bg_mission.jpg) no-repeat top center #000;
	background-size:100% auto;
	padding-bottom:13.33vw;}


.mission-head {
	opacity: 0;
    -webkit-transform: translateY(20px);
	transform: translateY(20px);
	transition:0.4s ease-out;}
.mission-head.on {
	opacity: 1;
    -webkit-transform: translateY(0);
	transform: translateY(0);}



.mission_contents {width:89.33%;margin:0 auto;
	background-image: radial-gradient(#ffffff 50%, #ECECEC);
	padding-bottom:8vw;}

.mission_contents_inner {width:92.23%;margin:0 auto;}

.mission_txt {
	font-weight:400;
	font-size:2.66vw;
	line-height: 1.7;
	word-break:break-all;}
.mission p {text-align:justify;}

@media screen and (min-width:768px){
	.mission {padding-bottom:50px;}
	.mission_contents {padding-bottom:30px;}
	.mission_txt {font-size:10px;}
}




.caution {width:100%;margin:0 auto;
	background:#B90000;
	padding-bottom:8vw;}

.caution_inner {width:89.33%;margin:0 auto;}

.caution_txt {color:#fff;
	font-weight:500;
	font-size:3.73vw;
	line-height: 1.7;
	text-align:justify;
	padding-left:3.73vw;
	text-indent:-3.73vw;
}

@media screen and (min-width:768px){
	.caution {padding-bottom:30px;}
	.caution_txt {
		font-size:14px;
		padding-left:14px;
		text-indent:-14px;}
}




.participation {width:100%;margin:0 auto;}

.participation-bg {
	padding:13.33vw 0;
	background:url(../img/bg_step.jpg) no-repeat top center #000;
	background-size:100% auto;}

.prtcptn_contents {
	width:89.33%;margin:0 auto;
	background:#fff;}

.prtcptn_contents_inner {
	width:92.23%;margin:0 auto;
	padding-bottom:8vw;}

.prtcptn_contents:not(:last-of-type) {
	margin-bottom:5.33vw;}

.participation p {text-align:center;
	font-feature-settings: "palt";
	letter-spacing:0.05em;}

.m-bttm {margin-bottom:8vw;}

@media screen and (min-width:768px){
	.participation-bg {padding:50px 0;}
	.prtcptn_contents_inner {padding-bottom:30px;}
	.prtcptn_contents:not(:last-of-type) {
		margin-bottom:20px;}
	.m-bttm {margin-bottom:30px;}
}
/*mission*/







.kv_img{margin-bottom:calc(33 * var(--px))}





.kv_car{position:absolute;display:flex;
	right:0;top:calc(360 * var(--px));
	animation:car 18s linear infinite}

.kv_car span{width:calc(914 * var(--px))}

.kv_car span+span{
	position:relative;
	top:calc(-114 * var(--px))}

#confetti{position:absolute;inset:0;
	width:100%;z-index:1}

@keyframes car{from{transform:translate(0,0)}to{transform:translate(calc(914 * var(--px)),calc(-114 * var(--px)))}}



@keyframes blink-pp{0%,20%{opacity:0}10%,30%{opacity:1}}

@keyframes rotate-pp{0%,20%{transform:rotate(10deg)}10%,30%{transform:rotate(0)}}

@media screen{
	.kv_title{
		opacity:0;
		transform:translateY(calc(30 * var(--px)))}
	
	.kv_car{opacity:0}
	
	.kv_img{opacity:0;
		transform:translateY(calc(15 * var(--px)))}
	
	.kv .conversion_area{
		opacity:0;
		transform:translateY(calc(15 * var(--px)))}
	
	.kv.-start .kv_title{
		transition:opacity .4s .4s ease-out,transform .5s .4s cubic-bezier(.34,1.56,.64,1);
		opacity:1;
		transform:translateY(0)}
	
	.kv.-start .kv_title::after{
		animation:blink-pp 2s steps(1,end) infinite}
	
	.kv.-start .kv_img{
		transition:opacity .3s .8s ease-out,transform .4s .7s ease-out;
		opacity:1;
		transform:translateY(0)}
	
	.kv.-start .conversion_area{
		transition:opacity .3s 1s ease-out,transform .4s .8s ease-out;
		opacity:1;
		transform:translateY(0)}
	
	.kv.-start .kv_car{
		transition:opacity .3s ease-out;
		opacity:1}	
}









.footnote{
	background-color:#484848;
	color:#fff;
	font-size:calc(10 * var(--px));
	line-height:1.7;
	padding:calc(40 * var(--px)) 0}

.footnote-list:not(:last-child){margin-bottom:1lh}

.footer{padding:calc(20 * var(--px)) 0}

.footer_inner{font-size:calc(13 * var(--px));text-align:left}


.fix-bnr{display:none}


.bnr_area{
	background:#ebebeb;
	padding-bottom:calc(40 * var(--px))}

.bnr_area__button{
	width:calc(325 / 375 * 100%);
	margin-inline:auto}

.bnr_area__button+.bnr_area__button{
	margin-top:calc(30 * var(--px))}

.bnr_area__button-anchor{
	display:block;
	transition:.3s cubic-bezier(.13,.78,.38,.98)}
@media (hover){
	.bnr_area__button-anchor:hover{opacity:.7}
}




@media screen and (min-width:768px){
	:root{--px:calc(375 / 375 * 1px)}
	
	.header_new{
		position:fixed;top:0;left:0;right:0;
		max-width:none;
		height:98px;
		padding-inline:max(calc((100% - 1020px)/ 2),4%);
		background-color:#fff;
		z-index:100}
	
	.page-mission{
		position:relative;
		max-width:1120px;
		margin-inline:auto;
		padding-top:0px}
	
	.page-mission_contents{
		position:relative;
		width:375px;
		background-color:#fff;
		margin-left:auto;
		margin-right:auto;
		z-index:3;
		box-shadow:0 0 20px rgba(0,0,0,.15)}
	
	.pagetop{bottom:30px}
}



@media screen and (min-width:980px){
	.footer{position:relative;padding:26px 0;z-index:6}
	
	.footer_inner{font-size:1.2rem;text-align:right}
	
	.footer_inner br{display:none}
	
	.pagetop{bottom:50px}
	
	.fix-bnr{overflow-y:visible;
		display:flex;
		flex-direction:column;
		justify-content:center;
		position:fixed;
		top:118px;
		left:max(calc((100% - 1024px)/ 2),1.5%);
		width:calc((100vh - 118px - 93px)*0.6885);
		max-width:420px;
		height:calc(100vh - 118px - 93px);
		max-height:610px;
		z-index:99}
	
	.fix-bnr .conversion_area{width:100%;height:100%;}
	
	.fix-bnr .conversion_area+.conversion_area{
		margin-top:10px}
	
	.page-mission{padding-top:calc(98px + 0px)}
	
	.page-mission_contents{
		margin-right:calc(88 / 1120 * 100%)}
}



@media screen and (max-width:979px) and (min-width:768px){
	.header_new{position:relative}
}

@media screen{
	._mov_fadein{opacity:0}
	
	._mov_fadein._mov_showed{
		transition:opacity 1s linear;opacity:1}
	
	._mov_fadeup{opacity:0;transform:translateY(30px)}
	
	._mov_fadeup._mov_showed{
		transition:transform .4s cubic-bezier(.5,1,.89,1),opacity .4s linear;
		opacity:1;
		transform:translateY(0)}
	
	._mov_fadeup_b{opacity:0;transform:translateY(5rem)}
	
	._mov_fadeup_b._mov_showed{
		transition:transform .7s cubic-bezier(.34,1.56,.64,1),opacity .7s linear;
		opacity:1;
		transform:translateY(0)}
	
	._mov_fadeleft{opacity:0;transform:translateX(-3rem)}
	
	._mov_fadeleft._mov_showed{
		transition:transform .6s cubic-bezier(.5,1,.89,1),opacity .6s linear;
		opacity:1;
		transform:translateX(0)}
	
	._mov_faderight{opacity:0;transform:translateX(3rem)}
	
	._mov_faderight._mov_showed{
		transition:transform .6s cubic-bezier(.5,1,.89,1),opacity .6s linear;
		opacity:1;
		transform:translateX(0)}
}