@charset "UTF-8";
/* CSS Document */

@media screen and (min-width: 768px) and (max-width: 1399px){
	html {font-size: calc(100vw * 10 / 1400);
		text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	}
	
}

@media screen and (min-width: 1400px){
	html{
	font-size: 62.5%;
	font-size: 10px;
}
}
/*html{
	font-size: 62.5%;
	font-size: 10px;
}*/

html.is-fixed{
	height: 100%;
    overflow: hidden;
}

body {
	font-family:'Noto Sans JP', sans-serif,'Raleway',sans-serif,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MSPゴシック','MS PGothic',sans-serif;
	font-weight: 300;
	line-height: 1.0;
	letter-spacing: 0;
	color: var(--text-color);
	font-size: 0;
	background-color: #FFF;
}


/**************************************************
 usually
**************************************************/
.clearFix:after{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	_zoom: 1;
}
*:first-child+html .clearFix:after{ zoom: 1; } /* IE7 */

/* align */
.flexbox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
  -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

/* inner */
.inner{
	max-width: 1200px;
	margin: auto;
}

/* a img input */
a,a img,input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="image"]{
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-o-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
}

a img:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="image"]:hover{
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}

/**************************************************
 common
**************************************************/
p,ol,table,ol,dl{
	padding: 1.6rem 0 0 0;
	font-size: 1.6rem;
	font-weight: normal;
	line-height: 1.5;
	color: var(--default-textcolor);
}

ul li{
	/*margin: 0 0 0 20px;*/
	/*list-style: disc;*/
	list-style: none;
}

/* ol li{
	margin: 0 0 0 2.5px;
	list-style: decimal;
} */


table{
  border-collapse: separate;
  border-spacing: 0.1rem;
}

/* table th,table td{ padding: 1rem;} */
/*table th{ background-color: rgba(255,255,255,0.3);}
table td{ background-color: rgba(255,255,255,0.2);}*/

a{
	color: #000;
	text-decoration: none;
	outline:none;
	font-weight: var(--font-bold);
	line-height: 1.5;
}
a:hover{ color: #000;}

img{
	max-width: 100%;
	height: auto;
}
/* img[src$=".svg"] {width: 100%;} */

.smp{display: none;}


:root{
	--main-color: #0059A6;
	--btn-color:#45D29C;
	--nav-color:#333;
	--text-color: #333333;
	--border-color: #D9DEE6;
	--box-color:#F5EFF9;
	--max:104rem;
	--barl: "Barlow", sans-serif;
	--font-bold:700;
}

h1{
	font-size: 1.6rem;
	align-items: center;
	font-weight: var(--font-bold);
	font-family: var(--zenkaku);
	position: relative;
	z-index: 9999;
}

h1 img{
	width: 24.6rem;
	margin-inline-end: 1.6rem;
}

h2{text-align: center;
}

.contentInner{
	max-width: 104rem;
	margin-inline: auto;
}

.wrapper{}

.content_box,.content_inner{
	max-width: 104rem;
	margin: 0 auto;
	padding-inline: 1.2rem;
}

.re{flex-direction: row-reverse;}

.centerHanger{
	padding-block: 8rem;
	background-color: #4CB3E3;
}

.centerHanger ul{
	margin-block-start:4rem;
	flex-direction: row-reverse;
}

.centerHanger ul li{
	width: 48%;
	height: 240px;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.centerHanger ul li h3{font-size: 2.4rem;}

.centerHanger ul li:first-child,
.centerHanger ul li:nth-child(2){margin-block-end:4.8rem}

.test03{height: 800px;
	background-color: #4CE37E;
}

/**************************************************
 loading
**************************************************/

#loading {
	position: fixed;
	z-index: 100000;
	width: 100%;
	height: 100%;
	background:#fff;
	text-align:center;
	color:#fff;
	top: 0;	
	/* transition: 1s; */
	display: flex;
	justify-content: center;
	align-items: center;
}

.logo video{
	width: 35rem;
	margin-inline: auto;
}

.logo.move{transform: translateY(0px);opacity: 0;transition: .5s;}

#loading.close{opacity: 0;visibility: hidden;}




/**************************************************
globalNavi
**************************************************/
#globalNavi{
	position: fixed;
	right: 4rem;
	top: 0;
	z-index: 9999;
	height: 100%;
}

