@charset "UTF-8";
/*--------------------------------------------
NEWS
---------------------------------------------*/
@media screen and ( width <= 750px ){
    body.news #title:before{
      background-image: image-set( url( "../images/news/title_sp.avif" ) type( "image/avif" ) , url( "../images/news/title_sp.webp" ) type( "image/webp" ) );
    }
  }
@media print,screen and ( width > 750px ){
    body.news #title:before{
      background-image: image-set( url( "../images/news/title_pc.avif" ) type( "image/avif" ) , url( "../images/news/title_pc.webp" ) type( "image/webp" ) );
    }
  }
#news .head{
    display: grid;
  }
#news :where( time , .category ){
    line-height: 1.2;
  }
#news .category{
    color:var(--orange);
    font-weight: 100;
  }
#news h1{
    font-weight: 700;
    letter-spacing: 0.1em;
  }
@media screen and ( width <= 750px ){
#news{
    padding-top: calc( ( 78 - 2.2 - 2.2 ) var(--remBase) );
    padding-bottom: calc( 117 var(--remBase) )
}
    #news .head{
      grid-template-columns: calc( 140 var(--percentBase) ) auto;
    }
    #news :where( time , .category ){
      font-size : clamp( var(--min) , 2.2rem , var(--max) );
    }
    #news h1{
      margin-top: calc( ( 41 - 2.2 - 14 ) var(--remBase) );
      font-size: clamp( var(--min) , 3.2rem , var(--max) );;
      line-height: calc( 60 / 32 );;
    }
    #news #newsContent{
      margin-top: calc( ( 78 - 14 - 17 ) var(--remBase) );
    }
  }
@media print,screen and ( width > 750px ){
#news{
    padding-top: calc( ( 79 - 1.2 - 1.4 ) var(--remBase) );
    padding-bottom: calc( 120 var(--remBase) )
}
    #news .head{
      grid-template-columns: calc( 118 var(--percentBase) ) auto;
    }
    #news :where( time , .category ){
      font-size : clamp( var(--min) , 1.4rem , var(--max) );
    }
    #news h1{
      margin-top: calc( ( 20 - 1.4 - 8 ) var(--remBase) );
      font-size: clamp( var(--min) , 2.4rem , var(--max) );;
      line-height: calc( 40 / 24 );;
    }
    #news #newsContent{
      margin-top: calc( ( 53 - 8 - 11 ) var(--remBase) );
    }
  }
/*--------------------------------------------
FRUITS
---------------------------------------------*/
@media screen and ( width <= 750px ){
    body.fruits #title:before,body[class*="fruits-"] #title:before{
      background-image: image-set( url( "../images/fruits/title_sp.avif" ) type( "image/avif" ) , url( "../images/fruits/title_sp.webp" ) type( "image/webp" ) );
    }
  }
@media print,screen and ( width > 750px ){
    body.fruits #title:before,body[class*="fruits-"] #title:before{
      background-image: image-set( url( "../images/fruits/title_pc.avif" ) type( "image/avif" ) , url( "../images/fruits/title_pc.webp" ) type( "image/webp" ) );
    }
  }
#fruitsLink{
  background-color: #fcfaf2;
}
#fruitsLink ul{
    display: grid;
    justify-content: space-between;
  }
#fruitsLink a{
    overflow: hidden;
    outline: solid 1px var(--orange);
    outline-offset: -1px;
    text-align: center;
    letter-spacing: .2em;
    text-indent: .2em;
    height: 100%;
    display: grid;
    place-items:center;
    position: relative;
  }
#fruitsLink a:after{
      content:"";
      content: "";;
      display: block;;
      font-size: 0;;
      width: auto;;
      background-position: left center;;
      background-repeat: no-repeat;;
      background-size: contain;;
      background-image: url("../images/ui/arrow/down01.svg");
      aspect-ratio: 10/6;
      position: absolute;
      top: 50%;
      translate: 0 -50%;
    }
#fruitsLink a:not([aria-current]){
      background-color: white;
      color:var(--orange);
    }
#fruitsLink a:not([aria-current]):after{
        filter: var(--filterOrange);
      }
#fruitsLink a[aria-current]{
      background-color: var(--orange);
      color:white;
    }
