@charset "utf-8";
/* shoplistスタイル */

#main {
  width: 932px;
}
ul.prefList{
    overflow: hidden;
    margin-bottom: 30px;
}
ul.prefList li{
    float: left;
    margin: 0 1px 1px 0;
}
ul.prefList .hokkaido > a   { background-color: #2ac45f; }
ul.prefList .kanto > a      { background-color: #4caafd; }
ul.prefList .koshinetsu > a { background-color: #fdb300; }
ul.prefList .hokuriku > a   { background-color: #fd8434; }
ul.prefList .chubu > a      { background-color: #ff68ff; }
ul.prefList .kinki > a      { background-color: #a856ff; }
ul.prefList .chugoku > a    { background-color: #fc4e9b; }
ul.prefList .shikoku > a    { background-color: #23c3db; }
ul.prefList .kyushu > a     { background-color: #5b5fff; }
ul.prefList .area li a,
ul.prefList li a            { background-color: #eee; }

ul.prefList .hokkaido > a:hover   { background-color: #67e09c; }
ul.prefList .kanto > a:hover      { background-color: #8bd0fe; }
ul.prefList .koshinetsu > a:hover { background-color: #fed600; }
ul.prefList .hokuriku > a:hover   { background-color: #fea41a; }
ul.prefList .chubu > a:hover      { background-color: #ffa3ff; }
ul.prefList .kinki > a:hover      { background-color: #cf94ff; }
ul.prefList .chugoku > a:hover    { background-color: #fd8dc7; }
ul.prefList .shikoku > a:hover    { background-color: #5ddfec; }
ul.prefList .kyushu > a:hover     { background-color: #989cff; }
ul.prefList .area li a:hover,
ul.prefList li a:hover      { background-color: #f4f4f4; }

ul.prefList li a {
    display: block;
    padding: .4em 1em;
    white-space: nowrap;
    -webkit-transition: background-color .1s;
    transition: background-color .1s;
}

.areaList .area > a:before,
.prefList a:before,
.backtoList a:before {
    display: inline-block;
    position: relative;
    top: -.1em;
    margin-right: .3em;
    vertical-align: middle;
}
.prefList li a:before,
.backtoList a:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
}
.areaList .prefList a:before {
    border-width: 4px 0 4px 8px;
    border-left-color: #fff;
}
.backtoList a:before {
    border-width: 4px 8px 4px 0;
    border-right-color: #ccc;
}
.section > .prefList a:before {
    top: 0;
    border-width: 6px 6px 0 6px;
    border-top-color: #fff;
}
.secTtl + .backtoList {
    margin: -.5em 0 .7em;
}

.pageTtl {
  margin-bottom: 40px;
}

#main .secTtl {
    position: relative;
    margin-bottom: 30px;
    padding: 0 0 .5em;
    font-size: 18px !important;
    font-weight: bold;
    background: url(/home/diahot/ecocute/common/img/bg_ttl_hd.gif) no-repeat 0 100%;
    z-index: 1;
}

.shop .areaTtl {
    margin-bottom: 1em;
    padding: 0 .8em;
    border-left: 2px solid #ff9326;
    font-size: 16px !important;
    font-weight: bold;
}

ul.shopList{
    margin-bottom: 50px;
}

.shop .shop_name,
.shop .shop_address {
    padding: .5em 1em .4em;
}

.shop .shop_name {
    border-bottom: 1px solid #fff;
    font-weight: bold;
    background-color: #eee;
}

.shop .shop_address {
    padding-bottom: .5em;
    font-size: 13px;
    background-color: #eee;
}

.shop_container {
  margin-bottom: 20px;
}






#content.shop .section {
    position: relative;
}

#content.shop .leadTxt {
    margin-left: 20px;
    padding: 20px 0;
    font-size: 18px;
    white-space: nowrap;
}

#content.shop .noteTxt .date {
    display: block;
    font-size: 90%;
    text-align: right;
}


/* 地図 */

#content.shop .areaMap {
    position: relative;
    height: 559px;
    margin-bottom: 160px;
}

#content.shop .shop_map {
    position: absolute;
    top: 0;
    left: 159px;
}
#content.shop .shop_map[usemap] {
    z-index: 1;
}

#content.shop .areaMap .hov {
    position: absolute;
    opacity: 0;
    -webkit-transition: opacity .1s;
    transition: opacity .1s;
}
#content.shop .areaMap .hov.on {
    opacity: 1;
}
#content.shop .areaMap .hokkaido.hov   { top: 0; right: 124px; }
#content.shop .areaMap .touhoku.hov   { top: 173px; right: 240px; }
#content.shop .areaMap .kanto.hov      { top: 352px; right: 265px; }
#content.shop .areaMap .koshinetsu.hov { top: 280px; right: 309px; }
#content.shop .areaMap .hokuriku.hov   { top: 319px; right: 380px; }
#content.shop .areaMap .tyubu.hov      { top: 358px; right: 316px; }
#content.shop .areaMap .kinki.hov      { top: 386px; right: 454px; }
#content.shop .areaMap .tyugoku.hov    { top: 386px; right: 549px; }
#content.shop .areaMap .shikoku.hov    { top: 465px; right: 560px; }
#content.shop .areaMap .kyushu.hov    { top: 436px; right: 681px; }


#content.shop .areaMap .hokkaido.hov:before   { content: url(/home/diahot/ecocute/shoplist/img/hokkaido.png); }
#content.shop .areaMap .touhoku.hov:before   { content: url(/home/diahot/ecocute/shoplist/img/touhoku.png); }
#content.shop .areaMap .kanto.hov:before      { content: url(/home/diahot/ecocute/shoplist/img/kanto.png); }
#content.shop .areaMap .koshinetsu.hov:before { content: url(/home/diahot/ecocute/shoplist/img/koshinetsu.png); }
#content.shop .areaMap .hokuriku.hov:before   { content: url(/home/diahot/ecocute/shoplist/img/hokuriku.png); }
#content.shop .areaMap .tyubu.hov:before      { content: url(/home/diahot/ecocute/shoplist/img/tyubu.png); }
#content.shop .areaMap .kinki.hov:before      { content: url(/home/diahot/ecocute/shoplist/img/kinki.png); }
#content.shop .areaMap .tyugoku.hov:before    { content: url(/home/diahot/ecocute/shoplist/img/tyugoku.png); }
#content.shop .areaMap .shikoku.hov:before    { content: url(/home/diahot/ecocute/shoplist/img/shikoku.png); }
#content.shop .areaMap .kyushu.hov:before    { content: url(/home/diahot/ecocute/shoplist/img/kyushu.png); }

ul.areaName{
    width: 932px;
    height: 500px;
    position: relative;
}
ul.areaName li{
    width: 146px;
    height: 32px;
    position: absolute;
}
ul.areaName li.hokkaido{top: -35px; right: 315px;}
ul.areaName li.touhoku{top: 170px; right: 75px;}
ul.areaName li.kanto{top: 287px; right: 93px;}
ul.areaName li.koshinetsu{top: 126px; right: 360px;}
ul.areaName li.hokuriku{top: 183px; right: 460px;}
ul.areaName li.chubu{top: 390px; right: 250px;}
ul.areaName li.kinki{bottom: 30px; right: 393px;}
ul.areaName li.chugoku{top: 235px; left: 197px;}
ul.areaName li.shikoku{bottom: 0px; left: 235px;}
ul.areaName li.kyushu{bottom: 180px; left: 78px;}


.area_list{
    width: 932px;
    overflow: hidden;
    margin-bottom: 10px;
}
.area_list p{
    color: #ffffff;
    display: inline-block;
    float: left;
    width: 162px;
    margin-right: 2px;
}
.area_list p a,
.area_list p span{
    font-size: 16px;
    color: #ffffff;
    display: block;
    margin-left: 12px;
    padding: 9px 0;
}
.area_list p a:hover{
    text-decoration: none;
    cursor: pointer;
}
.area_list p > a:before,
.area_list p > span:before{
    display: inline-block;
    position: relative;
    top: -.1em;
    margin-right: .3em;
    vertical-align: middle;
}
.area_list p > a:before,
.area_list p > span:before {
    content: url(/home/diahot/ecocute/shoplist/img/bg_shop_arrow.png);
}
.area_list ul{
    padding-left: 164px;
}
.area_list ul li{
    float: left;
    margin: 0 1px 5px 0;
}
.area_list ul li a,
.area_list ul li span{
    font-size: 16px;
    display: block;
    width: 107px;
    padding: 9px 0;
    white-space: nowrap;
    -webkit-transition: background-color .1s;
    transition: background-color .1s;
    background-color: #eee;
}
.area_list ul li a:before,
.area_list ul li span:before{
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    display: inline-block;
    position: relative;
    top: -.1em;
    margin-right: .3em;
    margin-left: 20px;
    vertical-align: middle;
    border-width: 7px 0 5px 9px;
    border-left-color: #fff;
}
.area_list ul li a:hover{
    background-color: #f4f4f4;
    text-decoration: none;
}
.area_list ul li span{
    color: #a6a6a6;
}

.area_list p.hokkaido_area{background-color: #1681b5;}
.area_list p.touhoku_area{background-color: #008d84;}
.area_list p.kanto_area{background-color: #096a37;}
.area_list p.koshinetsu_area{background-color: #469037;}
.area_list p.hokuriku_area{background-color: #8aa427;}
.area_list p.chubu_area{background-color: #d3a82a;}
.area_list p.kinki_area{background-color: #eb8413;}
.area_list p.chugoku_area{background-color: #d46617;}
.area_list p.shikoku_area{background-color: #dd4939;}
.area_list p.kyushu_area{background-color: #cd4a70;}

.area_list p.hokkaido_area:hover{background-color: #0aaeff;}
.area_list p.touhoku_area:hover{background-color: #00d7c9;}
.area_list p.kanto_area:hover{background-color: #13ae5c;}
.area_list p.koshinetsu_area:hover{background-color: #54c93c;}
.area_list p.hokuriku_area:hover{background-color: #bce720;}
.area_list p.chubu_area:hover{background-color: #ffc932;}
.area_list p.kinki_area:hover{background-color: #ff9d32;}
.area_list p.chugoku_area:hover{background-color: #ff7f23;}
.area_list p.shikoku_area:hover{background-color: #ff5746;}
.area_list p.kyushu_area:hover{background-color: #ff185b;}