@charset "utf-8";

@charset "utf-8";

/* +++++++++++++++++++++++++++++++

 shops.css
 PC用

+++++++++++++++++++++++++++++++ */
.toggle_sp_panel { margin-bottom: 50px; }

/*
検索
-----------------------------------*/
#main .search {
    position: relative;
    display: table;
    width: 400px;
    margin: 0 auto;
    border: 3px solid #ccc;
}
#main .search.active { border-color: #333; }
#main .search input[type=text] {
    width: 343px;
    height: 15px;
    padding: 8px 5px 7px;
    line-height: 15px;
}

/* キーワード未入力 */
#search_keyword .error,
#main .search + .error {
    margin-bottom: 0;
    color: #f23524;
    text-align: center;
}


/*
カテゴリー別
-----------------------------------*/
.list_category {
    width: 840px;
    margin: 0 auto;
}
.list_category.item4 { width: 560px; }
.list_category.item5 { width: 700px; }
.list_category li {
    float: left;
    margin: 0 10px 10px 0;
}
.list_category a {
    position: relative;
    display: block;
    width: 128px;
    height: 38px;
    padding-top: 90px;
    border: 1px solid #ccc;
    font-size: 14px;
    text-align: center;
     transition: 0.1s linear;
}
.list_category a:hover {
    border-color: #333;
    background: #333;
    color :#fff;
    text-decoration: none;
}
.list_category a:after {
    position: absolute;
    top: 20px;
    left: 39px;
    display: block;
    width: 50px;
    height: 50px;
    background-image: url(/images/common/sprite_category.png);
    background-size: 550px auto;
    content: " ";
}
.list_category .category01:after { background-position: 0 0; } /* 婦人服・洋品 */
.list_category .category02:after { background-position: -50px 0; } /* 婦人服飾雑貨 */
.list_category .category03:after { background-position: -100px 0; } /* 紳士服・洋品 */
.list_category .category04:after { background-position: -150px 0; } /* ベビー・子供服 */
.list_category .category05:after { background-position: -200px 0; } /* 化粧品 */
.list_category .category06:after { background-position: -250px 0; } /* 呉服 */
.list_category .category07:after { background-position: -300px 0; } /* 宝飾品・時計 */
.list_category .category08:after { background-position: -350px 0; } /* 家庭用品・寝装品 */
.list_category .category09:after { background-position: -400px 0; } /* 食品 */
.list_category .category10:after { background-position: -450px 0; } /* レストラン・喫茶 */
.list_category .category11:after { background-position: -500px 0; } /* その他 */
.list_category .category12:after { background-position: 0 -100px; } /* スポーツ用品 */
.list_category .category13:after { background-position: -50px -100px; } /* 生活・雑貨・医療 */
.list_category .category14:after { background-position: -100px -100px; } /* カルチャー・サービス */
.list_category .category15:after { background-position: -150px -100px; } /* 食品／スイーツ */
.list_category .category16:after { background-position: -200px -100px; } /* 食品／デリ */
.list_category .category17:after { background-position: -250px -100px; } /* 食品／パン・グロサリー */
.list_category .category18:after { background-position: -450px 0; } /* 食品／イートイン・スタンド */
.list_category .category19:after { background-position: -300px -100px; } /* 食品／和洋酒 */
.list_category .category20:after { background-position: -400px 0; } /* 食品／生鮮食品 */
.list_category .category21:after { background-position: -350px -100px; } /* 食品／銘産 */
.list_category .category22:after { background-position: -400px -100px; } /* 食品／食品ギフト・その他 */
.list_category .category23:after { background-position: -500px 0; } /* 食品／その他 */

.list_category .category01:hover:after { background-position: 0 -50px; }
.list_category .category02:hover:after { background-position: -50px -50px; }
.list_category .category03:hover:after { background-position: -100px -50px; }
.list_category .category04:hover:after { background-position: -150px -50px; }
.list_category .category05:hover:after { background-position: -200px -50px; }
.list_category .category06:hover:after { background-position: -250px -50px; }
.list_category .category07:hover:after { background-position: -300px -50px; }
.list_category .category08:hover:after { background-position: -350px -50px; }
.list_category .category09:hover:after { background-position: -400px -50px; }
.list_category .category10:hover:after { background-position: -450px -50px; }
.list_category .category11:hover:after { background-position: -500px -50px; }
.list_category .category12:hover:after { background-position: 0 -150px; }
.list_category .category13:hover:after { background-position: -50px -150px; }
.list_category .category14:hover:after { background-position: -100px -150px; }
.list_category .category15:hover:after { background-position: -150px -150px; }
.list_category .category16:hover:after { background-position: -200px -150px; }
.list_category .category17:hover:after { background-position: -250px -150px; }
.list_category .category18:hover:after { background-position: -450px -50px; }
.list_category .category19:hover:after { background-position: -300px -150px; }
.list_category .category20:hover:after { background-position: -400px -50px; }
.list_category .category21:hover:after { background-position: -350px -150px; }
.list_category .category22:hover:after { background-position: -400px -150px; }
.list_category .category23:hover:after { background-position: -500px -50px; }