#fruitsLink a[aria-current]:after{
        filter: var(--filterWhite);
      }
@media screen and ( width <= 750px ){
#fruitsLink{
    margin-top: calc( ( 55 - 2.2 ) var(--remBase) );
    padding-block: calc( 60 var(--remBase) )
}
    #fruitsLink ul{
      grid-template-columns: repeat( 3 , calc( 220 var(--percentBase) ) );
      grid-auto-rows: calc( 50 var(--remBase) );
      row-gap: calc( 10 var(--remBase) );
    }
    #fruitsLink a{
      border-radius: calc( 6 var(--remBase) );
      font-size : clamp( var(--min) , 2.6rem , var(--max) );
    }
      #fruitsLink a:after{
        height: calc( 6 var(--remBase) );
        right: calc( 15 * 100% / 220 );
      }
  }
@media print,screen and ( width > 750px ){
#fruitsLink{
    margin-top: calc( ( 72 - 1.2 ) var(--remBase) );
    padding-top: calc( 38 var(--remBase) );
    padding-bottom: calc( 40 var(--remBase) )
}
    #fruitsLink ul{
      grid-template-columns: repeat( 4 , calc( 220 var(--percentBase) ) );
      grid-auto-rows: calc( 50 var(--remBase) );
      row-gap: calc( 20 var(--remBase) );
    }
    #fruitsLink a{
      border-radius: calc( 6 var(--remBase) );
      font-size : clamp( var(--min) , 1.6rem , var(--max) );
    }
      #fruitsLink a:after{
        height: calc( 6 var(--remBase) );
        right: calc( 14 * 100% / 220 );
      }
  }
@media ( hover : hover ){
  #fruitsLink a:hover{
    background-color: var(--orange);
    color:white;
  }
    #fruitsLink a:hover:after{
      filter: var(--filterWhite);
    }
}
@media ( prefers-reduced-motion : no-preference ){
  #fruitsLink a{
    transition: background var(--transitionBase) , color var(--transitionBase);
  }
    #fruitsLink a:after{
      transition: filter var(--transitionBase);
    }
}
/*--------------------------------------------
PRODUCCT
---------------------------------------------*/
@media screen and ( width <= 750px ){
#product{
    padding-top: calc( ( 69 - 2.2 ) var(--remBase) )
}
  }
@media print,screen and ( width > 750px ){
#product{
    padding-top: calc( 69 var(--remBase) )
}
  }
@media print,screen and ( width > 750px ){
#productBox{
    display: grid;
    grid-template-columns: repeat( 2 , calc( 470 var(--percentBase) ) );
    justify-content: space-between
}
  }
#productGallery{
  font-size: 0;
}
#productGallery picture{
    width: 100%;
    height: 100%;
  }
#productGallery picture img{
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
#productGallery #sliderThumbnail .splide__list{
      justify-content: center;
    }
#productGallery #sliderThumbnail .splide__slide{
      outline-style: solid;
    }
#productGallery #sliderThumbnail .splide__slide.is-active{
        outline-color: var(--orange);
      }
#productGallery #sliderThumbnail .splide__slide:not(.is-active){
        outline-color: transparent;
      }
@media screen and ( width <= 750px ){
    #productGallery #sliderThumbnail{
      margin-top: calc( 28 var(--remBase) );
    }
      #productGallery #sliderThumbnail .splide__list{
        column-gap: calc( 14 var(--percentBase) );
      }
      #productGallery #sliderThumbnail .splide__slide{
        outline-width: calc( 3 var(--remBase) );
        outline-offset: calc( -3 var(--remBase) );
      }
  }
@media print,screen and ( width > 750px ){
#productGallery{
    grid-column: 1
}
    #productGallery #sliderThumbnail{
      margin-top: calc( 18 var(--remBase) );
    }
      #productGallery #sliderThumbnail .splide__list{
        column-gap: calc( 10 * 100% / 470 );
      }
      #productGallery #sliderThumbnail .splide__slide{
        outline-width: 1px;
        outline-offset: -1px;
      }
  }
#productInfo .category{
    font-weight: 700;
    letter-spacing: 0.05em;
  }
#productInfo h1{
    font-weight: 400;
    letter-spacing: 0.05em;
  }
