:root {
  --font-ShipporiMincho: "Shippori Mincho", serif;
  --font-inter: "Inter", sans-serif;
  --color-wool: #FFD5C8;
  --color-down: #433A2A;
  --color-wool-bg: #af828c;
  --color-down-bg: #6e928e;
}

*, *::before, *::after {
  box-sizing: border-box;
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
  color: #fff;
  font-family: var(--font-ShipporiMincho);
  font-weight: normal;
}
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;
  -webkit-font-smoothing: antialiased;
}
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.2s;
  animation-timing-function: ease-out;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.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-bottom{
  opacity: 0;
}
.clippath-bottom.active{
  animation-name: clippath-bottom;
  animation-duration: 1.6s;
  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;
}
@keyframes clippath-bottom {
  0% {
    opacity: 1;
    clip-path: inset(100% 0 0 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0);
  }
}
.clippath-left{
  opacity: 0;
}
.clippath-left.active{
  animation-name: clippath-left;
  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;
  opacity: 0;
}
@keyframes clippath-left {
  0% {
    opacity: 0;
    filter: blur(6px);
    clip-path: inset(0 100% 0 0);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    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.2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes clippath-right {
  0% {
    opacity: 0;
    filter: blur(6px);
    clip-path: inset(0 0 0 100%);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    clip-path: inset(0);
  }
}
.slide-up{
  opacity: 0;
}
.slide-up.active{
  animation-name: slide-up;
  animation-duration: 1.2s;
  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: 0;
    translate: 0 100%;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
.slide-right{
  opacity: 0;
}
.slide-right.active{
  animation-name: slide-right;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes slide-right {
  0% {
    opacity: 0;
    transform: translateX(30%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.slide-left{
  opacity: 0;
}
.slide-left.active{
  animation-name: slide-left;
  animation-duration: 1.2s;
  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(-30%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.zoomin{
  opacity: 0;
  scale: 1.3;
}
.zoomin.active{
  animation-name: zoomin;
  animation-duration: 4s;
  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1);
  animation-delay: 0.1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes zoomin {
  0% {
    opacity: 0;
    scale: 1.3;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
.zoomin02{
  opacity: 0;
  scale: 1.3;
}
.zoomin02.active{
  animation-name: zoomin02;
  animation-duration: 4s;
  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1);
  animation-delay: 0.1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes zoomin02 {
  0% {
    opacity: 0;
    scale: 1.1;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
/*link*/
.link {
  width: calc(315.4239 / 1280 * 100vw);
  margin-inline: auto;
}
.link .cart {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.link .cart:not(:last-child) {
  margin-bottom: 0.5em;
}
.link .cart__title {
  font-family: var(--font-ShipporiMincho);
  font-size: calc(15 / 1280 * 100vw);
  letter-spacing: 0.01rem;
}
.link .cart__title span {
  display: inline-block;
}
.link .cart__price {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
  font-size: calc(15 / 1280 * 100vw);
}
.link .cart__price--yen {
  position: relative;
  padding-left: 1.25em;
  letter-spacing: 0.02rem;
  white-space: nowrap;
}
.link .cart__price--yen.size-l::before,
.link .cart__price--yen.size-s::before{
  display: block;
  width: 1em;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: 0 auto;
}
.link .cart__price--yen.size-l::before{
  content: url(../img/size-l.svg);
}
.link .cart__price--yen.size-s::before{
  content: url(../img/size-s.svg);
}
.link .cart__price--yen.price-space{
  padding-left: 2.1em;
}
.link .cart__price--yen .tax{
  margin-left: 0.5em;
  font-size: calc(10 / 1280 * 100vw);
}
.link .cart__price--btn {
  position: relative;
  margin-left: 0.5em;
  padding: 0.4em 1em;
  font-family: var(--font-inter);
  font-size: calc(10 / 1280 * 100vw);
  line-height: 1;
}
.wool .link .cart__price--btn{
  border: 1px solid var(--color-wool);
  background: var(--color-wool);
  color: #433A2A;
}
.down .link .cart__price--btn{
  border: 1px solid var(--color-down);
  background: var(--color-down);
}
.link .cart__price--btn span img {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  opacity: 0;
  width: 1em;
  transition: 0.4s ease-in;
}
.link .cart:hover .cart__price--btn span {
  transform: translateX(-10%);
}
.link .cart__price--btn span {
  display: flex;
  transition: 0.4s ease-in;
}
.link .cart:hover .cart__price--btn span img {
  opacity: 1;
  margin-right: -1.2em;
}
.link .link__other {
  margin-top: 1em;
  padding-top: 1em;
  border-top: 1px solid #fff;
}
.link .link__other .cart__price--btn {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

/* 共通*/
.pc {
  display: block;
}
.sp {
  display: none;
}
.image{
  width: 100%;
}
.slide-box {
  overflow: hidden;
}
.flex-box{
  display: flex;
}
.flex-reverse{
  flex-direction: row-reverse;
}
/* top-block */
.top-block{
  padding-bottom: 8%;
  background: var(--color-wool-bg);
}
/*header*/
.header {
  position: relative;
  aspect-ratio: 1280 / 720;
  width: 100%;
  overflow: hidden;
}
.header .photo01{
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(460 / 1280 * 100%);
}
.header .photo02{
  position: absolute;
  top: 0;
  right: 6%;
  width: calc(414 / 1280 * 100%);
}
.header .title01{
  position: absolute;
  top: 15%;
  left: 51%;
  translate: -50% 0;
  width: calc(527.0738 / 1280 * 100%);
  z-index: 2;
}
.header .title01 .image{
  animation-duration: 2s;
  animation-delay: 1.3s;
}
.header .title02{
  position: absolute;
  top: 26%;
  left: 50%;
  translate: -50% 0;
  width: calc(636.452 / 1280 * 100%);
  z-index: 2;
}
.header .title02 .image{
  animation-duration: 2s;
  animation-delay: 1.8s;
}
.header .title03{
  position: absolute;
  top: 63%;
  left: 50%;
  translate: -50% 0;
  width: calc(507.0259 / 1280 * 100%);
  z-index: 2;
}
.header .title03 .image{
  animation-duration: 1s;
  animation-delay: 2.2s;
}
.header .title04{
  position: absolute;
  top: 77%;
  left: 53.5%;
  translate: -50% 0;
  width: calc(357.9691 / 1280 * 100%);
  z-index: 2;
}
.header .title04 .image{
  animation-duration: 2s;
  animation-delay: 2.4s;
}
.header .logo {
  position: absolute;
  top: 3%;
  left: 2%;
  width: calc(71.4653 / 1280 * 100%);
  z-index: 2;
}
/*lead*/
.lead {
  margin-top: 5%;
}
.lead .logo {
  display: none;
}
.lead .title-box{
  position: relative;
  width: fit-content;
  margin-inline: auto;
}
.lead .title-box::before{
  position: absolute;
  bottom: -52%;
  right: -1%;
  content: url(../img/lead-line.svg);
  width: calc(201.9342 / 1280 * 100vw);
  z-index: 0;
}
.lead .title{
  position: relative;
  color: var(--color-wool);
  text-align: center;
  font-size: calc(26 / 1280 * 100vw);
  letter-spacing: 0.06em;
  z-index: 1;
}
.lead .text{
  margin-top: 2%;
  color: #231815;
  text-align: center;
  font-size: calc(15 / 1280 * 100vw);
  line-height: calc(32 / 15);
  letter-spacing: 0.08rem;
}
/* mainnav------------------------------ */
.mainnav{
  margin-top: 8%;
}
.mainnav .list{
  display: flex;
  justify-content: center;
  gap: 8%;
}
.mainnav .list .item{
  width: calc(240 / 1280 * 100%);
  animation-duration: 1.8s;
}
.mainnav .list .item:nth-child(1){
  animation-delay: 0.6s;
}
.mainnav .list .item:nth-child(2){
  animation-delay: 0.9s;
}
.mainnav .list .item .title{
  margin: 0 auto;
}
.mainnav .list .item:nth-child(1) .title{
  width: calc(207.9189 / 240 * 100%);
}
.mainnav .list .item:nth-child(2) .title{
  width: calc(216.498 / 240 * 100%);
}
.mainnav .list .item .photo{
  margin-top: 6%;
  transition: 0.6s ease;
}
.mainnav .list .item .photo:hover{
  opacity: 0.7;
}
/* main */
/* style-box---------------------- */
.style-box{
  position: relative;
  margin: 10% auto 0;
}
.style-box .number{
  position: absolute;
  z-index: 2;
}
.wool .number{
  width: calc(166.4863 / 1280 * 100vw);
}
.down .number{
  width: calc(167.2617 / 1280 * 100vw);
}
.style-box .itemname{
  margin-top: 2%;
  font-size: calc(31 / 1280 * 100vw);
  white-space: nowrap;
}
.style-box .text{
  margin-top: 6%;
  font-size: calc(15 / 1280 * 100vw);
  line-height: calc(31.579 / 15);
}
/* wool */
.wool{
  padding-bottom: 9%;
  background: var(--color-wool-bg);
}  
/*wool01----------------------*/
.wool01{
  margin-top: 0;
}
.wool01 .box01{
  position: relative;
}
.wool01 .number{
  top: 7%;
  right: 7.5%;
}
.wool01 .photo01{
  width: calc(1148 / 1280 * 100%);
  margin-inline: auto;
}
.wool01 .box02{
  position: relative;
  justify-content: space-between;
  right: 1%;
  width: calc(964 / 1280 * 100%);
  margin: 4% auto 0;
}
.wool01 .box02 .photo02{
  width: calc(500 / 964 * 100%);
}
.wool01 .box02 .text-box{
  width: calc(400 / 964 * 100%);
  margin-top: 10%;
}
.wool01 .box02 .title{
  width: calc(294 / 400 * 100%);
}
.wool01 .box02 .link{
  margin-top: 26%;
}
/*wool02----------------------*/
.wool02 .box01{
  position: relative;
}
.wool02 .number{
  top: 7%;
  left: 5.5%;
}
.wool02 .photo01{
  width: calc(1148 / 1280 * 100%);
}
.wool02 .box02{
  position: relative;
  justify-content: space-between;
  right: 1%;
  width: calc(1140 / 1280 * 100%);
  margin: 4% auto 0;
}
.wool02 .box02-1{
  position: relative;
  width: calc(580 / 1140 * 100%);
}
.wool02 .box02-2{
  width: calc(500 / 1140 * 100%);
  margin-top: 8%;
}
.wool02 .box02 .text-box{
  width: calc(400 / 500 * 100%);
}
.wool02 .box02 .title{
  width: calc(322 / 400 * 100%);
}
.wool02 .box02 .photo03{
  margin-top: 20%;
}
.wool02 .box02 .link{
  position: absolute;
  bottom: 6%;
  right: 0;
}
/*wool03----------------------*/
.wool03 .number{
  top: 4%;
  left: 55%;
}
.wool03 .box01{
  justify-content: space-between;
  width: calc(1224 / 1280 * 100%);
  margin-inline: auto;
}
.wool03 .box01-1{
  position: relative;
  left: 2.5%;
  width: calc(720 / 1224 * 100%);
}
.wool03 .box01-2{
  position: relative;
  right: 3%;
  width: calc(504 / 1224 * 100%);
  margin-top: 26%;
}
.wool03 .box01 .text-box{
  margin-left: 2%;
}
.wool03 .box01 .title{
  width: calc(293 / 504 * 100%);
}
.wool03 .box01 .text{
  width: 80%;
}
.wool03 .box01 .photo02{
  margin-top: 30%;
}
.wool03 .box01 .link{
  position: absolute;
  bottom: 12%;
  right: 16%;
}
/* down */
.down{
  padding-top: 1%;
  background: var(--color-down-bg);
}
/*down01----------------------*/
.down01{
  margin-top: 8%;
  overflow: hidden;
}
.down01 .number{
  top: 4%;
  left: 74%;
}
.down01 .box01{
  justify-content: space-between;
  width: calc(1304 / 1280 * 100%);
  margin: 0 auto 0 0;
}
.down01 .box01-1{
  width: calc(720 / 1304 * 100%);
}
.down01 .box01-2{
  position: relative;
  right: 6%;
  width: calc(584 / 1304 * 100%);
  margin-top: 28%;
}
.down01 .box01 .text-box{
  margin-left: 6%;
}
.down01 .box01 .title{
  width: calc(294 / 584 * 100%);
}
.down01 .box01 .text{
  width: 78%;
}
.down01 .box01 .photo02{
  margin-top: 22%;
}
.down01 .box01 .photo03{
  position: relative;
  width: calc(500 / 720 * 100%);
  margin: 25% auto 0 12%;
}
.down01 .box01 .photo03 .icon{
  position: absolute;
  top: -6.5%;
  left: -6%;
  width: calc(121 / 1280 * 100vw);
  z-index: 2;
  animation-duration: 3s;
}
.down01 .box01 .link{
 margin: 8% auto 0 6%;
}
/*down02----------------------*/
.down02{
  overflow: hidden;
}
.down02 .number{
  top: 3%;
  left: 12%;
}
.down02 .box01{
  justify-content: space-between;
  width: calc(1220 / 1280 * 100%);
  margin: 0 auto 0 0;
}
.down02 .box01-1{
  width: calc(660 / 1220 * 100%);
}
.down02 .box01-2{
  position: relative;
  width: calc(500 / 1220 * 100%);
  margin-top: 26%;
  z-index: 2;
}
.down02 .box01 .text-box{
  position: relative;
  left: 31%;
}
.down02 .box01 .title{
  width: calc(317.503 / 500 * 100%);
}
.down02 .box01 .text{
  width: 86%;
}
.down02 .box01 .photo02{
  margin-top: 30%;
}
.down02 .box01 .photo03{
  position: relative;
  width: calc(500 / 660 * 100%);
  margin: 37% auto 0 12%;
}
.down02 .box01 .photo03 .icon{
  position: absolute;
  top: -6.5%;
  left: -7%;
  width: calc(121 / 1280 * 100vw);
  z-index: 2;
  animation-duration: 3s;
}
.down02 .box01 .link{
 margin: 8% 0 0 auto;
}
/*down03----------------------*/
.down03{
  overflow: hidden;
}
.down03 .number{
  top: 3.5%;
  left: 75%;
}
.down03 .box01{
  justify-content: space-between;
  width: calc(1224 / 1280 * 100%);
  margin: 0 auto;
}
.down03 .box01-1{
  position: relative;
  left: 3%;
  width: calc(720 / 1224 * 100%);
}
.down03 .box01-2{
  position: relative;
  right: 3%;
  width: calc(504 / 1224 * 100%);
  margin-top: 25.5%;
}
.down03 .box01 .text-box{
  margin-left: 4%;
}
.down03 .box01 .title{
  width: calc(274 / 504 * 100%);
}
.down03 .box01 .text{
  width: 90%;
}
.down03 .box01 .photo02{
  margin-top: 30%;
}
.down03 .box01 .photo03 .icon{
  position: absolute;
  top: -0.5%;
  left: -6%;
  width: calc(121 / 1280 * 100vw);
}
.down03 .box01 .link{
 margin: 14% 18% 0 auto;
}
/*down04----------------------*/
.down04{
  overflow: hidden;
}
.down04 .number{
  top: 0;
  left: 12%;
  padding-top: 0.5%;
}
.down04 .box01{
  justify-content: space-between;
  width: calc(1224 / 1280 * 100%);
  margin: 0 0 0 auto;
}
.down04 .box01-1{
  width: calc(720 / 1224 * 100%);
  margin-top: 4%;
}
.down04 .box01-2{
  position: relative;
  width: calc(504 / 1224 * 100%);
  margin-top: 22%;
  z-index: 2;
}
.down04 .box01 .text-box{
  position: relative;
  left: 27%;
}
.down04 .box01 .title{
  width: calc(242.503 / 504 * 100%);
}
.down04 .box01 .text{
  width: 84%;
}
.down04 .box01 .photo02{
  position: relative;
  left: 10%;
  margin-top: 23%;
}
.down04 .box01 .photo03{
  position: relative;
  width: calc(500 / 660 * 100%);
  margin: 31% auto 0 12%;
}
.down04 .box01 .photo03 .icon{
  position: absolute;
  top: -6.5%;
  left: -7%;
  width: calc(121 / 1280 * 100vw);
}
.down04 .box01 .link{
 margin: 8% auto 0;
}
/* styling-item */
.styling-item{
  margin-top: 6%;
}
.styling-item .title-box{
  position: relative;
  width: calc(1000 / 1280 * 100%);
  margin-inline: auto;
}
.styling-item .line{
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
}
.styling-item .list{
  display: flex;
  justify-content: center;
  margin-top: 2%;
}
.styling-item .item{
  position: relative;
  width: calc(164 / 1280 * 100%);
  margin: 0 0.75%;
}
.styling-item .link{
  width: 95%;
  margin: 1em auto 0;
}
.styling-item .link .cart{
  flex-direction: column;
  align-items: flex-start;
}
.styling-item .link .cart__price{
  justify-content: space-between;
  width: 98%;
  margin-top: 0.3em;
}
.styling-item .link .cart__price--yen{
  padding-left: 0;
}
/*slidenav-wrapper--------------------------*/
.slidenav-wrapper {
  position: relative;
  padding-top: 12%;
}
.slidenav-wrapper .title {
  position: relative;
  width: calc(504.6328 / 1280 * 100%);
  margin: 0 auto 1%;
}
.slidenav{
  width: calc(920 / 1280 * 100%);
  margin: 2% auto 0;
}
.slidenav .list .item{
  overflow: hidden;
  padding: 0 10px;
}
.slidenav .slick-slide a{
  display: block;
  overflow: hidden;
}
.slidenav .slick-slide .image{
  transition: 0.4s ease;
}
.slidenav .list .item:hover .image{
  scale: 1.1;
}
/* bottom-block------------------------- */
.bottom-block{
  background: var(--color-down-bg);
}
/*banner-staff*/
.banner-staff {
  margin: 6% auto 0;
}
.banner-staff .text{
  text-align: center;
  font-family: var(--font-Didot);
  font-size: calc(15 / 1280 * 100vw);
  line-height: calc(29 / 17);
}
/*banner*/
.banner {
  width: calc(603 / 1280 * 100%);
  margin: 3% auto 0;
}
.banner-item {
  display: block;
  margin-top: 3%;
  border: 1px solid #fff;
  transition: 0.6s ease-in-out;
}
.banner-item:hover {
  background: rgb(255 255 2555 / 0.1);
}
.banner-item img{
  width: 100%;
}
/*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;
}
/*pagetop*/
.pagetop {
  position: fixed;
  right: 1vw;
  bottom: 30px;
  width: calc(90.2065 / 1280 * 100%);
  z-index: 99;
}
.pagetop .image{
  width: 100%;
}
/*footnav*/
.stepnav {
  position: fixed;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  width: calc(100 / 1280 * 100%);
}
.stepnav .item:nth-child(2){
  margin-top: 16%;
}
.stepnav .item{
  position: relative;
}
.stepnav .item .on{
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.stepnav .item a:hover .on{
  z-index: 2;
}
.stepnav .item a.current .on{
  z-index: 2;
}
@media (max-width: 768px) {
  /* link------------------------ */
  .link .cart__title {
    font-size: calc(16 / 375 * 100vw);
  }
  .link .cart__price,
  .link .cart__price--yen--size{
    font-size: calc(16 / 375 * 100vw);
  }
  .link .cart__price--yen.size-l::before, .link .cart__price--yen.size-s::before{
    width: 4.2vw;
  }
  .link .cart__price--yen{
    padding-left: 1.5em;
  }
  .link .cart__price--yen .tax{
    margin-left: 0.2em;
    font-size: calc(10 / 375 * 100vw);
  }
  .link .cart__price--btn {
    margin-left: 0.85em;
    padding: 0.35em 0.5em;
    font-size: calc(10 / 375 * 100vw);
  }
  .link .cart:hover .cart__price--btn span{
    transform: translateX(0);
  }
  .link .cart:hover .cart__price--btn span img{
    opacity: 0;
  }
  .link .link__other {
    margin-top: 0.75em;
    padding-top: 0.75em;
  }
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  .top-block{
    padding-bottom: 20%;
  }
  /* header------------------------ */
  .header{
    aspect-ratio: 375 / 670;
  }
  .header .title01{
    top: 44%;
    left: 50%;
    width: calc(380 / 375 * 100%);
  }
  .header .title01 .image{
    animation-duration: 1s;
    animation-delay: 0.6s;
  }
  .header .title02{
    top: 61.5%;
    width: calc(348.9387 / 375 * 100%);
  }
  .header .title02 .image {
    animation-duration: 1.4s;
    animation-delay: 1.2s;
  }
  .header .title03{
    top: 84%;
    left: 50%;
    width: calc(340.3365 / 375 * 100%);
  }
  .header .title03 .image{
    animation-duration: 1s;
    animation-delay: 1.4s;
  }
  .header .title04{
    top: 92%;
    left: 50%;
    width: calc(254.5165 / 375 * 100%);
  }
  .header .title04 .image{
    animation-duration: 1s;
    animation-delay: 1s;
  }
  .header-logo {
    display: none;
  }
  /* lead---------------------------- */
  .lead .logo {
    display: block;
    width: calc(66 / 375 * 100%);
    margin: 0 auto;
  }
  .lead .title-box{
    position: relative;
    left: 1em;
  }
  .lead .title-box::before{
    bottom: -4%;
    right: auto;
    left: auto;
    width: calc(220.1342 / 375 * 100vw);
  }
  .lead .title {
    margin-top: 16%;
    padding: 0;
    text-align: left;
    font-size: calc(28 / 375 * 100vw);
    line-height: 1.6;
  }
  .lead .text {
    margin-top: 6%;
    font-size: calc(15 / 375 * 100vw);
  }
  /* mainnav---------------------------------- */
  .mainnav{
    margin-top: 18%;
  }
  .mainnav .list{
    gap: 4%;
  }
  .mainnav .list .item{
    width: calc(159 / 375 * 100%);
  }
  .mainnav .list .item .title{
    display: none;
  }
  /* style-box---------------- */
  .style-box{
    width: 100%;
    margin-top: 28%;
  }
  .wool .number{
    width: calc(127.2188 / 375 * 100%);
  }
  .down .number{
    width: calc(128.8867 / 375 * 100%);
  }
  .style-box .box01,
  .style-box .box02{
    right: 0;
    left: 0;
    flex-direction: column;
    width: 100%;
  }
  .style-box .box01-1,
  .style-box .box01-2,
  .style-box .box02-1,
  .style-box .box02-2{
    display: contents;
  }
  .style-box .photo01{
    width: 100%;
  }
  .style-box  .photo02,
  .style-box  .photo02{
    margin-top: 4%;
    order: 2;
  }
  div[class*="wool"] div[class*="box"] .photo03,
  div[class*="down"] div[class*="box"] .photo03{
    margin-top: 8%;
    order: 3;
  }
  div[class*="wool"] div[class*="box"] .text-box,
  div[class*="down"] div[class*="box"] .text-box{
    left: auto;
    width: calc(325 / 375 * 100%);
    margin: 10% auto 0;
    text-align: justify;
    order: 4;
  }
  .style-box .itemname{
    font-size: calc(30 / 375 * 100vw);
    line-height: 1.5;
  }
  [class*="wool"] div[class*="box"] .text,
  [class*="wool"] div[class*="box"] .text,
  [class*="down"] div[class*="box"] .text,
  [class*="down"] div[class*="box"] .text{
    width: 100%;
    font-size: calc(15 / 375 * 100vw);
  }
  div[class*="wool"] .box01 .link,
  div[class*="wool"] .box02 .link,
  div[class*="down"] .box01 .link,
  div[class*="down"] .box02 .link{
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: calc(305.4346 / 375 * 100vw);
    margin: 12% auto 0;
    order: 5;
  }
  /* wool */
  .wool{
    padding-bottom: 20%;
  }
  /* wool01 */
  .wool01{
    margin-top: 0;
  }
  .wool01 .number{
    top: 4%;
    right: auto;
    left: 5%;
  }
  .wool01 .box02 .photo02{
    width: calc(320 / 375 * 100%);
    margin-left: auto;
    margin-right: 0;
  }
  .wool01 .box02 .title{
    width: calc(293 / 325 * 100%);
    margin-left: -1vw;
  }
  /* wool02 */
  .wool02 .number{
    top: 4.5%;
    left: 4.5%;
  }
  .wool02 .photo02{
    width: calc(325 / 375 * 100%);
    margin-left: auto;
    margin-right: auto;
  }
  .wool02 .photo03{
    width: calc(320 / 375 * 100%);
  }
  .wool02 .box02 .title{
    width: calc(325 / 325 * 100%);
  }
  /* wool03 */
  .wool03{
    padding-top: 14%;
  }
  .wool03 .number{
    top: 0;
    left: 61.5%;
  }
  .wool03 .box01 .photo02{
    width: calc(325 / 375 * 100%);
    margin: 8% auto 0;
  }
  .wool03 .box01 .title{
    width: calc(295 / 325 * 100%);
  }
  /* down01 */
  .down01{ 
    margin-top: 14%;
    padding-top: 17%;
  }
  .down01 .number{
    top: 0;
    left: 5%;
  }
  .down01 .box01 .photo02{
    width: calc(325 / 375 * 100%);
    margin: 8% auto 0;
  }
  .down01 .box01 .photo03{
    width: calc(325 / 375 * 100%);
    margin-left: auto;
    margin-right: 0;
  }
  .down01 .box01 .photo03 .icon{
    top: -2.5%;
    left: -7%;
    width: calc(96.8 / 375 * 100vw);
  }
  .down01 .box01 .title{
    width: calc(296 / 325 * 100%);
  }
  .down01 .list{
    justify-content: space-between;
    width: calc(298 / 375 * 100%);
    margin: 6% auto 0;
  }
  .down01 .list .item{
    width: calc(144 / 298 * 100%);
  }
  /* down02 */
  .down02{ 
    padding-top: 20%;
  }
  .down02 .number{
    top: 0;
    left: 60%;
  }
  .down02 .box01 .photo02{
    width: calc(325 / 375 * 100%);
    margin: 8% auto 0;
  }
  .down02 .box01 .photo03{
    width: calc(325 / 375 * 100%);
    margin-left: auto;
    margin-right: 0;
  }
  .down02 .box01 .photo03 .icon{
    top: -2.5%;
    left: -12%;
    width: calc(96.8 / 375 * 100vw);
  }
  .down02 .box01 .title{
    width: calc(296 / 325 * 100%);
  }
  /* down03 */
  .down03{ 
    padding-top: 14%;
  }
  .down03 .number{
    top: 0;
    left: 5%;
  }
  .down03 .box01 .photo02{
    width: calc(325 / 375 * 100%);
    margin: 6% auto 0;
  }
  .down03 .box01 .title{
    width: calc(276 / 325 * 100%);
  }
  /* down04 */
  .down04{ 
    padding-top: 20%;
  }
  .down04 .number{
    top: 0;
    left: 60%;
  }
  .down04 .box01 .photo02{
    width: calc(325 / 375 * 100%);
    margin: 6% auto 0;
  }
  .down04 .box01 .title{
    width: calc(244 / 325 * 100%);
  }
  /* styling-item-------------------------- */
  .styling-item{
    margin-top: 20%;
    overflow: hidden;
  }
  .styling-item .title-box{
    width: 102%;
    margin-left: -1%;
  }
  .styling-item .slider02{
    position: relative;
    width: 100%;
    margin-top: 6%;
  }
  .styling-item .slider02 .slide .inner{
    padding: 10px 5px;
  }
  .styling-item .item{
    margin: 0 auto;
  }
  .styling-item .item .image{
    width: 93%;
    margin: 0 auto;
  }
  div[class*="wool"] .styling-item .link, 
  div[class*="down"] .styling-item .link{
    width: 86%;
    margin: 0.75em auto 0 0.75em;
  }
  .styling-item .link .cart__title, 
  .styling-item .link .cart__title,
  .styling-item .link .cart__price--yen,
  .styling-item .link .cart__price--yen{
    font-size: calc(13.8824 / 375 * 100vw);
  }
  .styling-item .link .cart__price--yen .tax{
    font-size: calc(7.9328 / 375 * 100vw);
  }
  .styling-item .link .cart__price--btn{
    font-size: calc(9.3867 / 375 * 100vw);
  }
  /* slidenav-------------------------------- */
  .slidenav-wrapper{
    width: 100%;
    padding-top: 26%;
  }
  .slidenav-wrapper .title{
    width: calc(253.3374 / 375 * 100%);
    margin: 0 auto;
  }
  .slidenav{
    width: 100%;
    margin: 5% 0;
  }
  .slidenav .list .item{
    padding: 0 0.2%;
  }
  /* bottom-block------------------ */
  .banner-staff {
    margin-top: 14%;
  }
  .banner-staff .text{
    font-size: calc(15 / 375 * 100vw);
  }
  .banner {
    width: 80%;
    margin-top: 10%;
  }
  .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;
    translate: 0 0;
    width: 100%;
    z-index: 999;
  }
  .stepnav .list{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
  }
  .stepnav .item{
    position: relative;
  }
  .stepnav .item:nth-child(1),
  .stepnav .item:nth-child(2){
    width: calc(165 / 375 * 100%);
  }
  .stepnav .item:nth-child(2){
    margin-top: 0;
  }
  .stepnav .item:nth-child(3){
    width: calc(45 / 375 * 100%);
  }

}