@charset "UTF-8";
/*--------------------------------
TITLE: 映画「ミスミソウ」公式サイト
ＵＰＤＡＴＥ： 2017.12.25
--------------------------------*/
a:focus { outline: none; }
img { width: 100%; }
html { font-size: 62.5%; }

body {
	width: 100%;
	font-family: "游明朝", "Yu Mincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 14px;
	font-size: 1.4rem;
	background: #000;
}

/* HEADER ----------------------*/
header {
	position: relative;
	width: 100vw;
	height: 131.25vw;
	background: #fff;
	/*background: url(http://misumisou-movie.com/sp/img/top/mainVisual.jpg) no-repeat 0 0;
	background-size: 100% auto;*/
}
	.visual01,
	.visual02 {
		position: absolute;
		width: 100vw;
		height: 131.25vw;
		top: 0;
		left: 0;
	}
	/* VISUAL 01*/
	.visual01 {
		background: url(http://misumisou-movie.com/sp/img/top/mainVisual02.jpg) no-repeat 0 0;
		background-size: 100% auto;		
	}
		.visual01 h1 {
			position: absolute;
			width: 71.7vw;
			bottom: 4vw;
			left: 18vw;
			opacity: 0;
		}
		.visual01 .top_copy02 {
			position: absolute;
			width: 4.5vw;
			top: 6.25vw;
			right: 4.7vw;
		}
			.top_copy02_01,
			.top_copy02_02 {
				opacity: 0;
			}
	/* VISUAL 02 */
	.visual02 {
		display: none;
		background: url(http://misumisou-movie.com/sp/img/top/mainVisual.jpg) no-repeat 0 0;
		background-size: 100% auto;
	}
		.visual02 h1 {
			position: absolute;
			width: 14.1vw;
			top: 7.8vw;
			left: 50%;
			-webkit-transform: translate(-50%);
			   -moz-transform: translate(-50%);
			    -ms-transform: translate(-50%);
			     -o-transform: translate(-50%);
			        transform: translate(-50%);
		}
			.visual02 h1 p {
				opacity: 1;
			}
		.visual02 .top_copy01 {
			position: absolute;
			width: 4.5vw;
			top: 1.6vw;
			right: 4.6vw;
		}
			.top_copy01_01,
			.top_copy01_02,
			.top_copy01_03 {
				opacity: 1;
			}

.roadshow {
	padding: 5.9% 0 6%;
}
/* TRAILERE -----------------------*/
.trailer {
	width: 90.6%;
	margin: 0 auto;
}
	.trailer h2 {
		width: 100%;
		margin: 0 0 4.7%;
	}
	.trBox {
		position: relative;
		padding-top: 56.25%;
	}
		.trBox iframe {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			right: 0;
		}
/* TOP MENU -------------------------*/
.topNav {
	width: 90.6%;
	margin: 12.5% auto;
}
	.topNav ul {
		width: 100%;
		letter-spacing: -.4em;
	}
	.topNav li {
		display: inline-block;
		width: 43vw;
		margin: 0 0 3vw;
		letter-spacing: normal
	}
	.topNav li:nth-child(odd) {
		margin: 0 2.8vw 3vw 0;
	}
/* BANNER 01 -------------------------*/
.bnr_area01 {
	width: 90.6vw;
	margin: 0 auto 11.7vw;
}
	.bnr_area01 p {
		width: 100%;
		margin: 0 0 3vw;
	}
	.bnr_area01 p:last-child {
		margin: 0;
	}
/* BANNER 02 -------------------------*/
.bnr_area02 {
	width: 100%;
	margin: 0 0 12.5vw;
	letter-spacing: -.4em;
	text-align: center;
}
	.bnr_area02 p {
		display: inline-block;
		width: 45vw;
		margin: 0 0.7vw 1.4vw;
		letter-spacing: normal;
	}
/* AWARD ---------------------------*/
.award {
	width: 100%;
	margin: 0 auto 6vw;
	letter-spacing: -.4em;
	text-align: center;
}
	.award p {
		display: inline-block;
		width: 25%;
		margin: 0 1vw 2.5vw;
	}
	.award p:nth-child(1),
	.award p:nth-child(2) {
		display: inline-block;
		width: 35%;
		margin: 0 2.5vw 2.5vw;
	}