html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,a,em,img,strong,sub,sup,ol,ul,li,fieldset,form,label,legend,table,caption,
tbody,tfoot,thead,tr,th,
td { margin: 0; padding: 0; border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
/* 追加のリセットスタイル */
body {line-height: 1;}

ol,ul {list-style: none;}

blockquote,q {quotes: none;}

blockquote:before,blockquote:after,q:before,q:after {content: "";content: none;}

table {border-collapse: collapse;border-spacing: 0;}

a     {    text-decoration: none;
  text-decoration-line: none;
  color: inherit;}

/* ここから記載していく----------------------------------------------------------- */

body {
  font-family: "游ゴシック", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

.text  {    font-size: 16px;
  letter-spacing: 0.2rem;
  line-height: 2.5rem;}  

.wave {
    width: 100%;
    height: 7px;
    background-image:url(img/namisen.svg);
    background-repeat: repeat-x;
    background-size: contain;margin-bottom: 20px;
  }

.din  {    font-family: 'Barlow', sans-serif;
    font-size: 28px;letter-spacing: 0.1em;
    font-weight: 600;
    margin-bottom: -10px;
    display: block;}

.center {text-align: center;}

#ttl { margin: 0 auto;}
#ttl .yama { width: 50px;}
#ttl .kaban { width: 45px;}


#ttl ul {display:  flex;    justify-content: space-between; align-items: center;max-width: 480px;margin: 15px auto;}

 .mban  { border: solid 1px #000!important; padding: 10px!important;	   
  height: auto!important;    display: flex!important;      aspect-ratio: 16 / 10.13!important;
  max-height: 550px!important;max-width: 800px!important;
  flex-direction: column!important; overflow: hidden!important;



}



.mban p  { font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 0px;}

.mban p:before{content:  '';                           /* 空白の要素を作る */
  height: 40px;                           /* 高さ指定 */
  width: 40px;                            /* 幅指定 */
  display:  inline-block;                 /* インラインブロックにする */
  background-image:url(img/roadbtn.svg);  /* 背景画像指定 */
  background-size:  contain;              /* 背景画像サイズ指定 */
  background-repeat:  no-repeat;          /* 背景画像リピート指定 */
  background-position:  center;           /* 背景画像位置指定 */
  vertical-align:  middle;                /* 上下中央揃え */
  margin-right:  5px;
margin-bottom: 5px;}


.mban{.url('#movie');}

.slider {
  width: 100%;;
}

.slider .mar {
 margin: 0 3px;  position: relative;    display: flex!important;
 height: 550px; width: 800px;
}

.slider .mar2 {
  margin: 0 3px;  position: relative;    display: flex!important;
  height: 550px;
 }


.mar iframe {
  width: 100%;
  height: 100%;
}

.slider .slick-dots {
  position: absolute;
  bottom: -38px!important;}

.slick-arrow   { z-index: 100; width: 100px;}

.slick-slide a {display: block;}

.prev_icon {
  position: absolute;
  top: 105%;
  left: 45%;
  transform: translate(0,-50%);
  width: 15px;
  z-index: 1;
}


.next_icon{
  position: absolute;
  top: 105%;
  right: 45%;
  transform: translate(0,-50%);
  width: 15px;
  z-index: 1;
}

.prev_icon img{ width: 30px!important;}
.next_icon img{ width: 30px!important;}

.prev_icon,
.next_icon {
  cursor: pointer;
}

.slick-dotted.slick-slider {
  margin-bottom: 70px!important;
}


/* ここからカテゴリ--------------------------------------------------- */

#cotegory {background: #f4f4f4;font-family: 'Barlow', sans-serif;    position: relative;    margin-bottom: 80px;}

#cotettl {     width: 150px;    letter-spacing: 0.06rem;
  height: 150px;
  border-radius: 50%;
  border: 2px solid;
  background-color: #fdf29a;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.9rem;
  font-weight: 600;    position: absolute;
  top: -30px;
  left: calc(44vw - 402px);}

  #cotegory ul  { display: flex;width: 600px;    margin: 0 auto;    flex-wrap: wrap;    padding: 30px 0;}

  

  .c_item { width: 200px;display: flex; justify-content: center;    flex-direction: column;    margin: 8px 0;
    align-items: center;}

  .c_item span {     background-color: #fdf29a;
    width: 130px;
    display: flex;
    height: 130px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin: 10px auto;}

  .c_item img   {width: 90px;}

  .tab img,.cago img,.oh img { width: 110px;}

  .c_item a   {border:2px solid;    background: #fff;width: 180px;
    height: 180px;
    text-align: center;}

    
/* ここからおすすめ--------------------------------------------------- */

#recttl {font-family: 'Barlow', sans-serif; position: absolute; font-size: 60px;top: 0;left: 31%;font-weight: 600;    letter-spacing: 0.05rem;
transform: translate(-22%,-50%); 
}



