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

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Orbitron:wght@400..900&display=swap');

html {scroll-behavior: smooth;}

body{
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 0;
    background-color: #FFF;
	}

/*text link*/
main, footer{font-size: 1em; line-height: 1.6em; color: #646e6d; font-family: "Noto Sans JP", serif;}
.NEW_Movie{font-family: "Orbitron", serif; font-weight: 500;}
a{display: block; outline: none!important;}
li{padding: 0.25em 0.5em;}
img{max-width: 100%;}
br.sp{display: none;}

.small{font-size: 0.8em;}
.center{text-align: center;}
.red{color: #e00016;}
.bold{font-weight: 600;}

@media only screen and (max-width: 480px) {main{font-size: 0.9em;} br.sp{display: block;}}


/*animation*/
.fadein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 0.5s;
	
	&.fadein-left{transform: translate(-30px,0);}
	&.fadein-right{transform: translate(30px,0);}
	&.fadein-up{transform: translate(0,-30px);}
	&.fadein-bottom{transform: translate(0,30px);}
	&.scrollin{opacity: 1 !important; transform: translate(0, 0) !important;}
	}

.anime_02{animation-delay: 2s;}
.anime_04{animation-delay: 4s;}
.anime_06{animation-delay: 6s;}
.anime_08{animation-delay: 8s;}


:hover{transition: all  0.5s ease;}


/*-----NAVI-----*/
.hamburger-morph {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 1000;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	padding: 5px;
	border: none;
	cursor: pointer;
	background: #fc5cc6;
	}

	.hamburger-morph__icon {width: 100%; height: 100%;}
	.hamburger-morph__line {
		fill: none;
		stroke: #FFF;
		stroke-width: 6;
		transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
		}

	.hamburger-morph__line:nth-child(1) {stroke-dasharray: 60 207;}
	.hamburger-morph__line:nth-child(2) {stroke-dasharray: 60 60;}
	.hamburger-morph__line:nth-child(3) {stroke-dasharray: 60 207;}

	.hamburger-morph.active .hamburger-morph__line:nth-child(1) {stroke-dasharray: 90 207; stroke-dashoffset: -134;}
	.hamburger-morph.active .hamburger-morph__line:nth-child(2) {stroke-dasharray: 1 60; stroke-dashoffset: -30;}
	.hamburger-morph.active .hamburger-morph__line:nth-child(3) {stroke-dasharray: 90 207; stroke-dashoffset: -134;}

.nav-morph {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: linear-gradient(to bottom, rgba(252,92,198,1) 0%,rgba(233,84,184,1) 100%);
	clip-path: circle(0% at calc(100% - 44px) 44px);
	transition: clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 900;
	}

	.nav-morph.active {clip-path: circle(150% at calc(100% - 44px) 44px);}

	.nav-morph__wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		}

	.nav-morph__list {
		margin: 0;
		padding: 0;
		list-style: none;
		text-align: center;
		}

	.nav-morph__item {
		opacity: 0;
		transform: translateY(30px);
		transition: opacity 0.4s ease, transform 0.4s ease;
		}

	.nav-morph.active .nav-morph__item {opacity: 1; transform: translateY(0);}
	.nav-morph.active .nav-morph__item:nth-child(1) { transition-delay: 0.3s; }
	.nav-morph.active .nav-morph__item:nth-child(2) { transition-delay: 0.4s; }
	.nav-morph.active .nav-morph__item:nth-child(3) { transition-delay: 0.5s; }
	.nav-morph.active .nav-morph__item:nth-child(4) { transition-delay: 0.6s; }
	
	.nav-morph__link {
		position: relative;
		display: inline-block;
		padding: 5px 20px 0;
		margin: 10px 0;
		font-size: 1.4em;
		text-decoration: none;
		overflow: hidden;
		}

	.nav-morph__text, .nav-morph__hover {display: block; transition: transform 0.3s ease; color: #fff;}

	.nav-morph__hover {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		transform: translateY(0%);
		font-size: 0.8em;
		}

	.nav-morph__link:hover{color: #FFF;}
	.nav-morph__link:hover .nav-morph__text {transform: translateY(-100%);}
	.nav-morph__link:hover .nav-morph__hover {transform: translateY(-100%);}

.nav-morph__text{font-family: "Orbitron", serif; font-weight: 500;}
.nav-morph__hover{font-family: "Noto Sans JP", serif; font-weight: 600;}


@media only screen and (max-width: 480px) {.hamburger-morph {top: 10px; right: 10px;}}


/*-----Contents-----*/
#Container{}

main{padding-bottom: 8em; overflow: hidden;}

.LinkButton a, .button a {
	position: relative;
	display: flex!important;
	justify-content: space-around;
	align-items: center;
	margin: 1em auto;
	width: 80%;
	max-width: 400px;
	padding: 10px 25px;
	color: #FFF!important;
	transition: 0.3s ease-in-out;
	font-weight: 600;
	background: #f43cb7;
	filter: drop-shadow(0px 2px 4px #ccc);
	border-radius: 3px;
	border-radius: 50px;
	overflow: hidden;
	}

.LinkButton a:before, .button a:before{
	content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    background-image: linear-gradient(130deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 55%);
    -webkit-transition: 0.5s;
    transition: 0.6s;
	}

.LinkButton a:hover:before, .button a:hover:before {left: 100%;}

.LinkButton a:after, .button a:after {
    position: absolute;
    top: 50%;
    right: 20px;
    transition: 0.2s ease-in-out;
    font-weight: 900;
    transform: translateY(-50%);
	}

	.Division .LinkButton a { margin: 1em auto 0;}
	#Character .LinkButton a {max-width: 430px; position: absolute; top: 57%; left: 40px;}

	.button{margin-top: 2em!important;}
	.button-open-link{display: none;}
	@media only screen and (max-width: 1200px) {#Character .LinkButton a {left: 20px; font-size: 0.8em;}}
	@media only screen and (max-width: 860px) {#Character .LinkButton a {position: relative; left: 0;}}


.NEW::before {
	position: absolute;
	content: "NEW";
	top: 17%;
	left: 10px;
	color: #f43cb7;
	background-color: #FFF;
	padding: 10px 7px;
	border-radius: 50% 50%;
	transform: rotate(-25deg);
	z-index: 100;
	height: 30px;
	width: 36px;
	}

	@media only screen and (max-width: 480px) {.NEW::before {font-size: 1.15em!important; top: 15%;}}



/*mainVisual*/
#mainVisual{
	height: 100vh;
	background-image: url("../images/GCFP_mainvisual02_bg.webp");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	position: relative;
	overflow: hidden;
	z-index: 1;
	}



/*#mainVisual{
	padding: 13% 0 4%;
	background-image: url("../images/GCFP_mainvisual_bg.webp");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	position: relative;
	z-index: 1;
	}*/

.platform{
	max-width: 80px;
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 999;
	}

.catchcopy{
	width: 40%;
	max-width: 880px;
	margin: 0;
	height: 0;
	padding-top: 15%;
	background-repeat: no-repeat;
	background-size: contain !important;
	overflow: hidden;
	display: block;
	background-image: url("../images/GCFP_copy.webp");
	background-position: top center;
	
	position: absolute;
	bottom: -2.5vh;
	right: 5vw;
	transform: rotate(-8deg);
	z-index: 99;
	}

#mainVisual h1 {
	width: 40%;
	max-width: 800px;
	margin: 0;
	height: 0;
	padding-top: 24%;
	background-repeat: no-repeat;
	background-size: contain !important;
	overflow: hidden;
	display: block;
	background-image: url("../images/GCFP_mainvisual_logo.webp");
	background-position: bottom left;
	
	position: absolute;
	top: 20vh;
	left: 5vw;
	z-index: 5;
	}

.chara{
	width: 60%;
	height: 100vh;
	margin: 0 0 0 auto;
	position: relative;
	}

	.aria{
		top: 2.5%;
		left: 10%;
		display: block;
		position: absolute;
		z-index: 2;
		}

	.kakeru{
		width: 130%;
		top: 5%;
		left: 30%;
		display: block;
		position: absolute;
		z-index: 3;
		}


@media only screen and (max-width: 1700px) {#mainVisual h1 {top: 25vh;} .chara{width: 65%;}}
@media only screen and (max-width: 1680px) {.aria{top: -5%; left: 8%;} .kakeru{top: 10%; left: 20%;}}

@media only screen and (max-width: 1200px) {
	.catchcopy{
		width: 55%;
		top: 85px;
		left: 10px;
		bottom: inherit;
		right: inherit;
		transform: rotate(-8deg);
		}

	#mainVisual h1 {
		width: 100%;
		padding-top: 30%;
		top: inherit;
		bottom: 2em;
		background-position: bottom left;
		}
	
	.chara{width: 100%;}
	.aria{
		width: 90%;
		top: 8%;
		left: -2%;
		display: block;
		position: absolute;
		z-index: 2;
		}

	.kakeru{
		width: 130%;
		top: 5%;
		left: 20%;
		display: block;
		position: absolute;
		z-index: 3;
		}
	}


@media only screen and (max-width: 480px) {
	.platform{max-width: 60px;}
	
	.catchcopy{width: 75%; left: inherit; top: 65px; right: 20px;}
	
	#mainVisual h1 {
		padding-top: 40%;
		top: inherit;
		bottom: 5vh;
		}

	.aria{width: 110%; top: 2.5vh; bottom: inherit; left: -6vw;}
	.kakeru{width: 165%; top: 35vh; left: -10vw; bottom: inherit;}
	}


.chara p:first-child{animation: slide-skew 1.4s ease 0s 1 normal;}
.chara p:nth-child(2){animation: slide-skew-up 0.8s ease 0s 1 normal;}
 
@keyframes slide-skew {
  0% {
    transform: translate(180px,30px);
    opacity: 0;
  }
  100% {
    transform: translate(0,0);
  }
  20%,100% {
    opacity: 1;
  }
}

@keyframes slide-skew-up {
  0% {
    transform: translate(120px,-60px);
    opacity: 0;
  }
  100% {
    transform: translate(0,0);
  }
  20%,100% {
    opacity: 1;
  }
}


/*.chara{
	max-width: 1000px;
	margin: auto;
	padding: 0 1em;
	display: flex;
	flex-wrap: wrap;
	}

	.chara p:first-child{flex: 0 1 22%; margin-top: -5%;}
	.chara p:nth-child(2){flex: 0 1 24%; padding-top: 3%;}
	.chara p:nth-child(3){flex: 0 1 30%;}
	.chara p:last-child{flex: 0 1 24%; margin-left: -5%; padding-top: 5%;}

	@media only screen and (max-width: 1500px) {.chara{max-width: 860px;}}

	@media only screen and (max-width: 860px) {
		.platform{max-width: 70px; top: 0; left: 0;}
		#mainVisual h1 {padding-top: 22%; bottom: 10px; left: 10px;}
		.chara{max-width: 700px;}
		.chara p:first-child{flex: 0 1 21%; margin-top: -5%; margin-left: 5%;}
		.chara p:last-child{margin-left: -8%; padding-top: 5%;}
		}

	@media only screen and (max-width: 480px) {
		.platform{max-width: 60px;}
		#mainVisual{padding: 25% 0 8%;}
		#mainVisual h1 {padding-top: 25%;}
		.chara p:first-child{margin-top: 0;}
		.chara p:last-child{padding-top: 7%;}
		}


.chara p:first-child{animation: fadeInTop 2.8s ease 0s 1 normal;}
.chara p:nth-child(2){animation: fadeInTop 1.4s ease 0s 1 normal;}
.chara p:nth-child(3){animation: fadeInTop 0.7s ease 0s 1 normal;}
.chara p:last-child{animation: fadeInTop 2.1s ease 0s 1 normal;}

@keyframes fadeInTop {
	0% {opacity: 0; transform: translateY(-30px);}
	100% {opacity: 1;}
	}*/



/*News Music*/
#News{padding: 0 1em;}
#Music{padding: 0 1em 10%;}

#News > div, #Music > div{
	max-width: 1380px;
	margin: auto;
	padding: 0 0 10em;
	display: flex;
	flex-wrap: wrap;
	}
#News > div > div:first-child, #Music > div div:first-child{flex: 0 1 24%;}
#News > div > div:last-child, #Music > div div:last-child{flex: 0 1 76%; align-items: stretch;}
#News > div > div:last-child{padding: 0 2em 2em;}

#News h2, #News_Details h2, #Music h2, .MovieList h2{
	padding: 1.5rem 1.5rem 0 3rem;
	background-image:linear-gradient(135deg, transparent 0 0px, #FFFFFF 45px calc(100% - 0px), transparent calc(100% - 20px)), radial-gradient(#33faf0 30%, transparent 30%);
	background-repeat: no-repeat, repeat;
	background-size: 100% 100%, 10px 10px;
	background-color: #FFFFFF;
	color: #666666;
	font-weight: bold;
	font-size: 22px;
	text-align: left;
	}

	#Music h2, .MovieList h2{background-image:
		linear-gradient(135deg, transparent 0 0px, #FFFFFF 45px calc(100% - 0px),
		transparent calc(100% - 20px)), radial-gradient(#d70086 30%, transparent 30%);}

	@media only screen and (max-width: 860px) {#News > div > div:first-child{flex: 0 1 100%;} #News > div > div:last-child{flex: 0 1 100%;} #Music > div{display: block;}}
	@media only screen and (max-width: 480px) {#News h2 img, #Music h2 img{width: 37%;}}


ul.topicsList{margin: 1.5em 0 0; padding: 0; list-style: none; height: 380px; overflow-x: scroll;}
ul.topicsList li{border-bottom: dotted 1px #7f7f7f;}
ul.topicsList li > a{padding: 1em; display: block;}
ul.topicsList li > a > p{margin: 0;}
ul.topicsList li > a > p:first-child{margin: 0 0 0.25em; font-weight: 600;}
ul.topicsList li > a > p:nth-child(2){margin: 0 0 0 1em;}

ul.topicsList li > a:hover{background: rgba(45,160,240,0.1);}
ul.topicsList li > a.nolink:hover{background: #FFF;}



/*Movie*/
#Movie > div{
	max-width: 1100px;
	margin: auto;
	padding: 5em 1em;
	}

.pv, .youtube{width: 100%; aspect-ratio: 16 / 9;}
.pv iframe, .youtube iframe{width: 100%; height: 100%;}
.youtube{margin-top: 1em;}


/*About*/
#About{padding: 1em 0 10%;}

#About h2 {
	max-width: 860px;
	margin: 0 auto;
	height: 0;
	padding-top: 5%;
	background-repeat: no-repeat;
	background-size: contain !important;
	overflow: hidden;
	display: block;
	background-image: url("../images/GCFP_POINT_h2.png");
	background-position: center;
	position: relative;
	}

	/*h2 border anime*/
	.stroke {padding: 2em 0; /*background: rgba(255,255,255,0.5);*/ position: relative;}

	.stroke .border {content: ""; position: absolute; opacity: 0;}
	.stroke .border.top, .stroke .border.bottom {width: calc(100% - 50px);}
	.stroke .border.top {border-top: 2px solid #4ad7c7; right: 0; top: 0;}
	.stroke .border.bottom {border-bottom: 2px solid #6791e7; left: 0;bottom: 0;}

	.stroke.is-animated .border {opacity: 1;}
	.stroke.is-animated .border.top, .stroke.is-animated .border.bottom {animation: stroke-width 1.8s cubic-bezier(0.22, 1, 0.36, 1);}

	@keyframes stroke-width { 0% {width: 0; opacity: 1;} 100% {width: calc(100% - 50px); opacity: 1;}}

	@media only screen and (max-width: 480px) {#About h2 {padding-top: 15%; background-image: url("../images/GCFP_POINT_h2sp.png");}}


.Point{padding: 3em 0 0;}

.Point h3{
	max-width: 1100px;
	margin: 0.5em auto 0;
	padding: 0.75em 1.5em;
	font-size: 2.8em;
	line-height: 1.8em;
	font-style: italic;
	font-weight: 800;
	color: #27acd9;
	text-align: center;
	position: relative;
	}

.Point h3:before, .Point h3:after {position: absolute; content: '';}

.Point h3:after {
	top: 0;
	left: 0;
	width: 50px;
	height: 50px;
	border-top: 2px solid currentColor ;
	border-left: 2px solid currentColor ;
	}

.Point h3:before {
	right: 0;
	bottom: 0;
	width: 50px;
	height: 50px;
	border-right: 2px solid currentColor ;
	border-bottom: 2px solid currentColor ;
	}

.Point h3 > br{display: none;}
.Point h3 + p{padding: 1em 1em 2.5em; text-align: center;}


.Point h4 {
	max-width: 300px;
	margin: auto;
	position: relative;
	padding: 0.5em 0;
	background: #27acd9;
	font-size: 1.4em;
	color: white;
	text-align: center;
	line-height: 1.3;
	z-index: -1;
	}

.Point h4:before {
	position: absolute;
	content: '';
	left: -2px;
	top: -2px;
	border: none;
	border-left: solid 40px white;
	border-bottom: solid 79px transparent;
	z-index: -2;
	}

.Point h4:after {
	position: absolute;
	content: '';
	right: -2px;
	bottom: -2px;
	border: none;
	border-right: solid 40px white;
	border-top: solid 79px transparent;
	z-index:-2;
	}

.Point h5{
	margin: 1em 0;
	padding: 0 0 0 0.5em;
	font-size: 1em;
	border-left: solid 5px #27acd9;
	}

.Point p + .Point h5{margin: 3em 0 1em;}

.game_ss{display: flex; flex-wrap: wrap;}
.game_ss div{flex: 0 1 48%; margin: 0.5em 1%;}

.notes{
	max-width: 1580px;
	margin: auto;
	padding: 10% 1em;
	}

.notes_info{padding-top: 3em; display: flex; flex-wrap: wrap; align-items: center;}
.notes_info div{flex: 0 1 46%; margin: 0.5em 2%;}


@media only screen and (max-width: 860px) {
	.Point h3{margin: 0.5em 1em; font-size: 1.8em;}
	.Point h3 > br{display: block;}
	.notes{padding: 10% 0;}
	.game_ss, .notes_info{display: block;}
	.game_ss div, .notes_info div{margin: 0.5em 1em 2em;}
	}

@media only screen and (max-width: 480px) {
	.Point h3{font-size: 1.7em; line-height: 1.6em;}
	.Point h3 > br{display: block;}
	}

/* tab */
.tab-list {
	max-width: 1380px;
	margin: auto;
	padding: 1em 1em 2em;
	display: flex;
	justify-content: space-between;
	}

.tab-list .tab-item {
	flex: 0 1 48%;
	padding: 0.75em 0.5em;
	font-size: 1.2em;
	color: #27acd9;
	text-align: center;
	font-weight: 700;
	cursor: pointer;
	display: block;
	vertical-align: middle;
	border: solid 2px #27acd9;
	border-radius: 100vw;
	background-color: #FFF;
	transition: .4s ease-in-out;
	}

.tab-list .tab-item:hover, .tab-list .is-active {
	color: #FFF;
	background-color: #27acd9;
	background-position: right center;
	background-size: 200% auto;
	animation: blueBtn 1.5s infinite;
	}

.tab-list .tab-item br{display: none;}
@media only screen and (max-width: 480px) {.tab-list .tab-item{font-size: 1.1em;} .tab-list .tab-item br{display: block;}}


@keyframes blueBtn {
	0% {box-shadow: 0 0 0 0 #27acd9;}
	70% {box-shadow: 0 0 0 10px rgb(39 172 217 / 0%);}
	100% {box-shadow: 0 0 0 0 rgb(39 172 217 / 0%);}
	}


/* tab_panel */
.panel-list {background-color: #fff;}

.panel-item {
	display: none;
	padding: 0;
	background-color: #fff;
	}

.playmode > div {padding-top: 1em;}

.panel-item.is-active {
	display: block;
	animation: panel-show .9s ease-in-out forwards;
	}

.panel-list p{padding: 0.5em 0;}
.panel-item > div:first-child{padding-bottom: 3em;}

@keyframes panel-show {from {opacity: 0;} to {opacity: 1;}}



/*Swiper*/
.swiper{padding: 0 0 50px;}
.swiper-slide {transition: transform 0.6s;}
.swiper-slide p{text-align: center; margin-bottom: 1em;}

.swiper-slide-prev,
.swiper-slide-next,
.swiper-slide-duplicate-prev,
.swiper-slide-duplicate-next {transform: scale(0.95);}


.swiper-pagination-bullet {background-color: #ff5ac8;}

.swiper-button-next, .swiper-button-prev{color: #ff5ac8!important; z-index: 99999;}
.swiper-pagination{bottom: 0;}

@media only screen and (max-width: 1200px) {#Character .swiper-button-next, #Character .swiper-button-prev{top: 85%!important;}}
@media only screen and (max-width: 480px) {#Character .swiper-button-next, #Character .swiper-button-prev{top: 95%!important;}}

/*Swiper_News*/
#News .swiper-wrapper{align-items: stretch;}

#News .swiper-slide{max-width: 450px;}
#News .swiper-slide p{text-align: left;}

#News .swiper-slide-prev,
#News .swiper-slide-next,
#News .swiper-slide-duplicate-prev,
#News .swiper-slide-duplicate-next {transform: scale(1.0);}

#News .swiper-slide{box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);}
#News .swiper-slide > article a{padding: 1em;}

#News .swiper-horizontal > #News .swiper-pagination-bullets,
#News .swiper-pagination-bullets.swiper-pagination-horizontal,
#News .swiper-pagination-custom, #News .swiper-pagination-fraction {bottom: -5px;}

#News time{padding: 1em 0; font-size: 0.9em; color: #27acd9;}
#News h3{font-size: 0.9em; font-weight: normal; margin: 0.5em 0;}

@media only screen and (max-width: 480px) {#News .swiper-slide{max-width: 480px;}}


/*Swiper_Character*/
#Character .swiper-slide > div{max-width: 1500px; margin: auto; position: relative;}


/*Division*/
.Division{
	width: 90%;
	margin: 0 auto 2em 0;
	padding: 2em 1em;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	background: linear-gradient(0deg, #eff0f0 0%, #eff0f0 75%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 100%);
	}

.Division:last-child{margin: 0 auto 0 0;}

.right{margin: 0 0 2em auto;}
.Division:last-child{margin: 0 0 0 auto;}

.Division article{flex: 0 1 46%; margin: 0 2%;}
.right article:first-child, .Division:last-child article:first-child{flex: 0 1 46%; margin: 0 2%; order: 2;}
.right article:last-child, .Division:last-child article:last-child{flex: 0 1 46%; margin: 0 2%; order: 1;}

.colorBox p{color: #FFF;}


@media only screen and (max-width: 860px) {
	.Division{width: 95%; display: block;}
	.Division article{padding-top: 1em;}
	}


/*Music*/
.musicList{display: flex; flex-wrap: wrap;}
.musicList article{flex: 0 1 20%; margin: 1em auto; position: relative;}
.musicList article:last-child div{position: absolute; bottom: 0;}
.musicList p.new{width: 45px; height: auto; top: 4px; left: 4px; position: absolute; z-index: 99;}

figure{
    flex: 0 1 24%;
    margin: 0.35em 0.5%;
    }

figure.hover-parent {
    position: relative;
    overflow: hidden;
    }

figcaption.hover-mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(10,130,130,0.75);
    color: #fff;
    display: flex;
    align-items: center;
    text-align: left;
    opacity: 0;
    transition: all 0.6s ease;
    padding-top: 40px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 80%;
    line-height: 1.5em;
    } 

figure.hover-parent:hover .hover-mask{opacity: 1; padding-top: 0;}
.hover-mask br.sp{display: none;}


.more{
    margin-top: 1.5em;
    font-weight: 500;
    letter-spacing: 1px;
    text-align: right;
    font-family: 'Orbitron', sans-serif;
    }


.music_copy{padding-top: 10%;}
.music_copy ul{margin: 0; padding: 0;}
.music_copy li{padding: 0 0 0.65em; list-style: none; font-size: 0.8em;}
.music_copy p{padding-left: 0.6em;}
.music_copy img{margin-left: 4px;}


@media only screen and (max-width: 860px) {
    .musicList{padding-top: 0.5em;}
    .musicList article{flex: 0 1 31%; margin: 1em 1% 1em;}
    .musicCopy li{font-size: 0.7em!important; line-height: 1.2em; margin-bottom: 0.45em;}
    
    figure{flex: 0 1 24%;}
    figcaption.hover-mask {padding-left: 5px; padding-right: 5px; font-size: 65%;}
    .hover-mask br.sp{display: block;}
    
    .copyright{padding-top: 1em; display: block;}
    .copyright > div:last-child{padding-top: 1em;}
    }


@media only screen and (max-width: 480px) {
    .musicList article{flex: 0 1 48%; margin: 0 1% 0.5em;}
	.musicList article:last-child{flex: 0 1 100%; padding-top: 5em; margin: 0 auto 2em;}
    
    figure{flex: 0 1 48%; margin: 0 1% 0.5em;}
    }


/*story*/
.introduction{
	padding-top: 35%;
	background-image: url("../images/GCFP_story_bg.webp");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top left;
	}

.introduction div{
	width: 60%;
	margin: 0 0 0 auto;
	padding: 2em;
	background: #FFF;
	}

.introduction div p{font-size: 0.8em; margin-bottom: 1em;}

@media only screen and (max-width: 860px) {.introduction div{width: 80%;}}
@media only screen and (max-width: 480px) {.introduction div{width: 90%; margin: 0 auto; padding: 1.5em;}}



/*character*/
#Character{
	margin-top: 1em;
	padding: 3.5% 0 10%;
	background-image: url("../images/GCFP_CHARACTER_h3.png");
	background-size: contain;
	background-position: top center;
	background-repeat: no-repeat;
	position: relative;
	}


/*creator*/
.member {
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
	background: linear-gradient(to bottom, rgba(126,155,235,1) 0%,rgba(93,228,206,1) 100%);
	}

.member svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 104px;
	}

.member .shape-fill {fill: #FFFFFF;}

.member > div{max-width: 960px; margin: auto; padding: 3.5em 2em;}
.member h3{margin: 0 0 3em; text-align: center;}
.member h3 + p img{width: 30%;}

.member p{margin-bottom: 3em;}

.sp{display: none;}

.illust{display: flex; flex-wrap: wrap;}
.illust p{flex: 0 1 50%;}
.illust p:last-child img{width: 75%;}

@media only screen and (max-width: 480px) {
	.member h3 + p img{width: 50%;}
	.long{display: none;}
	.sp{display: block;}
	.sp img{width: 80%;}
	
	.illust{display: block;}
	.illust p:first-child img{width: 68%;}
	.illust p:last-child img{width: 58%;}
	}



/*overview*/
main section:last-child{padding: 0 1em;}

.Overview{
    max-width: 960px;
    margin: 5em auto 0;
    padding: 1.5em;
    display: flex;
    align-items: center;
    background: rgba(134,146,145,0.05);
    }

.Overview article{flex: 0 1 46%; margin: 0 2%;}

.Overview ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

.Overview li{margin-bottom: 0; padding: 0.25em; font-size: 0.8em;}

@media only screen and (max-width: 480px) {
	.Overview{display: block;}
	.Overview article{margin: 1em 0;}
	}



/*-----Category-----*/
#Category{
	width: 100%;
	padding: 5px 0 5px 20px;
	background: #f9f9f9;
	position: fixed;
	z-index: 100;
	}

#Category h1 {max-width: 280px;}

#Details, #News_Details{max-width: 1280px; margin: auto; padding: 200px 1.5em 1em; background: #FFF;}
.NewsPage, .MovieList{background: #f9f9f9;}


#Details h3{
	position: relative;
	color: #27acd9;
	font-size: 1em;
    font-weight: bold;
	margin: 0 0 1em;
	padding: 0.5em 0.5em 0.5em 1.7em;
	border-bottom: 3px solid #27acd9;
	}
 
#Details h3:before{
	content: "";
    position: absolute;
    background: #6cbdd8;
    top: 0;
    left: 0.4em;
    height: 12px;
    width: 12px;
    transform: rotate(45deg);
	}
 
#Details h3:after{
    content: "";
    position: absolute;
    background:#97c9da;
    top: 1.0em;
    left: 0;
    height: 8px;
    width: 8px;
    transform: rotate(15deg);
	}


/*News_Details*/
.news_inner{padding: 1.5em;}

#News_Details h3{margin: 0.5em 0; padding: 0.75em; font-size: 1.2em; border-top: solid 3px #32e5dc;}
#News_Details time{font-size: 0.8em; text-align: right;}
#News_Details time + p{margin: 2em 0;}
.news_img{text-align: center; padding-bottom: 2em;}
.news_img + div{padding-bottom: 1em;}

.GCFP_NewsArticle > div:first-child{padding-bottom: 1em;}

.GCFP_NewsArticle h2 , #News_Details h4 {
	font-size: 1.1em!important;
	position: relative;
	margin: 3em 0 1em!important;
	padding: 0.5em!important;
	border-bottom: 2px solid #dcdcdc;
	background-image: none!important;
	}

.GCFP_NewsArticle h2:before , #News_Details h4:before {
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 20%;
	height: 2px;
	content: '';
	background: #32e5dc;
	z-index: 99;
	}

.GCFP_NewsArticle h3{
	font-size: 1em!important;
	font-weight: bold!important;
	border-top: none!important;
	border-left: solid 8px #27acd9!important;
	margin: 3em 0 1em!important;
	padding: 0 0 0 0.5em!important;
	}

#News_Details h6{margin: 0.25em 1em 0; font-size: 0.8em;}
#News_Details h6 + p{font-size: 0.8em; margin: 0.25em 1em 0;}

.flexBox{display: flex; flex-wrap: wrap; padding-bottom: 2em;}
.boxset2 div, .boxset2 p{flex: 0 1 46%; margin: 1em 2%;}
.boxset3 div, .boxset3 p{flex: 0 1 29%; margin: 1em 2%;}
.boxset2 div p:first-child, .boxset3 div p:first-child{margin: 0 0 0.5em;}

.block02 div, .block02 p{flex: 0 1 46%; margin: 1em 2%;}
.block03 div, .block03 p{flex: 0 1 29%; margin: 1em 2%;}

.GCFP_NewsArticle p{margin: 0.5em 0;}

table {
	margin:0 auto 60px;
	width:calc(100% - 20px);
	border:1px solid rgba(45,45,45,.1)
	}

th {
    background-color: #f9f9f9;
    font-size: 16px;
    font-weight: 400;
    padding: 16px 10px;
    border-bottom: 1px solid rgba(45,45,45,.1);
    letter-spacing: .2em;
	text-align: left;
    vertical-align: middle;
	width: inherit!important;
	}

td {
    padding: 14px 30px;
    border-bottom: 1px solid rgba(45,45,45,.1);
    border-left: 1px solid rgba(45,45,45,.1);
    font-size: 14px;
    letter-spacing: .27em;
    line-height: 2.2;
    vertical-align: middle;
	width: auto!important;
	}

@media screen and (max-width:768px) {
	.article-edit-area table　{
		width: 100%;
		margin: 0 auto 60px;
		border: 1px solid rgba(45,45,45,.1);
		}

	.article-edit-area table.folding tr {
		display: flex;
		flex-direction: column;
		}

	.article-edit-area table th {
		padding: 15px;
		text-align: left;
		font-size: 13px;
		font-weight: 400;
		border-bottom: 1px solid rgba(45,45,45,.1);
		border-top: 0;
		}

	.article-edit-area table td {
		font-size: 12px;
		padding: 12px 15px;
		line-height: 2;
		letter-spacing: .1em;
		}
	
	.article-edit-area table td.folding {border-left: 0;}
	}


@media only screen and (max-width: 480px) {
	.boxset3 div, .boxset3 p{flex: 0 1 46%; margin: 1em 2%;}
	.block03 div, .block03 p{flex: 0 1 46%; margin: 1em 2%;}
	}

.copy{margin: 3em 1em; font-size: 0.75em; color: #aaaaaa;}

#News_Details p a, #News_Details li a{color: #f43cb7; display: inline;}
#News_Details p a, #News_Details li a:hover{color: #F86ECA;}


/*Movie*/
.NEW_Movie, .Live, .Archives{padding-bottom: 5em;}

.NEW_Movie{padding-top: 5em;}
.box01{max-width: 1000px; margin: auto;}

.NEW_Movie > div > div{position: relative;}
.NEW_Movie > div > div::before{
    position: absolute;
    content: "NEW";
    top: -40px;
    left: 0;
	color: white;
    background-color: crimson;
    padding: 5px 25px;
	}

.PVBox{display: flex; flex-wrap: wrap;}
.PVBox div{flex: 0 1 46%; margin: 1em 2% 60px;}

.Live > div, .Archives > div{display: flex; flex-wrap: wrap;}
.Live > div > div, .Archives > div > div{flex: 0 1 31%; margin: 0.5em 1%;}

@media only screen and (max-width: 860px) {.PVBox{display: block;} .PVBox div{margin: 0 0 60px;}}
@media only screen and (max-width: 480px) {.Live > div > div, .Archives > div > div{flex: 0 1 48%; margin: 0.5em 1%;}}




/*-----Campaign-----*/
#Campaign{padding: 1em;}

#Campaign > section{
	max-width: 1380px;
	margin: auto;
	padding: 1em 1.5em 1.5em!important;
	border: 3px solid #00D6AF;
    border-image: linear-gradient(135deg, rgba(126,155,235,1) 0%,rgba(93,228,206,1) 100%);
    border-image-slice: 1;
    border-radius: 25px;
    margin-bottom: 32px;
    padding: 16px 16px 0;	
	}

#Campaign > section > div{padding-top: 1em; padding-bottom: 3em;}

#Campaign h1 {
	font-size: 1em;
	font-weight: bold;
	color: #27acd9;
	border: 3px solid #27acd9;
	background-color: #fff;
	padding: 0.5em 1em;
	position: relative;
	}

#Campaign h1::after {
	content: '';
	background-color: #27acd9;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	transform: rotate(-1deg);
	}

#Campaign h2 {
	font-size: 1em;
	font-weight: bold;
	border-bottom: 3px solid #e3e3e3;
	padding: 0.3em;
	margin-bottom: 0.3em;
	position: relative;
	}

#Campaign h2::after {
	content: '';
	background-color: #27acd9;
	width: 2em;
	height: 3px;
	position: absolute;
	bottom: -3px;
	left: 0;
	z-index: 1;
	}

#Campaign h3 {
	font-size: 1em;
	font-weight: bold;
	border-left: solid 8px #27acd9;
	margin: 2em 0 1em;
	padding: 0 0 0 0.5em;
	}

#Campaign p a, #Campaign li a{color: #f43cb7; display: inline;}
#Campaign p a, #Campaign li a:hover{color: #F86ECA;}



@media only screen and (max-width: 860px) {#Campaign h1::after {transform: rotate(-3deg);}}




/*-----Footer-----*/
footer{padding-bottom: 3em; background: #FFF;}
.MovieList footer, .NewsPage footer{background: #f9f9f9;}

footer section{max-width: 1380px; margin: auto; padding: 0 1.5em;}


/*mc_copyright*/
.musicCopy{padding: 8% 1em; display: flex;}
.musicCopy div{flex: 0 1 48%; margin: 0 1%;}

.musicCopy h5{margin: 1em; padding: 0!important; font-size: 1em; color: #32acff; font-family: 'Orbitron', sans-serif;}
.musicCopy ul{margin: 0 1em; padding: 0; list-style-type: none;}
.musicCopy li{font-size: 0.8em; line-height: 1.2em; margin-bottom: 0.75em;}

@media only screen and (max-width: 860px) {
	.musicCopy{display: block;}
	.musicCopy div:last-child{margin: 2em 1% 0;}
	.musicCopy h5{margin: 1em 0;}
	.musicCopy ul{margin: 0 0.5em;}
	}

@media only screen and (max-width: 480px) {.musicCopy{padding: 8% 1em 15%;} .piapro{max-width: 65px;}}


/*SNS*/
#shareBox {
    margin: 10% auto;
	padding: 1em 1em 3em;
	text-align: center;
	position: relative;
	}

	.shareButtons {
		position: absolute;
        top: 0;
		bottom: 0;
		left: calc(45% - 60px);
		display: flex;
		justify-content: space-between;
		width: 270px;
		height: auto;
		margin: 0 auto;
		padding: 0 0 50px;
		clear: none;
		z-index: 888;
		}

    .mainVisual #shareBox {margin-top: 3em;}

	.shareButtons > div > a {
		display: block;
		width: 50px;
		height: 50px;
        margin: 0 20px;
		background-size: contain;
		background: no-repeat top center;
		}

	.shareButtons > div.fbBtn a {background-image: url("../images/sns_ico_01_fb.svg");}
	.shareButtons > div.tweetBtn a {background-image: url("../images/sns_ico_02_tw.svg");}
	.shareButtons > div.lineBtn a {background-image: url("../images/sns_ico_03_line.svg");}

@media only screen and (max-width: 860px) {.shareButtons {left: calc(40% - 60px);}}
@media only screen and (max-width: 480px) {#shareBox {padding: 1em 1em 8em;}.shareButtons {left: calc(30% - 60px);}}


/*corp*/
#Corp p:first-child{font-size: 0.8em; margin: 2em 0;}
#Corp .taito{margin-top: 3em; max-width: 150px;}

ul.taitoLink{margin: 1em 0 0; padding: 0 0 2em; border-bottom: solid 1px #828282;}
	
ul.taitoLink li{
	font-size: 1.0em;
	margin-right: 1.0em;
	display: inline-block;
	}
	
ul.taitoLink a{color: #758180;}
ul.taitoLink a:hover{color: #7ecef4;}

footer p:last-child{
	margin-top: 2em;
	font-size: 0.8em;
	text-align: center;
	}

@media only screen and (max-width: 480px) {footer{padding: 10% 0;} ul.taitoLink li{font-size: 0.9em;}}