@charset "UTF-8";

/* ========================================
	common
======================================== */
body,
.l-contents{
	overflow-x: hidden;
}
body.is-hidden {
	overflow: hidden;
}
.l-wrapper {
	position: relative;
	width: 100%;
	min-width: 960px;
}
.l-contents {
	width: 100%;
	overflow: hidden;
	padding-bottom: 170px;
}
@media screen and (min-width: 1921px) {
	.l-contents {
		padding-bottom: 240px;
	}
}
.l-contents img,
.l-footer img{
	width: 100%;
	height: auto;
}
.no-fix-footer .l-contents {
	padding-bottom: 70px;
}
.u-left{
	float: left;
}
.u-right{
	float: right;
}

/* ========================================
	header
======================================== */
.l-logo-3ds {
	position: absolute;
	width: 10.78125%;/* 207 / 1920 * 100 */
	max-width: 210px;
	min-width: 105px;
	top: 0;
	right: 0;
	z-index: 5000;
}

/* ========================================
	footer
======================================== */
.l-footer {
	position: fixed;
	bottom: -300px;
	left: 0;
	width: 100%;
	transition: bottom 300ms;
	z-index: 8000;
}
.no-fix-footer .l-footer {
	position: relative;
	bottom: auto;
}
.l-footer.is-show {
	bottom: -70px;
}
.l-footer.is-show-bottom {
	bottom: 0;
}
.no-js .l-footer {
	bottom: 0;
}
.l-footer_nav {
	position: relative;
	background: url(../images/common/footer_bg01.png) center top no-repeat;
	background-size: cover;
	padding: 3% 0 0.7% 0;
}
.l-footer_nav .Inner,
.l-footer_info .Inner{
	position: relative;
	width: 66.6666666%;/* 1280 / 1920 * 100 */
	margin: 0 auto;
	min-width: 960px;
	max-width: 2000px;
}
.l-footer_logo {
	position: absolute;
	width: 12.89%;/* 165 / 1280 * 100 */
	top: 10%;
	left: -0.5%;
}
.l-gnav {
	width: 87.8125%;/* 1124 / 1280 * 100 */
	margin-left: 12.1875%; /* 156 / 1280 * 100 */
}
.l-gnav li {
	position: relative;
	float: left;
	width: 22.33%;/* 251 / 1124 * 100 */	
}
.l-gnav li:not(:first-child){
	margin-left: -3%;
}
.l-gnav li .is-new {
	position: absolute;
	top: 0;
	left: 14.34262%;
	width: 32.66932%;
}
.l-gnav li:nth-child(even) .is-new {
	top: 7%;
}
.is-new:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding-top: 51.2195122%;
	background: url(../images/common/icon_new.png) 0 0 no-repeat;
	background-size: contain;
}
.l-footer_pagetop {
	position: absolute;
	width: 9%;/* 108 / 1190 * 100 */
	top: -120%;
	right: 0;
}
.l-footer_info {
	background: #000 url(../images/common/footer_bg02.jpg) center top no-repeat;
	background-size: cover;
}
.l-footer_official {
	width: 325px;
	height: 70px;
	margin: 0 auto !important;
	padding-top: 3.5%;
	box-sizing: border-box;
	overflow: hidden;
	text-align: center;
}
.l-footer_official li {
	font-size: 12px;
	float: left;
}
.l-footer_official li a{
	color: #fff;
}
.l-footer_official li a:hover{
	text-decoration: underline;
}
.l-footer_official li:not(:last-child) {
	margin-right: 15px;
	padding-right: 15px;
	border-right: 1px solid #fff;
}
@media screen and (min-width: 1921px) {
	.l-footer {
		bottom: -400px;
	}
	.l-footer_official {
		padding-top: 1.5%;
	}
}

/* ========================================
	modal
======================================== */
[data-modallink],
[data-modalchange] {
	cursor: pointer;
}
[data-modalbody] {
	visibility: hidden;
	opacity: 0;
	transition: 200ms;
}
[data-modalbody].is-show {
	visibility: visible;
	opacity: 1;
}
.l-modal {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9500;
	width: 100%;
	height: 100%;
}
.l-modal_bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.9);
	cursor: pointer;
}
.l-modal_contents {
	position: relative;
	z-index: 20;
	width: 100%;
	height: 100%;
	min-width: 960px;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
}
.l-modal_movie {
	position: relative;
	width: 648px;
	margin: 0 auto;
}
.l-modal_close {
  position: absolute;
  top: -85px;
  right: 5px;
	cursor: pointer;
}

