@charset "utf-8";

/*
Theme Name: EPAGE_FRONT_THEME
Theme URI: http://www.urban-sp.jp/
Description: EPAGE・TOP（総合TOP・カテゴリTOP・エリアTOP）で使用するものになります
Version: 1.0
Author: URBAN PLANNING
Author URI: http://www.urban-sp.jp/
Tags: 
*/

@import "e_base.css";



/* トップ画像
------------------------- */
#top_img_area{
	width:780px;
	height:240px;
	overflow:hidden;
}

.mainVisual{
	margin:0 auto 30px;
}


/* その他のエリア用 */
#top_img_area.area_ptn_2{
	height:170px;
}

.top_img_loop_area{
	width:780px;
	height:240px;
	position:relative;
	overflow:hidden;
}


/* ループあり */
.loop_top_img_box{
	width:780px;
	height:240px;
	overflow:hidden;
	position:relative;
}

/* その他のエリア用 */
.area_ptn_2 .loop_top_img_box{ height:170px; }

.loop_top_img_box dt{
	width:780px;
	height:210px;
	position:absolute;
	left:0px;
	top:0px;
}

.loop_top_img_box dd{
	width:770px;
	height:20px;
	padding:0px 0px 0px 10px;
	position:absolute;
	left:0px;
	top:210px;
}

/* その他のエリア用 */
.area_ptn_2 .loop_top_img_box dt{ height:130px; }
.area_ptn_2 .loop_top_img_box dd{ top:135px; }




/* ループなしVer. */
#top_img_area.noloop{ position:relative; }
#top_img_area.noloop .loop_top_img_box{
	position:absolute;
	top:0px;
	left:0px;
}



/* 読み込み時画像が全部表示されるのを防ぐ→$(document).readyで解放 */
.loop_top_img_box img{ display:none; }
.loop_top_img_box img.disp{ display:inline; }



#top_img_control{
	position:absolute;
	top:178px;
	left:10px;
	padding:6px 10px;
	list-style:none;
/*
	border:#ccc 1px solid;
	background:#eee;
	opacity:0.4;
	filter:alpha(opacity=40);
	-ms-filter:"alpha(opacity=40)";
	-khtml-opacity:0.4;
	-moz-opacity:0.4;
*/
}

#top_img_area .e_top{ left:10px; }
#top_img_area .e_gourmet_top{ left:10px; }
#top_img_area .e_leisure_top{ left:10px; }
#top_img_area .e_life_top{ left:10px; }
#top_img_area .e_beauty_top{ left:10px; }
#top_img_area .e_study_top{ left:10px; }
#top_img_area .e_health_top{ left:10px; }
#top_img_area .e_yokohama_top{ left:10px; }
#top_img_area .e_kawasaki_top{ left:10px; }
#top_img_area .e_shonan_top{ left:10px; }
#top_img_area .e_tokyo_top{ left:10px; }


#top_img_control li{
	float:left;
	margin-left:10px;
}

#top_img_control li.first{
	margin-left:0px;
}

#top_img_control a{
	display:block;
	width:5px;
	height:5px;
	padding:3px;
	text-align:center;
	background:#ccc;
	text-indent:-9999px;
}

#top_img_control a:hover{
	background:#000;
}


/* 大エリア・パターン2 20160620 追加 */
#top_img_area.ptn_2{
	width:780px;
	height:auto;
}

#top_img_area.ptn_2 .loop_top_img_box{
	height:auto;
}

#top_img_area.ptn_2 .loop_top_img_box dt{
	width:780px;
	height:150px;
	position:relative;
}

#top_img_area.ptn_2 .loop_top_img_box dd{
	width:780px;
	position:relative;
	left:auto;
	top:auto;
}




/* エリアで探す・新着クーポン */
#top_map_coupon_area{
	overflow:hidden;
	width:780px;
	margin:30px auto 0px;
}

/* エリアで探す */
#top_map_area{
	overflow:hidden;
	width:510px;
	float:left;
}

#top_map_title{ margin:0px auto 10px; }
#area_map_area{
	margin:0px auto;
}