#globalNavi ul{
	padding: 0;
	position: relative;
	height: 100%;
	display: flex;
  flex-direction: column;
  justify-content: center; /* 縦方向（メイン軸）に中央寄せ */
}

#globalNavi ul::before{
	content: '';
	width: 0.1rem;
	height: 100%;
	background: #fff;
	position: absolute;
	right: 0;
	top: 0;
}

#globalNavi ul li{
	margin-block-end: 1.6rem;
	text-align: end;
}

#globalNavi ul li:last-of-type{margin-block-end:0;}

#globalNavi ul li a{
	display: inline-block;
	font-family: var(--barl);
	font-size: 1.6rem;
	color: var(--main-color);
	font-weight: var(--font-bold);
	padding-inline: 2.4rem;
	padding-block: 0.4rem;
	line-height: 1.1;
	background-color: #fff;
}

#globalNavi ul li a:hover,#globalNavi ul li.show a{
	background-color: var(--main-color);
	color: #fff;
}

/**************************************************
 bg01
**************************************************/
.bg01{
	background: url(../img/bg/bg1.webp)no-repeat bottom center;
	background-size:cover;
}

/**************************************************
 bg02
**************************************************/
.bg02{
	background: url(../img/bg/bg2.webp)no-repeat bottom center;
	background-size:cover;
}

/**************************************************
 bg03
**************************************************/
.bg03{
	background: url(../img/bg/bg3.webp)no-repeat bottom center;
	background-size:cover;
	position: relative;
	margin-block-end: -40rem;
}


/**************************************************
 bg04
**************************************************/
.bg04{
	background: url(../img/bg/bg4.webp)no-repeat bottom center;
	background-size:cover;
	position: relative;
	margin-block-end: -80rem;
	z-index: 3;
}

/**************************************************
 copyright
**************************************************/
.copyRight{
	writing-mode: vertical-rl;
	transform: scaleX(-1) scaleY(-1);
	color: #fff;
	font-size: 1.2rem;
	position: absolute;
	right: 4.8rem;
	top: 1.6rem;
}


/**************************************************
 linkHanger
**************************************************/
.linkHanger{padding-block-start: 50rem;}


.linkHanger ul{padding: 0;margin-block-end: 8rem;justify-content: center;}

.linkHanger ul li{
	width: 48%;
}

.linkHanger ul li a .link_sns{
	justify-content: center;
	padding-block: 2.8rem 2.1rem;
	background-color: rgba(255,255,255,0.5);
	align-items: center;
	height: 9rem;
}
.linkHanger ul li a .link_sns p{
	padding-inline-start: 2.4rem;
	padding-block-start: 0;
	font-weight: 500;
}

.linkHanger ul li a .link_txt{
	background-color: rgba(0,89,166,0.6);
	padding-block: 1.2rem;
	font-size: 1.6rem;
	color: #fff;
	text-align: center;
}

.linkHanger ul li a:hover{opacity: 0.5;}



/**************************************************
 aboutHanger
**************************************************/
.aboutHanger h2{
	font-size: 6.4rem;
	font-family: var(--barl);
	color: var(--main-color);
	position: relative;
	top: 3rem;
}



.about_cont{
	padding-block: 5.6rem;
	background-color: rgba(255,255,255,0.75);
}

.about_cont .about_image{width: 37%;}

.about_cont .about_txt{width: 60%;}

.about_cont .about_txt p{padding: 0;padding-inline-end: 6.4rem;}

.about_cont .about_txt ul{
	padding: 0;
	margin-block-start: 3.2rem;
	justify-content: flex-start;
}

.about_cont .about_txt ul li{
	width: 21.3rem;
}

.about_cont .about_txt ul li:last-of-type{
	margin-inline-start: 1.6rem;
}

.about_cont .about_txt ul li a{
	color: #fff;
	font-size: 1.6rem;
	font-weight: var(--font-bold);
	padding-block: 1.8rem;
	background-color: var(--main-color);
	border: 0.1rem solid var(--main-color);
	justify-content: center;
	align-items: center;
}

.about_cont .about_txt ul li a svg{margin-inline-start: 1.6rem;transition: .2s;}

.about_cont .about_txt ul li a svg .blank_cube02,
.about_cont .about_txt ul li a svg .blank_cube03{transition: .2s;}

.about_cont .about_txt ul li a:hover{
	background-color: #fff;
	color: var(--main-color);
}

