@charset "UTF-8";

/*-----------------------------------------
 COMMON
-----------------------------------------*/
.page-top .pane-contents .container .pane-main { width: 100%; min-width: 0;}
.page-top .pane-right-menu { width: 100%; margin: 0;}
h2.block-top-title { padding: 0; margin: 0 0 30px; border: 0; font-size: 34px; font-weight: 700; text-align: center; line-height: 1.0; letter-spacing: 0.1em;}
h2.block-top-title span { margin: 10px 0 0 0; font-size: 13px; font-weight: 400; text-align: center; line-height: 1.5; letter-spacing: 0.05em; display: block;}

/*-----------------------------------------
 VISUAL
-----------------------------------------*/
#block_top_visualslider { width: 74%; margin: 0 auto 50px; position: relative;}
#block_top_visualslider #top_visualslider { margin: 0;}
#block_top_visualslider #top_visualslider .swiper-slide img { /*border-radius: 10px;*/ vertical-align: top; /*transition: 0.3s;*/ width: 100%;}
/* #block_top_visualslider #top_visualslider .swiper-slide:not(.swiper-slide-active) img { opacity: 0.6;} */
#block_top_visualslider #top_visualslider_thumbnail { width: 1220px; padding: 0 10px 15px; margin: 0 -10px; position: relative; box-sizing: border-box; overflow: hidden;}
#block_top_visualslider #top_visualslider_thumbnail .swiper-slide img { border-radius: 5px; vertical-align: top;}
#block_top_visualslider #top_visualslider_thumbnail .swiper-slide.swiper-slide-thumb-active { position: relative;}
#block_top_visualslider #top_visualslider_thumbnail .swiper-slide.swiper-slide-thumb-active::after { content: ''; width: 100%; height: 4px; border-radius: 10px; display: block; background: #AAA493; position: absolute; bottom: -10px; left: 0;}
#block_top_visualslider #top_visualslider_thumbnail .swiper-button-prev,
#block_top_visualslider #top_visualslider_thumbnail .swiper-button-next { width: 35px; height: 35px; border-radius: 35px; font-size: 0; color: #AAA493; display: block; background: #AAA493; opacity: 0.8; position: absolute; top: calc(50% - 2px);}
#block_top_visualslider #top_visualslider_thumbnail .swiper-button-prev { left: 0;}
#block_top_visualslider #top_visualslider_thumbnail .swiper-button-next { right: 0;}
#block_top_visualslider #top_visualslider_thumbnail .swiper-button-prev::after,
#block_top_visualslider #top_visualslider_thumbnail .swiper-button-next::after { content: ''; width: 10px; height: 10px; border-top: #fff 1px solid; border-right: #fff 1px solid; transform: rotate(45deg); display: block; position: absolute; top: calc(50% - 5px); right: 15px;}
#block_top_visualslider #top_visualslider_thumbnail .swiper-button-prev::after { right: 10px; transform: rotate(-135deg);}
#block_top_visualslider .swiper-pagination-bullet { opacity: .1; margin: 0 5px; width: 10px; height: 10px;}
#block_top_visualslider .swiper-pagination-bullet-active {background: #AAA493; opacity: 1;}
#block_top_visualslider #top_visualslider .swiper-button-prev,
#block_top_visualslider #top_visualslider .swiper-button-next { width: 45px; height: 45px; border-radius: 35px; font-size: 0; color: #AAA493; display: block; background: #AAA493; opacity: 0.8; position: absolute; top: 50% ;}
#block_top_visualslider #top_visualslider .swiper-button-prev { width: 17.56%; height:calc(100% - 36px); background-color: rgba(0,0,0,0.5); left: -17.56%; top:0; border-radius: 0; opacity: 1; margin: 0;}
#block_top_visualslider #top_visualslider .swiper-button-next {  width: 17.56%; height:calc(100% - 36px); background-color: rgba(0,0,0,0.5); right: -17.56%; top:0; border-radius: 0; opacity: 1; margin: 0;}
#block_top_visualslider #top_visualslider .swiper-button-prev::after,
#block_top_visualslider #top_visualslider .swiper-button-next::after { content: ''; width: 15px; height: 15px; border-top: #fff 2px solid; border-right: #fff 2px solid; transform: translateX(50%) rotate(45deg); display: block; position: absolute; top: calc(50% - 5px); right: 50%;}
#block_top_visualslider #top_visualslider .swiper-button-prev::after {transform: translateX(50%) rotate(-135deg);}
#block_top_visualslider .swiper-controller{ display: flex; align-items: center; justify-content: center; margin-top: 15px;}
#block_top_visualslider .swiper-pagination {position: static;}
#block_top_visualslider .swiper-controller-btn{border: none; background: none; outline: none; position: relative; display: inline-block; width: 10px; height: 16px; margin-right: 10px; cursor: pointer;}
#block_top_visualslider .swiper-controller-btn::after, #block_top_visualslider .swiper-controller-btn::before {background: #AAA493; position: absolute; top: 0; display: block; width: 3px; height: 100%; content: "";}
#block_top_visualslider .swiper-controller-btn::before  {left: 0;}
#block_top_visualslider .swiper-controller-btn::after {right: 0;}
#block_top_visualslider .swiper-controller-btn.is-stop::before {background: none; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 9px solid #AAA493;}
#block_top_visualslider .swiper-controller-btn.is-stop::after{display: none;}

