html, body {
  margin: 0;
  padding: 0;
}

html {
  font-size: 10px;
}
:root {
  --scale-PCwidth: 0.65333333;
}

.l-container {
  width: 100%;
}

.area-header {
  width: 100%;
}

#feature {
  margin: 0 auto;
  width: 100%;
  text-align: left;
  overflow: clip;
  background: #fff;
}
#feature * {
  box-sizing: border-box;
}
#feature *::after {
  box-sizing: border-box;
}
#feature *::before {
  box-sizing: border-box;
}
#feature figure, #feature h2, #feature p {
  margin: 0;
}
#feature a {
  display: block;
  text-decoration: none;
  position: relative;
}
#feature a:hover {
  cursor: pointer;
}
#feature .default-img {
  width: 100%;
  display: block;
}
#feature .pc-flex {
  position: relative;
  display: flex;
  width: 100%;
}
#feature .pc-center {
  position: relative;
  width: 49rem;
  flex-shrink: 0;
}
#feature .pc-side {
  position: sticky;
  top: 78px;
  height: calc(100vh - 78px);
  flex: 1 1 0;
}
#feature .pc-side__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
#feature .pc-side__logo {
  width: 14.4vw;
}
#feature .pc-side__btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 17.2vw;
  height: 3.4vw;
  border: max(1px, 0.08vw) solid #151515;
  color: #151515;
  font-family: "din-condensed", sans-serif;
  font-size: 1.3vw;
  font-weight: lighter;
  letter-spacing: 0.05em;
  transition: opacity 0.3s;
}
#feature .pc-side__btn:hover {
  opacity: 0.6;
}
#feature .main {
  position: relative;
  width: 100%;
  color: #151515;
  font-family: "din-condensed", sans-serif;
  font-weight: 400;
  font-style: normal;
}
#feature .sec {
  position: relative;
  width: 100%;
  overflow: hidden;
}
#feature .sec-gray {
  background: #f4f4f4;
}
#feature .sec-white {
  background: #fff;
}
#feature .sec-mv {
  height: calc(var(--scale-PCwidth) * 133.9rem);
}
#feature .sec-head {
  height: calc(var(--scale-PCwidth) * 25rem);
  background: #fff;
  border-bottom: 1px solid #151515;
}
#feature .sec-head__ttl {
  position: absolute;
  top: calc(var(--scale-PCwidth) * 15.5rem);
  left: calc(var(--scale-PCwidth) * 11.4rem);
  width: calc(var(--scale-PCwidth) * 51.8rem);
  margin: 0;
}
#feature .sec-g1 {
  height: calc(var(--scale-PCwidth) * 529rem);
}
#feature .sec-w1 {
  height: calc(var(--scale-PCwidth) * 416.4rem);
}
#feature .sec-g2 {
  height: calc(var(--scale-PCwidth) * 464rem);
}
#feature .sec-w2 {
  height: calc(var(--scale-PCwidth) * 287.2rem);
}
#feature .ph a {
  display: block;
}
#feature .ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#feature .g1-ph01 {
  position: absolute;
  top: calc(var(--scale-PCwidth) * 10rem);
  left: calc(var(--scale-PCwidth) * 11rem);
  width: calc(var(--scale-PCwidth) * 64rem);
  height: calc(var(--scale-PCwidth) * 96.1rem);
}
#feature .g1-ph02 {
  position: absolute;
  top: calc(var(--scale-PCwidth) * 110rem);
  left: calc(var(--scale-PCwidth) * 11.5rem);
  width: calc(var(--scale-PCwidth) * 52rem);
  height: calc(var(--scale-PCwidth) * 78.1rem);
}
#feature .g1-ph03 {
  position: absolute;
  top: calc(var(--scale-PCwidth) * 207.1rem);
  left: calc(var(--scale-PCwidth) * 15rem);
  width: calc(var(--scale-PCwidth) * 60rem);
  height: calc(var(--scale-PCwidth) * 90.1rem);
}
#feature .g1-ph04 {
  position: absolute;
  top: calc(var(--scale-PCwidth) * 301.1rem);
  left: calc(var(--scale-PCwidth) * 4rem);
  width: calc(var(--scale-PCwidth) * 54rem);
  height: calc(var(--scale-PCwidth) * 81.1rem);
}
#feature .w1-ph05 {
  position: absolute;
  top: calc(var(--scale-PCwidth) * 16.2rem);
  left: calc(var(--scale-PCwidth) * 15rem);
  width: calc(var(--scale-PCwidth) * 60rem);
  height: calc(var(--scale-PCwidth) * 90.1rem);
}
#feature .w1-ph06 {
  position: absolute;
  top: calc(var(--scale-PCwidth) * 110rem);
  left: calc(var(--scale-PCwidth) * 6rem);
  width: calc(var(--scale-PCwidth) * 54.1rem);
  height: calc(var(--scale-PCwidth) * 81.1rem);
}
#feature .w1-ph07 {
  position: absolute;
  top: calc(var(--scale-PCwidth) * 210rem);
  left: calc(var(--scale-PCwidth) * 0rem);
  width: calc(var(--scale-PCwidth) * 64rem);
  height: calc(var(--scale-PCwidth) * 96.1rem);
}
#feature .w1-ph08 {
  position: absolute;
  top: calc(var(--scale-PCwidth) * 310.1rem);
  left: calc(var(--scale-PCwidth) * 10rem);
  width: calc(var(--scale-PCwidth) * 54rem);
  height: calc(var(--scale-PCwidth) * 81.1rem);
}
#feature .g2-ph09 {
  position: absolute;
  top: calc(var(--scale-PCwidth) * 16rem);
  left: calc(var(--scale-PCwidth) * 0rem);
  width: calc(var(--scale-PCwidth) * 64rem);
  height: calc(var(--scale-PCwidth) * 96.1rem);
}
#feature .g2-ph10 {
  position: absolute;
  top: calc(var(--scale-PCwidth) * 115.9rem);
  left: calc(var(--scale-PCwidth) * 17rem);
  width: calc(var(--scale-PCwidth) * 58rem);
  height: calc(var(--scale-PCwidth) * 87.1rem);
}
#feature .g2-ph11 {
  position: absolute;
  top: calc(var(--scale-PCwidth) * 217.5rem);
  left: calc(var(--scale-PCwidth) * 7.5rem);
  width: calc(var(--scale-PCwidth) * 60rem);
  height: calc(var(--scale-PCwidth) * 90.1rem);
}
#feature .w2-ph12 {
  position: absolute;
  top: calc(var(--scale-PCwidth) * 15.9rem);
  left: calc(var(--scale-PCwidth) * 11rem);
  width: calc(var(--scale-PCwidth) * 64rem);
  height: calc(var(--scale-PCwidth) * 96.1rem);
}
#feature .sw {
  position: relative;
  width: 100%;
  height: 100%;
}
#feature .sw__item {
  position: absolute !important;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
  pointer-events: none;
}
#feature .sw__item.is-active {
  opacity: 1;
  pointer-events: auto;
}
#feature .movie {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
}
#feature .movie__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#feature .movie__sound {
  position: absolute;
  right: calc(var(--scale-PCwidth) * 2.6rem);
  bottom: calc(var(--scale-PCwidth) * 2.9rem);
  width: calc(var(--scale-PCwidth) * 5.8rem);
  height: calc(var(--scale-PCwidth) * 5.8rem);
  padding: 0;
  border: calc(var(--scale-PCwidth) * 0.2rem) solid #fff;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 2;
}
#feature .g1-movie {
  position: absolute;
  top: calc(var(--scale-PCwidth) * 392.2rem);
  left: calc(var(--scale-PCwidth) * 3.5rem);
  width: calc(var(--scale-PCwidth) * 68rem);
  height: calc(var(--scale-PCwidth) * 120.9rem);
}
#feature .g2-movie {
  position: absolute;
  top: calc(var(--scale-PCwidth) * 327.1rem);
  left: calc(var(--scale-PCwidth) * 3.5rem);
  width: calc(var(--scale-PCwidth) * 68rem);
  height: calc(var(--scale-PCwidth) * 120.9rem);
}
#feature .icon-sound {
  position: absolute;
  inset: 0;
  background: no-repeat center/60% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z' fill='%23fff'/%3E%3Cpath d='M15.5 9.5l5 5M20.5 9.5l-5 5' stroke-linecap='round'/%3E%3C/svg%3E");
}
#feature .movie.is-sound .icon-sound {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z' fill='%23fff'/%3E%3Cpath d='M15.5 9a4.5 4.5 0 010 6M18 6.5a8 8 0 010 11' stroke-linecap='round'/%3E%3C/svg%3E");
}
#feature .vt {
  margin: 0;
  writing-mode: vertical-rl;
  font-size: calc(var(--scale-PCwidth) * 2.7rem);
  line-height: 1;
  letter-spacing: 0.1em;
  font-weight: lighter;
  white-space: nowrap;
}
#feature .vt.is-w {
  color: #fff;
}
#feature .ht {
  margin: 0;
  font-size: calc(var(--scale-PCwidth) * 2.7rem);
  line-height: 1;
  letter-spacing: 0.1em;
  font-weight: lighter;
  white-space: nowrap;
}
#feature .collab {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: calc(var(--scale-PCwidth) * 3.4rem);
  height: calc(var(--scale-PCwidth) * 8.2rem);
  border: calc(var(--scale-PCwidth) * 0.15rem) solid #151515;
  writing-mode: vertical-rl;
  font-size: calc(var(--scale-PCwidth) * 2rem);
  line-height: 1;
  letter-spacing: 0.08em;
  font-weight: lighter;
}
#feature .collab.is-w {
  border-color: #fff;
  color: #fff;
}
#feature .g1-collab01 {
  position: absolute;
  top: calc(var(--scale-PCwidth) * 9.9rem);
  left: calc(var(--scale-PCwidth) * 5.5rem);
}
#feature .g1-name01 {
  position: absolute;
  top: calc(var(--scale-PCwidth) * 20.2rem);
  left: calc(var(--scale-PCwidth) * 5.75rem);
}
#feature .w1-collab03 {
  position: absolute;
  top: calc(var(--scale-PCwidth) * 16.1rem);
  left: calc(var(--scale-PCwidth) * 9.6rem);
}
#feature .w1-name03 {
  position: absolute;
  top: calc(var(--scale-PCwidth) * 30.6rem);
  left: calc(var(--scale-PCwidth) * 10.15rem);
}
#feature .w1-col03 {
  position: absolute;
  left: calc(var(--scale-PCwidth) * 61.65rem);
  bottom: calc(var(--scale-PCwidth) * 225.3rem);
  margin-bottom: -0.1em;
}
#feature .w1-col04 {
  position: absolute;
  top: calc(var(--scale-PCwidth) * 210.3rem);
  left: calc(var(--scale-PCwidth) * 65.75rem);
}
#feature .on-lbl {
  position: absolute;
  top: calc(var(--scale-PCwidth) * 2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--scale-PCwidth) * 2.1rem);
  z-index: 2;
  pointer-events: none;
}
#feature .on-lbl--tl {
  left: calc(var(--scale-PCwidth) * 2.2rem);
}
#feature .on-lbl--tr {
  right: calc(var(--scale-PCwidth) * 2.2rem);
}
#feature .on-col {
  position: absolute;
  bottom: calc(var(--scale-PCwidth) * 2.2rem);
  z-index: 2;
  pointer-events: none;
}
#feature .on-col--bl {
  left: calc(var(--scale-PCwidth) * 2.35rem);
}
#feature .on-col--br {
  right: calc(var(--scale-PCwidth) * 2.35rem);
}
#feature .line {
  position: absolute;
  background: #151515;
}
#feature .line--v {
  width: 1px;
}
#feature .line--h {
  height: 1px;
}
#feature .w1-line03 {
  top: calc(var(--scale-PCwidth) * 27.2rem);
  left: 0;
  width: calc(var(--scale-PCwidth) * 15rem);
}
#feature .w1-line04 {
  top: calc(var(--scale-PCwidth) * 223.7rem);
  left: calc(var(--scale-PCwidth) * 64rem);
  width: calc(var(--scale-PCwidth) * 11rem);
}
#feature .frame {
  position: absolute;
  border-top: 1px solid #151515;
  border-left: 1px solid #151515;
}
#feature .g2-frame06 {
  position: absolute;
  top: calc(var(--scale-PCwidth) * 215.3rem);
  left: calc(var(--scale-PCwidth) * 5.5rem);
  width: calc(var(--scale-PCwidth) * 61.8rem);
  height: calc(var(--scale-PCwidth) * 92.3rem);
}
#feature .g2-col06 {
  position: absolute;
  top: calc(var(--scale-PCwidth) * 214.05rem);
  right: calc(var(--scale-PCwidth) * 7.7rem);
  padding-left: calc(var(--scale-PCwidth) * 0.7rem);
  background: #f4f4f4;
  z-index: 1;
}
#feature .cr {
  position: absolute;
  left: 0;
  width: 100%;
}
#feature .cr .credit {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  white-space: nowrap;
}
#feature .cr li {
  display: inline;
  margin: 0;
  margin-inline: calc(var(--scale-PCwidth) * 0.6rem);
  font-size: calc(var(--scale-PCwidth) * 2.3rem);
  font-weight: 300;
  line-height: calc(var(--scale-PCwidth) * 4rem);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