.about_cont .about_txt ul li a:hover svg .blank_cube02,
.about_cont .about_txt ul li a:hover svg .blank_cube03{stroke:var(--main-color)}

/**************************************************
 campaignHanger
**************************************************/
.campaignHanger{
	padding-block-start: 100rem;
}

.campaignHanger .contentInner .campaign_item:first-of-type{
	margin-block-end: 15rem;
}

.campaign_item{
	border-right: 0.1rem solid #fff;
	border-left: 0.1rem solid #fff;
	border-bottom: 0.1rem solid #fff;
	padding-block: 0rem 6.4rem;
	margin-block-end: 0rem;
}

.campaignHanger .contentInner .campaign_item:first-of-type{
	margin-block-end: 15rem;
}

.campaignHanger .contentInner .campaign_item:last-of-type{border-bottom: none;}


.campaign_item h2{
	position: relative;
	top: -3.8rem;
}

.campaign_item h2 img{width: 35.5%;margin-inline: auto;}

.campaign_item h2::before{
	content: '';
	width: 25%;
	height: 0.1rem;
	background: #fff;
	position: absolute;
	top: 50%;
	transform: translate(0,-50%);
	left: 0;
}

.campaign_item h2::after{
	content: '';
	width: 25%;
	height: 0.1rem;
	background: #fff;
	position: absolute;
	top: 50%;
	transform: translate(0,-50%);
	right: 0;
}


.campaign_item h3{
	font-size: 3.2rem;
	font-weight: var(--font-bold);
	color: #fff;
	text-align: center;
}

.campaign_item h3 small{
	display: block;
	font-size: 1.4rem;
	padding-block-start: 1.4rem;
	font-weight: 500;
}

.campaign_item p{color: #fff;text-align: center;
	padding-inline: 4.8rem;}

.campaign_item ul{
	margin-block-start: 3.6rem;
	padding-inline: 4.8rem;
	margin-block-end: 16rem;
}

.campaign_item ul li{
	position: relative;
	width: calc(100% / 3 - 2rem);
	font-size: 1.6rem;
	color: #fff;
	font-weight: var(--font-bold);
	text-align: center;
	line-height: 1.5;
}

.campaign_item ul li img{display: block;margin-inline: auto;margin-block-end: 0.8rem;}

.campaignHanger .contentInner .campaign_item:last-of-type ul li img{
	width: 16rem;
	margin-inline: auto;
	margin-block-end: 1.6rem;
}

.campaignHanger .contentInner .campaign_item:first-of-type ul li img{
	width: 24rem;
	margin-inline: auto;
	margin-block-end: 1.6rem;
}

.campaign_item ul li::before{
	content: '';
	width: 3rem;
	height: 3.2rem;
	background: url(../img/campaign/cam_arrow.svg)no-repeat center center;
	background-size: 100%;
	position: absolute;
	top: 6.5rem;
	right: -4rem;
}

.campaignHanger .contentInner .campaign_item:first-of-type ul li::before{
	right: -3.5rem;
}

.campaign_item ul li:last-of-type::before{content: none;}

.campaign_item ul li span{color: var(--btn-color);}

.campaign_item > a{
	display: block;
	width: 48rem;
	margin-inline: auto;
	margin-block-start: 2.4rem;
	color: #fff;
	background-color: var(--btn-color);
	font-size: 1.6rem;
	padding-block: 2rem;
	text-align: center;
	border: 0.1rem solid var(--btn-color);
	position: relative;
	z-index: 2;
}

.campaign_item > a:hover{
	background-color: #fff;
	color:var(--btn-color);
	border: 0.1rem solid var(--btn-color);
}

.campaign_item p a{
	font-size: 1.5rem;
	text-decoration: underline;
	color: #fff;
	text-align: left;
	padding-block-start: 0.8rem;
	display: inline-flex;
}

.campaign_item p a:hover{opacity: 0.5;}

.campaign_item ul li a{
	color:var(--btn-color);
}

.campaign_item ul li a:hover{opacity: 0.5;}


/**************************************************
 presentHanger
**************************************************/
.presentHanger{position: relative;overflow-x: clip;}

.presentHanger .contentInner{
	position:relative;
	padding-block-start: 8rem;
	z-index: 5;
	padding-inline: 4.8rem;
	border-right: 0.1rem solid #fff;
	border-left: 0.1rem solid #fff;
	border-bottom: 0.1rem solid #fff;
	padding-block-start: 0rem;
}



