@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) {

  /*-----------------------------
		LAYOUT
	------------------------------*/
	body{
		width: 100%;
		-webkit-text-size-adjust: 100%;
	}

	/*.inner{
		width: 100%;
		padding: 0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	}*/


	header{
		width: 100%;
    height: 0;
    padding-top: 57.8125%;
		background: #000 url("/home/fukuhara/img/mv_fukuhara_sp.jpg") no-repeat 0 0 fixed;
    background-size: 100% auto;
		position: relative;
	}

	header h1{
		position: absolute;
		width: 100px;
		top: 5px;
		left: 5px;
	}
	header h1 img{
		width: 100%;
		height: auto;
	}
		@media screen and (orientation: portrait) {
			header .ttl{
				position: absolute;
				top: 30%;
				right: 10px;
				text-align: right;
			}
			header .ttl img{
				width: 50%;
				height: auto;
			}
		}
		@media screen and (orientation: landscape) {
			header .ttl{
				position: absolute;
				top: 30%;
				right: 20px;
				text-align: right;
			}
			header .ttl img{
				width: 70%;
				height: auto;
			}
		}

	header #btn-sns{
		position: absolute;
    bottom: 0;
		right: 0;

	}
	header #sns-fb,
	header #sns-tw{
		float: right;
		margin: 0 5px 0 0;
	}
	footer p{
		background: #000;
		color: #FFF;
		text-align: center;
		padding: 18px 0;
	}

	h2 img{
		height: 24px;
		width: auto;
	}
	article{
		width: 100%;
		padding: 30px 10px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	/*-----------------------------
		NAV
	------------------------------*/
	#pNav{
		background: #AB8E40;
	}
	#pNav ul{
		width: 100%;
		margin: 0 auto;
		overflow: hidden;
		border-top: 1px solid #b69d59;
	}
	#pNav li{
		float: left;
	   width: 50%;
	   text-align: center;
	   border-bottom: 1px solid #b69d59;
	   -webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	   box-sizing: border-box;
	}
	#pNav li:nth-child(odd) {
	   border-right: 1px solid #b69d59;
	}


	#pNav li a{
		display: block;
		padding: 18px 0;
		background: #AB8E40;
	}
	#pNav li a img{
		height: 14px;
		width: auto;
	}
	/*-----------------------------
		PRESENT
	------------------------------*/
	#present{
		background: #000;
		padding: 30px 0;
	}
	#present h2{
		text-align: center;
		padding-bottom: 30px;
	}
	#present .inner{
		padding: 0 10px;
	}
	#present .lead{
		width: 100%;
		height: 0;
		padding-top: 18.75%;
		margin: 0 auto;
		text-indent: -9999px;
		background: #000 url("/home/fukuhara/img/p_present_sp.gif") no-repeat center center;
		background-size: contain;
	}
	#present .plate{
		text-align: center;
		margin-top: 10px;
	}
	#present .plate img{
		width: 100%;
		height: auto;
	}
	#present .btn{
		width: 280px;
		text-align: center;
		margin: 30px auto;
	}
	#present .btn img{
		width: 100%;
		height: auto;
	}
	#present .period{
		color: #CBAC5A;
		font-weight: bold;
		font-size: 16px;
		line-height: 1.4;
		margin: 10px 0 0 0;
		text-align: center;
	}
	#present .at{
		margin: 20px auto 0 auto;
	}
	#present .at li{
		color: #FFF;
		text-indent: -1em;
		margin-left: 1em;
		font-size: 12px;
	}
	#present .at li span{
		color: #CBAC5A;
	}
	/*-----------------------------
		CEREMONY
	------------------------------*/
	#ceremony{
		background: #cdb472 url("/home/fukuhara/img/bg_ceremony.gif") no-repeat center center;
		background-size: 100% auto;
	}
	#ceremony h2{
		text-align: center;
		padding-bottom: 30px;
	}


	#ceremony .interview{
		padding: 10px;
		background: rgba(255,255,255,0.3);
		margin: 0 0 10px 0;
	}
	#ceremony .unit_l{
		margin-bottom: 30px;
	}
	#ceremony .interview_soon{
		width: 100%;
		height: 200px;
		background: rgba(0,0,0,0.3);
	}
	#ceremony .interview_soon p{
		text-align: center;
		padding: 86px 0 0 0;
		color: #FFF;
		font-size: 18px;
		letter-spacing: 0.03em;
	}
	#ceremony h3{
		font-size: 16px;
		text-align: center;
		font-weight: bold;
		line-height: 1.2;
	}
	#ceremony h3 span.date{
		font-size: 12px;
	}
	#ceremony dt{
		text-align: center;
		padding: 10px 0;
	}
	#ceremony dt img{
		width: 100%;
		height: auto;
	}
	#ceremony dd{
		font-size: 14px;
		line-height: 1.6;
		letter-spacing: 0.03em;
	}
	#ceremony .btn{
		width: 200px;
		text-align: center;
		margin: 10px auto;
	}
	#ceremony .btn img{
		width: 100%;
		height: auto;
	}

	#ceremony .link_news{
		text-align: center;
		margin: 30px auto 0 auto;
		font-size: 15px;
	}
	#ceremony .link_news a{
	 	color: #FFF;
		border: 4px solid #AB8E40;
		padding: 15px 0;
		background: #8e1913;
		display: block;
	}
	#ceremony  .video{
		width: 100%;
		margin: 0 auto 30px auto;
		background: rgba(255,255,255,0.3);
		padding: 10px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	#ceremony .video h3{
		padding-bottom: 10px;
		line-height: 1.2;
	}

	/*-----------------------------
		PROFILE
	------------------------------*/
	#profile{
		background: #FFF url("/home/fukuhara/img/bg_profile_sp.jpg") no-repeat center 80px;
		background-size: contain;
	}
	#profile h2{
		text-align: center;
		padding-bottom: 30px;
	}

	#profile .name{
			font-size: 30px;
			font-weight: bold;
			line-height: 1;
			text-align: center;
			padding-top: 80%;
	}
	#profile .roma{
			font-size: 14px;
			text-align: center;
	}
	#profile table{
		width: 100%;
		margin: 20px 0 0 0;
	}
	#profile table th,
	#profile table td{
		font-size: 14px;
		display: inline-block;
		width: 40%;
		padding: 5px 10px;
		border-bottom: 1px solid #FFF;
	}
	#profile table th{
		background: #F1EEE7;
	}

	#profile table .none{
		display: none;
	}
	#profile p.note{
		font-size: 11px;
		text-align: right;
	}
	#profile  dt{
		font-size: 20px;
		font-weight: bold;
		padding-bottom: 3px;
		border-bottom: 1px solid #000;
		margin:30px 0 3px;
	}

	#profile  dd{
		font-size: 14px;
	}

	#profile .btn{
		width: 200px;
		margin: 20px auto;
		text-align: center;
	}
	#profile .btn img{
		width: 100%;
		height: auto;
	}

	/*-----------------------------
		DATA
	------------------------------*/
	#data{
		background: #eeeeee;
	}
	#data h2{
		text-align: center;
		padding-bottom: 20px;
	}

	#data h3{
		font-size: 20px;
		border-bottom: 4px solid #000;
		padding-bottom: 3px;
		margin-bottom: 10px;
	}
	.scroll-wrapper{
		overflow: auto;
		white-space: nowrap;
		border: 1px solid #CCC;
	}
	.scroll::-webkit-scrollbar{
	 height: 5px;
	}
	.scroll::-webkit-scrollbar-track{
	 background: #F1F1F1;
	}
	.scroll::-webkit-scrollbar-thumb {
	 background: #BCBCBC;
	}
	#data table{
		width: 100%;
	}
	#data table th,
	#data table td{
		padding: 5px 8px;
		font-size: 12px;
		text-align: center;
		font-weight: normal;
	}
	#data table tr.even th,
	#data table tr.even td{
		background: #FFF;
	}
	#data table tr.odd th,
	#data table tr.odd td{
		background: #F1EEE7;
	}
	#data p.note{
		font-size: 12px;
		text-align: right;
		margin: 10px 0 0 0;
	}

	/*-----------------------------
		HISTORY
	------------------------------*/
	#history{
	  background: #cdb472;
	}
	#history h2{
		text-align: center;
		padding-bottom: 30px;
	}
	#history table{
		width: 100%;
	}
	#history th{
		padding-right: 10px;
		border-right: 1px solid #000;
	}
	#history tr td img{
		width: 100px;
		height: auto;
		padding: 10px;
	}
	#history tr td.text{
		padding: 10px 0;
		font-size: 12px;
		line-height: 1.4;
	}
	#history tr td.none{
		display:none;
	}
	#history span.coop{
		font-size: 10px;
		display: block;
	}
	/*-----------------------------
		PHOTO
	------------------------------*/
	#photo{
		background: #000;
	}
	#photo h2{
		text-align: center;
		padding-bottom: 30px;
	}
	#photo #Glide{
		width: 100%;
		margin: 0 auto;
	}
	#photo #Glide img{
		width: 100%;
		height: auto;
	}
	.glide__arrow {
	  position: absolute;
	  z-index: 2;
	  text-indent: -9999px;
	  color: white;
	  width: 32px;
	  height: 32px;
	  border: none;
	}
	.glide--horizontal .glide__arrow.prev {
	  left: -1px;
	  background : url("/home/fukuhara/img/prev.png") no-repeat 0 0;
		background-size: contain;
	}

	.glide--horizontal .glide__arrow.prev:hover,
	.glide--horizontal .glide__arrow.prev:focus {
	  background : url("/home/fukuhara/img/prev_hover.png") no-repeat 0 0;
		background-size: contain;
	}
	.glide--horizontal .glide__arrow.next {
	  right: -1px;
	  background : url("/home/fukuhara/img/next.png") no-repeat 0 0;
		background-size: contain;
	}
	.glide--horizontal .glide__arrow.next:hover,
	.glide--horizontal .glide__arrow.next:focus {
	  background : url("/home/fukuhara/img/next_hover.png") no-repeat 0 0;
		background-size: contain;
	}

	/*-----------------------------
		COMMENT
	------------------------------*/
	#comment{
		background: #000 url("/home/fukuhara/img/bg_comment.jpg") no-repeat 0 0 ;
		background-size: cover;
	}

	#comment h2{
		text-align: center;
		padding-bottom: 30px;
	}

	#comment dl{
		overflow: hidden;
		background: #e5e2dc;
		margin-bottom: 20px;
	}
	#comment dt{
		width: 100%;
		border-bottom: 10px solid #ab8e40;
	}
	#comment dt img{
		width: 100%;
		height: auto;
	}

	#comment dd{
		padding: 10px;
	}

	#comment dd{
		font-size: 12px;
		line-height: 1.6;
	}

		/*-----------------------------
			GOODS
		------------------------------*/
		#goods{
			/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#980808+0,5a0404+100 */
			background: #980808; /* Old browsers */
			background: -moz-linear-gradient(top,  #980808 0%, #5a0404 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top,  #980808 0%,#5a0404 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom,  #980808 0%,#5a0404 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#980808', endColorstr='#5a0404',GradientType=0 ); /* IE6-9 */
			padding: 30px 0 0 0;
		}
		#goods h2{
			text-align: center;
			padding-bottom: 30px;
		}
		#goods .bnr{
			width: 100%;
			margin: 0 auto;
		}
		#goods .bnr img{
			width: 100%;
			height: auto;
		}

		#goods .limitgoods .inner{
			padding: 0 10px;
		}
		#goods .limitgoods .g-img{
			margin: 20px 0 ;
		}
		#goods .limitgoods .g-img img{
			width: 100%;
			height: auto;
		}

		#goods .limitgoods p.start{
			width: 300px;
			margin: 30px auto 0 auto;
			text-align: center;
		}

		#goods .limitgoods p.t-shop{
			width: 260px;
			margin: 0  auto;
			text-align: center;
		}

		#goods .limitgoods p.t-shop img,
		#goods .limitgoods p.start img{
			width: 100%;
			height: auto;
		}


		#goods .limitgoods{
			background: rgba(0, 0, 0, 0.4);
			padding: 30px 0;
			border-top: 1px solid #B28D32;
		}

		#goods .limitgoods ul{
			overflow: hidden;
			text-align: center;
		}

		#goods .limitgoods a{
			width: 300px;
			color: #FFF;
			display: block;
			margin:0 auto 20px auto;
		}

		#goods .limitgoods dt img{
			width: 100%;
			height: auto;
		}

		#goods .g-name span,
		#goods .g-price{
			font-size: 12px;
			color: #FFF;
			display: block;
			text-align: center;
			padding-top: 5px;
		}
		#goods .at{
			margin: 20px 10px 40px 10px;
			text-align: left;
			font-size: 14px;
			color: #FFF;
			font-weight: bold;
		}

		#goods .normalgoods{
			margin: 0 10px;
		}
		#goods .normalgoods a{
			width: 48%;
			color: #FFF;
			margin: 0 2% 20px 0;
			display: inline-block;
		}
		#goods .normalgoods a:nth-child(2n){
			margin: 0 0 20px 0;
		}
		#goods .normalgoods li img{
			width: 100%;
			height: auto;
		}
		#goods dt{
			padding-bottom: 5px;
		}
		#goods dd{
			text-align: center;
			font-size: 12px;
			color: #FFF;
			line-height: 1.2;
		}

		/*-----------------------------
			SNS
		------------------------------*/
		#sns {
			background: #FFF url("/home/fukuhara/img/bg_sns.jpg") no-repeat center top ;
			background-size: cover;
		}
		#sns p.lead{
			font-size: 14px;
			text-align: center;
		}
		#sns h2{
			text-align: center;
			padding-bottom:30px;
		}
		#sns h3{
			text-align: center;
			padding: 30px 0 10px 0;
		}
		#sns .unit-fb{
			width: 300px;
			margin: 0 auto;
		}

		#sns .unit-tw{
			width: 90%;
			margin: 0 auto;
		}
		#sns .unit-tw h3{
			width: 100px;
			height: auto;
			margin: 0 auto;
		}
		#sns .unit-tw h3 img{
			width: 100%;
			height: auto;
		}


}