@charset "UTF-8";
html {
  font-size: 10px;
}

/* PC 1400px 以上 → SP 750px を 480px 相当に縮める */
/* 751〜1399px のときは、幅に合わせてなめらかに縮める */
body {
  margin: 0;
  font-family: "Yu Gothic Medium", "Yu Gothic", "YuGothic", "游ゴシック Medium", sans-serif;
}

p {
  margin: 0;
}

.l-container {
  width: 100%;
}

.l-container #feature {
  margin: 0 auto;
  width: 100%;
  text-align: center;
  overflow: clip;
  background-color: #7e0d1d;
  color: #000;
}
.l-container #feature .pc-grid-wrapper {
  max-width: 1600px;
  margin: 0 auto;
}
.l-container #feature .pc-grid {
  display: grid;
  grid-template-columns: 33% 34% 33%;
  width: 100%;
  margin: 0 auto;
}
.l-container #feature .pc-grid-left,
.l-container #feature .pc-grid-right {
  position: relative;
}
.l-container #feature .pc-grid-center {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.l-container #feature .sp-wrap {
  width: 75rem;
  background-color: #fff;
}
.l-container #feature .pc-grid-left {
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.l-container #feature .side-copy-left {
  width: 34rem;
  opacity: 1;
  transition: opacity 0.6s ease;
}
.l-container #feature .pc-grid-right {
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.l-container #feature .side-copy-right {
  width: 31rem;
  opacity: 1;
  transition: opacity 0.6s ease;
}
.l-container #feature .fade-out {
  opacity: 0;
}
.l-container #feature * {
  box-sizing: border-box;
}
.l-container #feature *::after {
  box-sizing: border-box;
}
.l-container #feature *::before {
  box-sizing: border-box;
}
.l-container #feature a {
  display: block;
  text-decoration: none;
  position: relative;
}
.l-container #feature a::after {
  content: "";
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.6);
  transition: all 0.4s;
}
.l-container #feature a:hover {
  cursor: pointer;
}
.l-container #feature a:hover::after {
  opacity: 1;
  transition: 0.4s;
}
.l-container #feature .default-img {
  width: 100%;
  display: block;
}
.l-container #feature picture {
  display: block;
}
.l-container #feature .creditContainer {
  font-family: "Crimson Text", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2.4rem;
  letter-spacing: 0.025em;
  line-height: 0.916666667;
  font-feature-settings: "palt";
  max-width: 100%;
}
.l-container #feature .creditContainer .credit {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-start;
  gap: 2.5rem;
}
.l-container #feature .creditContainer li a {
  color: #000;
  text-decoration: none;
  width: fit-content;
  border-bottom: 0.2rem solid #b2b2b2;
  padding-bottom: 0.3rem;
}
.l-container #feature .creditContainer li span.price {
  margin-left: 0.7rem;
}
.l-container #feature .creditContainer_01 {
  padding-bottom: 2.5rem;
}
.l-container #feature .creditContainer_01 .credit {
  justify-content: center;
  max-width: 53rem;
  margin: 0 auto;
}
.l-container #feature .creditContainer_01 .credit li:first-child::after {
  content: "";
  display: inline-block;
  width: 18.8rem;
  height: 2.7rem;
  background: url("../img/special-price.svg") no-repeat center/contain;
  position: absolute;
  top: 0;
  right: -19.1rem;
}
.l-container #feature .creditContainer_01 .credit li:first-child.item {
  position: relative;
  margin-right: 21rem;
}
.l-container #feature .creditContainer_01 .credit li:first-child a {
  color: #900e21;
  border-bottom: 0.2rem solid #d0a8b2;
  margin-right: 1.7rem;
}
.l-container #feature .creditContainer_02 .credit {
  justify-content: center;
  max-width: 55rem;
  margin-left: 12rem;
  margin: 0 auto;
}
.l-container #feature .creditContainer_03 {
  position: relative;
  z-index: 1;
}
.l-container #feature .creditContainer_03 .credit {
  justify-content: start;
  max-width: 36rem;
  margin-left: 9rem;
}
.l-container #feature .creditContainer_03 .credit li:first-child::after {
  content: "";
  display: inline-block;
  width: 18.8rem;
  height: 2.7rem;
  background: url("../img/special-price.svg") no-repeat center/contain;
  position: absolute;
  top: 0;
  right: -20.8rem;
}
.l-container #feature .creditContainer_03 .credit li:first-child.item {
  position: relative;
  margin-right: 21rem;
}
.l-container #feature .creditContainer_03 .credit li:first-child a {
  color: #900e21;
  border-bottom: 0.2rem solid #d0a8b2;
}
.l-container #feature .creditContainer_04 {
  position: relative;
  z-index: 1;
}
.l-container #feature .creditContainer_04 .credit {
  justify-content: start;
  max-width: 36rem;
  margin-left: 9rem;
  margin-top: 2.5rem;
}
.l-container #feature .creditContainer_05 .credit {
  justify-content: start;
  max-width: 36rem;
  margin: 0 auto;
}
.l-container #feature .creditContainer_05 .credit li:first-child::after {
  content: "";
  display: inline-block;
  width: 18.8rem;
  height: 2.7rem;
  background: url("../img/special-price.svg") no-repeat center/contain;
  position: absolute;
  top: 0;
  right: -20.8rem;
}
.l-container #feature .creditContainer_05 .credit li:first-child.item {
  position: relative;
  margin-right: 21rem;
}
.l-container #feature .creditContainer_05 .credit li:first-child a {
  color: #900e21;
  border-bottom: 0.2rem solid #d0a8b2;
}
.l-container #feature .creditContainer_06 .credit {
  justify-content: center;
  max-width: 44rem;
  margin: 0 auto;
  margin-top: 2.5rem;
}
.l-container #feature .creditContainer_07 .credit {
  justify-content: start;
  max-width: 44rem;
  margin-left: 11.1rem;
  margin-top: 2.5rem;
}
.l-container #feature .creditContainer_07 .credit li:nth-child(1) {
  margin-right: 20rem;
}
.l-container #feature .creditContainer_08 .credit {
  justify-content: end;
  max-width: 55rem;
  margin-left: 13rem;
  margin-top: 2.5rem;
}
.l-container #feature .creditContainer_08 .credit li:nth-child(1) {
  margin-left: 20rem;
}
.l-container #feature .creditContainer_09 .credit {
  justify-content: center;
  max-width: 55rem;
  margin: 0 auto;
  margin-bottom: 18rem;
}
.l-container #feature .creditContainer_09 .credit li:nth-child(1) {
  margin-right: 20rem;
  margin-left: 20rem;
}
.l-container #feature .creditContainer_09 .credit li:nth-child(2) a {
  position: relative;
  display: inline-block;
  padding-right: 9rem;
}
.l-container #feature .creditContainer_09 .credit li:nth-child(2) a::before {
  content: "(Mirror)";
  position: absolute;
  left: 17.5rem;
  border-bottom: 0.2rem solid #b2b2b2;
  padding-bottom: 0.3rem;
  pointer-events: none;
}
.l-container #feature .creditContainer_09 .credit li:nth-child(3) a {
  position: relative;
  display: inline-block;
  padding-right: 6rem;
}
.l-container #feature .creditContainer_09 .credit li:nth-child(3) a::before {
  content: "(Lips)";
  position: absolute;
  left: 17.5rem;
  border-bottom: 0.2rem solid #b2b2b2;
  padding-bottom: 0.3rem;
  pointer-events: none;
}
.l-container #feature .hero {
  margin: 0 auto 0;
  width: 100%;
  position: relative;
  margin-bottom: 10.3rem;
}
.l-container #feature .hero__inner {
  width: 75rem;
  margin: 0 auto 0;
}
.l-container #feature .hero__img {
  margin: 0 auto 0;
}
.l-container #feature .container {
  margin: 0 auto;
  width: 100%;
  position: relative;
}
.l-container #feature .container__inner {
  width: 75rem;
  margin: 0 auto;
}
.l-container #feature .crimson-text-regular {
  font-family: "Crimson Text", serif;
  font-weight: 400;
  font-style: normal;
}
.l-container #feature .main__inner {
  width: 75rem;
}
.l-container #feature .lead-text p {
  font-size: 2.4rem;
  letter-spacing: 0.05em;
  line-height: 2.2;
  font-feature-settings: "palt";
  margin-bottom: 9.5rem;
}
.l-container #feature .campaign-info {
  width: 62rem;
  background-color: #f7ebec;
  margin: 0 auto;
  padding-top: 5.5rem;
  padding-bottom: 5.1rem;
  margin-bottom: 18rem;
}
.l-container #feature .campaign-point {
  width: 40.66104rem;
  height: 4.23164rem;
  margin: 0 auto;
  margin-bottom: 3.3rem;
}
.l-container #feature .start-date {
  width: 33rem;
  font-size: 3rem;
  letter-spacing: 0.075em;
  color: #a50f30;
  border-bottom: 0.15rem solid #a50f30;
  margin: 0 auto;
  margin-bottom: 5rem;
}
.l-container #feature .crimson-sm {
  font-size: 2.2rem;
  letter-spacing: 0.075em;
  line-height: 1;
  font-feature-settings: "palt";
}
.l-container #feature .campaign-title {
  font-size: 2.4rem;
  letter-spacing: 0.05em;
  line-height: 1;
  font-feature-settings: "palt";
  margin-bottom: 2.5rem;
}
.l-container #feature .campaign-period {
  font-family: "Yu Gothic Medium", "Yu Gothic", YuGothic, sans-serif;
  font-size: 2.4rem;
  letter-spacing: 0.03em;
  line-height: 1;
}
.l-container #feature .fs-sm {
  font-family: "Yu Gothic Medium", "Yu Gothic", YuGothic, sans-serif;
  font-size: 2rem;
  letter-spacing: 0.05em;
  line-height: 2.2;
  font-feature-settings: "palt";
}
.l-container #feature .container01 {
  margin-bottom: 24rem;
}
.l-container #feature .holiday-section01 {
  margin-bottom: 16.3rem;
}
.l-container #feature .sec-title-01 {
  margin-bottom: 5rem;
}
.l-container #feature .knit-items-box {
  margin-bottom: 5rem;
}
.l-container #feature .knit-img-size {
  width: 28rem;
}
.l-container #feature .knit01 {
  margin: 0 auto;
}
.l-container #feature .knit-items-flex {
  display: flex;
  justify-content: center;
  gap: 3rem;
}
.l-container #feature .knit-desc {
  font-family: "Yu Gothic Medium", "Yu Gothic", YuGothic, sans-serif;
  font-size: 2.4rem;
  letter-spacing: 0.05em;
  line-height: 2.2;
  font-feature-settings: "palt";
}
.l-container #feature .knit-black-wrapper {
  margin-bottom: 33.5rem;
}
.l-container #feature .knit_black-01 {
  width: 64rem;
  margin: 0 auto;
  margin-bottom: 6rem;
}
.l-container #feature .knit-black-02 {
  position: relative;
  margin-bottom: 4rem;
}
.l-container #feature .knit-black-02::after {
  content: "";
  width: 11.3rem;
  height: 61.26958rem;
  position: absolute;
  top: 7.8rem;
  left: 10rem;
  background-image: url("../img/knit-black-02-text.svg");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: 0.4s;
}
.l-container #feature .knit-black-02.animate-active::after {
  opacity: 1;
}
.l-container #feature .knit-pink-wrapper {
  position: relative;
  margin-bottom: 32.2rem;
}
.l-container #feature .knit-pink-wrapper::after {
  content: "";
  width: 53rem;
  height: 371.5rem;
  position: absolute;
  top: -16.3rem;
  right: 0;
  background-color: #f7ebec;
  z-index: 0;
}
.l-container #feature .knit-pink-01 {
  position: relative;
  margin-bottom: 6rem;
  z-index: 1;
}
.l-container #feature .knit-pink-01-inner {
  overflow: hidden;
}
.l-container #feature .knit-pink-01::after {
  content: "";
  width: 12.4668rem;
  height: 44.17949rem;
  position: absolute;
  top: -10.4rem;
  right: 3rem;
  background-image: url("../img/knit-pink-title.svg");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
