@charset "UTF-8";

body {
  margin: 0;
}

.l-container {
  width: 100%;
}

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

.l-container::after {
  content: "";
}

sup,
sub {
  position: static;
  top: auto;
}

html {
  scroll-behavior: smooth;
  font-size: 1.3333333vw;
}

html.js-anim .js-reveal {
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html.js-anim .js-reveal.is-inview {
  opacity: 1;
}

.is-noanim .js-reveal {
  transition: none !important;
  opacity: 1 !important;
}

.is-noanim .intro__arrow img {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .js-reveal {
    transition: none !important;
    opacity: 1 !important;
  }

  html:not(.is-forceanim) .intro__arrow img {
    animation: none !important;
  }

  html:not(.is-forceanim) .switcher .switch-img {
    transition: none !important;
  }

  html:not(.is-forceanim) {
    scroll-behavior: auto;
  }
}

.feature {
  box-sizing: border-box;
  color: #272729;
  margin: 0 auto;
  position: relative;
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2rem;
  text-spacing-trim: space-all;
  line-break: strict;
  background: #fff;
}

.feature * {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  box-sizing: border-box;
  scroll-margin-top: 50px;
}

.feature h1,
.feature h2,
.feature h3,
.feature h4,
.feature h5,
.feature h6,
.feature strong,
.feature b {
  font-weight: inherit;
}

.feature .pc {
  display: none;
}

.feature a {
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) {

  .feature a img,
  .feature a:not(:has(img:not([alt=""]))),
  .feature button {
    transition: opacity .3s;
  }

  .feature a:has(img:not([alt=""])):hover img {
    opacity: .7;
  }

  .feature a:not(:has(img:not([alt=""]))):hover,
  .feature button:hover {
    opacity: .7;
    text-decoration: none;
  }
}

.feature img {
  display: block;
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}

.feature ul {
  list-style: none;
}

.feature .frame-main__inner {
  display: flow-root;
  width: 100%;
  margin: auto;
  background: #fff;
  padding-bottom: 10rem;
}

.feature .ttl,
.feature .fv__ttl,
.feature .allitems,
.feature .side-ttl,
.feature .side-btn {
  font-family: "ivyora-display", serif;
  font-weight: 400;
}

.feature .copy,
.feature .credit,
.feature .staff,
.feature .txt04,
.feature .txt05,
.feature .side-ttl__l4 {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 500;
}

.feature .photo {
  position: relative;
}

.feature .photo>a {
  display: block;
  height: 100%;
  background: linear-gradient(#fff, #fff) center / calc(100% - 2px) calc(100% - 2px) no-repeat;
}

.feature .photo img,
.feature .photo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature .photo video {
  display: block;
}

.feature .photo.-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: .2rem solid #272729;
  pointer-events: none;
  z-index: 2;
}

.feature .ov {
  position: absolute;
  z-index: 1;
  white-space: nowrap;
  pointer-events: none;
}

.feature .ttl {
  font-size: 3rem;
  line-height: 1.44;
  letter-spacing: .05em;
}

.feature .copy {
  font-size: 2.2rem;
  line-height: 1.45;
  letter-spacing: .05em;
}

.feature .v-rl {
  writing-mode: vertical-rl;
  text-orientation: sideways;
  line-height: 1;
  white-space: nowrap;
}

.feature .v-rl.-up {
  transform: rotate(180deg);
}

.feature .switcher {
  position: relative;
}

.feature .switcher .switch-img {
  transition: opacity 1.2s ease;
}

.feature .switcher .switch-img+.switch-img {
  position: absolute;
  inset: 0;
}

.feature .switcher .switch-img:not(.is-current) {
  opacity: 0;
}

.feature .switcher .switch-img.is-current {
  opacity: 1;
}

.feature .credit {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  column-gap: .915rem;

  margin-left: auto;
  margin-right: auto;
  font-size: 2.2rem;
  line-height: 1.8;
  letter-spacing: .05em;
  color: #272729;
}

.feature .credit.-blue {
  color: #9ecddd;
}

.feature .credit .item {
  position: relative;
  white-space: nowrap;
}

.feature .credit .link {
  color: inherit;
}

.feature .credit .txt {
  text-transform: uppercase;
}

.feature .look06 {
  width: 75rem;
  height: 100rem;
  margin-top: 0rem;
}

.feature .fv__ttl {
  position: static;
  color: #fff;
}

.feature .fv__ttl .ov {
  display: block;
  color: #fff;
}

.feature .txt01 {
  top: 38.92rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 3.2rem;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.feature .txt02 {
  top: 42.5464rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10.34rem;
  line-height: 1.08;
  letter-spacing: -.01em;
}

.feature .txt03 {
  top: 53.855rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 3rem;
  line-height: 1.09;
  letter-spacing: -.005em;
}

.feature .txt04 {
  top: 89.5935rem;
  left: 2.6rem;
  font-size: 2.1rem;
  line-height: 1.33;
  letter-spacing: .05em;
  color: #fff;
}

.feature .intro {
  position: relative;
  display: flow-root;
}

.feature .txt06 {
  margin-top: 15.025rem;
  margin-left: 9.02rem;
  font-size: 3rem;
  line-height: 1.8;
  letter-spacing: .05em;
  font-feature-settings: "palt";
}

.feature .txt07 {
  margin-top: 2.493rem;
  margin-left: 9.02rem;
  font-size: 2.4rem;
  line-height: 1.8;
  letter-spacing: .05em;
  font-weight: 350;
  font-feature-settings: "palt";
}

.feature .txt05 {
  position: absolute;
  top: 15.3rem;
  left: 61.288rem;
  font-size: 2.2rem;
  letter-spacing: .05em;
  color: #9ecddd;
}

.feature .intro__arrow {
  position: absolute;
  top: 15.3rem;
  left: 65.25rem;
  width: 1.4rem;
  height: 38.5rem;
  overflow: hidden;
}

.feature .intro__arrow img {
  width: 100%;
  height: 100%;
  animation: arrowPass 2.5s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

@keyframes arrowPass {
  0% {
    transform: translateY(-100%);
  }

  50% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(100%);
  }
}

.feature .txt08 {
  margin-top: 18.965rem;
  text-align: center;
  color: #9ecddd;
}

.feature .look07 {
  width: 58rem;
  height: 87rem;
  margin-top: 1.784rem;
  margin-left: 8.5rem;
}

.feature .look08 {
  width: 58rem;
  height: 87rem;
  margin-top: 3.4rem;
  margin-left: 8.5rem;
}

.feature .txt09 {
  top: 33.255rem;
  left: 2.7rem;
  color: #c5eef9;
}

.feature .credit01 {
  margin-top: 2.038rem;
  max-width: 49.4727rem;
  height: 7.9200rem;
}

.feature .look09 {
  width: 75rem;
  height: 112.5rem;
  margin-top: 19.294rem;
}

.feature .txt10 {
  top: 47.05rem;
  left: 2rem;
  color: #fff;
}

.feature .txt11 {
  top: 52.812rem;
  left: 2rem;
  line-height: 1.18;
  color: #fff;
}

.feature .txt12 {
  top: 52.812rem;
  right: 2rem;
  text-align: right;
  line-height: 1.18;
  color: #fff;
  text-shadow: 1px 1px 10px rgb(57, 59, 61, 0.5);
}

.feature .look10 {
  width: 75rem;
  height: 133.333rem;
  margin-top: 3.383rem;
}

.feature .look11 {
  width: 54rem;
  height: 81rem;
  margin-top: 7.934rem;
  margin-left: 10.5rem;
}

.feature .credit02 {
  margin-top: 2.052rem;
  max-width: 48.1203rem;
  height: 7.9200rem;
}

.feature .look12 {
  width: 75rem;
  height: 112.5rem;
  margin-top: 19.48rem;
}

.feature .txt13 {
  top: 97.62rem;
  left: 3rem;
  color: #fff;
}

.feature .txt14 {
  top: 103.265rem;
  left: 3rem;
  color: #fff;
}

.feature .look13 {
  width: 60rem;
  height: 106.667rem;
  margin-top: 3.317rem;
  margin-left: 15rem;
}

.feature .look14 {
  width: 58rem;
  height: 87rem;
  margin-top: 3.466rem;
}

.feature .credit03 {
  margin-top: 2.059rem;
  max-width: 69.4156rem;
  height: 7.9200rem;
}

.feature .look15 {
  width: 75rem;
  height: 112.5rem;
  margin-top: 19.373rem;
}

.feature .txt15 {
  top: 1.95rem;
  left: 70.705rem;
  color: #fff;
}

.feature .txt16 {
  top: 105.36rem;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 10px rgb(57, 59, 61, 0.5);
}

.feature .look16 {
  width: 54rem;
  height: 81rem;
  margin-top: 3.65rem;
  margin-left: 10.5rem;
}

.feature .look17 {
  width: 54rem;
  height: 64rem;
  margin-top: 3.4rem;
  margin-left: 10.5rem;
}

.feature .credit04 {
  margin-top: 2.153rem;
  max-width: 64.6648rem;
  height: 7.9200rem;
}

.feature .look18 {
  width: 75rem;
  height: 112.5rem;
  margin-top: 19.279rem;
}

.feature .txt17 {
  top: 98.67rem;
  right: 3.12rem;
  text-align: right;
  color: #fff;
}

.feature .txt18 {
  top: 103.345rem;
  right: 3.11rem;
  text-align: right;
  color: #fff;
}

.feature .credit05 {
  margin-top: 1.989rem;
  max-width: 44.5320rem;
  height: 7.9200rem;
}

.feature .look19 {
  width: 75rem;
  height: 112.5rem;
  margin-top: 19.293rem;
}

.feature .txt19 {
  top: 11.17rem;
  left: 0;
  right: 0;
  text-align: center;
  color: #9ecddd;
}

.feature .txt20 {
  top: 16.245rem;
  left: 0;
  right: 0;
  text-align: center;
  color: #9ecddd;
}

.feature .look20 {
  width: 58rem;
  height: 87rem;
  margin-top: 3.35rem;
  margin-left: 8.5rem;
}

.feature .credit06 {
  margin-top: 2.038rem;
  max-width: 70.8914rem;
  height: 7.9200rem;
}

.feature .look21 {
  width: 75rem;
  height: 112.5rem;
  margin-top: 19.284rem;
}

.feature .txt21 {
  top: 1.71rem;
  left: 70.765rem;
  color: #fff;
}

.feature .txt22 {
  top: 53.92rem;
  left: 2.02rem;
  color: #fff;
}

.feature .look22 {
  width: 60rem;
  height: 90rem;
  margin-top: 3.45rem;
  margin-left: 7.5rem;
}

.feature .look23 {
  width: 60rem;
  height: 90rem;
  margin-top: 3.4rem;
  margin-left: 7.5rem;
}

.feature .credit07 {
  margin-top: 1.938rem;
  max-width: 71.5852rem;
  height: 7.9200rem;
}

.feature .look24 {
  width: 75rem;
  height: 112.5rem;
  margin-top: 19.284rem;
}

.feature .txt23 {
  top: 45.39rem;
  left: 4.05rem;
  color: #fff;
}

.feature .txt24 {
  top: 50.995rem;
  left: 4rem;
  color: #fff;
}

.feature .credit08 {
  margin-top: 2.088rem;
  max-width: 47.6500rem;
  height: 3.9600rem;
}

.feature .look25 {
  width: 54rem;
  height: 81rem;
  margin-top: 19.294rem;
  margin-left: 10.5rem;
}

.feature .txt26 {
  margin-top: 1.413rem;
  text-align: center;
}

.feature .look26 {
  width: 54rem;
  height: 81rem;
  margin-top: 1.875rem;
  margin-left: 10.5rem;
}

.feature .txt25 {
  top: -32.3rem;
  left: 58.035rem;
  color: #272729;
}

.feature .credit09 {
  margin-top: 1.938rem;
  max-width: 61.2922rem;
  height: 7.9200rem;
}

.feature .look27 {
  width: 75rem;
  height: 112.5rem;
  margin-top: 19.394rem;
}

.feature .txt27 {
  top: 94.56rem;
  left: 3rem;
  color: #fff;
}

.feature .txt28 {
  top: 100.165rem;
  left: 3rem;
  color: #fff;
}

.feature .look28 {
  width: 60rem;
  height: 106.667rem;
  margin-top: 3.317rem;
  margin-left: 3.5rem;
}

.feature .look29 {
  width: 60rem;
  height: 90rem;
  margin-top: 3.566rem;
  margin-left: 15rem;
}

.feature .credit10 {
  margin-top: 2.038rem;
  max-width: 65.8797rem;
  height: 7.9200rem;
  position: relative;
  left: 1.5rem;
}

.feature .look30 {
  width: 75rem;
  height: 112.5rem;
  margin-top: 19.284rem;
}

.feature .txt29 {
  top: 105.46rem;
  left: 0;
  right: 0;
  text-align: center;
  color: #9ecddd;
}

.feature .look31 {
  width: 75rem;
  height: 112.5rem;
  margin-top: 3.5rem;
}

.feature .txt30 {
  top: 1.99rem;
  left: 70.705rem;
  color: #9ecddd;
}

.feature .credit11 {
  margin-top: 2.088rem;
  max-width: 61.3531rem;
  height: 7.9200rem;
}

.feature .txt31 {
  margin-top: 18.776rem;
  text-align: center;
}

.feature .look32 {
  width: 68rem;
  height: 102rem;
  margin-top: 2.646rem;
  margin-left: 3.5rem;
}

.feature .txt32 {
  top: 90.115rem;
  right: 2.6rem;
  text-align: right;
  color: #272729;
}

.feature .look33 {
  width: 68rem;
  height: 120.889rem;
  margin-top: 3.356rem;
  margin-left: 3.5rem;
}

.feature .credit12 {
  margin-top: 2.093rem;
  max-width: 58.3289rem;
  height: 7.9200rem;
}

.feature .look34 {
  width: 54rem;
  height: 64rem;
  margin-top: 19.444rem;
  margin-left: 10.5rem;
}

.feature .credit13 {
  margin-top: 2.138rem;
  max-width: 15.3625rem;
  height: 3.9600rem;
  position: relative;
  left: -.3rem;
}

.feature .look35 {
  width: 60rem;
  height: 90rem;
  margin-top: 19.404rem;
  margin-left: 7.5rem;
}

.feature .look36 {
  width: 60rem;
  height: 90rem;
  margin-top: 3.4rem;
  margin-left: 7.5rem;
}

.feature .txt33 {
  top: 6.19rem;
  right: 3.27rem;
  text-align: right;
  color: #272729;
}

.feature .txt34 {
  top: 11.795rem;
  left: 42.01rem;
  color: #272729;
}

.feature .credit14 {
  margin-top: 1.991rem;
  max-width: 69.7680rem;
  height: 7.9200rem;
}

.feature .look37 {
  width: 75rem;
  height: 112.5rem;
  margin-top: 19.441rem;
}

.feature .txt35 {
  top: 105.39rem;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
}

.feature .look38 {
  width: 48rem;
  height: 72rem;
  margin-top: 3.35rem;
  margin-left: 23.6rem;
}

.feature .txt36 {
  top: 26.505rem;
  left: -19.63rem;
  color: #272729;
}

.feature .credit15 {
  position: absolute;
  top: 41.86rem;
  left: -19.63rem;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.feature .look39 {
  width: 75rem;
  height: 112.5rem;
  margin-top: 19.95rem;
}

.feature .txt37 {
  top: 93.67rem;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
}

.feature .txt38 {
  top: 99.285rem;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
}

.feature .credit16 {
  margin-top: 2.088rem;
  max-width: 61.2320rem;
  height: 7.9200rem;
}

.feature .allitems {
  width: 36.4rem;
  height: 20rem;
  margin-top: 15.034rem;
  margin-left: 19.3rem;
}

.feature .allitems a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: .2rem solid #9ecddd;
  border-radius: 50%;
  text-align: center;
  color: #9ecddd;
  font-size: 4.42rem;
  line-height: 1.2;
  letter-spacing: 0;
}

.feature .txt40 {
  margin-top: 11.129rem;
  text-align: center;
  font-size: 2.4rem;
  line-height: 1.65;
  letter-spacing: .05em;
}

.feature .fbanner {

  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  z-index: 10;
}

.feature .fbanner.is-end {
  position: absolute;
}

.feature .fbanner__link {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s ease-in-out, visibility 1.1s ease-in-out;
}

.feature .fbanner.is-show .fbanner__link {
  opacity: 1;
  visibility: visible;
}

.feature .fbanner__term {
  position: relative;
  display: block;
  width: 100%;
}

.feature .fbanner__term img {
  width: 100%;
  height: auto;
}

.feature .fbanner__term.-term2 {
  display: none;
}

.feature .fbanner[data-term="2"] .-term1 {
  display: none;
}

.feature .fbanner[data-term="2"] .-term2 {
  display: block;
}

@media screen and (max-width: 750px) {
  .feature .sp-contents {
    display: contents;
  }

  .feature .frame-main__inner {
    padding-bottom: 31.1rem;
  }

  .feature:has(.fbanner[data-term="2"]) .frame-main__inner {
    padding-bottom: 20rem;
  }
}

@media screen and (min-width: 751px) {

  html {
    font-size: min(0.485714vw, 6.8px);
  }

  .feature .pc {
    display: block;
  }

  .feature .sp,
  .feature .frame>.sp {
    display: none;
  }

  .feature .frame>.pc {
    display: contents;
  }

  .feature {
    --pcu: 0.0714286vw;
    --rail-top: 80px;
    background: #d8e9f0;
  }

  .feature .frame {
    display: flex;
    align-items: stretch;
    justify-content: center;
  }

  .feature .frame-main {
    flex: 0 0 auto;
    width: 75rem;
  }

  .feature .frame-side {
    position: relative;
    flex: 1 1 0;
  }

  .feature .frame-side__inner {
    position: sticky;
    top: var(--rail-top);
    height: calc(100vh - var(--rail-top));
    margin-bottom: calc(80 * var(--pcu));
  }

  .feature .side__body {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: #272729;
  }

  .feature .side-ttl span {
    display: block;
    line-height: 1.2;
  }

  .feature .side-ttl__l1 {
    font-size: calc(13.79 * var(--pcu));
    letter-spacing: -.01em;
  }

  .feature .side-ttl__l2 {
    margin-top: calc(-1.43 * var(--pcu));
    font-size: calc(44.56 * var(--pcu));
    letter-spacing: -.01em;
  }

  .feature .side-ttl__l3 {
    margin-top: calc(-4.04 * var(--pcu));
    font-size: calc(12.93 * var(--pcu));
    letter-spacing: -.005em;
  }

  .feature .side-ttl__l4 {
    margin-top: calc(21.3 * var(--pcu));
    font-size: calc(10 * var(--pcu));
    line-height: 1.4;
    letter-spacing: .05em;
  }

  .feature .side-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: calc(156 * var(--pcu));
    height: calc(86 * var(--pcu));
    border: max(1px, calc(1 * var(--pcu))) solid #272729;
    border-radius: 50%;
    font-size: calc(19.01 * var(--pcu));
    line-height: 1.2;
    letter-spacing: 0;
    color: #272729;
  }
}