@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; }
.feature :where(div, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, blockquote, pre) { font-style: inherit; }

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

.feature .ff-silk { font-family: "Silkscreen", monospace; font-weight: 400; font-style: normal; }

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

html.js-anim .js-reveal.-up { opacity: 0; transform: translateY(15%);
  transition: opacity 1.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.feature .js-reveal.-up.is-inview { opacity: 1; transform: translateY(0);
  transition-duration: 1.25s; transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-delay: 0s; }

html.js-anim .js-seq .seq-item { opacity: 0; transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
html.js-anim .js-seq.is-inview .seq-item { opacity: 1; }

html.js-anim .js-seq .seq-item.-d0 { transition-delay: 0s; }
html.js-anim .js-seq .seq-item.-d1 { transition-delay: .6s; }
html.js-anim .js-seq .seq-item.-d2 { transition-delay: 1.2s; }
html.js-anim .js-seq .seq-item.-d3 { transition-delay: 1.8s; }
html.js-anim .js-seq .seq-item.-d4 { transition-delay: 2.4s; }
.feature .seq-item.-d1 { --fp-d: .6s; }

html.js-anim .js-seq .float-item { opacity: 0; transform: translateY(50%);
  transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1s cubic-bezier(0.22, 0.61, 0.36, 1); }
html.js-anim .js-seq.is-inview .float-item { opacity: 1; transform: translateY(0); }
.feature .float-item.-f1 { transition-delay: 1s; }
.feature .float-item.-f2 { transition-delay: 2.5s; }
.feature .float-item.-f3 { transition-delay: 4s; }
.feature .float-item.-f4 { transition-delay: 5.5s; }

html.js-anim .js-type .tc { visibility: hidden; }
.feature .js-type .tc.is-on, .feature .js-type.is-typed .tc { visibility: visible; }
.feature .type-cursor { display: inline-block; position: relative; width: 0; height: 0; }
.feature .type-cursor::after { content: ""; position: absolute; left: .08em; bottom: -.1em; width: .14em; height: .9em;
  background: #E48AC2; animation: ff-blink .8s steps(1) infinite; }
@keyframes ff-blink { 50% { opacity: 0; } }

.feature .fp-wrap { position: relative; display: block; }
.feature .fp-chars { position: absolute; inset: 0; pointer-events: none; }
.feature .fp-char { position: absolute; top: 0; height: 100%; background-repeat: no-repeat; }
html.js-anim .js-fp.is-split { visibility: hidden; }
html.js-anim .fp-char { opacity: 0; transform: translateY(170%);
  transition: opacity .5s cubic-bezier(0.175, 0.885, 0.32, 1.275) calc(var(--fp-d, 0s) + var(--fp-i) * .05s),
    transform .5s cubic-bezier(0.175, 0.885, 0.32, 1.275) calc(var(--fp-d, 0s) + var(--fp-i) * .05s); }
html.js-anim .js-fp.is-inview + .fp-chars .fp-char { opacity: 1; transform: none; }

.feature .heart { transform-origin: 50% 50%; animation: ff-heart .5s ease 0s infinite alternate;
  animation-duration: .5s; animation-timing-function: ease; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes ff-heart { from { transform: scale(.9); } to { transform: scale(1); } }

.feature .closing__arrow { display: inline-block; animation: ff-arrow 1s steps(1) infinite; }
@keyframes ff-arrow { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }

.feature .anim-marquee { overflow: hidden; }
.feature .anim-marquee .mq-track { display: flex; width: max-content; animation: mq-flow var(--mq-dur, 5s) linear infinite; }
@keyframes mq-flow { to { transform: translateX(var(--mq-shift, -50%)); } }
html.is-still .anim-marquee .mq-track { animation: none; }

.is-noanim .js-reveal, .is-noanim .js-anime { transition: none !important; opacity: 1 !important; }
.is-still .js-reveal, .is-still .js-anime { transition: none !important; opacity: 1 !important; }
.is-noanim .js-reveal.-up, .is-still .js-reveal.-up,
.is-noanim .js-seq .seq-item, .is-still .js-seq .seq-item,
.is-noanim .js-seq .float-item, .is-still .js-seq .float-item,
.is-noanim .js-fp, .is-still .js-fp { transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
.is-noanim .js-type .tc, .is-still .js-type .tc { visibility: visible !important; }
.is-noanim .type-cursor, .is-still .type-cursor { display: none !important; }
.is-still .heart, .is-still .closing__arrow { animation: none !important; }
html.is-still { scroll-behavior: auto; }

.feature { box-sizing: border-box; color: #3E3A39; margin: 0 auto; position: relative; width: 100%;
  font-family: hiragino-kaku-gothic-pron, "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体",
    "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", meiryo, メイリオ, sans-serif;
  font-weight: 400; font-style: normal;
  font-size: 2rem;
  text-spacing-trim: space-all;
  line-break: strict;
  background: #F1EAEB;  }
.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 .frame-main__inner > .sp { display: contents; }
.feature a { color: #3E3A39; 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; }

:where(.feature .frame-main__inner > section, .feature .frame-main__inner > div > section) { position: relative; display: flow-root; }

.feature .concept__sub, .feature .concept__ttl, .feature .mv__starring, .feature .mv__copy,
.feature .face__txt01, .feature .face__txt02, .feature .face__txt03,
.feature .look1__no, .feature .look3__no, .feature .mood__txt01, .feature .mood__txt02, .feature .mood__txt03,
.feature .closing__starring, .feature .closing__btn, .feature .foot__ttl,
.feature .pcfv__starring, .feature .pcfv__copy, .feature .rail__starring {
  font-family: "Silkscreen", monospace; font-weight: 400; font-style: normal; text-transform: uppercase; letter-spacing: 0; }
.feature .concept__strip, .feature .look1__ttl, .feature .look3__ttl {
  font-family: "jacquarda-bastarda-9-1", "jacquarda-bastarda-9-2", "Jacquarda Bastarda 9", serif; font-weight: 400; font-style: normal; letter-spacing: 0; }
.feature .mv__name, .feature .closing__name, .feature .pcfv__name, .feature .rail__name, .feature .rail__btn {
  font-family: "Roboto Flex", "roboto-flex-1", "roboto-flex-2", sans-serif; font-weight: 700; font-style: normal; text-transform: uppercase; letter-spacing: 0; color: #E48AC2; }
.feature .concept__lead01, .feature .concept__lead02, .feature .concept__lead03 {
  font-family: "dnp-shuei-gothic-gin-std-1", "dnp-shuei-gothic-gin-std-2", sans-serif; font-weight: 500; font-style: normal; letter-spacing: 0; }

.feature .concept__lead01 { letter-spacing: -.054em; }
.feature .concept__lead02 { letter-spacing: -.055em; position: relative; left: -.44rem; }
.feature .concept__lead03 { letter-spacing: -.063em; }
.feature .concept__sub { letter-spacing: -.06em; }

.feature .look1__ttl { letter-spacing: -.013em; }
.feature .look3__ttl { letter-spacing: .0055em; }
.feature .look3__no, .feature .look1__no { letter-spacing: -.045em; }
.feature .mv__copy { letter-spacing: -.065em; }
.feature .pcfv__copy { letter-spacing: -.07em; }
.feature .foot__ttl { letter-spacing: -.045em; }
.feature .mv__starring, .feature .pcfv__starring, .feature .rail__starring, .feature .closing__starring { letter-spacing: -.068em; }

.feature .mv { height: 141.94rem; overflow: clip; }
.feature .mv__photo { margin-top: -0.24rem; width: 75.368rem; margin-left: -.22rem; }
.feature .mv__logo { position: absolute; top: 6.21rem; right: 4.006rem; width: 10.92rem; }
.feature .mv__logo img { width: 100%; }
.feature .mv__photo img { width: 100%; }
.feature .mv__link, .feature .face__link, .feature .mood__link { display: block; }

.feature .mv__ttl, .feature .mv__starring, .feature .mv__name, .feature .mv__logo, .feature .mv__copy,
.feature .face__txt01, .feature .face__txt02, .feature .face__txt03, .feature .face__heart,
.feature .mood__txt01, .feature .mood__txt02, .feature .mood__txt03,
.feature .pcfv__ttl, .feature .pcfv__starring, .feature .pcfv__name, .feature .pcfv__logo, .feature .pcfv__copy { pointer-events: none; }
.feature .mv__ttl { position: absolute; top: 76.92rem; left: 6.096rem; width: 62.806rem; --fp-d: .6s; }
.feature .mv__ttl img { width: 100%; }
.feature .mv__starring { position: absolute; top: 85.184rem; left: 0; right: 0; text-align: center;
  font-size: 2.414rem; line-height: 3.887rem; color: #E48AC2; }
.feature .mv__name { position: absolute; top: 88.94rem; left: 0; right: 0; text-align: center;
  font-size: 13.2rem; line-height: 13.2rem; }
.feature .mv__copy { position: absolute; top: 123.486rem; left: 0; right: 0; text-align: center;
  font-size: 2.414rem; line-height: 3.404rem; color: #fff; }

.feature .concept { background: #FCF5F8 url(../img/grain-concept-sp.png) 0 0 / 33.8624% auto; padding-bottom: 16.14rem; }

.feature .concept__strip { margin-top: 0rem; position: sticky; top: var(--cms-header-h, 0px); z-index: 10;
  height: 6rem; display: flex; align-items: center; justify-content: center;
  background: #fff; font-size: 3.288rem; line-height: 2.992rem; color: #3E3A39; }
.feature .concept__sub { padding-top: 14.096rem; text-align: center; font-size: 4.4rem; line-height: 5.192rem; color: #3E3A39; }
.feature .concept__ttl { margin-top: 2.815rem; text-align: center; font-size: 15.208rem; line-height: 15.208rem; color: #E48AC2; }
.feature .concept__ttl-s { display: block; font-size: 9.462rem; line-height: 7.949rem; margin-bottom: -1.4rem; }
.feature .concept__lead01 { margin-top: 8.573rem; text-align: center; font-size: 2.6rem; line-height: 5.2rem; }
.feature .concept__lead02 { margin-top: 4.314rem; text-align: center; font-size: 2.6rem; line-height: 5.2rem; }
.feature .concept__lead03 { margin-top: 4.296rem; text-align: center; font-size: 2.6rem; line-height: 5.2rem; }

.feature .face { margin-top: 0rem; }
.feature .face__photo img { width: 100%; }
.feature .face__txt01, .feature .face__txt02, .feature .face__txt03 { position: absolute; font-size: 5.2rem; color: #fff; white-space: nowrap; }
.feature .face__txt01 { top: 62.704rem; left: 8.56rem; line-height: 8.112rem; }
.feature .face__txt02 { top: 86.686rem; left: 46.52rem; line-height: 7.228rem; }
.feature .face__txt03 { top: 113.204rem; left: 26.78rem; line-height: 8.112rem; }
.feature .face__heart { position: absolute; top: 96.7rem; left: 54.86rem; width: 6.78rem; }
.feature .face__heart img { width: 100%; }

.feature .face { --plx-cap: .515; }
.feature .face__txt01 { --plx-k: .10; }
.feature .face__txt02 { --plx-k: .14; }
.feature .face__heart { --plx-k: .14; }
.feature .face__txt03 { --plx-k: .12; }

.feature .look1 { background: #FEFCF9; padding-bottom: 10.88rem; }

.feature .look1__main { --l1-pad: 11.89rem; padding-top: var(--l1-pad); position: relative; }
.feature .look1__main-link { display: block; width: 56rem; margin-left: 9.5rem; }
.feature .look1__main-link img { width: 100%; }
.feature .look1__heart01 { position: absolute; top: calc(63.9rem + var(--l1-pad, 0rem)); left: 13.26rem; width: 3.966rem; }
.feature .look1__heart02 { position: absolute; top: calc(76.5rem + var(--l1-pad, 0rem)); left: 57.928rem; width: 3.966rem; }
.feature .look1__heart01 img, .feature .look1__heart02 img { width: 100%; }
.feature .look1__no { margin-top: 8.47rem; text-align: center; font-size: 2.4rem; line-height: 2.784rem; }
.feature .look1__ttl { margin-top: 3.2068rem; text-align: center; font-size: 6.488rem; line-height: 5.19rem; color: #3E3A39; }
.feature .look1__mq { margin-top: 7.4168rem; height: 55.28rem; }
.feature .look1__mq .mq-track { --mq-shift: -81.212rem; --mq-dur: 5s; margin-left: -.54rem; }
.feature .look1__mq .mq-item { flex: 0 0 auto; width: 39.688rem; margin-right: .918rem; }
.feature .look1__mq .mq-item a { display: block; }
.feature .look1__mq .mq-item img { width: 100%; height: 55.28rem; object-fit: cover; }

.feature .gif { position: relative; display: block; height: 55.28rem; }
.feature .gif > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.feature .gif .gif__b { visibility: hidden; }
.feature .gif.is-alt .gif__a { visibility: hidden; }
.feature .gif.is-alt .gif__b { visibility: visible; }
.feature .look1__photo02 { margin-top: 6.364rem; display: block; }
.feature .look1__photo02 img { width: 100%; }
.feature .look1__photo03 { margin-top: 14.51rem; display: block; width: 66rem; }
.feature .look1__photo03 img { width: 100%; }

.feature .credit .item { display: block; width: fit-content; position: relative; line-height: 4rem; white-space: nowrap;
  font-family: "roboto-flex-1", "roboto-flex-2", "Roboto Flex", sans-serif; font-size: 2rem; }
.feature .credit .link { font-family: "roboto-flex-1", "roboto-flex-2", "Roboto Flex", sans-serif; font-weight: 400; font-style: normal;
  font-size: 2rem; line-height: 4rem; letter-spacing: 0; color: #3E3A39;
  text-decoration: underline; text-decoration-thickness: .2rem; text-underline-offset: .08em; }
.feature .credit .item.-noline .link { text-decoration: none; }
.feature .credit01 { margin-top: 2.202rem; margin-left: 4.24rem; text-transform: uppercase; }
.feature .credit02 { margin-top: 2.664rem; margin-left: 4.5rem; text-transform: uppercase; }
.feature .credit03 { margin-top: 2.434rem; margin-left: 5.98rem; }

.feature .credit01 { padding-bottom: .4rem; }
.feature .credit02 { padding-bottom: .54rem; }
.feature .credit03 { padding-bottom: .56rem; }

.feature .look2 { background: #FCF5F7 url(../img/grain-look2-sp.png) 0 0 / 33.8624% auto; padding-bottom: 23.314rem; }
.feature .look2__head { display: flow-root; }
.feature .look2__ttl { margin-top: 18.324rem; width: 45.604rem; margin-left: 15.418rem; }
.feature .look2__ttl { display: flow-root; }
.feature .look2__ttl .l2-art { position: relative; display: flow-root; }

.feature .look2__ttl .l2-full { display: block; width: 105.2627%; max-width: none; margin: -2.6314%; }

.feature .look2__ttl .l2-lines { position: absolute; left: -2.6314%; top: -3.3898%; width: 105.2627%; height: 106.7797%; }

.feature .look2__ttl .l2-line { display: none; position: absolute; max-width: none; height: auto; }
.feature .l2-line.-look { left: 40.0415%; top: 3.1746%; width: 17.0124%; --l2-d: 0s; }
.feature .l2-line.-curly { left: 14.9378%; top: 8.9947%; width: 56.639%; --l2-d: .25s; }
.feature .l2-line.-animal { left: 2.6971%; top: 38.3598%; width: 91.2863%; --l2-d: .5s; }
.feature .l2-line.-fur { left: 17.6349%; top: 67.4603%; width: 44.3983%; --l2-d: .8s; }
.feature .l2-line.-anniv { left: 65.9751%; top: 73.8095%; width: 31.5353%; --l2-d: .95s; }

html.js-anim .look2__ttl .l2-full { visibility: hidden; }
html.js-anim .look2__ttl .l2-line { display: block; opacity: 0; transform: translateY(var(--l2-rise, 18.62rem));
  transition: opacity .5s cubic-bezier(0.175, 0.885, 0.32, 1.275) var(--l2-d), transform .5s cubic-bezier(0.175, 0.885, 0.32, 1.275) var(--l2-d); }
html.js-anim .look2__ttl.is-inview .l2-line { opacity: 1; transform: none; }

.is-noanim .look2__ttl .l2-full, .is-still .look2__ttl .l2-full { visibility: visible; }
.is-noanim .look2__ttl .l2-line, .is-still .look2__ttl .l2-line { display: none; }

.feature .look2__ttl { position: relative; z-index: 1; pointer-events: none; }
.feature .look2__photo01 { margin-top: -1.746rem; display: block; position: relative; width: 44.418rem; margin-left: 14.01rem; }
.feature .look2__photo01 img { width: 100%; }
.feature .look2__photo02 { margin-top: 21.79rem; display: block; }
.feature .look2__photo02 img { width: 100%; }
.feature .look2__photo03 { margin-top: 5.072rem; display: block; width: 63.68rem; margin-left: 5.66rem; }
.feature .look2__photo03 img { width: 100%; }

.feature .mood { margin-top: 0rem; }
.feature .mood__photo img { width: 100%; }
.feature .mood__txt01, .feature .mood__txt02, .feature .mood__txt03 { position: absolute; font-size: 5.2rem; line-height: 7.228rem; color: #fff; white-space: nowrap; }
.feature .mood__txt01 { top: 64.746rem; left: 4.82rem; }
.feature .mood__txt02 { top: 82.506rem; left: 48.64rem; }
.feature .mood__txt03 { top: 99.586rem; left: 10.54rem; }
.feature .mood { --plx-cap: .534; }
.feature .mood__txt01 { --plx-k: .10; }
.feature .mood__txt02 { --plx-k: .14; }
.feature .mood__txt03 { --plx-k: .12; }

.feature .look3 { background: #FEFCFA url(../img/grain-look3-sp.png) 0 0 / 33.8624% auto; padding-bottom: 20.19rem; }
.feature .look3__no { padding-top: 15.654rem; text-align: center; font-size: 2.4rem; line-height: 2.784rem; }
.feature .look3__ttl { margin-top: 3.2668rem; text-align: center; font-size: 6.488rem; line-height: 5.19rem; color: #3E3A39; }
.feature .look3__main { margin-top: 12.9108rem; position: relative; }
.feature .look3__main-link { display: block; width: 53.2rem; margin-left: 21.8rem; }
.feature .look3__main-link img { width: 100%; }
.feature .look3__dot01, .feature .look3__dot02, .feature .look3__dot03 { position: absolute; width: 8.282rem; }
.feature .look3__dot01 img, .feature .look3__dot02 img, .feature .look3__dot03 img { width: 100%; }
.feature .look3__dot01 { top: 32.8rem; left: 7.818rem; --plx-k: 0.12; }
.feature .look3__dot02 { top: 73.68rem; left: 58.39rem; --plx-k: 0.2; }
.feature .look3__dot03 { top: 87.22rem; left: 25.072rem; --plx-k: 0.28; }

.feature .look1__heart01, .feature .look1__heart02, .feature .look3__dot01, .feature .look3__dot02, .feature .look3__dot03,
.feature .closing__heart01, .feature .closing__heart02 { pointer-events: none; }
.feature .credit04 { position: absolute; bottom: -.02rem; left: 3.38rem; }
.feature .look3__photo02 { margin-top: 24.706rem; display: block; }
.feature .look3__photo02 img { width: 100%; }

.feature .closing__ttl { margin-top: 22.048rem; width: 60.486rem; margin-left: 6.118rem; --fp-d: .3s; }
.feature .closing__ttl img { width: 100%; }
.feature .closing__starring { margin-top: -0.3398rem; text-align: center; font-size: 2.196rem; line-height: 3.536rem; color: #E48AC2; }
.feature .closing__name { margin-top: 0.5002rem; text-align: center; font-size: 8.4rem; line-height: 8.4rem; }

.feature .closing__all-link { display: block; pointer-events: none; }
.feature .closing__all-link .closing__photo-link, .feature .closing__all-link .closing__btn-in { pointer-events: auto; }
.feature .closing__photo { display: block; margin-top: 1.178rem; position: relative; }
.feature .closing__photo-link { display: block; width: 43.288rem; margin-left: 15.856rem; }
.feature .closing__photo-link img { width: 100%; }
.feature .closing__heart01 { position: absolute; top: 10.12rem; left: 13.28rem; width: 3.98rem; }
.feature .closing__heart02 { position: absolute; top: 22.68rem; left: 57.72rem; width: 4.08rem; }
.feature .closing__heart01 img, .feature .closing__heart02 img { width: 100%; }

.feature .closing__btn { display: block; margin-top: -3.206rem; width: 46.774rem; margin-left: 14.112rem; position: relative; z-index: 1; }
.feature .closing__btn-in { display: flex; align-items: center; height: 6.77rem; padding-left: 4.1rem; letter-spacing: .022em;
  border: .2rem solid #3E3A39; border-radius: 3.4rem; background: #fff; color: #3E3A39;
  font-size: 2.86rem; line-height: 1; white-space: nowrap; }

.feature .foot { background: #FDF5F6 url(../img/grain-foot-sp.png) 0 0 / 33.8624% auto; padding-bottom: 11.82rem; }
.feature .foot__logo { padding-top: 16.084rem; width: 11.846rem; margin-left: 31.576rem; }
.feature .foot__logo img { width: 100%; }
.feature .foot__ttl { margin-top: 10.914rem; text-align: center; font-size: 3.6rem; line-height: 3.384rem; }
.feature .foot__staff { margin-top: 4.826rem; width: 43.12rem; margin-left: 15.94rem; }
.feature .foot__staff img { width: 100%; }

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

  html { font-size: calc((100vw - var(--sbw, 0px)) * .00426146); }

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

  .feature {
             --pcu: calc((100vw - var(--sbw, 0px)) / 1400);
             --rail-top: 80px;    }

  .feature .frame { display: flex; align-items: stretch; justify-content: center; }
  .feature .frame-main { flex: 0 0 auto; width: calc(454 * var(--pcu)); }
  .feature .frame-side { position: relative; flex: 1 1 0; }
  .feature .frame-side__inner { position: sticky; top: var(--rail-top); margin-bottom: calc(80 * var(--pcu)); }
  .feature .frame-header { width: 100%; }

  .feature .pcfv { position: relative; height: calc(830.28 * var(--pcu)); overflow: hidden; }
  .feature .pcfv__photos { display: flex; height: 100%; }
  .feature .pcfv__link { display: block; width: 50%; height: 100%; }
  .feature .pcfv__photo { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
  .feature .pcfv__ttl { position: absolute; top: calc(318.4 * var(--pcu)); left: calc(400.65 * var(--pcu)); width: calc(598.7 * var(--pcu)); --fp-d: .6s; }
  .feature .pcfv__ttl img { width: 100%; }
  .feature .pcfv__starring { position: absolute; top: calc(389.88 * var(--pcu)); left: calc(535.8 * var(--pcu)); width: calc(300 * var(--pcu)); text-align: center;
    font-size: calc(23.01 * var(--pcu)); line-height: calc(37.05 * var(--pcu)); color: #E48AC2; }
  .feature .pcfv__name { position: absolute; top: calc(415.1 * var(--pcu)); left: calc(487 * var(--pcu)); width: calc(400 * var(--pcu)); text-align: center;
    font-size: calc(124 * var(--pcu)); line-height: calc(124 * var(--pcu)); }
  .feature .pcfv__logo { position: absolute; top: calc(378.1 * var(--pcu)); left: calc(1242.22 * var(--pcu)); width: calc(85.27 * var(--pcu)); }
  .feature .pcfv__logo img { width: 100%; }
  .feature .pcfv__copy { position: absolute; top: calc(715.14 * var(--pcu)); left: calc(533.7 * var(--pcu)); width: calc(300 * var(--pcu)); text-align: center;
    font-size: calc(17.84 * var(--pcu)); line-height: calc(25.15 * var(--pcu)); color: #fff; }

  .feature .rail { height: calc(100vh - var(--rail-top)); }
  .feature .rail__body { position: absolute; left: 0; right: 0; top: calc(325.1 * var(--pcu)); text-align: center; }
  .feature .rail__body:has(.rail__btn) { top: calc(365 * var(--pcu)); }
  .feature .rail__btn { position: relative; left: calc(-9.6 * var(--pcu)); }
  .feature .rail__ttl { width: calc(272.3 * var(--pcu)); margin: 0 0 0 calc(93.54 * var(--pcu)); }
  .feature .rail__ttl img { width: 100%; }
  .feature .rail__starring { margin-top: calc(-3.3 * var(--pcu)); font-size: calc(9.88 * var(--pcu)); line-height: calc(15.91 * var(--pcu)); color: #E48AC2; }
  .feature .rail__name { margin-top: calc(-1.6 * var(--pcu)); font-size: calc(53.53 * var(--pcu)); line-height: calc(53.53 * var(--pcu)); }
  .feature .rail__btn { font-size: calc(17.55 * var(--pcu)); line-height: 1; }
  .feature .rail__btn a { color: #E48AC2; text-decoration: underline; text-decoration-thickness: calc(1.5 * var(--pcu)); text-underline-offset: .2em; }

  .feature .concept { background: #FEF6F9 url(../img/grain-concept-pc.png) 0 0 / 28.1938% auto; padding-top: 6.595rem; }
  .feature .look1 { background: #FFFDF9 url(../img/grain-look1-pc.png) 0 0 / 28.1938% auto; }
  .feature .look2 { background: #FDF5F8 url(../img/grain-look2-pc.png) 0 0 / 28.1938% auto; }
  .feature .look3 { background: #FFFBFA url(../img/grain-look3-pc.png) 0 0 / 28.1938% auto; }
  .feature .foot { background: #FEF5F7 url(../img/grain-foot-pc.png) 0 0 / 28.1938% auto; }

  .feature .concept__strip, .feature .concept__sub { display: none; }
  .feature .concept__ttl { font-size: 13.986rem; line-height: 13.986rem; }
  .feature .concept__ttl-s { font-size: 8.703rem; line-height: 7.31rem; margin-bottom: -1.341rem; }

  .feature .concept__lead01, .feature .concept__lead02, .feature .concept__lead03 { font-size: 2.682rem; line-height: 5.364rem; }

  .feature .frame-main .face { margin-top: 0.292rem; }
  .feature .frame-main .look1__main { --l1-pad: 10.951rem; }
  .feature .frame-main .look1__mq { margin-top: 7.965rem; }
  .feature .frame-main .look1__photo02 { margin-top: 5.175rem; }
  .feature .frame-main .look1__photo03 { margin-top: 13.6rem; }
  .feature .frame-main .look2__ttl { margin-top: 17.457rem; }
  .feature .frame-main .look2__photo01 { margin-top: -2.684rem; }
  .feature .frame-main .look2__photo02 { margin-top: 21.507rem; }
  .feature .frame-main .look2__photo03 { margin-top: 3.706rem; }
  .feature .frame-main .mood { margin-top: -0.899rem; }
  .feature .frame-main .look3__main { margin-top: 13.763rem; }
  .feature .frame-main .look3__photo02 { margin-top: 23.873rem; }
  .feature .frame-main .closing__ttl { margin-top: 21.196rem; }
  .feature .frame-main .closing__photo { margin-top: 1.821rem; }
  .feature .frame-main .foot__logo { padding-top: 16.107rem; }
  .feature .frame-main .foot__staff { margin-top: 5.566rem; }

  .feature .look2__photo01 { margin-left: 14.616rem; }
  .feature .look2__ttl { width: 46.195rem; --l2-rise: 18.86rem; }

  .feature .concept__ttl { margin-top: 6.452rem; }
  .feature .concept__lead01 { margin-top: 5.798rem; }
  .feature .concept__lead02 { margin-top: 3.593rem; }
  .feature .concept__lead03 { margin-top: 3.827rem; }

  .feature .concept__lead01, .feature .concept__lead03 { position: relative; left: calc(-3.4 * var(--pcu)); }
  .feature .concept__lead02 { left: calc(-6.4 * var(--pcu)); }
  .feature .look1__no { margin-top: 8.09rem; position: relative; left: calc(-3.2 * var(--pcu)); }
  .feature .look1__ttl { margin-top: 3.0268rem; position: relative; left: calc(-4 * var(--pcu)); }
  .feature .look3__no { padding-top: 14.102rem; position: relative; left: calc(-4 * var(--pcu)); }
  .feature .look3__ttl { margin-top: 3.04rem; position: relative; left: calc(-2.5 * var(--pcu)); }
  .feature .credit04 { bottom: .555rem; }
  .feature .credit02 { margin-top: 2.33rem; padding-bottom: 1.34rem; }
  .feature .credit03 { margin-top: .961rem; padding-bottom: 2.514rem; }
  .feature .credit01 { padding-bottom: .67rem; }
  .feature .foot__ttl { margin-top: 10.105rem; position: relative; left: calc(-3.8 * var(--pcu)); }
  .feature .closing__name { margin-top: -0.1398rem; }

  .feature .closing__heart01 { top: 12.802rem; left: 12.274rem; }
  .feature .closing__heart02 { top: 25.865rem; left: 58.725rem; }
  .feature .closing__starring { position: relative; left: calc(-3.3 * var(--pcu)); }
  .feature .face__txt02 { top: 87.172rem; }
  .feature .mood__txt01 { top: 65.55rem; }
  .feature .mood__txt02 { top: 82.93rem; }
  .feature .look2__photo03 { margin-left: 6.202rem; }
  .feature .look3__main-link { margin-left: 22.896rem; }

  .feature .foot { padding-bottom: 11.7rem; }

  .feature .frame { padding-bottom: calc(131.8 * var(--pcu)); }

  .feature .face__heart { top: 97.639rem; left: 54.884rem; width: 6.8rem; }
}