#productInfo .price{
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: baseline;
  }
#productInfo .price :where( dt , dd ){
      letter-spacing: 0.05em;
    }
#productInfo .price dt{
      grid-column: 2;
    }
#productInfo .price dt:nth-of-type(1){
        grid-row: 1;
      }
#productInfo .price dt:nth-of-type(2){
        grid-row: 2;
      }
#productInfo .price dd{
      grid-column: 1;
    }
#productInfo .price dd:nth-of-type(1){
        grid-row: 1;
      }
#productInfo .price dd:nth-of-type(2){
        grid-row: 2;
      }
#productInfo .description{
    letter-spacing: 0.1em;
  }
#productInfo #colorme > div, #productInfo #colorme .cartjs_box, #productInfo #colorme .cartjs_product_table, #productInfo #colorme table, #productInfo #colorme .cartjs_option, #productInfo #colorme .cartjs_option th, #productInfo #colorme .cartjs_option td{
      display: contents;
    }
#productInfo #colorme tbody{
      display: block;
    }
#productInfo #colorme .cartjs_product_num{
      display: none;
    }
#productInfo #colorme .cartjs_option select{
      border-radius: 100vmax;
      outline: solid 1px var(--base);
      outline-offset: -1px;
      color:var(--base);
      background-image: url("../images/ui/arrow/down01.svg");
      background-repeat: no-repeat;
      display: block;
      width: 100%;
    }
#productInfo #optionDescription{
    background-color: #f4f4f4;
  }
#productInfo #optionDescription h4{
      font-weight: 400;
      letter-spacing: 0.2em;
      text-align: left;
    }
#productInfo #optionDescription ul{
      display: flex;
      flex-wrap: wrap;
    }
#productInfo #optionDescription a{
      display: grid;
      align-items: baseline;
      justify-content: start;
      grid-template-columns: auto auto;
      letter-spacing: 0.2em;
    }
#productInfo #optionDescription a:before{
        content:"> ";
        white-space: pre;
      }
#productInfo #colorme input[type="submit"]{
    border-radius: 100vmax;
    display: grid;
    place-items:center;
    background-color: var(--orange);
    color:white;
    width: 100%;
    text-align: center;
    letter-spacing: .2em;
    text-indent: .2em;
  }
#productInfo .shops{
    display: grid;
    justify-content: space-between;
  }
#productInfo .shops a{
      width: 100%;
      height: 100%;
      display: grid;
      place-items:center;
      color:white;
      text-align: center;
      letter-spacing: .05em;
      text-indent: .05em;
    }
#productInfo .shops .rakuten{
      background-color: #b02418;
    }
#productInfo .shops .yahoo{
      background-color: #ea333d;
    }
@media screen and ( width <= 750px ){
#productInfo{
    padding-top: calc( 37 var(--remBase) )
}
    #productInfo .category{
      font-size : clamp( var(--min) , 2.2rem , var(--max) );
    }
    #productInfo h1{
      font-size : clamp( var(--min) , 4.6rem , var(--max) );
      margin-top: calc( 14 var(--remBase) );
    }
    #productInfo .price{
      margin-top: calc( 55 var(--remBase) );
    }
      #productInfo .price dd{
        font-size : clamp( var(--min) , 4rem , var(--max) );
      }
      #productInfo .price dt{
        font-size : clamp( var(--min) , 2.4rem , var(--max) );
      }
      #productInfo .price :where( dt ,dd ):nth-of-type(n+2){
        margin-top: calc( 30 var(--remBase) );
      }
    #productInfo .description{
      font-size: clamp( var(--min) , 2.6rem , var(--max) );;
      line-height: calc( 50 / 26 );;
      margin-top: calc( ( 66 - 12 ) var(--remBase) );
    }
    #productInfo #colorme{
      margin-top: calc( ( 53 - 12 ) var(--remBase) );
    }
      #productInfo #colorme .cartjs_option select{
        height: calc( 90 var(--remBase) );
        background-size:  auto calc( 10 var(--remBase) );
        background-position: right calc( 40 var(--remBase) ) top 50%;
        padding-left: calc( 80 var(--percentBase) );
        font-size: 2.6rem;
      }
      #productInfo #colorme select[name="option2"]{
        margin-top: calc( 15 var(--remBase) );
      }
    #productInfo #optionDescription{
      margin-top: calc( 28 var(--remBase) );
      padding-top: calc( ( 34 - 2.4 ) var(--remBase) );
      padding-bottom: calc( ( 36 - 2.4 ) var(--remBase) );
      padding-left: calc( 52 var(--percentBase) );
      padding-right: calc( 52 var(--percentBase) );
    }
      #productInfo #optionDescription h4, #productInfo #optionDescription a{
        font-size : clamp( var(--min) , 2.4rem , var(--max) );
        line-height: 1.2;
      }
      #productInfo #optionDescription ul{
        margin-top: calc( ( 22 - 2.2 - 2.2 ) var(--remBase) );
      }
    #productInfo #colorme input[type="submit"]{
      margin-top: calc( 32 var(--remBase) );
      height: calc( 104 var(--remBase) );
      font-size : clamp( var(--min) , 3rem , var(--max) );
    }
    #productInfo .shops{
      margin-top: calc( 38 var(--remBase) );
      grid-template-columns: repeat( 2 , calc( 336 var(--percentBase) ) );
      grid-auto-rows: calc( 80 var(--remBase) );
    }
      #productInfo .shops a{
        border-radius: calc( 5 var(--remBase) );
        font-size : clamp( var(--min) , 2.2rem , var(--max) );
      }
  }