.presentHanger::before{
	content: '';
	width: 165.4rem;
	height: 43.2rem;
	background: url(../img/campaign/bg.svg)no-repeat center center;
	background-size: 90%;
	position: absolute;
	left: 50%;
	transform: translate(-50%,0);
	bottom: -11rem;
	opacity: 0.4;
}

.presentHanger::after{
	content: '';
	width: 112rem;
	height: 28.8rem;
	background: url(../img/campaign/bg02.svg)no-repeat center center;
	background-size: 100%;
	position: absolute;
	left: 50%;
	transform: translate(-50%,0);
	bottom: 75rem;
	opacity: 0.2;
}

.presentHanger ul{padding: 0;padding-block-end: 6.4rem;align-items: flex-start;}

.presentHanger ul li{
	width: 50%;
	font-size: 2.4rem;
	color: #fff;
	font-weight: var(--font-bold);
	text-align: center;
}

.presentHanger ul li:nth-of-type(1){
	width: 40%;
	margin-inline: 0 auto;
	order: 2;
	top: -25rem;
	position: relative;
	margin-inline-start: 5%;
}

.presentHanger ul li:nth-of-type(2){
	width: 40%;
	margin-inline: auto 0;
	order: 1;
	margin-inline-start: 10%;
}

.presentHanger ul li:nth-of-type(3){
	width: 45%;
	position: relative;
	top: -18rem;
	margin-inline-start: 5%;
	order: 4;
}

.presentHanger ul li:last-of-type{
	margin-block-start: 5.6rem;
	order: 3;
}

.presentHanger ul li span{
	display: block;
	margin-block: 1.8rem;
	font-size: 2.rem;
	line-height: 1.3;
}

.presentHanger ul li img{display: block;width: 100%;}

.presentHanger .pre_visual{
	max-width: 104rem;
	margin-inline: auto;
}

.presentHanger picture img{margin-block-start: 7.2rem;}

.pre_smp_cont{display: none;}

/**************************************************
 startHanger
**************************************************/

.startHanger{padding-block-start: 60rem;}

.startHanger .contentInner{position: relative;}

.startHanger h2{
	font-size: 6.4rem;
	font-family: var(--barl);
	color: var(--main-color);
}

.startHanger h2 span{
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 2.4rem;
	display: block;
	margin-block-start: 0.8rem;
}

.startHanger .contentInner > p{
	text-align: center;
	margin-block-end: 10rem;
}


.startHanger .contentInner > ul{
	padding: 0;
}

.startHanger .contentInner > ul > li{
	width: calc(100% / 2 - 3.2rem);
	padding-block: 2rem 4rem;
	background-color: rgba(255,255,255,0.5);
	text-align: center;
	border: 0.1rem solid #fff;
	position: relative;
	z-index: 5;
}

.startHanger .contentInner > ul > li:first-of-type{position: relative;top: -6.4rem;}

.startHanger .contentInner > ul > li h3{
	font-size: 4rem;
	color: var(--main-color);
	font-weight: var(--font-bold);
	font-family: var(--barl);
}

.startHanger .contentInner > ul > li img{display: block;margin-inline: auto;}

.startHanger .contentInner > ul > li p{padding: 0;font-weight: var(--font-bold);}

.startHanger .contentInner > ul > li > a{
	width: 34.6rem;
	background-color: var(--btn-color);
	border: 0.1rem solid var(--btn-color);
	color: #fff;
	font-size: 1.6rem;
	display: block;
	margin-inline: auto;
	padding-block: 2rem;
	margin-block-start: 3.8rem;
}

.startHanger .contentInner > ul > li > a:hover{
	background-color: #fff;
	color: var(--btn-color);
}

.startHanger .contentInner > ul > li:last-of-type p{padding-block-end: 3.6rem;position: relative;}

.startHanger .contentInner > ul > li:last-of-type p::before{
	content: '';
	width: 1.4rem;
	height: 1.2rem;
	background: url(../img/start/icon01.svg)no-repeat center center;
	background-size: 100%;
	position: absolute;
	left: 50%;
	transform: translate(-50%,0);
	top: 3.5rem;
}

.startHanger .contentInner > ul > li:last-of-type p:last-of-type::before{content: none;}

.startHanger .contentInner > ul > li > ul{padding: 0;justify-content: center;}

.startHanger .contentInner > ul > li > ul > li{width: 30%;}

