.sp-open-fix { display: none !important;}

*,:before,:after {
    box-sizing: border-box;
    border-style: solid;
    border-width: 0;
    min-width: 0
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--s-container-block);
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    overflow-y: scroll;
    overflow-x: hidden;
}

body {
    margin: 0;
    background-image: -webkit-image-set(url("../images/background_paper.webp"),
    url("../images/background_paper.png"));
}

main {
    display: block;
}
.visually-hidden {
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   width: 1px;
   height: 1px;
   overflow: hidden;
   position: absolute;
   white-space: nowrap;
 }
.vegas-container nav{  
   height: 60px;
}
@media only screen and (max-width: 767px){
   .vegas-container nav{
      height: 60px;
   }
}

p,table,blockquote,address,pre,iframe,form,figure,dl {
    margin: 0;
    font-weight: 500;
}

h1,h2,h3,h4,h5,h6 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0
}

ul,ol {
    margin: 0;
    padding: 0;
    list-style: none
}

a {
    background-color: transparent;
    text-decoration: none;
    color: inherit
}

b,strong {
    font-weight: 700;
}


svg,img,embed,object,iframe {
    vertical-align: bottom
}

:-moz-focusring {
    outline: auto
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

[type=number] {
    -moz-appearance: textfield
}

[contenteditable]:focus {
    outline: auto
}

td,th {
    vertical-align: top;
    padding: 0
}

th {
    text-align: left;
    font-weight: 700
}

body {
    position: relative;
    background-color: var(--c-background);
}
.main-contents{
   color: var(--c-text);
   font-family: var(--f-default);
   font-weight: 400;
   line-height: 1.5;
   line-break: strict;
   overflow-wrap: anywhere;
}
img {
    vertical-align: middle;
    max-width: 100%;
    height: auto
}

p {
    line-height: 1.75
}

:root {
    --c-brown: #1F1D1D;
    --c-white: #FFF;
    --c-beige: #E8DDCB;
    --c-gray: #DADADB;
    --c-green: #97BF11;
    --c-rosso: #FB9B86;
    --c-bianco: #FFC449;
    --c-rosato: #FE959D;
    --c-premiumrosso: #FF5D60;
    --c-premiumbianco: #FFB167;
    --c-text: var(--c-brown);
    --c-background: #F5F5F5;
    --f-en: "Unbounded", sans-serif;
    --f-default: "Zen Kaku Gothic New", sans-serif;
    --wrap-midium: 947px;
    --wrap-large: 1140px;
    --z-fixed: 1030;
    --z-modal: 1050;
}
@media screen and (max-width: 1022px) {
    :root {
        --wrap-midium: 328px;
        --wrap-large: 350px;
    }
}

.txt-lt{ text-align: left; }
.txt-cr{ text-align: center; }
.block{ display: block; }
.flex{display: flex; }
.inflex{ display: inline-flex; }
.ma-auto{ margin-inline: auto; }
.pc-none{ display: none; }

.ls3{ letter-spacing: -0.03em; }
.ls4{ letter-spacing: -0.04em; }
.ls5{ letter-spacing: -0.05em; }
.ls6{ letter-spacing: -0.06em; }
.ls7{ letter-spacing: -0.07em; }
.ls8{ letter-spacing: -0.08em; }
.ls9{ letter-spacing: -0.09em; }
.ls10{ letter-spacing: -0.1em; }
.ls11{ letter-spacing: -0.11em; }
.ls20{ letter-spacing: -0.2em; }
 @media screen and (max-width: 1022px) {
    .pc-none{ display: block; }
    .sp-none{ display: none; }
 }

 hgroup h2{
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    margin-bottom: 10px;
 }
 hgroup p{
    font-size: 60px;
    font-weight: 600;
    font-family: var(--f-en);
    line-height: 1;
 }
 .btn{
   display: block;
   text-align: center;
   font-weight: 700;
   color: var(--c-white);
   width: 345px;
   height: 60px;
   line-height: 60px;
   background-color: var(--c-brown);
   margin-inline: auto;
   border-radius: 9999px;
   transition: .3s;
 }
 .btn::after{
   content: "";
   display: inline-block;
   width: 16px;
   height: 16px;
   background-image: url(../images/icon-blank.svg);
   background-repeat: no-repeat;
 }
.btn:hover{
   transform: scale(95%);
}
 @media screen and (max-width: 1022px) {
   .btn{
      width: 310px;
      font-size: 15px;
   }
   .btn::after{
      transform: translateX(-2px);
   }
 }
 /*==================================================*
  *  [ header ]
  *==================================================*/
  .header {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: var(--z-fixed);
    transition: .5s;
    opacity: 0;
    pointer-events: none;
  }
  .header-navigation .anchor-menu {
    gap: 24px;
    }
    .header-navigation>ul {
      margin-top: 16px;
        display: flex;
        flex-direction: column;
        text-align: center;
        margin-left: auto;
        margin-right: 80px;
    }
    .header-navigation>ul img{
      margin-bottom: 25px;
      transform: translateY(-29px);
    }
    .header-navigation .anchor-menu>li>a {
        position: relative;
        display: inline-block;
        padding-block: .5rem;
        line-height: 1.15;
        font-size: 18px;
        color: white;
        font-family: var(--f-default);
    }
  @media only screen and (max-width: 991.98px) {
    .header-logo {
        position: absolute;
        z-index: 1051;
        width: 7.75rem;
        top: 1.875rem;
        left: 1.5rem;
    }
    .header-navigation.out {
        display: none;
    }
}
.header .global-menu {
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 400px;
    background-color: var(--c-brown);
    height: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* overflow: hidden; */
    transform: translateX(150%);
    transition: .6s;
}

.global-menu::after{
   content: "";
   display: block;
   position: absolute;
   width: auto;
    height: 100vh;
    aspect-ratio: 100 / 832;
    top: 0;
    right: 400px;
    background-color: var(--c-brown);
    mask-image: url(../images/background_round_pc.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    /* transform: rotate(270deg); */
}
.accordion {
  width: 400px;
}

.accordion-header_trigger {
  display: block;
  position: relative;
  background-color: var(--c-brown);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-size: 24px;
  border: 1px solid transparent;
  cursor: pointer;
  z-index: var(--z-fixed);
  transition: .5s;
}
.accordion-header_trigger[aria-expanded="true"]{
   border-color: var(--c-white);
}
.global-menu-close{
   content: "";
   opacity: 0;
   position: fixed;
   display: block;
   width: 0;
   height: 0;
   top: 0;
   left: 0;
   background-color: rgba(31,29,29,.6);
   z-index: -1;
}
.accordion-header_trigger[aria-expanded="true"]+.global-menu-close{
   opacity: 1;
   width: 100%;
   height: 100%;
   cursor: pointer;
}
.global-menu-close[aria-expanded="true"]+.global-menu+.nav-parts{
   opacity: 1;
}
.accordion-header_trigger:hover{
   transform: scale(90%);
}
.accordion-header_trigger::before,
.accordion-header_trigger::after,
.close-popup::before,
.close-popup::after{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: var(--c-white);
    width: 24px;
    height: 3px;
    transition: .5s;
}
.accordion-header_trigger::before{
   top: 24px;
   left: 17px;
}
.accordion-header_trigger::after{
   top: 31px;
   left: 17px;
}
.accordion-header_trigger[aria-expanded="true"]::before,
.close-popup::before{
   transform: rotate(45deg);
   top: 28px;
   left: 17px;
}
.accordion-header_trigger[aria-expanded="true"]::after,
.close-popup::after{
   top: 28px;
   left: 17px;
   transform: rotate(-45deg);
}
.global-menu-close[aria-expanded="true"]+.global-menu {
   transform: translateX(0%);
 }
 @media screen and (max-width: 1022px) {
   .header-navigation[aria-hidden="true"]{
      transform: translate(0, -150%);
      transition: .8s;
   }
   .header{
      top: 10px;
      right: 10px;
   }
   .accordion-header_trigger{
      width: 48px;
      height: 48px;
   }
   .header .global-menu{
      display: block;
      width: 100%;
      justify-content: flex-start;
      height: 480px;
   }
   .header-navigation .anchor-menu{
      margin: 109px auto 0;
      gap: 25px;
   }
   .header-navigation>ul img{
      margin-bottom: 0;
   }
   .header .global-menu::before{
      width: 100%;
      height: 480px;
      border-radius: 0;
   }
   .global-menu::after{
      aspect-ratio: 390/50;
      width: 100vw;
      height: auto;
      top: 479px;
      left: 0;
      transform: rotate(180deg);
      mask-image: url(../images/background_round_sp.svg);
      mask-position: center bottom;
   }
   .accordion-header_trigger::before,
   .accordion-header_trigger::after,
   .close-popup::before,
   .close-popup::after{
      width: 20px;
      height: 3px;
      transition: .3s;
   }
   .accordion-header_trigger::before {
      top: 18px;
      left: 13px;
  }
  .accordion-header_trigger::after{
   top: 25px;
   left: 13px;
}
   .accordion-header_trigger[aria-expanded="true"]::before,
   .close-popup::before,
   .accordion-header_trigger[aria-expanded="true"]::after,
   .close-popup::after{
      top: 22px;
      left: 13px;
   }
 }
 .slick-track {
   display: flex;
 }
 .slick-slide {
   height: auto !important;
 }
 /*==================================================*
  *  [ FV ]
  *==================================================*/
   /*==================================================*
  *  [ FV ]
  *==================================================*/
  .first-view{
   position: relative;
   height: 100%;
 }
 .first-view-box{
   position: relative;
   width: 100%;
   height: calc(100vh - 60px);
   /* height: clamp(calc(100vh - 60vw), 1vw, calc(100vh - 34vw)); */
   /* height: 600px; */
   min-height: 300px;
   max-height: 48vw;
   overflow: hidden;
 }
 .first-view-box::before{
  content: "";
  display: block;
  position: absolute;
  max-width: 1460px;
  width: 101%;
  height: auto;
  left: 50%;
  top: -10px;
  background-image: -webkit-image-set(url("../images/mv_pc-1440x465.webp"),
   url("../images/mv_pc-1440x465.png"));
  background-size: cover;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  mix-blend-mode: multiply;
  aspect-ratio: 1460/465;
  transform: translateX(-50%);
  z-index: -1;
 }
 .first-view-box::after{
  content: "";
  display: block;
  position: absolute;
  bottom: 33px;
  left: 0;
  width: 100vw;
  height: 100px;
  margin: 0 calc(50% - 50vw);
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  z-index: -1;
  height: auto;
  background-image: url(../images/background_round.svg);
  background-size: cover;
  aspect-ratio: 1440/100;
 }
 .first-view-wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
   position: absolute;
   width: 100%;
   height: 100%;
   max-height: 980px;
 }
  @media screen and (min-width: 1023px) and (max-width: 1439px){
   .first-view-wrapper{
      max-height: clamp(51.375rem, 13.258rem + 59.62vw, 66.875rem);
    }
  } /* */
 .first-view-wrap{
  position: sticky;
  top: 90px;
  /* top: clamp(15.625rem, 40.075rem + -38.28vw, 5.625rem); */
  /* left: 50%;
  transform: translateX(-50%); */
  width: 100%;
  height: 550px;
  height: clamp(21.875rem, -8.79rem + 47.96vw, 34.375rem);
  max-width: 520px;
  z-index: 2;
 }
.first-view-img{
   position: absolute;
   width: 100%;
   height: 100%;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   opacity: 0;
   animation: image-switch-animation 25s infinite;
}

@keyframes image-switch-animation {
  0%{ opacity: 0;}
  5%{ opacity: 1;}
  20%{ opacity: 1;}
  22%{ opacity: 0;}
  100%{ opacity: 0;}
}

.slider{
  position: absolute;
  display: flex;
  gap: 40px;
  /* gap: clamp(1.875rem, 0.347rem + 2.39vw, 2.5rem); */
  /* animation: 20s linear infinite sliderAnimation both; */
  min-width: 100%;
  width: min-content;
}
/* @keyframes sliderAnimation {
  from {
     transform: translateX(0);
   }
   to {
     transform: translateX(-100%);
   }
} */
/* .left-slider{
  justify-content: flex-end;
} */
.slider-img{
  width: clamp(6.25rem, -1.391rem + 11.96vw, 9.375rem);
 width: 151px;
  max-width: 151px;
  height: 194px;
  height: auto;
  aspect-ratio: 150/194;
  background-size: contain;
  background-repeat: no-repeat;
}
.slider-wrap{
   position: absolute;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   will-change: transform;
   transform: translateZ(0);
}

.right-slider .slider-wrap:last-child{
   animation: rightFirstSlideAnimation 10s step-end infinite;
 }
.right-slider .slider-wrap:first-child{
  animation: rightFifthSlideAnimation 10s step-end infinite;
}
.right-slider .slider-wrap:nth-child(4){
  animation: rightForthSlideAnimation 10s step-end infinite;
}
.right-slider .slider-wrap:nth-child(2){
  animation: rightSecondSlideAnimation 10s step-end infinite;
}
.right-slider .slider-wrap:nth-child(3){
  animation: rightThirdSlideAnimation 10s step-end infinite;
}

.left-slider .slider-wrap:first-child{
   animation: leftFifthSlideAnimation 10s step-end infinite;
 }
.left-slider .slider-wrap:nth-child(4){
  animation: leftForthSlideAnimation 10s step-end infinite;
}
.left-slider .slider-wrap:nth-child(2){
   animation: leftSecondSlideAnimation 10s step-end infinite;
 }
.left-slider .slider-wrap:nth-child(3){
   animation: leftThirdSlideAnimation 10s step-end infinite;
 }
.left-slider .slider-wrap:last-child{
   animation: leftFirstSlideAnimation 10s step-end infinite;
 } 

@keyframes leftFifthSlideAnimation {
   0%{ left: 0; }
   20%{ left: 83%; }
   40%{ left: 62.5%; }
   60%{ left: 42.5%; }
   80%{ left: 21%; }
   100%{ left: 0; }
 }
 @keyframes leftForthSlideAnimation {
   0%{ left: 0; }
   20%{ left: -21%; }
   40%{ left: -41.5%; }
   60%{ left: -62.5%; }
   80%{ left: 21%; }
   100%{ left: 0; }
 }
 @keyframes leftThirdSlideAnimation {
   0%{ left: 0; }
   20%{ left: -21%; }
   40%{ left: -42.5%; }
   60%{ left: 42.5%; }
   80%{ left: 21%; }
   100%{ left: 0; }
 }
 @keyframes leftSecondSlideAnimation {
   0%{ left: 0; }
   20%{ left: -21%; }
   40%{ left: 62.5%; }
   60%{ left: 42.5%; }
   80%{ left: 21%; }
   100%{ left: 0; }
 }
 @keyframes leftFirstSlideAnimation {
   0%{ left: 0; }
   20%{ left: -21%; }
   40%{ left: -42.5%; }
   60%{ left: -62.5%; }
   80%{ left: -83%; }
   100%{ left: 0; }
 }
 
 /* +++ [ 右 ] ++++ */
 @keyframes rightFirstSlideAnimation {
   0%{ left: 0; }
   20%{ left: -20.5%; }
   40%{ left: -41.5%; }
   60%{ left: -62.5%; }
   80%{ left: -83.5%; }
   100%{ left: 0; }
 }
 @keyframes rightForthSlideAnimation {
   0%{ left: 0; }
   20%{ left: -20.5%; }
   40%{ left: -41.5%; }
   60%{ left: -62.5%; }
   80%{ left: 20.5%; }
   100%{ left: 0; }
 }
 @keyframes rightThirdSlideAnimation {
   0%{ left: 0; }
   20%{ left: -20.5%; }
   40%{ left: -41.5%; }
   60%{ left: 41.5%; }
   80%{ left: 20.5%; }
   100%{ left: 0; }
 }
 @keyframes rightSecondSlideAnimation {
   0%{ left: 0; }
   20%{ left: -20.5%; }
   40%{ left: 62.5%; }
   60%{ left: 41.5%; }
   80%{ left: 20.5%; }
   100%{ left: 0; }
 }
 @keyframes rightFifthSlideAnimation {
   0%{ left: 0; }
   20%{ left: 83.5%; }
   40%{ left: 62.5%; }
   60%{ left: 41.5%; }
   80%{ left: 20.5%; }
   100%{ left: 0; }
 }

@media screen and (max-width: 650px) {
  @keyframes rightFirstSlideAnimation {
     0%{ left: 0; }
     20%{ left: -10%; }
     40%{ left: -19.5%; }
     60%{ left: -29.5%; }
     80%{ left: -39.5%; }
     100%{ left: 0; }
  }
  @keyframes rightForthSlideAnimation {
     0%{ left: 0; }
     20%{ left: -10%; }
     40%{ left: -19.5%; }
     60%{ left: -29.5%; }
     80%{ left: 10%; }
     100%{ left: 0; }
  }
  @keyframes rightThirdSlideAnimation {
     0%{ left: 0; }
     20%{ left: -10%; }
     40%{ left: -19.5%; }
     60%{ left: 19.5%; }
     80%{ left: 10%; }
     100%{ left: 0; }
  }
  @keyframes rightSecondSlideAnimation {
     0%{ left: 0; }
     20%{ left: -10%; }
     40%{ left: 29.5%; }
     60%{ left: 19.5%; }
     80%{ left: 10%; }
     100%{ left: 0; }
  } 
  @keyframes rightFifthSlideAnimation {
     0%{ left: 0; }
     20%{ left: 39.5%; }
     40%{ left: 29.5%; }
     60%{ left: 19.5%; }
     80%{ left: 10%; }
     100%{ left: 0; }
  }
}

.right-slider .slider-wrap.slick-slide.slick-current{
  opacity: 1;
}
.right-slider .slider-wrap.slick-slide.slick-current+ .slider-wrap,
.right-slider .slider-wrap.slick-slide.slick-current+ .slider-wrap+.slider-wrap{
  opacity: 1;
}
.right-slider .slider-wrap.slick-slide.slick-current+.slider-wrap{
  transition-delay: 2s;
}
.right-slider .slider-wrap.slick-slide.slick-current+.slider-wrap+.slider-wrap{
  transition-delay: 4s;
}

.left-slider>li, .right-slider>li{
   position: relative;
   height: 220px;
   width: 160px;
}

/* .left-slider .slider-wrap:nth-child(even) .slider-img,
.right-slider .slider-wrap:nth-child(even) .slider-img{
  transform: rotate(10deg);
}

.right-slider .slider-wrap:nth-child(odd) .slider-img,
.left-slider .slider-wrap:nth-child(odd) .slider-img{
  transform: rotate(-10deg);
} */

.left-slider .slider-wrap:nth-child(even) .slider-img,
.right-slider .slider-wrap:nth-child(even) .slider-img{
  animation: slope-odd-animation 2s step-end infinite;
}

.right-slider .slider-wrap:nth-child(odd) .slider-img,
.left-slider .slider-wrap:nth-child(odd) .slider-img{
  animation: slope-even-animation 2s step-end infinite;
}

.slider-box{
   width: 100%;
   position: relative;
  /* display: flex; */
  /* overflow: hidden; */
}

@keyframes slope-odd-animation {
  0%{ transform: rotate(10deg); }
  50%{ transform: rotate(15deg); }
  100%{ transform: rotate(10deg); }
}

@keyframes slope-even-animation {
  0%{ transform: rotate(-10deg); }
  50%{ transform: rotate(-15deg); }
  100%{ transform: rotate(-10deg); }
}

@media screen and (min-width: 501px) {
  .first-view-box{
     display: flex;
     justify-content: center;
     align-items: flex-end;
     gap: 601px;
     gap: clamp(24.063rem, -8.945rem + 51.67vw, 37.563rem);
  }
  .slider{
     position: relative;
     bottom: 3px;
     /* width: calc(938px * 2); */
     width: 938px;
     /* height: 217px; */
     flex-shrink: 0;
  }
  .left-slider{
   /* transform: translateX(-473px);
   left: -40%; */
   /* right: 111%; */
   justify-content: flex-end;
   position: absolute;
   right: 0;
  }
  /* .right-slider{
   transform: translateX(34%);
  } */
}
.slider-box.sp-none{
   display: block;
  }
   @media screen and (min-width: 651px) and (max-width: 800px){
    
   } /* */
  @media screen and (max-width: 650px) {
   .sp-slider{
      transform: translateX(-26%);
     }
     .slider-box.sp-none{
      display: none;
     }
     .slider-box{
      position: absolute;
      min-width: calc(424px * 2);
      width: 100%;
      left: 50%;
      bottom: -200px;
      right: 50%;
      bottom: 65px;
      height: 102px;
      transform: translateX(-50%);
   }
   .slider{
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      justify-content: center;
      gap: 4px;
   }
   .left-slider>li, .right-slider>li{
      width: 80px;
   }
   .slider-img {
      width: 70px;
      /* width: 56px; */
      /* height: 90.5px; */
      margin-inline: 6px;
  }
  }
@media screen and (max-width: 800px) {
  .first-view-wrapper{
     top: 67px;
  }
  .first-view-wrap{
     top: 49px;
     /* height: 569px; */
     max-height: 717px;
     /* height: 800px; */
     /* max-height: 566px; */
  }
  .first-view-box{
     height: 566px;
     max-height: 800px;
  }
  .first-view-img{
     top: 60px;
     left: 50%;
     width: 292px;
     height: 307px;
     transform: translate(-50%,-16%);
  }
}

.first-view-img:first-child{
  background-image: -webkit-image-set(url("../images/dish_premiumrosso.webp"),
   url("../images/dish_premiumrosso.png"));
  animation-delay: 0s;
}
.first-view-img:nth-child(2){
  background-image: -webkit-image-set(url("../images/dish_premiumbianco.webp"),
   url("../images/dish_premiumbianco.png"));
  animation-delay: 5s;
}
.first-view-img:nth-child(3){
  background-image: -webkit-image-set(url("../images/dish_rosso.webp"),
   url("../images/dish_rosso.png"));
  animation-delay: 10s;
}
.first-view-img:nth-child(4){
  background-image: -webkit-image-set(url("../images/dish_bianco.webp"),
   url("../images/dish_bianco.png"));
  animation-delay: 15s;
}
.first-view-img:last-child{
  background-image: -webkit-image-set(url("../images/dish_rosato.webp"),
   url("../images/dish_rosato.png"));
  animation-delay: 20s;
}

.slider li .product_rosso{
  background-image: -webkit-image-set(url("../images/product_rosso.webp"),
   url("../images/product_rosso.png"));
}
.slider li .product_bianco{
  background-image: -webkit-image-set(url("../images/product_bianco.webp"),
   url("../images/product_bianco.png"));
}
.slider li .product_rosato{
  background-image: -webkit-image-set(url("../images/product_rosato.webp"),
   url("../images/product_rosato.png"));
}
.slider li .product_premiumrosso{
  background-image: -webkit-image-set(url("../images/product_premiumrosso.webp"),
   url("../images/product_premiumrosso.png"));
}
.slider li .product_premiumbianco{
  background-image: -webkit-image-set(url("../images/product_premiumbianco.webp"),
   url("../images/product_premiumbianco.png"));
}

@media screen and (max-width: 600px) {
  .first-view-box::before{
     background-image: -webkit-image-set(url("../images/mv_sp.webp"),
   url("../images/mv_sp.png"));
     background-size: 100%;
     top: -9px;
     width: 100%;
     min-width: 415px;
     background-position: center top;
     height: 570px;
  }
}
 @media screen and (max-width: 750px){
  .first-view-wrap{
     transform: none;
  }
 } /* */
  @media screen and (max-width: 600px) {
   .first-view-wrapper{
      max-height: 523px;
    }
  }
 @media screen and (max-width: 425px){
  .first-view-box::before{
     /* background-position: left 77% top; */
     left: 48%;
  }
 }
  @media screen and (min-width: 768px) {
   nav#index {
      height: 120px !important;
   }
  }
