@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;
-------------*/
/*----------------------------------------------------------------*/
/*ベース*/
/*----------------------------------------------------------------*/
#labo{position: relative;
  background-image: url(../../img/index_base2210/back_1.jpg?);
  background-repeat: repeat-y;background-size: contain;
  font-size: 14px;
  overflow: hidden;
  text-align: center;
  background-color: white;
  color: #41342b;
}
    #labo .smp{display: none;}
    #labo :hover{    transition-duration: 0.4s;/*変化の時間*/}
    #labo .main{
      width: 100%;
      margin: auto;
      max-width: 1060px;}

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


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


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

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

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


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



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

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

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; }
 }
header .back_circle{width: 100%;position: absolute;    top: 0;z-index: 2;}
header .back_circle img{width: 100%;max-width: 1288px;}

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--*/
/*-------------------------------*/
#kanban{z-index: 2;}


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

#search .searchbar{margin-bottom: 3%;position: relative;}
#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_back2.png?);
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat,no-repeat;
    width: 100%;
}
#search #searchbtn {
  position: absolute;
  width: 35px;
  height: 31px;
  top: 2px;
  left: 5px;
  bottom: 0;
  right: 0;
}

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

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

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



/*----------------------------------------------------------------*/
/*--■カテゴリ　cate--*/
/*----------------------------------------------------------------*/
#cate{padding: 50px 0;}
#cate ul{width: 90%;}
#cate ul li{float: left;    width: calc((100% / 7 ));margin-bottom: 2%;}
#cate ul li:nth-of-type(8){clear: both;    margin-left: 8%;}
#cate ul li:hover{color: #e5c840 !important;}

/*----------------------------------------------------------------*/
/*--■おすすめアイテム　osusume--*/
/*----------------------------------------------------------------*/

#osusume{ padding-bottom:  50px;background: linear-gradient(180deg, #ffffff00 0%, white 50%, #ead467 50%, #ead467 100%);;margin-bottom: 50px;}
#osusume .main{position: relative;}
#osusume div.ikimono_1{position: absolute;left: -171px;top: 160px;animation: 3s fuwafuwa1 infinite;}
#osusume div.ikimono_2{position: absolute; bottom: -135px;right: -137px;animation: 4s fuwafuwa3 infinite;}

#osusume ul{display: flex;}
#osusume li{z-index: 1;
    width: calc((100% / 5 ));
    background-color: white;
    border-radius: 10px;
    padding: 0.6%;
    line-height: 0;
    margin-right: 1%;
}
#osusume li:hover{transform: translateY(-0.8em);}
#osusume li img{width: 100%;}
#osusume li:last-of-type{margin-right: 0;}

#osusume .botan{    margin: auto;  width: fit-content;}

#osusume div.prices{    padding: 1em;display: block;}

@keyframes fuwafuwa1 {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
  }
  @keyframes fuwafuwa3 {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
  }

/*----------------------------*/
/*--動く背景--*/
/*----------------------------*//*
#osusume .animeback
{z-index: -1;
    margin-top: -175px;}

#osusume .section_scroll{
    width: 100%;
    height: 100%;
 }
  
#osusume .section{
    background-color: white;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
 }
  
#osusume .section_bar{
    background-color: #ead467;
    height: 230px;
 }
*/


/*----------------------------------------------------------------*/
/*--■ランキング　ranking--*/
/*----------------------------------------------------------------*/
#ranking{font-size: 1.2em;font-weight: 700;
    padding-bottom: 50px;  
    /*background: linear-gradient(180deg, white 0%, white 50%, #f9f7eb 50%, #f9f7eb 100%);*/}
#ranking .tab-container2 ul{display: flex;margin-top: 73px !important;}
#ranking li{    width: calc((100% / 3 ));margin-right: 2%;position: relative;}
#ranking li:hover{transform: translateY(-0.8em);}
#ranking li:hover dl{ background-color: #ead467;}
#ranking li img{width: 100%;}
#ranking li:last-of-type{margin-right: 0;}
#ranking li dl{
    padding: 9% 6%;
    border-radius: 10px;}
#ranking li dl{
    border: 2px solid #ead467;
    background-color: white;}

    /*順位*/
    #ranking li > div{
        border-radius: 90px;
        background-color: #e5c840;
        height: 70px;
        width: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;margin-bottom: -10px;
        position: absolute;
        top: -55px;
        left: 50%;
        margin-left: -35px;
    }
    #ranking li > div p{font-size: 2.4em;}


/*----------------------------*/
/*--動く背景--*/
/*----------------------------*//*
#ranking .animeback
{z-index: -1;
    margin-top: -350px;}

#ranking .section_scroll{
    width: 100%;
    height: 100%;
 }
  
 #ranking .section{
    background-color: white;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
 }
  
 #ranking .section_bar2{
    background-color: #f4f1ea;
    height: 400px;
 }

*/


