@charset "UTF-8";
.clearfix::after { height: 0; visibility: hidden; content: "."; display: block; clear: both; }

html, body { width: 100%; height: 100%; }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 1em; }

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }

ol, ul { list-style: none; }

hr { border-top: 1px solid #77a4e6; }

blockquote, q { quotes: none; }

:focus { outline: 0; }

ins { text-decoration: none; }

del { text-decoration: line-through; }

img { vertical-align: top; }

a, a:link { color: #597EB3; text-decoration: none; }

a:hover { text-decoration: none !important; color: #333; }

* { box-sizing: content-box; min-width: 0; min-height: 0; }

body { color: #4F4F4F; font-size: 13px; font-family: 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; line-height: 1.5; background: #FFF; -webkit-text-size-adjust: none; overflow-y: scroll; -webkit-overflow-scrolling: touch; }

::selection { color: #ffffff !important; background: #00ccff; }

.noselect { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; }

.bg-cbtblue { background: #3581f1 !important; }

.tx-cbtblue { color: #3581f1 !important; }

.tx-white { color: #FFF !important; }

.tx-orange { color: #f94621 !important; }

.tx-bold { font-weight: bold; }

h2.page_main { font-size: 16px; max-height: 36px; line-height: 19px; overflow: hidden; margin-top: 0; margin-bottom: 10px; padding: 0; }

@media screen and (max-width: 892px) { .for-pc { display: none !important; } }
@media screen and (max-width: 600px) { .for-tbl { display: none !important; }
  img { max-width: 100%; height: auto; } }
#container { position: relative; margin-top: 56px; width: 100%; text-align: left; background-color: #FFF; }

img[data-echo], img[swiper-lazy], .loading-bg { background: url("../image/common/img_loading.gif") center center no-repeat; }

#main-header { position: fixed; top: 0; left: 0; right: 0; display: flex; flex-flow: row nowrap; align-items: center; z-index: 777; background-color: #3581f1; height: 56px; padding: 0 0 0 5px; }
#main-header h1 { margin: 0 0 0 5px; }
#main-header h1 img { display: block; width: 100%; height: auto; }
#main-header i { font-size: 28px; }
#main-header > div { display: flex; align-items: center; height: 100%; }
#main-header .search-panel { margin-left: auto; margin-right: 15px; }
#main-header .icons-panel { margin-right: 10px; }
#main-header a { color: #FFF; }
#main-header a:hover { color: #f0ff2d; }
#main-header a.icon { width: 50px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 5px; position: relative; }
#main-header a.icon span { font-size: 9px; margin-top: 2px; margin-bottom: -4px; white-space: nowrap; }
#main-header a.icon .badge-notfy { position: absolute; top: 3%; right: 0; }
#main-header a.open-search { display: none; }
@media screen and (max-width: 892px) { #main-header .icons-panel { margin-right: 0; } }
@media screen and (max-width: 600px) { #main-header { padding: 0; }
  #main-header h1 { margin: 0; }
  #main-header h1 img { max-width: 80%; }
  #main-header i { font-size: 22px; }
  #main-header .icons-panel { margin-left: auto; }
  #main-header a.icon.sidemenu-sw { width: 45px; margin: 0; }
  #main-header a.open-search { display: flex; } }

#main-header .make-sell { position: relative; height: 100%; }

#main-header .make-sell .sub-menu { display: none; position: absolute; left: 0; background: #f9f9f9; overflow: hidden; }

#main-header .make-sell .sub-menu li a { color: #666; font-size: 11px; white-space: nowrap; }

#main-header .make-sell .sub-menu li > * { display: block; height: 100%; width: 100%; padding: 10px; }

#main-header .make-sell .sub-menu li a:hover { background: #CCC; }

#main-header .make-sell:hover .sub-menu { display: block; }

input[type="search"] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; }
input[type="search"]:focus { outline-offset: -2px; }
input[type="search"]::-webkit-search-decoration { display: none; }

.search-form { width: 100%; border: solid 1px #3581f1; border-radius: 4px; height: 36px; vertical-align: middle; overflow: hidden; white-space: nowrap; background-color: #FFF; display: inline-block; position: relative; }

.search-form form { display: inline-block; width: 100%; height: 100%; }

.search-form input, .search-form button { vertical-align: middle; height: 100%; box-sizing: border-box; border: none; background-color: transparent; }

.search-form input { width: 100%; width: calc( 100% - 40px ); padding-left: 11px; }

.search-form button { width: 40px; position: absolute; right: 0; top: 0; }

.search-form button i { font-size: 20px !important; color: #666666 !important; }

.search-form button i.fa-spinner { display: none; }

.search-form .loading { background: #DDD; }

.search-form .loading button i.fa-spinner { display: inline-block; }

.search-form .loading button i.fa-search { display: none; }

nav#foot-fixed { position: fixed; display: flex; bottom: 0; right: 0; z-index: 199; transition: transform .2s linear; height: 60px; width: auto; align-items: baseline; transform: translateY(100%); }

nav#foot-fixed.show { transform: translateY(0%); }

nav#foot-fixed #page-top { line-height: 1; padding: 10px; margin-left: auto; cursor: pointer; }

nav#foot-fixed #history { cursor: pointer; }

nav#foot-fixed #sns-share { flex-grow: 1; margin-right: 10px; }

nav#foot-fixed i { font-size: 40px; text-shadow: #FFF 2px 0px, #FFF -2px 0px, #FFF 0px -2px, #FFF 0px 2px, #FFF 2px 2px, #FFF -2px 2px, #FFF 2px -2px, #FFF -2px -2px, #FFF 1px 2px, #FFF -1px 2px, #FFF 1px -2px, #FFF -1px -2px, #FFF 2px 1px, #FFF -2px 1px, #FFF 2px -1px, #FFF -2px -1px; }

.social-buttons { display: -webkit-flex; display: flex; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-align-items: flex-end; align-items: flex-end; }
.social-buttons li { margin-right: 5px; }
.social-buttons a { display: block; position: relative; width: 40px; height: 40px; line-height: 1; z-index: 1; }
.social-buttons a i { font-size: 40px; text-shadow: #FFF 2px 0px, #FFF -2px 0px, #FFF 0px -2px, #FFF 0px 2px, #FFF 2px 2px, #FFF -2px 2px, #FFF 2px -2px, #FFF -2px -2px, #FFF 1px 2px, #FFF -1px 2px, #FFF 1px -2px, #FFF -1px -2px, #FFF 2px 1px, #FFF -2px 1px, #FFF 2px -1px, #FFF -2px -1px; }
.social-buttons a::before { display: block; position: absolute; content: ""; width: 29px; height: 29px; bottom: 1px; left: 5px; background: #FFF; z-index: -1; }

#contsWrapper { display: -webkit-flex; display: flex; max-width: 1170px; width: 100%; margin: 0 auto 20px; min-height: 100vh; }

#conts { overflow: hidden; position: relative; margin-top: 0; -webkit-flex: 1; flex: 1; }

#conts h3 { font-size: 18px; padding: 5px 0 5px 5px; }

#conts h3.sep { border-bottom: 1px solid #575757; margin-bottom: 5px; }

#conts h3 a { color: inherit; }

.panel { padding: 10px; margin-bottom: 10px; background: #F4F4F4; border-radius: 3px; }

.panel a { color: #597EB3; text-decoration: none; }

#sidemenu { position: absolute; background: #FFF; top: 0; width: 240px; left: -240px; z-index: 999; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sidemenu-open #sidemenu { position: fixed; transform: translateX(240px); transition: transform .3s ease; }
#sidemenu li a { display: block; padding: 10px; font-size: 13px; font-weight: normal; color: #2d2c2c; }
#sidemenu li:hover a { background: #c7c7ca; color: #ffffff; }
#sidemenu .sidemenu-top { font-weight: bold; }
#sidemenu .sidemenu-top .sidemenu-sw { height: 56px; background: #484854; color: #FFF; cursor: pointer; display: flex; align-items: center; justify-content: center; }
#sidemenu .sidemenu-top .sidemenu-sw:hover { background: #b9b9d0; transition: background-color 0.2s; }
#sidemenu .sidemenu-title { padding: 5px; font-size: 15px; color: #ffffff; background-color: #3581f1; font-weight: 700; line-height: 1.5; }
#sidemenu .sidemenu-title.sidemenu-subtitle { background: #ababab; font-size: 12px; font-weight: 200; }

#sidemenu > section:last-child { margin-bottom: 30px; }

#sidemenu .sidemenu-banners { display: flex; flex-direction: column; align-items: center; margin-bottom: 10px; }

#sidemenu .sidemenu-banners > * { margin-top: 10px; }

#sidemenu .sidemenu-banners img { width: 180px; }

.modal-on #container { position: fixed; left: 0; padding-top: 0; }
.modal-on #container::before { content: ""; position: fixed; top: 0; left: 0; display: block; width: 100%; height: 150%; background: rgba(0, 0, 0, 0.5); -webkit-transition: all .5s ease; transition: all .5s ease; z-index: 888; }

#modal-canvas-frame { position: fixed; width: 100%; top: 0; left: 0; opacity: 0; z-index: 999; background: transparent; transition: all .5s; transform: translate3d(0, -100%, 0); backface-visibility: hidden; overflow: hidden; }
.mc-on #modal-canvas-frame { height: 100vh; top: 0; left: 0; opacity: 1; transform: translate3d(0, 0, 0); transition: opacity .3s; }

#modal-canvas { width: 100%; max-width: 1170px; margin: 0 auto; position: relative; background: #FFF; }
#modal-canvas-frame.error #modal-canvas { height: 100%; }
#modal-canvas-frame.error #modal-canvas .mc-body { padding: 10px; height: 100%; background: #fbdddd; transition: background-color 2s; }
#modal-canvas .mc-head { position: sticky; height: 56px; border-bottom: solid 1px #FFF; background: #484854; color: #FFF; display: flex; font-size: 16px; }
#modal-canvas .mc-head > div { display: flex; }
#modal-canvas .mc-head > div.mc-head-r { margin-left: auto; }
#modal-canvas .mc-head > div > div { display: flex; cursor: pointer; padding-left: 12px; padding-right: 12px; }
#modal-canvas .mc-head > div > div:hover { background: #777; color: #FFF; }
#modal-canvas .mc-head > div > div > * { display: flex; align-items: center; }
#modal-canvas .mc-head > div > div i { padding-right: 7px; }
#modal-canvas .mc-body { position: relative; background: #FFF; height: 100vh; height: calc( 100vh - 56px ); overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; opacity: 1; }
#modal-canvas-frame.loading > #modal-canvas .mc-body { opacity: 0.99; }
#modal-canvas .mc-body::before { content: ""; background: url("../image/common/img_loading.gif") center center no-repeat rgba(255, 255, 255, 0.1); width: 100%; height: 100%; z-index: 500; position: absolute; display: none; }
#modal-canvas-frame.loading > #modal-canvas .mc-body::before { display: block; }
#modal-canvas .mc-body .mc-content { padding-bottom: 150px; opacity: 1; transition: opacity 0.3s; }
#modal-canvas-frame.loading > #modal-canvas .mc-body .mc-content { opacity: 0.2; }

#cont-footer { text-align: center; margin-top: 20px; margin-bottom: 50px; }

#cont-footer-banners { display: flex; justify-content: center; margin: 25px 0 25px; }

#cont-footer-banners > * { margin: 0 10px; flex: 0 0 auto; }

#cont-footer ul { padding: 5px 0; background: #EDEDED; display: flex; flex-wrap: wrap; line-height: 1.8; }

#cont-footer ul li { padding: 0 5px; }

#cont-footer ul li:not(:last-child) { border-right: solid 1px #cecece; }

#cont-footer ul li a { padding: 3px; }

#cont-footer .copyright { padding: 8px 0; color: #666; }

.pagination { margin: 10px auto; }

.pagination .page { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; width: auto; height: 100%; }

.pagination .page li { width: 28px; margin: 0 3px; color: #999999; border-radius: 2px; }

.pagination .page li a { display: block; font-size: 14px; width: 100%; height: 28px; line-height: 28px; text-align: center; text-decoration: none; color: #c3c3c3; background-color: #f9f9f9; transition: all .1s; }

.pagination .page li.on a { color: #FFF; background-color: #3581f1; }

.pagination .page li a:hover { background: #8ac2ff; color: #FFF; }

.pagination .page li.prev_next a { font-size: 18px; color: #3581f1; background-color: transparent; }

.pagination .page li.prev_next a:hover { color: #8ac2ff; background-color: transparent; }

.label, .badge { font-size: 12px; font-weight: normal; white-space: nowrap; vertical-align: baseline; }

.label { padding: 4px 6px; border-radius: 3px; background-color: #3581f1; color: #FFF; }

.badge { padding: 3px 10px; border-radius: 20px; background-color: #fcfcfc; color: #666666; border: 1px solid #e0e0e0; }

.badge-notfy { background: red; color: #FFF; min-width: 16px; height: 16px; line-height: 16px; padding: 0; margin: 0; font-size: 10px; font-weight: bold; text-align: center; border: solid 2px #FFF; border-radius: 50%; }

.bs-btn { width: 60%; display: block; padding: 4px 10px 4px; margin: 0 auto; font-size: 13px; line-height: 25px; text-align: center; vertical-align: middle; cursor: pointer; background-color: #597EB3; color: #FFFFFF; font-weight: bold; border: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

input.bs-btn { -webkit-appearance: button; }

.bs-btn-mini { display: inline; padding: 2px 10px 2px; margin: 0 auto; font-size: 13px; line-height: 25px; text-align: center; vertical-align: middle; cursor: pointer; background-color: #597EB3; color: #FFFFFF; font-weight: bold; border: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

.bs-btn img { vertical-align: baseline; }

a.bs-btn:link, a.bs-btn:visited, a.bs-btn:hover, a.bs-btn:active { color: #FFFFFF; }

.bs-btn-disabled { background-color: #555555; color: #DDDDDD; cursor: default; }

.tag-list { display: flex; flex-flow: row nowrap; overflow: hidden; position: relative; font-size: 11px; margin-bottom: 1px; }

.tag-list .tag-parent { background: #0162B1; color: #FFF; border-radius: 3px; padding: 8px; font-weight: bold; }

.tag-list div.tag-parent { min-width: 10%; max-width: 10%; }

.tag-list ul { display: flex; flex-flow: row wrap; margin-bottom: 0; margin-left: 3px; }

.tag-list ul li { flex: 0 1 auto; margin: 1px; }

.tag-list ul li a { display: block; }

@media (max-width: 670px) { .tag-list { font-size: 10px; flex-direction: column; }
  .tag-list div.tag-parent { max-width: 100%; width: 100%; border-radius: 0; margin-bottom: 3px; }
  .tag-list ul { margin-bottom: 3px; }
  .tag-list ul li a { padding: 8px; } }
.btn { font-weight: bold; padding: 8px 16px; border: 1px solid #DDD; border-radius: 3px; background-color: #FFF; }

.btn-orange { background-color: #f94621; }

.btn01 { background-color: transparent; border: 1px solid #DDD; color: #998bfa !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; transition: all .3s; }

.btn01:hover { color: #998bfa !important; border: 1px solid #998bfa; color: #fff !important; }

.btn05 { background-size: 200% 100%; background-image: -webkit-linear-gradient(left, transparent 50%, #e4e4e4 50%); background-image: linear-gradient(to right, transparent 50%, #e4e4e4 50%); -webkit-transition: background-position 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0.1s, color 0.5s ease 0s, background-color 0.5s ease; transition: background-position 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0.1s, color 0.5s ease 0s, background-color 0.5s ease; }

.btn05:hover { background-color: #FFF; background-position: -100% 100%; }

.item-list { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; width: 100%; }
.item-list > * { display: flex; align-items: center; flex-flow: column wrap; border: solid 1px transparent; border-radius: 3%; margin-bottom: 1px; overflow: hidden; flex-grow: 0; flex-shrink: 1; flex-basis: auto; max-width: none; width: calc( 100% / 6 - 2px); }
.item-list > *:hover { /* border-color: #3581f1; */ }
.item-list > *:hover > div.item-list-t { background: #3581f1; color: #FFF; }
.item-list > .blank-item { justify-content: center; }
.item-list > .blank-item > a { display: block; width: 99%; height: 99%; color: #FFF; background: #3581f1; }
.item-list.size-6 > * { width: calc(100% / 6 - 2px) !important; }
.item-list.size-5 > * { width: calc(100% / 5 - 2px) !important; }
.item-list.size-4 > * { width: calc(100% / 4 - 2px) !important; }

@media screen and (max-width: 1120px) { .item-list > * { width: calc(20% - 2px) !important; } }
@media screen and (max-width: 780px) { .item-list > * { width: calc(25% - 2px) !important; } }
@media screen and (max-width: 585px) { .item-list > * { width: calc(33% - 2px) !important; } }
/*
@media screen and (max-width: 350px) { .item-list > * { width: calc(50% - 2px) !important; }
}
*/
/* landscape! */
@media screen and (orientation: landscape) { /* .item-list > * { max-width: 30vh !important; } */ }
div.item-list-i { position: relative; overflow: hidden; width: 100%; height: auto; }
div.item-list-i::before { display: block; content: ''; padding-top: 100%; }
div.item-list-i > img { position: absolute; top: 0; left: 0; width: 100%; height: auto; margin: 0; transition: transform .2s linear; }
div.item-list-i > .item-rbn { display: none; position: absolute; top: 0; left: 0; overflow: hidden; width: 55%; height: 55%; z-index: 5; }
div.item-list-i > .item-rbn.rbn { display: block; }
div.item-list-i > .item-rbn.rbn > span { position: absolute; display: inline-block; padding: 5px 0; left: -68%; top: 20%; width: 200%; text-align: center; font-size: 12px; line-height: 10px; background: #39c3d4; box-shadow: 0 0 0 1px #39c3d4; color: #fff; letter-spacing: 0.05em; transform: rotate(-45deg); opacity: 0.8; }
@media (max-width: 540px) { div.item-list-i > .item-rbn.rbn > span { font-size: 10px; padding: 4px 0 2px; } }
div.item-list-i > .item-rbn.rbn.rbn_blue > span { background: #39c3d4; box-shadow: 0 0 0 1px #398c96; }
div.item-list-i > .item-rbn.rbn.rbn_orange > span { background: #ff5400; box-shadow: 0 0 0 1px #e82f2f; }
div.item-list-i > .item-rbn.rbn.rbn_red > span { background: #ff0000; box-shadow: 0 0 0 1px #b50000; }
div.item-list-i > .item-rbn.rbn.rbn_lime > span { background: #25bb14; box-shadow: 0 0 0 1px #72dc14; }
div.item-list-i > .item-rbn.rbn.rbn_moss > span { background: #a2ad77; box-shadow: 0 0 0 1px #575a4b; }
div.item-list-i > .item-rbn.rbn.rbn_yellow > span { background: #ffff00; box-shadow: 0 0 0 1px #abdbff; color: #6abfff; opacity: 0.85; }

div.item-list-t { z-index: 15; display: flex; align-items: center; width: 100%; background: #dedede; text-align: left; height: 3em; overflow: hidden; margin-top: auto; }
div.item-list-t > span { font-size: 10px; display: inline; vertical-align: top; max-width: 92%; margin: 0 auto; white-space: normal; max-height: 24px; overflow: hidden; line-height: 12px; text-overflow: ellipsis; }

.pl-button { display: inline-block; font-size: 11px; border: solid 1px #bec7cc; border-radius: 5px; line-height: 25px; height: 25px; padding: 0 8px; white-space: nowrap; }

.product-list-head { margin: 10px 5px; display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; overflow: hidden; }

.plh-img { width: 40%; max-width: 200px; min-width: 120px; text-align: center; margin-bottom: 10px; transition: all .3s; position: relative; }
.plh-img > div:before { display: block; content: ''; padding-top: 100%; }
.plh-img > div > * { position: absolute; }
.plh-img > div > img { width: 100%; height: auto; top: 0; left: 0; z-index: 100; }

a.zoombtn { bottom: 0; right: 0; font-size: 20px; z-index: 110; color: #bec7cc; display: block; }
a.zoombtn > .zoom-out { display: none; }

.zoom a.zoombtn > .zoom-out { display: block; }
.zoom a.zoombtn > .zoom-in { display: none; }

/* design image zoomed */
.product-list-head.zoom { /* background: red; */ }
.product-list-head.zoom .plh-img { max-width: 350px; width: 100%; }
.product-list-head.zoom .plh-img img { max-width: none; }

.plh-title { width: 50%; flex-shrink: 0; flex-grow: 0.5; display: flex; flex-direction: column; margin: 10px; }
.plh-title h2 { max-height: 54px; }
.plh-title > div { margin-top: 10px; max-height: 115px; overflow: hidden; }

.plh-description .overflow { height: 0; opacity: 0; }
.plh-description .readmore { color: #597EB3; cursor: pointer; }
.plh-description.showall { max-height: none; height: auto; transition: all .2s; }
.plh-description.showall .readmore { display: none; }
.plh-description.showall .overflow { opacity: 1; transition: all .2s; }

.plh-shop { display: flex; flex-direction: row; flex-wrap: wrap; flex-shrink: 0; flex-grow: 1; justify-content: center; align-items: center; width: 100%; margin: 5px 10px; height: 30px; }

a.plh-shop-l { display: flex; align-items: center; height: 100%; }
a.plh-shop-l .label { flex-shrink: 0; margin-right: 5px; }
a.plh-shop-l span:nth-child(2) { overflow: hidden; }

.plh-shop a { font-size: 10px; }

.product-list-navi { margin: 5px 0; padding: 5px 10px; background: #F4F4F4; font-size: 14px; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; }
.product-list-navi span { font-weight: bold; }
.product-list-navi a { font-size: 11px; }

/* responsive for upper parts */
@media (min-width: 680px) { .plh-img { flex-shrink: 0; flex-grow: 0; flex-basis: 45%; }
  .plh-title { flex-basis: 30%; margin: 5px 10px 5px 30px; }
  .plh-shop { flex-basis: 180px; height: auto; } }
.product-list-body { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }

/* box */
.plb-box { position: relative; box-sizing: border-box; margin: 0 2px 5px; padding: 5px; min-width: 300px; max-width: 100%; flex-grow: 1; flex-basis: calc( 50% - 4px ); border: solid 1px #e6e6e6; border-radius: 8px; }

/* box size by media */
@media (min-width: 708px) { .plb-box { min-width: 350px; max-width: calc( 50% - 4px ); } }
@media (max-width: 300px) { .plb-box { min-width: 200px; width: 100%; } }
/* landscape! */
  /*
@media (orientation: landscape) and (min-width: 500px) { .plb-box { max-width: 50%; min-width: 250px; }
}
*/
/* single item view */
.product-list-single .product-list-body { justify-content: center; }
.product-list-single .plb-box { max-width: 900px; }

@media all and (-ms-high-contrast: none) { .product-list-single .product-list-body { justify-content: flex-start; /* for IE broken.. */ } }
/* .product-list-single .plb-box-img { max-width: 900px; } */
.plb-box-title { font-weight: bold; width: 100%; padding: 5px 5px 0 5px; }

.plb-title-price { font-weight: normal; font-size: 90%; margin-left: 10px; }

.plb-box-img { display: flex; justify-content: space-around; }
.plb-box-img > div { position: relative; text-align: center; width: 50%; /*border: solid 1px red;*/ transition: all .3s; overflow: hidden; }
.plb-box-img > div::before { display: block; content: ''; padding-top: 100%; }
.plb-box-img.zoom > div { width: 100%; transition: all .3s; }
.plb-box-img.zoom > div > img { width: 110%; left: -5%; top: -5%; /*transition: all .3s;*/ }
.plb-box-img.zoom-L > div:nth-child(2), .plb-box-img.zoom-R > div:nth-child(1) { width: 0; opacity: 0; }
.plb-box-img > div > * { position: absolute; }
.plb-box-img > div > img { width: 100%; height: auto; max-width: none; top: 0; left: 0; z-index: 100; transition: all .3s; }
.plb-box-img > div > img.loading-bg { transition: none; }
.plb-box-img > div > .fbmark { top: 3px; right: 0; font-size: 9px; z-index: 110; color: #b5bdc1; }

/* product image zoomed */
.plb-box-info { margin: 0 7px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; }

.plb-info-price { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 5px 0; }
.plb-info-price span { font-size: 13px; font-weight: bold; margin: 5px 0; }
.plb-info-price > span { margin-right: 7px; }

.plb-info-etc { font-size: 10px; margin-top: 5px; }

/* product variation select */
.pvari-select { display: flex; flex-wrap: wrap; align-items: center; margin: 0; width: 100%; }
.ivari-select .pvari-select { margin-bottom: 5px; }
.ivari-select .pvari-select .list-link { margin-left: 5px; }
.pvari-select img { width: 22px; height: 22px; margin: 1px; }
.pvari-select > a { display: block; position: relative; margin: 0px; /* only for body variation select */ }
.pvari-select > a:nth-last-of-type(2) { margin-right: 3px; }
.pvari-select > a:not(.current) { cursor: pointer; }
.pvari-select > a.list-link { padding: 1px 4px; border: solid 1px #bec7cc; border-radius: 3px; line-height: 20px; font-size: 12px; margin-top: 2px; }
.pvari-select > a:after { position: absolute; border-radius: 3px; top: 0; left: 0; right: 0; bottom: 0; content: ""; }
.pvari-select > a.current:after { box-shadow: 0 0 0 1px #ff9191 inset; }
.ivari-select .pvari-select > a.current:after { box-shadow: 0 0 0 2px #ff9191 inset; }
.pvari-select > a:not(.current).hover:after { box-shadow: 0 0 0 1px #afafaf inset; }
.pvari-select > a.ivari { margin: 1px; }
.pvari-select > a.ivari img { width: 30px; height: 30px; margin: 1px; }
@media (max-width: 480px) { .pvari-select > a.ivari img { width: 25px; height: 25px; } }

.pvari-buylink { background: #f94621; color: #FFF; font-weight: normal; padding: 0px 15px; border-radius: 3px; border: none; }
.pvari-buylink:link { background: #f94621; color: #FFF; font-weight: normal; padding: 0px 15px; border-radius: 3px; border: none; }
.pvari-buylink:hover { color: #FFF; background: red; transition: background 1s; }