/* タブ部分 */
#area_tab{
	overflow:hidden;
	height:50px;
}

#area_tab li{
	float:left;
	list-style:none;
	margin-right:5px;
}

#top_map_area .map_wrap{
	width:504px;
	overflow:hidden;
	margin-bottom:5px;
	border-top:#6c0 8px solid;
	border-left:#6c0 2px solid;
	border-right:#6c0 2px solid;
	border-bottom:#6c0 2px solid;
	padding:1px;
}

#top_map_area .map_area{
	background:url("../images/map_area_bg.jpg") repeat-x 0px 0px;
	padding:10px;
}

#top_map_area .disnon{
	display:none;
}

#top_map_area .localarea_tb{
	border-collapse:collapse;
	width:100%;
	margin-bottom:5px;
}

#top_map_area .localarea_tb caption{
	text-align:left;
	font-weight:bold;
	font-size:16px;
	padding-left:5px;
}

#top_map_area .localarea_tb td{
	width:33%;
	text-align:left;
	background:url("../images/green_cursor_04.jpg") no-repeat 0px 6px;
	padding:0px 0px 5px 10px;
}

#top_map_area .localarea_tb td.none{
	background-image:none;
}

#top_map_area .localarea_other{
	text-align:right;
}

#top_map_area .localarea_other span{
	padding-left:10px;
	background:url("../images/green_cursor_04.jpg") no-repeat 0px 6px;
	color:#3774d9;
}

#top_map_area a{
	color:#3774d9;
}

/* 都道府県リスト */
.area_pref_wrap{
	overflow:hidden;
	margin-bottom:10px;
}

.area_pref_wrap .box_left,
.area_pref_wrap .box_right{ width:240px; }

.area_pref_wrap .box_left{ float:left; }
.area_pref_wrap .box_right{ float:right; }

.area_pref_wrap .localarea_tb{ margin-bottom:0px; }

#top_map_area .area_pref_wrap .localarea_tb .nocursor{
	background:none;
	padding:0px 0px 5px 0px;
}

.area_pref_wrap ul{
	display:table;
	width:100%;
}

.area_pref_wrap li{
	display:table-cell;
	width:50%;
	list-style:none;
	padding-left:10px;
	background:url("../images/green_cursor_04.jpg") no-repeat 0px 6px;
}




/* おすすめクーポン
------------------------- */
#top_new_coupon_title{ margin:0px auto 15px; }
.top_shop_coupon_box{
	border:1px dashed #c63;
	background:#FFFAE3;
	margin:0px auto 10px;
}

.top_shop_coupon_box a{
	display:block;
	padding:5px 0px;
	text-decoration:none;
	font-size:95%;
}

.coupon_top{
	overflow:hidden;
	width:240px;
	margin:0px auto;
}

.coupon_title{
	float:right;
	width:175px;
	font-weight:bold;
}

.coupon_thumb{
	background:#fff;
	float:left;
	text-align:center;
	width:55px;
}

.coupon_thumb img{
	max-height:40px;
}

.top_shop_list_area .top_shop_coupon_box .text_area{
	float:none;
	width:235px;
	margin:0px auto;
}





/* 店舗表示部分共通
------------------------- */
.top_shop_list_area{
	width:250px;
	overflow:hidden;
}

.top_shop_list_area.align_left{ float:left; }
.top_shop_list_area.align_right{ float:right; }

.top_shop_info_box{
	overflow:hidden;
	width:250px;
	margin-bottom:10px;
}

.top_shop_list_area .thumb{
	float:left;
	width:90px;
	text-align:center;
}

.top_shop_list_area .thumb img{
	height:68px;
}

.top_shop_list_area .text_area{
	float:right;
	width:150px;
}

.top_shop_list_area .category{
	color:#FF7400;
	font-size:90%;
	padding-top:5px;
}

.top_shop_list_area .news{
	font-size:90%;
	padding-top:5px;
}

.top_shop_list_area .date{ font-size:90%; }

