@charset "utf-8";

/* ---------------------------------- */
/*				COMMON				  */
/* ---------------------------------- */

body {
	color: #000000;
	line-height: 1;
	text-align: center;
	font-family: Arial, Roboto,"Droid Sans","游ゴシック","YuGothic","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ","Meiryo",sans-serif;
	font-size: 12px;
	background-color: #000;
	background-image: url(../common/images/bg.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center center;
	background-size: cover;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
}
body.top{ background-image: url(../img/top/bg.jpg);}

a {
	color: #000;
	text-decoration: none;
}

a:hover {
	color: #000;
	text-decoration: underline;
}

*,
*:after,
*::before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.loader {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	z-index: 9999;
	position: absolute;
}

.loader.no { display:none;}

.loader img {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 34px;
	height: 34px;
	margin: auto;
	position: absolute;
}

#wrap {
	width: 100%;
	max-width: 1500px;
	margin: 0 auto 0 auto;
	padding: 0;
	overflow: hidden;
	position: relative;
}

#main {
	position: relative;
	z-index: 1;
}

#main .bg {
	position: relative;
	z-index: 1;
}

#main .bg img {
	width: 100%;
	display: block;
}

/* footer menu */
#menu {
	position: relative;
	z-index: 200;
}

#menu .bg {
	position: relative;
	z-index: 1;
}

#menu .bg img {
	width: 100%;
	display: block;
}

#menu .ms {
	top: 6%;
	left: 1.5%;
	position: absolute;
	z-index: 2;
}

#menu .ms img {
	width: 100%;
	display: block;
}

#menu .but1 {
	top: 14%;
	right: 37.2%;
	width: 16%;
	position: absolute;
	z-index: 3;
}

#menu .but2 {
	top: 14%;
	right: 20%;
	width: 16%;
	position: absolute;
	z-index: 3;
}

#menu .but3 {
	top: 14.5%;
	right: 1%;
	width: 17.5%;
	position: absolute;
	z-index: 3;
}

#menu .mn img {
	width: 100%;
	display: block;
}

#menu .mn a:hover img {
	filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}

#menu .copy {
	color: #fff;
	font-size: 8px;
	text-align: left;
	bottom: 10%;
	left: 1%;
	position: absolute;
	z-index: 2;
}

#menu .topttl {
	width: 43%;
	top: 9%;
}
#menu .rakuten{ top: 11%;width: 43%;}
#menu .swallows{top: 9%;width: 43%;}
#menu .buffaloes {width: 43%;}
#menu .giants{width: 50%;}
#menu .carp{top:9%; width: 43%;}

#menu .swallows a{
	display:block;
	width:52%;
	/*background-color:#000;*/
	position:absolute;
	top:0;
	left:0;
	z-index:9999;
	overflow:hidden;
}
#menu .swallows a img{
	position:relative;
}

#menu .fighters {
	width: 43%;
}

#menu .lions {
	top: 17%;
	width: 44%;
}
#menu .lions a{
	display:block;
	width:43%;
	/*background-color:#000;*/
	position:absolute;
	top:4%;
	left:1%;
	z-index:9999;
	overflow:hidden;
}
#menu .lions a img{
	position:relative;
}

/* slide */
#slide {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	position: absolute;
	z-index: 5;
}

#slide .skip {
	top: 2.5%;
	right: 2%;
	width: 8%;
	position: absolute;
	z-index: 10;
}

#slide .skip img {
	width: 100%;
}

#slide .copy {
	bottom: 2.5%;
	right: 2%;
	width: 12%;
	position: absolute;
	z-index: 10;
}
#slide .copy.eagles{ width:15%;}
#slide .copy.dragons{ width:15%;}
#slide .copy.swallows{ width:45%;}
#slide .copy.hawks{ width:45%;}
#slide .copy.baystars{ width:97%; bottom:1%;}
#slide .copy.fighters{ width:98%; bottom:1.5%;}

#slide .copy2 {
	bottom: 2.5%;
	right: 2%;
	width: 12%;
	position: absolute;
	z-index: 10;
}
#slide .copy2.baystars{ width:97%; bottom:1%;}

#slide .copy img,#slide .copy2 img {
	width: 100%;
}

#slide .slide {
	overflow: hidden;
	display: none;
	position: relative;
}

#slide .bg {
	top: 0;
	left: 0;
	width: 100%;
	position: relative;
	z-index: 1;
}

#slide .bg img {
	width: 100%;
}

#slide .sText {
	width: 71%;
	z-index: 7;
	position: absolute;
	opacity: 0;
}
#slide .sText.swallows { width:80%;}