@media print,screen and ( width > 750px ){
#productInfo{
    grid-column: 2
}
    #productInfo .category{
      font-size : clamp( var(--min) , 1.4rem , var(--max) );
    }
    #productInfo h1{
      font-size : clamp( var(--min) , 2.6rem , var(--max) );
      margin-top: calc( 14 var(--remBase) );
    }
    #productInfo .price{
      margin-top: calc( 39 var(--remBase) );
    }
      #productInfo .price dd{
        font-size : clamp( var(--min) , 2.6rem , var(--max) );
      }
      #productInfo .price dt{
        font-size : clamp( var(--min) , 1.2rem , var(--max) );
      }
      #productInfo .price :where( dt ,dd ):nth-of-type(n+2){
        margin-top: calc( 14 var(--remBase) );
      }
    #productInfo .description{
      font-size: clamp( var(--min) , 1.6rem , var(--max) );;
      line-height: calc( 30 / 16 );;
      margin-top: calc( ( 41 - 7 ) var(--remBase) );
    }
    #productInfo #colorme{
      margin-top: calc( ( 28 - 7 ) var(--remBase) );
    }
      #productInfo #colorme .cartjs_option select{
        height: calc( 50 var(--remBase) );
        background-size:  auto calc( 5 var(--remBase) );
        background-position: right calc( 22 var(--remBase) ) top 50%;
        padding-left: calc( 55 * 100% / 470 );
        font-size: 1.4rem;
      }
      #productInfo #colorme select[name="option2"]{
        margin-top: calc( 22 var(--remBase) );
      }
    #productInfo #optionDescription{
      margin-top: calc( 21 var(--remBase) );
      padding-block: calc( ( 25 - 1.4 ) var(--remBase) );
      padding-inline: calc( 36 * 100% / 470 );
    }
      #productInfo #optionDescription h4, #productInfo #optionDescription a{
        font-size : clamp( var(--min) , 1.4rem , var(--max) );
        line-height: 1.2;
      }
      #productInfo #optionDescription ul{
        margin-top: calc( ( 18 - 1.4 - 1.4 ) var(--remBase) );
      }
    #productInfo #colorme input[type="submit"]{
      margin-top: calc( 28 var(--remBase) );
      height: calc( 70 var(--remBase) );
      font-size : clamp( var(--min) , 1.8rem , var(--max) );
    }
    #productInfo .shops{
      margin-top: calc( 26 var(--remBase) );
      grid-template-columns: repeat( 2 , calc( 228 * 100% / 470 ) );
      grid-auto-rows: calc( 41 var(--remBase) );
    }
      #productInfo .shops a{
        border-radius: calc( 5 var(--remBase) );
        font-size : clamp( var(--min) , 1.5rem , var(--max) );
      }
  }