.startHanger .contentInner > ul > li > ul > li:last-of-type{width: 37%;margin-inline-start: 1.6rem;}

/**************************************************
 howtoHanger
**************************************************/
.howtoHanger{
	padding-block: 5rem 18rem;
	position: relative;
	overflow-x: clip;
}

.howtoHanger::before{
	content: '';
	width: 165.2rem;
	height: 38.4rem;
	background: url(../img/howto/bg.svg)no-repeat center center;
	background-size: 100%;
	position: absolute;
	left: 50%;
	transform: translate(-50%,0);
	top: -10rem;
	opacity: 0.4;
}

.howtoHanger::after{
	content: '';
	width: 100%;
	height: 33.7rem;
	background-color: rgba(255,255,255,0.5);
	position: absolute;
	bottom: 10rem;
	left: 0;
	z-index: 0;
}

.howtoHanger .contentInner{z-index: 2;position: relative;}

.howtoHanger h2{
	font-size: 6.4rem;
	font-family: var(--barl);
	margin-block-end: 12rem;
	color: var(--main-color);
}

.howtoHanger h2 span{
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 2.4rem;
	display: block;
	margin-block-start: 0.8rem;
}

.howtoHanger ul{padding: 0;position: relative;}

.howtoHanger ul li{
	width: calc(100% / 3 - 2rem);
	position: relative;
}

.howtoHanger ul li:nth-of-type(2){top: -6rem;}

.howtoHanger ul li:nth-of-type(3){top: -12rem;}

.howtoHanger ul li h3{
	color: var(--main-color);
	font-size: 2rem;
	font-weight: var(--font-bold);
	margin-block-start: 1.6rem;
	text-align: center;
}

/**************************************************
 storyHanger
**************************************************/
.storyHanger{position: relative;overflow-x: clip;}

.storyHanger::before{
	content: '';
	width: 157.5rem;
	height: 64.8rem;
	background:url(../img/story/copy_bg.svg)no-repeat center center;
	background-size: 100%;
	position: absolute;
	left: 50%;
	transform: translate(-50%,0);
	bottom: 0;
	opacity: 0.4;
}

.storyHanger .contentInner picture > img{
	display: block;
	padding-block-end: 15rem;
	position: relative;
	z-index: 3;
}

.story_bg_item img{
	position: absolute;
}

.story_bg_item > img:first-of-type{
	width: 40%;
	bottom: 25rem;
	rotate: -68deg;
	left: -20rem;
	opacity: 0.8;
}

.story_bg_item > img:nth-of-type(2){
	width: 29%;
    bottom: 11rem;
    right: 10rem;
    rotate: -50deg;
	opacity: 0.8;
}

.story_bg_item > img:nth-of-type(3){
	width: 15%;
    bottom: 90rem;
    left: 7rem;
    rotate: 0deg;
	opacity:0.7;
}

.story_bg_item > img:nth-of-type(4){
	width: 18%;
    bottom: 38rem;
    right: -8rem;
    rotate: -60deg;
	opacity: 0.7;
}

.story_bg_item > img:nth-of-type(5){
	width: 10%;
    bottom: 70rem;
    right: 7rem;
    rotate: -48deg;
	opacity: 0.7;
}

.story_bg_item > img:nth-of-type(6){
	width: 15%;
    top: 27rem;
    right: 26rem;
    rotate: -24deg;
	opacity:0.5;
}


.copy_item{
	margin-block-end: 16rem;
}

.copy_item p{
	font-size: 2rem;
	font-weight: var(--font-bold);
	padding-block-start: 11rem;
	color: #fff;
	text-shadow: 0px 0px 15px #064581;;
	position: relative;
	z-index: 5;
}



.copy_item p:nth-child(2n){text-align: start;}
.copy_item p:nth-child(2n+1){text-align: end;}
.copy_item p:last-of-type,.copy_item p:first-of-type{text-align: center;}

.copy_item p:nth-child(2){padding-block-start: 18.8rem;}
.copy_item p:first-of-type{padding-block-start: 22rem;}



/**************************************************
 movieHanger
**************************************************/
.movieHanger{
	width: 100%;
	height: 72rem;
	position: relative;
}

.movieHanger::before{
	content: '';
	width: 100%;
	height: 100%;
	background-color: rgba(0,89,166,0.65);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}


