@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap");
html {
  font-size: 10px;
  scroll-behavior: smooth;
}
:root {
  --bg1-opacity: 0;
  --bg2-opacity: 0;
  --bg3-opacity: 0;
  --bg4-opacity: 0;
  --bg5-opacity: 0;
  --bg6-opacity: 0;
}

.l-container {
  width: 100%;
}

.l-container #feature {
  position: relative;
  font-family: "shippori-mincho", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #000;
  margin: 0 auto;
}
.l-container #feature * {
  box-sizing: border-box;
  scroll-behavior: smooth;
  margin: 0;
}
.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 figure,
.l-container #feature picture,
.l-container #feature img,
.l-container #feature video,
.l-container #feature a {
  display: block;
  width: 100%;
}
.l-container #feature img {
  height: 100%;
}
.l-container #feature .product-image {
  position: relative;
}
.l-container #feature .product-image a::after {
  content: "";
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  transition: all 0.3s;
}
.l-container #feature .product-image a:hover::after {
  opacity: 1;
}
.l-container #feature .credits-container {
  position: absolute;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
.l-container #feature .credits-container .credit {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.6rem;
  row-gap: 0.1rem;
  justify-content: center;
}
.l-container #feature .credits-container .item {
  display: flex;
  transition: all 0.3s;
  cursor: pointer;
}
.l-container #feature .credits-container .item:hover {
  opacity: 0.7;
}
.l-container #feature .credits-container li {
  width: max-content;
}
.l-container #feature .credits-container li .link {
  display: flex;
  position: relative;
  color: #8e8e8e;
  font-size: 1.6rem;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2rem;
}
.l-container #feature .credits-container li .link .yen-left {
  color: #8e8e8e;
  font-size: 0.4rem;
}
.l-container #feature .credits-container li .link .yen-right {
  color: #8e8e8e;
  font-size: 0.1rem;
}
.l-container #feature .mv {
  position: relative;
}
.l-container #feature .mv__eternalbloom {
  position: absolute;
  width: 28.5rem;
  top: calc(50% - 6.25rem);
  left: calc(50% + 10.5rem);
  transform: translate(-50%, -50%);
}
.l-container #feature .mv__tweed {
  position: absolute;
  width: 36.5rem;
  top: calc(50% + 8.25rem);
  left: calc(50% + 11rem);
  transform: translate(-50%, -50%);
}
.l-container #feature .mv__decoration {
  position: absolute;
  width: 5.5rem;
  top: calc(50% + 11rem);
  left: calc(50% + 11rem);
  transform: translate(-50%, -50%);
}
.l-container #feature .mv__description {
  font-size: 1.8rem;
  line-height: 2.8rem;
  letter-spacing: 0;
  text-align: center;
  padding-bottom: 6rem;
}
.l-container #feature .container {
  position: relative;
  overflow: hidden;
}
.l-container #feature .container::before {
  content: "";
  background-repeat: no-repeat;
  width: 100vw;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  background-size: cover;
  transition: opacity 1s;
  z-index: -1;
}
.l-container #feature .container__title {
  margin-left: auto;
}
.l-container #feature .container__descriptions {
  text-align: center;
}
.l-container #feature .container__descriptions__description.sub {
  font-size: 2.2rem;
  letter-spacing: 0.03em;
}
.l-container #feature .container__descriptions__description.main {
  font-size: 1.8rem;
  letter-spacing: 0;
  line-height: 1.55;
  margin-top: 1.5rem;
}
.l-container #feature .max-width-wrapper {
  width: 56rem;
  background-color: #fff;
  padding-top: 5rem;
  margin: 0 auto;
}
.l-container #feature .container1::before {
  content: "";
  background-image: url("../images/background/1.jpg");
  opacity: var(--bg1-opacity, 0);
}
.l-container #feature .container1 .max-width-wrapper {
  padding-top: 3rem;
}
.l-container #feature .container1 .container__title {
  width: 23.5rem;
  margin-right: 2rem;
}
.l-container #feature .container1 .swiper {
  margin-top: 1rem;
}
.l-container #feature .container1 .swiper-slide {
  width: 43rem;
}
.l-container #feature .container1__3 {
  margin-top: 1rem;
}
.l-container #feature .container1 .container__descriptions {
  padding-top: 3rem;
  padding-bottom: 6.5rem;
}
.l-container #feature .container1 .credits-container {
  width: 40rem;
  bottom: 0rem;
}
.l-container #feature .container2::before {
  content: "";
  background-image: url("../images/background/2.jpg");
  opacity: var(--bg2-opacity, 0);
}
.l-container #feature .container2 .container__title {
  position: relative;
  width: 26rem;
  margin-left: 3rem;
  z-index: 1;
}
.l-container #feature .container2__1 {
  margin-top: -2rem;
}
.l-container #feature .container2__2 {
  width: 43rem;
  margin-top: 1rem;
}
.l-container #feature .container2 .container__descriptions {
  padding-top: 3rem;
  padding-bottom: 6.5rem;
}
.l-container #feature .container2 .credits-container {
  width: 44rem;
  bottom: 0rem;
}
.l-container #feature .container3::before {
  content: "";
  background-image: url("../images/background/3.jpg");
  opacity: var(--bg3-opacity, 0);
}
.l-container #feature .container3 .container__title {
  position: relative;
  width: 29rem;
  margin-left: auto;
  margin-right: 3.25rem;
  z-index: 1;
}
.l-container #feature .container3__1 {
  margin-top: -2rem;
}
.l-container #feature .container3__2 {
  width: 43rem;
}
.l-container #feature .container3 .container__descriptions {
  padding-top: 3rem;
  padding-bottom: 4rem;
}
.l-container #feature .container3 .credits-container {
  bottom: 0rem;
}
.l-container #feature .container4::before {
  content: "";
  background-image: url("../images/background/4.jpg");
  opacity: var(--bg4-opacity, 0);
}
.l-container #feature .container4 .container__title {
  position: relative;
  width: 39.5rem;
  margin-left: 3rem;
}
.l-container #feature .container4 .container__descriptions {
  padding-top: 3rem;
  padding-bottom: 6rem;
}
.l-container #feature .container4 .credits-container {
  width: 36rem;
  bottom: 0rem;
}
.l-container #feature .container5::before {
  content: "";
  background-image: url("../images/background/5.jpg");
  opacity: var(--bg5-opacity, 0);
}
.l-container #feature .container5 .container__title {
  position: relative;
  width: 38.5rem;
  margin-left: auto;
  margin-right: 2.5rem;
  z-index: 1;
}
.l-container #feature .container5__1 {
  margin-top: -2.5rem;
}
.l-container #feature .container5__2 {
  width: 43rem;
  margin-left: auto;
  margin-top: 1rem;
}
.l-container #feature .container5 .container__descriptions {
  padding-top: 3rem;
  padding-bottom: 6.5rem;
}
.l-container #feature .container5 .credits-container {
  width: 34rem;
  bottom: 0rem;
}
.l-container #feature .container6::before {
  content: "";
  background-image: url("../images/background/6.jpg");
  opacity: var(--bg6-opacity, 0);
}
.l-container #feature .container6 .max-width-wrapper {
  padding-bottom: 4.5rem;
}
.l-container #feature .container6 .container__title {
  position: relative;
  width: 33.5rem;
  margin-left: 3rem;
  z-index: 1;
}
.l-container #feature .container6__1 {
  margin-top: -2rem;
}
.l-container #feature .container6__2 {
  width: 43rem;
  margin-top: 1rem;
}
.l-container #feature .container6 .container__descriptions {
  padding-top: 3rem;
  padding-bottom: 11.5rem;
}
.l-container #feature .container6 .credits-container {
  width: 40rem;
  bottom: 32rem;
}
.l-container #feature .all-item-check {
  width: 26rem;
  margin: 0 auto;
}
.l-container #feature .staffs {
  text-align: center;
  line-height: 1.65;
  letter-spacing: 0.05em;
  font-style: italic;
  margin-top: 2.25rem;
}
.l-container #feature [data-fadeup] {
  opacity: 0;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  animation-fill-mode: forwards;
}
.l-container #feature [data-delay1] {
  animation-delay: 0.3s;
}
.l-container #feature [data-delay2] {
  animation-delay: 0.5s;
}
.l-container #feature [data-delay3] {
  animation-delay: 0.7s;
}
.l-container #feature [data-fadeup].active {
  animation-name: fadeup;
}
@keyframes fadeup {
  0% {
    transform: translateY(3rem);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.l-container #feature [data-clippath-from-top] {
  clip-path: inset(0 0 100% 0);
}
.l-container #feature [data-clippath-from-right] {
  clip-path: inset(0 0 0 100%);
}
.l-container #feature [data-clippath-from-bottom] {
  clip-path: inset(100% 0 0 0);
}
.l-container #feature [data-clippath-from-left] {
  clip-path: inset(0 100% 0 0);
}
.l-container #feature [data-clippath] {
  transition: clip-path 0.8s cubic-bezier(0.37, 0, 0.63, 1) 0s;
}
.l-container #feature [data-clippath].active {
  clip-path: inset(0);
}
.l-container #feature [data-overflow-hidden] {
  overflow: hidden;
}
.l-container #feature [data-overflow-hidden] [data-animation-target-left] {
  clip-path: inset(0 100% 0 0);
  transform: scale(1.5);
  transition: all 0.8s cubic-bezier(0.37, 0, 0.63, 1) 0s;
}
.l-container #feature [data-overflow-hidden] [data-animation-target-right] {
  clip-path: inset(0 0 0 100%);
  transform: scale(1.5);
  transition: all 0.8s cubic-bezier(0.37, 0, 0.63, 1) 0s;
}
.l-container #feature [data-overflow-hidden].active [data-animation-target-left],
.l-container #feature [data-overflow-hidden].active [data-animation-target-right] {
  clip-path: inset(0);
  transform: scale(1);
}
.l-container #feature .page__logo {
  position: fixed;
  width: 18.8rem;
  top: 50%;
  left: calc(50% - 49rem);
  transform: translate(-50%, -50%);
  opacity: 0;
}
.l-container #feature [data-to-top-button] {
  position: fixed;
  width: 1.8rem;
  height: 7.5rem;
  right: calc(50% - 27rem);
  top: 10rem;
  opacity: 0;
  transform: translateX(-50%);
  z-index: 10;
  cursor: pointer;
}

.pc-footer {
  margin: 0;
}

.area-header {
  max-width: 100%;
}

.breadcrumbs {
  max-width: 100%;
}

#feature-snslist {
  overflow: hidden;
}

.feature-snslist {
  overflow: hidden;
}

.l-footer,
.pc-footer {
  overflow: hidden;
  padding: 0;
}

.pc-footer {
  margin-top: 0;
}

.l-footer {
  padding-top: 0;
  overflow: hidden;
}

@media screen and (max-width: 1400px) {
  html {
    font-size: 0.7142857143vw;
  }
}