/* main visual
==========================================*/
#lounge.modeSP .mainVisualWrap > div:nth-of-type(3) {
	background-position: -1060px center;
	background-image: url(/img/lounge/mainvisual_sp.jpg);
}
#lounge-bar .mainVisualWrap > div:nth-of-type(3) {
	background-image: url(/img/lounge/bar/mainvisual.jpg);
}
#lounge-bar.modeSP .mainVisualWrap > div:nth-of-type(3) { background-position: -1060px center; }

#lounge-room101 .mainVisualWrap > div:nth-of-type(3) {
	background-image: url(/img/lounge/room101/mainvisual.jpg);
}
#lounge-room101.modeSP .mainVisualWrap > div:nth-of-type(3) { background-position: -1540px center; }



/* dirNav
==========================================*/
.dirNav { margin-top: 150px; }
.dirNav li:nth-of-type(1) { background-image: url(/img/lounge/nav_lounge.jpg); }/*/img/lounge/nav01.jpg*/
.dirNav li:nth-of-type(2) { background-image: url(/img/lounge/nav_lounge-bar.jpg); }
.dirNav li:nth-of-type(3) { background-image: url(/img/lounge/nav_lounge-room101.jpg); }
/* sound
==========================================*/
.sound {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.sound .sound-on {
    color: #fff;
    pointer-events: none;
}
.sound .sound-off {
    color: #999;
    pointer-events: auto;
}
.sound.mute .sound-on {
    color: #999;
    pointer-events: auto;
}
.sound.mute .sound-off {
    color: #fff;
    pointer-events: none;
}
.modePC .sound a {
    font-size: 9px;
}
/* Sound
==========================================*/
.sound {
	color: #fff;
}
 .modePC .sound {
	position: absolute;
	bottom: 25px;
	right: 60px;
	z-index: 11;
}
 .modeSP .sound {
	display: none;
}

.sound svg {
	fill: #fff;
}
.modePC .sound svg {
	width: 18px;
	height: 18px;
	margin-right: 10px;
}

.sound a{
	color: #999;
	font-weight: bold;
}
.modePC .sound a{}
.modeSP .sound a{}

.sound a.active{
	color: #fff;
}

.sound span{
	color: #fff;
}
.modePC .sound span{
	padding: 0 10px;
}
.modeSP .sound span{}

/* Scroll
==========================================*/
.modePC .scroll {
	width: 1px;
	height: 54px;
	position: absolute;
	bottom: 25px;
	left: 60px;
	z-index: 9;
	background-color: #999;
}
.modeSP .scroll {
	display: none;
}

.modePC .scroll-pointer {
	width: 9px;
	height: 9px;
	position: absolute;
	top: -4px;
	left: -4px;
	animation-name: moveScrollPointer;
	animation-duration: 1.2s;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.modePC .scroll-pointer::before {
	animation-name: moveScrollPointerIn;
	animation-duration: 1.2s;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	content: "";
	display: block;
	width: 9px;
	height: 9px;
	background-color: rgb(180, 180, 180);
	border-radius: 50%;
}
@-webkit-keyframes moveScrollPointer {
	0% { -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0) }
	100% { -webkit-transform:translate3d(0,54px,0);transform:translate3d(0,54px,0) }
}
@keyframes moveScrollPointer {
	0% { -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0) }
	100% { -webkit-transform:translate3d(0,54px,0);transform:translate3d(0,54px,0) }
}
@-webkit-keyframes moveScrollPointerIn {
	0% { -webkit-transform:scale(0);transform:scale(0) }
	10% { -webkit-transform:scale(1);transform:scale(1) }
	65% { -webkit-transform:scale(1);transform:scale(1) }
	100% { -webkit-transform:scale(0);transform:scale(0) }
}
@keyframes moveScrollPointerIn {
	0% { -webkit-transform:scale(0);transform:scale(0) }
	10% { -webkit-transform:scale(1);transform:scale(1) }
	65% { -webkit-transform:scale(1);transform:scale(1) }
	100% { -webkit-transform:scale(0);transform:scale(0) }
}
/* box09  Archive Slider
==========================================*/
.box09 {
	background-color: #ececec;
}
.modePC .box09 {
	margin-top: 130px;
}
.modeSP .box09 {
	margin-top: 170px;
	padding: 90px 30px;
}
.box09 > div {
	position: relative;
}
.modePC .box09 > div {
	margin: auto;
	width: 1180px;
	height: 725px;
	overflow: hidden;
}
.modePC .box09 > div > h2 {
	position: absolute;
	top: 65px;
	left: 115px;
	width: 960px;
}
.modeSP .box09 > div > h2 {
	margin-bottom: 66px;
}
.modePC .box09 .bx-wrapper {
	width: 1140px !important; /* slide width * 3 + margin *3 ( 340*3+40*3 ) */
	position: absolute !important;
	top: 205px;
	left: 50%;
	margin-left: -550px !important; /* ( slide width * 3 + margin * 2 ) / 2 [(340*3+40*2)/2] */
}