/*==================================================*
 *  [ about ]
 *==================================================*/
 .about{
   position: relative;
 }
 .about-top{
    position: relative;
    width: 95%;
    /* height: calc(100vh - 60px); */
    min-height: 505px;
    max-height: 900px;
    background-image: url(../images/hand.svg);
    background-size: 616px;
    background-size: clamp(28.125rem, 2.673rem + 39.81vw, 38.5rem);
    background-position: left 53% bottom 90px;
    background-position: left 53% bottom 24%;
    background-repeat: no-repeat;
    text-align: center;
    justify-content: space-between;
    max-width: var(--wrap-large);
    margin-inline: auto;
    padding-top: 154px;
    padding-top: clamp(5rem, -6.385rem + 17.79vw, 9.625rem);
    padding-bottom: 78px;
    margin-top: -33px;
  }
  /* .about-top::before, */
  .about-top::after,
  .about-bottom::before,
  .about-bottom::after{
   content: "";
   display: block;
   position: absolute;
   left: 0;
   width: 100vw;
   height: 100%;
   margin: 0 calc(50% - 50vw);
   background-repeat: no-repeat;
   mix-blend-mode: multiply;
   z-index: -1;
  }
  /* .about-top::before, */
  .about-bottom::after{
   height: auto;
   /* height: 100px; */
   background-image: url(../images/background_round.svg);
   background-size: cover;
   aspect-ratio: 1440/100;
  }
  .about-bottom::after{
   /* bottom: -100px; */
   top: 333px;
   transform: rotate(-180deg);
  }
  .about-top::before{
   top: -100px;
  }
  .about-top::after,
  .about-bottom::before{
   top: 0;
   height: 100%;
   background-color: var(--c-beige);
   mix-blend-mode: multiply;
   z-index: -1;
 }
 .about-bottom::before{
   height: 333px;
 }
  .about-text{
    margin-top: 34px;
    font-size: 18px;
    line-height: 2;
  }
  .catch-box{
    width: 305px;
    flex-shrink: 0;
  }
  .catch-box img{
   display: block;
   width: 240px;
   transform: translate(21px,-2px);
  }
  .about-title h2{
    width: 330px;
    text-align: left;
    letter-spacing: -0.1em;
  }
  .about-title p{
    text-align: left;
  }
  .about-bottom{
   position: relative;
   width: 95%;
   justify-content: space-between;
   max-width: var(--wrap-large);
   margin-inline: auto;
   padding-bottom: 85px;
   gap: 15px;
  }
 .about-bottom li{
   width: calc(100% / 3);
   max-width: 352px;
   padding: 20px 20px 39px;
   background-color: white;
   box-shadow: 0 4px 0 rgba(0,0,0,.1);
   flex-shrink: 0;
 }
 .about-bottom img{
    display: block;
    height: 313px;
    background-color: #D1D1D1;
    object-fit: cover;
 }
 .about-bottom h3{
    color: var(--c-green);
    text-align: center;
    font-weight: 700;
    font-size: 24px;
    margin: 22px 0 12px;
 }
 .about-bottom p{
    font-size: 15px;
    line-height: 1.55;
 }
 .about-bottom li:nth-child(2) p{
   letter-spacing: -0.01em;
}
.slick-dots{
   bottom: -10px;
}
.slick-dots li{
   background-color: unset;
   box-shadow: none;
   padding: 0!important;
   width: 8px;
   height: 8px;
   margin-inline: 6px!important;
}
.slick-dots li button{
   padding-inline: 0;
   width: 8px;
   height: 8px;
}
.slick-dots li button:before{
   content: "";
   border-radius: 50%;
   width: 8px;
   height: 8px;
   border: 1px solid currentColor;
   background-color: unset;
   opacity: 1!important;
}
.slick-dots li.slick-active button:before{
   background-color: currentColor;
}
 @media screen and (min-width: 1023px) and (max-width: 1339px){
   .about-top{
      background-position: left 53% bottom 31%;
   }
 } /* */
 @media screen and (min-width: 601px) and (max-width: 850px){
   .first-view-wrapper{
      /* max-height: 530px; */
      max-height: clamp(526px, 15.2422rem + 38.9558vw, 575px);
   }
 }
 @media screen and (min-width: 851px) and (max-width: 1022px){
   .first-view-wrapper{
      max-height: clamp(36.25rem, 14.477rem + 40.94vw, 40.625rem);
   }
 }
  @media screen and (min-width: 701px) {
   .sp-slider{
      display: none;
   }
  }
 @media screen and (max-width: 1022px) {
   .first-view-box{
      overflow: hidden;
      /* max-height: max(48vw, 550px); */
   }
   .about-title h2{
      font-size: 13px;
      margin-bottom: 7px;
   }
   .about-title p{
      font-size: 40px;
   }
    .catch-box{
      width: 100%;
    }
    .catch-box img{
      width: 291px;
      margin-top: 35px;
      transform: none;
    }
    .about-text{
      margin-top: 24px;
      font-size: 16px;
    }
    .about-bottom{
      gap: 1%;
      margin-inline: auto;
      justify-content: center;
      max-width: 100%;
      padding-bottom: 20px;
    }
    .about-bottom>li{
      width: calc(95% / 3);
      padding: 10px 10px 29px;
      /* max-width: 100%; */
    }
    .about-bottom p{
      font-size: 14px;
      line-height: 1.5;
    }
    .about-bottom h3{
      font-size: 20px;
      margin: 19px 0 11px;
    }
    .about-bottom img{
      width: 100%;
      height: auto;
      aspect-ratio: 1;
    }
 } /* */
  @media screen and (max-width: 1022px) {
   .about-top{
      padding-bottom: 60px;
      padding-top: 287px;
      /* padding-bottom: 60px;
      margin-top: -212px;
      padding-top: 287px; */
      
      background-position:left 53% top 135px;
      background-size: 309px;
   }
   .about-bottom{
      width: 100%;
   }
  }
  @media screen and (max-width: 650px) {
   .about-bottom{
      width: 100%;
   }
    .about-bottom li{
      padding: 20px 20px 39px;
      margin-inline: 12px;
      max-width: 100%;
    }
    .about-bottom img{
      height: 224px;
      aspect-ratio: 1;
    }
  }
   @media screen and (max-width: 800px) {
      .first-view-box::after{
         width: 100%;
         bottom: 212px;
         /* bottom: 33px; */
         /* height: 50px; */
         aspect-ratio: 390 / 50;
         background-image: url(../images/background_round_sp.svg);
      }
      .about-top{
         padding-bottom: 60px;
         margin-top: -212px;
         padding-top: 291px;
         background-position:left 53% top 139px;
      }
   }
  @media screen and (min-width: 1440px) {
   .first-view-box{
      max-height: 600px;
   }
   .slider{
      gap: 40px;
   }
  }
 /*==================================================*
  *  [ lineup ]
  *==================================================*/
  .lineup{
    padding-bottom: 160px;
    width: 95%;
    margin-inline: auto;
  }
  .lineup-inner{
    max-width: var(--wrap-large);
    margin-inline: auto;
    margin-bottom: 69px;
  }
  .lineup-title h2{
    font-size: 20px;
  }
  .lineup-title p{
    font-size: 80px;
    transform: translate(-6px, -2px);
  }
  .lineup-list{
    justify-content: center;
    flex-wrap: wrap;
    gap: 99px 60px;
    margin-top: 140px;
  }
  .lineup-list li{
   position: relative;
    padding-inline: 40px;
    max-width: 340px;
    height: 543px;
  }
  .lineup-list li::before{
   content: "";
   display: block;
   position: absolute;
   width: 100%;
   height: 100%;
   bottom: 0;
   left: 50%;
   border-radius: 9999px;
   mix-blend-mode: multiply;
   transform: translateX(-50%);
   z-index: -1;
  }
  .lineup-list li:first-child::before,
  .lineup-list li:first-child .popup-inner::before,
  .lineup-list li:first-child .popup-inner::after{
   background-color: var(--c-rosso);
}
  .lineup-list li:nth-child(2)::before,
  .lineup-list li:nth-child(2) .popup-inner::before,
  .lineup-list li:nth-child(2) .popup-inner::after{
   background-color: var(--c-bianco);
}
  .lineup-list li:nth-child(3)::before,
  .lineup-list li:nth-child(3) .popup-inner::before,
  .lineup-list li:nth-child(3) .popup-inner::after{
   background-color: var(--c-rosato);
}
  .lineup-list li:nth-child(4)::before,
  .lineup-list li:nth-child(4) .popup-inner::before,
  .lineup-list li:nth-child(4) .popup-inner::after{
   background-color: var(--c-premiumrosso);
}
  .lineup-list li:last-child::before,
  .lineup-list li:last-child .popup-inner::before,
  .lineup-list li:last-child .popup-inner::after{
   background-color: var(--c-premiumbianco);
}

  .lineup-list li:nth-last-child(-n+2){
    height: 582px;
  }
  .lineup-list li img{
    display: block;
    height: 280px;
    margin-top: -100px;
    margin-bottom: 26px;
    transform: translateX(22px);
  }
  .lineup-list b{
    font-size: 27px;
    margin-top: 30px;
    line-height: 1.25;
    letter-spacing: 0.03em;
  }
  .lineup-list li:nth-last-child(-n+2) b{
   line-height: 1.32;
  }
  .lineup-list .inflex{
    flex-wrap: wrap;
    gap: 4px 5px;
    margin-top: 16px;
  }
  .lineup-list li:nth-last-child(-n+2) .inflex{
   margin-top: 13px;
  }
  .lineup-list .inflex span{
    display: block;
    height: 22px;
    line-height: 20px;
    padding-inline: 18.5px;
    border-radius: 9999px;
    letter-spacing: 0.025em;
    border: 1px solid currentColor;
    font-size: 14px;
    white-space: nowrap;
  }

   @media screen and (min-width: 1023px) and (max-width: 1199px){
      .lineup-list{
         gap: 145px 60px;
      }
   }
    /* @media screen and (max-width: 1022px) {
      .lineup-list li:nth-child(3)::after{
         content: "";
         display: block;
         order: 1;
         width: 100%;
         height: 100%;
      }
      .lineup-list li:nth-child(n+4) {
         order: 1;
     }
    } */
   @media screen and (max-width: 1022px) {
      .lineup-inner{
         max-width: 100%;
         padding-top: 62px;
         margin-bottom: 52px;
      }
      .lineup-title p{
         transform: translate(-4px, -1px);
      }
      .lineup-list{
         gap: 120px 60px;
      }
      .lineup-list li img{
         width: auto;
         height: 207px;
      }
   }
    @media screen and (max-width: 420px) {
      .lineup-list{
         gap: 99px 60px;
      }
      .lineup-inner{
         max-width: var(--wrap-large);
      }
    }

  .taste-title, .instagram-title{
    font-size: 48px;
    font-weight: 600;
    font-family: var(--f-en);
 }
  .taste-img{
    display: block;
    width: 95%;
    max-width: var(--wrap-midium);
    margin-inline: auto;
    padding: 40px;
    background-color: var(--c-white);
    border-radius: 20px;
    margin-top: 14px;
    margin-bottom: 82px;
    box-shadow: 0 4px 0 rgba(0,0,0,0.1);
  }
 .btn-detail{
    display: block;
    position: relative;
    text-align: center;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    background-color: unset;
    color: var(--c-brown);
    cursor: pointer;
    transition: .5s;
 }
 .btn-detail:hover::before{
   width: 36px;
   height: 36px;
   transform: scale(90%);
 }
 .lineup-list .inflex{
   position: relative;
   padding-bottom: 66px;
 }
 .lineup-list .btn-detail::before{
   content: "";
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   background-color: var(--c-brown);
   background-image: url(../images/icon-modal.svg);
   background-size: 16px;
   background-position: center;
   background-repeat: no-repeat;
   width: 100%;
   height: 100%;
   border-radius: 50%;
   transition: .5s;
 }
 .lineup-list .btn-detail::after{
    content: "View Detail";
    position: absolute;
    left: 50%;
    top: -25px;
    display: block;
    text-align: center;
    font-family: var(--f-en);
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    white-space: nowrap;
    transform: translateX(-50%);
 }
 .btn.btn-shop{
    display: block;
    width: 605px;
    height: 118px;
    line-height: 118px;
    color: var(--c-white);
    font-size: 22px;
    font-weight: 700;
    margin: 30px auto 0;
 }
 .btn.btn-shop:before{
   content: "";
   display: inline-block;
   width: 100px;
   height: 31px;
   background-image: url(../images/logo_amazon.svg);
   background-repeat: no-repeat;
   margin-right: 33px;
   transform: translate(-8px,2px);
   vertical-align: middle;
 }
 .btn.btn-shop::after{
   margin-left: 2px;
   transform: translate(6px,-2px);
 }

  @media screen and (max-width: 1022px) {
   .btn.btn-shop{
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: left;
      margin-top: 0;
      width: 100%;
      max-width: 350px;
      height: 78px;
      line-height: 1.2;
      font-size: 16px;
   }
   .btn.btn-shop:before{
      width: 60px;
      height: 19px;
      margin-right: 2px;
      transform: translate(-18px,3px);
   }
   .btn.btn-shop::after {
      margin-left: 2px;
      transform: translate(18px, -2px);
  }
  }

 /* [ popup ] */
 .popup {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   margin-inline: auto;
   padding-bottom: 80px;
   /* 
   padding: 20px 20px 100px;
   border-radius: 20px;
   background-image: -webkit-image-set(url("../images/background_paper.webp"),
    url("../images/background_paper.png")); */
   overflow-x: hidden;
   overflow-y: scroll;
   background: rgba(31,29,29,0.6);
   z-index: var(--z-modal);
}
.popup-inner-wrap{
   position: relative;
   max-width: inherit;
   max-width: 573px;
   width: 50%;
   margin: auto;
   margin-right: 40px;
   margin-top: 60px;
   z-index: 1;
}
.popup-inner::before,
.popup-inner::after{
   content: "";
   display: block;
   position: absolute;
   top: 0;
   mix-blend-mode: multiply;
   /* z-index: -1; */
   background-repeat: no-repeat;
}
.popup-inner::before{
   left: 0;
   height: 100%;
   width: 273px;
}
.popup-inner::after{
   mask-image: url(../images/background_round_right.svg);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
   height: 100%;
    width: 45px;
    width: 100px;
    left: 273px;
    width: auto;
    aspect-ratio: 100 / 643;
}
.close-popup{
   position: absolute;
   display: block;
   right: 20px;
   top: 20px;
   width: 60px;
   height: 60px;
   background-color: var(--c-brown);
   border-radius: 50%;
   margin-left: auto;
   cursor: pointer;
   z-index: var(--z-modal);
}
.overlay {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 2;
   cursor: pointer;
}
.modal-video{
   background-color: rgba(31,29,29,0.6);
}
.popup-inner{
   position: relative;
   padding: 20px 20px 100px;
   width: 90%;
   max-width: 1140px;
   border-radius: 20px;
   background-image: -webkit-image-set(url("../images/background_paper.webp"),
    url("../images/background_paper.png"));
   margin-top: 60px;
   min-height: 643px;
   margin-inline: auto;
   overflow: hidden;
   z-index: 5;
}
.lineup-list li .popup img{
   position: absolute;
   width: clamp(21.625rem, 6.24rem + 24.04vw, 27.875rem);
   width: 446px;
   top: 48%;
   left: calc(-100% + 85px);
   left: clamp(-28.25rem, -19.51rem + -13.67vw, -31.813rem);
   left: -102%;
   left: -509px;
   left: max(-509px, -102%);
   margin: 0;
   height: auto!important;
   transform: translateY(-50%);
}
.popup .inflex{
   width: 100%;
   margin-bottom: 18px;
}
.popup .inflex span{
   background-color: var(--c-brown);
   color: var(--c-white);
   border-color: var(--c-brown);
}
.popup b{
   font-size: 28px;
   letter-spacing: 0;
   line-height: 1.2;
}
.popup p{
   font-size: 15px;
}
.popup table{
   margin-top: 19px;
   width: 100%;
}
.popup table th,
.popup table td{
   font-size: 15px;
   padding: 15px 0;
   border-bottom: 1px dashed var(--c-brown);
}
.popup table th{
   width: 122px;
}
.popup .inflex{
   padding-bottom: 0;
}
.popup .inflex::after{
   content: none;
}
 /* @media screen and (min-width: 1022px) {
   .popup{
      width: 95%;
   }
 } */
 @media screen and (max-width: 1022px) {
   .popup{
      /* top: 80px;
      transform: translate(-50%,0); */
      /* height: 90vh;
      width: 90%;
      padding-bottom: 60px;
      margin: auto;
      max-width: 350px;
      overflow: scroll; */
      left: 50%;
      transform: translate(-50%,0);
      padding-bottom: 60px;
   }
   .popup-inner::before{
      width: 100%;
      height: 200px;
      border-radius: 20px 20px 0 0;
   }
   .popup-inner::after{
      width: 100%;
      height: 50px;
      height: auto;
      left: 50%;
      top: 200px;
      transform: translate(-50%,0) rotate(180deg);
      mask-image: url(../images/background_round_sp.svg);
      mask-position: bottom;
      mask-size: cover;
      aspect-ratio: 350/50;
   }
   .popup-inner{
      /* height: 100%;
      max-height: 90vh; */
      width: 90%;
      padding-bottom: 60px;
      margin: auto;
      max-width: 350px;
      padding-top: 0;

      width: 100%;
      margin: 0 auto;
      /* padding: 0; */
      /* height: calc(100% - 292px); */
      position: relative;
      top: 20px;
      width: 89.75%;
      overflow: visible;
      z-index: 5;
   }
   .popup-inner-wrap{
      /* margin: 292px auto 0; */
      width: 100%;
      margin-right: 0;
   }
   .popup-inner b{
      display: block;
      margin-top: 0;
      line-height: 1.2!important;
   }
   .popup p{
      font-size: 14px;
      line-height: 1.8;
   }
   .lineup-list li .popup img{
      display: block;
      position: unset;
      width: 292px;
      /* left: 53%;
      top: -20px; */
      transform: translateY(-20px);
      margin: 0 auto 5px;
   }
   .close-popup{
      right: -10px;
      top: -70px;
      width: 48px;
      height: 48px;
   }
   .popup table{
      margin-top: 17px;
   }
   .popup table th{
      width: 119px;
   }
   .popup table th, .popup table td{
      padding: 13px 0;
      font-size: 14px;
   }
   .lineup{
      padding-bottom: 99px;
   }
   .lineup-title h2{
      font-size: 16px;
      letter-spacing: -0.1em;
   }
   .lineup-title p{
      font-size: 52px;
   }
   .lineup-list{
      margin-top: 105px;
      gap: 102px;
      gap: 102px 5%;
   }
   .lineup-list li{
      padding-inline: 34px;
      height: 442px;
      max-width: 292px;
   }
   .lineup-list li img{
      margin-top: -84px;
      transform: translateX(32px);
      margin-bottom: 20px;
   }
   .lineup-list b{
      font-size: 24px;
      letter-spacing: 0;
   }
   .lineup-list .inflex{
      margin-top: 10px;
      padding-bottom: 55px;
      gap: 4px;
   }
   .popup .inflex{
      margin-top: 14px;
      padding-bottom: 0;
   }
   .lineup-list .inflex span{
      font-size: 12px;
      height: 20px;
      line-height: 18px;
   }
   .lineup-list .btn-detail::after{
      font-size: 14px;
      bottom: 9px;
   }
   .lineup-list li:nth-last-child(-n+2){
      height: 470px;
   }
   .lineup-list li:nth-last-child(-n+2) b{
      line-height: 1.15;
   }
   .taste-title, .instagram-title{
      font-size: 40px;
   }
 }
  @media screen and (max-width: 1022px) {
   .taste-img{
      max-width: 70%;
   }
  }
  @media screen and (max-width: 420px) {
   .taste-img{
      max-width: var(--wrap-midium);
      margin-top: 10px;
      margin-bottom: 60px;
      padding: 19px;
      max-width: 350px;
   }
  }

   @media screen and (min-width: 1023px) {
      .lineup-list li{
         display: flex;
         flex-direction: column;
         padding-bottom: 37px;
      }
      .lineup-list li img{
         margin-bottom: 0;
      }
    .btn-detail{
      margin-top: auto;
    }
   }
   @media screen and (max-width: 1022px) and (min-width: 648px ) {
      .lineup-list li{
         display: flex;
         flex-direction: column;
         padding-bottom: 37px;
         height: 470px;
      }
      .lineup-list .inflex{
         padding-bottom: 0px;
      }
      .lineup-list li img{
         margin-bottom: 0;
      }
    .btn-detail{
      margin-top: auto;
    }
   }
