@charset "utf-8";
/* CSS Document */
/*フォント設定*/



/**index**/

body.top #wrapper-contents{
	width:100%;
	height:100%;
	background:#F4F4F4;
}
body.top #wrapper-contents #wapper-innercontents{
	padding:0 10px;
}

body.top #wrapper-contents #wapper-innercontents #main-nav-wrap{
	/*display:-webkit-box;
	display:-ms-flexbox;
	display:flex;		*/	
}

/*スライダー*/
body.top #wrapper-contents #wapper-innercontents #main-nav-wrap #main-slide-box{
	width: 100%;

}

/*top スライダーとナビ親レイアウト*/		
body.top #wrapper-contents #wapper-innercontents #main-nav-wrap #main-navi-box{
	display:none;
}

body.top #wrapper-contents #wapper-innercontents #main-content-wrap{
	margin-top:0px;
	padding-bottom:0px;
	display:block;
}

body.top #wrapper-contents #wapper-innercontents #main-content-wrap #main-content-box{
	width: 100%;
  padding-bottom: 100px;
}

/*サブナビげーション*/
body.top #wrapper-contents #wapper-innercontents #main-content-wrap #sub-navi-box{
	display:none;
}
			

/*重要なお知らせリスト*/
body.top #wrapper-contents #wapper-innercontents #main-content-wrap #main-content-box #news-textbox{
	margin:35px 0;		
}



/*コンテンツアイテム*/



body.top #wrapper-contents #wapper-innercontents #main-content-wrap #main-content-box .contents-detail ul li div.news-item-textwrap,
body.top #wrapper-contents #wapper-innercontents #main-content-wrap #main-content-box .contents-detail ul li div.kotokiji-item-textwrap{
	margin:15px 15px 40px;
}

body.top #wrapper-contents #wapper-innercontents #main-content-wrap #main-content-box .contents-detail ul li div.loftv-item-textwrap{
	margin:15px 15px 40px;
}				





/*コトキジ一覧
*************************************************************************/


body.kotokiji-index #content-box .contents-detail ul li{
	width: -webkit-calc( (100% - 20px) / 3 );
	width: calc( (100% - 20px) / 3 );
	margin:0 10px 10px 0;
}
body.kotokiji-index #content-box .contents-detail ul li:nth-child(5n) {
    margin-right: 10px;
}
body.kotokiji-index #content-box .contents-detail ul li:nth-child(3n){
	margin-right:0;
}


/*全店ニュース一覧
*************************************************************************/

body.news-index #content-box .contents-detail ul li{
	width: -webkit-calc( (100% - 20px) / 3 );
	width: calc( (100% - 20px) / 3 );
	margin:0 10px 10px 0;
}
body.news-index #content-box .contents-detail ul li:nth-child(5n) {
    margin-right: 10px;
}
body.news-index #content-box .contents-detail ul li:nth-child(3n){
	margin-right:0;
}


/*全店ニュース詳細
***************************************************************************************/
body.news-detail .main-contents > div.detail-wrap{
	display:block;
}

body.news-detail .newsdetail-left-box{
	width:100%;
	padding: 35px 0 0 0;
}
body.news-detail .newsdetail-right-box{
	width:100%;
	padding: 35px 0 0;
}
body.news-detail .newsdetail-subttl-area {
	width:100%;
	padding: 35px 0 30px 0;
}
body.news-detail .newsdetail-right-box {
    width: 100%;
    margin: 0 auto;
    padding: 0 20%;
}




body.news-detail .newsdetail-title-box,
body.news-detail #content-box {
	float: left;
	width:100%;
	padding: 35px 0 0 0;
}



/*店舗一覧
***************************************************************************************/
body.shop_list-index .shoplist-wrap{
	display:block;
}
body.shop_list-index .shoplist-wrap .shoplist-left-box{
	width:100%;
}
body.shop_list-index .shoplist-wrap .shoplist-right-box {
  width:100%;
}

.tb-Block{
	display:block;
}
.tb-None{
	display:none;
}

body.shop_list-index .sel_boxSP {
	display: block;
	background-image: url(/lib/img/shoplist/img_formarrow.png);
	background-size: 27px 27px;
	background-position: right center;
	background-repeat: no-repeat;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 2px;
	width: 100%;
	height: 30px;
	line-height: 30px;
	font-size: 16px;
	padding-left: 10px;
	color: #333333;
	background-color: #fff;
	border: 2px solid #FDD000;
	cursor: pointer;
	margin:20px 0;
}
body.shop_list-index select.sel_boxSP::-ms-expand {
		display: none;
}



