@charset "UTF-8";
/* ---------------------------------------
  TITLE : HANSHIN Tigers
  URI : hanshintigers.jp
  (C) HANSHIN Tigers.
--------------------------------------- */

@import "/common/css/format.css";

/* SP
--------------------------------------- */
@media only screen and (max-width: 736px) {
	 .hide_pc{
	 	display: block;
	 }
	 .hide_sp{
	 	display: none;
	 }

	body {
		background: #FFE100;
		width: 100%;
		min-width: 100%;
		padding-top: 50px;
	    overflow: hidden;
		-webkit-text-size-adjust: 100%;
	}
	header{
		width: 100%;
		background: #FFE100 url(/event/game/img/2018/bg_header.gif) center center no-repeat;
		background-size: cover;
		height: 50px;
		position: fixed;
		top: 0;
	    z-index: 1;
	}

	header h1{
		width: 36px;
		padding: 7px 0 0 0;
	}
	header h1 a{
		display: block;
	}
	header h1 img{
		width: 100%;
		height: auto;
	}
	header nav{
		width: 100%;
		margin: 0 auto;
		overflow: hidden;
	}

	header .btn_ticket{
		position:absolute;
		top: 9px;
		right: 50px;
	}
	header .btn_ticket a{
		display: block;
	}
	header .btn_ticket img{
		width: auto;
		height: 32px;
	}

	footer {
		position: relative;
		width: 100%;
		height: 0;
		padding-top: 37.5%;
		background: transparent url(/event/game/img/2018/bg_footer_sp.png) center bottom no-repeat;
		background-size: contain;
	}
	footer p {
		position: absolute;
		width: 100%;
		bottom: 25px;
		margin: 0;
		color: #000;
		text-align: center;
	}
	#page-top {
		position: fixed;
		bottom: 10px;
		right: 10px;
		width: 40px;
		height: 40px;
	}
	#page-top a {
		display: block;
		width: 40px;
		height: 40px;
		background: url(/event/game/img/2018/btn_pagetop.png) 0 0 no-repeat;
		background-size: 40px 40px;
	}
	h2.stl{
		background: #FFE100 url(/event/game/img/2018/bg_stl.gif) center center no-repeat;
		width: 100%;
		height: 60px;
		line-height: 60px;
		text-align: center;
		font-family: 'Quantico', sans-serif;
		font-weight: 700;
		font-size: 36px;
	}
	h2.stl span.ja{
	    font-family: "メイリオ", "Meiryo", verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Arial, Verdana, Sans-Serif;
	    font-size: 16px;
	    vertical-align: bottom;
	}

	.unit{
		margin: 0 10px;
		overflow: hidden;
	}
	.btn_detail{
		margin: 20px 10px 0 10px;
		text-align: center;
	}
	.btn_detail a{
		display: block;
		background: #292929;
		border: 1px solid #f0f0f0;
		padding: 10px 0;
	}
	.btn_detail img{
		vertical-align: middle;
		width: auto;
		height: 20px;
	}


/*-----------------------------
	VIDEO
------------------------------*/
	#videoWp{
		width: 100%;
		padding-top: 56.25%;
		position: relative;
	}

	#videoWp video{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	#videoWp img{
		width: 100%;
		height: auto;
	}
	.btn_scroll{
		display: none;
	}
	#sound{
		cursor: pointer;
		position: absolute;
		bottom: 10px;
		right: 10px;
		border: 2px solid #FFE100;
		font-family: 'Quantico', sans-serif;
		font-size: 10px;
		color: #FFE100;
		padding: 2px 5px;
		z-index: 0;
	}
	#sound.active{
		border: 2px solid #FFE100;
		background: #FFE100;
		color: #000;
	}

/*-----------------------------
	schedule
------------------------------*/
	#schedule{
		background: transparent url(/event/game/img/2018/bg_schedule.jpg) center center no-repeat;
		background-size: cover;
		padding: 20px 0 10px 0;
	}
	#schedule ul{
		text-align: center;
	}
	#schedule ul li{
		display: inline-block;
		margin: 0 auto 10px auto;
	}
	#schedule ul li img{
		width: 100%;
		height: auto;
	}


