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

.efs-system-notification { display: none !important; }

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

.feature { box-sizing: border-box; color: #000; margin: 0 auto; position: relative; width: 100%;

  font-family: "ryo-gothic-plusn", hiragino-kaku-gothic-pron, "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体",
    "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", meiryo, メイリオ, sans-serif;
  font-weight: 500; font-style: normal;
  font-size: 2rem;
  text-spacing-trim: space-all;
  line-break: strict;
  background: #fffff3; }
.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: #000; 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: #fffff3; }

.feature .mv__fv { margin-top: 0.002rem; }
.feature .mv__fv img { width: 75rem; }

.feature .mv__txt { width: 49.135rem; margin: 7.25rem auto 0; }
.feature .mv__txt img { display: block; width: 100%; height: auto; }

.feature .chara { position: relative; width: 67rem; margin-left: auto; margin-right: auto; background: #fff;
  border: .2rem solid var(--line); padding: 3.54rem 0 5.95rem; }

.feature .chara.-pom { margin-top: 7.772rem; --line: #e6cb89; --btn: #e5ca88; }
.feature .chara.-poch { margin-top: 7.647rem; --line: #a9c9b1; --btn: #a9c9b1; }
.feature .chara.-cin { margin-top: 7.384rem; --line: #b2c3d3; --btn: #b2c3d3; }

.feature .chara__visual { display: flex; align-items: center; justify-content: center;
  width: 60.2rem; height: 59.634rem; margin-left: 3.128rem; background: #eec5ce; }
.feature .chara__visual img { position: relative; top: .14rem; width: 51rem; }

.feature .chara__items { display: grid; grid-template-columns: repeat(3, minmax(0, 20.6rem)); column-gap: 1.0525rem; row-gap: 1.963rem;
  margin: 3.69rem 0 0 1.37rem; }
.feature .chara__item a { display: block; }
.feature .chara__item img { width: 20.6rem; }

.feature .chara__more { margin: 6.09rem 0 0 3.963rem; }
.feature .chara__btn, .feature .allitems__btn { position: relative; display: block; width: 59.449rem; height: 11.097rem; }
.feature .chara__btn { background: var(--btn); }

.feature .chara__txt, .feature .allitems__txt { position: absolute; top: 50%; transform: translateY(-50%); height: auto; }
.feature .-pom .chara__txt { left: 8.287rem; width: 42.319rem; }
.feature .-poch .chara__txt { left: 10.787rem; width: 37.119rem; }
.feature .-cin .chara__txt { left: 9.587rem; width: 39.625rem; }

.feature .chara__arrow, .feature .allitems__arrow { position: absolute; left: 53.392rem; top: 50%; transform: translateY(-50%); width: 1.068rem; }

.feature .allitems { margin-top: 7.283rem;  padding-bottom: 8.45rem; }
.feature .allitems__more { margin-left: 8.163rem; }
.feature .allitems__btn { background: #eec5ce; }
.feature .allitems__txt { left: 18.264rem; width: 22.271rem; }

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

  html { font-size: 0.533333vw; }

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

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

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

  .feature .frame-main { flex: 1 1 0; min-width: 0; background: #fffff3; }
  .feature .frame-main__inner { width: 75rem; }

  .feature .frame-side { position: relative; }
  .feature .frame-side.-mv { flex: 0 0 auto; width: calc(620 * var(--pcu)); background: #efc6cd; }
  .feature .frame-side.-mv .frame-side__inner { position: sticky; top: var(--rail-top);
    height: calc(100vh - var(--rail-top)); margin-bottom: 0;
    display: flex; align-items: center; }

  .feature .leftcont__fv { width: 100%; height: 100%; }
  .feature .leftcont__fv img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
}