
      #extra_main{
        width: 100%;
        height: 390px;
          overflow: hidden;
          margin-top: 0px;
}
      
    .slider {
        width: 2080px;
        margin: 0px auto 0px auto;

    }
@media screen and (max-width:520px) {
    
      #extra_main{
        width: 100%;
        height: auto;
          overflow: hidden;
          margin-top: 0px;
}
    
    .slider {
        width: 100%;
        margin: 0px auto 0px auto;
    }
 
}
    .slick-slide {
      margin: 0px 0px;
        
               
    }

    .slick-slide img {
width: 100%;
        height: auto;
        vertical-align: bottom;
    }

    .slick-prev:before,
    .slick-next:before {
      color: black;
    }


    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: 1;

    }
    
    .slick-active {
      opacity: 1;
    }

    .slick-current {
      opacity: 1;
    }
      .slider {background-color: #FFF}
      .slider01 {}
      .slider02 {}
      .slider03 {}
      .slider04 {}
      .slider05 {}      

      .slider01 a,
      .slider02 a,
      .slider03 a,
      .slider04 a,
      .slider05 a{
        display: block;
        position: relative;
          color: #333;
      }
      .slider a:hover{opacity: 0.7}
      .slider01 a .mediaCaption,
      .slider02 a .mediaCaption,
      .slider03 a .mediaCaption,
      .slider04 a .mediaCaption,
      .slider05 a .mediaCaption{
        position: absolute;
        display: block;
        width: 40%;
        background-color: rgba( 255, 255, 255, 0.80 );
    top: 50%;
        left: 40px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
        height: auto;
          padding: 25px;
      }
      
      
@media screen and (max-width:520px) {
      .slider01 a .mediaCaption,
      .slider02 a .mediaCaption,
      .slider03 a .mediaCaption,
      .slider04 a .mediaCaption,
      .slider05 a .mediaCaption{
        width: 100%;
    top: auto;
        left: 0;
          bottom: 0;
    transform: none;
    -webkit-transform: none;
    -ms-transform:none;
        height: auto;
          padding: 15px;
          background-color: rgba( 255, 255, 255, 0.9 );
      }
 
}
      
      
      .mediaCaption .inner{}
      .mediaCaption .inner .text_big{font-weight: bold;font-size: 22px;margin-bottom: 10px;}
@media screen and (max-width:520px) {
      .mediaCaption .inner .text_big{font-weight: bold;font-size: 18px;margin-bottom: 5px;}
      
      }
      
      .mediaCaption .inner .text_description{}

@media screen and (max-width:520px) {
      .mediaCaption .inner .text_description{font-size: 14px;}
      
      }
      


/*

CSS新規==================================================

*/


.ns{}

.ns .more{margin: 20px 0px 0px auto;width: 100px;background-image: url(../img/common/top_category_arrow.png);background-repeat: no-repeat; background-position: right 10px center}

.ns .more:hover{opacity: 0.6}

@media screen and (max-width:1280px) {
     .ns .more{margin: 30px 0px 0px auto;width: 100px;font-size: 14px;}
      
      }


/*フォントスタイル*/

.ns h2{font-family: "helvetica", "メイリオ";font-size: 24px; text-align: left;color: #3c4650;padding: 0px;margin: 0px}

@media screen and (max-width:770px) {
.ns h2{font-size: 18px;}
      
      }

.ns a{text-decoration: none; color: #333;}

.ns ul,
.ns ul li{ list-style: none;padding: 0px;margin: 0px}

.ns ul li .name{font-size: 11px;    font-weight: 400;color: #3c4650}
.ns ul li .price{font-size: 13px;    font-weight: 400;color: #3c4650}



/*

CATEGORY==================================================

*/


.top_category{margin-bottom: 100px;padding: 60px 20px 0px 20px;}


.top_category .top_category_inner ul{padding: 0px; margin: 0; display: flex;justify-content: space-between;flex-wrap: wrap}
.top_category .top_category_inner ul li{    width: 16%;
    margin: 0;
    padding: 0px;
background-color: #fff;
    border-bottom: 1px dashed #dee5eb;
position: relative;
    display: block;
font-size: 14px;
height: auto}

.top_category .top_category_inner ul li a{
  color: #333;
  text-decoration: none;
  display: flex;
  padding: 7px 0px 7px 10px;
  background-position: right 10px center;
  background-repeat: no-repeat;
  height: 100%;
  align-items: center;
  min-height: 60px;
justify-content: space-between;
    
}
.top_category .top_category_inner ul li a .img{ width: 45px}
.top_category .top_category_inner ul li a .img img{width: 100%}
.top_category .top_category_inner ul li a .text{ width:calc(100% -  55px)}
.top_category .top_category_inner ul li a:hover{opacity: 0.6}

@media screen and (max-width:1280px) {
    .top_category{margin-bottom: 60px;padding: 60px 20px 0px 20px;}
      .top_category .top_category_inner ul li{    width: 31%;}
      
      }


@media screen and (max-width:900px) {
    .top_category{margin-bottom: 50px;padding: 50px 20px 0px 20px;}
      .top_category .top_category_inner ul li{    width: 49%;}
      
      }

@media screen and (max-width:769px) {
.top_category .top_category_inner ul li{
font-size: 12px;}
}




/*

pick up items ==================================================

*/
.top_pick_up_item_inner {margin-bottom: 100px;padding: 20px 20px 0px 20px;}

@media screen and (max-width:769px) {
    .top_pick_up_item_inner {margin-bottom: 50px:}
}


.top_pick_up_item_inner .container{width: 100%;padding: 0px;margin: 0px;}


.top_pick_up_item_inner .tab-list {
  width: 100%;
  display: none;
/*display: flex;*/    
    padding: 0px;
    margin: 0px;
}
@media screen and (max-width:1280px) {
    
.top_pick_up_item_inner .tab-list {
  width: 100%;
  display: none;
/*display: flex;*/ 
  overflow-x: auto;
  overflow-y: hidden;
 -webkit-overflow-scrolling: auto;
  overflow: auto;
  white-space: nowrap;    
}
    
}


.top_pick_up_item_inner .tab-list li {
 width: calc(100%/14);
  height: 30px;
  line-height: 30px;
  text-align: center;
  display: block;
  background-color: #FFF;
  color: #aaaab4;
    font-weight: 400;
    border-bottom: 3px solid #ccc;
    font-size: 12px;
    cursor: pointer;
}


@media screen and (max-width:1280px) {
    
.top_pick_up_item_inner .tab-list li {
    min-width: 120px;
}
   
    
}


.top_pick_up_item_inner .tab-list li:hover {opacity: 0.6}
.top_pick_up_item_inner .tab-list li.active {
  background-color: #FFF;
  color: #3c4650;
    font-weight: 700;
  border-bottom: 3px solid #3c4650;
}

.top_pick_up_item_inner .tab-container{ width: 100% !important}



.top_pick_up_item_inner .tab-container .tab-content {
  display: none;
}


.top_pick_up_item_inner .tab-container .tab-content.active {
  display: block;
}


.top_pick_up_item_inner .tab-container .tab-content {
    width: 100%;
}

.top_pick_up_item_inner .tab-container .tab-content ul{
 padding-top: 20px;
display: flex;justify-content: space-between;flex-wrap: wrap
}


.top_pick_up_item_inner .tab-container .tab-content ul li{
   width: 15%;
   word-wrap: break-word;
}
.top_pick_up_item_inner .tab-content ul li:nth-of-type(-n+12){   padding-bottom: 20px;}

.top_pick_up_item_inner .tab-container .tab-content ul li .img{
    margin-bottom: 10px;border: 1px solid #CCC; height: 214px;text-align: center;overflow: hidden
}
.top_pick_up_item_inner .tab-container .tab-content ul li .img img{height: 100%; width: auto;}
.top_pick_up_item_inner .tab-container .tab-content ul li:hover{opacity: 0.6}


@media screen and (max-width:1280px) {
    
.top_pick_up_item_inner .tab-container .tab-content ul li { width: 22%;}
.top_pick_up_item_inner .tab-container .tab-content ul li:last-of-type {margin-right: 52%}
.top_pick_up_item_inner .tab-content ul li:nth-of-type(-n+16){   padding-bottom: 20px;}
    
    
}
@media screen and (max-width:900px) {
    
.top_pick_up_item_inner .tab-container .tab-content ul li .img{
    margin-bottom: 10px;border: 1px solid #CCC; height: 150px;text-align: center;overflow: hidden
}
 
}

@media screen and (max-width:769px) {
.top_pick_up_item_inner .tab-container .tab-content ul li { width: 30%;}
.top_pick_up_item_inner .tab-content ul li:nth-of-type(-n+20){   padding-bottom: 20px;}
.top_pick_up_item_inner .tab-container .tab-content ul li:last-of-type {margin-right: 0%}
.top_pick_up_item_inner .tab-container .tab-content ul li .img{
    margin-bottom: 10px;border: 1px solid #CCC; height: 90px;text-align: center;overflow: hidden
}
 
}











/*

top ranking ==================================================

*/


.top_ranking_inner {margin-bottom: 100px;padding: 20px 20px 0px 20px;}

.top_ranking_inner .container{width: 100%;padding: 0px;margin: 0px;}


.top_ranking_inner .tab-list {
  width: 100%;
  display: none;
/*display: flex;*/ 
    padding: 0px;
    margin: 0px;
}
@media screen and (max-width:1280px) {

    
    
.top_ranking_inner .tab-list {
  width: 100%;
  display: none;
/*display: flex;*/ 
  overflow-x: auto;
  overflow-y: hidden;
 -webkit-overflow-scrolling: auto;
  overflow: auto;
  white-space: nowrap;    
}
    
}


.top_ranking_inner .tab-list li {
 width: calc(100%/16);
  height: 30px;
  line-height: 30px;
  text-align: center;
  display: block;
  background-color: #FFF;
  color: #aaaab4;
    font-weight: 400;
    border-bottom: 3px solid #ccc;
    font-size: 12px;
    cursor: pointer;
}


@media screen and (max-width:1280px) {
    
.top_ranking_inner .tab-list li {
    min-width: 120px;
}
   
    
}


.top_ranking_inner .tab-list li:hover {opacity: 0.6}
.top_ranking_inner .tab-list li.active {
  background-color: #FFF;
  color: #3c4650;
    font-weight: 700;
  border-bottom: 3px solid #3c4650;
}

.top_ranking_inner .tab-container{ width: 100% !important}



.top_ranking_inner .tab-container .tab-content2 {
  display: none;
}

.top_ranking_inner .tab-container .tab-content2 {
    width: 100%;
}

.top_ranking_inner .tab-container .tab-content2 ul{
    padding-top: 20px;
display: flex;justify-content: space-between;flex-wrap: wrap
}


.top_ranking_inner .tab-container .tab-content2 ul li{
   width: 15%;
    position: relative;
    word-wrap: break-word;
}

@media screen and (max-width:1280px) {
    
    .top_ranking_inner .tab-container .tab-content2 ul li { width: 22%;}
   
    
}

@media screen and (max-width:769px) {
    
    .top_ranking_inner .tab-container .tab-content2 ul li { width: 30%;}
   
    
}



.top_ranking_inner .tab-container .tab-content2 ul li::after{
    position: absolute;
    height: 30px;
    width: 30px;
    text-align: center;
    background-color: #1e2e52;
    color: #FFF;
    padding-top: 3px;
    top: 0;
    left: 0;
    font-size: 16px;
    
}


@media screen and (max-width:769px) {
    
.top_ranking_inner .tab-container .tab-content2 ul li::after{font-size: 12px;height: 25px;width: 25px;padding-top: 4px}
   
    
}

.top_ranking_inner .tab-container .tab-content2 ul li:nth-of-type(-n+4)::after{height: 40px;width: 40px;padding-top: 4px;font-size: 20px}

@media screen and (max-width:769px) {
    
.top_ranking_inner .tab-container .tab-content2 ul li:nth-of-type(-n+4)::after{font-size: 12px;height: 25px;width: 25px;padding-top: 4px}
   
    
}



.top_ranking_inner .tab-container .tab-content2 ul li:nth-child(1)::after{content: "1";}
.top_ranking_inner .tab-container .tab-content2 ul li:nth-child(2)::after{content: "2";}
.top_ranking_inner .tab-container .tab-content2 ul li:nth-child(3)::after{content: "3";}
.top_ranking_inner .tab-container .tab-content2 ul li:nth-child(4)::after{content: "4";}
.top_ranking_inner .tab-container .tab-content2 ul li:nth-child(5)::after{content: "5";}
.top_ranking_inner .tab-container .tab-content2 ul li:nth-child(6)::after{content: "6";}
.top_ranking_inner .tab-container .tab-content2 ul li:nth-child(7)::after{content: "7";}
.top_ranking_inner .tab-container .tab-content2 ul li:nth-child(8)::after{content: "8";}
.top_ranking_inner .tab-container .tab-content2 ul li:nth-child(9)::after{content: "9";}
.top_ranking_inner .tab-container .tab-content2 ul li:nth-child(10)::after{content: "10";}
.top_ranking_inner .tab-container .tab-content2 ul li:nth-child(11)::after{content: "11";}
.top_ranking_inner .tab-container .tab-content2 ul li:nth-child(12)::after{content: "12";}
.top_ranking_inner .tab-container .tab-content2 ul li:nth-child(13)::after{content: "13";}
.top_ranking_inner .tab-container .tab-content2 ul li:nth-child(14)::after{content: "14";}
.top_ranking_inner .tab-container .tab-content2 ul li:nth-child(15)::after{content: "15";}
.top_ranking_inner .tab-container .tab-content2 ul li:nth-child(16)::after{content: "16";}


.top_ranking_inner .tab-content2 ul li .img{margin-bottom: 10px;border: 1px solid #CCC; height: 214px;text-align: center;overflow: hidden}

@media screen and (max-width:769px) {
    
.top_ranking_inner .tab-content2 ul li .img{height: 90px;}
   
    
}

.top_ranking_inner .tab-content2 ul li .img img{height: 100%; width: auto}
.top_ranking_inner .tab-content2 ul li:hover{opacity: 0.6}

.top_ranking_inner .tab-content2 ul li:nth-of-type(-n+4){width: 24%;  padding-bottom: 20px;}

@media screen and (max-width:1280px) {
    
.top_ranking_inner .tab-content2 ul li:nth-of-type(-n+4){width: 22%;  padding-bottom: 20px;}
   
    
}

.top_ranking_inner .tab-content2 ul li:nth-of-type(-n+4) .img{ height: 345px}

@media screen and (max-width:1280px) {
    
.top_ranking_inner .tab-content2 ul li:nth-of-type(-n+4) .img{ height: 214px}
    
}

@media screen and (max-width:769px) {
    
.top_ranking_inner .tab-content2 ul li:nth-of-type(-n+4) .img{ height: 90px}
    
}

@media screen and (max-width:769px) {
    
.top_ranking_inner .tab-content2 ul li:nth-of-type(-n+4){width: 30%;  padding-bottom: 20px;}
   
    
}

.top_ranking_inner .tab-content2 ul li:nth-of-type(n+4):nth-of-type(-n+9){padding-bottom: 20px;}





@media screen and (max-width:769px) {
    
.top_ranking_inner .tab-content2 ul li:nth-of-type(n+4):nth-of-type(-n+14){padding-bottom: 20px;}
}





.top_ranking_inner .tab-content2 ul li:nth-of-type(-n+12){   padding-bottom: 20px;}


.top_ranking_inner .tab-container .tab-content2.active {
  display: block;
}





















/*
インスタグラム最新記事表示ブロック==================================================
*/
.ec-instagramRole {padding: 0px 20px 0px 20px;
  /* ul要素 */ }


@media screen and (max-width:1280px) {
    
    .ec-instagramRole { width: 100%; margin: 0px auto 0px auto !important ;padding: 0px 20px 50px 20px !important;}

}

@media screen and (max-width:770px) {
    
    .ec-instagramRole { width: calc(100% - 40px); margin: 0px auto 0px auto !important ;padding: 0px 20px 50px 20px !important;}

}


.ec-instagramRole h2{margin-left: -20px}

.ec-instagramRole .ec-instagramRole__list {
    display: flex;
    justify-content: space-between;
    /* li要素（記事単体） */ }
.ec-instagramRole .ec-instagramRole__list li {
      position: relative;            
    width: 24%;
    margin: 0 0 1% 0;
    
      /* 画像メディア */
      /* 動画メディア */
      /* ポップアップ */
      /* hoverでポップアップ表示 */ }
.ec-instagramRole .ec-instagramRole__list li a {
        display: block;
        overflow: hidden; }
.ec-instagramRole .ec-instagramRole__list li .media_image {
        width: 100%;
        height: 0;
        padding-top: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        transition: .6s; }
.ec-instagramRole .ec-instagramRole__list li:hover .media_image {
        transform: scale(1.1);
        -webkit-filter: brightness(1.05);
                filter: brightness(1.05); }
.ec-instagramRole .ec-instagramRole__list li .media_video video {
        display: block;
        width: 100%;
        height: auto; }
.ec-instagramRole .ec-instagramRole__list li .popup {
        font-size: 13px;
        padding: 1em;
        background-color: rgba(0, 0, 0, 0.8);
        color: #fff;
        border-radius: 3px;
        -webkit-filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3));
                filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3));
        pointer-events: none;
        position: absolute;
        bottom: calc(100% + 7px);
        left: 50%;
        width: 100%;
        z-index: 9;
        visibility: hidden;
        opacity: 0;
        transform: translate3d(-50%, 20px, 0);
        transition: .4s;
        /* キャプション */
        /* いいね件数 */
        /* ポップアップくちばし */ }
.ec-instagramRole .ec-instagramRole__list li .popup .insta_caption {
          font-size: 1em; }
.ec-instagramRole .ec-instagramRole__list li .popup .likeCount {
          font-size: .86em;
          text-align: right; }
.ec-instagramRole .ec-instagramRole__list li .popup .likeCount i {
            font-size: 1.2em;
            margin-right: 0.2em;
            color: #ed4956; }
.ec-instagramRole .ec-instagramRole__list li .popup .insta_caption + .likeCount {
          margin-top: .5em; }
.ec-instagramRole .ec-instagramRole__list li .popup:after {
          content: "";
          display: block;
          width: 0;
          height: 0;
          border: solid 7px transparent;
          border-top-color: #000;
          position: absolute;
          top: 100%;
          left: calc(50% - 7px); }
.ec-instagramRole .ec-instagramRole__list li:hover .popup {
        visibility: visible;
        opacity: 1;
        transform: translate3d(-50%, 0, 0); }





/*
新着情報========================================================================

トップページで使用されている新着情報ブロックのスタイルです。
*/

.ec-role{ width: 100%;}
.ec-newsRole {
  /* ニュース一覧枠 */
  /* ニュースアイテム*/
  /* 左枠（日付） */
  /* 右枠（ニュースタイトル、本文）*/
  /* ニュースタイトル */
  /* MOREボタン */
  /* ニュース本文 */ 
}
.ec-newsRole .ec-newsRole__news {
    margin-top: -1rem; 
}
.ec-newsRole .ec-newsRole__newsItem {
    display: flex;
    padding: 1rem 0;
}
.ec-newsRole .ec-newsRole__newsHeading {
    flex: 0 0 auto;
    min-width: 6em;
    margin-right: 1rem; }
.ec-newsRole .ec-newsRole__newsHeading time {
      display: block;
     font-family: "helvetica", "メイリオ"
      font-size: .9rem;
      margin-top: .1rem; }
.ec-newsRole .ec-newsRole__newsColumn {
    flex: 1 1 auto;
    /* OPEN時の見せ方 */
    transition: .2s; }
.ec-newsRole .ec-newsRole__newsColumn.is-active {
      padding: 1em;
      background-color: #f8f8f8; }
.ec-newsRole .ec-newsRole__newsTitle {
    font-size: 1rem;
    font-weight: 500;
    display: inline;
    vertical-align: bottom; }
.ec-newsRole .ec-newsRole__moreBtn {
    display: inline-block;
    font-family: "helvetica", "メイリオ"
    font-size: 0.8rem;
    line-height: 1;
    padding: 0.2rem 0.3rem;
    border: solid 1px #666;
    background-color: #fff;
    margin-left: 1rem;
    cursor: pointer; }
.ec-newsRole .ec-newsRole__newsDescription {
    margin-top: 1em;
    display: none; }

