@charset "UTF-8";

body { margin: 0; }

.area-header { width: 100%; }
.l-container::after { content: ""; }
sup, sub { position: static; top: auto; }

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

  font-family: "Noto Sans JP", "noto-sans-cjk-jp", sans-serif;

  font-weight: 350; font-style: normal; color: #707070; text-align: center;

  font-feature-settings: "palt";
  text-spacing-trim: space-all; line-break: strict; background: #fff; }
.feature * { margin: 0; padding: 0; border: 0; vertical-align: baseline; box-sizing: border-box; }
.feature h1, .feature h2, .feature h3, .feature strong, .feature b { font-weight: inherit; }
.feature .pc { display: none; }
.feature a { color: #707070; text-decoration: none; }
.feature img { display: block; vertical-align: bottom; max-width: 100%; height: auto; }
.feature ul { list-style: none; }
.feature .feature-inner { display: flow-root; position: relative; }

.feature .hero { position: relative; background: #e2eef7; }
.feature .hero > img, .feature .hero__ttl { position: absolute; max-width: none; }
.feature .hero__frame { z-index: 1; }
.feature .hero__logo { z-index: 2; }
.feature .hero__ttl { z-index: 5; line-height: 1; letter-spacing: .2em; white-space: nowrap; }
.feature .hero__dog, .feature .hero__bags, .feature .hero__cat, .feature .hero__carry { z-index: 3; }
.feature .hero__ribbon { z-index: 4; }

.feature .search-ttl { line-height: 1; letter-spacing: .16em; padding-left: .16em; }

.feature .search-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  background: #e2eef7; color: #707070; line-height: 1; }
.feature .item-btns__item { position: relative; }

.feature .item-btns__pic { position: absolute; z-index: 1; max-width: none; pointer-events: none; }

@media (hover: hover) {
  .feature a:not(:has(img:not([alt=""]))) { transition: opacity .3s; }
  .feature a:not(:has(img:not([alt=""]))):hover { opacity: .7; text-decoration: none; }
}

@media screen and (max-width: 750px) {
  html { font-size: 1.3333333vw; }
  .feature { font-size: 2.6rem; margin-bottom: 14.41rem; }
  .feature .sp { font-weight: 500; }   .feature .pc { display: none; }

  .feature .hero { width: 75rem; height: 30.747rem; margin-top: 3.74rem; }
  .feature .hero__cat    { left: 56.481rem; top: -5.324rem; width: 16.621rem; height: 21.244rem; }
  .feature .hero__dog    { left: 1.168rem;  top: -2.546rem; width: 14.874rem; height: 19.867rem; }
  .feature .hero__frame  { left: 1.467rem;  top: 1.501rem;  width: 71.995rem; height: 27.747rem; }
  .feature .hero__logo   { left: 23.185rem; top: 5.856rem;  width: 28.63rem;  height: 8.319rem; }
  .feature .hero__carry  { left: 52.674rem; top: 8.155rem;  width: 21.349rem; height: 27.306rem; }
  .feature .hero__ribbon { left: 63.123rem; top: 11.81rem;  width: 8.941rem;  height: 6.744rem; }
  .feature .hero__bags   { left: 2.25rem;   top: 12.515rem; width: 14.602rem; height: 21.903rem; }

  .feature .hero__ttl    { left: 17.639rem; top: 17.97rem; font-size: 3.792rem; }
  .feature .hero__amp    { font-size: 3.22rem; }

  .feature .search-ttl { font-size: 2.8rem; }
  .feature .search-ttl.-size { margin-top: 10.025rem; }

  .feature .search-ttl.-item { margin-top: 15.148rem; }

  .feature .size-btns { display: flex; justify-content: center; gap: 1.347rem; margin-top: 3.352rem; }
  .feature .size-btns__item { width: 22.4rem; height: 10rem; }
  .feature .size-btns .search-btn { letter-spacing: .12em; padding-left: .12em; }

  .feature .item-btns { display: grid; grid-template-columns: repeat(2, 34rem); justify-content: center;
    column-gap: 2rem; row-gap: 2.08rem; margin-top: 3.28rem; }
  .feature .item-btns__item { height: 10rem; }

  .feature .item-btns .search-btn { letter-spacing: .16em; padding-top: .5rem; }
  .feature .item-btns__item.-wear    .search-btn { padding-left: 4.416rem; }
  .feature .item-btns__item.-bed     .search-btn { padding-right: 9.096rem; }
  .feature .item-btns__item.-carry   .search-btn { padding-left: 8.53rem; }
  .feature .item-btns__item.-harness .search-btn { padding-right: 4.984rem; }
  .feature .item-btns__item.-goods   .search-btn { padding-left: 7.73rem; }
  .feature .item-btns__item.-all     .search-btn { padding-left: .16em; }

  .feature .item-btns__item.-wear    .item-btns__pic { left: -.352rem;  top: -3.2rem;   width: 12.452rem; height: 14.266rem; }
  .feature .item-btns__item.-bed     .item-btns__pic { left: 23.133rem; top: -2.486rem; width: 10.478rem; height: 13.979rem; }
  .feature .item-btns__item.-carry   .item-btns__pic { left: -1.036rem; top: -4.763rem; width: 12.526rem; height: 16.731rem; }
  .feature .item-btns__item.-harness .item-btns__pic { left: 25.863rem; top: -1.757rem; width: 8.345rem;  height: 11.145rem; }
  .feature .item-btns__item.-goods   .item-btns__pic { left: .484rem;   top: -5.56rem;  width: 12.495rem; height: 18.743rem; }
}

@media screen and (min-width: 751px) {
  .feature { font-size: 21px; margin-bottom: 153.5px; }   .feature .pc { display: block; }
  .feature .sp { display: none; }
  .feature .feature-inner { width: 1000px; margin: 0 auto; }

  .feature .hero { width: 705px; height: 285px; margin: 57.47px 0 0 147.17px; }
  .feature .hero__cat    { left: 507.4px;  top: -41.29px; width: 173.79px; height: 211.89px; }
  .feature .hero__dog    { left: 17.81px;  top: -21.46px; width: 134.08px; height: 179.08px; }
  .feature .hero__frame  { left: 15.88px;  top: 15.85px;  width: 673.26px; height: 253.31px; }
  .feature .hero__logo   { left: 236.8px;  top: 64.27px;  width: 232.07px; height: 67.43px; }
  .feature .hero__carry  { left: 504.31px; top: 113.07px; width: 192.45px; height: 246.14px; }
  .feature .hero__ribbon { left: 622.28px; top: 130.16px; width: 80.6px;   height: 60.79px; }
  .feature .hero__bags   { left: 19.77px;  top: 149.57px; width: 131.62px; height: 197.43px; }

  .feature .hero__ttl    { left: 140.4px; top: 164.2px; font-size: 40px; }
  .feature .hero__amp    { font-size: 35px; }

  .feature .search-ttl { font-size: 26px; }
  .feature .search-ttl.-size { margin-top: 92.73px; }

  .feature .search-ttl.-item { margin-top: 140.08px; }

  .feature .size-btns { display: flex; gap: 19px; margin: 30.92px 0 0 -.4px; }
  .feature .size-btns__item { width: 318px; height: 80px; }
  .feature .size-btns .search-btn { letter-spacing: .12em; padding: 2px 0 0 .12em; }

  .feature .item-btns { display: flex; gap: 19px; margin: 30.32px 0 0 -.35px; }
  .feature .item-btns__item { width: 150px; height: 80px; }
  .feature .item-btns .search-btn { letter-spacing: .16em; line-height: 1.19; padding: 1px 0 0 .16em; }
  .feature .item-btns__item.-wear .search-btn { letter-spacing: .2em; padding-left: .2em; }

  .feature .item-btns__item.-wear    .item-btns__pic { left: 75.72px; top: 35.3px;  width: 81.27px; height: 93.11px; }
  .feature .item-btns__item.-bed     .item-btns__pic { left: 75.87px; top: 32.36px; width: 81.14px; height: 108.25px; }
  .feature .item-btns__item.-carry   .item-btns__pic { left: 81.23px; top: 20.05px; width: 92.54px; height: 123.6px; }
  .feature .item-btns__item.-harness .item-btns__pic { left: 99.13px; top: 38.19px; width: 65.39px; height: 87.34px; }
  .feature .item-btns__item.-goods   .item-btns__pic { left: 74.95px; top: 20.61px; width: 81.67px; height: 122.5px; }
}