#recttl:before{content:  '';                           /* 空白の要素を作る */
  height: 60px;                           /* 高さ指定 */
  width: 80px;     margin: 0 10px 4px 0;                       /* 幅指定 */
  display:  inline-block;                 /* インラインブロックにする */
  background-image:url(img/sandwitch.svg);  /* 背景画像指定 */
  background-size:  contain;              /* 背景画像サイズ指定 */
  background-repeat:  no-repeat;          /* 背景画像リピート指定 */
  background-position:  center;           /* 背景画像位置指定 */
  vertical-align:  middle;                /* 上下中央揃え */}


  #recttl:after{content:  '';                           /* 空白の要素を作る */
    height: 80px;                           /* 高さ指定 */
    width: 88px;      margin: 0 0 15px 10px;                      /* 幅指定 */
    display:  inline-block;                 /* インラインブロックにする */
    background-image:url(img/cagobag.svg);  /* 背景画像指定 */
    background-size:  contain;              /* 背景画像サイズ指定 */
    background-repeat:  no-repeat;          /* 背景画像リピート指定 */
    background-position:  center;           /* 背景画像位置指定 */
    vertical-align:  middle;                /* 上下中央揃え */}
  



#recomen  { background: #c9f961;    max-width: 1000px;    border-radius: 40px;position: relative;
  margin: 0 auto; margin-bottom: 80px;}

#recomen ul{ display: flex;    padding: 50px;  }

#recomen span {
  font-size: 2rem;
  margin-bottom: 15px;
  display: block;
  letter-spacing: 0.19rem;
  font-weight: 600;
}

#recomen span:before {
  content: '';
  height: 23px;
  width: 43px;
  margin: 0 10px 4px 0;
  display: inline-block;
  background-image: url(img/naminami.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}
    #recomen .ttl {
      font-size: 40px;
      font-weight: bold;
      background: #fff;
      padding: 8px;
      display: inline-block;
      width: auto;
      padding: 20px;
      margin-bottom: 25px;
      letter-spacing: 0.3rem;
  }
  
  
  #recomen .right { margin-left: 15px;}
  #recomen .right img { width: 370px;}

  .bold  { font-weight: 700;}


  /* ボタン共通設定 */
.btn06{
  /*矢印の基点とするためrelativeを指定*/
position: relative;
  /*ボタンの形状*/
text-decoration: none;
display: inline-block;
background:#000;
color:#fff!important;
  padding: 10px 40px 10px 30px;

  text-align: center;
  outline: none;
  /*アニメーションの指定*/
  transition: ease .2s;    width: 270px;
  margin-right: 15px;
}

.btn06:hover{
background:#555;
}


/* 矢印が右に移動 */

.btnarrow1::after{
  content: '';
  /*絶対配置で矢印の位置を決める*/
position: absolute;
  top:42%;
  right: 13px;
  /*矢印の形状*/
  width: 5px;
  height: 5px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  /*アニメーションの指定*/
  transition: all .3s;
}

/*hoverした際の移動*/
.btnarrow1:hover::after{
  right: 11px;
}

.ma15  { margin: 0 0 15px;}

#recomen .btnflex  {padding: 0;}


/* ここからmovie-------------------------------------------- */

#movie  { background: url(img/movie_bk.jpg); width: 100%;    margin: 0 auto;    text-align: center;    background-repeat: no-repeat;   
  background-size: cover;}

#movie li  { width: 224px;}
#movie ul img {  width:100%;}

a       {transition: ease .2s;}
a:hover { opacity: 0.8;}


#movie .container   { max-width: 1200px;    margin: 0 auto;    padding: 40px 20px;}

