@charset "utf-8";
/* 高雄 */

.tele-ja {    font-size: 18px;}

.top #header {min-height: 350px;}
/* .headerBoxList-item{width:100%;} */
.top #header .btnE{padding-top: 5px;padding-bottom: 5px;}

.headerBoxList-item p.headerBoxList-item-text span{padding-left:1.0em;}
.headerBoxList-item p.headerBoxList-item-text span a{color:#00A26B;letter-spacing:2.0px;text-decoration:underline;}
.top .mainBtn-inner a.btnE{}
.top .mainBtn-inner a.btnE img{float: left}
.top .mainBtn-inner a.btnE span{display: block;line-height: 1.4em;font-size: 18px;}
.top .mainBtn-inner a.btnE span:nth-of-type(2){display: block;font-size: 16px;}
.global_navi li a{padding: 0 6px;font-size:15px; }


#boxPopular{
	width:100%;
	margin:0 auto 40px;
}

#boxPopular h2{
	padding:5px 10px;
	border-right:1px solid #999999;
	border-bottom:none;
	border-left:1px solid #999999;
	border-top:4px solid #00A26B;
	background:none;
	border-radius:0;
}

#boxPopular .content880 h3{
  margin: 0 10px 0;
  padding-left: 20px;
  line-height: 30px;
  background: url(/common_asp/popular/images/h_bg.gif) no-repeat 0 0;
  font-size: 16px;
  color: #000;
}
#localShop h3 {
    background:transparent url(/common/images/h3_bg.jpg) no-repeat 0 100%;
    clear: both;
    color: #00A26B;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.3;
    margin-top: 20px;
    padding: 6px 5px 7px 20px;
}

#boxPopular h4{/* width:840px; */
	clear:both;
	width:100%;
	margin:20px auto 10px;
	padding-left:50px;
	line-height:40px;
	font-size:18px;
	background-repeat:no-repeat;
	background-position:0 50%;
}
#boxPopular h4 img{
	margin-left:15px;
}

/* 2. content
=========================================================*/
body.guide-detail .mainWrapper #content #titPopular>h2{display: none !important;}
.leadPop{position:relative;margin:0 -10px;padding:12px 36px 77px 63%;font-size: 11px;line-height: 1.26;
background:url(/common_asp/popular/images/tit_able.gif) no-repeat 0 0;background-size: contain;}

/* #navContactTW
---------------------------------------------------------*/
  #content #navContactTW li a img{
    max-width: 280px;
  }


/* table Lanking
---------------------------------------------------------*/
#tabLanking{
	width:800px;
	position:relative;
	margin: 20px auto 30px auto;
}
#tabLanking td a{
	display:block;
	margin-left:-12px;
	padding-left:12px;
	background:transparent url(/common/images/for_ul_mk1.png) no-repeat 0 .4em;
	text-decoration:underline;
}
.tabLank-1,.tabLank-2,.tabLank-3,.tabLank-4{
	width:300px;
	height:48px;
	padding:20px 0 20px 100px;
	background-repeat:no-repeat;
	background-position:20px 50%;
	font-size:14px;
	line-height:1.4;
}
#tabLanking .tabLank-1,#tabLanking .tabLank-3{
	background-color:#fff;
}
#tabLanking .tabLank-2,#tabLanking .tabLank-4{
	background-color:#EBEBEB;
}
.tabLank-1{background-image:url(/common_asp/popular/images/g_num_1.gif);}
.tabLank-2{background-image:url(/common_asp/popular/images/g_num_2.gif);}
.tabLank-3{background-image:url(/common_asp/popular/images/g_num_3.gif);}
.tabLank-4{background-image:url(/common_asp/popular/images/g_num_4.gif);}
.tabLankMap {width: auto;vertical-align:top;}
.tabLankMap div{
	position:relative;
	height:auto;
}
.tabLankMap div img{
	position:absolute;
	top:0;
	right:0;
}

body:not(.top) .global_navi{position: absolute;top: 3em;}
body:not(.top) ul#navGlobal{}
body:not(.top) ul#navGlobal li{}
body:not(.top) ul#navGlobal li a{}
body:not(.top) #navGlobal a{padding-left:13px;padding-right:13px;}


/* LINE */
#header div.headerBoxLists > ul{display: flex;justify-content: center;}
#header div.headerBoxLists > ul li{display: flex;flex-direction: column;justify-content: center;}
/*
#header div.headerBoxLists{min-height: 100px;}
#header div.headerBoxLists > ul{text-align: right;}
#header div.headerBoxLists ul li:last-child{width: 355px;}
#header div.headerBoxLists ul li:FIRST-CHILD{display: block;margin: 0 auto;text-align: center;}
#header div.headerBoxLists ul li:nth-child(2){width:390px;text-align: right;padding-right: 0px;}
#header div.headerBoxLists ul li:nth-child(2) img{margin-left: 10px;}
#header div.headerBoxLists ul li:last-child{width:355px;background-position: left 25px center;}
#header div.headerBoxLists ul li:FIRST-CHILD p{position: relative;}
.headerBoxLists #headerSubErea{margin-top: -170px;}
*/