.movieHanger .movie_box{
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.movieHanger .movie_box video{
	object-fit: cover;
    width: 100%;
    height: 100%;
}

.movieHanger .movie_cont{
	position: relative;
	z-index: 2;
	color: #fff;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	text-align: center;
	align-items: center;
}

.movieHanger .movie_cont h2{
	font-size: 12rem;
	font-family: var(--barl);
	font-weight: bold;
	margin-block-start: 0;
}

.movieHanger .movie_cont p{
	font-size: 2.4rem;
	font-weight: var(--font-bold);
}

.movieHanger .movie_cont svg{
	display: block;
}


.movie_cont button{margin-block-start: 6rem;}

.movie_cont button svg g{
	transition: .3s;
}

.movie_cont button svg g #mov_daen{
	transition: fill 0.2s ease;
	fill: rgba(255,255,255,0);
}

.movie_cont button:hover svg g #mov_daen{fill:#fff;}

.movie_cont button svg path{transition: .2s;}

.movie_cont button:hover svg path{stroke: var(--main-color);}

.gift_pop_modal{
	display: none;
	position: fixed;
	z-index: 99;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #0059A6B3;
	transition: .3s;
	animation: modalopen .5s;
}

@keyframes modalopen {
	from {opacity: 0}
	to {opacity: 1}
}