#movttl img {width: 100%;    max-width: 630px;    margin-bottom: 30px;}

#osusumettl  { font-size:2rem;text-align: left; color: #fff;margin-top: 30px;    margin-bottom: 10px;}

#osusumettl:before{content:  '';                           /* 空白の要素を作る */
  height: 40px;                           /* 高さ指定 */
  width: 40px;                            /* 幅指定 */
  display:  inline-block;                 /* インラインブロックにする */
  background-image:url(img/roadbtn.svg);  /* 背景画像指定 */
  background-size:  contain;              /* 背景画像サイズ指定 */
  background-repeat:  no-repeat;          /* 背景画像リピート指定 */
  background-position:  center;           /* 背景画像位置指定 */
  vertical-align:  middle;                /* 上下中央揃え */
  margin-right:  10px;
margin-bottom: 3px;}

#movie iframe  {    aspect-ratio: 16 / 9;max-width: 900px;
  height: auto; 
}

#movie ul li { background: #fff;    padding: 10px;
margin-bottom: 15px;  position: relative;
}

#movie ul li p,#movie ul li div,#movie ul li span{text-align: left;}
#movie ul li div    { margin: 5px 0;}
#movie ul li p,#movie ul li div  { font-weight: 500;}
#movie ul li span{ color: #000;}

#movie ul  { display: flex; flex-wrap: wrap; gap:10px;}


/* ここからカテゴリ分け分け------------------------------------------------------- */



#cotegory2          { margin: 0 auto;font-family: 'Barlow', sans-serif;}

#cotegory2 #catcat  {  text-align: center; font-size: 35px;    margin-bottom: -8px;} 

#cotettl2   { text-align: center;font-family: 'Barlow', sans-serif;font-size: 3rem; font-weight: 600;    margin-bottom: 30px;}
#cotettl2 span { font-size: 1.5rem; display: block ; margin-top: 15px;}

#cotegory2 .container   {   margin: 80px auto 80px auto; width: 1400px;}

#cotettl2 p:before{content:  '';                           /* 空白の要素を作る */
  height: 40px;                           /* 高さ指定 */
  width: 40px;                            /* 幅指定 */
  display:  inline-block;                 /* インラインブロックにする */
  background-image:url(img/leaf.svg);  /* 背景画像指定 */
  background-size:  contain;              /* 背景画像サイズ指定 */
  background-repeat:  no-repeat;          /* 背景画像リピート指定 */
  background-position:  center;           /* 背景画像位置指定 */
  vertical-align:  middle;                /* 上下中央揃え */
  margin-right:  18px;
margin-bottom: 3px;}

#cotettl2 p:after{content:  '';                           /* 空白の要素を作る */
  height: 42px;                           /* 高さ指定 */
  width: 48px;                            /* 幅指定 */
  display:  inline-block;                 /* インラインブロックにする */
  background-image:url(img/bird.svg);  /* 背景画像指定 */
  background-size:  contain;              /* 背景画像サイズ指定 */
  background-repeat:  no-repeat;          /* 背景画像リピート指定 */
  background-position:  center;           /* 背景画像位置指定 */
  vertical-align:  middle;                /* 上下中央揃え */
  margin-left:  18px;
margin-bottom: 3px;}

.ma30  { margin-left: 30px;}
.kazari    {font-family: 'Sacramento', cursive; font-size: 70px;position: absolute;    top: 100px;
  left:590px; }
.cflex {position: relative; display: flex;align-items: center;}
.cflex p  { font-weight: 600; font-size: 1.5rem; letter-spacing: 0.09em; margin-bottom: 20px;    font-size: 2rem;}
.itemflex a  { background: #f5f5f5;    padding: 0px;
  background-size: cover; display: block;    margin-bottom: 0; transition: ease .2s;}

  #cotegory2 .text {
    font-size: 16px;
    letter-spacing: 0.09rem;
    line-height: 3rem;
}

  .itemflex a:hover { opacity: 0.7;}


.itemflex li {
  position: relative;
}

.itemflex .lineup-shipping{
  position: absolute;
  right: 0;
  font-size: 14px;
  bottom: -8px;
}

#cotegory2 .miniprice {
margin-top: 8px;
}