#online{position:absolute;display:block;margin:auto;top:-182px;left:0;right:0;width:300px;background-color:#fff;border-radius:8px;box-shadow: 2px 2px 2px gray;}
#online img{border:1px solid #fff;border-radius:6px;width:100% !important;}
#online:hover {box-shadow: none;}
#online:hover img{opacity:0.8;}

/* Lankin Area Detail
---------------------------------------------------------*/
.areaNum1 h4{background:url(/common_asp/popular/images/num_1.gif);}
.areaNum2 h4{background:url(/common_asp/popular/images/num_2.gif) no-repeat 0 50%;}
.areaNum3 h4{background:url(/common_asp/popular/images/num_3.gif) no-repeat 0 50%;}
.areaNum4 h4{background:url(/common_asp/popular/images/num_4.gif) no-repeat 0 50%;}
.areaNum5 h4{background:url(/common_asp/popular/images/num_5.gif) no-repeat 0 50%;}

.tabLankDetail{
	width:780px;
	margin:10px auto;
}
.areaPhoto{
	width:250px;
	text-align:center;
	vertical-align:middle;
	background-color:#EFEFEF;
}
.areaInfo{
	padding-left:20px;
	vertical-align:top;
}
.areaInfoico th{
	padding-right:5px;
	vertical-align:top;
}
.areaInfoico td{
	padding:0 4px 4px 0;
}
.areaInfo p{
	margin:10px 0;
}
p.areaTit{
	padding-left:34px;
	line-height:32px;
	font-weight:bold;
	background:url(/common_asp/popular/images/g_subway.gif) no-repeat 0 50%;
}


.boxAreaSearch{margin:20px auto 0 auto;	padding:10px 0 1px 0;	background-color:#EEEEEE;font-size: 12px;}
.boxAreaSearch a{
	display:block;
	float:right;
	width:222px;
	margin-top:-3px;
}
.boxAreaSearch p{margin:0;	padding:0 20px 0px;}
.boxAreaSearch p br{display: none;}


section.newsModule .boxNotice{width:100%;}
section.newsModule .boxNotice dl dt{}
section.newsModule .boxNotice dl dd{padding: 14px 9em 5px 1.0em ;}
section.newsModule .boxNotice dd a {right: 11px;}

/* content
---------------------------------------------------------*/
/* list */
#boxPopular ul.mkLink{
	padding:0;
	list-style:none;
}
#boxPopular .mkLink li{
	padding-left:15px;
	background:url("/common_local/images/for_mk_arrow2.gif") no-repeat scroll 0 0.2em rgba(0, 0, 0, 0);
}
#boxPopular .areaInfo ul.mkLink{
	padding-left:30px;
}


/* ガイド */
#container.guide-area{}
#container.guide-area #boxPopular{}
#container.guide-area #boxPopular .tabLankDetail td p{}
#container.guide-area #boxPopular .tabLankDetail td p:nth-of-type(1){float:right !important;padding-left:15px;}
#container.guide-area #boxPopular .tabLankDetail td p:nth-of-type(2){float:none !important;font-size:15px;line-height:1.8;}

body.guide-detail #content .content .guide-ttl{width: auto !important;}
body.guide-detail .mainWrapper #guide-list{width:  auto !important;}
body.guide-detail .mainWrapper #guide-list div.guide-text{}
body.guide-detail .mainWrapper p.guide-notes{width:  auto !important;}
body.guide-detail .mainWrapper #content .content .content770{width:  auto !important;}
body.guide-detail .mainWrapper #content .content .content820{width:  auto !important;}
body.guide-detail .mainWrapper #content .content .content840{width:  auto !important;}
body.guide-detail .mainWrapper #content .content .guide-ttl{width:  auto !important;}
body.guide-detail .mainWrapper #content .content .guide-subttl{width:  auto !important;}
body.guide-detail .mainWrapper #content .content .guide-subtext{width:  auto !important;}



@media screen and (max-width: 767px) {
#header div.headerBoxLists > ul{display:block}
  #tabLanking{
    width:auto;
  }
  #tabLanking tr:first-child{
