@charset "UTF-8";

body{
background:#fff url(../system/images/bg02.jpg) repeat;
}
#system-bg-h{
	position:absolute;
	width: 100%;
	height: 420px;
	background: url(../system/images/bg01.jpg) center top no-repeat;
}
@media screen and (min-width: 1281px) {
	#system-bg-h{
		background-size:100% auto;
	}
}
.header__3ds{
	top:11px;
	right:10px;
}
/* ========================================
	contents
======================================== */
.h1-title {
	padding-top: 60px;
	margin-bottom: 58px;
	text-align: center;
	position: relative;
}
.movie-advance {
	width: 600px;
	height: auto;
	overflow: hidden;
}
.movie-advance .system-mv{
	margin-left: -20px;
}
#yt01 .ytp-thumbnail-overlay-image {
	-moz-background-size: 600px auto !important;
	-webkit-background-size: 600px auto !important;
	background-size: 600px auto !important;
}

#area1, #area2, #area4, #area6{
	position: relative;
	width: 960px;
	margin:0 auto;
}
#area1 #system-txt01, #area4 #system-txt04{
	position: absolute;
	top:60px;
	left:17px;
	width: 402px;
	height: 476px;
	z-index: 1;
}
#in-area1 {
	margin-left: 360px;
}
#in-area1 .system-mv, #area6 .system-mv{
	margin-bottom: 40px;
}
#in-area1 dl{
	margin-left: 120px;
	margin-bottom: 100px;
}
#in-area1 dt{
	margin-bottom: 10px;
}
#area2 #system-txt02, #area6 #system-txt05{
	position: absolute;
	top:60px;
	left:567px;
	width: 402px;
	height: 476px;
}
#in-area2{
	width: 800px;
	padding:60px 0 40px 50px;
	margin-bottom: 45px;
	background:#333333 url(../system/images/bg03.jpg) repeat;
}
#system-img01{
	margin:0 0 36px 33px;
}
#in-area2 dt, #in-area2 dd, #area3 dt, #area3 dd{
	margin-bottom: 18px;
}

.movie-battle {
	width: 495px;
	height: auto;
	overflow: hidden;
}
.movie-battle .system-mv{
	margin-left: -17px;
}
.movie-battle iframe {
	width: 528px;
	height: 296px;
}

#yt02{
	margin-bottom: 35px;
}
#system-fig01{
	width: 465px;
	overflow: hidden;
	background:url(../system/images/system_img03_bg.png) no-repeat center 100px;
}
#system-fig01 dl{
	width: 201px;
	float: left;
}
#system-fig01 dl:nth-child(2){
	float: right;
}
#system-fig01 dt{
	margin-bottom: 10px;
	text-align: center;
}
#system-fig01 dd{
	margin-bottom: 15px;
}
#area3{
	width: 860px;
	margin:0 auto;
}
#in-area3{
	width: 860px;
	overflow: hidden;
	margin-bottom: 58px;
}
#in-area3 .area3-point{
	position: relative;
	width: 260px;
	float: left;
	margin-right: 40px;
}
.area3-point-slider{
	margin-bottom: 10px;
}
#in-area3 .area3-point:nth-child(3){
	margin-right: 0;
}

#in-area3 li a {
	display: block;
	position: relative;
	width: 260px;
	height: 156px;
}
.ico-zoom{
	bottom:0;
	right:0;
	width: 50px;
	height: 50px;
	position: absolute;
}
.no-js .area3-point-slider li {
	display: none;
}
.no-js .area3-point-slider li:first-child {
	display: block;
}
#in-area3 .bx-wrapper .bx-pager {
	top: 157px;
	padding-top: 0;
}
#in-area3 .bx-wrapper .bx-controls-direction a {
	top: 60px;
	z-index: 10;
	width: 22px;
	height: 35px;
	margin-top: 0;
}
#in-area3 .bx-wrapper .bx-controls-direction .bx-prev {
	left: 0;
	background: url(../system/images/icon_prev_off.png);
}
#in-area3 .bx-wrapper .bx-controls-direction .bx-prev:hover {
	background: url(../system/images/icon_prev_on.png);
}
#in-area3 .bx-wrapper .bx-controls-direction .bx-next {
	right: 0;
	background: url(../system/images/icon_next_off.png);
}
#in-area3 .bx-wrapper .bx-controls-direction .bx-next:hover {
	background: url(../system/images/icon_next_on.png);
}