/*
五十音別
-----------------------------------*/
.wrap_initial {
    width: 740px;
    margin: 0 auto 50px;
}
.list_initial {
    float: left;
    width: 350px;
}
.list_initial + .list_initial {
    position: relative;
    margin-left: 30px;
}
.list_initial + .list_initial:before {
    position: absolute;
    top: 0;
    bottom: 10px;
    left: -22px;
    display: block;
    width: 5px;
    background: #ccc url(/images/common/bg_texture_w.png) repeat left top;
    background-size: 4px;
    content: " ";
}
.list_initial li {
    float: left;
    width: 58px;
    height: 58px;
    margin: 0 10px 10px 0;
    border: 1px solid #ccc;
    background: #f5f5f5 url(/images/common/bg_texture_w.png) repeat left top;
    background-size: 10px;
}
.list_initial a,
.list_initial span {
    display: block;
    width: 58px;
    height: 58px;
    margin: -1px;
    border: 1px solid #ccc;
    background: #fff;
    font-size: 15px;
    text-align: center;
    line-height: 58px;
    transition: 0.1s linear;
}
.list_initial span {
    background: transparent;
    color: #999;
}
.list_initial a:hover {
    border-color: #333;
    background: #333;
    color :#fff;
    text-decoration: none;
}

/*
フロア・エリア別
-----------------------------------*/
.table_floor {
    width: 800px;
    margin: 0 auto;
    border-top: 1px solid #d9d9d9;
}
.table_floor th,
.table_floor td {
    padding: 10px;
    border-bottom: 1px solid #d9d9d9;
}
.table_floor th {
    width: 50px;
    border-right: 1px solid #d9d9d9;
    font-size: 15px;
    font-weight: 300;
}
.table_floor a {
    display: block;
    padding: 8px 10px 7px;
    border-radius: 3px;
    transition: 0.1s linear;
}
.table_floor span {
    display: inline-block;
    margin-right: 1em;
    color: #666;
    transition: 0.1s linear;
}
.table_floor a:hover {
    background: #333;
    color :#fff;
    text-decoration: none;
}
.table_floor a:hover span { color: #ccc; }


/*
一覧
-----------------------------------*/
.list_shop {
    max-width: 800px;
    margin: 0 auto;
}


/* ヒットなし */
.box_empty {
    width: auto;
    max-width: 980px;
    margin: 0 auto;
    padding: 15px 0;
    background: #fcc url(/images/common/bg_texture_w.png) repeat left top;
    background-size: 10px;
}
.box_empty p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
}

/*
ショップ詳細
-----------------------------------*/
article.detail {/*margin-bottom: 50px;*/
/*以下追加*/max-width: 980px;margin: 0 auto 50px;display:-webkit-box;display: -webkit-flex;display:-ms-flexbox;display: flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content: center;align-items: center;width: calc(100% - 50px);gap: 15px;}
/* ショップロゴ */
.shop_logo {
    max-width: 940px;
    margin: 0 auto;
    text-align: center;
    width: 40%;
}
.shop_logo img { max-width: 150px; }

/* ショップ画像 */
.detail > .image {
    margin: 0;
    padding: 0;
    text-align: center;
    width: calc((100% - 40%) - 15px);
    background: transparent;
    height: 38vh;
}
.detail > .image img{
    width:100%;
    height: 100%;
    object-fit: contain;
}
/* 紹介文 */
.summary {
    max-width: 680px;
    margin: 0 auto 20px;
    width: 83%;
    display: inline-flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
}
.heading_shop {
    margin: 0 20px 20px;
    font-size: 24px;
    font-weight: 300;
}
.summary p {
    margin: 0 20px;
    font-size: 16px;
    line-height: 1.8;
}
/* 店舗情報 */
.summary table {
    width: 460px;
    border-top: 1px solid #d9d9d9;
}
.summary th,
.summary td {
    padding: 10px;
    border-bottom: 1px solid #d9d9d9;
    font-size: 13px;
    font-weight: 300;
    text-align: left;
}
.summary th { width: 5em; }

/* 追加情報 
.summary .free_area { clear: both; }
.summary .free_area .heading_shop { padding-top: 30px; }
.summary .free_area table {
    width: 940px;
    margin: 0 auto;
}
.summary .free_area th { width: 200px; }
.summary .free_area td img {margin-right: 10px; }
*/