/*-----------------------------------------
 NOTICE
-----------------------------------------*/
#block_top_notice { padding: 50px 0;}
#block_top_notice .block-top-notice-list { width: 1200px; margin: 0 auto;}
#block_top_notice .block-top-notice-list li { margin: 0; position: relative; transition: 0.3s;}
#block_top_notice .block-top-notice-list li + li { margin: 10px 0 0 0;}
#block_top_notice .block-top-notice-list li a { text-decoration: none; display: flex; align-items: center; border: 1px solid #ed8fa2; padding: 0 10px;}
#block_top_notice .block-top-notice-list li a::after { content: ''; width: 10px; height: 10px; border-top: #333 1px solid; border-right: #333 1px solid; transform: rotate(45deg); display: block; position: absolute; top: calc(50% - 5px); right: 15px;}
#block_top_notice .block-top-notice-list li:hover { opacity: 0.5;}
#block_top_notice .block-top-notice-list .icon { background-color: #ed8fa2; color: #fff; padding: 2px 15px; width: fit-content; flex-shrink: 0;}
#block_top_notice .block-top-notice-list dl { padding: 5px 20px; min-height: 60px; display: flex; justify-content: space-between; align-items: center;}
#block_top_notice .block-top-notice-list dl dt { width: 100px; font-size: 16px; box-sizing: border-box;}
#block_top_notice .block-top-notice-list dl dd { width: calc(100% - 100px); padding: 0 35px 0 0; font-size: 16px; box-sizing: border-box;}

/*-----------------------------------------
 BRAND
-----------------------------------------*/
#block_top_brand { margin: 50px 0;}
#block_top_brand .block-top-brand-list { width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap;}
#block_top_brand .block-top-brand-list .brand-shop { width: 285px; height: 130px; margin: 0 20px 20px 0; border: #E5E5E5 1px solid; border-radius: 5px; transition: 0.3s;}
#block_top_brand .block-top-brand-list .brand-shop:nth-child(4n) { margin: 0 0 20px 0;}
#block_top_brand .block-top-brand-list .brand-shop:hover { border-color: #AAA493; opacity: 0.7;}
#block_top_brand .block-top-brand-list .brand-shop a { width: 283px; height: 128px;}
/* #block_top_brand .block-top-brand-list .brand-shop a figure { width: 100%; height: 100%; padding: 35px 60px; display: flex; justify-content: center; align-items: center;} */
/* #block_top_brand .block-top-brand-list .natra a figure { padding: 15px 60px;} */

