@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; }

.js-fade { opacity: 0; transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.js-fade.is-inview { opacity: 1; }
.is-noanim .js-fade { transition: none !important; opacity: 1 !important; }
.is-noanim .mq__track { animation: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .js-fade { transition: none !important; opacity: 1 !important; }
  html:not(.is-forceanim) .mq__track { animation: none !important; }
  html:not(.is-forceanim) { scroll-behavior: auto; }
}

.feature {
  --f-ryo: ryo-gothic-plusn, "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体",
    "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", meiryo, メイリオ, sans-serif;
  --f-pop: poppins, ryo-gothic-plusn, "Yu Gothic", "游ゴシック", sans-serif;
  --f-min: minerva-modern, "Times New Roman", serif;
  box-sizing: border-box; color: #424242; margin: 0 auto; overflow: clip; position: relative; width: 100%;
  font-family: var(--f-ryo);
  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 { transition: opacity .3s; }
  .feature a:hover { opacity: .7; }
}
.feature img { display: block; vertical-align: bottom; max-width: 100%; height: auto; }
.feature ul { list-style: none; }
.feature button { background: none; font: inherit; color: inherit; cursor: pointer; }

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

.feature .cd { position: relative; height: 18.7rem; background: #9bc3cc; color: #fff; margin-top: 0rem; margin-bottom: 0.3rem; }

.feature .cd__label { position: absolute; left: 17.5rem; top: 2.03rem; width: 40rem; height: 3.261rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-ryo); font-weight: 500; font-size: 2.6rem; line-height: 1; }

.feature .cd__num { position: absolute; left: 15.17rem; top: 5.72rem; width: 44.7rem; height: 8.044rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-min); font-size: 7.4rem; line-height: 1; }
.feature .cd__num span { display: inline-block; width: 9.95rem; text-align: center; }
.feature .cd__unit { position: absolute; top: 13.49rem; height: 3.261rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-min); font-size: 3rem; line-height: 1; }

.feature .cd__unit.-d { left: 14.15rem; width: 12rem; }
.feature .cd__unit.-h { left: 25.72rem; width: 12rem; }
.feature .cd__unit.-m { left: 37.29rem; width: 12rem; }
.feature .cd__unit.-s { left: 48.86rem; width: 12rem; }

.feature .fv { position: relative; background: #f4cfc3; }
.feature .fv img { width: 100%; }

.feature .mq { position: relative; height: 4.88rem; background: #9bc3cc; overflow: hidden; margin-top: 0.2rem; }
.feature .mq__track { position: absolute; left: 0; top: 0; height: 100%; display: flex; flex-wrap: nowrap;
  width: max-content; animation: mq-scroll 20s linear 0s 1 normal none paused; }
.feature .mq.is-inview .mq__track { animation: mq-scroll 20s linear 0s infinite normal none running; }
.feature .mq__set { display: block; flex: 0 0 auto; width: 51.1rem; }
.feature .mq__set img { width: 100%; }
@keyframes mq-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-33.3333%); } }

.feature .mq2 { margin-top: 10rem; }