#slide .sText1 {
	top: 32%;
	left: 52%;
}
#slide .sText1.swallows {
	top: 32%;
	left: 46%;
}
#slide .sText1.lions {
	top: 35%;
	left: 44%;
}
#slide .sText1.fighters {
	top: 30%;
	left: 52%;
}
#slide .sText1.giants,#slide .sText1.tigers {
	top: 23%;
	left: 52%;
}

#slide .sText2 {
	top: 53%;
	right: 52%;
}

#slide .sText2.lions {
	top: 55%;
	right: 52%;
}


#slide .sText img {
	width: 100%;
}

#slide .si {
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	position: absolute;
}

#slide .si img {
	top: 0;
	left:-20%;
	width: 120%;
	position: absolute;
}


#slide .s1 {
	z-index: 6;
	display: none;
}

#slide .s2 {
	z-index: 5;
	display: none;
}

#slide .s3 {
	z-index: 4;
	display: none;
}

#slide .s4 {
	z-index: 3;
	display: none;
}

/* tabs */

#tab_header {
	top: 0;
	left: 0;
	width: 100%;
	position: absolute;
	z-index: 10;
	display: none;
}

#tab_header p {
	text-align: center;
	width: 100%;
	padding: 5px 0 0 0;
	display: block;
	position: relative;
}

#tab_header p img {
	width: 84%;
	display: inline-block;
}

#tab_header p img{
	width: 100%;
	display: inline-block;
	overflow: hidden;
	margin-top: -1%;
}

#tab_main {
	bottom: -0.3%;
	left: 0;
	position: absolute;
	z-index: 20;
	display: none;
}

#tab_main .bg {
	position: relative;
	z-index: 1;
}

#tab_main .bg img {
	width: 100%;
	display: block;
}

#tab_header a{
	display:block;
	width:5%;
	/*background-color:#000;*/
	position:absolute;
	top:0;
	left:0;
	z-index:9999;
	overflow:hidden;
}
#tab_header a img{
	position:relative;
	display:block;
}

#tab_header a.btn0{ top:10%; left:18.5%; width:46.5%;}
#tab_header a.btn1{ top:60%; left:21%;}
#tab_header a.btn2{ top:62.5%; left:64%; width:4%;}


/* タブ・メイン */
.tab_body {
	bottom: 1.8%;
	width: 100%;
	position: absolute;
}

.tab_body .bg {
	z-index: 1;
}

.tab_body .bg img {
	width: 100%;
}

.tab_body .mn {
	width: 46%;
	position: absolute;
	z-index: 2;
}

.tab_body .mn img {
	width: 100%;
}

.tab_body .menu1 {
	top: 9%;
	left: 2.75%;
}

.tab_body .menu2 {
	top: 9%;
	right: 2.75%;
}

.tab_body .menu3 {
	bottom: 2%;
	left: 2.75%;
}

.tab_body .menu4 {
	bottom: 2%;
	right: 2.75%;
}

/* サイドメニュー */
.side_menu {
	right: 0;
	width: 4%;
	position: absolute;
	z-index: 40;
}

.side_menu a {
	display: block;
	position: relative;
	overflow: hidden;
}

.side_menu a:hover {
	right: 0;
}

.side_menu img {
	right: -10%;
	width: 100%;
	display: block;
	position: relative;
}

.side_menu a:hover img {
	right: 0;
}

.side_mn1 {
	top: 21%;
}

.side_mn2 {
	top: 45%;
}

.side_mn3 {
	bottom: 8%;
}

/* ポップアップ */
.pop {
	left: 0;
	bottom: 0;
	width: 100%;
	height: 96%;
	position: absolute;
	z-index: 50;
	overflow: hidden;
}

.pop .main {
	left: 0;
	width: 63%;
	position: absolute;
	z-index: 1;
}

.pop .main img {
	width: 100%;
}

.pop .pic {
	right: 0;
	width: 38%;
	position: absolute;
	z-index: 1;
}

.pop .pic img {
	width: 100%;
}

.pop .close {
	top: 2.5%;
	left: 55.5%;
	width: 5.5%;
	z-index: 2;
	position: absolute;
}

.pop .close img {
	width: 100%;
}
.pop .bn1 {
	bottom: 5%;
	left: 5.5%;
	width: 13%;
	z-index: 2;
	position: absolute;
}

.pop .bn1 img {
	width: 100%;
}

.pop .bn2 {
	bottom: 5%;
	left: 19.5%;
	width: 13%;
	z-index: 2;
	position: absolute;
}

.pop .bn2 img {
	width: 100%;
}

.pop .bn3 {
	bottom: 5%;
	left: 33.5%;
	width: 13%;
	z-index: 2;
	position: absolute;
}

.pop .bn3 img {
	width: 100%;
}

