@charset "UTF-8";
/*------------------------------------------------
	TITLE: 『チア男子』
	DEVICE：　PC
	CONTENT： INDEX
------------------------------------------------*/
a:focus { outline: none; }
img { vertical-align: bottom; }

body {
	width: 100%;
	min-width: 1240px;
	font-family: "Roboto", "Noto Sans JP", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background: url(../img/index/pattern1.png) #fff;
}

/* CONTENT --------------------------------------*/
.wrapp {
	position: relative;
	width: 100%;
}
.wrapp:before,
.wrapp:after {
	position: absolute;
	width: 720px;
	height: 120px;
	content: "";
	z-index: 999;
}
.wrapp:before {
	top: 0;
	left: 0;
	background: url(../img/index/topBg.png) no-repeat left top;
}
.wrapp:after {
	bottom: 0;
	right: 0;
	background: url(../img/index/bottomBg.png) no-repeat right bottom;
}
	/* MAIN BLOCK */
	.mainBlock {
		position: relative;
		display: flex;
		width: 100%;
		
	}
	.mainBlock img {
		width: 100%;
	}
		/* HEADER */
		header {
			position: relative;
			width: 22%;
			padding: 160px 0 0;
			z-index: 10;
		}
			.globalNav {
				margin: 0 0 20px;
			}
				.globalNav li {
					width: 260px;
					margin: 0 0 16px;
					text-align: center;
				}
					.globalNav li p {
						width: 260px;
						background: #000;
						-webkit-transition: all .25s ease-in-out;
						   -moz-transition: all .25s ease-in-out;
						    -ms-transition: all .25s ease-in-out;
						     -o-transition: all .25s ease-in-out;
						        transition: all .25s ease-in-out;
					}
					.globalNav li img { width: auto; }


					.globalNav a:hover p,
					.globalNav li.is-active p {
						width: 300px;
						background: #005bac;
					}
					.globalNav li.is-active a { pointer-events: none; }
			/* OFFICIAL SNS */
			.sns {
				width: 96px;
				margin: 0 0 20px 82px;
			}
				.sns p { margin: 0 0 16px; }
				.snsNav {
					display: flex;
					justify-content: center;
				}
					.snsNav li {
						width: 40px;
						height: 40px;
						margin: 0 4px;
					}
						.snsNav li img {
							opacity: 0;
							-webkit-transition: opacity .25s ease-in;
							   -moz-transition: opacity .25s ease-in;
							    -ms-transition: opacity .25s ease-in;
							     -o-transition: opacity .25s ease-in;
							        transition: opacity .25s ease-in;
						}
					.snsNavTW { background: url(../img/index/navTW_off.png) no-repeat center top; }
					.snsNavINSTA { background: url(../img/index/navINSTA_off.png) no-repeat center top; }
					/* HOVER */
					.snsNav li a:hover img {
						opacity: 1;
					}
			/* DVD BANNER */
			.makingBnr {
				width: 140px;
				margin: 0 0 20px 60px;
			}
				.makingBnr img { width: 100%; }
			/* BUTAI BANNER */
			.butaiBnr {
				width: 140px;
				margin: 0 0 20px 60px;
			}
				.butaiBnr img { width: 100%; }	
		/* VISUAL */
		.visual {
			position: relative;
			width: 78%;
			z-index: 1;
		}
			.visual img {
				width: 100%;
			}
			.visual h1 {
				position: absolute;
				width: 47.8%;
				top: 66%;
				left: 26%;
			}
			.roadshow {
				position: absolute;
				width: 47.8%;
				top: 78%;
				left: 26%;
			}
			.copy01 {
				position: absolute;
				width:63.6%;
				top: 7.4%;
				left: 30%;
			}
			.copy02 {
				position: absolute;
				width: 50.2%;
				top: 3%;
				left: 3.8%;
			}
		/* CAST IMG */
		.castImg {
			position: absolute;
			width: 100%;
			top: 82.3%;
			left: 0;
			overflow: hidden;
			z-index: 2;
		}
			.obi01 {
				position: relative;
				width: 100%;
				height: 567px;
			}
				.obi01 img {
					position: absolute;
					width: 1920px;
					height: 567px;
					top: 0;
					left: 50%;
					margin: 0 0 0 -960px;
				}
	
	/* BOTTOM BLOCK */
	.bottomBlock {
		width: 100%;
	}
		.btSpacer {
			display: flex;
			width: 100%;
			height: 80px;
		}
			.btSpacer p { width: 50%; }
			.btSpacer p:last-child {
				background: url(../img/index/dot.png);
			}
		.bottomInner {
			width: 100%;
			padding: 233px 0 40px;
			background: url(../img/index/dot.png);
		}
			.billing {
				margin: 0 0 80px;
				text-align: center;
			}
			/* BANNER AREA */
			.bannerArea {
				width: 1160px;
				margin: 0 auto 58px;
			}
				.bannerArea ul {
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
				}
				.bannerArea li {
					width: 200px;
					margin: 0 20px;
				}
					.bannerArea li img {
						-webkit-transition: opacity .25s ease-in;
						   -moz-transition: opacity .25s ease-in;
						    -ms-transition: opacity .25s ease-in;
						     -o-transition: opacity .25s ease-in;
						        transition: opacity .25s ease-in;
					}
				/* HOVER */
				.bannerArea li a:hover img {
					opacity: 0.7;
				}
			/* FOOTER */
			footer {
				position: relative;
				width: 1160px;
				margin: 0 auto;
				padding: 24px 0 40px;
			}
				.copyright {
					color: #000;
					font-size: 12px;
					line-height: 1;
					text-align: center;
				}
				/* SHARE */
				.shareBox {
					position: absolute;
					width: 136px;
					top: 0;
					left: 0;
				}
					.shareBox p {
						width: 100%;
						margin: 0 0 16px;
						padding: 5px 0;
						color: #000;
						font-size: 12px;
						font-weight: bold;
						line-height: 1;
						text-align: center;
						border-top: 2px solid #000;
						border-bottom: 2px solid #000;
					}
					.shareBox ul {
						display: flex;
						width: 100%;
						justify-content: space-between;
					}
					.shareBox li {
						width: 40px;
					}
					.shareBox li img {
						opacity: 0;
						-webkit-transition: opacity .25s ease-in;
						   -moz-transition: opacity .25s ease-in;
						    -ms-transition: opacity .25s ease-in;
						     -o-transition: opacity .25s ease-in;
						        transition: opacity .25s ease-in;
					}
					.shareTW { background: url(../img/index/share_TW_off.png) no-repeat center top; }
					.shareFB { background: url(../img/index/share_FB_off.png) no-repeat center top; }
					.shareLINE { background: url(../img/index/share_LINE_off.png) no-repeat center top; }
					/* HOVER */
					.shareBox li a:hover img {
						opacity: 1;
					}