/*店舗詳細
***************************************************************************************/


	/*コンテンツラップ*/
	#contentsWrap{
		position: relative;
		width: 100%;
		padding: 0;
		margin: 0 auto;
	}		

	/*セクション初期設定*/
	#contentsWrap section{
		width:100%;
		margin:0 auto;
	}
	
	/*メインイメージ*/
	#contentsWrap section.mainImg{
		width:100%;
		margin-bottom:15px;
	}
	#contentsWrap section.mainImg img{
		width:100%;
	}						
	#contentsWrap section.mainImg h1{
		margin:0;
		padding:0;
	}
	
		/*店内案内画像*/
	#contentsWrap section.storeDetail{
		width:100%;
		padding:0 10px;
		/*margin: 0 0 32px 0;*/
	}
	#contentsWrap section.storeDetail img{
		/*width:100%;*/
	}
		/*店内案内画像おわり*/


	/*店舗地図エリア*/			
	#contentsWrap section.mapArea{
		width:100%;
		padding:0 10px 0px;
	}	
				
	/*地図エリアレイアウト*/
	#contentsWrap section.mapArea .storeInfo{
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		box-sizing:border-box;
		margin-bottom:32px;
	}
	
		/*住所BOX*/
	#contentsWrap section.mapArea .storeInfo .shopInfo{
		-webkit-flex-basis: 100%;
		-ms-flex-basis    : 100%;
		flex-basis        : 100%;
		margin-bottom: 60px;
	}
	
		/*GoogleMAPBOX*/
	#contentsWrap section.mapArea .storeInfo .mapInfo{
		-webkit-flex-basis: 100%;
		-ms-flex-basis    : 100%;
		flex-basis        : 100%;
		
		margin-bottom:8px;
	}			
			/*地図*/
	#contentsWrap section.mapArea .mapInfo iframe{
		width:100%;
		height:220px;
	}	

		/*店名*/
	#contentsWrap section.mapArea h2{
		font-size:1.8rem;
		margin-bottom:8px;
	}
	
		/*営業時間*/
	#contentsWrap section.mapArea .storeInfo p:nth-child(1){
		font-size:1.3rem;
		padding-bottom:20px;
		    line-height: 1.2;
	}
		/*電話番号*/
	#contentsWrap section.mapArea .storeInfo p:nth-child(2){
		font-size:1.3rem;
		padding-bottom:20px;
		    line-height: 1.2;
	}		
		/*郵便版g脳*/
	#contentsWrap section.mapArea .storeInfo p:nth-child(3){
		font-size:1.3rem;
		padding-bottom:20px;
		    line-height: 1.2;
	}		
		/*住所*/
	#contentsWrap section.mapArea .storeInfo p:nth-child(4){
		font-size:1.3rem;
		padding-bottom:5px;
		    line-height: 1.2;
	}	
	
	
	
	
	
	/*西武渋谷店情報ボタン*/
	#contentsWrap section.mapArea tinyBtn{
		background:#F4F4F4;
		padding:0 0 100px 0;
	}
	#contentsWrap .tinyBtn {
		width: 156px;
		height: 22px;
		margin-left: 5px;
		padding: 0;
	}
	#contentsWrap .tinyBtnArea{
		margin-bottom:20px;
	}
	
	#contentsWrap .tinyBtnArea a {
		display: block;
		position: relative;
		z-index: 100;
		text-align: center;
		background: #F4F4F4;
		color: #000000;
		font-size: 1.1rem;
		line-height: 23px;
		text-decoration: none;	}
	#contentsWrap .tinyBtn a:hover {
		background: #3ab2e9;        /* マウスオーバーカラー */  
	}
				
	#contentsWrap .tinyBtn a:before {        /*白いひし型 */
		display: block;
		content: "";
		position: absolute;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		top: 50%;
		right: 20px;
		width: 6px;
		height: 6px;
		margin-top: -4px;
		background: #000000;
	}
	#contentsWrap .tinyBtn a:after {        /*バックグラウンドと同じ色のひし型をずらして「before要素」を隠す */
		display: block;
		content: "";
		position: absolute;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		top: 50%;
		right: 23px;
		width: 6px;
		height: 6px;
		margin-top: -4px;
		background: #F4F4F4;
	}
	#contentsWrap .tinyBtn a:hover:after {        /*「after要素」のマウスオーバー（カラーを合わせる） */  
		background: #3ab2e9;
	}	


	
	/*Special用大枠*/
	#contentsWrap section.special{
		width:100%;
		margin:0 auto;
		background:#F9D12C;
		padding:25px 0 25px 0;
	}
	
	/*event、news用大枠*/
	#contentsWrap section.event,
	#contentsWrap section.news{
		width:100%;
		margin:0 auto;
		background:#F4F4F4;
		padding:25px 0 25px 0;			
	}
	
	/*各コンテンツ内枠*/
	#contentsWrap section.special .specialContentsWrap,
	#contentsWrap section.event .eventContentsWrap,
	#contentsWrap section.news .newsContentsWrap{
		width:100%;
		margin:0 auto;
	}
	
	/*各コンテンツ見出し*/
	#contentsWrap section.event h2,
	#contentsWrap section.news h2{
		border-bottom:1px solid #EBA700;
		padding-bottom:10px;
		margin:0 10px 20px ;
		font-size:1.55rem;
		text-align:center;				
	}
	#contentsWrap section.special h2{
		border-bottom:1px solid #666666;
		padding-bottom:10px;
		margin:0 10px 20px ;
		font-size:1.55rem;
		text-align:center;				
	}
	
	#contentsWrap section.event h2 img,
	#contentsWrap section.news h2 img{
		width:46px;
	}
	#contentsWrap section.special h2 img{
		width:59px;
	}
	
	/*カードコンテンツ*/
	#contentsWrap section p.imgWrap{
    position: relative;
		margin:0;
	}
	#contentsWrap section ul{
		margin:0;
		padding:0;
	}
		/**カード大枠**/
	#contentsWrap section ul.contentsCardWrap{
		width:100%;
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		box-sizing:border-box;
		padding:0 10px;
	}
		/*カード単品*/
	#contentsWrap section ul.contentsCardWrap li{
		list-style:none;
		background:#FFFFFF;
		border-radius:5px;
		-webkit-width: calc((100% - 10px) / 2);
		width: calc((100% - 10px) / 2);
		margin:0 10px 9px 0;
		padding-bottom:40px;
		overflow:hidden;
	}
		/*スペシャルカード単品*/
	#contentsWrap section.special ul.contentsCardWrap li{
		list-style:none;
		background:#FFFFFF;
		border-radius:5px;
		width: 100%;
		margin:0 0 9px 0;
		padding-bottom:0px;
		overflow:hidden;
	}	
	
	

	#contentsWrap section ul.contentsCardWrap li:nth-child(2n){
		margin-right:0px;
	}
	

			/*カード中身*/
	#contentsWrap section ul.contentsCardWrap li p.imgWrap{
		width:100%;
		position: relative;
		margin-bottom:13px;
	}
	#contentsWrap section ul.contentsCardWrap li p.imgWrap img{
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		max-width: 100%;
		max-height: 100%;
	}	
	/*Specialカード中身************************************************/
	
	#contentsWrap section.special ul.contentsCardWrap li .spWrap{
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
	}
	
	#contentsWrap section.special ul.contentsCardWrap li .spWrap .spWrapLeft{
		width:50%;
	}
	#contentsWrap section.special ul.contentsCardWrap li .spWrap .spWrapRight{
		width:50%;
	}
	#contentsWrap section.special ul.contentsCardWrap li p.imgWrap{
		width:-webkit-calc(100% - 22px);
		width:calc(100% - 22px);
		margin:16px 11px 16px;
		position: relative;
	}
	#contentsWrap section.special ul.contentsCardWrap li p.imgWrap img{
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		max-width: 100%;
		max-height: 100%;
	}
	#contentsWrap section.special ul.contentsCardWrap li .spWrap .spWrapRight,
	#contentsWrap section.special ul.contentsCardWrap li .spWrap .spWrapLeft{
			display: flex; /* 子要素をflexboxで揃える */
			flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
			justify-content: center; /* 子要素をflexboxにより中央に配置する */
			align-items: start;  /* 子要素をflexboxにより中央に配置する */
	}
	/*Specialカード中身************************************************/		
	
	
	
		/*カード内タイトル*/
	#contentsWrap section ul.contentsCardWrap li p.itemTtl{
		margin:0 13px;
		text-align:left;
		font-size:1.1rem;
	}
		/*カード内サブタイトル*/
	#contentsWrap section ul.contentsCardWrap li p.subItemTtl{
		margin:0 13px;
		text-align:left;
		font-size:1.3rem;
		font-weight:bold;
	}	
		
			
	/*他の店舗をさがすボタン*/
	#contentsWrap section.btnArea{
		background:#F4F4F4;
		padding:0 0 100px 0;
	}
	#contentsWrap .shopSearchbtn {
		overflow: hidden;
		width: 75%;
		height: 35px;
		margin: 0 auto;
		padding: 0;
	}
	#contentsWrap .shopSearchbtn a {
		display: block;
		position: relative;
		z-index: 100;
		text-align:center;
		background: #000000;
		color: #fff;
		font-size: 1.4rem;
		line-height: 35px;
		text-decoration:none;
	}
	#contentsWrap .shopSearchbtn a:hover {
		background: #3ab2e9;        /* マウスオーバーカラー */  
	}
				
	#contentsWrap .shopSearchbtn a:before {        /*白いひし型 */
		display: block;
		content: "";
		position: absolute;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		top: 50%;
		left: 10px;
		width: 5px;
		height: 5px;
		margin-top: -2px;
		background: #fff;
	}
	#contentsWrap .shopSearchbtn a:after {        /*バックグラウンドと同じ色のひし型をずらして「before要素」を隠す */
		display: block;
		content: "";
		position: absolute;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		top: 50%;
		left: 12px;
		width: 5px;
		height: 5px;
		margin-top: -2px;
		background: #000000;
	}
	#contentsWrap .shopSearchbtn a:hover:after {        /*「after要素」のマウスオーバー（カラーを合わせる） */  
		background: #3ab2e9;
	}		
	