/** THEME
===================================*/
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  position: absolute;
  bottom: -30px;
  width: 100%;
}
/* PAGER */
.bx-wrapper .bx-pager {
  text-align: center;
}
.bx-wrapper .bx-pager.bx-default-pager a {
  text-indent: -9999px;
  display: block;
  outline: 0;
}
.bx-wrapper .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
  display: inline-block;
  vertical-align: bottom;
  *zoom: 1;
  *display: inline;
}
.bx-wrapper .bx-pager-item {
  font-size: 0;
  line-height: 0;
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
  left: 10px;
}
.bx-wrapper .bx-next {
  right: 10px;
}
.bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 50%;
  outline: 0;
  text-indent: -9999px;
  z-index: 5000;
}
.bx-wrapper .bx-controls-direction a.disabled {
  display: none;
}

/* ========================================
	animation
======================================== */
.animation-ghostR-type1 {
	-webkit-animation: ghost-move-to-right-type1 4s ease-in-out infinite;
	animation: ghost-move-to-right-type1 5s ease-in-out infinite;
}
.animation-ghostL-type1 {
	-webkit-animation: ghost-move-to-left-type1 4s ease-in-out infinite;
	animation: ghost-move-to-left-type1 5s ease-in-out infinite;
}

@-webkit-keyframes ghost-move-to-right-type1 {
    0% {
		opacity: 0;
		-webkit-transform: translateX(-100px);
		transform: translateX(-100px);
    }
    50% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
    }
	100% {
		opacity: 0;
		-webkit-transform: translateX(-100px);
		transform: translateX(-100px);
    }
}
@keyframes ghost-move-to-right-type1 {
    0% {
		opacity: 0;
		-webkit-transform: translateX(-100px);
		transform: translateX(-100px);
    }
    50% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
    }
	100% {
		opacity: 0;
		-webkit-transform: translateX(-100px);
		transform: translateX(-100px);
    }
}
@-webkit-keyframes ghost-move-to-left-type1 {
    0% {
		opacity: 0;
		-webkit-transform: translateX(100px);
		transform: translateX(100px);
    }
    50% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
    }
	100% {
		opacity: 0;
		-webkit-transform: translateX(100px);
		transform: translateX(100px);
    }
}
@keyframes ghost-move-to-left-type1 {
    0% {
		opacity: 0;
		-webkit-transform: translateX(100px);
		transform: translateX(100px);
    }
    50% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
    }
	100% {
		opacity: 0;
		-webkit-transform: translateX(100px);
		transform: translateX(100px);
    }
}

.animation-ghostR-type2 {
	-webkit-animation: ghost-move-to-right-type2 6s ease-in-out infinite;
	animation: ghost-move-to-right-type2 5s ease-in-out infinite;
}
.animation-ghostL-type2 {
	-webkit-animation: ghost-move-to-left-type2 6s ease-in-out infinite;
	animation: ghost-move-to-left-type2 5s ease-in-out infinite;
}

@-webkit-keyframes ghost-move-to-right-type2 {
    0% {
		opacity: 0;
		-webkit-transform: translateX(-150px);
		transform: translateX(-150px);
    }
    50% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
    }
	100% {
		opacity: 0;
		-webkit-transform: translateX(-150px);
		transform: translateX(-150px);
    }
}
@keyframes ghost-move-to-right-type2 {
    0% {
		opacity: 0;
		-webkit-transform: translateX(-150px);
		transform: translateX(-150px);
    }
    50% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
    }
	100% {
		opacity: 0;
		-webkit-transform: translateX(-150px);
		transform: translateX(-150px);
    }
}
@-webkit-keyframes ghost-move-to-left-type2 {
    0% {
		opacity: 0;
		-webkit-transform: translateX(150px);
		transform: translateX(150px);
    }
    50% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
    }
	100% {
		opacity: 0;
		-webkit-transform: translateX(150px);
		transform: translateX(150px);
    }
}
@keyframes ghost-move-to-left-type2 {
    0% {
		opacity: 0;
		-webkit-transform: translateX(150px);
		transform: translateX(150px);
    }
    50% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
    }
	100% {
		opacity: 0;
		-webkit-transform: translateX(150px);
		transform: translateX(150px);
    }
}