@charset "euc-jp";

/*---------メモ
  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute; width: 100%; height: 100%; top:0; left: 0;text-indent: 100%; white-space: nowrap;overflow: hidden;
-------------*/
/*----------------------------------------------------------------*/
/*ベース*/
/*----------------------------------------------------------------*/
#labo2{position: relative;

  font-size: 14px;
  overflow: hidden;
  text-align: center;
  background-color: white;
  color: #41342b;
}
    #labo2 .smp{display: none;}
    #labo2 :hover{    transition-duration: 0.4s;/*変化の時間*/}
    #labo2 .main{
      width: 100%;
      margin: auto;
      max-width: 1060px;}

    #labo2 section a:hover img{opacity: 0.8; }
    #labo2 section{ clear: both;display: inline-block;width: 100%;}
    #labo2 section ul{margin: auto;}


    /*送料バー*/
    #labo2 p.soryo{background-color: #e1dcd6;color: white;position: relative;z-index: 10;color: #41342b;}
    #labo2 p.soryo:hover{background-color: #cbc5bf}


/*----------------------------------------------------------------*/
/*フォント情報*/
/*----------------------------------------------------------------*/

#labo2 h2{font-size: 20px;font-weight: 700;}
#labo2 h2 + p{font-size: 16px;color: #b8c0c2;margin-bottom: 26px;}
#labo2 h3{font-size: 1.2em;    background-color: #929580; color: white;text-align: left;padding: 0.5em;}
#labo2 h4{color: #929582;font-weight: 500;font-size: 1.2em;border-bottom: 1px #929582 solid;}
#labo2 a:link { color: #41342b; }
#labo2 a:visited { color: #41342b; }
#labo2 a:hover { color: #41342b; }
#labo2 :active { color: #41342b; }
div.prices{
  font-weight: 700;
  font-size: 1.2em;
}
/*----------------------------------------------------------------*/
/*リンク*/
/*----------------------------------------------------------------*/
#labo2 #cate li,
#labo2 #topitem .main>ul>li,
#labo2 #search2 li,
#labo2 #event .swiper-slide dl,
#labo2 #ranking li
{position:relative;}

#labo2 #cate li a,
#labo2 #topitem .main>ul>li>a,
#labo2 #search2 li a,
#labo2 #event .swiper-slide dl a,
#labo2 #ranking li a
{position: absolute; width: 100%; height: 100%; top:0; left: 0;text-indent: 100%; white-space: nowrap;overflow: hidden;}


/*--------*/
#labo2 #topitem li:hover dt img,
#labo2 #cate li:hover img,
#labo2 #ranking li:hover img,
#labo2 #event div.swiper-slide:hover img,
{opacity: 0.8;}



/*----------------------------------------------------------------*/
/*■ヘッダー header*/
/*----------------------------------------------------------------*/
#labo2 header{
  overflow: hidden;
    position: relative;
    background-color: #b8c0c2;
}
#labo2 header .main > div:nth-of-type(1){width:27%;}
#labo2 header .main > div:nth-of-type(2){width: 46%; margin-right: 4%;}
#labo2 header .main > div:nth-of-type(3){width:19%;margin-right: 4%;}
#labo2 header .main{    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-top: 20px !important;
    margin-bottom: 70px !important;
}
#labo2 header a:hover{color: #abdfc9 !important;}

/*-------------------------------*/
/*--背景----*/
/*-------------------------------*/
#labo2 header .back_anime{width: 100%;position: absolute;   bottom: 0;z-index: 1;margin-bottom: -4px;}
#labo2 header .back_anime img{width: 100%;position: absolute;   bottom: 0;left: 0;}

#labo2 header .back_anime img.animeback{
  opacity    : 0;
  animation  : bgAnime 10s infinite;}
  @keyframes bgAnime {
    0% { opacity: 1; }
    8% { opacity: 1; }
    35% { opacity: 1; }
    50% { opacity: 0; }
    90% { opacity: 0; }
  100% { opacity: 1; }
 }
 #labo2 header .back_circle{width: 100%;position: absolute;    top: 0;z-index: 2;}
 #labo2 header .back_circle img{width: 100%;max-width: 1288px;}

 #labo2 header .back_nami{width: 100%;position: absolute;    bottom: 0;z-index: 10;
  background-image: url(../../img/index_base2210/top_back2.png?);
  background-repeat: repeat-x;
  height: 58px;
  background-position: bottom;
}