.itemflex img   { width: 100%;}
.itemflex li   {    width: 280px; margin-right: 20px;margin-bottom: 20px;}

.itemflex  { display: flex;    flex-wrap: wrap;}

.itemflex div  { font-size: 18px; letter-spacing: 0.09em;    margin-bottom: 5px;}
.itemflex p  { font-size: 18px;}

.itemflex span  { color: #000;}

.haifun {font-size: 1.1rem; font-weight: 300;display: block; }

.balloon1 p {text-align: center;}

#cotegory2  .ttl p{
  font-size: 35px;
}

#cotegory2 .ttl .haifun {
  font-size: 1.5rem;
}


.ttl li:nth-child(2) {
margin-top: 10px;
}

#cotegory2 .cflex li:nth-child(1) {
  width: 60%;}

  #cotegory2 .cflex li:nth-child(2) {
    width: 40%;}

    .miniprice {
      font-size: 18px!important;    font-weight: 600;
  }


#parasol .ttl,#outdoorchair .ttl,#outdoortable .ttl,#trunkcargo .ttl,#others .ttl   {font-size: 2.6rem; font-weight: 600; border-bottom: 1px solid;
  margin-bottom: 20px;align-items: center;padding-bottom: 10px;display: flex;  }

#parasol .c_item img,#outdoorchair .c_item img,#outdoortable .c_item img,#trunkcargo .c_item img,#others .c_item img { width: 60px;}

#parasol .c_item,#outdoorchair .c_item,#outdoortable .c_item,#trunkcargo .c_item,#others .c_item {width: 90px;height: 90px;background-color: #fdf29a; border-radius: 50%;display: flex; justify-content: center;flex-direction: column;margin: 8px 18px 0 0;align-items: center;}

#parasol span,#outdoorchair span,#outdoortable span,#trunkcargo span,#others span   { margin-top:10px ;}

#parasol .kazari:before {content: "";display: inline-block;width: 130px;height: 2px; background-color: black; margin: 0 10px 7px;}

#outdoorchair .kazari:before {content: "";display: inline-block;width: 130px;height: 2px; background-color: black; margin: 0 10px 7px;}

#outdoortable .kazari:before {content: "";display: inline-block;width: 130px;height: 2px; background-color: black; margin: 0 10px 7px;}

#trunkcargo .kazari:before {content: "";display: inline-block;width: 130px;height: 2px; background-color: black; margin: 0 10px 7px;}

#others .kazari:before {content: "";display: inline-block;width: 130px;height: 2px; background-color: black; margin: 0 10px 7px;}

#parasol .cflex,#outdoorchair .cflex,#outdoortable .cflex,#trunkcargo .cflex,#others .cflex {position: relative; display: flex;align-items: center;margin-bottom: 20px;font-family: "游ゴシック", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}

#parasol .ma30,#outdoorchair .ma30,#outdoortable .ma30,#trunkcargo .ma30,#others .ma30  {    margin-top: 90px;
}

#parasol,#outdoorchair,#outdoortable,#trunkcargo,#others  {margin-bottom: 50px;}


/* ここからピンポン----------------------------------------------- */
  
.balloon1 {    position: relative;
  display: inline-block;
  margin: 0 auto;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #fff;
  font-size: 16px;
  background: #000000;
  text-align: center;
  display: block;
  width: 230px;
  padding: 15px;}

.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #000000;
}

.balloon1 p { font-size: 20px; font-weight: 600;
  margin: 0;
  padding: 0;
}

#pinpon .container  {max-width: 1200px;margin: 0 auto;    padding: 0 15px;}

#pinpon .grayback    { background:#f1f1f1;        margin: 30px;
  padding: 50px 0;}

.quesp { display: none;}

.pinponttl           {       font-size: 2rem;
  font-weight: 800;
  text-align: center;background: rgb(255 255 255 / 60%);
  border: 3px solid;
  padding: 20px;
  width: 300px;
  margin: 15px auto 50px;    z-index: 5;
  position: relative;}


.pinflex_1 {display: flex;align-items: center;    width: 100%;}

.pinflex_1 .ma30 { margin-right: 60px;}

.que {font-size: 23px; font-weight: 600; border-bottom: 2px solid;    padding-bottom: 10px;        letter-spacing: 0.2rem;
  margin-bottom: 25px;}