/*    padding-top: 350px;*/
  }
  .tabLankMap {
    position:absolute;
    width: 100%;
    height:auto;
    top: -350px;
    right: 0;
  }
  .tabLankMap div {
    text-align: center;
  }
  .tabLankMap div img {
    position: relative;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  .tabLank-1,.tabLank-2,.tabLank-3,.tabLank-4{
    display: block;
    width: auto;
    height: auto;
  }
  .tabLank-1 {
    margin-top:  350px;
  }

  #guide.detail h4{width: 100% !important;padding-left: 0 !important;background-image: none;}
  #guide.detail p{width: 100% !important;}
  #guide.detail .guide-subtext{padding-left: 0.0em !important;}

  body.guide-detail .mainWrapper #content .content h3{margin-left: 0;margin-right: 0;line-height: 2.8;}
  body.guide-detail .mainWrapper #content .content .areaInfo{padding-left: 0;}
  body.guide-detail .mainWrapper #content .content .areaInfo p{width: 100%;float: none;  }
  body.guide-detail .mainWrapper #content .content .areaInfo p img{display: block !important;margin:  0 auto; }
  body.guide-detail .mainWrapper #content .content .boxAreaSearch {padding-bottom: 50px;position: relative;}
  body.guide-detail .mainWrapper #content .content .boxAreaSearch .btnE{position: absolute;bottom: 10px;left:0;right: 0;margin: auto;}
  body.guide-detail .mainWrapper #content .content #boxPopular h4 span{display: flex;justify-content: flex-start;gap: 2px;}
  body.guide-detail .mainWrapper #content .content #boxPopular h4 span>*{margin: 0;height: 32px !important;width: auto !important;}


  
}


@media screen and (max-width: 767px) {
  #boxPopular {
    width: auto;
  }
  .leadPop {
    padding: 10px;
    background-image:none;
  }
#online{position:relative;width:100%;top:0;}
#online img{width:100% !important;top:0;}
#headNavInner.fixed #online {width:166px !important;top:0;height:40px;position:absolute;margin:0;left:100px;box-shadow:unset;}
#headNavInner.fixed #online img{width:auto;height:100%;}

}




@media screen and (max-width: 980px) {
	.headerBoxLists #headerSubErea {
			margin-top: 20px;
			width: 100%;
	}
#wrapper #header div.headerBoxLists ul li{
    width: 100% !important;
    text-align: center;
    padding:5px 0;
}	
#header div.headerBoxLists ul li:nth-child(2) img{display: inline}
#pagetopContent .lineBox, #footer #pagetopFooter .lineBox{display: block;margin-top:5px;float: left}
#pagetopContent .inquiryBox-text span, #footer #pagetopFooter .inquiryBox-text span:last-child{font-size:10px;}
#pagetopContent .lineBox img, #footer #pagetopFooter .lineBox img{width:66px !important;}
#online{position:relative;top:0;}

.headerBoxList-item p.headerBoxList-item-text span a{display:block;}


}

@media screen and (max-width: 599px) {
	body.top #container{padding-top:20px;}
	section.newsModule .boxNotice dl dd{padding: 15px 1.0em 5px 1.0em ;clear:both;}
	section.newsModule .boxNotice dl dd a{display:block;text-align:right;background-position: right 8em center;}
	#localShop ul.bannerList li.bannerItem{flex-basis:49%;margin-bottom:5px;}
	#localShop ul.bannerList li.bannerItem a img{width: 100%;height: auto;}
	body #footer{padding-top:20px;}


	/* ガイド */
	#container.guide-area{}
	#container.guide-area #boxPopular{}
	#container.guide-area #boxPopular .tabLankDetail td p{}
	#container.guide-area #boxPopular .tabLankDetail td p:nth-of-type(1){float:none !important;padding:0;text-align:center;}
	#container.guide-area #boxPopular .tabLankDetail td p:nth-of-type(1) img{margin-bottom:10px;}
	#container.guide-area #boxPopular .tabLankDetail td p:nth-of-type(2){float:none !important;font-size:14px;}

}


@media screen and (max-width: 767px) {
	body.guide #content-body{}
	body.guide #content-body p.guide-option{width: auto;}
	body.guide #content-body #guide-list{width: 100%;}
	body.guide #content-body #guide-list div.guide-text{width: 50%;}
	body.guide #content-body #guide-list .clearLeft{width: 100%;}
	body.guide #content-body .guide-subttl-chk{width: 100%;}
	body.guide #content-body div.info-box{max-width: 100%;}
	body.guide #content-body div.info-box div.info{width: 100%;float: none;clear: both;margin: 0 auto;}
	body.guide #content-body div.info-box div.info p.text{float: none;padding-left: 57%;}
	body.guide #content-body div.info-box div.info p.text-r{margin-top: -26px;}
	body.guide #content-body div.info-box img{width: 100%;}
	body.guide #content-body div.info-l{width: 100%;}
	body.guide #content-body div.circle-box{width: 100%;float: none;}
	body.guide #content-body div.circle-s{width: 100%;float: none;margin:0 auto;}
	body.guide #content-body div.circle{width: 100%;float: none;margin: 0 auto;}
	body.guide #content-body div.info-l p.etc{width: 100%;float: none;}

	body.guide #content-body p{width: auto !important; margin: 5px auto !important;}
	body.guide #content-body div{width: auto !important;}
	body.guide #content-body .guide-text{width: auto !important;float: none !important;}
	body.guide #content-body .guide-subtext{padding: 5px 10px 5px 10px !important;}
	.content820{width: 100%;}
}