/*----------------------------------------------------------------*/
/*--■特集　event--*/
/*----------------------------------------------------------------*/
#event{    padding-bottom: 100px;}
#event .swiper1{    overflow: hidden;position: relative;}
#event .swiper-slide{margin-right: 1%;}
#event .swiper-slide img{width: 100%;}
#event .swiper-button-next, .swiper-button-prev{color: white !important;}

/*----------------------------------------------------------------*/
/*--■検索　search2--*/
/*----------------------------------------------------------------*/
#search2{background-color: #f4f1ea;padding:  60px 0;  background-image: url(../../img/index_base2210/back_2.jpg);
  background-repeat: repeat-y;background-size: cover;}
#search2 .searchbar{margin-bottom: 5%;position: relative;}
#search2 .searchbar .kumo{position: absolute;    top: -11px;left:10%;animation: 5s fuwafuwa2 infinite;}

@keyframes fuwafuwa2 {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }


#search2 .main{max-width: 700px;}
#search2 .main ul{       display: inline-block;}
#search2 .main li{
    background-color: white;
    width: fit-content;
    padding: 1em 2em;
    float: left;
    margin-bottom: 1em;
    margin-left: 2em;
    border-radius: 10px;}
#search2 .main li:hover{background-color: #abdfc9;color: white;}
#search2 #search_t{
    box-sizing: border-box;
    border: none;
    background-color: #e1dcd6;
    border-radius: 90px;
    font-size: 1em;
    padding: 2% 0 2% 10%;
    width: 70%;}

#search2 #button{position: absolute;    bottom: -1px; right: 12%;}

/*----------------------------------------------------------------*/
/*--■検索　search2--*/
/*----------------------------------------------------------------*/


footer .biglogo{width: 100%;margin-top: 90px;margin-bottom: 120px;}
footer .biglogo ul{display: flex;width: 100%;max-width: 1060px;    margin: auto;}
footer .biglogo img{width: 100%;}

footer .main{text-align: left;}
footer .main p{margin-bottom: 3em;}

footer .main > div{    width: 49%;
    float: left;
}

footer .main > div:first-of-type{margin-right: 2%;}

footer a{text-decoration: underline;}
footer a:hover{color: #abdfc9 !important;}

/*カレンダー*/

footer div.calendar{background-color: white !important;}
footer .calendar,footer #closed{width: 80%;}


/*----------------------------------------------------------------*/
/*--■フッターナビ　footernavi--*/
/*----------------------------------------------------------------*/

/*フッターナビ*/
#footernavi{background-color: #bfbab3;    padding: 10px 0;clear: both;}
#footernavi ul{display: flex;width: fit-content;  margin: auto;}
#footernavi li{margin-right: 10px;padding-right: 10px;border-right: 1px dashed ;}
#footernavi a:hover{color: white;}






/*----------------------------------------------------------------*/
/*TOPに戻る*/
/*----------------------------------------------------------------*/
#topbutton{position:fixed;bottom: 0;right: 0;opacity: 0;z-index: 10;}
#topbutton img:hover{opacity: 0.8 !important;}
/*----------------------------------------------------------------*/
/*■バナー　banner*/
/*----------------------------------------------------------------*/
.banner{padding-bottom:  50px;}


/*----------------------------------------------------------------*/
/*■タブ*/
/*----------------------------------------------------------------*/

/*タブ*/
/* 全体を覆うdiv */
.tab-container,.tab-container2 {
    width: 100%;flex-wrap: wrap;
    justify-content: center;
    display: flex;
}
  /*タブ(label)のスタイル*/
  .tab-item,.tab-item2 {

    margin: 0 10px;
    padding: 13px 3em;
    border: 2px #e5c840 solid;
    background-color: white;
    text-align: center;
    float: left;
    flex-wrap: nowrap;
    border-radius: 90px;
    transition: all 0.2s;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tab-item span,.tab-item2 span{margin-left: 1em;
    font-size: 1.3em;}

  
  /* inputボタンは目には見えないところで働いてもらう */
  input[name="tab-item"],  input[name="tab-item2"] {
    display: none;
  }


  
  /* タブで切り替えたいコンテンツの部分。ここはお好みで */
  .tab-content {
    display: none;
    padding: 40px 0;
    overflow: hidden;
    clear: both;
    text-align: center;
    
  }
  
  /* 選択されているタブのコンテンツを表示させる */
  #a:checked ~ #a-content,
  #b:checked ~ #b-content,
  #c:checked ~ #c-content,
  #d:checked ~ #d-content {
    display: block;
  }
  
  /* 選択されていることがわかるように、選択されているタブはスタイルを変える */
  .tab-container input:checked + .tab-item,  .tab-container2 input:checked + .tab-item2
    {background-color: #e5c840;color: #fff;}


  /*----------------------------------------------------------------------------------*/
/*　　　　　　　　　　#動きの指示*/
/*----------------------------------------------------------------------------------*/
/*-------------------表示------------------------------*/
.scr-tar1 {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  .scr-tar1.is-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: 1s;
  }