.pinflex_1 li  { width: 49%;}
.pinflex_1 img {width: 100%;}

.pinflex_1 #big   {font-size: 37px; font-weight: 600;letter-spacing: 0.2rem;line-height: 6rem;   margin-bottom: 18px;    margin-bottom: 38px;
}

#seikai   {color: #fff;
  font-size: 45px;
  background-color: #000;
  padding: 15px;
  font-weight: 600;
  margin-top: 10px;
  display: inline;
  letter-spacing: 0.2rem;
}

.pinflex_2  { display: flex; align-items: baseline;     width: 850px;
  justify-content: space-between;    margin: 0 auto 50px;
}

.pinflex_2 li  { margin: 0 20px;}

.pinflex_2 img { width: 100%;}

.pinflex_1   {margin-bottom: 80px;}

.ma40   { margin-bottom: 40px;}

#greenbk {     color: #000;
  font-size: 30px;
  background-color: #c9f961;
  padding: 20px;
  font-weight: 600;
  letter-spacing: 0.5rem;
  margin-bottom: 30px;
  position: relative;
  display: inline-block;
  width: auto;}

  #greenbk img{position: absolute;    right: -110%;
    top: -10%;
    width: 45%;}

.whitebk  {color: #000;
  font-size: 20px;
  background-color: #fff;
  padding: 5px;
  font-weight: 600;
  letter-spacing: 0.3rem;
  display: inline-block;position: relative;}

  #pinpon .text  { margin-bottom: 50px;}

  .pinflex_3 { display: flex;}

  .pinflex_3 img { width: 100%;}

  .pinflex_3 .ma20   { margin-right: 20px;}

#pinpon .btn06{
font-size: 20px;
margin-right: 0;
padding: 20px 40px;
width: 300px;
}


#pinpon .b_btn  {
  text-align: center;
}

#pinpon .btnarrow1::after{
  right: 50px;
}

/*hoverした際の移動*/
#pinpon .btnarrow1:hover::after{
  right: 45px;
}

#pinpon  { max-width: 100%;position: relative;overflow: hidden;    z-index: 1;}

#pipipi  { max-width: 100%;   z-index: 100;}


.pinponbk  {background-image: url(img/pinpon.png);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  max-width: 2010px;
  width: 100vw;
  position: absolute;
  background-position: left -46px center,right 20px center;
  background-repeat: repeat-x,no-repeat;
  background-size: 440px;
  height: 10vh;
  top: 178px;
  z-index: 1;
  overflow: hidden;

}


/* ここから自社EC用 */
/* 送料無料表示 */
.lineup-shipping {
  display: inline-block;
  padding: 6px 6px;
  background-color: #000;
  color: #fff;
  font-size: 1.2rem;
  border-radius: 3px;
  position: absolute;
  right: 9px;
  bottom: 4px;
}

.miniprice{
  padding-top: 0px;
  margin-bottom: 0;
}




@media screen and (max-width:1420px) {

  .itemflex .lineup-shipping {
    font-size: 12px;
    bottom: -4px;
  }

  .miniprice {
    font-size: 14px!important;    font-weight: 600;
}
  #cotegory2 .container {
    width: 980px;}

  .cflex img {min-width: 360px;
    max-width: 550px;}

 .kazari {
      font-family: 'Sacramento', cursive;
      font-size: 60px;
      position: absolute;
      top: 53px;
      left: 480px;
  }


    .itemflex div {
      font-size: 16px;}
       

        .pinflex_1 {
          display: flex;
          align-items: center;
          width: 100%;
  justify-content: center;  
}

#greenbk img {
  position: absolute;
  right: -60%;
  top: -10%;
  width: 35%;
}

.prev_icon {
  left: 43%;}

  .next_icon {
    right: 43%;
  }

}


@media screen and (max-width:1210px) {


  #recomen ul .left {order: 2; }
  #recomen ul .right {margin-bottom: 30px;}
  
  #recomen ul  {flex-wrap: wrap; justify-content: center; margin: 0;}
#recomen  { margin: 0 auto 50px;}

#recttl {
  font-size: 50px;
  transform: translate(-19%,-50%);

}

}


@media screen and (max-width:1030px) {

  #recomen  { margin: 0 20px 50px;}

}

