:root {
  --font-NotoSansJP: "Noto Sans JP", sans-serif;
  --font-DIN: "DIN", sans-serif;
  --font-GaramondPremrPro: "GaramondPremrPro", sans-serif;
  --font-Fontspring: "Fontspring", sans-serif;
  --color-main: #C12D2F;
  --color-bg: #F1F0E7;
  --color-white: #fff;

}
@font-face {
  font-family: 'DIN';
  src: url(../font/DIN-light.otf) format(opentype);
}
@font-face {
src: url(../font/Fontspring-DEMO-theseasons-bd.otf) format(opentype);
font-family: "Fontspring";
}
@font-face {
src: url(../font/GaramondPremrPro.otf) format(opentype);
font-family: "GaramondPremrPro";
}
@font-face {
src: url(../font/GaramondPremrPro.otf) format(opentype);
font-family: "Garamond";
}
*, *::before, *::after {
  box-sizing: border-box;
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
  color: #333333;
}
ul[role=list], ol[role=list] {
  list-style: none;
}
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}
img, picture {
  max-width: 100%;
  height: auto;
  display: block;
}
input, button, textarea, select {
  font: inherit;
}
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body, a, p {
  font-style: normal;
  text-decoration: none;
  line-height: 1;
}
body {
  position: relative;
  overflow-anchor: none;
}
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
.image{
  width: 100%;
}
/*animation*/
.fade{
  opacity: 0;
}
.fade.active{
  animation-name: fade;
  animation-duration: 1.6s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.6s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadein{
  opacity: 0;
  translate: 0 10%;
  filter: blur(2px);
}
.fadein.active{
  animation-name: fadein;
  animation-duration: 1.8s;
  animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadein {
  0% {
    opacity: 0;
    translate: 0 10%;
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }
}
.fadeout{
  opacity: 1;
}
.fadeout.active{
  animation-name: fadeout;
  animation-duration: 0.3s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.clippath-top{
  opacity: 0;
}
.clippath-top.active{
  animation-name: clippath-top;
  animation-duration: 1.6s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes clippath-top {
  0% {
    opacity: 1;
    clip-path: inset(0 0 100% 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0);
  }
}
.clippath-lefttop{
  -webkit-clip-path: inset(0 100% 100% 0);
  clip-path: inset(0 100% 100% 0);
  scale: 1.1;
}
.clippath-lefttop.active{
  animation-name: clippath-lefttop;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes clippath-lefttop {
  0% {
    -webkit-clip-path: inset(0 100% 100% 0);
    clip-path: inset(0 100% 100% 0);
    scale: 1.1;
  }
  100% {
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
    scale: 1;
  }
}
.clippath-left{
  opacity: 0;
}
.clippath-left.active{
  animation-name: clippath-left;
  animation-duration: 1.6s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.6s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes clippath-left {
  0% {
    opacity: 1;
    clip-path: inset(0 100% 0 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0);
  }
}
.clippath-right{
  opacity: 0;
}
.clippath-right.active{
  animation-name: clippath-right;
  animation-duration: 1.6s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.6s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes clippath-right {
  0% {
    opacity: 1;
    clip-path: inset(0 0 0 100%);
  }
  100% {
    opacity: 1;
    clip-path: inset(0);
  }
}
.slide-up{
  opacity: 0;
  transform: translateY(1000%);
}
.slide-up.active{
  animation-name: slide-up;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes slide-up {
  0% {
    opacity: 1;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.slide-left{
  opacity: 0;
}
.slide-left.active{
  animation-name: slide-left;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes slide-left {
  0% {
    opacity: 0;
    transform: translateX(-10%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.slide-right{
  opacity: 0;
}
.slide-right.active{
  animation-name: slide-right;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes slide-right {
  0% {
    opacity: 0;
    transform: translateX(10%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.zoomup{
  opacity: 0;
  scale: 0.8;
}
.zoomup.active{
  animation-name: zoomup;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes zoomup {
  0% {
    opacity: 0;
    scale: 0.8;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
.zoomin{
  opacity: 0;
  scale: 1.2;
}
.zoomin.active{
  animation-name: zoomin;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes zoomin {
  0% {
    opacity: 1;
    scale: 1.2;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
.rotate45{
  opacity: 0;
  rotate: -45deg;
}
.rotate45.active{
  animation-name: rotate45;
  animation-duration: 1.4s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.8s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  transform-origin: left top;
}
@keyframes rotate45 {
  0% {
    opacity: 1;
    rotate: -45deg;
  }
  100% {
    opacity: 1;
    rotate: 0deg;
  }
}
.grayscale{
  filter: grayscale(1);
}
.grayscale.active{
  animation-name: grayscale;
  animation-duration: 1.6s;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  transform-origin: left top;
}
@keyframes grayscale {
  0% {
    filter: grayscale(1);
  }
  100% {
    filter: grayscale(0);
  }
}

/*link*/
.link {
  width: calc(246 / 1280 * 100vw);
}
.link-other{
  margin-top: 8%;
  padding-top: 8%;
  border-top: 1px solid #333;
}
.link .cart{
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.3s;
}
.link .cart:not(:last-child) {
  margin-bottom: 4%;
}
.link .cart:hover{
  opacity: 0.7;
}
.link .carttitle {
  font-family: var(--font-NotoSansJP);
  font-size: calc(14 / 1280 * 100vw);
  letter-spacing: 0.04em;
}
.link .carttitle span {
  display: inline-block;
}
.link .cartprice {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-family: var(--font-NotoSansJP);
  font-size: calc(14 / 1280 * 100vw);
}
.link .cartprice-yen {
  position: relative;
  padding-left: 1.5em;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.link .cartprice-yen.size-l::before,
.link .cartprice-yen.size-s::before{
  display: block;
  width: 1em;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: 0 auto;
}
.link._black .cartprice-yen.size-l::before{
  content: url(../img/sizeL-black.svg);
}
.link._black .cartprice-yen.size-s::before{
  content: url(../img/sizeS-black.svg);
}
.link._white .cartprice-yen.size-l::before{
  content: url(../img/sizeL-white.svg);
}
.link._white .cartprice-yen.size-s::before{
  content: url(../img/sizeS-white.svg);
}
.link .cartprice-yen.price-space{
  padding-left: 2.1em;
}
.link .cartprice-yen .tax{
  margin-left: 0.5em;
  font-size: calc(9 / 1280 * 100vw);
}
.link .cartprice-btn {
  position: relative;
  display: inline-block;
  margin-left: 1em;
  font-family: var(--font-DIN);
  font-size: calc(12 / 1280 * 100vw);
  line-height: 1;
}
.link .cartprice-btn::after{
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #333;
  position: absolute;
  bottom: -6%;
  left: 0;
}
.link._white .cartprice-btn::after{
  background: var(--color-white);
}
.link._white .link-other,
.link._white .carttitle,
.link._white .cartprice,
.link._white .cartprice-yen,
.link.link._white .cartprice-btn{
  color: #fff;
  border-color: #fff;
}
  
/* 共通*/
.pc {
  display: block;
}
.sp {
  display: none;
}
.slide-box {
  overflow: hidden;
}
.flex-box{
  display: flex;
}
.flex-reverse{
  flex-direction: row-reverse;
}
.white{
  color: var(--color-white);
}
.orange{
  color: var(--color-main);
}
/*header*/
.header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1280 / 718;
}
.header .inner{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.header .bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.header .photo{
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: calc(1256 / 1280 * 100%);
}
.header .photo .image{
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-delay: 1.8s;
}
.header .title01{
  position: absolute;
  top: 9%;
  right: 4.5%;
  width: calc(129.418 / 1280 * 100%);
}
.header .title01 .image{
  animation-duration: 1s;
  animation-delay: 0.8s;
}
.header .title02{
  position: absolute;
  top: 41%;
  left: 15%;
  width: calc(298.9384 / 1280 * 100%);
}
.header .title02 .image{
  animation-delay: 2.4s;
}
.header .title03{
  position: absolute;
  top: 39%;
  left: 50%;
  translate: -50% 0;
  width: calc(783 / 1280 * 100%);
}
.header .title03 .image{
  animation-delay: 2.8s;
}
.header .title04{
  position: absolute;
  top: 59.5%;
  left: 58%;
  width: calc(311/ 1280 * 100%);
}
.header .title04 .image{
  animation-duration: 0.8s;
  animation-delay: 3.6s;
}
.header .logo {
  position: absolute;
  top: 6.2%;
  left: 3.8%;
  width: calc(68 / 1280 * 100%);
}
/*lead*/
.lead{
  position: relative;
  padding: 6% 0 0;
  background: var(--color-main);
  z-index: 2;
}
.lead .inner{
  position: relative;
  left: 1%;
  justify-content: space-between;
  width: calc(717.1704 / 1280 * 100%);
  margin-inline: auto;
}
.lead .title-box{
  display: flex;
  flex-direction: row-reverse;
}
.lead .title{
  font-family: var(--font-Fontspring);
  font-size: calc(72.2364 / 1280 * 100vw);
  letter-spacing: 0.1em;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  animation-delay: 0.1s;
  animation-duration: 1s;
}
.lead .title:first-child{
  margin-left: -0.2em;
}
.lead .text{
  margin-bottom: 2em;
  font-family: var(--font-NotoSansJP);
  font-size: calc(22 / 1280 * 100vw);
  line-height: calc(41 / 22);
  letter-spacing: 0.12em;
  animation-delay: 0.6s;
}
.lead .text:first-child{
  margin-top: -0.4em;
}
/*nav-wrapper*/
.nav-wrapper {
  position: relative;
  background: var(--color-main);
  z-index: 2;
}
.nav-wrapper .nav{
  position: relative;
  width: 100%;
  margin-inline: auto;
}
.nav-wrapper .slick-list{
  padding: 6% 0 4%;
}
.nav-wrapper .nav .item{
  position: relative;
}
.nav-wrapper .nav .item .title{
  position: absolute;
  top: 2%;
  left: 1%;
}
.nav-wrapper .nav .item._01 .title{
  width: calc(45 / 426.6667 * 100%);
}
.nav-wrapper .nav .item._02 .title{
  width: calc(38 / 426.6667 * 100%);
}
.nav-wrapper .nav .item._03 .title{
  width: calc(39 / 426.6667 * 100%);
}
.nav-wrapper .nav .item._04 .title{
  width: calc(39 / 426.6667 * 100%);
}
.nav-wrapper .nav .item._05 .title{
  width: calc(45 / 426.6667 * 100%);
}
.nav-wrapper .nav .item._06 .title{
  width: calc(43 / 426.6667 * 100%);
}
.nav-wrapper .nav .item{
  rotate: 0deg;
  transition: 0.3s;
}
.nav-wrapper .nav .item:hover{
  rotate: -5deg;
  z-index: 2;
}
/* item-box---------------------- */
.item-box{
  position: relative;
  overflow: hidden;
}
.item-box .text{
  font-family: var(--font-NotoSansJP);
  font-size: calc(16 / 1280 * 100vw);
  font-weight: 200;
  line-height: 2;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.item-box .effect-box,
.item-box .fade-box{
  position: relative;
  overflow: hidden;
  background: #fff;
}
.item-box .effect-box .image,
.item-box .fade-box .image{
  position: relative;
}
.item-box .effect-box .image._01,
.item-box .fade-box .image._01{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.item-box .effect-box .image._01.active{
  animation-delay: 4s;
}
.item-box .effect-box .image._02{
  z-index: 1;
}
.slide-effect.active{
  animation-name: slide-effect;
  animation-duration: 8s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: inherit;
}
@keyframes slide-effect {
  0% {
    clip-path: inset(0 100% 0 0);
    scale: 1.1;
    z-index: 2;
  }
  50%{
    clip-path: inset(0);
  }
  100% {
    clip-path: inset(0);
    scale: 1;
    z-index: 1;
  }
}
.fade-effect.active{
  animation: fade-effect 6s infinite;
}
.item-box .fade-effect._02.active{
  animation-delay: 3s;
}
.item-box .fade-effect._02{
  opacity: 0;
}
@keyframes fade-effect {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
/*item01----------------------*/
.item01{
  background: var(--color-bg);
}
.item01 .photo01{
  width: calc(640 / 1280 * 100%);
  animation-delay: 0.1s;
}
.item01 .itemname{
  width: calc(78.1992 / 1280 * 100%);
  margin: 7% 3% 0 1%;
}
.item01 .text-box{
  width: calc(359.2402 / 1280 * 100%);
  margin-top: 7%;
}
.item01 .text{
  margin-top: 9%;
}
.item01 .photo02{
  width: calc(350 / 359.2402 * 100%);
  margin-top: 12%;
}
.item01 .photo02 .image{
  animation-duration: 1.2s;
}
.item01 .link{
  margin-top: 12%;
}
/*item02----------------------*/
.item02 .main-box{
  position: relative;
  width: 100%;
}
.item02 .photo01{
  position: relative;
  width: 100%;
}
.item02 .itemname{
  position: absolute;
  top: 14%;
  left: 7%;
  width: calc(392.4014 / 1280 * 100%);
}
.item02 .itemname .image{
  animation-delay: 1s;
}
.item02 .title{
  position: absolute;
  top: 30%;
  left: 11%;
  width: calc(332 / 1280 * 100%);
}
.item02 .title .image{
  animation-delay: 1s;
}
.item02 .text{
  position: absolute;
  top: 36%;
  left: 11%;
  animation-delay: 1s;
}
.item02 .photo-box{
  position: relative;
}
.item02 .photo02 .image{
  animation-delay: 0.6s;
}
.item02 .photo03 .image{
  animation-delay: 1.2s;
}
.item02 .photo04 .image{
  animation-delay: 1.8s;
}
.item02 .link{
  bottom: 7%;
  right: 9%;
  position: absolute;
}
/*item03----------------------*/
.item03{
  background: var(--color-main);
}
.item03 .main-box{
  width: calc(640 / 1280 * 100%);
}
.item03 .itemname{
  width: calc(59.1212 / 1280 * 100%);
  margin: 6% 4% 0;
}
.item03 .title{
  width: calc(382.5918 / 640 * 100%);
  margin: 12% -14% 0 auto;
}
.item03 .text{
  margin: 3% -15% 0 auto;
  text-align: right;
}
.item03 .link{
  margin: 10% -14% 0 auto;
}
.item03 .photo-box{
  flex-direction: column;
  width: calc(360 / 1280 * 100%);
}
/*item04----------------------*/
.item04 > .flex-box{
  justify-content: space-between;
}
.item04 .main-box{
  width: calc(550 / 1280 * 100%);
}
.item04 .link{
  margin: 6% 0 0 auto;
}
.item04 .photo03{
  width: calc(360 / 550 * 100%);
  margin: 18% 0 18% auto;
}
.item04 .title-box{
  width: calc(78.4863 / 1280 * 100%);
  margin-top: 7%;
}
.item04 .title{
  width: calc(26.9072 / 78.4863 * 100%);
  margin: 8% 0 0 auto;
}
.item04 .text{
  margin: 100% 0 0 20%;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: upright;
}
.item04 .itemname-box{
  width: calc(550 / 1280 * 100%);
  margin-top: 23%;
}
.item04 .itemname{
  width: calc(498.8867/ 550 * 100%);
}
.item04 .photo02{
  margin-top: 10%;
  animation-delay: 0.1s;
}
.item04 .photo02 .image{
  animation-delay: 0.1s;
}
/*item05----------------------*/
.item05{
  background: var(--color-main);
}
.item05 .main-box{
  position: relative;
  width: 100%;
}
.item05 .photo01{
  width: 100%;
}
.item05 .photo01 .image{
  animation-duration: 4s;
  animation-delay: 0.1s;
}
.item05 .itemname{
  position: absolute;
  top: 49%;
  left: 14%;
  width: calc(425.1592 / 1280 * 100%);
}
.item05 .itemname .image{
  animation-delay: 0.8s;
}
.item05 .title-box{
  position: relative;
  right: 4.5%;
  justify-content: center;
  align-items: center;
  padding: 1% 0;
}
.item05 .title{
  width: calc(332 / 1280 * 100%);
  margin-right: 6%;
}
.item05 .photo-box{
  position: relative;
}
.item05 .photo02 .image{
  animation-duration: 1s;
}
.item05 .link-box{
  padding: 1% 0;
  overflow: hidden;
}
.item05 .link{
  width: calc(661.8672 / 1280 * 100%);
  margin-left: 9%;
}
.item05 .link-main{
  justify-content: space-between;
  align-items: center;
}
.item05 .link .cart:not(:last-child){
  margin-bottom: 0;
}
/*item06----------------------*/
.item06{
  background: var(--color-bg);
}
.item06 > .flex-box{
  justify-content: space-between;
}
.item06 .main-box{
  width: calc(640 / 1280 * 100%);
}
.item06 .itemname{
  width: calc(72.1538 / 1280 * 100%);
  margin: 7% 4% 0;
}
.item06 .title-box{
  position: relative;
  right: 24%;
  align-items: flex-end;
}
.item06 .title{
  width: 100%;
  margin: 24% auto 0 0;
}
.item06 .text{
  margin: 6% 0 0 auto;
}
.item06 .link{
  margin: 12% auto 1% 10%;
}
.item06 .photo-box{
  flex-direction: column;
  width: calc(440 / 1280 * 100%);
}
/* pickup */
.pickup .title{
  margin-top: 5%;
  text-align: center;
  font-family: var(--font-Fontspring);
  font-size: calc(12 / 375 * 100vw);
  letter-spacing: 0.1em;
}
.pickup .photo{
  width: calc(557 / 1280 * 100%);
  margin: 1.5% auto 0;
}
/*banner-staff*/
.banner-staff {
  margin: 4% auto 0;
}
.banner-staff .text{
  text-align: center;
  font-family: 'Garamond', serif;
  font-size: calc(14 / 1280 * 100vw);
  line-height: calc(25 / 14);
  letter-spacing: 0.03em;
}
/*banner*/
.banner {
  width: calc(603 / 1280 * 100%);
  margin: 4% auto 0;
}
.banner-item {
  display: block;
  margin-top: 3%;
  border: 1px solid #333;
  transition: 0.6s ease-in-out;
}
.banner-item:hover {
  border: 1px solid #000;
}
/*footer*/
.footer {
  padding-bottom: 2%;
  text-align: center;
}
.footer-sns {
  display: block;
  width: calc(30 / 1280 * 100%);
  min-width: 30px;
  margin: 4% auto 0;
}
.footer-logo {
  display: block;
  width: calc(102 / 1280 * 100%);
  margin: 3% auto 0;
}
.footer-logo .image{
  width: 100%;
}
.footer-copyright {
  font-family: "Helvetica", serif;
  font-size: calc(8 / 1280 * 100vw);
  letter-spacing: 0.02em;
  margin: 34px 0 0;
}
/*stepnav*/
.stepnav{
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: calc(70 / 1280 * 100vw);
  z-index: 9999;
}
.stepnav.fade{
  animation-duration: 0.1s;
  animation-delay: 0.1s;
}
.stepnav .title{
  text-align: center;
  font-family: var(--font-GaramondPremrPro);
  font-size: calc(14 / 1280 * 100vw);
  text-transform: uppercase;
}
.stepnav .list {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.stepnav .list .item{
  margin: 3% auto 20%;
}
.stepnav .list .item a{
  position: relative;
  text-align: center;
  color: #333;
  font-family: var(--font-GaramondPremrPro);
  font-size: calc(33 / 1280 * 100vw);
  letter-spacing: 0.06em;
}
.stepnav .list a::after{
  content: "";
  display: block;
  width: 0%;
  height: 1px;
  background: #333;
  position: absolute;
  bottom: 6%;
  left: 0;
  transition: 0.6s;
}
.stepnav .list a.current::after{
  width: 100%;
}
.stepnav .list .number{
  margin-inline: auto;
  transition: 0.1s ease;
}
/*pagetop*/
.pagetop {
  position: fixed;
  right: 1vw;
  bottom: 30px;
  width: calc(35 / 1280 * 100%);
  z-index: 99;
}
.pagetop .image{
  width: 100%;
}
/*footnav*/
.footnav {
  display: none;
}
.footlist {
  display: flex;
  align-items: flex-end;
}

@media (max-width: 768px) {
  /* link------------------------ */
  .link,
  .item05 .link{
    width: calc(283 / 375 * 100vw);
    margin-top: 6%;
  }
  .link .carttitle {
    font-size: calc(16 / 375 * 100vw);
  }
  .link .cartprice,
  .link .cartprice-yen-size{
    font-size: calc(16 / 375 * 100vw);
  }
  .link .cartprice-yen.size-l::before, .link .cartprice-yen.size-s::before{
    width: 3.8vw;
  }
  .link .cartprice-yen .tax{
    font-size: calc(10 / 375 * 100vw);
  }
  .link .cartprice-btn {
    margin-left: 1em;
    font-size: calc(16.1 / 375 * 100vw);
  }
  .link .cartprice-btn::after{
    bottom: -9%;
  }
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  /* アニメーション */
  .fade.active{
    animation-delay: 0.1s;
  }
  .clippath-lefttop{
    scale: 1.2;
  }
  @keyframes clippath-lefttop {
    0% {
      -webkit-clip-path: inset(0 100% 100% 0);
      clip-path: inset(0 100% 100% 0);
      scale: 1.2;
    }
    100% {
      -webkit-clip-path: inset(0);
      clip-path: inset(0);
      scale: 1;
    }
  }
  .slide-effect.active{
    animation-duration: 6s;
  }
  .item-box .effect-box .image._01.active{
    animation-delay: 3s;
  }
  /* header------------------------ */
.header{
    height: 100vh;
    aspect-ratio: inherit;
    object-fit: cover;
  }
  .header .photo{
    width: calc(359 / 375 * 100%);
  }
  .header .photo .image{
    animation-delay: 1s;
  }
  .header .bg{
    width: auto;
    height: 100vh;
    /* object-fit: cover; */
  }
  .header .bg .image{
    width: 100%;
    height: 100vh;
    object-fit: cover;
  }
  .header .title01{
    top: auto;
    bottom: 12vh;
    left: 51%;
    translate: -50% 0;
    width: calc(578 / 375 * 50%);
  }
  .header .title01 .image{
    animation-duration: 1s;
    animation-delay: 2s;
  }
  .header .title02{
    top: auto;
    bottom: 45vh;
    left: 11.5%;
    width: calc(370 / 375 * 50%);
  }
  .header .title03{
    top: auto;
    bottom: 36vh;
    left: 50%;
    translate: -50% 0;
    width: calc(816 / 375 * 50%);
  }
  .header .title03 .image{
    animation-delay: 2s;
  }
  .header .title04{
    top: auto;
    bottom: 33vh;
    left: 50%;
    translate: -50% 0;
    width: calc(496 / 375 * 50%);
  }
  /* lead */
  .lead{
    padding: 12% 0 0;
  }
  .lead .logo{
    position: absolute;
    top: 8%;
    left: 9%;
    width: calc(66 / 375 * 100%);
  }
  .lead .inner{
    left: auto;
    flex-direction: column;
    width: 100%;
  }
  .lead .title-box{
    margin-right: 12%;
  }
  .lead .title{
    font-size: calc(55.4695 / 375 * 100vw);
  }
  .lead .title:first-child{
    margin-left: -0.1em;
  }
  .lead .text-box{
    position: relative;
    left: 0.2em;
    width: fit-content;
    margin: 16% auto 0;
  }
  .lead .text{
    font-size: calc(16 / 375 * 100vw);
    line-height: calc(30 / 16);
    letter-spacing: 0;
    animation-delay: 0s;
  }
  .lead .text:last-child{
    margin-bottom: 0;
  }
  /*nav-wrapper*/
  .nav-wrapper{
    padding-bottom: 4%;
  }
  .nav-wrapper .nav .item .title{
    left: 2%;
  }
  .nav-wrapper .nav .item._01 .title{
    width: calc(45 / 187.5 * 66%);
  }
  .nav-wrapper .nav .item._02 .title{
    width: calc(38 / 187.5 * 66%);
  }
  .nav-wrapper .nav .item._03 .title{
    width: calc(39 / 187.5 * 66%);
  }
  .nav-wrapper .nav .item._04 .title{
    width: calc(39 / 187.5 * 66%);
  }
  .nav-wrapper .nav .item._05 .title{
    width: calc(45 / 187.5 * 66%);
  }
  .nav-wrapper .nav .item._06 .title{
    width: calc(43 / 187.5 * 66%);
  }
  /* item-box---------------- */
  .item-box .text{
    font-size: calc(16/ 375 * 100vw);
    letter-spacing: 0.02em;
  }
  /* stcky-scroll */
  .scroll-container {
    position: relative; 
  }
  .sticky-element {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }
  .image-stack {
    position: relative;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
  }  
  .image-stack img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  .image-stack picture:not(:first-child) {
    opacity: 0;
  }
  /* item01------------------------ */
  .item01{
    padding-bottom: 16%;
  }
  .item01 > .flex-box{
    position: relative;
    flex-direction: column;
  }
  .item01 .photo01{
    width: 100%;
  }
  .item01 .itemname{
    position: absolute;
    top: 43.2%;
    left: 2%;
    width: calc(49.9619 / 375 * 100%);
    margin: auto;
  }
  .item01 .text-box{
    width: calc(290 / 375 * 100%);
    margin: 12% 0 0 auto;
  }
  .item01 .title{
    width: calc(195 / 290 * 100%);
  }
  .item01 .photo02{
    width: 100%;
    margin-top: 14%;
  }
  .item01 .photo02 .image{
    animation-duration: 1.4s;
  }
  .item01 .link{
    position: relative;
    right: 8%;
  }
  /* item02------------------------ */
  .item02{
    padding-bottom: 16%;
  }
  .item02 .photo01{
    animation-delay: 0s;
  }
  .item02 .itemname{
    top: 59%;
    left: 8%;
    width: calc(250.7012 / 375 * 100%);
  }
  .item02 .itemname .image,
  .item02 .title .image,
  .item02 .text{
    animation-delay: 0s;
  }
  .item02 .title{
    top: 70%;
    left: 7%;
    width: calc(295.4912 / 375 * 100%);
  }
  .item02 .text{
    top: 77%;
    left: 7%;
  }
  .item02 .photo-box{
    flex-direction: column;
    width: calc(331 / 375 * 100%);
    margin: 6% auto 0;
  }
  .item02 .photo02 .image,
  .item02 .photo03 .image,
  .item02 .photo04 .image{
    animation-delay: 0s;
  }
  .item02 .link{
    right: auto;
    bottom: auto;
    position: relative;
    margin-left: 2%;
  }
  /* item03------------------------ */
  .item03{
    padding: 5% 0 16%;
  }
  .item03 > .flex-box{
    position: relative;
    flex-direction: column;
  }
  .item03 .main-box{
    width: 100%;
  }
  .item03 .photo01 .clippath-right.active{
    animation-delay: 0s;
  }
  .item03 .itemname{
    position: absolute;
    top: 0.8%;
    left: 5%;
    width: calc(37.7731 / 375 * 100%);
    margin: auto;
  }
  .item03 .photo-box {
    width: 100%;
    margin: 12% 6% 0 auto;
  }
  .item03 .text-box{
    width: calc(290 / 375 * 100%);
    margin: 16% 0 0 auto;
  }
  .item03 .title{
    width: calc(195 / 290 * 100%);
    margin: calc(-100vh + 109%) 6% 0 auto;
  }
  .item03 .text{
    margin: 6% 6% 0 auto;
  }
  .item03 .photo02{
    width: 100%;
    margin-top: 14%;
  }
  .item03 .link{
    position: relative;
    right: auto;
    margin-right: 8%;
  }
  .item03 .image-stack{
    width: calc(270 / 375 * 100%);
    height: 100%;
    aspect-ratio: 270 / 378;
    margin: 0 6% 0 auto;
  }
  /* item04------------------------ */
  .item04{
    padding-bottom: 6%;
  }
  .item04 > .flex-box{
    flex-direction: column;
  }
  .item04 .main-box{
    display: contents;
  }
  .item04 .photo01{
    order: 1;
  }
  .item04 .title-box{
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    margin-top: 10%;
    order: 2;
  }
  .item04 .title{
    width: calc(24.9863 / 375 * 100%);
    margin: 0 12% 0 6%;
  }
  .item04 .text{
    margin: 0 0 0 auto;
  }
  .item04 .itemname-box{
    display: contents;
  }
  .item04 .itemname{
    width: calc(159.897 / 375 * 100%);
    margin: -22% auto 0 8%;
    order: 3;
  }
  .item04 .link{
    margin: 13% 0 0 8%;
    order: 4;
  }
  .item04 .photo02{
    order: 5;
  }
  .item04 .photo03{
    width: calc(331 / 375 * 100%);
    margin: 6% auto 0;
    order: 6;
  }
  /* item05------------------------ */
  .item05{
    padding: 5% 0 12%;
  }
  .item05 .link-main{
    display: block;
  }
  .item05 > .flex-box{
    position: relative;
    right: auto;
    flex-direction: column;
    justify-content: inherit;
    align-items: inherit;
    padding: 0;
  }
  .item05 .photo01 .image{
    animation-duration: 2s;
  }
  .item05 .itemname{
    position: relative;
    top: auto;
    left: auto;
    width: calc(271.6299 / 375 * 100%);
    margin: 12% auto 0 8%;
  }
  .item05 .itemname .image{
    animation-duration: 0s;
    opacity: 1;
  }
  .item05 .title{
    width: calc(308 / 375 * 100%);
    margin: 10% auto 0 8%;
  }
  .item05 .text{
    margin: 6% auto 0 8%;
  }
  .item05 .photo-box{
    width: calc(331 / 375 * 100%);
    margin: 8% auto 0;
  }
  .item05 .link-box{
    padding: 0;
    overflow: initial;
  }
  .item05 .link{
    margin: calc(-100vh + 118%) auto 0 8%;
  }
  .item05 .link .cart:not(:last-child){
    margin-bottom: 4%;
  }
  .item05 .image-stack{
    width: 100%;
    height: 100%;
    aspect-ratio: 270 / 378;
    margin: 0 6% 0 auto;
  }
  /* item06------------------------ */
  .item06{
    padding-bottom: 16%;
  }
  .item06 > .flex-box{
    position: relative;
    flex-direction: column;
  }
  .item06 .main-box{
    display: contents;
    width: 100%;
  }
  .item06 .photo01{
    order: 1;
  }
  .item06 .photo-box{
    width: calc(270 / 375 * 100%);
    margin: 16% 6% 0 auto;
    order: 2;
  }
  .item06 .photo02{
    position: relative;
    margin-bottom: -1px;
    z-index: 2;
  }
  .item06 .itemname{
    position: absolute;
    top: 31.5%;
    left: 3%;
    width: calc(46.0996 / 375 * 100%);
    margin: 0;
  }
  .item06 .title-box{
    right: auto;
    flex-direction: column;
    align-items: flex-start;
    margin: 14% auto 0 8%;
    order: 3;
  }
  .item06 .title{
    width: calc(170 / 375 * 100vw);
    margin-top: 0;
  }
  .item06 .link{
    margin: 16% auto 0 0;
  }
    /* pickup */
    .pickup{
      padding-top: 6%;
    }
    .pickup .title{
      font-size: calc(28 / 375 * 100vw);
    }
    .pickup .photo{
      width: calc(320 / 375 * 100%);
      margin-top: 3%;
    }
  /* bottom-block------------------ */
  .banner-staff{
    margin-top: 14%;
  }
  .banner-staff .text{
    font-size: calc(14 / 375 * 100vw);
  }
  .banner {
    width: 80%;
    margin-top: 12%;
  }
  .banner .title{
    width: calc(368 / 1280 * 100%);
  }
  .banner-item {
    margin-top: 6%;
  }
  .footer {
    padding-bottom: 18%;
  }
  .footer-sns {
    width: calc(35.1563 / 375 * 100%);
    margin-top: 10%;
  }
  .footer-logo {
    width: calc(119.5312 / 375 * 100%);
    margin-top: 6%;
  }
  .footer-copyright{
    font-size: calc(8.2032 / 375 * 100vw);
  }
  /* stepnav */
  .stepnav{
    top: auto;
    bottom: 0;
    right: auto;
    left: 0;
    width: 100%;
    transform: translateY(0);
  }
  .stepnav .inner{
    background: rgb(255 255 255 / 0.7);
  }
  .stepnav .list{
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }
  .stepnav .list .item{
    margin: 0 auto 0;
  }
  .stepnav .list .title{
    margin: 0 0 0 2%;
  }
  .stepnav .list .text{
    font-size: calc(14 / 375 * 100vw);
  }
  .stepnav .list .item a{
    font-size: calc(26 / 375 * 100vw);
  }
  .stepnav .sp-pagetop{
    width: calc(46.875 / 375 * 100%);
  }
}