/*-----------------------------------------
 PICKUP-TOPICS
-----------------------------------------*/
#block_top_pickup_topics { margin: 50px 0; background: #FFFFFF;}
#block_top_pickup_topics .block-top-pickup-topics-list { width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap;}
#block_top_pickup_topics .block-top-pickup-topics-list li { width: 285px; padding: 0 0 1px 0; margin: 0 20px 20px 0; border-radius: 10px 0 10px 0; overflow: hidden; background: #fff;}
#block_top_pickup_topics .block-top-pickup-topics-list li:nth-child(4n) { margin: 0 0 20px 0;}
#block_top_pickup_topics .block-top-pickup-topics-list li a { text-decoration: none; transition: 0.3s;}
#block_top_pickup_topics .block-top-pickup-topics-list li a:hover { opacity: 0.7;}
#block_top_pickup_topics .block-top-pickup-topics-list li a figure { width: 285px; height: 200px; display: flex; justify-content: center; align-items: center; overflow: hidden;}
#block_top_pickup_topics .block-top-pickup-topics-list li a figure img { transition: 0.5s;}
#block_top_pickup_topics .block-top-pickup-topics-list li a:hover figure img { transform: scale(1.1, 1.1);}
#block_top_pickup_topics .block-top-pickup-topics-list li a .text { margin: 20px; font-size: 16px; line-height: 1.8; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}

/*-----------------------------------------
 VOICE
-----------------------------------------*/
#block_top_voice { margin: 50px 0; background: #fff;}
#block_top_voice_inner { text-align: center;}

/*-----------------------------------------
 INSTAGRAM
-----------------------------------------*/
#block_top_instagram { margin: 50px 0; background: #fff;}
#block_top_instagram_inner { width: 1200px; margin: 0 auto;}
#block_top_instagram .tab-frame { margin: 0 0 60px 0;}
#block_top_instagram .tab-frame ul { display: flex; justify-content: space-between;}
#block_top_instagram .tab-frame ul li { flex: 1; height: 64px; border-top: #fff 1px solid; border-bottom: #333 1px solid; font-size: 15px; color: #707070; display: flex; justify-content: center; align-items: center; cursor: pointer;}
#block_top_instagram .tab-frame ul li.active { border: #333 1px solid; border-bottom: #fff 1px solid;}
#block_top_instagram .tab-frame ul li.active:first-child { border-left: none;}
#block_top_instagram .tab-frame ul li.active:last-child  { border-right: none;}
#block_top_instagram .contents-frame { height: 450px; position: relative;}
#block_top_instagram .contents-frame .contents-box { width: 100%; height: 450px; position: absolute; top: 0; left: 0; z-index: -1; opacity: 0; transition: 0.3s;}
#block_top_instagram .contents-frame .contents-box.active { z-index: 1; opacity: 1;}
#block_top_instagram .ecbn-selection-image-loading-more { display: none !important; }