/*-----------------------------
	ticket
------------------------------*/
	#ticket{
		width: 100%;
		background: #000000 url(/event/game/img/2018/bg_ticket.jpg) center top no-repeat;
		background-size: cover;
	}
	#ticket .column_l .logo{
		text-align: center;
		width: 280px;
		margin: 30px auto 0 auto;
	}
	#ticket .column_l .logo img{
		width: 100%;
		height: auto;
	}
	#ticket .column_l p{
		padding: 20px 0 10px 0;
		color: #e4e4e4;
		font-size: 13px;
	}
	#ticket .column_l p span{
		color: #FFE100;
		font-weight: bold;
	}
	#ticket .column_r img{
		width: 100%;
		height: auto;
	}
	#ticket  table{
		margin: 20px 0 30px 0;
		width: 100%;
	}
	#ticket th,
	#ticket td{
		border-bottom: 1px solid #000;
	}
	#ticket th.date{
		font-family: 'Quantico', sans-serif;
		font-weight: 700;
		font-size: 16px;
		padding: 0 10px;
		height: 50px;
		width: 20%;
	}
	#ticket th.date span{
		font-size: 14px;
	}
	#ticket  td.vs{
		color: #FFF;
		padding: 0 10px;
	}
	#ticket  td.vs span{
		display: none;
	}
	#ticket  td.vs img{
		width: 30px;
		height: auto;
	}
	#ticket td.btn{
		text-align: right;
		padding-right: 10px;
	}
	#ticket td.sold{
		text-align: right;
		padding-right: 20px;
	}
	#ticket  td img{
		vertical-align: middle;
	}
	#ticket tr.g th.date{
		background: #ffcb10;
	}
	#ticket tr.c th.date{
		background: #ffcb10;
	}
	#ticket tr.g td.vs{
		background: #eb7500 url(/event/game/img/2018/bg_vs_g.jpg) center right no-repeat;
		background-size: auto 50px;
	}
	#ticket tr.c td.vs{
		background: #c70100 url(/event/game/img/2018/bg_vs_c.jpg) center right no-repeat;
		background-size: auto 50px;
	}
	#ticket tr.g td.btn{
		background: #3f3f3f url(/event/game/img/2018/bg_btn_g.jpg) center left no-repeat;
		background-size: auto 50px;
	}

	#ticket tr.c td.btn{
		background: #3f3f3f url(/event/game/img/2018/bg_btn_c.jpg) center left no-repeat;
		background-size: auto 50px;
	}
	#ticket td.btn img{
		height: 14px;
		width: auto;
	}
	#ticket tr.g td.sold{
		background: #acacac url(/event/game/img/2018/bg_sold_g.jpg) center left no-repeat;
		background-size: auto 50px;
	}
	#ticket tr.c td.sold{
		background: #acacac url(/event/game/img/2018/bg_sold_c.jpg) center left no-repeat;
		background-size: auto 50px;
	}
	#ticket td.sold img{
		height: 26px;
		width: auto;
	}

	#ticket td.sold img.soldout{
		height: 14px;
		width: auto;
		padding-right: 14px;
	}