.summary .free_area dl {
    width: 940px;
    margin: 0 auto;
display:table;
}

.summary .free_area dt { display:table-cell;width: 200px!important;vertical-align:top; }
.summary .free_area dt .image{ max-width: 200px; }

.summary .free_area dd { display:table-cell;vertical-align:top }
.summary .free_area dd .button_netshop{float:none;margin-top:10px;}


.summary .free_area .image{ text-align:center; }
.summary .free_area .image img{ margin-top:20px; }


/*フリーエリア調整*/
.free_area { width:980px;margin:0 auto 20px; }
.free_area .heading_shop { padding-top: 30px; }
.free_area table {
    width: 940px;
    margin: 0 auto;
    border-top: 1px solid #d9d9d9;
}
.free_area p {
    margin: 0 20px;
    font-size: 16px;
    line-height: 1.8;
}

.free_area th,
.free_area td {
    padding: 10px;
    border-bottom: 1px solid #d9d9d9;
    font-size: 13px;
    font-weight: 300;
    text-align: left;
}
.free_area th { width: 200px; }
.free_area table td img {margin-right: 10px; }
/*フリーエリア調整ここまで*/


/* 関連トピックス */
.list_topics {
    max-width: 980px;
    margin: 0 auto;
    border-top: 1px solid #ccc;
}
.list_topics .item {
    position: relative;
    margin: 0;
    padding: 0;
    border: none;
    border-bottom: 1px solid #ccc;
width:100%;/*調整*/
}

.list_topics .item:hover {
    background: #fff;
    border-color: #ccc;
}
.list_topics .item:before {
    position: absolute;
    top: 50%;
    right: 20px;
    display: block;
    width: 11px;
    height: 20px;
    margin-top: -10px;
    background:  url(/images/common/sprite_arrow.png) no-repeat -50px 0;
    background-size: 200px auto;
    content: " ";
    visibility: visible;
}
.list_topics .item a {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    min-height: 210px;
    padding: 5px 40px 5px 225px;
    background: transparent;
}
.list_topics .item a:hover {
    filter: alpha(opacity=60);
    opacity: 0.6;
}
.list_topics .image_wrap {
    position: absolute;
    top: 5px;
    left: 5px;
    display: table;
    width: 200px;
    height: 200px;
}
.list_topics .image {
    display: table-cell;
    width: 200px;
    height: 200px;
    background: #f5f5f5 url(/images/common/bg_texture_bk.png) repeat left top;
    background-size: 15px 16px;
    text-align: center;
    vertical-align: middle;
}
.list_topics img {
    max-width: 200px;
    max-height: 200px;
}
.event_data li {
    margin-bottom: 5px;
    padding-left: 12px;
    background: url(/images/common/ico_square.png) no-repeat left 5px;
    background-size: 8px;
    font-size: 12px;
}
.list_topics .title {
    margin: 0 0 10px;
    padding-top: 10px;
    font-size: 16px;
}
.list_topics .title + p { margin: 10px 0; }
.list_topics .tags {
    position: relative;
    top: 0;
    left: 0;
}