/****************************************************************************************************************************************************************************************/
	/*続きを読むスタイル*/
.grad-wrap {
  position: relative;
}
.grad-wrap + .grad-wrap {
  margin-top: 40px;
}
.grad-trigger {
		background: url(../img/shoplist/btn_acord_off.png) no-repeat top left;
		
		background-size: contain;
		z-index: 2;
		position: absolute;
		right: 0;
		bottom: -3rem;
		left: 0;
		width: 98px;
		margin: auto;
		padding: 10px 0;
		color: #fff;
		cursor: pointer;
		transition: .2s ease;
	}
/*.grad-trigger::after {
  content: "続きを読む"
}*/

.grad-item {
  position: relative;
  overflow: hidden;
}
.grad-item.is-hide {
  height:220px; /*隠した後の高さ*/
}
	.grad-item::before {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	content: "";
	width: 100%;
	height: 100px;
	background:-ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,1.0) 70%, #fff 100%);
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,1.0) 70%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,1.0) 70%, #fff 100%);
}
.grad-trigger.is-show {
  bottom: -3em;
	background: url(../img/shoplist/btn_acord_on.png) no-repeat top left;
	background-size: contain;
}
/*.grad-trigger.is-show::after {
  content: "閉じる"
}*/
.grad-trigger.is-show + .grad-item::before {
  display: none;
}
/****************************************************************************************************************************************************************************************/