.top_shop_list_area .shop_list_more{
	text-align:right;
	padding-right:20px;
}

.top_shop_list_area .shop_list_more a{
	color:#3774D9;
}


/* 特集・新店情報・お店からのニュース
------------------------- */
#top_special_shop_area{
	overflow:hidden;
	width:780px;
	margin:30px auto 0px;
}

/* 特集 */
#top_special_page_title{
	width:250px;
	height:35px;
	margin-bottom:15px;
}

#top_new_shop_news_area{
	overflow:hidden;
	width:515px;
	float:right;
}

.special_banner_box{
	width:250px;
	margin-bottom:10px;
	text-align:center;
}
.special_banner_box .banner{
	line-height:0px;
	font-size:0px;
}

.special_banner_box .banner img{
	max-width:230px;
}

.special_banner_box .title{
	padding:2px 10px 0px;
}

.special_page_list{
	padding-left:15px;
	list-style:none;
}

.special_page_list li{
	background:url("../images/green_cursor_01.jpg") no-repeat 0px 6px;
	padding-left:12px;
	margin-bottom:5px;
}

.special_page_list a{ color:#3774D9; }

/* 新店情報 */
#top_new_shop_title{ margin:0px auto 15px; }

/* お店からのニュース */
#top_shop_news_title{ margin:0px auto 15px; }


/* 人気店ランキング */
#top_ranking_area{
	width:780px;
	margin:30px auto 0px;
	overflow:hidden;
}

#ranking_disp_area{
	width:780px;
	margin:15px auto 0px;
	overflow:hidden;
}

.ranking_shop_box{
	width:140px;
	float:left;
	margin-right:20px;
}

.ranking_shop_box .rank{
	height:25px;
}

.ranking_shop_box .pic{
	text-align:center;
	height:95px;
}

.ranking_shop_box .pic img{
	max-width:120px;
	height:90px;
}

.ranking_shop_box .category{ height:17px; }

#rank_05.ranking_shop_box{ margin-right:0px; }

/* 総合ランキング（TOPのみ） */
#total_ranking_area{
	overflow:hidden;
}

#total_ranking_title{
	margin-bottom:10px;
	padding-top:20px;
}

#total_ranking_disp_area{
	overflow:hidden;
	margin-bottom:40px;
}

/* 個別カテゴリランキング */
#category_ranking_area{
	overflow:hidden;
	margin:0px auto;
}

.category_ranking_box{
	float:left;
	width:250px;
	height:260px;
	margin-right:10px;
}

.category_ranking_box.turn{ margin-right:0px; }

.category_ranking_box h4{ margin-bottom:10px; }
.category_ranking_box li{
	list-style:none;
	overflow:hidden;
	margin-bottom:10px;
}

.cate_rank .cate_rank_pic_area{
	float:left;
	width:70px;
	text-align:center;
}

.cate_rank img{
	max-width:70px;
	height:50px;
}

.cate_rank .cate_rank_text_area{
	float:right;
	width:170px;
}

.cate_rank .rank{
	color:#f63;
	font-size:12px;
	font-weight:bold;
}



/* E・PAGEブログ */
#top_eblog_area{
	width:780px;
	margin:30px auto 0px;
	overflow:hidden;
}

#top_eblog_title{
	margin:0px auto 15px;
}

#eblog_topic_list li{
	list-style:none;
	margin-bottom:10px;
	border-bottom:#efefef 1px dashed;
	overflow:hidden;
	padding-bottom:10px;
}

#eblog_topic_list .eblog_list_pic{
	float:left;
	width:120px;
	text-align:center;
}

#eblog_topic_list .eblog_list_txt{
	float:right;
	width:640px;
	padding-top:10px;
}

#eblog_topic_list img{
	max-width:70px;
	max-height:70px;
}

#blog_more_link{
	padding-right:20px;
	text-align:right;
}

#blog_more_link a{
	color:#3774d9;
}


/* オススメ店舗 */
#top_osusume_area{
	width:780px;
	margin:30px auto 0px;
	overflow:hidden;
}

