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

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

.js-wipe { transition: clip-path 1.4s cubic-bezier(0.37, 0, 0.63, 1) var(--d, 0s); }
.js-wipe.-fromLeft   { clip-path: inset(0 100% 0 0); }
.js-wipe.-fromRight  { clip-path: inset(0 0 0 100%); }
.js-wipe.-fromTop    { clip-path: inset(0 0 100% 0); }
.js-wipe.-fromBottom { clip-path: inset(100% 0 0 0); }

.js-wipe-box.is-inview > .js-wipe { clip-path: inset(0); }
.js-wipe.is-inview   { clip-path: inset(0); }

.js-wipe-box { position: relative; }
.js-wipe-box > .js-wipe { display: block; }
.is-noanim .js-wipe { transition: none !important; clip-path: none !important; }

.is-noanim .js-reveal, .is-noanim .js-anime { transition: none !important; opacity: 1 !important; }
.is-noanim .mv__box, .is-noanim .leftcont__box { transition: none !important; opacity: 1 !important; filter: none !important; transform: none !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) .js-wipe { transition: none !important; clip-path: none !important; }
  html:not(.is-forceanim) .mv__box, html:not(.is-forceanim) .leftcont__box { transition: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }

  html:not(.is-forceanim) { scroll-behavior: auto; }
}

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

  font-family: "yu-gothic-pr6n", "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: #e3e3e3;  }
.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; }

html.js-anim .js-reveal.-a { opacity: 0; transform: none; transition: opacity .8s ease; }

html.js-anim .js-reveal.-b { opacity: 0; transform: translate3d(0, 25px, 0); transition: opacity 1.5s ease, transform 1s ease; }
html.js-anim .js-reveal.-a.is-inview, html.js-anim .js-reveal.-b.is-inview { opacity: 1; transform: none; }

html.js-anim .js-reveal.-d2 { transition-delay: .2s; }
html.js-anim .js-reveal.-d4 { transition-delay: .4s; }
html.js-anim .js-reveal.-d8 { transition-delay: .8s; }
.is-noanim .js-reveal.-a, .is-noanim .js-reveal.-b { transition: none !important; opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .js-reveal.-a, html:not(.is-forceanim) .js-reveal.-b { transition: none !important; opacity: 1 !important; transform: none !important; }
}