.l-container #feature .knit-pink-02 {
  position: relative;
  width: 69rem;
  right: auto;
  margin-bottom: 6rem;
  z-index: 1;
}
.l-container #feature .knit-pink-02::after {
  content: "";
  width: 11.3rem;
  height: 65.06958rem;
  position: absolute;
  bottom: 8.4rem;
  right: 4.5rem;
  background-image: url("../img/knit-pink-02-text.svg");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: 0.4s;
}
.l-container #feature .knit-pink-02.animate-active::after {
  opacity: 1;
}
.l-container #feature .knit-pink-03 {
  width: 69rem;
  margin-left: auto;
  margin-bottom: 4rem;
  position: relative;
  z-index: 1;
}
.l-container #feature .creditContainer_02 {
  height: 12.7332rem;
  position: relative;
  z-index: 1;
}
.l-container #feature .ivory-01 {
  position: relative;
  margin-bottom: 6rem;
  overflow: hidden;
}
.l-container #feature .ivory-01::after {
  content: "";
  width: 11.62256rem;
  height: 24.93848rem;
  position: absolute;
  bottom: 5.5rem;
  right: 5.5rem;
  background-image: url("../img/ivory-title.svg");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
.l-container #feature .ivory-02 {
  width: 68rem;
  position: relative;
}
.l-container #feature .ivory-02::after {
  content: "";
  width: 11.3rem;
  height: 42rem;
  position: absolute;
  top: 6.3rem;
  left: 6.4rem;
  background-image: url("../img/knit-ivory-02-text.svg");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: 0.4s;
}
.l-container #feature .ivory-02.animate-active::after {
  opacity: 1;
}
.l-container #feature .ivory-03 {
  width: 70rem;
  margin-top: -3.2rem;
  position: relative;
  z-index: 1;
  margin-left: auto;
  margin-bottom: 4rem;
}
.l-container #feature .sec-title-02 {
  margin-bottom: 5.1rem;
}
.l-container #feature .dress-items-flex {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 4.6rem;
}
.l-container #feature .dress-item-size {
  width: 25rem;
}
.l-container #feature .dress-desc {
  font-family: "Yu Gothic Medium", "Yu Gothic", YuGothic, sans-serif;
  font-size: 2.4rem;
  letter-spacing: 0.05em;
  line-height: 2.2;
  font-feature-settings: "palt";
  margin-bottom: 13.2rem;
}
.l-container #feature .dress-pink-wrapper {
  margin-bottom: 30rem;
}
.l-container #feature .dress-pink-01 {
  width: 73rem;
  margin-right: auto;
  margin-bottom: 13.2rem;
}
.l-container #feature .dress-pink-02 {
  width: 64rem;
  position: relative;
  margin-left: auto;
}
.l-container #feature .dress-pink-02-bg {
  width: 50rem;
  height: 40rem;
  position: absolute;
  top: -8rem;
  left: -11rem;
  z-index: 0;
  background-image: url("../img/dress-pink-02-bg.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
.l-container #feature .dress-pink-02::after {
  content: "";
  width: 11.3rem;
  height: 60.86958rem;
  position: absolute;
  top: 5.1rem;
  right: 4.1rem;
  background-image: url("../img/dress-pink-02-text.svg");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: 0.4s;
}
.l-container #feature .dress-pink-02.animate-active::after {
  opacity: 1;
}
.l-container #feature .dress-pink-03 {
  width: 64rem;
  margin-left: auto;
  margin-bottom: 4.1rem;
}
.l-container #feature .dress-check-wrapper {
  margin-bottom: 24.2rem;
}
.l-container #feature .dress-check-01 {
  width: 71rem;
  margin-left: auto;
  position: relative;
  margin-bottom: 13rem;
}
.l-container #feature .dress-check-01-inner {
  overflow: hidden;
}
.l-container #feature .dress-check-01::before {
  content: "";
  width: 9.19775rem;
  height: 31.63521rem;
  position: absolute;
  bottom: 4rem;
  left: 4rem;
  background-image: url("../img/check-title.svg");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
