@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;}
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;}


@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{
	/*background-color: #ffffff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3Crect stroke='%23ffffff' stroke-width='0.6' width='1' height='1' id='s'/%3E%3Cpattern id='a' width='3' height='3' patternUnits='userSpaceOnUse' patternTransform='scale(39.2) translate(-974.49 -730.87)'%3E%3Cuse fill='%23fcfcfc' href='%23s' y='2'/%3E%3Cuse fill='%23fcfcfc' href='%23s' x='1' y='2'/%3E%3Cuse fill='%23fafafa' href='%23s' x='2' y='2'/%3E%3Cuse fill='%23fafafa' href='%23s'/%3E%3Cuse fill='%23f7f7f7' href='%23s' x='2'/%3E%3Cuse fill='%23f7f7f7' href='%23s' x='1' y='1'/%3E%3C/pattern%3E%3Cpattern id='b' width='7' height='11' patternUnits='userSpaceOnUse' patternTransform='scale(39.2) translate(-974.49 -730.87)'%3E%3Cg fill='%23f5f5f5'%3E%3Cuse href='%23s'/%3E%3Cuse href='%23s' y='5' /%3E%3Cuse href='%23s' x='1' y='10'/%3E%3Cuse href='%23s' x='2' y='1'/%3E%3Cuse href='%23s' x='2' y='4'/%3E%3Cuse href='%23s' x='3' y='8'/%3E%3Cuse href='%23s' x='4' y='3'/%3E%3Cuse href='%23s' x='4' y='7'/%3E%3Cuse href='%23s' x='5' y='2'/%3E%3Cuse href='%23s' x='5' y='6'/%3E%3Cuse href='%23s' x='6' y='9'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='h' width='5' height='13' patternUnits='userSpaceOnUse' patternTransform='scale(39.2) translate(-974.49 -730.87)'%3E%3Cg fill='%23f5f5f5'%3E%3Cuse href='%23s' y='5'/%3E%3Cuse href='%23s' y='8'/%3E%3Cuse href='%23s' x='1' y='1'/%3E%3Cuse href='%23s' x='1' y='9'/%3E%3Cuse href='%23s' x='1' y='12'/%3E%3Cuse href='%23s' x='2'/%3E%3Cuse href='%23s' x='2' y='4'/%3E%3Cuse href='%23s' x='3' y='2'/%3E%3Cuse href='%23s' x='3' y='6'/%3E%3Cuse href='%23s' x='3' y='11'/%3E%3Cuse href='%23s' x='4' y='3'/%3E%3Cuse href='%23s' x='4' y='7'/%3E%3Cuse href='%23s' x='4' y='10'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='c' width='17' height='13' patternUnits='userSpaceOnUse' patternTransform='scale(39.2) translate(-974.49 -730.87)'%3E%3Cg fill='%23f2f2f2'%3E%3Cuse href='%23s' y='11'/%3E%3Cuse href='%23s' x='2' y='9'/%3E%3Cuse href='%23s' x='5' y='12'/%3E%3Cuse href='%23s' x='9' y='4'/%3E%3Cuse href='%23s' x='12' y='1'/%3E%3Cuse href='%23s' x='16' y='6'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='d' width='19' height='17' patternUnits='userSpaceOnUse' patternTransform='scale(39.2) translate(-974.49 -730.87)'%3E%3Cg fill='%23ffffff'%3E%3Cuse href='%23s' y='9'/%3E%3Cuse href='%23s' x='16' y='5'/%3E%3Cuse href='%23s' x='14' y='2'/%3E%3Cuse href='%23s' x='11' y='11'/%3E%3Cuse href='%23s' x='6' y='14'/%3E%3C/g%3E%3Cg fill='%23efefef'%3E%3Cuse href='%23s' x='3' y='13'/%3E%3Cuse href='%23s' x='9' y='7'/%3E%3Cuse href='%23s' x='13' y='10'/%3E%3Cuse href='%23s' x='15' y='4'/%3E%3Cuse href='%23s' x='18' y='1'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='e' width='47' height='53' patternUnits='userSpaceOnUse' patternTransform='scale(39.2) translate(-974.49 -730.87)'%3E%3Cg fill='%23FE56CF'%3E%3Cuse href='%23s' x='2' y='5'/%3E%3Cuse href='%23s' x='16' y='38'/%3E%3Cuse href='%23s' x='46' y='42'/%3E%3Cuse href='%23s' x='29' y='20'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='f' width='59' height='71' patternUnits='userSpaceOnUse' patternTransform='scale(39.2) translate(-974.49 -730.87)'%3E%3Cg fill='%23FE56CF'%3E%3Cuse href='%23s' x='33' y='13'/%3E%3Cuse href='%23s' x='27' y='54'/%3E%3Cuse href='%23s' x='55' y='55'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='g' width='139' height='97' patternUnits='userSpaceOnUse' patternTransform='scale(39.2) translate(-974.49 -730.87)'%3E%3Cg fill='%23FE56CF'%3E%3Cuse href='%23s' x='11' y='8'/%3E%3Cuse href='%23s' x='51' y='13'/%3E%3Cuse href='%23s' x='17' y='73'/%3E%3Cuse href='%23s' x='99' y='57'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23b)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23h)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23c)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23d)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23e)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23f)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23g)' width='100%25' height='100%25'/%3E%3C/svg%3E");
	background-attachment: fixed;
	background-size: cover;
	overflow: hidden;*/
	}

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

.LinkButton a {
	position: relative;
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin: 1em auto;
	width: 80%;
	max-width: 400px;
	padding: 10px 25px;
	color: #FFF;
	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{
	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 {left: 100%;}

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


.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{
	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;
	}

#mainVisual h1 {
	margin: 0;
	height: 0;
	padding-top: 18%;
	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;
	bottom: 20px;
	left: 20px;
	}

.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%;}

#News h2, #Music 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{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, #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{width: 100%; aspect-ratio: 16 / 9;}
.pv iframe {width: 100%; height: 100%;}



/*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-slide {transition: transform 0.6s;}
.swiper-slide p{text-align: center;}

.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;}
@media only screen and (max-width: 480px) {#Character .swiper-button-next, #Character .swiper-button-prev{top: 90%!important;}}



/*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 70%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 100%);
	}

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

.right, .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;
	}


/*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;}
	
	.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;}
	}


/*-----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;}
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;}}