@charset "UTF-8";

/* ----------------------------------
 Common
---------------------------------- */
.page-top .pane-main { display: flex; flex-direction: column;}
.page-top .pane-main > div { order: 3;}
.page-top .pane-main #block_of_top_body { order: 1;}
.page-top .pane-main #block_of_itemhistory { order: 2;}
.page-top .event-frame { padding: 60px 0;}
.page-top li.block-thumbnail-t--goods .block-thumbnail-t--price-infos { display: none;}
.page-top li.block-ranking-r--goods .block-ranking-r--price-infos { display: none;}
.page-top li.block-ranking-r--goods .block-icon { display: none;}

/* ----------------------------------
 Mainvisual
---------------------------------- */
.block-top-body-visual { width: 1200px; min-height: 600px; margin: 0 auto 20px; display: flex; justify-content: space-between;}
.block-top-body-visual-main  { width: 590px;}
.block-top-body-visual-items { width: 590px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.block-top-body-visual-items li { width: 286px; margin: 0 18px 18px 0; text-align: center;}
.block-top-body-visual-items li:nth-child(2n) { width: 286px; margin: 0 0 18px 0;}
.block-top-body-visual img { vertical-align: top; transition: 0.4s;}
.block-top-body-visual a:hover img { opacity: 0.6;}

/* ----------------------------------
 PickUp Notice
---------------------------------- */
.block-top-body-notice { width: 1200px; padding: 20px; margin: 0 auto 20px; border: #E98600 1px solid; text-align: center;}
.block-top-body-notice h2 { padding: 0; margin: 0 0 10px 0; border: none; font-size: 16px; font-weight: 700; text-align: center;}
.block-top-body-notice p  { font-size: 16px; text-align: center; line-height: 1.6;}

/* ----------------------------------
 Revico
---------------------------------- */
.page-top .revico-widget { font-family: "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;}
.block-top-review { padding: 60px 0; background: #fff;}
.block-top-review h2.block-top-title span { padding: 5px 0 5px 51px; background: url("../../img/usr/common/icon_review.png") left center no-repeat; -webkit-background-size: 36px 36px; background-size: 36px 36px; display: inline-block;}
.page-top .block-top-review .block-top-review-inner { width: 1036px; margin: 0 auto; position: relative;}
.page-top .block-top-review .block-top-review-inner .revico-back,
.page-top .block-top-review .block-top-review-inner .revico-next { width: 60px; height: 140px; margin: 0; border: #CCCCCC 1px solid; position: absolute; top: 150px !important; outline: 0; z-index: 3; background: rgba(239,239,239,0.85); box-sizing: border-box; transition: 0.4s;}
.page-top .block-top-review .block-top-review-inner .revico-back img,
.page-top .block-top-review .block-top-review-inner .revico-next img { width: 60px !important; height: 140px !important; opacity: 0 !important; position: relative; z-index: 5;}
.page-top .block-top-review .block-top-review-inner .revico-back { border-radius: 0 10px 10px 0; left: -80px;}
.page-top .block-top-review .block-top-review-inner .revico-next { border-radius: 10px 0 0 10px; right: -80px;}
.page-top .block-top-review .block-top-review-inner .revico-back:hover,
.page-top .block-top-review .block-top-review-inner .revico-next:hover { background: rgba(255,247,235,0.85);}
.page-top .block-top-review .block-top-review-inner .revico-back::before { content: ''; width: 26px; height: 26px; border-top: 3px solid #E98805; border-right: 3px solid #E98805; transform: rotate(-135deg); position: absolute; left: 20px; top: 30px; z-index: 1;}
.page-top .block-top-review .block-top-review-inner .revico-next::before { content: ''; width: 26px; height: 26px; border-top: 3px solid #E98805; border-right: 3px solid #E98805; transform: rotate(45deg); position: absolute; left: 10px; top: 30px; z-index: 1;}
.page-top .block-top-review .block-top-review-inner .revico-back::after { content: '前へ'; width: 58px; color: #333; font-size: 16px; font-weight: 500; text-indent: 0; text-align: center; position: absolute; left: 0; bottom: 30px;}
.page-top .block-top-review .block-top-review-inner .revico-next::after { content: '次へ'; width: 58px; color: #333; font-size: 16px; font-weight: 500; text-indent: 0; text-align: center; position: absolute; right: 0; bottom: 30px;}
.page-top .block-top-review .block-top-review-inner .revico-back:hover::after,
.page-top .block-top-review .block-top-review-inner .revico-next:hover::after { color: #E98805;}
.page-top .block-top-review .revico-multicomment-top .revico-comment-main { max-width: 1036px !important;}
.page-top .block-top-review .revico-multicomment-top .revico-review-comment-row-wrapper { width: 214px !important; min-width: 214px !important; height: auto !important; padding: 0 !important; margin: 0; position: relative; background-color: inherit;}
.page-top .block-top-review .revico-multicomment-top .revico-review-comment-row { height: 100%; box-sizing: border-box;}
.page-top .block-top-review .revico-multicomment-top .revico-review-comment-row .revico-review-comment-detail { width: 214px !important; height: 100%; padding: 0 34px 60px 0!important; position: relative; box-sizing: border-box;}
.page-top .block-top-review .revico-review-comment-detail--product-name-image { width: 180px; height: 180px; margin: 0 0 10px 0; background: none; position: relative;}
.page-top .block-top-review .revico-review-comment-detail--product-name-image figure { width: 180px; height: 180px; background: none; position: relative;}
.page-top .block-top-review .revico-review-comment-detail--product-name-image figure::before { content: '詳細を見る'; width: 180px; height: 180px; font-size: 18px; font-weight: bold; color: #fff; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.4); position: absolute; top: 0; left: 0; z-index: 1; opacity: 0; transition: 0.4s;}
.page-top .block-top-review .revico-review-comment-detail--product-name-image figure::after { content: ''; width: 0; height: 0; border-color: transparent transparent transparent #fff; border-style: solid; border-width: 6px 0 6px 10px; vertical-align: middle; display: inline-block; position: absolute; top: calc(50% - 7.5px); left: 27px; z-index: 1; opacity: 0;}
.page-top .block-top-review .revico-review-comment-detail--product-name-image a:hover figure::before { opacity: 1;}
.page-top .block-top-review .revico-review-comment-detail--product-name-image a:hover figure::after  { opacity: 1;}
.page-top .block-top-review .revico-review-comment-detail--product-name-image img { width: auto !important; height: auto !important;}
.page-top .block-top-review .revico-review-comment-detail--product-name-wrap { height: 55px; margin: 0 0 10px 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-align: left; font-size: 18px;}
.page-top .block-top-review .revico-review-comment-detail--product-name-wrap a { font-size: 18px; font-weight: bold; text-decoration: underline !important; color: #333 !important;}
.page-top .block-top-review .revico-review-comment-detail--product-name-wrap a:hover { text-decoration: none !important;}
.page-top .block-top-review .revico-multicomment-top .revico-starability-result { background-image: url("../../img/usr/common/revico_star.png") !important;}
.page-top .block-top-review .revico-review-comment-detail--star-rate { transform: scale(0.8) !important; margin: 0 auto !important;}
.page-top .block-top-review .revico-review-comment-detail--comment-wrap { margin: 0; font-size: 16px; text-align: left; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;}
.page-top .block-top-review .revico-review-comment-detail--product-button a { width: 180px; height: 40px; padding: 0; margin: 0 auto; border: #E98600 1px solid !important; border-radius: 30px; font-size: 16px; font-weight: 400; background: linear-gradient( #FFFFFF 0%, #f3f3f3 50%, #EEEEEE 50%); display: flex; justify-content: center; align-items: center; text-decoration: none; color: #333; box-sizing: border-box; box-shadow: 0px 5px 5px -5px rgba(0,0,0,0.6); position: absolute; bottom: 10px; left: 0; transition: 0.2s background, 0.2s color ease-out 0.05s;}
.page-top .block-top-review .revico-review-comment-detail--product-button a::after { content: ''; width: 0; height: 0; border-color: transparent transparent transparent #E98600; border-style: solid; border-width: 4px 0 4px 8px; vertical-align: middle; display: inline-block; position: absolute; top: calc(50% - 4px); right: 14px;}
.page-top .block-top-review .revico-review-comment-detail--product-button a:hover { background: linear-gradient( #FF9601 0%, #FF9A11 49%, #FDA329 50%, #F3BE75 100%); color: #fff !important;}
.page-top .block-top-review .revico-review-comment-detail--product-button a:hover::after { border-color: transparent transparent transparent #fff !important;}

/* ----------------------------------
 Event
---------------------------------- */
.event-frame#event_cm { background: #FFF7EB;}
h2.block-top-title#block_top_cm span { padding: 5px 0 5px 51px; background: url("../../img/usr/common/icon_tv.png") left center no-repeat; -webkit-background-size: 36px 36px; background-size: 36px 36px; display: inline-block;}
.event-frame#event_new-arrival { background: #FFF;}
h2.block-top-title#block_top_new_arrival span { padding: 5px 0 5px 51px; background: url("../../img/usr/common/icon_new.png") left center no-repeat; -webkit-background-size: 36px 36px; background-size: 36px 36px; display: inline-block;}

.block-top-event-more-btn a.design-btn { width: 700px; cursor: pointer;}
.block-top-event-more-btn a.design-btn span { width: 80px; height: 56px; padding: 30px 0 0 0; border-left: #E98600 2px solid; font-size: 14px; font-weight: bold; color: #E98600; position: absolute; top: 0; right: 0; display: flex; justify-content: center; align-items: center; box-sizing: border-box;}
.block-top-event-more-btn a.design-btn span::before,
.block-top-event-more-btn a.design-btn span::after { content: ''; width: 24px; height: 3px; background: #E98600; position: absolute; top: 18px; left: calc(50% - 14px); display: block;}
.block-top-event-more-btn a.design-btn span::after { transform: rotate(90deg);}
.block-top-event-more-btn a.design-btn:hover span { color: #FFF;}
.block-top-event-more-btn a.design-btn:hover span::before,
.block-top-event-more-btn a.design-btn:hover span::after { background: #FFF;}

.block-top-event-close-btn { display: none;}
.block-top-event-close-btn a.design-btn { width: 700px; cursor: pointer;}
.block-top-event-close-btn a.design-btn span { width: 80px; height: 56px; padding: 30px 0 0 0; border-left: #E98600 2px solid; font-size: 14px; font-weight: bold; color: #E98600; position: absolute; top: 0; right: 0; display: flex; justify-content: center; align-items: center; box-sizing: border-box;}
.block-top-event-close-btn a.design-btn span::before { content: ''; width: 24px; height: 3px; background: #E98600; position: absolute; top: 18px; left: calc(50% - 14px); display: block;}
.block-top-event-close-btn a.design-btn:hover span { color: #FFF;}
.block-top-event-close-btn a.design-btn:hover span::before { background: #FFF;}

/* Feature */
.block-top-feature { padding: 60px 0; background: #FFF7EB;}
.block-top-feature h2.block-top-title span { padding: 5px 0 5px 51px; background: url("../../img/usr/common/icon_feature.png") left center no-repeat; -webkit-background-size: 36px 36px; background-size: 36px 36px; display: inline-block;}
.block-top-feature-list { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap;}
.block-top-feature-list li { width: calc((100% - 80px) / 3); margin: 0 40px 40px 0;}
.block-top-feature-list li a { text-decoration: none;}
.block-top-feature-list li:nth-child(3n) { margin: 0 0 40px 0;}
.block-top-feature-list li .image { margin: 0 0 10px 0;}
.block-top-feature-list li .image img { transition: 0.3s ease-out;}
.block-top-feature-list li a:hover .image img {	transform: translateY(-8px); box-shadow: 0px 5px 5px -5px rgba(0,0,0,0.6);}
.block-top-feature-list li .comment { font-size: 16px;}

/* ----------------------------------
 Category List
---------------------------------- */
.block-top-categorysearch { padding: 60px 0;}
.block-top-categorysearch h2.block-top-title span { padding: 5px 0 5px 51px; background: url("../../img/usr/common/icon_categorysearch.png") left center no-repeat; -webkit-background-size: 36px 36px; background-size: 36px 36px; display: inline-block;}
.block-top-categorysearch-list { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap;}
.block-top-categorysearch-list li { width: calc((100% - 80px) / 5); height: 180px; margin: 0 20px 24px 0; border: #E98600 1px solid; border-radius: 10px; box-sizing: border-box;}
.block-top-categorysearch-list li:nth-child(5n) { margin: 0 0 24px 0;}
.block-top-categorysearch-list li a { height: 178px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #FFF7EB; box-sizing: border-box; transition: all 0.4s;}
.block-top-categorysearch-list li a span { width: calc(100% - 20px); height: 158px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all 0.4s;}
.block-top-categorysearch-list li .icon { width: 68px; height: 68px; margin: 0 auto;}
.block-top-categorysearch-list li .name { height: 40px; margin: 10px 0 0 0; font-size: 16px; line-height: 1.2; display: flex; justify-content: center; align-items: center; text-align: center; text-decoration: underline; transition: all 0.4s;}
.block-top-categorysearch-list li a:hover span  { background: #FFF;}
.block-top-categorysearch-list li a:hover .name { color: #E98600;}