@charset "UTF-8";
:root {
  --vw: (100vw / 1400) * var(--ratio);
  --ratio: calc(var(--pc-width) / 750);
  --pc-width: 510;
}

/*共通
----------------------------*/
html {
  scroll-behavior: smooth;
}

.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 {
  width: 100%;
  margin: 0 auto;
  color: #91cbe2;
  background-color: #ebf8fd;
  box-sizing: border-box;
  font-family: "ryo-gothic-plusn", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "palt";
  position: relative;
  overflow: clip;
}
#feature * {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
#feature a {
  width: 100%;
  height: auto;
  display: block;
  color: #91cbe2;
  text-decoration: none;
}
#feature a:hover {
  opacity: 1;
}
#feature img, #feature svg {
  width: 100%;
  height: auto;
  display: block;
}
#feature .inner {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

/*Wrap 
----------------------------*/
#feature .contentsWrap {
  display: grid;
  grid-template-columns: 1fr 36.4285714286vw 1fr;
  width: 100%;
  position: relative;
}
#feature .mainWrap {
  order: 2;
}
#feature .mainWrap .inner {
  margin: 0 auto;
  position: relative;
  overflow: clip;
  z-index: 2;
}
#feature .leftWrap {
  background-color: #e5f4fb;
  order: 1;
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#feature .leftWrap .leftWrap__logo {
  width: 17.0714285714vw;
}
#feature .leftWrap .bg-bubble_container {
  width: 25.7142857143vw;
  position: fixed;
  top: -2.1428571429vw;
  left: -2.1428571429vw;
}
#feature .rightWrap {
  background-color: #e5f4fb;
  order: 3;
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  display: flex;
  justify-content: center;
  align-items: center;
}
#feature .rightWrap .rightWrap__all-btn {
  width: 18.5714285714vw;
}
#feature .rightWrap .bg-bubble_container {
  width: 25.7142857143vw;
  position: fixed;
  bottom: -2.1428571429vw;
  right: -2.1428571429vw;
}

/*アニメーション
----------------------------*/
body {
  position: relative;
}

.bubble {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  pointer-events: none; /* マウスイベントを無視 */
  background-size: contain; /* 画像を枠内に収める */
  background-repeat: no-repeat;
  background-position: center;
  will-change: transform;
}

#feature .fadeIn {
  opacity: 0;
  transition: opacity 1.2s ease, transform 1.2s ease;
}
#feature .fadeIn.is-show {
  opacity: 1;
}
#feature .fadeUp {
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
  transform: translateY(5rem);
}
#feature .fadeUp.is-show {
  transform: translateY(0);
  opacity: 1;
}
#feature .bg-bubble_container {
  width: calc(400 * var(--vw));
  position: absolute;
  z-index: -1;
}
#feature .mask-line {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 16px;
  /* 線の間隔を1（全画面分）にし、最初は1分だけオフセット（ズレ）させて非表示にする */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
#feature .mask-line.is-show {
  animation: draw 1s ease-in-out forwards;
}
@keyframes draw {
  to {
    /* オフセットを0にすることで、線が完全に表示される */
    stroke-dashoffset: 0;
  }
}

/*メインビジュアル（.hero)
----------------------------*/
#feature .hero {
  position: relative;
  background: url("../img/sec_bg.png") no-repeat;
  background-size: calc(900 * var(--vw));
  background-position: center calc(740 * var(--vw));
  padding: calc(20 * var(--vw)) 0 0;
}
#feature .hero .svg-mask-container {
  width: calc(297 * var(--vw));
  position: absolute;
  top: calc(112 * var(--vw));
  left: calc(146 * var(--vw));
  z-index: 10;
}
#feature .hero .mask-line.is-show {
  animation-delay: 1s;
}
#feature .hero .bg-bubble_container {
  top: calc(-100 * var(--vw));
  left: calc(-150 * var(--vw));
  z-index: 0;
}
#feature .hero .hero__img {
  height: calc(1120 * var(--vw));
  position: relative;
  z-index: 1;
}
#feature .hero .hero__img img {
  width: calc(852 * var(--vw));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#feature .hero .hero__txt {
  margin: calc(86 * var(--vw)) auto 0;
}
#feature .hero .hero__txt .hero__ttl {
  width: calc(514 * var(--vw));
  margin: 0 auto;
}
#feature .hero .hero__txt p {
  margin: calc(54 * var(--vw)) auto 0;
  font-size: calc(26 * var(--vw));
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: center;
}