/*-------------------------------*/
/*--看板　kanban--*/
/*-------------------------------*/
#labo2 #kanban{z-index: 2;}


/*-------------------------------*/
/*--検索　search--*/
/*-------------------------------*/
#labo2 #search{z-index: 2;    font-weight: 600;}
#labo2 #search ul{display: flex;}
#labo2 #search li{ margin-right: 1em;   }
#labo2 #search li p{
    padding: 0.1em 1.3em;
    background-color: #abdfc9;
    color: white;
    border-radius: 90px;}

    #labo2 #search .searchbar{    margin-bottom: 3%;}
    #labo2 #search #search_t{box-sizing: border-box;
    border: none;
    background-color: #e1dcd6;
    border-radius: 90px;
    font-size: 1em;
    padding: 2% 0 2% 10%;
    background-image: url(../../img/index_base2210/search_back1.png?),url(../../img/index_base2210/search_back2.png?);
    background-position: left 10px top 0,center bottom;
    background-size: contain;
    background-repeat: no-repeat,no-repeat;
    width: 100%;}

/*-------------------------------*/
/*--メニュー　menu--*/
/*-------------------------------*/
#labo2 #menu{z-index: 2;    font-weight: 600;}
#labo2 #menu ul li:nth-of-type(1){float: left;width: 60%;}
#labo2 #menu ul li:nth-of-type(2){float: right;}
#labo2 #menu ul li:last-of-type{
    width: 100%;
    clear: both;
    background-color: #abdfc9;
    color: white;
    border-radius: 90px;}
#labo2 #menu i{    margin-right: 0.5em;color: #abdfc9;}
#labo2 #menu p{    margin-bottom: 0.5em;}

/*-------------------------------*/
/*--トップ商品　topitem--*/
/*-------------------------------*/
#labo2 #topitem{z-index: 2;    position: relative;}
#labo2 #topitem .main{    max-width: 1020px !important;}
#labo2 #topitem ul{display: flex;width: 100% !important;}
#labo2 #topitem li{
    width: calc((100% - 3% )/ 4);
    background-color: #ffffffcc;
    margin-right: 1.6%;
    border-radius: 10px;
    padding: 1.2%;}
#labo2 #topitem li:last-of-type{margin-right: 0;}
#labo2 #topitem li:hover{transform: translateY(-0.8em);}

#labo2 #topitem dl{    position: relative;}
#labo2 #topitem dd{float: left;width: 50%;text-align: left;display: flex; align-items: center;}
#labo2 #topitem dd:nth-of-type(2){font-weight: 600;font-size: 1.4em;}
#labo2 #topitem dd:last-of-type{text-align: right;}
#labo2 #topitem dd:nth-of-type(1) span{
    background-color: #e5c840;
    padding: 0.2em 0.4em;
    color: white;}
#labo2 #topitem dd:last-of-type{position: absolute;    top: -68px;    left: -35px;}
#labo2 #topitem dt img{width: 100%;margin-bottom: 1em;}



/*----------------------------------------------------------------*/
/*--■カテゴリ　cate--*/
/*----------------------------------------------------------------*/
#labo2 #cate{padding: 50px 0;}
#labo2 #cate ul{width: 90%;}
#labo2 #cate ul li{
  width: 100%;
  margin-bottom: 2%;
  display: flex;
  align-items: center;
  border-bottom: 1px dashed;
  padding: 1% 0;}
#labo2 #cate ul li:hover{color: #e5c840 !important;}
#labo2 #cate img{    width: 18%;}

/*----------------------------------------------------------------*/
/*--■サイド　side-*/
/*----------------------------------------------------------------*/
#labo2 #side{width: 280px;
  background-size: contain;
    background-image: url(../../img/index_base2210/back_side.jpg?);
  background-repeat: repeat-y;}
  #labo2 #sidelogo{    margin-top: 50px;}
  #labo2 #sidelogo img{width: 40%;}