.l-container #feature .dress-check-01::after {
  content: "";
  width: 11.3rem;
  height: 43.4rem;
  position: absolute;
  top: -16.3rem;
  right: 7.4rem;
  background-image: url("../img/dress-check-01-text.svg");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  /* 最初は非表示 */
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: 0.8s;
}
.l-container #feature {
  /* ★ .animate-active が付いたら表示 */
}
.l-container #feature .dress-check-01.animate-active::after {
  opacity: 1;
}
.l-container #feature .dress-check-02 {
  width: 66rem;
  margin-right: auto;
  position: relative;
  margin-bottom: 4rem;
}
.l-container #feature .dress-check-02-bg {
  width: 52.36842rem;
  height: 39.8rem;
  position: absolute;
  top: -8rem;
  right: -9rem;
  z-index: 0;
  background-image: url("../img/dress-check-02-bg.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
.l-container #feature .lutin-series-title {
  width: 53.74463rem;
  margin: 0 auto;
  margin-bottom: 5.8rem;
}
.l-container #feature .lutin-series-01 {
  position: relative;
  margin-bottom: 4rem;
  overflow: hidden;
}
.l-container #feature .lutin-series-01::after {
  content: "";
  width: 11.3rem;
  height: 41.4rem;
  position: absolute;
  top: 7.6rem;
  left: 7.40763rem;
  background-image: url("../img/lutin-series-01-text.svg");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  /* 最初は非表示 */
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: 0.8s;
}
.l-container #feature {
  /* ★ .animate-active が付いたら表示 */
}
.l-container #feature .lutin-series-01.animate-active::after {
  opacity: 1;
}
.l-container #feature .staff {
  width: 53.11836rem;
  margin: 0 auto;
  margin-bottom: 6.7rem;
}
.l-container #feature .all-item {
  width: 56rem;
  margin: 0 auto;
  margin-bottom: 18rem;
}
.l-container #feature .fadeUp-hidden {
  opacity: 0;
  transition: 1s ease all;
  transform: translateY(10rem);
}
.l-container #feature .fadeUp-hidden.animate-active {
  opacity: 1;
  transform: translateY(0) translateX(0) translateZ(0);
}
.l-container #feature .fadeIn-hidden {
  opacity: 0;
  transition: opacity 2.5s ease;
}
.l-container #feature .fadeIn-hidden.animate-active {
  opacity: 1;
}
.l-container #feature .stagger-item {
  opacity: 0;
  transition: opacity 1s ease;
}
.l-container #feature .stagger-item.animate-active {
  opacity: 1;
}
.l-container #feature .imgZoom {
  opacity: 0;
  transform: scale(1.1);
  transition: transform 1.4s ease, opacity 1s ease;
}
.l-container #feature .imgZoom.animate-active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.feature-snslist {
  overflow: hidden;
}

@media screen and (min-width: 1400px) {
  html {
    font-size: 6.4px;
  }
}

@media screen and (min-width: 751px) and (max-width: 1399px) {
  html {
    font-size: 0.4571428571vw;
  }
}