/* EFFECT ---------------------------------------*/
/* INIT */

.wrapp { opacity: 0; }

header { opacity: 0; }

.visual > img,
.visual h1,
.visual p:nth-child(3) { opacity: 0; }

.visual p:nth-child(4),
.visual p:nth-child(5) { opacity: 0; }

/* ANIMATION */
.wrapp.on { animation: fi01 0.4s ease 0s 1 forwards; }

.visual.on > img { animation: fi01 1.2s ease-out 0s 1 forwards; }
.visual.on h1 { animation: fi01 1s ease-out 1.4s 1 forwards; }
.visual.on p:nth-child(3) { animation: fi01 0.8s ease-out 2s 1 forwards; }
.visual.on p:nth-child(4) { animation: zm1-2 0.2s ease-in 3.6s 1 forwards; }
.visual.on p:nth-child(5) { animation: up1-2 0.2s ease-in 3s 1 forwards }

header.on { animation: fi01 1s ease-out 5s 1 forwards; }

/* KEYFRAMES */
@keyframes fi01 {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes zm1-2 {
	0% { opacity: 0; transform: scale(1.8); }
	100% { opacity: 1; transform: scale(1); }
}

@keyframes up1-2 {
	0% { opacity: 0; transform: translate(2%, -1.4%); }
	100% { opacity: 1; transform: translateY(0, 0); }
}
/*-----------------------------------------------*/