@media screen and (max-width:1080px) {
  .slider .slick-dots {
    bottom: -35px !important;
  }

  .que {
    font-size: 19px;}

  .pinflex_1 #big {
    font-size: 27px;
    line-height: 3rem; 
  }
  
  #seikai {
    font-size: 33px;
  }

  #cotegory ul {
    max-width: 640px;
    width: 100%;
    padding: 210px 20px 30px 20px;
  }

  #cotettl { top: 17%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);}


}


@media screen and (max-width:999px) {


  #cotegory2 .cflex li:nth-child(1) {
    width: 100%;}
  
    #cotegory2 .cflex li:nth-child(2) {
      width: 100%;}
  
  .slider .slick-dots {
    bottom: -32px !important;
}

  .prev_icon {
    left: 40%; top: 110%;}
  
    .next_icon {
      right: 40%; top: 110%;
    }
  

  .slider .mar {
    width: 400px;
    height: 268px;
}

.slider .mar img{
  width: 400px;
  height: 268px;
}

.slider .mar a{
  width: 400px;
  height: 268px;
}

.cflex .ma{order: 1;}
.cflex   { flex-wrap: wrap;}
.kazari {
  font-family: 'Sacramento', cursive;
  font-size: 22px;
  position: absolute;
  top: 380px;
  left: 0px;
}

.kazari:before {
  width: 20px;
}

#parasol .kazari:before {    content: "";
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: black;
  margin: 0 6px 7px 0;
}

#outdoorchair .kazari:before {    content: "";
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: black;
  margin: 0 6px 7px 0;
}

#outdoortable .kazari:before {    content: "";
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: black;
  margin: 0 6px 7px 0;
}

#trunkcargo .kazari:before {    content: "";
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: black;
  margin: 0 6px 7px 0;
}

#others .kazari:before {    content: "";
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: black;
  margin: 0 6px 7px 0;
}

.ma30 {
  margin-left: 0;
}

.cflex p {
  margin-bottom: 10px;}

  .itemflex {
    display: flex;
    flex-wrap: wrap;
}

#cotegory2 .container {
  max-width: 980px;      width: 100%;

}

#cotettl2,#parasol,#outdoorchair,#outdoortable,#trunkcargo,#others   {width:100%;   max-width: 980px;   }

#cotegory2 { padding: 0 10px;}

#pinpon .ma30 {
  margin: 0 auto 20px;
}

.pinflex_2 {
  max-width: 850px; width: 100%;}


  .qma  { margin-left: 30px;}

  .que {
    font-size: 16px;
}
.pinflex_1 #big {
  font-size: 20px;
  line-height: 3rem;
}

#seikai {
  font-size: 20px;
}

#greenbk span { display: none;}


}


@media screen and (max-width:920px) {
  #recttl {
    font-size: 37px;
    transform: translate(-13%,-50%);
}

#recttl:before {
  content: '';
  height: 38px;
  width: 66px;
  margin: 0 0px 4px 0;
}


#recttl:after {
  content: '';
  height: 51px;
  width: 53px;
  margin: 0 0 11px 3px;
}

#recomen span:before {
  content: '';
  height: 23px;
  width: 36px;
}

#recomen .ttl {
  font-size: 22px;    margin-bottom: 15px;padding: 10px;
}


#recomen span {
 margin-bottom: 15px;}

.text {
      font-size: 14px;
  }

  #recomen .right img {
    width: 300px;
}

#recomen ul {
  padding: 20px 20px 10px 20px;
}

.btn06 { margin-bottom: 10px;}

}

@media screen and (max-width:830px) {

  .pinflex_1 #big {
    margin-bottom: 18px;
}

  #recttl {
    font-size: 28px;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
}

#recttl:before {
  height: 30px;
  width: 57px;
  margin: 0 0px 4px 0;
}

#recttl:after {
  content: '';
  height: 41px;
  width: 45px;
}

#recomen {
  margin: 0 10px 30px;
}

#cotegory {
  margin-bottom: 40px;
}

#recomen {
  border-radius: 20px;}

  #recomen ul .right {
    margin: 10px 0 20px 0;
}

.bold {
   font-weight: 100; 
}

#recomen span:before {
  content: '';
  height: 30px;
  width: 32px;
}

