@charset "utf-8";
@import "reset.css";
@import "common.css";

/* CSS Document */

/*==================== 基本設定 ====================*/
html{}
table{font-size:1em;}
body{ min-width:980px;min-height:600px;background:#000;color:#fff;font-size:16px;line-height:1.1;letter-spacing: 0.5px;font-family:"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN","Helvetica Neue","メイリオ", Meiryo,"MS PGothic","Osaka",Arial,sans-serif; }
.body-global{ min-width: unset;min-height: unset;}
.l-global{ background:#000;color:#fff;overflow:hidden; }
.l-global ul{ width:100vw;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap; }
.l-global li{ width:25%;height:50%;height:50vh; }
.l-global li.wide{ width:33.3%; }
.l-global li > a{width:100%;height:100%;display:block;overflow:hidden;position:relative; }
.l-global li span{ width:100%;height:100%;display:block;background:none no-repeat 50% 50%; }
.l-global li span.base{opacity:1;-webkit-background-size:cover;background-size:cover;-webkit-transition: .8s all ease-out;transition: .8s all ease-out;}
.l-global li a:hover span.base{opacity:0.6;-webkit-transform: scale(1.05);transform: scale(1.05);}

.l-global li.sector5 span.base{ background-image:url(../images/global_bg_sector5.jpg); }
.l-global li.m4 span.base{ background-image:url(../images/global_bg_m4.jpg); }
.l-global li.beatpark span.base{ background-image:url(../images/global_bg_beatpark.jpg); }
.l-global li.underbar span.base{ background-image:url(../images/global_bg_underbar.jpg); }
.l-global li.online span.base{ background-image:url(../images/global_bg_shop.jpg); }
.l-global li.fivekyoto span.base{ background-image:url(../images/global_bg_fivekyoto.jpg); }
.l-global li.fruitshisha_chill span.base{ background-image:url(../images/global_bg_shisha.jpg); }
.l-global li.backalley span.base{ background-image:url(../images/global_bg_backalley.jpg); }

.l-global li span.logo{position:absolute;top:0;left:0;-webkit-animation:apper 1.3s both ease-out;animation:apper 1.3s both ease-out; }
.l-global li.sector5 span.logo{ background-image:url(../images/global_logo_sector5.png); }
.l-global li.m4 span.logo{ background-image:url(../images/global_logo_m4.png); }
.l-global li.beatpark span.logo{ background-image:url(../images/global_logo_beatpark.png); }
.l-global li.underbar span.logo{ background-image:url(../images/global_logo_underbar.png); }
.l-global li.online span.logo{ background-image:url(../images/global_logo_shop.png); }
.l-global li.fivekyoto span.logo{ background-image:url(../images/global_logo_fivekyoto.png); }
.l-global li.fruitshisha_chill span.logo{ background-image:url(../images/global_logo_shisha.png); }
.l-global li.backalley span.logo{ background-image:url(../images/global_logo_backalley.png); }

/** 表示時のアニメーション **/
@keyframes apper {
	0%{
		opacity:0;
		-moz-transform:translateY(40px);
		-webkit-transform:translateY(40px);
		-ms-transform:translateY(40px);
		-o-transform:translateY(40px);
		transform:translateY(40px);
	}
	100%{
		opacity:1;
		-moz-transform:translateY(0px);
		-webkit-transform:translateY(0px);
		-ms-transform:translateY(0px);
		-o-transform:translateY(0px);
		transform:translateY(0px);
	}
}

/** ロゴの大きさ調整 **/
@media screen and (max-width: 980px) {
	.l-global li span.logo{background-size:480px auto; }
}
@media screen and (max-width: 640px) {
	.l-global li span.logo{background-size:320px auto; }
}