.modePC .box09 .bx-viewport {
	overflow: visible !important;
}

.modePC .box09 .u1 {
	height: 395px;
	margin: 0 auto;
	z-index: 2;
}
.modeSP .box09 .u1 {
	width: 690px;
	z-index: 2;
}

.box09 .u2 {
	height: 0;
	position: absolute;
	z-index: 2;
}
.modePC .box09 .u2 {
	width: 1180px;
	left: 50%;
	margin: -40px 0 0 -590px;
	top: 375px;
}
.modeSP .box09 .u2 {
	width: 750px;
	left: 0;
	margin: -30px 0 0 -30px;
	top: 390px;
}

.box09 .u2 li { display: inline-block; }
.box09 .u2 li:nth-of-type(1) { float: left; }
.box09 .u2 li:nth-of-type(2) { float: right; }

.box09 .u2 a {
	text-align: center;
	display: block;
	background-color: #ececec;
}
.modePC .box09 .u2 a { width: 40px; height: 40px; }
.modeSP .box09 .u2 a { width: 60px; height: 60px; }

.modePC .box09 .u2 svg { width: 17px; height: 10px; margin-top: 15px; }
.modeSP .box09 .u2 svg { width: 23px; height: 13px; margin-top: 23px; }

.box09 .event:after {
	background-color: #fff;
}
.modePC .box09 .btnA {
	position: absolute;
	top: 620px;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
}
.modeSP .box09 .btnA {
	margin-top: 90px;
}
.modeSP .box09 .event .imgWrap2 {
    height: 354px;
}
.modeSP .box09 .event .imgWrap2 img {
    height: 100%;
}
/* Lounge Event Box
==========================================*/
.modePC .event {
	width: 340px;
	height: 340px;
}
.modeSP .event {
	margin-bottom: 60px;
	height: 552px;
}
.event:after {
	position: absolute;
	bottom: 0;
	display: block;
	content: "";
	background: #ededed;
	z-index: 1;
	width: 100%;
}
.modePC .event a {
	width: 340px;
	height: 340px;
}
.modePC .event a:hover {
	opacity: 1;
}
.modePC .event:after {
	height: 170px;
}
.modeSP .event:after {
	height: 314px;
}
.event .imgWrap2 {
	position: relative;
	overflow: hidden;
	margin: auto;
	z-index: 2;
}
.modePC .event .imgWrap2 {
	transition: transform .2s ease-in-out;
}
.modePC .event:hover .imgWrap2 {
	transition: transform .2s ease-in-out;
	transform: translateY(-10px);
}
.modePC .event .imgWrap2 {
	width: 295px;
	height: 240px;
}
.modeSP .event .imgWrap2 {
	width: 640px;
	height: 354px;
}
.event .date {
	z-index: 3;
	position: absolute;
	text-align: center;
}
.modePC .event .date {
	top: 255px;
	left: 20px;
	width: 69px;
}
.modeSP .event .date {
	top: 400px;
	left: 80px;
	width: 124px;
}
.modePC .event a:hover .date {
	opacity: .6;
}
.modePC .event .date p:nth-of-type(1) { font-size: 11px; }
.modeSP .event .date p:nth-of-type(1) { font-size: 15px; }
.modePC .event .date p:nth-of-type(2) { font-size: 20px; }
.modeSP .event .date p:nth-of-type(2) { font-size: 37px; }
.modePC .event .date p:nth-of-type(3) { font-size: 11px; }
.modeSP .event .date p:nth-of-type(3) { font-size: 15px; }
.event h2 {
	z-index: 3;
	position: absolute;
}
.modePC .event h2 {
	font-size: 14px;
	font-weight: bold;
	line-height: 1.7;
	top: 255px;
	left: 110px;
	width: 206px;
	height: 20px;
}
.modeSP .event h2 {
	font-size: 28px;
	font-weight: bold;
	line-height: 1.7;
	top: 410px;
	left: 260px;
	width: 400px;
	height: 100px;
}
.modePC .event a:hover h2 {
	opacity: .6;
}
.event .imgWrap2 img {
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
	width: auto;
}