/* Scss Document */

$breakpoint-sm: 374px;
$breakpoint: 768px;
$breakpoint-md: 960px;
$txtcolor: #333333;
$jciblue: #1f87c6;
$lightgray: #F2F2F2;
$gray: #E8E8E8;

@mixin sm {
  @media screen and (max-width: $breakpoint-sm) {
    @content;
  }
}

@mixin mq {
  @media screen and (max-width: $breakpoint) {
    @content;
  }
}

@mixin lg {
  @media screen and (min-width: $breakpoint) {
    @content;
  }
}

@mixin mq-md {
  @media screen and (max-width: $breakpoint-md) {
    @content;
  }
}

//共通css
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

a{
	color: inherit;
	&:hover{
		opacity: 0.7 !important;
		transition: 0.5s;
	}
}

img{
	max-width: 100%;
	width: 100%;
}

html,body{
	font-family:'Noto Sans Japanese',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 62.5%; 
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body{
	font-size: 1.4rem;
	font-weight: 300;
	letter-spacing: 0.2rem;
	line-height: 1.75;
	color: $txtcolor;
	font-feature-settings : "palt";
	@include mq{
		font-size: 1.3rem;
	}
}

.sp{
	display: none;
	@include mq{
		display: block;
	}
}

.pc{
	display: block;
	@include mq{
		display: none;
	}
}

.futulaLight{
font-family: futura-pt,'Noto Sans Japanese',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.futulaBold{
	font-family: futura-pt-bold, 'Noto Sans Japanese',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#outside {
    position: fixed;
    background-color: rgba(0,0,0,.3);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 998;
	&.disnone{
		display: none;
	}
}

//ローディング
@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0.7) }
  100% {
    -webkit-transform: scale(0.6);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% { 
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
  } 100% {
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0;
  }
}

#loader-bg{
	background: #fff;
	position: fixed;
	z-index: 9999;
	width: 100vw;
	height: 100vh;
	top: 0;
}

.spinner {
	width: 300px;
	height: 72px;
	content: url(../img/common/ico_logo.svg);
	-webkit-animation: sk-scaleout 3.0s infinite ease-in-out;
	animation: sk-scaleout 3.0s infinite ease-in-out;
	position: absolute;
	left: calc(50% - 150px);
	top: -36px;
	@include mq{
		top: -18px;
	}
}

#contentWrap{
	margin-top: 120px;
	@include mq{
		margin-top: 60px;
	}
}

#news{
	.content{
		padding: 60px 0;
		width: 90%;
		max-width: 1100px;
		margin: 0 auto;
		@include mq{
			padding: 40px 0;
		}
		h2{
			font-size: 3.6rem;
			margin-bottom: 30px;
			@include mq{
				font-size: 3rem;
				margin-bottom: 20px;
			}
		}
		ul{
			li{
				border-bottom: 1px dashed $gray;
				padding-bottom: 10px;
				margin-bottom: 10px;
				span{
					margin-right: 20px;
				}
				&:last-child{
					margin-bottom: 0;
				}
				a{
					color: #1f87c6;
				}
				img{
					padding: 15px 0;
				}
			}
		}
	}
}

.link_box{
	width: 50%;
	margin: 30px 0;
	border: 1px solid $txtcolor;
	padding: 15px;
	display: block;
	text-align: center;
	@include mq{
		width: 80%;
	}
	&:hover{
		background: $txtcolor;
		color: #fff;
	}
}

.page_link{
	float: left;
	margin-right: 30px;
	border-bottom: 1px dashed $jciblue;
	padding-bottom: 10px;
	margin-bottom: 40px;
	@include mq{
		margin-bottom: 10px;
	}
}

.content_title{
	font-size: 3.6rem;
	margin-bottom: 40px;
	@include mq{
		font-size: 3rem;
		margin-bottom: 30px;
	}
}

#sns{
	.content{
		padding: 0 0 60px;
		width: 90%;
		max-width: 1100px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		@include mq{
			padding: 0 0 40px;
		}
		.tw{
			width: 32%;
			max-height: 370px;
   			overflow: scroll;
			@include mq{
				width: 100%;
				margin-bottom: 20px;
			}
		}
		.fb{
			width: 32%;
			@include mq{
				overflow: hidden;
				width: 100%;
				margin-bottom: 20px;
			}
			iframe{
				width: 100%;
				@include mq{
					float: none;
					width: 100%;
				}
			}
		}
		.insta{
			width: 32%;
			@include mq{
				width: 100%;
			}
		}
	}
}

//画像アニメーション
.animation_area{
	position: relative;
}
.dummy_area{
	position: absolute;
	left: 0;
	top: 0;
}
.img_area{
	animation: key1 1s;
}
@keyframes key1{
	0% { opacity: 0; }
	50% { opacity: 0; }
	51%{ opacity: 1; }
	100%{ opacity:1; }
}
.dummy_area {
	animation: key2 1s;
	display: inline-block;
	height: 100%;
	background-color: $txtcolor;
	opacity: 0.5;
	-webkit-transform: rotate(0.0001deg);
	transform: rotate(0.0001deg);
	outline: 1px solid transparent;
}
@keyframes key2{
	0% { left: 0; width:0px; height: 100%; }
	50% { left: 0; width: 100.1%; height: 100%; }
	100%{ left:100%; width: 0px; height: 100%;
	}
}