/*.sec
----------------------------*/
#feature .sec {
  position: relative;
  z-index: 10;
}
#feature .sec .sec__img, #feature .sec .sec__box {
  position: relative;
}
#feature .sec .sec__deco {
  position: absolute;
  z-index: -1;
}
#feature .sec .sec__txt {
  font-size: calc(24 * var(--vw));
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: center;
}
#feature .sec__credit {
  text-align: center;
}
#feature .sec__credit .item {
  display: inline-block;
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 500;
  font-size: calc(22 * var(--vw));
  letter-spacing: 0.075em;
  line-height: 1;
  margin: 0 calc(14 * var(--vw)) calc(12 * var(--vw)) 0;
  color: #91cbe2;
}
#feature .sec__credit .item.-mr0, #feature .sec__credit .item:last-of-type {
  margin-right: 0;
}
#feature .sticky-content {
  position: sticky;
  top: 16vh;
}
#feature .sticky-on {
  height: calc(1125 * var(--vw));
  display: grid;
  place-items: center;
}
#feature .sec01 {
  background: url("../img/sec_bg.png") no-repeat;
  background-size: calc(900 * var(--vw));
  background-position: top center;
  padding: calc(234 * var(--vw)) 0 0;
}
#feature .sec01 .js-readmore__hidden {
  display: grid;
  transition: all 0.5s ease-in-out;
  grid-template-rows: 0fr;
}
#feature .sec01 .js-readmore__hidden.is-open {
  grid-template-rows: 1fr;
}
#feature .sec01 .js-readmore__hidden .content {
  overflow: hidden;
  margin: calc(20 * var(--vw)) auto 0;
}
#feature .sec01 .js-readmore__hidden .content p {
  font-family: "ryo-gothic-plusn", sans-serif;
  font-size: calc(24 * var(--vw));
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: center;
}
#feature .sec01 .js-readmore__hidden .content p:nth-of-type(2) {
  margin-bottom: calc(50 * var(--vw));
}
#feature .sec01 .js-readmore__button {
  -webkit-appearance: none;
          appearance: none;
  background: none;
  border: none;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--vw));
  margin-top: calc(14 * var(--vw));
  position: relative;
}
#feature .sec01 .js-readmore__button::after {
  content: "";
  display: block;
  width: 100%;
  height: calc(1 * var(--vw));
  background-color: #91cbe2;
  position: absolute;
  bottom: calc(-14 * var(--vw));
}
#feature .sec01 .js-readmore__button .plus {
  width: calc(10 * var(--vw));
  height: calc(10 * var(--vw));
  position: relative;
}
#feature .sec01 .js-readmore__button .plus g path {
  transition: transform 0.3s ease;
}
#feature .sec01 .js-readmore__button[aria-expanded=true] {
  margin-top: calc(30 * var(--vw));
}
#feature .sec01 .js-readmore__button[aria-expanded=true] .readmore__button-text {
  width: calc(76 * var(--vw));
  height: calc(16 * var(--vw));
}
#feature .sec01 .js-readmore__button[aria-expanded=true] .plus g path {
  transform: translate(50%, -10%) rotate(45deg);
}
#feature .sec01 .js-readmore__button[aria-expanded=false] .readmore__button-text {
  width: calc(131 * var(--vw));
  height: calc(16 * var(--vw));
}
#feature .sec01 .svg-mask-container {
  width: calc(490 * var(--vw));
  margin: 0 auto;
}
#feature .sec01 .box01 {
  margin: calc(24 * var(--vw)) auto 0;
}
#feature .sec01 .box02 {
  margin: calc(92 * var(--vw)) auto 0;
}
#feature .sec01 .box02 .img01 {
  width: calc(710 * var(--vw));
  margin: 0 auto;
}
#feature .sec01 .box02 .credit01 {
  margin: calc(50 * var(--vw)) auto 0;
}
#feature .sec01 .box03 {
  margin: calc(140 * var(--vw)) auto 0;
}
#feature .sec01 .box03 .swiper01 {
  margin: 0 0 0 calc(-30 * var(--vw));
}
#feature .sec01 .box03 .img02 {
  width: calc(750 * var(--vw));
}
#feature .sec01 .box03 .credit02 {
  margin: calc(52 * var(--vw)) auto 0;
}
#feature .sec01 .box03 .deco01 {
  width: calc(400 * var(--vw));
  top: calc(-60 * var(--vw));
  right: calc(-80 * var(--vw));
}
#feature .sec01 .box04 {
  margin: calc(140 * var(--vw)) auto 0;
}
#feature .sec01 .box04 .swiper02 {
  margin: 0 calc(-60 * var(--vw)) 0 0;
}
#feature .sec01 .box04 .img03 {
  width: calc(740 * var(--vw));
  margin: 0 auto;
}
#feature .sec01 .box04 .credit03 {
  margin: calc(50 * var(--vw)) auto 0;
}
#feature .sec01 .box04 .deco02 {
  width: calc(400 * var(--vw));
  top: calc(150 * var(--vw));
  left: calc(-120 * var(--vw));
}
#feature .sec02 {
  background: url("../img/sec_bg.png") no-repeat;
  background-size: calc(900 * var(--vw));
  background-position: top center;
  padding: calc(232 * var(--vw)) 0 0;
}
#feature .sec02 .svg-mask-container {
  width: calc(527 * var(--vw));
  margin: 0 auto;
}
#feature .sec02 .txt01 {
  margin: calc(48 * var(--vw)) auto 0;
}
#feature .sec02 .box01 {
  margin: calc(70 * var(--vw)) auto 0;
}
#feature .sec02 .box01 .img01 {
  width: calc(750 * var(--vw));
  margin: auto;
}
#feature .sec02 .box01 .img02 {
  width: calc(750 * var(--vw));
  margin: auto;
}
#feature .sec02 .box01 .img03 {
  width: calc(630 * var(--vw));
  margin: 0 auto;
}
#feature .sec02 .credit04 {
  margin: calc(50 * var(--vw)) auto 0;
}
#feature .sec02 .box02 {
  margin: calc(190 * var(--vw)) auto 0;
}
#feature .sec02 .box02 .img04 {
  width: calc(750 * var(--vw));
  margin: auto;
}
#feature .sec02 .box02 .img05 {
  width: calc(630 * var(--vw));
  margin: 0 auto;
}
#feature .sec02 .credit05 {
  margin: calc(50 * var(--vw)) auto 0;
}
#feature .sec02 .box03 {
  margin: calc(190 * var(--vw)) auto 0;
}
#feature .sec02 .box03 .img06 {
  width: calc(750 * var(--vw));
  margin: auto;
}
#feature .sec02 .box03 .img07 {
  width: calc(630 * var(--vw));
  margin: 0 auto;
}
#feature .sec02 .credit06 {
  margin: calc(50 * var(--vw)) auto 0;
}
#feature .sec02 .box04 {
  margin: calc(190 * var(--vw)) auto 0;
}
#feature .sec02 .box04 .img08 {
  width: calc(700 * var(--vw));
  margin: auto;
}
#feature .sec02 .credit07 {
  margin: calc(50 * var(--vw)) auto 0;
}
#feature .sec02 .deco01 {
  bottom: calc(380 * var(--vw));
  left: calc(-90 * var(--vw));
}
#feature .sec03 {
  background: url("../img/sec_bg.png") no-repeat;
  background-size: calc(900 * var(--vw));
  background-position: top center;
  padding: calc(208 * var(--vw)) 0 0;
}
#feature .sec03 .svg-mask-container {
  width: calc(270 * var(--vw));
  margin: 0 auto;
}
#feature .sec03 .txt01 {
  margin: calc(50 * var(--vw)) auto 0;
}
#feature .sec03 .box01 {
  margin: calc(70 * var(--vw)) auto 0;
}
#feature .sec03 .box01 .img01 {
  width: calc(750 * var(--vw));
  margin: 0 auto;
}
#feature .sec03 .box01 .credit08 {
  margin: calc(50 * var(--vw)) auto 0;
}
#feature .sec03 .box01 .deco01 {
  bottom: calc(-100 * var(--vw));
  right: calc(-50 * var(--vw));
}
#feature .sec__last {
  background: url("../img/sec_bg.png") no-repeat;
  background-size: calc(900 * var(--vw));
  background-position: center calc(-50 * var(--vw));
}
#feature .sec__last .sec__all .sec__all-btn {
  width: calc(600 * var(--vw));
  margin: calc(140 * var(--vw)) auto 0;
}
#feature .sec__last .sec__staff {
  padding: calc(86 * var(--vw)) 0 calc(120 * var(--vw));
}
#feature .sec__last .sec__staff p {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(24 * var(--vw));
  letter-spacing: 0.075em;
  line-height: 2;
  text-align: center;
}

/*1400px以上
----------------------------*/
@media screen and (min-width: 1401px) {
  :root {
    --vw: 1px * var(--ratio);
  }
  #feature .contentsWrap {
    grid-template-columns: 1fr 510px 1fr;
  }
  #feature .leftWrap .leftWrap__logo {
    width: 239px;
  }
  #feature .rightWrap .rightWrap__all-btn {
    width: 260px;
  }
}/*# sourceMappingURL=style.css.map */