/*==================================================*
 *  [ package ]
 *==================================================*/
 .package{
    counter-reset: number 0;
    background-image: -webkit-image-set(url("../images/background_grid.webp"),
    url("../images/background_grid.png"));
    background-size: 190px;
    background-position: top center;
    padding-top: 125px;
    padding-bottom: 160px;
   position: relative;
 }
 .package-title{
    margin-inline: auto;
    max-width: var(--wrap-large);
 }
 .package-title h2{
   font-size: 20px;
}
 .package-title p{
   transform: translate(-6px,-4px);
    font-size: 80px;
 }
 .package-subtitle{
   position: absolute;
   left: 0;
   top: 38px;
   font-size: 32px;
   line-height: 1.5;
   font-weight: 700;
 }
 .package-top{
   position: relative;
   justify-content: center;
   max-width: 1140px;
   margin-inline: auto;
   counter-reset: number 0;
 }
 .package-img{
   position: relative;
    display: block;
    height: 493px;
    height: clamp(24.563rem, 9.178rem + 24.04vw, 30.813rem);
    max-width: var(--wrap-large);
    margin-inline: auto;
    margin-bottom: 80px;
    z-index: 3;
    object-fit: contain;
 }
 .package-content{
   position: absolute;
   background-color: var(--c-white);
   border: 1px dashed var(--c-green);
   width: 427.5px;
   border-radius: 9999px;
   min-height: 309px;
 }

 .package-content::before{
   counter-increment: number 1;
   content: counter(number,decimal-leading-zero) " ";
   display: block;
   font-family: var(--f-en);
   color: var(--c-white);
   background-color: var(--c-green);
   line-height: 100px;
   text-align: center;
   display: block;
   width: 100px;
   height: 100px;
   border-radius: 50%;
   font-size: 28px;
   mix-blend-mode: multiply;
 }
 .package-top>.package-content{
   right: 0;
   top: -82px;
 }
 .package-content:first-child{
   left: 0;
   bottom: 78px;
   min-height: 281px;
 }
 .package-content:last-child{
   right: 32px;
   bottom: -24px;
 }
 .package-content:last-child::before{
   margin-left: auto;
 }
 .package-content h3{
   text-align: center;
   font-weight: 600;
   color: var(--c-green);
   font-size: 24px;
   line-height: 1;
   margin-bottom: 21px;
   margin-top: -38px;
 }
 .package-content p{
   display: block;
   margin-inline: auto;
   width: 307.5px;
   gap: 20px;
 }
 .package-content-wrap{
   justify-content: center;
   gap: 39px;
   margin-bottom: 13px;
 }
 .package-content-wrap>div{
   width: 740px;
   display: flex;
   flex-direction: column;
 }
 .package-content-wrap h4{
   position: relative;
   display: inline-flex;
   gap: 52px;
   align-items: center;
   text-align: center;
   background-color: var(--c-white);
   border-radius: 10px;
   font-size: 20px;
   font-weight: 700;
   width: 100%;
   height: 80px;
   line-height: 1.2;
   padding: 20px 17px;
 }
 .package-content-wrap h4::before{
   content: "";
   display: block;
   background-repeat: no-repeat;
   width: 48px;
   height: 48px;
   flex-shrink: 0;
 }
 .package-content-wrap div:first-child h4::before{
   background-image: url(../images/icon-track.svg);
 }
 .package-content-wrap div:last-child h4{
   gap: 45px;
 }
 .package-content-wrap div:last-child h4::before{
   background-image: url(../images/icon-factory.svg);
 }
 .package-content-wrap h4::after{
   content: "";
   display: block;
   position: absolute;
   left: 50%;
   bottom: -10px;
   width: 0;
   height: 0;
   border-style: solid;
   border-right: 10px solid transparent;
   border-left: 10px solid transparent;
   border-top: 10px solid var(--c-white);
   border-bottom: 0;
   transform: translateX(-50%);
 }
 .package-content-wrap h4+span{
   display: block;
   font-size: 14px;
   text-align: right;
   line-height: 1.9;
 }
 .package-box{
    position: relative;
    margin: 104px auto 0;
    border-radius: 0 20px 20px 20px;
    background-color: var(--c-beige);
    counter-increment: number 1;
    padding: 40px 60px 60px;
    width: 95%;
    max-width: var(--wrap-large);
    max-width: 950px;
 }
 .package-box.flex{
   gap: 44px;
 }
 .package-box:last-child .package-box-title{
   /* margin-bottom: 41px; */
   margin-bottom: 15px;
 }
 .package-box+.package-box{
    margin-top: 124px;
 }
 .package-box::before{
    content: "Column #"counter(number,decimal-leading-zero);
    display: block;
    position: absolute;
    top: -44px;
    left: 0px;
    background-color: var(--c-beige);
    font-family: var(--f-en);
    text-align: center;
    font-size: 14px;
    line-height: 53px;
    height: 44px;
    width: 148px;
    border-radius: 20px 20px 0 0;
 }