#top_new_shop_title{ margin:0px auto 15px; }



/* エリアTOP
------------------------- */

/* エリア・カテゴリ */
#areatop_areacategory_area{
	width:780px;
	overflow:hidden;
	margin:20px auto 0px;
}

/* 小エリア一覧 */
#areatop_area_area{
	float:left;
	overflow:hidden;
	width:250px;
	background:#f0f0f0;
	padding-bottom:10px;
}

#areatop_area_area .areatop_area_area_subtitle{
	margin-bottom:10px;
}

#areatop_area_list_area{
	width:250px;
	overflow:hidden;
}

#areatop_area_list_area .area_list{
	width:125px;
	list-style:none;
}

#areatop_area_list_area .w250{
	width:250px;
}

#areatop_area_list_area .area_list li{
	padding:5px 10px 5px 25px;
	background:url("../images/green_cursor_02.jpg") no-repeat 10px 10px;
}


/* その他エリア用 */
#areatop_area_area.area_ptn_2{
	width:auto;
	float:none;
	margin-bottom:30px;
	padding-bottom:0px;
}

#areatop_area_area.area_ptn_2 .areatop_area_area_subtitle{
	padding:10px 0px 5px 10px;
}

.area_ptn_2 #areatop_area_list_area{
	width:auto;
	overflow:hidden;
}

.area_ptn_2 #areatop_area_list_area .area_list{
	width:auto;
	list-style:none;
}

.area_ptn_2 #areatop_area_list_area .area_list li{
	display:inline-block;
	margin:0px 10px 10px 0px;
}




#areatop_area_list_area .align_left{ float:left; }
#areatop_area_list_area .align_right{ float:right; }

#areatop_area_list_area a{ color:#3774D9; }


/* カテゴリ一覧
---------------------------------------------------------- */
#areatop_category_area{
	float:right;
	overflow:hidden;
	width:510px;
}

.areatop_category_list{
	width:250px;
	overflow:hidden;
	float:left;
	margin:0px 0px 10px 0px;
}

.areatop_category_list.left_btn{
	margin-right:10px;
	clear:both;
}

.areatop_category_list dt{
	width:240px;
	height:80px;
}

.areatop_category_list dd{
	width:250px;
	height:40px;
}


/* カテゴリ一覧 2016.06.20追加 大エリア（別パターン）
---------------------------------------------------------- */
#areatop_category_area.ptn2{
	overflow:hidden;
	width:780px;
}

#areatop_category_area.ptn2 .areatop_category_list{
	width:250px;
	overflow:hidden;
	float:left;
	margin:0px 0px 10px 15px;
}

#areatop_category_area.ptn2 .areatop_category_list.left_btn{
	margin-left:0px;
	clear:both;
}



/* 新着クーポン・新店情報・お店からのニュース */
#areatop_coupon_newshop_news_area{
	width:780px;
	overflow:hidden;
	margin:30px auto 0px;
}



/* カテゴリTOP
------------------------- */

/* カテゴリ・エリア */
#categorytop_categoryarea_area{
	width:780px;
	overflow:hidden;
	margin:20px auto 0px;
}

#categorytop_category_area{
	width:520px;
	overflow:hidden;
}

#categorytop_categoryarea_area .align_left{
	float:left;
}

.category_subtitle{
	width:520px;
	overflow:hidden;
	margin-bottom:5px;
}

/* カテゴリTOP｜特集 */
#categorytop_special_area{
	width:520px;
	overflow:hidden;
	margin-bottom:5px;
}

#categorytop_category_list_area{
	width:520px;
	overflow:hidden;
}

#categorytop_category_list_area .category_list{
	list-style:none;
}

#categorytop_category_list_area .category_list li{
	padding:5px 10px 5px 25px;
	background:url("../images/green_cursor_01.jpg") no-repeat 10px 11px;
	float:left;
	white-space:nowrap;
}

#categorytop_category_list_area .category_list span{ margin-left:5px; }

#categorytop_category_list_area .category_list a{
	color:#3774D9;
}