/*-----------------------------------------
 PICKUP
-----------------------------------------*/
#block_top_pickup  { padding: 0; margin: 50px 0; background: #fff;}
#block_top_pickup .block-top-pickup-message { display: flex; justify-content: space-between;}
#block_top_pickup .message-box { width: 50%; height: 500px; display: flex; justify-content: center; align-items: center; position: relative;}
#block_top_pickup .message-box.company { background: url("../../img/usr/top/pickup/company_bg.jpg") center center no-repeat; -webkit-background-size: cover; background-size: cover;}
#block_top_pickup .message-box.sustainability { background: url("../../img/usr/top/pickup/sustainability_bg.jpg") center center no-repeat; -webkit-background-size: cover; background-size: cover;}
#block_top_pickup .message-box::before { content: ''; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; transition: 0.3s;}
#block_top_pickup .message-box.company::before { background: rgba(67,26,45,0.7);}
#block_top_pickup .message-box.sustainability::before { background: rgba(29,48,27,0.7);}
#block_top_pickup .message-box:hover::before { opacity: 0.7 !important;}
#block_top_pickup .message-box-inner { min-width: 300px; position: relative; z-index: 1; text-align: center; color: #fff;}
#block_top_pickup .message-box-inner .title { margin: 0 0 20px 0; font-size: 40px; font-weight: 700; text-align: center; color: #fff;}
#block_top_pickup .message-box-inner .message { margin: 0 0 30px 0; font-size: 24px; font-weight: 400; text-align: center; line-height: 1.8; color: #fff;}
#block_top_pickup .message-box-inner .button { max-width: 300px; height: 50px; margin: 0 auto;}
#block_top_pickup .message-box-inner .button a { width: 100%; height: 50px; border: #fff 1px solid; border-radius: 5px; font-size: 14px; font-weight: 400; text-align: center; text-decoration: none; display: flex; justify-content: center; align-items: center; color: #fff; transition: 0.3s;}
#block_top_pickup .message-box-inner .button a::after { content: ''; width: 14px; height: 14px; margin: 0 0 0 10px; display: inline-block; background: url("../../img/usr/common/icon_for_blank.png") left center no-repeat; -webkit-background-size: 14px 14px; background-size: 14px 14px;}
#block_top_pickup .message-box-inner .button a:hover { color: #AAA493; background: #fff;}
#block_top_pickup .message-box-inner .button a:hover::after { background: url("../../img/usr/common/icon_for_blank_ash.png") left center no-repeat; -webkit-background-size: 14px 14px; background-size: 14px 14px;}

/*-----------------------------------------
 EVENT
-----------------------------------------*/
#block_of_event { width: 1200px; padding: 0; margin: 0 auto; background: #fff;}
#block_of_event { width: 1200px; padding: 0; margin: 0 auto; background: #fff;}
/* Ranking */
.page-top .block-ranking-r .block-ranking-r--items li { width: calc((100% - 80px) / 5); flex-basis: calc((100% - 80px) / 5);}
.page-top .block-ranking-r .block-ranking-r--items li:nth-child(4n) { margin: 0 20px 50px 0;}
.page-top .block-ranking-r .block-ranking-r--items li:nth-child(5n) { margin: 0 0 50px 0;}
.page-top .block-ranking-r .block-ranking-r--items li .block-ranking-r--goods-image figure { height: 224px;}
/* Pickup */
.page-top .block-pickup-list-p li.block-pickup-list-p--item-body { width: calc((100% - 80px) / 5); flex-basis: calc((100% - 80px) / 5);}
.page-top .block-pickup-list-p li.block-pickup-list-p--item-body:nth-child(4n) { margin: 0 20px 50px 0;}
.page-top .block-pickup-list-p li.block-pickup-list-p--item-body:nth-child(5n) { margin: 0 0 50px 0;}
.page-top .block-pickup-list-p .block-pickup-list-p--image figure { height: 224px;}
/* Thumbnail */
.page-top .block-thumbnail-t li { width: calc((100% - 80px) / 5); flex-basis: calc((100% - 80px) / 5);}
.page-top .block-thumbnail-t li:nth-child(4n) { margin: 0 20px 50px 0;}
.page-top .block-thumbnail-t li:nth-child(5n) { margin: 0 0 50px 0;}
.page-top .block-thumbnail-t li .block-thumbnail-t--goods-image figure { height: 224px;}

/*-----------------------------------------
 block-top-title-band
-----------------------------------------*/
.block-top-title-band { display: flex; align-items: center; padding: 0; margin: 0 auto 30px; border: 0; font-size: 12px; font-weight: 700; line-height: 1.0; letter-spacing: 0.1em; background-color: #f5f3ed; padding: 13px 20px; max-width: 1200px;}
.block-top-title-band span { display: block; margin: 0 10px 0 0; font-size: 18px; font-weight: 400; line-height: 1.5; letter-spacing: 0.05em; }
#block_top_brand .block-top-title-band { margin-bottom: 20px;}