@charset "utf-8";

/* PC向けおよび大型タブレット向けのレイアウトの指定：1920以上 */
@media only screen and (min-width:1921px) {
	header {
		max-width: 1980px;
		margin: 0 auto; 
		max-height: 800px;
		background-position: center 50%;
	}

	#introduction {
    max-width: 1980px;
    margin: 0 auto; 
	}

	header h1 {
		max-width: 590px;
	}
}

/* PC向けおよび大型タブレット向けのレイアウトの指定：769px～960px */
@media only screen and (min-width:1px) and (max-width:960px){
	/*==========================================
	body
	===========================================*/
	body {
		min-width: 100%;
		text-align: center;
		width: 100%;
	}

	/*トグルボタンのスタイルを指定*/
	.Toggle {
		display: block;
		position: fixed;    /* bodyに対しての絶対位置指定 */
		right: 0px;
		top: 0px;
		width: 60px;
		height: 60px;
		cursor: pointer;
		z-index: 3;
		background-color: hsla(0,0%,0%,0.48);
		display: flex;
		flex-direction:column;
		justify-content: center;
		align-items: center;
	}
	
	.Toggle span {
		display: block;
		position: absolute;
		width: 35px;
		border-bottom: solid 4px #fff;
		-webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
		-moz-transition: .35s ease-in-out;		/*変化の速度を指定*/
		transition: .35s ease-in-out;
		top: 0px;
	}
	
	.Toggle span:nth-child(1) {
		top: 18px;
	}
	
	.Toggle span:nth-child(2) {
		top: 28px;
	}
	
	.Toggle span:nth-child(3) {
		top: 38px;
	}
 
	/* 最初のspanをマイナス45度に */
	.Toggle.active span:nth-child(1) {
		top: 28px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	
	/* 2番目と3番目のspanを45度に */
	.Toggle.active span:nth-child(2),
	.Toggle.active span:nth-child(3) {
		top: 28px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	/*==========================================
	Other
	===========================================*/	
	header h1 {
        max-width: 550px;
        margin-top: calc(6vw - 20px);
        width: calc(55vh + 10px);
	}
}


@media only screen and (max-width:768px){
	/*==========================================
	Other
	===========================================*/
	#titleber {
		max-width: 347px;
		height: 40px;
	}

	header p {
		font-size: 1.2em;
	}
		
	header aside {
		position: absolute;
		right: 10%;
		bottom: 20%;
		max-width: 60px;
		width: 100%;
	}
	
}


@media only screen and (max-width: 470px){
	/*==========================================
	幅470px以下から ヘッダー等微調節
	===========================================*/
	#movie ul li {
		font-size: 0.8em;
	}
	#news dl{
		text-align: left;
	}

	#news dl dt {
		font-size: 1em;
	}

	#news dl dd {
		font-size: 1em;
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.spbr {
		display: inherit;
	}

	.titleStyle h2 {
		font-size: 2em;
	}

	#news dl dt {
		font-size: 0.9em;
	}

	#news dl dd {
	font-size: 0.9em;
	}

	#staff ul li {
		font-size: 0.8em;
	}

	.cast_comm p {
		font-size: 1em;
	}

	.name h3 {
		font-size: 1.3em;
	}

	.name p {
		font-size: 1.3em;
	}

	.list li {
		font-size: 1em;
	}

	.story_comm p {
		font-size: 0.9em;
		text-align: left;
	}

	.story_comm p br {
		display: none;
	}

	.intro_comm p {
		font-size: 0.9em;
	}

	.intro_comm p strong {
		font-size: 1em!important;
	}

	#staff ul {
		max-width: 100%;
		width: 100%;
	}

	.cast_comm {
		max-width: 90%;
		margin-bottom: 80px;
	}

	#cast section figure,
	#staff section figure {
		max-width:  65%;
	}

	#introduction {
		background-image: url(../images/intro_img.jpg);
		background-repeat: no-repeat;
		background-position: left bottom;
		background-size: cover;
		padding-top: 60px;
		padding-bottom: 60px;
	}

	header {
		background-image: url(../images/main_img.jpg);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: cover;
		position: relative;
		height: 100vh;
	}
	

	header aside {
		display: block;
		position: absolute;
		right: 5%;
		bottom: 20%;
		max-width: 50px;
		width: 100%;
	}
	
	#titleber {
		max-width: 240px;
		height: 28px;
	}

	header p {
		font-size: 0.78em;
	} 

	.spImg {
		display: inherit;
	}

	.pcImg {
		display: none;
	}

	header h1 {
		margin-top: 10%;
		max-width: 96%;
	}
	
	.NavMenu ul {
		max-width: 70%;
		margin-left: 20px;
		margin-right: 80px;
		margin-top: 15%;
		margin-bottom: 15%;
	}

	.NavMenu ul li {
		font-size: 1.1em;
	}

}

@media only screen and (max-width: 320px){
	/*==========================================
	幅320px以下から ヘッダー等微調節
	===========================================*/
	#titleber {
		max-width: 200px;
		height: 25px;
	}

	header p {
		font-size: 0.8em;
	}
}