.feature .lead { margin: 10.83rem 0 0; width: 75rem; height: 43.17rem;
  display: flex; flex-direction: column; justify-content: flex-start;
  font-family: var(--f-pop); font-size: 2.6rem; line-height: 1.92; text-align: center; color: #424242; }

.feature .nav { position: relative; height: 43.09rem; margin-top: 12.96rem; }
.feature .nav__item { position: absolute; left: 0; width: 75rem; }
.feature .nav__link { display: block; position: relative; height: 100%; }
.feature .nav__no { position: absolute; }
.feature .nav__arrow { position: absolute; left: 60.639rem; width: 2rem; }
.feature .nav__label { position: absolute; left: 17.71rem; display: flex; align-items: center;
  font-family: var(--f-ryo); font-weight: 500; color: #424242; }

.feature .nav__item.-n1 { top: 0; height: 7.84rem; }
.feature .nav__item.-n1 .nav__no { left: 10.05rem; top: 1.14rem; width: 4.74rem; }

.feature .nav__item.-n1 .nav__label { top: 1.415rem; width: 39.92rem; height: 5.01rem; font-size: 2.8rem; line-height: 1.79; }
.feature .nav__item.-n1 .nav__arrow { top: 3.08rem; }

.feature .nav__item.-n2 { top: 11.13rem; height: 10.09rem; }
.feature .nav__item.-n2 .nav__no { left: 9.8rem; top: 1.21rem; width: 5.38rem; }
.feature .nav__item.-n2 .nav__sub { position: absolute; left: 17.743rem; top: 0.55rem; width: 29.826rem; }
.feature .nav__item.-n2 .nav__label2 { position: absolute; left: 17.71rem; top: 4.14rem; width: 28.306rem; }
.feature .nav__item.-n2 .nav__arrow { top: 3rem; }

.feature .nav__item.-n3 { top: 23.39rem; height: 11.19rem; }
.feature .nav__item.-n3 .nav__no { left: 10rem; top: 1.25rem; width: 5.18rem; }

.feature .nav__item.-n3 .nav__label.-up { top: 1.25rem; width: 13.85rem; height: 4.52rem; font-size: 2.526rem; line-height: 1.79; }
.feature .nav__item.-n3 .nav__label.-low { top: 5.42rem; width: 29.75rem; height: 4.52rem; font-size: 2.526rem; line-height: 1.79; }
.feature .nav__item.-n3 .nav__arrow { top: 4.12rem; }

.feature .nav__item.-n4 { top: 34.81rem; height: 8.28rem; }
.feature .nav__item.-n4 .nav__no { left: 9.9rem; top: 1.25rem; width: 5.42rem; }
.feature .nav__item.-n4 .nav__label { top: 1.635rem; width: 30.8rem; height: 5.01rem; font-size: 2.8rem; line-height: 1.79; }
.feature .nav__item.-n4 .nav__arrow { top: 3.61rem; }

.feature .nav__rule { position: absolute; left: 7.5rem; width: 60rem; height: 1px; background: #ea968c; }
.feature .nav__rule.-r1 { top: 7.8rem; }
.feature .nav__rule.-r2 { top: 21.2rem; }
.feature .nav__rule.-r3 { top: 34.4rem; }
.feature .nav__rule.-r4 { top: 42.8rem; }

.feature .sch { position: relative; height: 64.13rem; margin-top: 16.67rem; }
.feature .sch__ttl { position: absolute; left: 19.6rem; top: 1.08rem; width: 35.8rem; }
.feature .sch__row { position: absolute; left: 4.126rem; top: 10.12rem; width: 65.996rem; }
.feature .sch__next { position: absolute; left: 55.042rem; top: 10.18rem; width: 2.796rem; }
.feature .sch__d1 { position: absolute; left: 5.572rem; top: 11.83rem; width: 9.932rem; }
.feature .sch__d2 { position: absolute; left: 18.935rem; top: 11.83rem; width: 9.609rem; }
.feature .sch__d3 { position: absolute; left: 31.721rem; top: 11.83rem; width: 10.524rem; }
.feature .sch__d4 { position: absolute; left: 44.595rem; top: 11.83rem; width: 10.761rem; }
.feature .sch__d5 { position: absolute; left: 58.49rem; top: 11.83rem; width: 10.46rem; }
.feature .sch__card { position: absolute; left: 3.945rem; top: 16.37rem; width: 66rem; }
.feature .sch__bar { position: absolute; left: 5.566rem; width: 51rem; height: 10rem; }
.feature .sch__bar.-b1 { top: 19.74rem; background: #ea968c; }
.feature .sch__bar.-b2 { top: 31.37rem; background: #8e293d; }
.feature .sch__bar.-b3 { top: 42.73rem; background: #9bc3cc; }
.feature .sch__b1a { position: absolute; left: 21.886rem; top: 21.39rem; width: 18.496rem; }
.feature .sch__b1b { position: absolute; left: 17.427rem; top: 25.06rem; width: 27.415rem; }
.feature .sch__b2a { position: absolute; left: 29.07rem; top: 34.65rem; width: 23.976rem; }
.feature .sch__b2b { position: absolute; left: 8.178rem; top: 35.46rem; width: 20.047rem; }
.feature .sch__b3a { position: absolute; left: 11.96rem; top: 46.03rem; width: 37.625rem; }

.feature .sch__b4 { position: absolute; left: 5.566rem; top: 54.13rem; width: 62rem; height: auto; }

.feature .cp { position: relative; }
.feature .cp__no { position: absolute; }
.feature .cp__ttl { position: absolute; }
.feature .cp__banner { position: absolute; left: 2.314rem; width: 70rem; }

.feature .cp__pill { position: absolute; left: 28.5rem; width: 18rem; height: 4rem;
  display: flex; align-items: center; justify-content: center;
  background: #d8e5ef; border: 0.1rem solid #666666; border-radius: 2rem;
  font-family: var(--f-ryo); font-weight: 500; font-size: 2.6rem; line-height: 1; color: #424242; white-space: nowrap; }
.feature .cp__date { position: absolute; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-ryo); font-size: 3rem; line-height: 1.67; text-align: center; color: #424242; }

.feature .cp__body { position: absolute; display: block;
  font-family: var(--f-ryo); font-size: 2.6rem; line-height: 1.54; text-align: center; color: #424242; }

.feature .cp__btn { position: absolute; left: 9.772rem; width: 54.4rem; height: 12rem; background: #ea968c; }

.feature .cp__btn a, .feature .cp__btn > span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  box-sizing: border-box; padding-top: 1rem;
  font-family: var(--f-pop); font-weight: 500; font-size: 3.6rem; line-height: 1; color: #fff; }

.feature .cp__btn.-dl a { letter-spacing: .08em; font-weight: 700; font-size: 3.4rem; }

.feature .cp__btn.-go a { position: relative; letter-spacing: .1em; font-weight: 700; }
.feature .cp__btn.-go a::after { content: ""; position: absolute; right: 3.2rem; top: 50%;
  width: 1.8rem; height: 1.8rem; border-top: 0.4rem solid #fff; border-right: 0.4rem solid #fff;
  transform: translateY(-50%) rotate(45deg); }

.feature .cp1 { margin-top: 20.25rem; padding-bottom: 5.4rem; }
.feature .cp1::before { content: ""; display: block; height: 158.15rem; }
.feature .cp1 .cp__no { left: 34rem; top: 1.2rem; width: 6rem; }
.feature .cp1 .cp__ttl { left: 18.8rem; top: 12.6rem; width: 37.2rem; }

.feature .cp1 .cp__banner { left: 1.91rem; top: 29.91rem; width: 71.18rem; }
.feature .cp1 .cp__btn { top: 115.5rem; }
.feature .cp1 .cp__pill.-p1 { top: 135.73rem; }
.feature .cp1 .cp__date { left: 0; top: 141.42rem; width: 75rem; height: 5.01rem; }
.feature .cp1 .cp__pill.-p2 { top: 152.37rem; }

.feature .cp1 .cp1__t { width: 75rem; margin: 0 auto; font-family: var(--f-ryo); font-size: 2.2rem; line-height: 3.6rem;
  text-align: center; color: #424242; white-space: nowrap; }
.feature .cp1 .cp1__t.-lead { font-size: 2.6rem; line-height: 4rem; }
.feature .cp1 .cp1__t.-note { margin-top: 4rem; }
.feature .cp1 .cp1__t.-store { margin-top: 4.15rem; }
.feature .cp1 .cp1__t.-shop { margin-top: 2.3rem; line-height: 4rem; }
.feature .cp1 .cp1__t.-n2 { margin-top: 1.7rem; }
.feature .cp1 .cp1__t.-n3 { margin-top: 1.5rem; }
.feature .cp1 .cp1__t.-link { margin-top: 2.75rem; font-size: 2.4rem; line-height: 4rem; font-weight: 500; }

.feature .cp1 .acc__body { max-height: 61.6rem; }
.feature .cp1 .acc .acc__btn { margin-top: 5.84rem; }

.feature .cp1 .acc__arrow { margin-top: -0.5rem; }

.feature .cp1 .acc__btn[aria-expanded="true"] .acc__arrow { margin-top: 0.7rem; }
.feature .cp1 .acc__body::after { background: linear-gradient(rgba(255, 255, 255, 0), #fff); }
.feature .cp1 .acc__body.is-show { padding-bottom: 0; }

.feature .-s26 { font-size: 2.6rem; line-height: 1.54; }
.feature .-s24 { font-size: 2.4rem; font-weight: 500; line-height: 1.5; }
.feature .-s20 { font-size: 2rem; line-height: 1.8; }

.feature .storelink a { text-decoration: underline; color: #55a0d9; }

.feature .cp2 { height: 174.3rem; margin-top: 13.77rem; }
.feature .cp2 .cp__no { left: 34rem; top: 1.21rem; width: 6.9rem; }

.feature .cp2__ttljp { position: absolute; left: 0; top: 9.73rem; width: 75rem; height: 17rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-ryo); font-size: 6rem; line-height: 1.417; text-align: center; }
.feature .cp2 .cp__banner { top: 31.59rem; }
.feature .cp2 .cp__btn { top: 116.67rem; }
.feature .cp2 .cp__pill.-p1 { top: 136.66rem; }
.feature .cp2 .cp__date { left: 0; top: 142.31rem; width: 75rem; height: 5.01rem; }
.feature .cp2 .cp__pill.-p2 { top: 153.31rem; }

.feature .cp2 .cp__body { left: 0; top: 158.44rem; width: 75rem; height: 16.02rem; }

.feature .cp3 { margin-top: 14.7rem; background: #f4f8f9; padding-bottom: 13.94rem; }
.feature .cp3::before { content: ""; display: block; height: 278.14rem; }
.feature .cp3 .cp__no { left: 34.1rem; top: 5.81rem; width: 7rem; }
.feature .cp3 .cp__ttl { left: 17.2rem; top: 17.01rem; width: 40.7rem; }

.feature .cp3__visual { position: absolute; left: 2.5rem; top: 35.44rem; width: 70rem; }

.feature .cp3 .cp__pill.-p1 { top: 122.67rem; }
.feature .cp3 .cp__date { left: 0; top: 128.36rem; width: 75rem; height: 5.01rem; }
.feature .cp3__lead { position: absolute; left: 17.49rem; top: 138.72rem; width: 40rem; height: 5rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-ryo); font-weight: 500; font-size: 4rem; line-height: 1.25; }

.feature .card { position: absolute; left: 2.37rem; width: 70.1rem; }
.feature .card1 { top: 147.11rem; }
.feature .card2 { top: 196.81rem; }
.feature .cp3__more { position: absolute; left: 25.6rem; top: 190.18rem; width: 24rem; height: 5rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-ryo); font-weight: 500; font-size: 4rem; line-height: 1.25; }

.feature .cp3__close { position: absolute; left: 0; top: 241.69rem; width: 75rem; height: 8.01rem;
  display: flex; flex-direction: column; justify-content: flex-start;
  font-family: var(--f-ryo); font-size: 2.6rem; line-height: 1.54; text-align: center; }
.feature .cp3__hearts { position: absolute; left: 28.978rem; top: 262.91rem; width: 16.649rem; }

.feature .acc { position: static; width: 75rem; margin: 0 auto; }
.feature .acc__ttl { width: 50rem; margin: 0 auto; height: 4rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-ryo); font-weight: 700; font-size: 2.6rem; line-height: 1.54; color: #ea968c; }

.feature .acc__body { position: relative; overflow: hidden; max-height: 29.95rem; transition: max-height .3s; }
.feature .acc__body p { width: 75rem; margin: 4.63rem auto 0;
  font-family: var(--f-ryo); font-size: 2.4rem; line-height: 1.67; text-align: center; color: #424242; }

.feature .acc__body::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 12rem;
  background: linear-gradient(rgba(244, 248, 249, 0), #f4f8f9); transition: opacity .3s; pointer-events: none; }
.feature .acc__body.is-show { max-height: 200rem; padding-bottom: 1.6rem; }

.feature .cp3 .acc__body.is-show { padding-bottom: 0; }
.feature .acc__body.is-show::after { opacity: 0; }

.feature .cp1 .acc__btn, .feature .cp3 .acc__btn { display: flex; flex-direction: column; align-items: center;
  width: 100%; margin: 3.44rem auto 0; color: #ea968c; }
.feature .acc__btntxt { font-family: var(--f-pop); font-size: 2.3rem; line-height: 1;
  letter-spacing: .06em; white-space: nowrap; }

.feature .acc__arrow { display: block; width: 1.43rem; height: 1.43rem; margin: 0.2rem 0 0;
  border-right: .2rem solid currentColor; border-bottom: .2rem solid currentColor;
  transform: rotate(45deg); transition: transform .3s; }

.feature .acc__btn[aria-expanded="true"] .acc__arrow { transform: rotate(-135deg); margin-top: 0.7rem; }
@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .acc__arrow { transition: none; }
}

.feature .cp4 { margin-top: 17.47rem; padding-bottom: 4rem; }

.feature .cp4::before { content: ""; display: block; height: 226.25rem; }
.feature .cp4 .cp__no { left: 33.6rem; top: 4.22rem; width: 7.4rem; }
.feature .cp4 .cp__ttl { left: 18.8rem; top: 15.12rem; width: 37.2rem; }

.feature .cp4__pic { position: absolute; left: 0; top: 33.03rem; width: 75rem; }

.feature .cp4__txt { position: absolute; left: 0; top: 124.15rem; width: 75rem; height: 36.04rem;
  display: block;
  font-family: var(--f-ryo); font-size: 2.6rem; line-height: 1.92; text-align: center; }
.feature .cp4 .cp__pill.-p1 { top: 170.42rem; }
.feature .cp4 .cp__date { left: 0; top: 176.09rem; width: 75rem; height: 5.01rem; }
.feature .cp4 .cp__pill.-p2 { top: 187.13rem; }

.feature .cp4__target { position: absolute; left: 0; top: 192.24rem; width: 75rem; height: 17.25rem;
  display: flex; flex-direction: column; justify-content: flex-start;
  font-family: var(--f-ryo); font-size: 2.8rem; line-height: 1.79; text-align: center; }

.feature .acc-box .acc__btn { position: relative; width: 68rem; height: 7rem; margin: 0 auto; display: block; }
.feature .acc-box .acc__btnbg { position: absolute; left: 0; top: 0; width: 68rem; }
.feature .acc-box .acc__btntxt { position: absolute; left: 27.408rem; top: 2.12rem; width: 13.606rem; }
.feature .acc-box .acc__body { max-height: none; overflow: visible; }
.feature .acc-box .acc__body::after { content: none; }

.feature .acc-box .acc__p1 { width: 68rem; margin: 7.27rem auto 0; text-align: left;
  font-family: var(--f-ryo); font-size: 2rem; line-height: 1.7; color: #424242; }
.feature .acc-box .acc__p2 { width: 68rem; margin: 6.91rem auto 0; text-align: left;
  font-family: var(--f-ryo); font-size: 2rem; line-height: 1.7; color: #424242; }
.feature .acc__close { position: relative; display: block; width: 68rem; height: 7rem; margin: 7.87rem auto 0; cursor: pointer; }
.feature .acc__close .acc__btnbg { position: absolute; left: 0; top: 0; width: 68rem; }
.feature .acc__close .acc__btntxt { position: absolute; left: 26.322rem; top: 2.16rem; width: 13.759rem; }

.feature:has(.js-ended) .frame-main__inner { display: flex; flex-direction: column; }
.feature:has(.js-ended) .sch,
.feature:has(.js-ended) .cp1,
.feature:has(.js-ended) .cp2,
.feature:has(.js-ended) .cp4,
.feature:has(.js-ended) .mq2,
.feature:has(.js-ended) .app { order: 1; }

.feature .cp__end { position: absolute; display: flex; align-items: center; justify-content: center;
  background: rgba(189, 189, 189, .85);
  font-family: var(--f-ryo); font-weight: 500; font-size: 5.6rem; line-height: 1.5; text-align: center; color: #fff; white-space: nowrap; }

.feature:has(.js-ended) .cp3 { margin-top: 12.96rem; }
.feature:has(.js-ended) .cp3::before { height: 266.94rem; }
.feature:has(.js-ended) .cp3 .cp__ttl { top: 5.81rem; }
.feature:has(.js-ended) .cp3__visual { top: 24.24rem; }
.feature:has(.js-ended) .cp3 .cp__pill.-p1 { top: 111.47rem; }
.feature:has(.js-ended) .cp3 .cp__date { top: 117.16rem; }
.feature:has(.js-ended) .cp3__lead { top: 127.52rem; }
.feature:has(.js-ended) .card1 { top: 135.91rem; }
.feature:has(.js-ended) .cp3__more { top: 178.98rem; }
.feature:has(.js-ended) .card2 { top: 185.61rem; }
.feature:has(.js-ended) .cp3__close { top: 230.49rem; }
.feature:has(.js-ended) .cp3__hearts { top: 251.71rem; }

.feature:has(.js-ended) .cp1::before { height: 129.36rem; }
.feature:has(.js-ended) .cp1 .cp__ttl { top: 1.2rem; }
.feature:has(.js-ended) .cp1 .cp__banner { top: 18.51rem; }
.feature .cp1 .cp__end { left: 1.91rem; top: 18.51rem; width: 71.18rem; height: 80.2rem; }
.feature:has(.js-ended) .cp1 .cp__pill.-p1 { top: 106.94rem; }
.feature:has(.js-ended) .cp1 .cp__date { top: 112.63rem; }
.feature:has(.js-ended) .cp1 .cp__pill.-p2 { top: 123.58rem; }

.feature:has(.js-ended) .cp2 { height: 146.7rem; }
.feature:has(.js-ended) .cp2__ttljp { top: 0; }
.feature:has(.js-ended) .cp2 .cp__banner { top: 21.86rem; }
.feature .cp2 .cp__end { left: 2.314rem; top: 21.86rem; width: 70rem; height: 79.21rem; }
.feature:has(.js-ended) .cp2 .cp__pill.-p1 { top: 109.06rem; }
.feature:has(.js-ended) .cp2 .cp__date { top: 114.71rem; }
.feature:has(.js-ended) .cp2 .cp__pill.-p2 { top: 125.71rem; }
.feature:has(.js-ended) .cp2 .cp__body { top: 130.84rem; }

.feature:has(.js-ended) .cp4::before { height: 215.35rem; }
.feature:has(.js-ended) .cp4 .cp__ttl { top: 4.22rem; }
.feature:has(.js-ended) .cp4__pic { top: 22.13rem; }
.feature .cp4 .cp__end { left: 0; top: 22.13rem; width: 75rem; height: 84.51rem; }
.feature:has(.js-ended) .cp4__txt { top: 113.25rem; }
.feature:has(.js-ended) .cp4 .cp__pill.-p1 { top: 159.52rem; }
.feature:has(.js-ended) .cp4 .cp__date { top: 165.19rem; }
.feature:has(.js-ended) .cp4 .cp__pill.-p2 { top: 176.23rem; }
.feature:has(.js-ended) .cp4__target { top: 181.34rem; }

.feature .app { position: relative; height: 37.82rem; background: #f4e3e1; margin-top: 0rem; overflow: hidden; }
.feature .app__icon { position: absolute; left: 2.425rem; top: 2.68rem; width: 11.2rem; }
.feature .app__logo { position: absolute; left: 16.617rem; top: 4.57rem; width: 29.883rem; }
.feature .app__jp { position: absolute; left: 22.26rem; top: 8.81rem; width: 17.8rem; height: 3.53rem;
  display: flex; align-items: center; justify-content: flex-start;
  font-family: var(--f-ryo); font-size: 3.527rem; line-height: 1; color: #424242; }
.feature .app__phone { position: absolute; left: 43.016rem; top: 5.33rem; width: 28.32rem; }
.feature .app__qr { position: absolute; top: 17.02rem; width: 10rem; }
.feature .app__qr.-q1 { left: 11.543rem; }
.feature .app__qr.-q2 { left: 27.896rem; }
.feature .app__badge { position: absolute; top: 28.84rem; }
.feature .app__badge.-b1 { left: 10.766rem; width: 12.016rem; }
.feature .app__badge.-b2 { left: 25.295rem; width: 15.202rem; }

@media screen and (min-width: 751px) {
  html { font-size: min(0.47619vw, 6.6667px); }

  .feature .pc { display: block; }
  .feature .sp { display: none; }
  .feature .frame > .pc { display: contents; }

  .feature { --pcu: min(0.0714286vw, 1px); }

  .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: 80px;
    margin-bottom: calc(80 * var(--pcu)); }

  .feature .frame-side.-mv { background: #f7e0da; overflow: clip; }
  .feature .frame-side.-mv .frame-side__inner { --rail-h: calc(100vh - 80px);
    height: var(--rail-h); width: 100%; }

  .feature .leftcont { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

  .feature .leftcont__specks { position: absolute; left: 0; top: 0;
    width: 100%; aspect-ratio: 448.83 / 510.64;
    background-image: url(../img/specks-pc.png); background-repeat: no-repeat;
    background-position: top center; background-size: 100% auto; }

  .feature .leftcont__main { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: block; width: calc(405.5 * var(--pcu)); aspect-ratio: 811 / 1086;
    background-image: url(../img/fv-pc-01.png); background-repeat: no-repeat;
    background-position: center; background-size: contain; }

  .feature .frame-side.-app { background: #fcf4f2; overflow: clip; }
  .feature .frame-side.-app .frame-side__inner { --rail-h: calc(100vh - 80px);
    height: var(--rail-h); width: 100%; }

  .feature .side__card { position: absolute; left: 50%; transform: translateX(-50%); top: calc(50% - 275 * var(--pcu));
    width: calc(365 * var(--pcu)); height: calc(263 * var(--pcu));
    background: #f4e3e1; border: 1px solid #9bc3cc; border-radius: calc(20 * var(--pcu)); }
  .feature .side__card img { position: absolute; }
  .feature .side__icon { left: calc(33 * var(--pcu)); top: calc(19 * var(--pcu)); width: calc(78 * var(--pcu)); }
  .feature .side__logo { left: calc(124 * var(--pcu)); top: calc(32 * var(--pcu)); width: calc(208 * var(--pcu)); }
  .feature .side__jp { position: absolute; left: calc(179 * var(--pcu)); top: calc(61 * var(--pcu));
    width: calc(98 * var(--pcu)); height: calc(24 * var(--pcu));
    display: flex; align-items: center; justify-content: center;
    font-family: var(--f-ryo); font-size: calc(19 * var(--pcu)); line-height: 1; color: #424242; }
  .feature .side__qr { position: absolute; top: calc(118 * var(--pcu)); width: calc(70 * var(--pcu)); }
  .feature .side__qr.-q1 { left: calc(76 * var(--pcu)); }
  .feature .side__qr.-q2 { left: calc(207 * var(--pcu)); }
  .feature .side__badge { position: absolute; top: calc(203 * var(--pcu)); }
  .feature .side__badge.-b1 { left: calc(72 * var(--pcu)); width: calc(84 * var(--pcu)); }
  .feature .side__badge.-b2 { left: calc(190 * var(--pcu)); width: calc(104 * var(--pcu)); }
  .feature .side__qr img, .feature .side__badge img { position: static; width: 100%; }
}

.feature .cd__label, .feature .cd__num, .feature .cd__unit,
.feature .lead, .feature .nav__label,
.feature .cp__date, .feature .cp__body, .feature .cp2__ttljp,
.feature .cp3__lead, .feature .cp3__more, .feature .cp3__close,
.feature .cp4__txt, .feature .cp4__target,
.feature .acc__ttl, .feature .cp3 .acc__body p,
.feature .app__jp, .feature .side__jp, .feature .cp__btn a, .feature .cp__btn > span { white-space: nowrap; }