#osusumettl {
  font-size: 1.8rem;
  max-width: 600px;
  margin: 10px auto;
}

#movie li img{
margin-bottom: 5px;
}

#osusumettl:before {
  height: 37px;
  width: 34px;
  margin-right: 6px;}

  #movie .container {
    padding: 40px 10px;
  }


  .miniprice {
    padding-top: 0px;
    margin-bottom: 0;
    font-size: 14px;
}


#movie li {
  width: 148px;
}

#movie ul li {
  margin: 0 0 10px 0;        width: 48%;
}

#movie ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  justify-content: space-between;
  max-width: 600px;
}

#movie ul:after {
  content: "";
  display: block;
  width: 161px;
}

#movie ul li {
  padding: 6px;
}



}



@media screen and (max-width:660px) {


  .prev_icon {
    left: 36%; top: 110%;}
  
    .next_icon {
      right: 36%; top: 110%;
    }

  #movie ul {
    max-width: 600px;
  }

  #osusumettl {
    max-width: 330px;
  }


}


@media screen and (max-width:660px) {
  .pinflex_1 li {    justify-content: center;
    width: 90%;
}
  
  .pinflex_1 { max-width: 660px; width: 100%; flex-wrap: wrap;}

  .quesp { display: block;font-weight: 600;
    border-bottom: 2px solid;
    padding-bottom: 10px;
    letter-spacing: 0.09rem;
    margin-bottom: 25px;}

  .que  { display: none;}

  .qma {
    margin-left: 0px;
}

#pinpon .ma30 img{ width: 75%; text-align: center;}

#pinpon .pinflex_1 .ma30 { text-align: center;}

.pinponttl {
  font-size: 1.5rem;padding: 15px;    width: 250px;}


  .pinponbk {
    background-size: 293px;
    top: 149px;}
  
    .balloon1 p {
      font-size: 17px;
    }

.balloon1  {width: 199px;
    padding: 11px;
}

#pinpon .grayback {
  margin: 15px;
}

.pinflex_2 li {
  margin: 0 10px;
}

#seikai {
  font-size: 23px;
  padding: 10px;
}

#pinpon .btn06 {
  width: 270px;
  font-size: 15px;
}

.btnarrow1::after {
  width: 10px;
  height: 10px;
}

.whitebk {
  background-color: transparent;
  margin-bottom: 25px;
  text-align: justify;
  border-bottom: solid 2px;
  display: initial;
  padding: 0 0 0 0;line-height: 2.4rem;
  font-size: 16px;
}

#pinpon .text {
  margin-bottom: 50px;
}

#pinpon .b_btn {
  margin-top: 0px;

}
#greenbk {
  font-size: 19px;
  line-height: 2.8rem;
  text-align: justify;
  padding: 10px;
  letter-spacing: 0.2rem;
}

#cotegory ul {
  max-width: 520px;
  padding: 74px 0 30px 0;
  width: 100%;
  justify-content: center;
  margin: 0 auto;font-size: 14px;
}

.c_item a {
  border: 2px solid;
  background: #fff;
  width: 160px;
  height: 160px;
  text-align: center;
}

.tab img, .cago img, .oh img {
  width: 95px;
}

.c_item img {
  width: 70px;
}

.c_item span {
  width: 110px;
  height: 110px;
}

.c_item {
  width: fit-content;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 4px 4px;
  align-items: center;
}

#cotegory .mobbox:after{
  content:"";
  display: block;
  width:172px;
}

#cotettl {
  width: 130px;
  height: 130px;
}

#cotettl { top: 9%;
  border: none;height: 0px;
  background-color: transparent;height: 0;
  font-size: 26px;
}

#ttl ul {
  margin: 10px auto;
}

#ttl ul {
    max-width: 330px;
}

.din {
  font-size: 27px;}

  .cflex img {
width: 100%;    min-width: 100%;
max-width: 100%;
}


#cotegory2 .miniprice {
  margin-top: 1px;
}
.kazari {
  top: 66vw;
}

.itemflex .lineup-shipping {
  bottom: -6px;
}

#cotettl2 {
  font-size: 2rem;
}

