@charset "utf-8";
/*------------------------------------------------------------
	書式設定
------------------------------------------------------------*/
/* テキストの位置 */
.taLeft { text-align: left !important; }
.taCenter { text-align: center !important; }
.taRight { text-align: right !important; }
.vaTop { vertical-align: top !important; }
.vaMiddle { vertical-align: middle !important; }

/* フォントの大きさ（プラス） */
.fsP1 { font-size: 1.08em !important; }
.fsP2 { font-size: 1.16em !important; }
.fsP3 { font-size: 1.24em !important; }
.fsP4 { font-size: 1.32em !important; }
.fsP5 { font-size: 1.4em !important; }

/* フォントの大きさ（マイナス） */
.fsM1 { font-size: 0.92em !important; }
.fsM2 { font-size: 0.84em !important; }
.fsM3 { font-size: 0.76em !important; }
.fsM4 { font-size: 0.68em !important; }
.fsM5 { font-size: 0.6em !important; }

/* フォントの太さ */
.fwNormal { font-weight: normal !important; }
.fwBold { font-weight: bold !important; }

/*------------------------------------------------------------
	微調整用クラス（※多用しないこと）
------------------------------------------------------------*/
.mt0 { margin-top: 0 !important; }
.mb0 { margin-bottom: 0 !important; }

/*------------------------------------------------------------
	汎用スタイル
------------------------------------------------------------*/
	* html .clearfix {
		zoom: 1;
	}

	*+html .clearfix {
		zoom: 1;
	}

.clearfix:after {
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}

img {
	vertical-align: top;
}

#caution-orientation {
	display: none;
}

#main .mainVisul {
	position: relative;
}

#main .mainVisul .page {
	width: 100px;
	height: 63px;
	position: absolute;
	right: 20px;
	top: 102px;
	z-index: 100;
	background: url(../../img/common/line.png) no-repeat 30px bottom;
}

#main .mainVisul .page .total {
	position: absolute;
	right: 0;
	bottom: 0;
}

#main .mainVisul .prev {
	margin-top: -24px;
	position: fixed;
	left: 20px;
	top: 50%;
}

#main .mainVisul .next {
	margin-top: -24px;
	position: fixed;
	right: 20px;
	top: 50%;
}

#main .mainVisul li {
	width: 100%;
	height: 100%;
	float: left;
	position: relative;
}

#main .mainVisul li > img {
	display: none;
}

#main .mainVisul li img {
	width: 100%;
}

#main .mainVisul li .text {
	position: absolute;
}

.popBox {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	display: none;
}

.popBox .cover {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #000;
	z-index: 1000;
}

.popBox .videoBox {
	margin: 0 auto;
	width: 50%;
	max-width: 640px;
	position:relative;
	z-index: 1500;
	text-align: center;
}

.popBox .videoBox .close {
	padding-top: 30px;
}

.popBox .videoBox .close02 {
	position: absolute;
	right: -80px;
	top: 100px;
}

.popBox .video {
	position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
	width: 100%;
}

.popBox .video iframe {
	position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media only screen and (max-device-width: 768px) and (orientation: portrait) {
	#container {
		position: relative;
	}
	
	#caution-orientation {
		width: 100%;
		height: 100%;
		display: block;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 101;
		background: #000 url(../../img/common/caution-orientation.gif) no-repeat center center;
		background-size: 90% auto;
	}
	
	#gHeader {
		display: none !important;
	}
	
	#main {
		display: none !important;
	}
	
	#gFooter {
		display: none !important;
	}
	
	#menu {
		display: none !important;
	}

}

@media all and (min-width: 321px) and (max-width: 768px)  {
	#main .mainVisul .page {
		top: 50px;
		right: 10px;
	}

	#main .mainVisul .prev,
	#main .mainVisul .next {
		top: 55%;
	}
	
	#main .mainVisul .prev img,
	#main .mainVisul .next img {
		width: 24px;
	}
	
	#main .mainVisul .page {
		width: 50px;
		padding-bottom: 10px;
		height: 30px;
		background-position: -10px top;
	}
	
	#main .mainVisul .page .num {
		width: 30px;
	}
	
	#main .mainVisul .page .total {
		width: 16px;
	}
	
	.popBox .videoBox .close {
		padding-top: 15px;
	}
	
	.popBox .videoBox .close img {
		width: 61px;
	}
	
	.popBox .videoBox .close02 {
		top: 45px;
	}
	
	.popBox .videoBox .close02 img {
		width: 25px;
	}
	
}