@charset "UTF-8";

#freepage_shoplist { width: 1200px; padding: 0 0 100px 0; margin: 0 auto;}
#freepage_shoplist .shoplist-header { margin: 0 0 40px 0; text-align: center;}
#freepage_shoplist .shoplist-header h1 { padding: 0; margin: 0 0 10px; font-size: 38px; font-weight: bold; text-align: center; line-height: 1.0; color: #111;}
#freepage_shoplist .shoplist-header .sub-jpn { font-size: 12px; color: #111; text-align: center;}

#sort_list_frame { padding: 40px 35px 30px 40px; margin: 0 0 60px 0; border-radius: 5px; background: #F8F8F8; position: relative;}
#sort_list_frame .sort-title { padding: 0; margin: 0 0 15px 0; font-size: 14px; font-weight: normal; line-height: 1.0;}
#sort_list_frame .sort-title span { margin: 0 3px 0 0; font-size: 16px; font-weight: bold;}
#sort_list_frame .design-list { display: flex; flex-wrap: wrap;}
#sort_list_frame .design-list li { min-height: 50px; padding: 0 5px; margin: 0 10px 10px 0; border: #ADADAD 1px solid; border-radius: 5px; display: flex; justify-content: center; align-items: center; cursor: pointer; line-height: 1.2; background: #fff;}
#sort_list_frame .design-list li span { text-align: center; color: #111;}
#sort_list_frame .design-list li.disable { border: #CCC 1px solid; background: #eee; cursor: auto;}
#sort_list_frame .design-list li.disable span { color: #AAA;}
#sort_list_frame .design-list li.active { border: #966E10 1px solid; background: #966E10;}
#sort_list_frame .design-list li.active span { color: #fff;}
#sort_list_frame #first_letter .design-list { flex-wrap: nowrap; justify-content: space-between;}
#sort_list_frame #first_letter .design-list li { width: calc((100% / 10) - 10px);}
#sort_list_frame #category_sort .design-list li { width: calc((100% / 5) - 10px);}

#shop_data .shop-list { margin: 0 -25px 20px 0; display: flex; flex-wrap: wrap;}
#shop_data .shop-list li { width: calc((100% - 125px) / 5); margin: 0 25px 25px 0;}
#shop_data .shop-list li a { transition: 0.3s;}
#shop_data .shop-list li a:hover { color: #976F11;}
#shop_data .shop-list li .logo { position: relative; height: 120px; padding: 5px; margin: 0 0 10px 0; border: #E0E0E0 1px solid; display: flex; justify-content: center; align-items: center; overflow: hidden;}
#shop_data .shop-list li .logo img { max-width: 100%; max-height: 100%; vertical-align: top;}
#shop_data .shop-list li .name { font-size: 14px; font-weight: bold; text-decoration: underline;}
#shop_data .shop-list li a:hover .name { text-decoration: none; }
#shop_data .shop-list li .category { color: #707070; font-size: 10px; margin: 5px 0 0;}
#shop_data .shop-list li .info { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(49, 49, 49, .76); color: #FFF; padding: 10px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: .3s ease;}
#shop_data .shop-list li a:hover .info { opacity: 1;}

#freepage_shoplist .no-shop-data { padding: 40px 20px; margin: 15px; border: #CCC 1px solid; text-align: center; background: #FFF; display: none;}

html[data-browse-mode="P"] .for-sp { display: none;}
html[data-browse-mode="P"] #sort_list_frame .sort-type + .sort-type { margin: 30px 0 0 0;} 

html[data-browse-mode="S"] .for-pc { display: none;}
html[data-browse-mode="S"] .sp-hide { display: none;}
html[data-browse-mode="S"] #freepage_shoplist { width: 100%; padding: 0 0 80px 0; margin: 0 auto;}
html[data-browse-mode="S"] #freepage_shoplist .shoplist-header { margin: 30px 0;}
html[data-browse-mode="S"] #freepage_shoplist .shoplist-header h1 { font-size: 28px;}
html[data-browse-mode="S"] #sort_list_frame { padding: 20px 5px 10px 15px; margin: 80px 0 40px 0; border-top: #E0E0E0 1px solid; border-bottom: #E0E0E0 1px solid; border-radius: 0; background: #F8F8F8;}
html[data-browse-mode="S"] #sort_list_frame #first_letter .design-list { flex-wrap: wrap; justify-content: flex-start;}
html[data-browse-mode="S"] #sort_list_frame #first_letter .design-list li { width: calc((100% / 5) - 10px);}
html[data-browse-mode="S"] #sort_list_frame #category_sort .design-list li { width: calc((100% / 3) - 10px);}
html[data-browse-mode="S"] #shop_data .shop-list { margin: 0 15px; display: flex; justify-content: space-between; flex-wrap: wrap;}
html[data-browse-mode="S"] #shop_data .shop-list li { position: relative; width: calc(50% - 7.5px); margin: 0 0 20px 0;}
html[data-browse-mode="S"] #shop_data .shop-list li .logo { width: 100%; height: 80px; padding: 5px; margin: 0 0 10px 0; border: #E0E0E0 1px solid; display: flex; justify-content: center; align-items: center;}
html[data-browse-mode="S"] #shop_data .shop-list li .name { font-size: 12px; padding: 0 32px 0 0;}
html[data-browse-mode="S"] #shop_data .shop-list li .category { font-size: 8px; margin: 3px 0 0; }
html[data-browse-mode="S"] #shop_data .shop-list li .info { font-size: 9px;}
html[data-browse-mode="S"] #shop_data .shop-list li .info.show { opacity: 1; }
html[data-browse-mode="S"] #shop_data .shop-list li .btn-info { position: absolute; top: 90px; right: 0; background: #A4A4A4; border-radius: 30px; color: #FFF; font-size: 9px; font-weight: bold; padding: 1px 5px; }

html[data-browse-mode="S"] #sort_list_frame .sort-title { width: calc(50% - 20px); height: 50px; padding: 0; margin: 0; border: #966E10 1px solid; border-bottom-color: #E0E0E0; border-radius: 5px 5px 0 0; font-size: 12px; font-weight: normal; line-height: 1.0; display: flex; justify-content: center; align-items: center; position: absolute; top: -50px; background: #fff; color: #111; cursor: pointer;}
html[data-browse-mode="S"] #sort_list_frame .sort-type:first-child .sort-title { left: 15px;}
html[data-browse-mode="S"] #sort_list_frame .sort-type:last-child .sort-title  { right: 15px;}
html[data-browse-mode="S"] #sort_list_frame .sort-title span { margin: 0 1px 0 0; font-size: 14px; font-weight: bold;}
html[data-browse-mode="S"] #sort_list_frame .sort-title.active { border-color: #E0E0E0; border-bottom-color: #F8F8F8; background: #F8F8F8; color: #966E10; z-index: 2;}