_::-webkit-full-page-media, _:future, :root .package-box.first::before {
	content: "Column #01";
}
_::-webkit-full-page-media, _:future, :root .package-box:last-child::before {
	content: "Column #02";
}
 .cap-img{
   display: block;
   width: 280px;
   flex-shrink: 0;
 }
.package-box-title{
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 16px;
}
.package-box-title .caption{
   display: inline-block;
   font-size: 12px;
   margin-left: 12px;
   margin-top: -1px;
   vertical-align: middle;
}
.package-content-wrap img{
   margin-top: auto;
   transform: translateY(14px);
}
.btn.btn-movie{
   margin: 23px 0 0;
}
.btn.btn-movie::after{
   background-image: url(../images/icon-modal.svg);
   margin-left: 8px;
}
 @media screen and (min-width: 1023px) {
   .package{
      padding-inline: 2.5%;
   }
   .package-top{
      min-height: 573px;
   }
 }
 @media screen and (min-width: 1023px) and (max-width: 1220px){
   .package-top{
     min-height: 750px;
   }
   .package-img{
      top: 150px;
   }
   .package-top>.package-content{
      top: -60px;
   }
}
 @media screen and (max-width: 1022px) {
   .package{
      padding-top: 101px;
      padding-bottom: 100px;
      background-size: 100px;
   }
   .package-title{
      max-width: 95%;
   }
   .package-title h2{
      font-size: 16px;
      letter-spacing: -0.1em;
   }
   .package-title p{
      font-size: 52px;
      transform: translate(-4px,-1px);
   }
   .package-subtitle{
      display: inline-block;
      width: fit-content;
      font-size: 20px;
      left: auto;
      top: -153px;
      right: 39px;
   }
   .package-top{
      max-width: 390px;
      display: block;
      margin-top: 208px;
   }
   .package-img{
      width: auto;
      height: 226px;
      margin: 0;
      position: absolute;
      left: -20px;
      top: -186px;
   }
   .package-content{
      position: unset!important;
      margin: 0 auto!important;
      width: 100%;
      height: auto!important;
      min-height: 232px;
      max-width: 350px;
   }

   .package-box::before{
      font-size: 12px;
      width: 127px;
      height: 37px;
      top: -37px;
      line-height: 48px;
   }

   .package-content::before{
      font-size: 17px;
      width: 60px;
      height: 60px;
      line-height: 60px;
   }
   .package-top>.package-content::before{
      margin-left: auto;
   }
   .package-content h3{
      font-size: 18px;
      margin-top: -36px;
   }
   .package-content p{
      width: 270px;
      font-size: 15px;
      line-height: 1.7;
   }
   .package-content:first-child{
      margin-top: 20px!important;
   }
   .package-content:first-child{
      margin-top: 20px!important;
      margin-bottom: 20px!important;
      min-height: 206px;
   }
   .package-box-title{
      font-size: 22px;
      margin-bottom: 15px;
   }
   .package-box p{
      font-size: 15px;
   }
   .package-box+.package-box{
      margin-top: 76px!important;
      padding-top: 24px;
      padding-bottom: 53px;
   }
   .package-box-title .caption{
      margin-left: 0;
      transform: translateY(-10px);
   }
   .package-box:last-child .package-box-title{
      margin-bottom: 9px;
   }
   .package-content-wrap h4{
      height: 72px;
      padding: 20px 15px;
      font-size: 18px;
      gap: 28px;
   }
   .package-content-wrap h4::before{
      width: 40px;
      height: 40px;
   }
   .package-content-wrap h4+span{
      font-size: 12px;
   }
   .package-content-wrap img{
      transform: translateY(12px);
   }
   .package-content-wrap div:last-child h4{
      gap: 20px;
   }
   .package-content-wrap div:last-child img{
      transform: translateY(25px);
   }
 }
  @media screen and (max-width: 768px) {
   .package-title{
      max-width: var(--wrap-large);
   }
   .package-box{
      max-width: 350px;
      padding: 20px 20px 40px 20px;
   }
   .package-content-wrap{
      display: block;
   }
   .package-content-wrap>div{
      width: 100%;
   }
   .package-content-wrap>div:last-child{
      margin-top: 36px;
   }
   .package-box.flex{
      flex-direction: column-reverse;
      margin-top: 97px;
      gap: 24px;
   }
   .cap-img{
      width: 160px;
      margin-inline: auto;
      transform: translateX(-8px);
   }
  }