/*-----------------------------
	event
------------------------------*/
	#event{
		width: 100%;
		background: #f0f0f0 url(/event/game/img/2018/bg_event.jpg) center top no-repeat;
		background-size: cover;
	}

	#event .unit h3{
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		padding: 10px 0;
		margin: 10px 0;
		border-bottom: 1px solid #000;
	}
	#event .unit h3 + p{
		font-size: 13px;
	}
	#event .unit.guestWp{
		margin-top: 20px;
	}
	#event .wp,
	#event .wp-wide{
		background: #3f3f3f;
		color: #FFF;
	}
	#event .wp{
		padding: 10px;
		border-bottom: 1px solid #f0f0f0;
	}
	#event .wp-wide{
		padding: 10px;
		border-bottom: 1px solid #f0f0f0;
	}

	#event .unit.guestWp h4{
		font-weight: bold;
		font-size: 16px;
		text-align: center;
		padding: 0 0 10px 0;
	}

	#event .unit.guestWp dl{
		overflow: hidden;
		display: table;
	}
	#event .unit.guestWp dl dt{
		display: table-cell;
	}
	#event .unit.guestWp dl dt img{
		width: 80px;
		height: auto;
	}

	#event .unit.guestWp dl dt span{
		display: block;
		font-size: 13px;
		font-weight: bold;
		line-height: 1.2;
		text-align: center;
		padding: 5px 0 10px 0;
	}
	#event .unit.guestWp dl dt span small{
		font-size: 10px;
	}
	#event .unit.guestWp dl dd{
		font-size: 12px;
		padding: 0 0 10px 10px;
	}
	#event .unit.guestWp dd .indent li{
		margin-left: 1em;
		text-indent: -1em;
	}
	#event .unit.guestWp dd .indent li br{
		display: none;
	}
	#event .unit#rokko{
		padding-bottom: 30px;
	}
	#event .unit#rokko p{
		padding-bottom: 10px;
	}
	#event .unit#rokko .pvWp{
		width: 100%;
		height: 0;
		padding-top: 56.25%;
		position:relative;
	}
	#event .unit#rokko .pvWp video{
		position:absolute;
		top: 0;
		width: 100%;
		height: 100%;
	}

	/*-----------------------------
		FANS(tagbord)
	------------------------------*/
		
		#fans{
			background: #FFF;
		}
		#fans .cms{
			padding: 50px 0;
			text-align: center;
		}
		#fans .cms img{
			width: auto;
			height: 30px;
		}
		#fans h3{
			text-align: center;
			font-size: 15px;
			font-weight: bold;
			padding: 10px 0;
			margin: 10px 10px 0 10px;
			border-bottom: 1px solid #000;
		}
	/*-----------------------------
		item
	------------------------------*/
		#item{
			width: 100%;
			background: #3f3f3f url(/event/game/img/2018/bg_item.jpg) center top no-repeat;
			background-size: cover;
			padding-bottom: 30px;
		}
		#item .unit h3{
			text-align: center;
			font-size: 16px;
			font-weight: bold;
			padding: 10px 0;
			margin: 20px 0;
			border-bottom: 1px solid #e4e4e4;
			color: #e4e4e4;
		}
		#item  .unit h3 + p{
			font-size: 13px;
			color: #e4e4e4;
		}
		#item .center{
			text-align: center;
			padding: 20px 0 0 0 ;
		}
		#item .center img{
			width: 100%;
			height: auto;
		}
	/*-----------------------------
		goods
	------------------------------*/

		#goods{
			width: 100%;
			background: #d4d4d4 url(/event/game/img/2018/bg_goods.jpg) center top no-repeat;
			background-size: cover;
			padding-bottom: 30px;
		}
		#goods ul{
			margin-top: 10px;
			text-align: center;
		}
		#goods ul li{
			display: inline-block;
			vertical-align: top;
			width: 48%;
			background: #eeeeee;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			margin-top: 10px;
		}
		#goods ul li img{
			width: 100%;
			height: auto;
		}
		#goods ul li a{
			display: block;
			color: #000;
			text-decoration: none;
			font-size: 12px;
			font-weight: bold;
		}
		#goods ul li .g_info{
			padding: 8px;
			height: 100px;
		}
		#goods ul li .g_info span.gname{
			display: block;
		}
		#goods ul li .g_info span.price{
			background: #000;
			color: #FFF;
			display: inline-block;
			padding: 0 4px;
		}
		#goods .btn_detail img{
			height: 16px;
			width: auto;
		}
	/*-----------------------------
		food
	------------------------------*/
		
		#food{
			background: #FFF;
			padding-bottom: 20px;
		}
		#food .cms{
			margin: 20px 20px 0 20px;
			padding: 100px 0;
			text-align: center;
			background: #e5e5e5;
		}
		#food .cms img{
			width: auto;
			height: 30px;
		}

		#food ul{
			text-align: center;
		}
		#food ul li{
			display: inline-block;
			vertical-align: top;
			background: #eeeeee;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			margin: 10px 20px;
		}
		#food ul li img{
			width: 100%;
			height: auto;
		}
		#food ul li a{
			display: block;
			color: #000;
			text-decoration: none;
			font-size: 12px;
			font-weight: bold;
		}
		#food ul li .g_info{
			padding: 8px;
			height: 86px;
		}
		#food ul li .g_info span.gname{
			display: block;
		}
		#food ul li .g_info .gname{
			font-weight: bold;
			font-size: 13px;
			line-height: 1.4;
		}
		#food ul li .g_info table th{
			padding-right: 5px;
			vertical-align: top;
		}
		#food ul li .g_info table th,
		#food ul li .g_info table td{
			padding-top: 5px;
		}
		#food ul li .g_info table th span{
			background: #000;
			color: #FFF;
			width: 4em;
			display: inline-block;
			padding: 0 5px;
			text-align: center;
		}
		#food ul li .g_info .notes{
			padding-top: 5px;
			display: block;
		}
		#food .slick-prev,
		#food .slick-next{
			z-index: 1;
			text-indent: -9999px;
    		border: 0;
			width: 14px;
			height: 24px;
		}
		#food .slick-prev{
			position: absolute;
			top: 40%;
			left: 0px;
			background: url(/event/game/img/2018/i_prev_y.png) no-repeat center center ;
			background-size: 14px 24px;


		}
		#food .slick-next{
			position: absolute;
			top: 40%;
			right: 0px;
			background: url(/event/game/img/2018/i_next_y.png) no-repeat center center ;
			background-size: 14px 24px;
		}

	/*-----------------------------
		present
	------------------------------*/
		#present{
			width: 100%;
			background: #525458 url(/event/game/img/2018/bg_present.jpg) center top no-repeat;
			background-size: cover;
			padding-bottom: 1px;
		}

		#present .unit{
			background: rgba(0,0,0,.3);
			margin: 20px;
		}
		#present .unit ul{
			text-align: center;
		}
		#present .unit li{
			padding: 10px;
		}
		#present .unit li .cms{
			padding-bottom: 20px;
		}
		#present .unit li .pre_img{
			text-align: center;
		}
		#present .unit li .pre_img img{
			width: 240px;
			height: auto;
		}
		#present .unit li .pre_img span{
			display: block;
			color: #e4e4e4;
			text-align: center;
			font-size: 12px;
			padding: 10px 0;
		}
		#present .unit li .btn_pre.nolink,
		#present .unit li .btn_pre a{
			margin: 0 10px;
			text-align: center;
			background: #292929;
			border: 1px solid #f0f0f0;
			height: 60px;
			line-height: 60px;
			padding: 0 10px;
		}
		#present .unit li .btn_pre img{
			vertical-align: middle;
			height: 36px;
			width: auto;
		}
		#present .unit li .btn_pre.nolink img{
			vertical-align: middle;
			height: 20px;
			width: auto;
		}
		#present .unit li .btn_pre a{
			display: block;
		}

	/*-----------------------------
		other
	------------------------------*/
		#other{
			width: 100%;
			background: #dedede url(/event/game/img/2018/bg_other.jpg) center 58px no-repeat;
			background-size: cover;
			padding-bottom: 40px;
		}
		#other h3{
			font-family: 'Quantico', sans-serif;
			font-weight: 700;
			font-size: 20px;
			text-align: center;
			margin: 20px auto;
		}
		#other ul{
			margin: 0 10px;
		}
		#other ul li{
			padding: 10px;
			background: #3f3f3f;
			border-bottom: 1px solid #d8d8d8;
		}
		#other ul li h4{
			text-align: center;
			font-family: 'Quantico', sans-serif;
			font-weight: 700;
			color: #e4e4e4;
			font-size: 20px;
		}
		#other ul li .uni{
			text-align: center;
			padding: 20px 0;
		}
		#other ul li .uni img{
			width: 240px;
			height: auto;
			margin: 0 auto;
		}
		#other ul li .info{
			color: #e4e4e4;
			font-size: 12px;
		}
		#other ul li.y2018{
			background: #000;
		}
		#other .slick-prev,
		#other .slick-next{
			z-index: 1;
			text-indent: -9999px;
    		border: 0;
			width: 14px;
			height: 24px;
		}
		#other .slick-prev{
			position: absolute;
			top: 40%;
			left: 5px;
			background: url(/event/game/img/2018/i_prev.png) no-repeat center center ;
			background-size: 14px 24px;


		}
		#other .slick-next{
			position: absolute;
			top: 40%;
			right: 5px;
			background: url(/event/game/img/2018/i_next.png) no-repeat center center ;
			background-size: 14px 24px;
		}

		/*-----------------------------
			sponsor
		------------------------------*/
			#sponsor {
				background: #FFFFFF;
			}


			#sponsor .sponsor_l {
				text-align: center;
				margin: 20px 0;
			}
			#sponsor .sponsor_l li{
				display: inline-block;
				padding: 10px 0;
				width: 146px;
				height: auto;
				text-align: center;
			}
			#sponsor .sponsor_l li span{
				display: block;
				text-align: center;
				padding-top: 5px;
				font-size: 12px;
			}
			#sponsor ul li img{
				width: 100%;
				height: auto;
			}
			#sponsor .sponsor_m{
				text-align: center;
			}
			#sponsor .sponsor_m li{
				display: inline-block;
				padding: 10px 3px;
				width: 90px;
				height: auto;
				text-align: center;
			}
			#sponsor .sponsor_m li span{
				display: block;
				text-align: center;
				padding-top: 5px;
				font-size: 10px;
			}
			#sponsor .sponsor_s{
				text-align: center;
				margin: 10px 0;
			}
			#sponsor .sponsor_s li{
				display: inline-block;
				padding:0 4px 10px 4px;
				font-size: 10px;
			}
			#sponsor p.note {
				margin-top: 10px;
				text-align: right;
				font-size: 10px;
			}
			#sponsor li img{
				vertical-align: middle;
			}

}