/* A8 */
#categorytop_a8_area{
	border:#ccc 1px solid;
	margin-top:15px;
	text-align:center;
	padding-bottom:5px;
}

#categorytop_a8_area p{
	background:#fbfbfb;
	border-bottom:#ccc 1px solid;
	color:#ccc;
	padding:0px 15px;
	margin-bottom:10px;
	text-align:left;
}

#categorytop_a8_area img{
	max-width:480px;
}



/* 大エリア一覧 */
#categorytop_area_area{
	width:250px;
}

#categorytop_categoryarea_area .align_right{
	float:right;
}

#categorytop_area_area .area_subtitle{
	width:250px;
	overflow:hidden;
	margin-bottom:5px;
}

#categorytop_area_area dl{
	width:250px;
	overflow:hidden;
	background:#f0f0f0 url("../images/green_cursor_03.jpg") no-repeat 98% 93%;
	margin-bottom:3px;
}

#categorytop_area_area dt{
	width:70px;
	float:left;
}

#categorytop_area_area dd{
	width:170px;
	float:right;
}

#categorytop_area_area .area_name{
	font-size:14px;
	height:22px;
	color:#39BD00;
}

#categorytop_area_area .area_lead{
	font-size:10px;
	line-height:16px;
	padding-right:3px;
}

/* お店を探す */
#shop_find_area.topPage{
	padding:10px;
	width:100% !important;
	box-sizing:border-box;
}
#shop_find_area.topPage #shop_find_input_area{
	width:100% !important;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	box-sizing:border-box;
}
#shop_find_area.topPage .shop_find_object_area{
	box-sizing:border-box;
}
#shop_find_area.topPage .shop_find_btn_area{
	border:none;
	padding:0;
	margin:0;
	box-sizing:border-box;
}
.searchItem01{
	flex-basis:145px;
}
.searchItem02{
	flex-basis:460px;
}
.searchItem03{
}
.searchItem01 select{
	width:100%;
}
.searchItem02 input{
	width:100% !important;
	box-sizing:border-box;
}


/* 新着クーポン・新店情報・お店からのニュース */
#categorytop_coupon_newshop_news_area{
	width:780px;
	overflow:hidden;
	margin:30px auto 0px;
}

