@charset "UTF-8";
/*アニメーション
-------------------*/
/*共通
-------------------*/
.l-container {
  width: 100%;
}

.l-header {
  padding: 0;
  position: relative;
  z-index: 999;
  background-color: #fff;
  overflow-x: clip;
}

.l-footer {
  padding: 0;
  position: relative;
  z-index: 999;
  background-color: #fff;
  overflow-x: clip;
}

.pc-footer {
  margin: 0;
}

.feature-snslist {
  position: relative;
  z-index: 3;
}

#feature {
  width: 100%;
  margin: 0 auto;
  color: #000;
  box-sizing: border-box;
  text-align: center;
  font-family: "Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", Meiryo, メイリオ, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-feature-settings: "palt";
  position: relative;
  overflow-x: clip;
  opacity: 0;
  transition: 0.3s;
}
#feature.is_show {
  opacity: 1;
}
#feature * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  pointer-events: none;
}
#feature a {
  width: 100%;
  height: auto;
  display: block;
  color: #000;
  pointer-events: auto;
  transition: 0.3s;
}
#feature a:hover {
  text-decoration: none;
  opacity: 0.7;
}
#feature img {
  width: 100%;
  height: auto;
  display: block;
}
#feature .js_anime.is_fade {
  opacity: 0;
  transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);
}
#feature .js_anime.is_clip {
  clip-path: inset(0 0 100% 0);
  transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);
}
#feature .js_anime.is_show.is_fade {
  opacity: 1;
}
#feature .js_anime.is_show.is_clip {
  clip-path: inset(0 0 0% 0);
}