/*event news*//*続きを読むスタイル*/
/****************************************************************************************************************************************************************************************/
	
.gradwrap {
  position: relative;
}
.gradwrap + .gradwrap {
  margin-top: 40px;
}
.gradtrigger {
		background: url(../img/shoplist/btn_acord_off.png) no-repeat top left;
		z-index: 2;
		position: absolute;
		right: 0;
		bottom: -4rem;
		left: 0;
		width: 98px;
		margin: auto;
		padding: 10px 0;
		color: #fff;
		cursor: pointer;
		transition: .2s ease;
		background-size: contain;
	}

.graditem {
  position: relative;
  overflow: hidden;
}
/*.graditem.ishide {
  height:315px; 
}*/
/*.graditem::before {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	content: "";
	width: 100%;
	height: 200px;
	z-index:1;
	background:-ms-linear-gradient(top, rgba(244,244,244,0) 0%, rgba(244,244,244,0.2) 30%, rgba(244,244,244,0.5) 40%, rgba(244,244,244,1.0) 60%, #F4F4F4 100%);
	background: -webkit-linear-gradient(top, rgba(244,244,244,0) 0%, rgba(244,244,244,0.2) 30%, rgba(244,244,244,0.5) 40%, rgba(244,244,244,1.0) 60%, #F4F4F4 100%);
  background: linear-gradient(top, rgba(244,244,244,0) 0%, rgba(244,244,244,0.2) 30%, rgba(244,244,244,0.5) 40%, rgba(244,244,244,1.0) 60%, #F4F4F4 100%);
}*/
.gradtrigger.isshow {
  bottom: -4rem;
	background: url(../img/shoplist/btn_acord_on.png) no-repeat top left;
	background-size: contain;	
}
.gradtrigger.isshow + .graditem::before {
  display: none;
}




/*店舗詳細info SPECIAL EVENT NEWS
***************************************************************************************/

.shop_list-info .contents-box {
	display: block;
}
.shop_list-info .main-contents .left-contents,
.shop_list-info .main-contents .right-contents,
.shop_list-info .main-contents .right-contents img {
	width:100%;
}
.shop_list-info .main-contents p.back {
	padding:60px 60px 30px;
	font-size: 1.2rem;
	text-align: center;
}
.shop_list-info .main-contents .back a{
	padding: 10px 0;
	background:#000 url(../lib/img/shoplist/ico_arrow.png) no-repeat left 10px center;
	color: #FFF;
	margin: 0 auto;
	display: block;
}