#feature .cr li a {
  display: inline !important;
  color: #151515;
  text-decoration: none;
}
#feature .cr li .txt {
  display: inline-flex;
  gap: calc(var(--scale-PCwidth) * 0.6rem);
}
#feature .cr--b2 li:nth-child(2n):not(:last-child)::after,
#feature .cr--b3 li:nth-child(3n):not(:last-child)::after {
  content: "\a";
  white-space: pre;
}
#feature .cr--b2:not(.cr--v),
#feature .cr--b3:not(.cr--v) {
  width: max-content;
  transform: translateX(-50%);
}
#feature .g1-cr01 {
  top: calc(var(--scale-PCwidth) * 190rem);
  left: calc(var(--scale-PCwidth) * 37.5rem);
}
#feature .w1-cr03 {
  top: calc(var(--scale-PCwidth) * 193.1rem);
  left: calc(var(--scale-PCwidth) * 33.05rem);
}
#feature .w1-cr04 {
  top: calc(var(--scale-PCwidth) * 393.2rem);
  left: calc(var(--scale-PCwidth) * 37rem);
}
#feature .g2-cr06 {
  top: calc(var(--scale-PCwidth) * 309.7rem);
  left: calc(var(--scale-PCwidth) * 37.5rem);
}
#feature .w2-cr07 {
  top: calc(var(--scale-PCwidth) * 114rem);
  left: calc(var(--scale-PCwidth) * 43rem);
}
#feature .w2-cr08 {
  top: calc(var(--scale-PCwidth) * 223.4rem);
  left: calc(var(--scale-PCwidth) * 37.5rem);
}
#feature .cr--v {
  width: auto;
  writing-mode: vertical-rl;
}
#feature .cr--v .credit {
  height: 100%;
  text-align: end;
}
#feature .g1-cr02 {
  top: calc(var(--scale-PCwidth) * 301.1rem);
  left: calc(var(--scale-PCwidth) * 59.2rem);
  height: calc(var(--scale-PCwidth) * 81.1rem);
}
#feature .g2-cr05 {
  top: calc(var(--scale-PCwidth) * 115.9rem);
  left: calc(var(--scale-PCwidth) * 7.7rem);
  height: calc(var(--scale-PCwidth) * 87.1rem);
}
#feature .lblv {
  position: absolute;
}
#feature .lblv > .vt:last-child {
  margin-bottom: -0.1em;
}
#feature .lblv {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#feature .lblv .line {
  position: static;
  flex: 1 1 auto;
  min-height: calc(var(--scale-PCwidth) * 2rem);
}
#feature .g1-lbl01 {
  top: calc(var(--scale-PCwidth) * 106.2rem);
  left: calc(var(--scale-PCwidth) * 64.55rem);
  width: calc(var(--scale-PCwidth) * 2.7rem);
  height: calc(var(--scale-PCwidth) * 81.9rem);
  gap: calc(var(--scale-PCwidth) * 4rem);
}
#feature .g1-lbl02 {
  top: calc(var(--scale-PCwidth) * 207.3rem);
  left: calc(var(--scale-PCwidth) * 11.25rem);
  width: calc(var(--scale-PCwidth) * 2.7rem);
  height: calc(var(--scale-PCwidth) * 93.7rem);
  gap: calc(var(--scale-PCwidth) * 4.1rem);
}
#feature .g2-lbl05 {
  top: calc(var(--scale-PCwidth) * 16.1rem);
  left: calc(var(--scale-PCwidth) * 65.9rem);
  width: calc(var(--scale-PCwidth) * 3.4rem);
  height: calc(var(--scale-PCwidth) * 95.9rem);
}
#feature .g2-lbl05 .lblv__name {
  margin-top: calc(var(--scale-PCwidth) * 2.2rem);
}
#feature .g2-lbl05 .lblv__line {
  margin: calc(var(--scale-PCwidth) * 2.9rem) 0 calc(var(--scale-PCwidth) * 2rem);
}
#feature .lblh {
  position: absolute;
  display: flex;
  align-items: center;
  gap: calc(var(--scale-PCwidth) * 0.7rem);
}
#feature .lblh .line {
  position: static;
  flex: 1 1 auto;
  min-width: calc(var(--scale-PCwidth) * 2rem);
}
#feature .slider {
  position: absolute;
  top: calc(var(--scale-PCwidth) * 131.3rem);
  left: calc(var(--scale-PCwidth) * 0rem);
  width: calc(var(--scale-PCwidth) * 75rem);
  height: calc(var(--scale-PCwidth) * 90.1rem);
  overflow: hidden;
}
#feature .slider__track {
  display: flex;
  gap: calc(var(--scale-PCwidth) * 2rem);
  height: 100%;
  will-change: transform;
}
#feature .slider__item {
  flex: 0 0 calc(var(--scale-PCwidth) * 60rem);
  height: 100%;
}
#feature .slider__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#feature .slider__fixed {
  position: absolute;
  top: 0;
  left: calc(var(--scale-PCwidth) * 7.5rem);
  width: calc(var(--scale-PCwidth) * 60rem);
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
#feature .btn-all {
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid #151515;
  color: #151515;
  text-decoration: none;
  font-size: calc(var(--scale-PCwidth) * 4.4rem);
  letter-spacing: 0.05em;
  font-weight: lighter;
  transition: opacity 0.3s;
}
#feature .w2-btn {
  position: absolute;
  top: calc(var(--scale-PCwidth) * 242.6rem);
  left: calc(var(--scale-PCwidth) * 12.5rem);
  width: calc(var(--scale-PCwidth) * 50rem);
  height: calc(var(--scale-PCwidth) * 10rem);
}
#feature .js-fade {
  opacity: 0;
  transition: opacity 1.6s ease;
}
#feature .js-fade.is-show {
  opacity: 1;
}
#feature .js-in-left,
#feature .js-in-right {
  opacity: 0;
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
#feature .js-in-left.is-show,
#feature .js-in-right.is-show {
  opacity: 1;
  transform: translateX(0);
}
#feature .js-in-left {
  transform: translateX(calc(var(--scale-PCwidth) * -8rem));
}
#feature .js-in-right {
  transform: translateX(calc(var(--scale-PCwidth) * 8rem));
}
#feature .btn-all:hover {
  opacity: 0.6;
}
#feature .ph a:hover img,
#feature .slider__item:hover img {
  opacity: 0.85;
}
#feature .ph img, #feature .slider__item img {
  transition: opacity 0.3s;
}

.pc-footer {
  margin: 0;
}

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

.feature-snslist {
  overflow: hidden;
}

@media screen and (max-width: 1400px) {
  html {
    font-size: 0.7142857143vw;
  }
}
@media screen and (min-width: 751px) {
  .sp-btn, .sp_br {
    display: none;
  }
}