.feature .frame-main__inner { display: flow-root; width: 100%; margin: auto; background: #e3e3e3; }

.feature .fv__logo { margin-top: 13.054rem; margin-left: 11.053rem; width: 52.894rem; }
.feature .fv__logo img { width: 100%; }
.feature .fv__lead { margin-top: 10.7335rem; text-align: center; font-size: 2.9rem; line-height: 6.409rem; letter-spacing: .11em; color: #6e6e6e;
  font-feature-settings: "palt"; padding-left: .11em; }

.feature .fv__rule { display: block; margin-top: 6.0035rem; margin-left: 35.459rem; width: 4.083rem; height: .075rem; background: #6e6e6e; }

.feature .intro { margin-top: 5.937rem; text-align: center; font-size: 2.4rem; line-height: 4.8rem; letter-spacing: .1em; color: #6e6e6e; font-feature-settings: "palt"; padding-left: .1em; }
.feature .intro__p + .intro__p { margin-top: 4.8rem; }

.feature .look01 { position: relative; margin-top: 9.2rem; }
.feature .look01__photo { margin-left: 22rem; width: 48rem; }
.feature .look01__photo img { width: 100%; height: 64rem; object-fit: cover; }
.feature .look01__cap { position: absolute; z-index: 1; pointer-events: none; top: 10.25rem; left: 5rem; white-space: nowrap;
  font-size: 2.7rem; line-height: 5.103rem; letter-spacing: .11em; color: #6e6e6e; font-feature-settings: "palt"; }
.feature .look02 { margin-top: 5rem; }
.feature .look02__photo { margin-left: 5rem; width: 39rem; }
.feature .look02__photo img { width: 100%; height: 52rem; object-fit: cover; }
.feature .look03 { position: relative; margin-top: 15rem; }

.feature .look03__cap { position: absolute; z-index: 1; pointer-events: none; top: 73.935rem; right: 7.853rem; white-space: nowrap; text-align: right;
  font-size: 2.7rem; line-height: 5.102rem; letter-spacing: .11em; color: #fff; font-feature-settings: "palt"; }
.feature .look03__photo { margin-left: 5rem; width: 65rem; }
.feature .look03__photo img { width: 100%; height: 86.667rem; object-fit: cover; }
.feature .look01__photo a, .feature .look02__photo a, .feature .look03__photo a { display: block; }

.feature .credit .item { border-bottom: none; padding-bottom: 0; line-height: inherit; letter-spacing: 0; white-space: nowrap; }
.feature .credit .link { color: #555; }

.feature .photo-credit { margin-top: 2.187rem; width: 70.204rem;  line-height: 4.247rem; color: #555; }
.feature .photo-credit .item { display: flex; justify-content: flex-end; align-items: baseline; }
.feature .photo-credit .txt { font-size: 2.2rem; letter-spacing: .085em; }
.feature .photo-credit .en { font-family: "futura-pt", sans-serif; font-weight: 300; }

.feature .photo-credit .price { margin-left: 1.283rem; font-family: "futura-pt", sans-serif; font-weight: 300; font-size: 2.4rem; letter-spacing: .085em; }

.feature .card { margin-left: 5rem; width: 31rem; text-align: center; color: #555; }
.feature .card .ranking-list ul { margin: 0; padding: 0; list-style: none; }
.feature .card .ranking-list li { white-space: nowrap; }
.feature .card .m-item a { display: block; color: #555; }
.feature .card .m-item-image { margin-top: 19.29rem; height: 41.6rem; background: #949494; }
.feature .card .m-item-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

.feature .card .m-item-description { display: flex; flex-direction: column; font-size: 0; line-height: 0; }
.feature .card .m-item-description > div { order: 4; font-size: 2.1rem; line-height: normal; }
.feature .card .brandandprice { display: contents; }
.feature .card .m-item-brand { order: 1; margin-top: 2.004rem; font-size: 2.1rem; line-height: 4.242rem; }
.feature .card .m-item-name { order: 2; margin: 0.443rem 0 0; font-size: 2.8rem; font-weight: inherit; line-height: 4.256rem; }

.feature .card .m-item-price { order: 3; font-size: 0; line-height: 4.25rem; }
.feature .card .m-item-price > span,
.feature .card .m-item-price::after { font-size: 2.5rem; vertical-align: top; }
.feature .card .m-item-price::before { content: ""; display: block; margin: 1.163rem 0 2.495rem 14.4rem; width: 2.2rem; height: .1rem; background: #555; }
.feature .card .m-item-price::after { content: "税込"; }

.feature .goods { padding-bottom: 18.36rem; }
.feature .allitems { margin-top: 19.4rem; margin-left: 10.5rem; width: 54rem; }
.feature .allitems a { display: flex; align-items: center; justify-content: center; height: 8.1rem; padding-top: .4rem; background: #f0f0f0;
  font-size: 2.2rem; line-height: 1; letter-spacing: .075em; color: #555; font-feature-settings: "palt"; }

.feature .allitems__arrow { display: inline-block; margin-left: 1.1rem; width: 1rem; height: 1rem;
  border-top: .15rem solid #555; border-right: .15rem solid #555; transform: rotate(45deg); }

@media screen and (min-width: 751px) {
  html { font-size: 0.714286vw; }
  .feature .pc { display: block; }
  .feature .sp { display: none; }
  .feature .frame { display: flex; align-items: stretch; justify-content: center; }
  .feature .frame-main { flex: 0 0 auto; width: 75rem; }
}
@media screen and (min-width: 1400px) {
  html { font-size: 10px; }
}