/* おすすめクーポンエリア*/
.couponBox{
	margin:0 auto 40px;
}
.couponBox__tit{
	margin-bottom:20px;
}
.couponBox__lst{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	margin-bottom:20px;
}
.couponBox__lst__item{
	flex-basis:24%;
	margin-bottom:15px;
	box-sizing:border-box;
	list-style:none;
}
.couponBox__lst__item a{
	text-decoration:none;
}
.couponBox__lst__item__pic{
	margin-bottom:6px;
}
.couponBox__lst__item__pic img{
	width:100%;
	height:140px;
	object-fit: cover;
}
.couponBox__lst__item__tit{
	color:#FF7200;
	font-size:14px;
	text-decoration:underline !important;
	margin-bottom:10px;
}
.couponBox__lst__item__name{
	font-size:12px;
	margin-bottom:5px;
}
.couponBox__lst__item__cat{
	color:#FF7200;
	font-size:11px;
}
.couponBox__lst__item__date{
	font-size:11px;
}
.couponBox__lnk{
	text-align:right;
}
.couponBox__lnk a{
	text-decoration:none;
	color:#2693FF;
	border:solid 1px #999999;
	padding:4px 30px;
	border-radius:5px;
}
/* ニュースエリア*/
.newsBox{
	margin:0 auto 40px;
}
.newsBox__tit{
	margin-bottom:20px;
}
.newsBox__lst{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	margin-bottom:20px;
}
.newsBox__lst__item{
	flex-basis:49%;
	margin-bottom:15px;
	box-sizing:border-box;
	list-style:none;
}
.newsBox__lst__item a{
	text-decoration:none;

	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
.newsBox__lst__item__pic{
	margin-bottom:6px;
	flex-basis:100px;
}
.newsBox__lst__item__pic img{
	width:100%;
	height:75px;
	object-fit: cover;
}
.newsBox__lst__item__cnt{
	flex-basis:260px;
}
.newsBox__lst__item__cnt__tit{
	color:#FF7200;
	font-size:14px;
}
.newsBox__lst__item__cnt__name{
	font-size:12px;
}
.newsBox__lnk{
	text-align:right;
}
.newsBox__lnk a{
	text-decoration:none;
	color:#2693FF;
	border:solid 1px #999999;
	padding:4px 30px;
	border-radius:5px;
}
/* 新店情報エリア*/
.newsshopBox{
	margin:0 auto 40px;
}
.newsshopBox__tit{
	margin-bottom:20px;
}
.newsshopBox__lst{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	margin-bottom:20px;
}
.newsshopBox__lst__item{
	flex-basis:49%;
	margin-bottom:15px;
	box-sizing:border-box;
	list-style:none;
}
.newsshopBox__lst__item a{
	text-decoration:none;

	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
.newsshopBox__lst__item__pic{
	margin-bottom:6px;
	flex-basis:100px;
}
.newsshopBox__lst__item__pic img{
	width:100%;
	height:75px;
	object-fit: cover;
}
.newsshopBox__lst__item__cnt{
	flex-basis:260px;
}
.newsshopBox__lst__item__cnt__tit{
	color:#FF7200;
	font-size:14px;
	margin-bottom:5px;
}
.newsshopBox__lst__item__cnt__cat{
	font-size:11px;
	color:#ff7200;
}
.newsshopBox__lst__item__cnt__name{
	font-size:12px;
}
.newsshopBox__lst__item__cnt__date{
	font-size:11px;
}
.newsshopBox__lnk{
	text-align:right;
}
.newsshopBox__lnk a{
	text-decoration:none;
	color:#2693FF;
	border:solid 1px #999999;
	padding:4px 30px;
	border-radius:5px;
}

/* オススメ店舗 */
.osusumeBox{
	margin-bottom:30px;
}
.osusumeBox__tit{
	margin-bottom:20px;
}
.osusumeBox__lst{
	background:#FFECE6;
	padding:10px 20px;
	list-style:none;
}
.osusumeBox__lst__item{
	padding:0 5px;
}
.osusumeBox__lst__item a{
	text-decoration:none;
}
.osusumeBox__lst__item__pic{
	margin-bottom:10px;
}
.osusumeBox__lst__item__pic img{
	width:100%;
	height:170px;
	object-fit: cover;
}
.osusumeBox__lst__item__tit{
	margin-bottom:10px;
	font-weight:bold;
	font-size:16px;
	background:url(../../images/loop_shop_ico.jpg) no-repeat left 4px;
	padding-left:20px;
}
.osusumeBox__lst__item__txt{
	color:#006DD9;
	text-decoration:underline;
	font-size:12px;
}
.osusumeBox__lst .slick-prev {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0px;
  z-index: 999;
  margin: auto;
}
.osusumeBox__lst .slick-next {
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  z-index: 999;
}
/*　エリアで探す（ボタン） */
.areaBtns{
	margin-bottom:30px;
}
.areaBtns__tit{
}
.areaBtns__lst{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	list-style:none;
	background:#FFFAE3;
	padding:10px;
}
.areaBtns__lst__item{
	text-align:center;
}
.areaBtns__lst__item img{
	width:100%;
	height:auto;
}

/*　エリアで探す（ポップアップ書式） */
.popupArea{
	width:600px;
}
.popupArea__tit{
	margin-bottom:15px;
}
.popupArea__tit img{
	width:100%;
	height:auto;
}
.popupArea__subtit{
	margin-bottom:15px;
	background:#ebffec;
	padding:5px;
	font-size:14px;
	font-weight:bold;
}
.popupArea__lst{
	margin-bottom:15px;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	list-style:none;
}
.popupArea__lst li{
	flex-basis:25%;
}
.popupArea__lst a{
	color:#3774d9;
	background: url(../images/green_cursor_04.jpg) no-repeat 0px 6px;
    padding: 0px 0px 5px 10px;
}