.pop .link3 img,.pop .link4 img,.pop .link5 img,.pop .link6 img,.pop .link7 img,.pop .link8 img{width: 100%; }
.pop .link3,.pop .link4,.pop .link5,.pop .link6,.pop .link7,.pop .link8 { position: absolute; z-index: 2; left: 5.3%;}
.link3:hover,.link4:hover,.link5:hover,.link6:hover,.link7:hover,.link8:hover{opacity: .8;}

.pop .link3{ width: 15%; top: 63.5%;}
.pop .link4{ width: 15%; top: 49%;}
.pop .link5{ width: 18%; top: 38.5%;}
.pop .link6{ width: 20%; top: 45%;}
.pop .link7{ width: 19%; top: 59%;}
.pop .link8{ width: 13%; top: 67%;}

.pop .note3 {
	top: 73%;
	left: 5.5%;
	width: 43%;
	z-index: 2;
	position: absolute;
}

.pop .note3 img {
	width: 100%;
}

#team_pop1 {
	display: none;
}

#team_pop2 {
	display: none;
}

#team_pop3 {
	display: none;
}

#team_pop4 {
	display: none;
}

#jcom_pop1 {
	display: none;
}

#jcom_pop2 {
	display: none;
}

#jcom_pop3 {
	display: none;
}

#jcom_pop4 {
	display: none;
}

/* ご利用までの流れ */
#pop_step {
	left: 0;
	bottom: 0;
	width: 100%;
	height: 96%;
	background-color: #fff;
	position: absolute;
	z-index: 60;
	overflow: hidden;
	display: none;
}

#pop_step .close {
	top: 2.5%;
	right: 1%;
	width: 5.5%;
	z-index: 5;
	position: absolute;
}

#pop_step .close img {
	width: 100%;
}

#pop_step .step {
	top: 2%;
	left: 12%;
	width: 75%;
	position: absolute;
}
#pop_step .step.step2 { width:90%; left:5%; top:3%;}

#pop_step .step img {
	width: 100%;
}

/* オトクな割引情報 */
#pop_otoku {
	left: 0;
	bottom: 0;
	width: 100%;
	height: 96%;
	background-color: #fff;
	position: absolute;
	z-index: 60;
	overflow: hidden;
	display: none;
}

#pop_otoku .close {
	top: 2.5%;
	right: 1%;
	width: 5.5%;
	z-index: 5;
	position: absolute;
}

#pop_otoku .close img {
	width: 100%;
}

#pop_otoku .title {
	top: 10%;
	left: 38%;
	width: 21%;
	z-index: 2;
	position: absolute;
}

#pop_otoku .title img {
	width: 100%;
}

#pop_otoku .otoku1 {
	top: 25%;
	left: 10%;
	width: 36%;
	z-index: 2;
	position: absolute;
}

#pop_otoku .otoku1 img {
	width: 100%;
}

#pop_otoku .otoku2 {
	top: 25%;
	right: 34%;
	width: 36%;
	z-index: 2;
	position: absolute;
}

#pop_otoku .otoku2 img {
	width: 100%;
}

#pop_otoku .otoku3 {
	bottom: 8%;
	left: 10%;
	width: 36%;
	z-index: 2;
	position: absolute;
}

#pop_otoku .otoku3 img {
	width: 100%;
}

#pop_otoku .otoku4 {
	bottom: 8%;
	right: 10%;
	width: 36%;
	z-index: 2;
	position: absolute;
}

#pop_otoku .otoku4 img {
	width: 100%;
}

#side_anbg {
	right: 0;
	bottom: 0;
	width: 100%;
	height: 96%;
	background-color: #fff;
	position: absolute;
	z-index: 59;
	display: none;
}

.top_header{
	position:absolute;
	top:0;
	left:8%;
	width:84%;
}
.top_header img{ width:100%;}
.btn1{
	position:absolute;
	top:29%;
	left:0;
	width:25.1%;
	z-index:9999;
}
.btn2{
	position:absolute;
	top:29%;
	left:25.1%;
	width:24.9%;
	z-index:9999;
}
.btn3{
	position:absolute;
	top:29%;
	left:50%;
	width:25.02%;
	z-index:9999;
}
.btn4{
	position:absolute;
	top:29%;
	left:75%;
	width:25.35%;
	z-index:9999;
}
.btn1 img,.btn2 img,.btn3 img,.btn4 img{ width:100%; position:absolute; top:0; left:0;}
.txtImg{
	position:absolute;
	top:93.2%;
	left:0%;
}
.txtImg img{ width:100%;}

.white{
	position:absolute;
	top:35.8%;
	left:0;
	width:100.2%;
	z-index:99;
}
.white img{ width:100%;}


.left_box{width: 49.2%; height: 94%; position: absolute; left: 0; border-radius: 2px;}
.right_box{width: 49.2%;height: 94%; position: absolute; right: 0; background: url(../common/images/merit02-bg.png) no-repeat; background-size: cover; border-radius: 2px;}