//フェードイン
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.fadein {
    opacity : 0.5;
    transform : translate(0, 40px);
    transition : all 500ms;
	@include mq{
		transform : translate(0, 30px);
	}
}

.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

//header
header{
	position: fixed;
    background-color: #fff;
    height: 120px;
    padding: 25px 80px;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 999;
	@include mq{
		height: 60px;
		padding: 13px 5%;
	}
	h1{
		text-align: center;
		img{
			width: 120px;
			@include mq{
				width: 100px;
			}
		}
	}
	#gnav_btn{
		position: absolute;
		width: 100px;
		height: 100px;
		top: 0;
		right: 0;
		background: $txtcolor;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		display: none;
		@include mq{
			width: 60px;
			height: 60px;
			display: flex;
		}
		&:hover{
			background: $txtcolor;
			transition: 0.5s;
		}
		span{
			position: relative;
			width: 50px;
			height: 1px;
			background-color: #fff;
			transition: all .2s;
			@include mq{
				width: 35px;
			}
			&::after{
				content: "";
				display: block;
				position: relative;
				width: 100%;
				height: 1px;
				background-color: #fff;
				top: -12px;
				left: 0;
				transition: all .2s
			}
			&::before{
				content: "";
				display: block;
				position: relative;
				width: 100%;
				height: 1px;
				background-color: #fff;
				top: 12px;
				left: 0;
				transition: all .2s
			}
		}
		&.open span{
			animation: nav_anim1 .5s forwards;
			&::after{
				animation: nav_anim2 .5s forwards;
			}
			&::before{
				animation: nav_anim3 .5s forwards;
			}
		}
	}
	nav{
		&.pc{
			margin: 0 auto;
			font-size: 1.4rem;
			margin: 20px auto;
			max-width: 1100px;
			.nav_inner{
				ul{
					display: flex;
					align-content: center;
					justify-content: space-between;
				}
			}
		}
		&.smart{
			display: none;
			position: fixed;
			left: 0;
			width: 100%;
			background-color: rgba(0,0,0,0.8);
			z-index: 1000;
			overflow-y: scroll;
			@include mq{
				top: 60px;
				padding: 20px 0 0;
				bottom: 0;
			}
			.nav_inner{
				color: #fff;
				ul{
					li{
						padding: 10px 0;
						text-align: center;
						border-bottom: 1px dashed #fff;
						font-size: 1.6rem;
					}
				}
			}
		}
	}
}

@keyframes nav_anim1{
	0%{
	background-color: #fff;
	}
	100%{
	background-color: rgba(255,255,255,0);
	}
}
@keyframes nav_anim2{
	0%{
		top: -12px;
		transform: rotate(0);
	}
	100%{
		transform: rotate(-225deg);
		top: 0;
	}
}
@keyframes nav_anim3{
	0%{
		top: 12px;
		transform: rotate(0);
	}
	100%{
		transform: rotate(225deg);
		top: 0;
	}
}

//footer
footer{
    background-color: #fff;
    padding: 25px 80px;
    width: 100%;
	display: flex;
    align-items: center;
	position: relative;
	@include mq{
		display: block;
		padding: 10% 5%;
		text-align: center;
	}
	.footer_img{
		img{
			width: 125px;
			margin: 0 auto;
			@include mq{
				width: 200px;
			}
		}
		span{
			display: inline-block;
			padding-left: 25px;
			font-size: 1.2rem;
			letter-spacing: 0.4rem;
			@include mq{
				display: block;
				margin: 0 auto;
				padding: 10px 0;
			}
		}
	}
	p{
		position: absolute;
		right: 80px;
		letter-spacing: 0.5rem;
		color: $txtcolor;
		@include mq{
			position: static;
			letter-spacing: 0.2rem;
		}
	}
}

main{
	width: 100%;
}

#top_intro{
	background: $lightgray;
	padding: 60px 0;
	@include mq{
		padding: 40px 0;
	}
	.content{
		padding: 60px;
		width: 90%;
		max-width: 1100px;
		background: #fff;
		margin: 0 auto 0;
		position: relative;
		@include mq{
			padding: 30px;
			margin: 0 auto 0;
		}
		dl{
			dt{
				font-size: 3.6rem;
				font-size: 3rem;
			}
			dd{
				p{
					margin-top: 30px;
					@include mq{
						margin-top: 20px;
					}
				}
			}
		}
	}
}