/*==================================================*
 *  [ feature ]
 *==================================================*/
 .feature{
   position: relative;
   overflow: hidden;
 }
 .feature::before{
   content: "";
   position: absolute;
   top: -20px;
   right: 56px;
   width: 760px;
   height: 901px;
   background-image: url(../images/background_italia.svg);
   background-repeat: no-repeat;
   background-size: contain;
   mix-blend-mode: multiply;
   z-index: -1;
 }
 .feature-inner{
   width: 95%;
    max-width: var(--wrap-large);
    margin-inline: auto;
    padding-top: 163px;
    margin-bottom: 161px;
 }
 .feature-title h2{
   letter-spacing: 0;
   font-size: 20px;
   transform: translate(1px,-1px);
 }
 .feature-list h3 sup{
   font-size: 16px;
   display: inline-block;
   margin-top: -1px;
 }
 .feature-title p{
    font-size: 80px;
    transform: translate(-4px,-1px);
 }
 .feature-list{
    flex-wrap: wrap;
    border-radius: 20px;
    margin-top: 40px;
    margin-bottom: 81px;
 }
 .feature-list li{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    width: 50%;
    border-top: 1px dashed currentColor;
    border-left: 1px dashed currentColor;
    padding: 22px 22px 24px;
 }
 .feature-list li:nth-child(even){
    border-right: 1px dashed currentColor;
 }
 .feature-list li:first-child{
    border-radius: 20px 0 0 0;
 }
 .feature-list li:nth-child(2){
   border-radius: 0 20px 0 0;
}
 .feature-list li:nth-last-child(-n+2){
    border-radius: 0 0 0 20px;
    border-bottom: 1px dashed currentColor;
 }
 .feature-list li:last-child{
    border-bottom: 1px dashed currentColor;
    border-right: 1px dashed currentColor;
    border-radius: 0 0 20px 0;
 }
 .feature-list h3{
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px;
 }
 .feature-list li img{
    display: block;
    width: 160px;
    aspect-ratio: 1;
    border-radius: 50%;
 }
 .feature-list li img,
 .feature-list li picture{
    flex-shrink: 0;
 }
 .feature-list li p{
   font-size: 15px;
 }

  @media screen and (max-width: 1022px) {
   .feature-inner{
      padding-top: 102px;
      margin-bottom: 121px;
   }
   .feature-title p{
      font-size: 52px;
      transform: translate(-4px,-2px);
   }
   .feature-title h2{
      font-size: 16px;
      letter-spacing: -0.1em;
   }
   .feature-list{
      display: block;
      margin-top: 21px;
      margin-bottom: 57px;
   }
   .feature-list li{
      justify-content: flex-start;
      width: 100%;
      border: 1px dashed currentColor;
      border-bottom: 0;
      gap: 17px;
      padding: 22px 17px 24px 22px;
   }
   .feature-list li:nth-child(n+5){
      border-bottom: 0;
   }
   .feature-list li:nth-last-child(-n+2),
   .feature-list li:nth-child(2){
      border-radius: 0;
   }
   .feature-list li:first-child{
      border-radius: 20px 20px 0 0;
   }
   .feature-list li:last-child{
      border-radius: 0 0 20px 20px;
      border-bottom: 1px dashed currentColor;
   }
   .feature::before{
      width: 390px;
      right: 0;
   }
   .feature-list h3{
      font-size: 20px;
      margin-bottom: 7px;
      line-height: 1.25;
   }
   .feature-list li p{
      font-size: 14px;
      line-height: 1.5;
   }
   .feature-list li img{
      width: 80px;
   }
   .feature-list h3 sup{
      font-size: 13px;
   }
  } /* */

 .logo-terrecevico,
 .logo-nintei{
   display: block;
   margin-inline: auto;
 }
 .logo-terrecevico{
   margin-bottom: 24px;
 }
 @media screen and (max-width: 1022px) {
   .logo-terrecevico{
      width: 120px;
      margin-top: 23px;
      margin-bottom: 26px;
   }
   .terre-cevico p{
      font-size: 15px;
      line-height: 1.76;
   }
 } /* */

 .banner-list{
   display: none; /* 一旦非表示 */
    gap: 20px;
    margin-bottom: 80px;
 }
 .banner-list li{
    width: calc(100% / 3);
 }
 .banner-list a{
    display: block;
    border-radius: 10px;
    background-color: #DADADB;
    height: 140px;
 }
 @media screen and (max-width: 420px) {
   .banner-list a{
      width: 291px;
      height: 110px;
      margin-inline: auto;
   }
 } /* */

 .instagram{
   position: relative;
    border-radius: 20px;
    padding: 39px 20px 58px;
    overflow: hidden;
 }
 .instagram::before{
   content: "";
   position: absolute;
   display: block;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: var(--c-beige);
   mix-blend-mode: multiply;
   z-index: -1;
 }
 .instagram-title{
    line-height: 2;
 }
 .instagram .btn{
   width: 243px;
   margin-top: 26px;
 }
 .instagram .btn::before{
   content: "";
   display: inline-block;
   vertical-align: middle;
   width: 24px;
   height: 24px;
   background-image: url(../images/logo_instagram.svg);
   background-repeat: no-repeat;
   background-size: contain;
   margin-top: -7px;
   margin-right: 7px;
   transform: translateX(-6px);
 }
 .instagram .btn::after{
   margin-left: 2px;
   transform: translateX(6px);
 }

 /* [ 仮組 ] */
 .instagram ul{
   display: flex;
   justify-content: center;
   gap: 10px;
 }
 .instagram li{
   display: block;
   background-color: #D1D1D1;
   width: 25%;
   max-width: 247px;
   height: 247px;
   aspect-ratio: 1;
 }
 .terre-cevico{
   width: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    background-color: white;
    align-items: center;
    border-radius: 20px;
    margin-bottom: 120px;
    box-shadow: 0 4px 0 rgba(0,0,0,0.1);
 }
 .terre-cevico::before{
   content: "";
   width: 100%;
   max-width: 600px;
   aspect-ratio: 600/534;
   display: block;
   background-image: url(../images/terrecevico.png);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center right;
   border-radius: 0 20px 20px 0;
}
 .terre-cevico div:first-child{
   position: relative;
   padding-left: 60px;
   width: 500px;
   flex-shrink: 0;
 }
 .terre-cevico div:first-child::after{
   content: "";
   display: block;
   position: absolute;
   top: -60px;
   right: -120px;
   width: 80px;
   height: calc(100% + 120px);
   background: linear-gradient(to right, rgb(255, 255, 255, 100%) 0, rgb(255, 255, 255, 0) 100%);
 }