#system-txt03{
	position: relative;
	width: 740px;
	height: 327px;
	margin: 0 auto 60px auto;
	background: url(../system/images/mira_bg.png) left top no-repeat;
}
.mira-copy {
	position: absolute;
	top: 37px;
	left: 45px;
}
.mira-text {
	position: absolute;
	top: 75px;
	left: 45px;
}
.mira-img {
	position: absolute;
	top: 132px;
	left: 46px;
	width: 666px;
	height: 167px;
}
.mira-img li{
	float: left;
	padding-right:32px;
	background:url(../system/images/ico_arr.png) no-repeat 208px 45px;
}
.mira-img li:last-child{
	padding-right:0;
}
#in-area3 .bx-wrapper {
	margin-bottom: 30px;
}

/* ========================================
	system
======================================== */
#system-bg {
	width: 100%;
	height: 412px;
	margin:60px 0;
	background:url(../system/images/bg05.jpg) no-repeat center center;
}
@media screen and (min-width: 1279px) {
	#system-bg {
		background-size:100% auto;
	}
}

/* ========================================
	area4
======================================== */
.movie-training {
	width: 600px;
	height: auto;
	margin-left: 360px;
	overflow: hidden;
}
.movie-training .system-mv {
	margin-left: -20px;
}
.movie-type {
	position: absolute;
	top: 165px;
	right: 90px;
	width: 350px;
	height: auto;
	overflow: hidden;
}
.movie-type .system-mv {
	margin-left: -12px;
	margin-right: -12px;
}
.movie-type iframe {
	width: 372px;
	height: 210px;
}

#in-area4{
	position: relative;
	width: 930px;
	padding: 40px 50px 25px 50px;
	margin-bottom: 50px;
	background: #b3aa6c url(../system/images/bg04.jpg) repeat;
}
#in-area4 dl{
	margin: 0 0 83px 438px;
}
#in-area4 dt{
	margin-bottom: 18px;
}

#system-fig02{
	margin-bottom: 50px;
	padding-bottom: 45px;
	background:url(../system/images/system_img07.png) no-repeat center bottom;
}
#system-fig02 li:first-child {
	margin-bottom: 29px;
}
#system-fig03 li{
	margin-bottom: 30px;
}
#area5{
	position: relative;
	width: 930px;
	margin-bottom: 90px;
	padding-left:50px;
}
#area5 dt, #area5 dd{
	margin-bottom: 18px;
}
#area5 .area5-slider-wrap{
	position: absolute;
	top: 0;
	right: 0;
	width: 360px;
	height: 216px;
}
.no-js .area5-slider li {
	display: none;
}
.no-js .area5-slider li:first-child {
	display: block;
}
#area5 .training-slide-text {
	position: absolute;
	top: 245px;
	right: 30px;
}

#area5 .bx-wrapper .bx-pager{
	top: 218px;
	padding-top: 0;
}
#area5 .bx-wrapper .bx-controls-direction a {
	top: 90px;
	z-index: 10;
	width: 22px;
	height: 35px;
	margin-top: 0;
}
#area5 .bx-wrapper .bx-controls-direction .bx-prev {
	left: 0;
	background: url(../system/images/icon_prev_off.png);
}
#area5 .bx-wrapper .bx-controls-direction .bx-prev:hover {
	background: url(../system/images/icon_prev_on.png);
}
#area5 .bx-wrapper .bx-controls-direction .bx-next {
	right: 0;
	background: url(../system/images/icon_next_off.png);
}
#area5 .bx-wrapper .bx-controls-direction .bx-next:hover {
	background: url(../system/images/icon_next_on.png);
}

.movie-exploration {
	width: 600px;
	height: auto;
	overflow: hidden;
}
.movie-exploration .system-mv{
	margin-left: -20px;
}

#area6 dl{
	margin-left:50px;
	padding-bottom: 80px;
}
#area6 dt{
	margin-bottom: 18px;
}
#area6 dd{
	padding-left:220px;
	padding-bottom: 18px;
	background:url(../system/images/system_img08.jpg) no-repeat left top;
}

/* ========================================
	modal
======================================== */
.modal {
	left: 50%;
	width: 410px;
	margin-top: 30px;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.modal-close__righttop {
	top: -65px;
	right: -75px;
}
.modal-contents {
	margin: 0;
}
.modal-slide li {
	border: #afa75f 5px solid;
}
.modal-contents .bx-wrapper .bx-controls-direction a {
	width: 50px;
	height: 100px;
	margin-top: -50px;
}
.modal-contents .bx-wrapper .bx-controls-direction .bx-prev {
	left: -75px;
	background: url(../common/icon_prev_off.png);
}
.modal-contents .bx-wrapper .bx-controls-direction .bx-prev:hover {
	background: url(../common/icon_prev_on.png);
}
.modal-contents .bx-wrapper .bx-controls-direction .bx-next {
	right: -75px;
	background: url(../common/icon_next_off.png);
}
.modal-contents .bx-wrapper .bx-controls-direction .bx-next:hover {
	background: url(../common/icon_next_on.png);
}