#top_nav{
	.content{
		background: #fff;
		max-width: 1100px;
		width: 90%;
		margin: 0 auto;
		padding: 60px 0;
		@include mq{
			padding: 40px 0;
		}
		h2{
			font-size: 3.6rem;
			margin-bottom: 30px;
			@include mq{
				font-size: 3rem;
				margin-bottom: 20px;
			}
		}
		.top_nav_box{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			a{
				width: 32.5%;
				padding: 40px;
				border: 1px solid $txtcolor;
				margin-bottom: 1%;
				display: flex;
				align-items: center;
				@include mq{
					width: 100%;
					padding: 5%;
					margin-bottom: 3%;
				}
				&:hover{
					background: $txtcolor;
					color: #fff;
				}
				dl{
					text-align: center;
					margin: 0 auto;
					dt{
						margin-bottom: 10px;
						img{
							width: 20%;
							@include mq{
								width: 10%;
							}
						}
					}
					dd{
						font-size: 2rem;
						@include mq{
							font-size: 1.6rem;
						}
						&:nth-child(3){
							font-size: 1.4rem;
							@include mq{
								font-size: 1.2rem;
							}
						}
					}
				}
			}
		}
		.top_nav_box_full{
			a{
				width: 100%;
				padding: 40px;
				border: 1px solid $txtcolor;
				margin-bottom: 1%;
				display: flex;
				align-items: center;
				@include mq{
					padding: 5%;
				}
				&:hover{
					background: $txtcolor;
					color: #fff;
				}
				dl{
					text-align: center;
					margin: 0 auto;
					dt{
						margin-bottom: 10px;
						img{
							width: 10%;
						}
					}
					dd{
						font-size: 2rem;
						@include mq{
							font-size: 1.6rem;
						}
						&:nth-child(3){
							font-size: 1.4rem;
							@include mq{
								font-size: 1.2rem;
							}
						}
					}
				}
			}
		}
	}
}

#schedule{
	padding: 60px 0;
	@include mq{
		padding: 40px 0;
	}
	.content{
		width: 90%;
		max-width: 1100px;
		margin: 0 auto;
		#audition{
			padding-bottom: 60px;
			@include mq{
				padding-bottom: 40px;
				padding-top: 40px;
			}
		}
		#extra{
			padding-bottom: 60px;
			@include mq{
				padding-bottom: 40px;
				padding-top: 40px;
			}
		}
		h3{
			font-size: 2.4rem;
			margin-bottom: 20px;
			@include mq{
				font-size: 1.8rem;
			}
			span{
				display: block;
				font-size: 1.3rem;
			}
		}
		h4{
			font-size: 2rem;
			margin-bottom: 20px;
			margin-top: 40px;
			@include mq{
				font-size: 1.6rem;
			}
		}
		p{
			margin-bottom: 30px;
			@include mq{
				margin-bottom: 20px;
			}
		}
		dl{
			padding: 10px 30px;
			border-bottom: 1px dashed $txtcolor;
			@include mq{
				padding: 10px 0;
			}
			dt{
				font-size: 	1.8rem;
				@include mq{
					font-size: 1.6rem;
					margin-bottom: 10px;
				}
			}
			dd{
				font-size: 1.4rem;
				@include mq{
					font-size: 1.3rem;
				}
				&.audition_cast{
					span{
						font-weight: bold;
						display: block;
					}
				}
			}
		}
	}
}

#story{
	padding: 60px 0;
	@include mq{
		padding: 40px 0;
	}
	.content{
		width: 90%;
		max-width: 1100px;
		margin: 0 auto;
		p{
			margin-top: 30px;
			@include mq{
				margin-top: 20px;
			}
		}
	}
}

#staff{
	padding: 60px 0;
	@include mq{
		padding: 40px 0;
	}
	.content{
		width: 90%;
		max-width: 1100px;
		margin: 0 auto;
		dl{
			padding: 10px 30px;
			border-bottom: 1px dashed $txtcolor;
			@include mq{
				padding: 10px 0;
			}
			dt{
				font-size: 	1.8rem;
				@include mq{
					font-size: 1.6rem;
					margin-bottom: 10px;
				}
			}
			dd{
				font-size: 1.4rem;
				@include mq{
					font-size: 1.3rem;
				}
				&.staffBold{
					span{
						font-weight: bold;
						display: block;
					}
				}
			}
		}
	}
}

#cast{
	padding: 60px 0;
	@include mq{
		padding: 40px 0;
	}
	.content{
		width: 90%;
		max-width: 1100px;
		margin: 0 auto;
		ul{
			li{
				width: 100%;
				display: flex;
				align-content: center;
				justify-content: space-between;
				padding: 0 5% 30px;
				margin-bottom: 30px;
				border-bottom: 1px dashed $txtcolor;
				&:last-child{
					padding-bottom: 0;
					margin-bottom: 0;
					border-bottom: none;
				}
				@include mq{
					display: block;
				}
				figure{
					width: 30%;
					@include mq{
						width: 100%;
						margin-bottom: 20px;
					}
				}
				dl{
					width: 65%;
					display: flex;
    				flex-flow: column;
    				justify-content: center;
					@include mq{
						width: 100%;
					}
					dt{
						font-size: 2.4rem;
						@include mq{
							font-size: 2rem;
						}
						span{
							font-size: 1.8rem;
							margin-left: 20px;
							@include mq{
								font-size: 1.4rem;
								margin-left: 0;
								display: block;
							}
						}
					}
					dd{
						margin-top: 20px;
						@include mq{
							margin-top: 15px;
						}
					}
				}
			}
		}
	}
}