.terre-cevico p{
   line-height: 1.75;
}

 @media screen and (max-width: 1022px) {
   .terre-cevico::before{
      content: "";
      width: 100%;
      aspect-ratio: 350/216;
      display: block;
      background-position: bottom center;
      border-radius: 20px 20px 0 0;
   }
   .terre-cevico{
      background-image: unset;
      flex-direction: column;
      background-position: top center;
      background-size: 100% 216px;
      margin-bottom: 80px;
   }
   .terre-cevico div:first-child{
      position: relative;
      padding: 0 20px 39px 20px;
      width: 100%;
   }
   .terre-cevico div:first-child::after{
      width: 100%;
      height: 40px;
      top: -40px;
      right: 50%;
      transform: translateX(50%);
      background: linear-gradient(to top, rgb(255, 255, 255, 100%) 0, rgb(255, 255, 255, 0) 100%);
   }
   .instagram{
      padding: 20px 20px 59px;
   }
   .instagram ul{
      flex-wrap: wrap;
      gap: 10px;
   }
   .instagram li{
      width: calc(50% - 5px);
      height: auto;
      aspect-ratio: 1;
   }
   .instagram .btn{
      width: 100%;
      margin-top: 17px;
   }
   .instagram .btn::before{
      width: 21px;
      height: 21px;
      transform: translateX(-2px);
   }
   .instagram .btn::after{
      transform: translateX(1px);
   }
 }
 @media screen and (max-width: 1022px) and (min-width: 420px) {
   .terre-cevico::before{
      background-size: cover;
      max-width: 100%;
   }
}
@media screen and (min-width: 1023px) and (max-width: 1220px){
   .terre-cevico{
      min-height: 450px;
   }
   .terre-cevico::before{
      aspect-ratio: auto;
      height: 450px;
      background-position: center;
   }
   .logo-terrecevico{
      width: 160px;
   }
   .terre-cevico div:first-child{
      padding-inline: 30px;
   }
   .terre-cevico div:first-child::after{
      height: 450px;
      top: -28px;
      right: -80px;
   }
  } /* */