#feature {
  /*メインビジュアル（.hero)
    -------------------*/
}
#feature .main {
  position: relative;
  background-color: #fff;
  display: flex;
}
#feature .hero {
  width: 50%;
  height: calc(100vh - 80px);
  position: sticky;
  top: 80px;
  left: 0;
}
#feature .hero .hero__img {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
#feature .hero .hero__img figure {
  width: 100%;
  height: 100%;
}
#feature .hero .hero__img figure img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
}
#feature .hero .hero__img::before {
  content: "";
  width: calc(354 * var(--vw) / 1400);
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgb(71, 0, 0) 0%, rgba(71, 0, 0, 0) 100%);
  opacity: 0.14;
}
#feature .hero .hero__ttl {
  width: calc(541 * var(--vw) / 1400);
  position: absolute;
  bottom: calc(24 * var(--vw) / 1400);
  left: calc(-5 * var(--vw) / 1400);
  z-index: 3;
}
#feature .sec {
  width: 50%;
  padding-top: calc(40 * var(--vw) * 0.35 / 750);
  padding-bottom: calc(306 * var(--vw) * 0.35 / 750);
  position: relative;
  z-index: 2;
  background-color: #fff;
}
#feature .sec .inner {
  width: calc(750 * var(--vw) * 0.35 / 750);
  margin: 0 auto;
  position: relative;
  z-index: 2;
  background-color: #fff;
}
#feature .sec .sec__credit {
  width: calc(660 * var(--vw) * 0.35 / 750);
  margin: 0 auto;
  position: relative;
  pointer-events: none;
}
#feature .sec .sec__credit .credit {
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0 calc(20 * var(--vw) * 0.35 / 750);
}
#feature .sec .sec__credit .credit .item {
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
}
#feature .sec .sec__credit .credit .item .link {
  width: -moz-fit-content;
  width: fit-content;
}
#feature .sec .sec__credit .credit .item .link p {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-size: calc(24 * var(--vw) * 0.35 / 750);
  line-height: calc(48 * var(--vw) * 0.35 / 750);
  letter-spacing: 0.015em;
}
#feature .sec .sec__credit.sec__credit01 {
  margin-top: calc(20 * var(--vw) * 0.35 / 750);
}
#feature .sec .sec__credit.sec__credit02 {
  margin-top: calc(20 * var(--vw) * 0.35 / 750);
}
#feature .sec .sec__credit.sec__credit03 {
  margin-top: calc(20 * var(--vw) * 0.35 / 750);
}
#feature .sec .sec__credit.sec__credit03 .credit .item:nth-child(5) {
  margin-right: calc(100 * var(--vw) * 0.35 / 750);
}
#feature .sec .sec__credit.sec__credit04 {
  margin-top: calc(18 * var(--vw) * 0.35 / 750);
}
#feature .sec .sec__credit.sec__credit04 .sec__creditinner {
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
  pointer-events: auto;
  transition: 0.3s;
}
#feature .sec .sec__credit.sec__credit04 .sec__creditinner:hover {
  opacity: 0.7;
}
#feature .sec .sec__credit.sec__credit04 .sec__creditlink {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
#feature .sec .sec__credit.sec__credit04 .credit .item .link {
  pointer-events: none;
}
#feature .sec .sec__ttl {
  font-family: "ryo-text-plusn", serif;
  font-size: calc(48 * var(--vw) * 0.35 / 750);
  line-height: calc(78 * var(--vw) * 0.35 / 750);
  letter-spacing: 0.09em;
  position: relative;
}
#feature .sec .sec__ttl.sec__ttl01 {
  margin-top: calc(86 * var(--vw) * 0.35 / 750);
}
#feature .sec .sec__ttl.sec__ttl02 {
  margin-top: calc(86 * var(--vw) * 0.35 / 750);
}
#feature .sec .sec__ttl.sec__ttl03 {
  margin-top: calc(86 * var(--vw) * 0.35 / 750);
}
#feature .sec .sec__ttl.sec__ttl04 {
  margin-top: calc(86 * var(--vw) * 0.35 / 750);
  letter-spacing: 0.14em;
}
#feature .sec .sec__txt {
  width: calc(660 * var(--vw) * 0.35 / 750);
  margin: 0 auto;
  font-size: calc(24 * var(--vw) * 0.35 / 750);
  line-height: calc(46 * var(--vw) * 0.35 / 750);
  letter-spacing: 0.05em;
  text-align: justify;
  position: relative;
}
#feature .sec .sec__txt.sec__txt01 {
  width: 100%;
  margin-top: calc(48 * var(--vw) * 0.35 / 750);
  text-align: center;
  line-height: calc(52 * var(--vw) * 0.35 / 750);
}
#feature .sec .sec__txt.sec__txt02 {
  margin-top: calc(38 * var(--vw) * 0.35 / 750);
}
#feature .sec .sec__txt.sec__txt03 {
  margin-top: calc(38 * var(--vw) * 0.35 / 750);
  letter-spacing: 0.045em;
}
#feature .sec .sec__txt.sec__txt04 {
  margin-top: calc(38 * var(--vw) * 0.35 / 750);
}
#feature .sec .sec__txt.sec__txt05 {
  margin-top: calc(38 * var(--vw) * 0.35 / 750);
  letter-spacing: 0.03em;
}
#feature .sec .sec__ttlimg {
  position: relative;
  z-index: 2;
}
#feature .sec .sec__ttlimg.sec__ttlimg01 {
  width: calc(630 * var(--vw) * 0.35 / 750);
  margin: calc(170 * var(--vw) * 0.35 / 750) 0 0 calc(52 * var(--vw) * 0.35 / 750);
}
#feature .sec .sec__ttlimg.sec__ttlimg02 {
  width: calc(650 * var(--vw) * 0.35 / 750);
  margin: calc(172 * var(--vw) * 0.35 / 750) 0 0 calc(50 * var(--vw) * 0.35 / 750);
}
#feature .sec .sec__ttlimg.sec__ttlimg03 {
  width: calc(430 * var(--vw) * 0.35 / 750);
  margin: calc(172 * var(--vw) * 0.35 / 750) 0 0 calc(160 * var(--vw) * 0.35 / 750);
}
#feature .sec .sec__ttlimg.sec__ttlimg04 {
  width: calc(508 * var(--vw) * 0.35 / 750);
  margin: calc(174 * var(--vw) * 0.35 / 750) 0 0 calc(122 * var(--vw) * 0.35 / 750);
}
#feature .sec .sec__img {
  position: relative;
  z-index: 2;
}
#feature .sec .sec__img.sec__img01 {
  width: calc(660 * var(--vw) * 0.35 / 750);
  margin: calc(52 * var(--vw) * 0.35 / 750) auto 0;
}
#feature .sec .sec__img.sec__img02 {
  width: calc(710 * var(--vw) * 0.35 / 750);
  margin: calc(50 * var(--vw) * 0.35 / 750) auto 0;
}
#feature .sec .sec__img.sec__img03 {
  width: calc(580 * var(--vw) * 0.35 / 750);
  margin: calc(80 * var(--vw) * 0.35 / 750) auto 0;
}
#feature .sec .sec__img.sec__img04 {
  width: calc(750 * var(--vw) * 0.35 / 750);
  margin: calc(50 * var(--vw) * 0.35 / 750) auto 0;
}
#feature .sec .sec__img.sec__img05 {
  width: calc(600 * var(--vw) * 0.35 / 750);
  margin: calc(80 * var(--vw) * 0.35 / 750) auto 0;
}
#feature .sec .sec__img.sec__img06 {
  width: calc(560 * var(--vw) * 0.35 / 750);
  margin: 0 calc(10 * var(--vw) * 0.35 / 750);
}
#feature .sec .sec__img.sec__img07 {
  width: calc(560 * var(--vw) * 0.35 / 750);
  margin: 0 calc(10 * var(--vw) * 0.35 / 750);
}
#feature .sec .sec__img.sec__img08 {
  width: calc(560 * var(--vw) * 0.35 / 750);
  margin: 0 calc(10 * var(--vw) * 0.35 / 750);
}
#feature .sec .sec__slider {
  width: 100%;
  margin-top: calc(50 * var(--vw) * 0.35 / 750);
}
#feature .sec .sec__btn {
  width: calc(676 * var(--vw) * 0.35 / 750);
  margin: calc(188 * var(--vw) * 0.35 / 750) auto 0;
  position: relative;
  z-index: 2;
}
#feature .sec .sec__staff {
  margin-top: calc(148 * var(--vw) * 0.35 / 750);
}
#feature .sec .sec__staff p:nth-child(1) {
  font-family: "brigade", sans-serif;
  font-size: calc(32 * var(--vw) * 0.35 / 750);
  line-height: calc(28 * var(--vw) * 0.35 / 750);
  letter-spacing: 0.2em;
}
#feature .sec .sec__staff p:nth-child(2) {
  margin-top: calc(16 * var(--vw) * 0.35 / 750);
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-size: calc(23 * var(--vw) * 0.35 / 750);
  line-height: calc(45 * var(--vw) * 0.35 / 750);
  letter-spacing: 0.05em;
}
#feature .sec .sec__block {
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
  cursor: pointer;
  pointer-events: auto;
}
@media screen and (min-width: 1400px) {
  #feature .hero {
    width: 50%;
    height: calc(100vh - 80px);
    position: sticky;
    top: 80px;
    left: 0;
  }
  #feature .hero .hero__img {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }
  #feature .hero .hero__img figure {
    width: 100%;
    height: 100%;
  }
  #feature .hero .hero__img figure img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: top center;
       object-position: top center;
  }
  #feature .hero .hero__img::before {
    content: "";
    width: 354px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background: linear-gradient(90deg, rgb(71, 0, 0) 0%, rgba(71, 0, 0, 0) 100%);
    opacity: 0.14;
  }
  #feature .hero .hero__ttl {
    width: 541px;
    position: absolute;
    bottom: 24px;
    left: -5px;
    z-index: 3;
  }
  #feature .sec {
    width: 50%;
    padding-top: 26.1333333333px;
    padding-bottom: 199.92px;
    position: relative;
    z-index: 2;
    background-color: #fff;
  }
  #feature .sec .inner {
    width: 490px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    background-color: #fff;
  }
  #feature .sec .sec__credit {
    width: 431.2px;
    margin: 0 auto;
    position: relative;
    pointer-events: none;
  }
  #feature .sec .sec__credit .credit {
    width: -moz-fit-content;
    width: fit-content;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0 13.0666666667px;
  }
  #feature .sec .sec__credit .credit .item {
    width: -moz-fit-content;
    width: fit-content;
    position: relative;
  }
  #feature .sec .sec__credit .credit .item .link {
    width: -moz-fit-content;
    width: fit-content;
  }
  #feature .sec .sec__credit .credit .item .link p {
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-size: 15.68px;
    line-height: 31.36px;
    letter-spacing: 0.015em;
  }
  #feature .sec .sec__credit.sec__credit01 {
    margin-top: 13.0666666667px;
  }
  #feature .sec .sec__credit.sec__credit02 {
    margin-top: 13.0666666667px;
  }
  #feature .sec .sec__credit.sec__credit03 {
    margin-top: 13.0666666667px;
  }
  #feature .sec .sec__credit.sec__credit03 .credit .item:nth-child(5) {
    margin-right: 65.3333333333px;
  }
  #feature .sec .sec__credit.sec__credit04 {
    margin-top: 11.76px;
  }
  #feature .sec .sec__credit.sec__credit04 .sec__creditinner {
    width: -moz-fit-content;
    width: fit-content;
    position: relative;
    pointer-events: auto;
    transition: 0.3s;
  }
  #feature .sec .sec__credit.sec__credit04 .sec__creditinner:hover {
    opacity: 0.7;
  }
  #feature .sec .sec__credit.sec__credit04 .sec__creditlink {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  #feature .sec .sec__credit.sec__credit04 .credit .item .link {
    pointer-events: none;
  }
  #feature .sec .sec__ttl {
    font-family: "ryo-text-plusn", serif;
    font-size: 31.36px;
    line-height: 50.96px;
    letter-spacing: 0.09em;
    position: relative;
  }
  #feature .sec .sec__ttl.sec__ttl01 {
    margin-top: 56.1866666667px;
  }
  #feature .sec .sec__ttl.sec__ttl02 {
    margin-top: 56.1866666667px;
  }
  #feature .sec .sec__ttl.sec__ttl03 {
    margin-top: 56.1866666667px;
  }
  #feature .sec .sec__ttl.sec__ttl04 {
    margin-top: 56.1866666667px;
    letter-spacing: 0.14em;
  }
  #feature .sec .sec__txt {
    width: 431.2px;
    margin: 0 auto;
    font-size: 15.68px;
    line-height: 30.0533333333px;
    letter-spacing: 0.05em;
    text-align: justify;
    position: relative;
  }
  #feature .sec .sec__txt.sec__txt01 {
    width: 100%;
    margin-top: 31.36px;
    text-align: center;
    line-height: 33.9733333333px;
  }
  #feature .sec .sec__txt.sec__txt02 {
    margin-top: 24.8266666667px;
  }
  #feature .sec .sec__txt.sec__txt03 {
    margin-top: 24.8266666667px;
    letter-spacing: 0.045em;
  }
  #feature .sec .sec__txt.sec__txt04 {
    margin-top: 24.8266666667px;
  }
  #feature .sec .sec__txt.sec__txt05 {
    margin-top: 24.8266666667px;
    letter-spacing: 0.03em;
  }
  #feature .sec .sec__ttlimg {
    position: relative;
    z-index: 2;
  }
  #feature .sec .sec__ttlimg.sec__ttlimg01 {
    width: 411.6px;
    margin: 111.0666666667px 0 0 33.9733333333px;
  }
  #feature .sec .sec__ttlimg.sec__ttlimg02 {
    width: 424.6666666667px;
    margin: 112.3733333333px 0 0 32.6666666667px;
  }
  #feature .sec .sec__ttlimg.sec__ttlimg03 {
    width: 280.9333333333px;
    margin: 112.3733333333px 0 0 104.5333333333px;
  }
  #feature .sec .sec__ttlimg.sec__ttlimg04 {
    width: 331.8933333333px;
    margin: 113.68px 0 0 79.7066666667px;
  }
  #feature .sec .sec__img {
    position: relative;
    z-index: 2;
  }
  #feature .sec .sec__img.sec__img01 {
    width: 431.2px;
    margin: 33.9733333333px auto 0;
  }
  #feature .sec .sec__img.sec__img02 {
    width: 463.8666666667px;
    margin: 32.6666666667px auto 0;
  }
  #feature .sec .sec__img.sec__img03 {
    width: 378.9333333333px;
    margin: 52.2666666667px auto 0;
  }
  #feature .sec .sec__img.sec__img04 {
    width: 490px;
    margin: 32.6666666667px auto 0;
  }
  #feature .sec .sec__img.sec__img05 {
    width: 392px;
    margin: 52.2666666667px auto 0;
  }
  #feature .sec .sec__img.sec__img06 {
    width: 365.8666666667px;
    margin: 0 6.5333333333px;
  }
  #feature .sec .sec__img.sec__img07 {
    width: 365.8666666667px;
    margin: 0 6.5333333333px;
  }
  #feature .sec .sec__img.sec__img08 {
    width: 365.8666666667px;
    margin: 0 6.5333333333px;
  }
  #feature .sec .sec__slider {
    width: 100%;
    margin-top: 32.6666666667px;
  }
  #feature .sec .sec__btn {
    width: 441.6533333333px;
    margin: 122.8266666667px auto 0;
    position: relative;
    z-index: 2;
  }
  #feature .sec .sec__staff {
    margin-top: 96.6933333333px;
  }
  #feature .sec .sec__staff p:nth-child(1) {
    font-family: "brigade", sans-serif;
    font-size: 20.9066666667px;
    line-height: 18.2933333333px;
    letter-spacing: 0.2em;
  }
  #feature .sec .sec__staff p:nth-child(2) {
    margin-top: 10.4533333333px;
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-size: 15.0266666667px;
    line-height: 29.4px;
    letter-spacing: 0.05em;
  }
  #feature .sec .sec__block {
    width: -moz-fit-content;
    width: fit-content;
    position: relative;
    cursor: pointer;
    pointer-events: auto;
  }
}/*# sourceMappingURL=style.css.map */