#cotettl2 span {
  margin-top: 0px;
}
#cotettl2 p:before {
  height: 35px;
  width: 35px;}

  #cotettl2 p:after {
    height: 39px;
    width: 41px;
  }

  #cotegory2 .container {
    margin: 0px auto;
    padding: 0;
  }


  #cotettl2 {
    margin-bottom: 15px;
}

#parasol .ttl, #outdoorchair .ttl, #outdoortable .ttl, #trunkcargo .ttl, #others .ttl {
  font-size: 1.8rem;}
  .haifun {
    font-size: 1rem;}
#parasol .c_item img, #outdoorchair .c_item img, #outdoortable .c_item img, #trunkcargo .c_item img, #others .c_item img {
    width: 40px;
}


#parasol .c_item, #outdoorchair .c_item, #outdoortable .c_item, #trunkcargo .c_item, #others .c_item {
  width: 60px;    margin: 1px 18px 0 0;
  height: 60px;

}

.itemflex li {margin: 0 0 10px 0;  max-width: 160px;}

.itemflex a {
  padding: 0px;
  background: none;
}

#parasol .ma30, #outdoorchair .ma30, #outdoortable .ma30, #trunkcargo .ma30, #others .ma30 {
  margin-top: 56px;
}

#cotegory2 #catcat {
  font-size: 25px;    margin-bottom: 0px;
}

#cotettl2 span {
  font-size: 1.3rem;
}
#cotegory2 .ttl p {
  font-size: 26px;
}

#cotegory2 .ttl .haifun {
  font-size: 1.3rem;
}

#parasol span, #outdoorchair span, #outdoortable span, #trunkcargo span, #others span {
  margin-top: 2px;
}

.itemflex {
  justify-content: space-between;max-width: 600px;    margin: 0 auto;
}

.itemflex div {
  font-size: 14px;
  line-height: 1.1rem;
}

#cotegory {
  padding: 0 10px;

}


.c_item a {
  border: 2px solid;
  background: #fff;
  max-width: 100%;
  max-height: 163px;
  text-align: center;
}

.c_item {
  width: fit-content;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 4px 0px;
  align-items: center;
  width: 100%;
  max-width: calc(51% - 7px);
  height: calc(50% - 64px);
}


}


@media screen and (max-width:520px) {

#cotegory ul {
  max-width: 345px;
  padding: 92px 0px 30px 0px;
  width: 100%;
  justify-content: space-between;
  margin: 0 auto;font-size: 14px;
}

#parasol .ma30, #outdoorchair .ma30, #outdoortable .ma30, #trunkcargo .ma30, #others .ma30 {
  margin-top: 60px;
}



#parasol .kazari:before {    content: "";
  display: inline-block;
  width: 10px;
  height: 2px;
  background-color: black;
  margin: 0 6px 7px 0;
}

#outdoorchair .kazari:before {    content: "";
  display: inline-block;
  width: 10px;
  height: 2px;
  background-color: black;
  margin: 0 6px 7px 0;
}

#outdoortable .kazari:before {    content: "";
  display: inline-block;
  width: 10px;
  height: 2px;
  background-color: black;
  margin: 0 6px 7px 0;
}

#trunkcargo .kazari:before {    content: "";
  display: inline-block;
  width: 10px;
  height: 2px;
  background-color: black;
  margin: 0 6px 7px 0;
}

#others .kazari:before {    content: "";
  display: inline-block;
  width: 10px;
  height: 2px;
  background-color: black;
  margin: 0 6px 7px 0;
}


  .itemflex {
    max-width: 420px;
  }

  .itemflex li {
    margin: 0 0 10px 0;
    max-width: calc(50% - 4px);
}
#movie ul {
  max-width: 400px;
}

#movie li {
  width: calc(50% - 17px);
}

#osusumettl {
  max-width: 400px;
}

.prev_icon {
  left: 30%; top: 110%;}

  .next_icon {
    right: 30%; top: 110%;
  }

  .mban p:before {
    content: '';
    height: 37px;
    width: 33px;
    display: inline-block;
    background-image: url(img/roadbtn.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-right: 6px;
    margin-bottom: 0px;
}




}




@media screen and (max-width:400px) {


  .slider .mar img {
    width: 370px;
    height: 254px;
}

.slider .mar a {
  width: 370px;
  height: 254px;
}

.slider .mar {
  width: 370px;
  height: 254px;
}



}