.nintei{
   display: block;
   margin: 23px auto 25px;
}
 .feature .catch{
    width: fit-content;
    margin-inline: auto;
    font-size: 28px;
 }

 @media screen and (max-width: 1022px) {
   .nintei{
      margin: 22px auto 23px;
   }
 }
 @media screen and (max-width: 1022px) {
   .banner-list{
      flex-direction: column;
      gap: 11px;
      margin-bottom: 55px;
   }
   .banner-list li{
      width: 100%;
   }
 }

 .catch-footer{
   height: 318px;
 }
 .catch-footer>img{
   display: block;
   margin-inline: auto;
   margin-bottom: 61px;
 }
 .catch-footer-wrap{
   list-style: none;
   display: flex;
   justify-content: center;
 }
 .catch-footer-wrap li{
   position: relative;
   transform: translateY(50%);
   transition: .4s;
 }
 .catch-footer-wrap img{
   display: block;
   width: 180px;
 }
 .catch-footer-wrap li:first-child{ margin-right: -20px; z-index: 1; }
 .catch-footer-wrap li:nth-child(2){ margin-right: -20px; z-index: 2; transition-delay: .05s; }
 .catch-footer-wrap li:nth-child(3){ z-index: 3; transition-delay: .1s; }
 .catch-footer-wrap li:nth-child(4){ margin-left: -20px; z-index: 4; transition-delay: .15s; }
 .catch-footer-wrap li:last-child{ margin-left: -20px; z-index: 5; transition-delay: .2s;}

 .active.catch-footer-wrap li{
   transform: translateY(0%);
 }

  @media screen and (max-width: 1022px) {
   .catch-footer{
      height: 200px;
   }
   .catch-footer>img{
      width: 291px;
      margin-bottom: 41px;
   }
   .catch-footer-wrap{
      min-width: 420px;
      margin-inline: auto;
      transform: translateX(-14px);
   }
   .catch-footer-wrap li{
      width: 100px;
      flex-shrink: 0;
   }
   .catch-footer-wrap img{
      width: 100px;
   }
   .catch-footer-wrap li:first-child{ margin-right: -20px;}
   .catch-footer-wrap li:nth-child(2){ margin-right: -20px;}
   .catch-footer-wrap li:nth-child(3){ z-index: 3; transition-delay: .1s; }
   .catch-footer-wrap li:nth-child(4){ margin-left: -22px;}
   .catch-footer-wrap li:last-child{ margin-left: -20px;}
  }