.gift_pop_modal .pop_modalInner{
	max-width: 90rem;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    /* margin: 120px auto; */
    padding: 64px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.gift_pop_modal .pop_modalInner iframe{width: 100%;height: 100%;}

.gift_pop_modal span{
	display: block;
	position: relative;
	cursor: pointer;
}

.gift_pop_modal span::before{
	content: '';
	background: url(../img/close.svg)no-repeat center center;
	background-size: 100%;
	width: 3rem;
	height: 3rem;
	position: absolute;
	top: -37rem;
	right:-5rem;
}


/**************************************************
 mainVisual
**************************************************/
.mainVisual{
	position: relative;
	height: 100vh;
	overflow-x: clip;
}

.bg_item img{position: absolute;}

.mainVisual .bg_item > img:first-of-type{
	width: 43%;
	left: -10rem;
	opacity: 0.8;
}

.mainVisual .bg_item > img:nth-of-type(2){
	width: 43%;
	right: -19rem;
	top: 6rem;
	rotate: 45deg;
	opacity: 0.8;
}

.main_scroll{
	position: absolute;
	left: 50%;
	transform: translate(-50%,0);
	top: 8rem;

}


.scroll_up{
	position:absolute;
	top:20rem;
	left: 50%;
	transform: translate(-50%,0);
	animation: arrowmove 1s ease-in-out infinite;
}

.scroll_up a{
	position: absolute;
	pointer-events: none;
	left: -2.4rem;
	bottom: 3rem;
	color: #000;
	font-size: 1.4rem;
	width: 2.4rem;
	height: 2.4rem;
	text-decoration: none;
}

.text {
	display: block;
	font-size: 1.6rem;
	color: #FFF;
	text-transform: uppercase;
	white-space: nowrap;
	left: 50%;
	transform: translate(-35%,0);
	position: absolute;
}

.arrow {
	position: absolute;
	width: 2.8rem;
	height: 0.5rem;
	opacity: 0;
	transform: rotate(180deg) scale3d(0.5, 0.5, 0.5);
	animation: move 3s ease-out infinite;
}

.arrow:first-child {animation: move 3s ease-out 1s infinite;}

.arrow:nth-child(2) {animation: move 3s ease-out 2s infinite;}

.arrow:before,
.arrow:after {
	content: ' ';
	position: absolute;
	top: 0;
	height: 100%;
	width: 51%;
	background: #fff;
}

.arrow:before {
	left: 0;
	transform: skew(0deg, 40deg);
}

.arrow:after {
	right: 0;
	width: 50%;
	transform: skew(0deg, -40deg);
}

@keyframes move {
	25% { opacity: 1; }
	33% { opacity: 1; transform: translateY(-30px) rotate(180deg) scale3d(0.8,0.8,0.8); }
	67% { opacity: 1; transform: translateY(-40px) rotate(180deg) scale3d(0.8,0.8,0.8); }
	100% { opacity: 0; transform: translateY(-55px) rotate(180deg) scale3d(0.8,0.8,0.8); }
}


.mainVisual .contentInner{
	position: absolute;
	left: 50%;
	transform: translate(-50%,0);
	bottom: 0;
	width: 104rem;
}

.mainVisual h2{padding-block: 8.5rem 10rem;}

.mainVisual h2 img{width: 57.8rem;margin-inline: auto;}

.main_information{
	padding-block-end: 4rem;
}

.main_information h3{
	font-size: 3.2rem;
	color: var(--main-color);
	font-weight: bold;
	font-family: var(--barl);
	position: relative;
	margin-block-end: 0.4rem;
}

.main_information h3::before{
	content: '';
	width: 78%;
	height: 0.1rem;
	background-color: var(--main-color);
	position: absolute;
	top: 50%;
	transform: translate(0,-50%);
	right: 0;
}

.main_information dl{
	padding-block: 2.6rem;
	background-color: var(--main-color);
	padding-inline: 3.2rem;
	color: #fff;
	align-items: center;
}

.main_information dl dt{
	font-family: var(--barl);
	font-weight: var(--font-bold);
	width: 12%;
}

.main_information dl dd{
	width: 88%;
	align-items: center;
}

.main_information dl dd a:first-of-type{
	color: #fff;
	position: relative;
}

.main_information dl dd a:first-of-type::before{
	background-color: #fff;
	bottom: -0.4rem;
	content: "";
	height: 0.1rem;
	left: 0;
	position: absolute;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform .5s;
	width: 100%;
	}

.main_information dl dd a:hover:first-of-type::before{transform: scale(1, 1);}



.playHanger {
	position: fixed;
	bottom: 0;
	right: 0;
    clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
    display: block;
    width: 22.8rem;
    height: 22.8rem;
    text-align: center;
	z-index: 9999;
}

.playHanger a{
    display: block;
    width: 100%;
    height: 100%;
	background-color: var(--btn-color);
    text-decoration: none;
	font-size: 1.6rem;
	color: #fff;
	position: relative;
}

.playHanger a span{
	position: absolute;
	top: 56%;
	transform: translate(-50%,0);
	left: 67%;
	width: 100%;
}

.playHanger a span strong{
	font-family: var(--barl);
	display: block;
	font-size: 2.4rem;
	line-height: 1;
	letter-spacing: 2px;
	padding-block-end: 0.4rem;
}

.playHanger a:hover{
	background-color: #fff;
	color: var(--btn-color);
}

/**************************************************
 pagetop
**************************************************/
.pagetop{
	position: absolute;
	left: 50%;
	transform: translate(-50%,0);
	top: -0.5rem;
	z-index: 99;
	cursor: pointer;
	transition: .3s;
}

.pagetop svg,#pageTOP{transition: .3s;}

.pagetop svg,#pageTOP{transition: .3s;}

.pagetop svg:hover g #takaku06,
.pagetop svg:hover g #takaku05,
.pagetop svg:hover g text,
.pagetop svg:hover g #path_14
{
	transition: .3s;
}

.pagetop svg:hover g #takaku06{fill: var(--main-color);transition: .3s;}

.pagetop svg:hover g #takaku05,
.pagetop svg:hover g text{fill: #fff;transition: .3s;}

.pagetop svg:hover g #path_14{stroke: #fff;transition: .3s;}

/* .pagetop svg:hover{opacity: 0.5;} */

/**************************************************
 fade
**************************************************/

/* .copy_item p,.centerHanger ul li{
	opacity: 0;
	visibility: hidden;
	transition: 2s;
}

.copy_item p.appear,.centerHanger ul li.appear{
	opacity: 1;
	visibility: visible;
} */

.mainVisual h2{
	opacity: 0;
	visibility: hidden;
	transition: .7s;
}

.main_information,
#globalNavi,
.main_scroll,
.playHanger,
.copy_item p,
#story,
.storyHanger::before{
	opacity: 0;
	visibility: hidden;
	transition: 1s;
}

.main_scroll{transition: 3s;}

.mainVisual h2.show,
.main_information.show,
#globalNavi.show,
.main_scroll.show,
.playHanger.show,
.copy_item p.show,
#story.show,
.storyHanger.show::before{
	opacity: 1;
	visibility: visible;
}

.storyHanger.show::before{opacity: 0.4;}

#globalNavi.show{transition-delay: 1s;}

.main_information.show{transition-delay: 1.1s;}

.playHanger.show{transition-delay: 1.1s;}

.main_scroll.show{transition-delay: 2s;}