/* おすすめ商品 */
.list_recommend {
    max-width: 980px;
    margin: 0 auto;
}
.list_recommend .item {
    position: relative;
    min-height: 200px;
    margin: 0;
    padding: 5px 5px 5px 225px;
    border: none;
    border-bottom: 1px solid #ccc;
}
.list_recommend .item:first-child { border-top: 1px solid #ccc; }

.list_recommend .image_wrap {
    position: absolute;
    top: 5px;
    left: 5px;
    display: table;
    width: 200px;
    height: 200px;
}
.list_recommend .image {
    display: table-cell;
    width: 200px;
    height: 200px;
    background: #f5f5f5 url(/images/common/bg_texture_bk.png) repeat left top;
    background-size: 15px 16px;
    text-align: center;
    vertical-align: middle;
}
.list_recommend img {
    max-width: 200px;
    max-height: 200px;
}

.list_recommend .title {
    font-size: 16px;
    font-weight: 500;
}
.list_recommend p {
    margin: 10px 0;
    font-size: 15px;
}
.button_netshop {
    float: right;
    width: 300px;
    padding: 15px 0 14px 20px;
    background: #ececec;
    font-size: 13px;
}
.button_netshop:before {
    position: absolute;
    top: 50%;
    left: 20px;
    display: block;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    background: url(/images/common/sprite_icon.png) no-repeat -400px -200px;
      background-size: 500px auto;
      content: " ";
}
.button_netshop:hover:before { background-position: -400px -200px; }

/* ランキング */
.list_ranking {
    width: 980px;
    margin: 0 auto -10px;
    padding: 0;
    list-style: none;
}
.list_ranking li {
    float: left;
    width: 180px;
    margin-bottom: 10px;
}
.list_ranking a {
    position: relative;
    box-sizing: border-box;
    display: block;
    border-color: #fff;
    border-style: solid;
    border-width: 28px 8px 8px;
     transition: 0.1s linear;
}
.list_ranking a:hover {
    border-color: #333;
    text-decoration: none;
}
.list_ranking .rank {
    position: absolute;
    top: -24px;
    left: 0;
    display: block;
    width: 20px;
    height: 20px;
    background: #333;
    color: #fff;
    text-align: center;
    line-height: 20px;
}
.list_ranking li:first-child .rank { background: #e89910; }
.list_ranking li:nth-child(2) .rank { background: #888; }
.list_ranking li:nth-child(3) .rank { background: #db640f; }
.list_ranking .title {
    height: 37px;
    margin: 10px;
    font-size: 13px;
}

/* ネットショップ導線 */
.guide_netshop {
    margin: 0 auto 20px;
    padding: 10px;
    background: #555 url(/images/common/bg_texture_bk10.png) repeat left top;
    background-size: 4px;
    color: #fff;
    text-align: center;
    width: 84%;
    box-sizing: border-box;
    max-width: 500px;
}
.guide_netshop p {
    position: relative;
    display: inline-block;
    margin: 0 0 5px;
    padding-left: 50px;
    font-size: 15px;
    text-align: left;
    vertical-align: middle;
}
.guide_netshop p:before {
    position: absolute;
    top: 50%;
    left: 14px;
    display: block;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    background: url(/images/common/sprite_icon.png) no-repeat -350px -200px;
    background-size: 500px auto;
    content: " ";
}
.guide_netshop a {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    padding: 13px 90px;
    background: #fff;
    vertical-align: middle;
    height: 70px;
}
.guide_netshop a:after {
    position: absolute;
    top: 50%;
    right: 20px;
    display: block;
    width: 7px;
    height: 13px;
    margin-top: -6px;
    background: url(/images/common/sprite_arrow.png) no-repeat -50px -100px;
    background-size: 200px auto;
    content: " ";
    visibility: visible;
}
.guide_netshop img {width: 100%;height: 100%;object-fit: contain;}

/* 記事フッタ（SNS) */
.detail footer {
    width: 960px;
    margin: 0 auto;
    padding: 10px;
    background: #e6e6e6;
}
.detail .twitter,
.detail .facebook {
    display: inline-block;
    width: 28px;
    height: 18px;
    margin: 0 3px;
    padding: 5px 0;
    border: 1px solid #000;
    border-radius: 3px;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    line-height: 18px;
    transition: 0.1s linear;
}
.detail .twitter { background: #000; }
.detail .facebook {
    border-color: #3b5998;
    background: #3b5998;
}

.detail .twitter:hover {
    background: #fff;
    color: #000;
    text-decoration: none;
}
.detail .facebook:hover {
    background: #fff;
    color: #3b5998;
    text-decoration: none;
}


.detail .footer_anounce { width: 980px; }

/* ショップ検索 */
.box_shops_tab {
  width: 980px;
  margin: 0 auto;
}

/*関連トピック調整*/
aside.box{
  width:100%;
}

/*ランキング非表示設定*/
div#reco15 {
  display: none;
}





@media screen and (max-width:768px){

/*
ショップ詳細
-----------------------------------*/
article.detail {margin-bottom: 20px;
/*以下追加*/display:-webkit-box;display: -webkit-flex;display:-ms-flexbox;display: flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;width: 100%;}
/* ショップロゴ */
.shop_logo {
    width: 150px;
    margin: 0 auto;
    text-align: center;
}
.shop_logo img { max-width: 100%; }

/* ショップ画像 */
.detail > .image {height: auto;padding: 0;text-align: center;width:100%;}

.detail > .image  img{
width:100%;
}

/* 紹介文 */
.summary {margin-bottom: 20px;width: 73%;}
.heading_shop {
    margin: 10px;
    font-size: 18px;
    font-weight: 300;
}
.summary p {
    margin: 10px;
    font-size: 16px;
}
/* 店舗情報 */
.summary table {
    width: 100%;
    border-top: 1px solid #d9d9d9;
}
.summary > table th {
    display: block;
    padding: 10px 10px 0;
    font-size: 16px;
    font-weight: 300;
    text-align: left;
}
.summary > table td {
    display: block;
    padding: 0 10px 10px;
    border-bottom: 1px solid #d9d9d9;
    font-size: 16px;
}
}