@charset "UTF-8";
/* ========================================
   ペット同伴LP（pet-ring）
   SPはカンプ（幅430px）の実測値、PC（768px〜）はカンプが無いため本ファイルで組んだレイアウト
   ======================================== */
/* ========================================
     Functions
     ======================================== */
/* ========================================
     Tokens
     ======================================== */
/* ========================================
     Base
     ======================================== */
.st-Contents {
  padding-top: 0;
}

.pet-ring {
  overflow-x: clip;
  font-family: YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", sans-serif;
  font-weight: 500;
  color: #231815;
}
.pet-ring :where(h1, h2, h3, p, ul, ol, li) {
  margin: 0;
  padding: 0;
}
.pet-ring :where(ul, ol) {
  list-style: none;
}
.pet-ring :where(h1, h2, h3) {
  font-family: YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", sans-serif;
}
.pet-ring :where(h1, h2, h3) span {
  font-family: inherit;
}
.pet-ring :where(img) {
  display: block;
  max-width: 100%;
  height: auto;
}
.pet-ring em {
  font-style: normal;
}
.pet-ring [hidden] {
  display: none;
}

.pet-ring__sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  white-space: nowrap;
  clip-path: inset(50%);
  margin: -1px;
  padding: 0;
}

/* ========================================
     FV
     ======================================== */
.pet-ring-fv {
  position: relative;
}

.pet-ring-fv__slider {
  overflow: hidden;
}
@media (min-width: 768px) {
  .pet-ring-fv__slider {
    width: min(100% - 80px, 1120px);
    margin-inline: auto;
  }
}

.pet-ring-fv__slide img {
  width: 100%;
  aspect-ratio: 257/290;
  object-fit: cover;
}
@media (min-width: 768px) {
  .pet-ring-fv__slide img {
    aspect-ratio: 3/2;
  }
}

.pet-ring-fv__copy {
  position: absolute;
  right: 0;
  bottom: calc(135 / 430 * 100vw);
  left: 0;
  z-index: 2;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 calc(10 / 430 * 100vw) rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
@media (min-width: 768px) {
  .pet-ring-fv__copy {
    bottom: 48px;
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
  }
}

.pet-ring-fv__title {
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Sans", YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", sans-serif;
  font-weight: 600;
  font-size: calc(15.75 / 430 * 100vw);
  line-height: 1;
  letter-spacing: 0.4em;
  padding-left: 0.4em;
}
@media (min-width: 768px) {
  .pet-ring-fv__title {
    font-size: 30px;
  }
}

.pet-ring-fv__en {
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Sans", YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", sans-serif;
  font-weight: 600;
  font-size: calc(10.12 / 430 * 100vw);
  line-height: 1;
  letter-spacing: 0.2em;
  margin-top: calc(17.1 / 430 * 100vw);
  padding-left: 0.2em;
}
@media (min-width: 768px) {
  .pet-ring-fv__en {
    font-size: 16px;
    margin-top: 20px;
  }
}

/* ========================================
     TOPIC
     ======================================== */
.pet-ring-topic {
  background-color: #f6f5f0;
  padding-top: calc(43.2 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-topic {
    padding-top: 80px;
  }
}

.pet-ring-topic__label {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(16.8 / 430 * 100vw);
  height: calc(18.3 / 430 * 100vw);
  font-family: "小塚ゴシック Pr6N", "Kozuka Gothic Pr6N", YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", sans-serif;
  font-size: calc(18.27 / 430 * 100vw);
  line-height: 1;
  letter-spacing: 0.18em;
  color: #b35131;
  padding-left: calc(26 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-topic__label {
    gap: 24px;
    height: 30px;
    font-size: 30px;
    padding-left: 40px;
  }
}
.pet-ring-topic__label img {
  position: relative;
  top: calc(-3 / 430 * 100vw);
  width: calc(26.3 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-topic__label img {
    top: -4px;
    width: 40px;
  }
}

.pet-ring-topic__card {
  overflow: hidden;
  width: calc(390.2 / 430 * 100vw);
  text-align: center;
  background-color: #fff;
  border: 1px solid #b35131;
  border-radius: calc(9 / 430 * 100vw);
  margin: calc(15.5 / 430 * 100vw) auto 0;
  padding: calc(30.4 / 430 * 100vw) 0 calc(28 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-topic__card {
    width: min(100% - 80px, 880px);
    border-radius: 12px;
    margin-top: 28px;
    padding: 60px 0 44px;
  }
}

.pet-ring-topic__heading {
  width: fit-content;
  font-family: "小塚ゴシック Pr6N", "Kozuka Gothic Pr6N", YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", sans-serif;
  font-weight: 500;
  font-size: calc(19.6 / 430 * 100vw);
  line-height: 1.75;
  letter-spacing: 0.18em;
  text-align: left;
  color: #231815;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .pet-ring-topic__heading {
    font-size: 32px;
  }
}
.pet-ring-topic__heading em {
  color: #b35131;
}
.pet-ring-topic__heading em:nth-of-type(2) {
  color: #b3513f;
}

.pet-ring-topic__divider {
  width: calc(306 / 430 * 100vw);
  margin: calc(16.85 / 430 * 100vw) 0 0 calc(44.1 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-topic__divider {
    width: 460px;
    margin: 28px auto 0;
  }
}

.pet-ring-topic__text {
  width: calc(326 / 430 * 100vw);
  font-size: calc(12 / 430 * 100vw);
  line-height: 2;
  letter-spacing: 0.06em;
  text-align: left;
  color: #000;
  margin: calc(11 / 430 * 100vw) 0 0 calc(38.2 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-topic__text {
    width: min(100% - 80px, 640px);
    font-size: 16px;
    margin: 24px auto 0;
  }
}
.pet-ring-topic__text em {
  color: #b3513f;
}

.pet-ring-topic__quote {
  display: inline-block;
}

.pet-ring-topic__slider {
  margin-top: calc(24.1 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-topic__slider {
    margin-top: 40px;
  }
}

.pet-ring-topic__slide {
  width: calc(236.4 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-topic__slide {
    width: 480px;
  }
}
.pet-ring-topic__slide img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
}

.pet-ring-topic__pagination {
  position: static;
  display: flex;
  justify-content: center;
  gap: calc(12.5 / 430 * 100vw);
  margin-top: calc(22.4 / 430 * 100vw);
  --swiper-pagination-bullet-horizontal-gap: 0;
}
@media (min-width: 768px) {
  .pet-ring-topic__pagination {
    gap: 16px;
    margin-top: 32px;
  }
}
.pet-ring-topic__pagination .swiper-pagination-bullet {
  width: calc(8 / 430 * 100vw);
  height: calc(8 / 430 * 100vw);
  background-color: #666;
  opacity: 1;
  margin: 0;
}
@media (min-width: 768px) {
  .pet-ring-topic__pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
  }
}
.pet-ring-topic__pagination .swiper-pagination-bullet-active {
  background-color: #1a1a1a;
}

/* ========================================
     導入文
     ======================================== */
.pet-ring-intro {
  font-size: calc(13.32 / 430 * 100vw);
  line-height: 1.49;
  letter-spacing: 0.1em;
  text-align: center;
  color: #1a1a1a;
  background-color: #f6f5f0;
  padding: calc(68.85 / 430 * 100vw) calc(10 / 430 * 100vw) calc(148.15 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-intro {
    font-size: 18px;
    line-height: 1.9;
    padding: 100px 40px 220px;
  }
}
.pet-ring-intro em {
  color: #b35131;
}

.pet-ring-intro__lead {
  font-family: YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", sans-serif;
  font-weight: 500;
  font-size: inherit;
  margin-bottom: calc(28.8 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-intro__lead {
    margin-bottom: 40px;
  }
}

.pet-ring-intro__text + .pet-ring-intro__text {
  margin-top: calc(19.8 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-intro__text + .pet-ring-intro__text {
    margin-top: 32px;
  }
}

/* ========================================
     3つの安心ポイント
     ======================================== */
.pet-ring-point {
  position: relative;
  z-index: 2;
  background-color: #e7e0d6;
  padding: calc(30.9 / 430 * 100vw) 0 calc(28.1 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-point {
    padding: 40px 0 64px;
  }
}
.pet-ring-point::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: calc(28.7 / 430 * 100vw);
  background: url("../img/pet-ring/wave-point.svg") no-repeat center bottom/100% 100%;
}
@media (min-width: 768px) {
  .pet-ring-point::before {
    height: min(28.7 / 430 * 100vw, 64px);
  }
}
.pet-ring-point::after {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(143.4 / 430 * 100vw);
  width: calc(142.4 / 430 * 100vw);
  height: calc(21.1 / 430 * 100vw);
  background-color: #e7e0d6;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
@media (min-width: 768px) {
  .pet-ring-point::after {
    left: calc(50% - 100px);
    width: 200px;
    height: 30px;
  }
}

.pet-ring-point__staff {
  position: absolute;
  top: calc(-67.1 / 430 * 100vw);
  left: calc(229.1 / 430 * 100vw);
  z-index: 1;
  width: calc(122.1 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-point__staff {
    top: -96px;
    left: calc(50% + 40px);
    width: 160px;
  }
}

.pet-ring-point__paws {
  position: absolute;
  top: calc(-9.6 / 430 * 100vw);
  left: calc(364.9 / 430 * 100vw);
  width: calc(34.6 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-point__paws {
    top: -10px;
    left: calc(50% + 250px);
    width: 52px;
  }
}

.pet-ring-point__label {
  position: relative;
  z-index: 2;
  font-family: "小塚ゴシック Pr6N", "Kozuka Gothic Pr6N", YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: calc(21.73 / 430 * 100vw);
  line-height: 1;
  letter-spacing: 0.22em;
  color: #b35131;
  padding-left: calc(104.7 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-point__label {
    font-size: 34px;
    padding-left: calc(50% - 190px);
  }
}

.pet-ring-point__heading {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(373.4 / 430 * 100vw);
  height: calc(64.8 / 430 * 100vw);
  font-family: "小塚ゴシック Pr6N", "Kozuka Gothic Pr6N", YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", sans-serif;
  font-weight: 500;
  font-size: calc(26.39 / 430 * 100vw);
  line-height: 1;
  letter-spacing: 0.088em;
  color: #b35131;
  background-color: #fff;
  border: 1px solid #b35131;
  margin: calc(20.6 / 430 * 100vw) 0 0 calc(28.4 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-point__heading {
    width: 640px;
    height: 96px;
    font-size: 40px;
    margin: 28px auto 0;
  }
}

.pet-ring-point__heading-num {
  margin-right: calc(9.6 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-point__heading-num {
    margin-right: 14px;
  }
}

.pet-ring-point__list {
  margin-top: calc(52 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-point__list {
    width: min(100% - 80px, 880px);
    margin: 80px auto 0;
  }
}

.pet-ring-point__item + .pet-ring-point__item {
  margin-top: calc(32 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-point__item + .pet-ring-point__item {
    margin-top: 56px;
  }
}

.pet-ring-point__title {
  position: relative;
  display: flex;
  align-items: center;
  width: calc(401.8 / 430 * 100vw);
  height: calc(38 / 430 * 100vw);
  background: linear-gradient(to right, transparent calc(34.1 / 430 * 100vw), #fff calc(34.1 / 430 * 100vw));
  margin-left: calc(14.2 / 430 * 100vw);
  padding-left: calc(53.1 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-point__title {
    width: 100%;
    height: 60px;
    background: linear-gradient(to right, transparent 54px, #fff 54px);
    margin-left: 0;
    padding-left: 84px;
  }
}

.pet-ring-point__num {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(38.5 / 430 * 100vw);
  height: 100%;
  background-color: #b35131;
  border-radius: calc(3.5 / 430 * 100vw) 0 0 calc(3.5 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-point__num {
    width: 60px;
    border-radius: 5px 0 0 5px;
  }
}
.pet-ring-point__num img {
  width: auto;
  height: calc(20 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-point__num img {
    height: 31px;
  }
}

.pet-ring-point__title-text {
  font-weight: 700;
  font-size: calc(14.67 / 430 * 100vw);
  line-height: 1;
  letter-spacing: 0.085em;
  color: #333;
}
@media (min-width: 768px) {
  .pet-ring-point__title-text {
    font-size: 22px;
  }
}
.pet-ring-point__title-text em {
  color: #b35131;
}
.pet-ring-point__item:nth-child(3) .pet-ring-point__title-text {
  letter-spacing: 0.022em;
}
@media (min-width: 768px) {
  .pet-ring-point__item:nth-child(3) .pet-ring-point__title-text {
    letter-spacing: 0.085em;
  }
}

.pet-ring-point__body {
  display: grid;
  grid-template-columns: calc(200 / 430 * 100vw) calc(163.9 / 430 * 100vw);
  column-gap: calc(15.5 / 430 * 100vw);
  padding-left: calc(36.6 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-point__body {
    grid-template-columns: minmax(0, 1fr) min(400px, 48%);
    column-gap: 48px;
    padding-left: 54px;
  }
}

.pet-ring-point__text {
  align-self: center;
  font-size: calc(11 / 430 * 100vw);
  line-height: 1.75;
  letter-spacing: 0.187em;
  color: #231815;
  padding-top: calc(10 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-point__text {
    font-size: 16px;
    line-height: 2;
    letter-spacing: 0.1em;
    padding: 24px 0;
  }
}

.pet-ring-point__img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
}

.pet-ring-point__shops {
  width: calc(352.8 / 430 * 100vw);
  text-align: center;
  background-color: #f6f5f0;
  margin: calc(46.6 / 430 * 100vw) 0 0 calc(35.5 / 430 * 100vw);
  padding: calc(15.7 / 430 * 100vw) 0 calc(16.5 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-point__shops {
    width: 640px;
    margin: 72px auto 0;
    padding: 28px 0;
  }
}

.pet-ring-point__shops-title {
  font-family: "小塚ゴシック Pr6N", "Kozuka Gothic Pr6N", YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", sans-serif;
  font-size: calc(11.48 / 430 * 100vw);
  line-height: 1;
  letter-spacing: 0.147em;
}
@media (min-width: 768px) {
  .pet-ring-point__shops-title {
    font-size: 18px;
  }
}

.pet-ring-point__shops-list {
  display: grid;
  place-items: center;
  width: calc(317.4 / 430 * 100vw);
  height: calc(35.8 / 430 * 100vw);
  font-family: "小塚ゴシック Pr6N", "Kozuka Gothic Pr6N", YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", sans-serif;
  font-size: calc(12.43 / 430 * 100vw);
  line-height: 1;
  letter-spacing: 0.208em;
  background-color: #fff;
  border-radius: calc(7.35 / 430 * 100vw);
  margin: calc(18 / 430 * 100vw) auto 0;
}
@media (min-width: 768px) {
  .pet-ring-point__shops-list {
    width: 540px;
    height: 60px;
    font-size: 20px;
    border-radius: 10px;
    margin-top: 22px;
  }
}

.pet-ring-point__note {
  font-family: "小塚ゴシック Pr6N", "Kozuka Gothic Pr6N", YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", sans-serif;
  font-size: calc(8 / 430 * 100vw);
  line-height: 1;
  letter-spacing: 0.215em;
  text-align: center;
  margin-top: calc(16.2 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-point__note {
    font-size: 13px;
    letter-spacing: 0.15em;
    margin-top: 24px;
  }
}

/* ========================================
     全国9店舗展開
     ======================================== */
.pet-ring-shop {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #231815;
  background-color: #f6f5f0;
  padding: calc(42.4 / 430 * 100vw) 0 calc(39.4 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-shop {
    padding: 88px 0 72px;
  }
}
.pet-ring-shop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(132.5 / 430 * 100vw);
  width: calc(148 / 430 * 100vw);
  height: calc(21.9 / 430 * 100vw);
  background-color: #f6f5f0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
@media (min-width: 768px) {
  .pet-ring-shop::after {
    left: calc(50% - 110px);
    width: 220px;
    height: 32px;
  }
}

.pet-ring-shop__heading {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-family: "小塚ゴシック Pr6N", "Kozuka Gothic Pr6N", YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", sans-serif;
  font-weight: 500;
}

.pet-ring-shop__deco {
  width: calc(19.7 / 430 * 100vw);
  margin: calc(19.1 / 430 * 100vw) calc(18 / 430 * 100vw) 0 0;
}
@media (min-width: 768px) {
  .pet-ring-shop__deco {
    width: 30px;
    margin: 31px 28px 0 0;
  }
}
.pet-ring-shop__deco + .pet-ring-shop__heading-text + .pet-ring-shop__deco {
  width: calc(18.6 / 430 * 100vw);
  margin: calc(19.1 / 430 * 100vw) 0 0 calc(8.3 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-shop__deco + .pet-ring-shop__heading-text + .pet-ring-shop__deco {
    width: 29px;
    margin: 31px 0 0 14px;
  }
}

.pet-ring-shop__heading-text {
  font-family: "小塚ゴシック Pr6N", "Kozuka Gothic Pr6N", YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", sans-serif;
  font-size: calc(12.42 / 430 * 100vw);
  line-height: 1;
  letter-spacing: 0.1em;
}
@media (min-width: 768px) {
  .pet-ring-shop__heading-text {
    font-size: 20px;
  }
}

.pet-ring-shop__count {
  display: inline-block;
  vertical-align: calc(-7 / 430 * 100vw);
  font-size: calc(40.41 / 430 * 100vw);
  line-height: 1;
  letter-spacing: 0;
  color: #b35131;
  -webkit-text-stroke: calc(2 / 430 * 100vw) #b35131;
  margin: 0 calc(14.8 / 430 * 100vw) 0 calc(10.1 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-shop__count {
    vertical-align: -11px;
    font-size: 64px;
    -webkit-text-stroke: 3px #b35131;
    margin: 0 22px 0 16px;
  }
}

.pet-ring-shop__text {
  font-family: "小塚ゴシック Pr6N", "Kozuka Gothic Pr6N", YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", sans-serif;
  font-size: calc(10 / 430 * 100vw);
  line-height: 1.75;
  letter-spacing: 0.2em;
  margin-top: calc(24 / 430 * 100vw);
  padding-left: 0.2em;
}
@media (min-width: 768px) {
  .pet-ring-shop__text {
    font-size: 16px;
    line-height: 2;
    margin-top: 32px;
  }
}

.pet-ring-shop__button {
  display: flex;
  align-items: center;
  gap: calc(14.9 / 430 * 100vw);
  width: calc(256.5 / 430 * 100vw);
  height: calc(38.5 / 430 * 100vw);
  font-family: "小塚ゴシック Pr6N", "Kozuka Gothic Pr6N", YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", sans-serif;
  font-size: calc(12.62 / 430 * 100vw);
  line-height: 1;
  letter-spacing: 0.2em;
  color: #fff;
  text-decoration: none;
  background-color: #b35131;
  margin: calc(25.45 / 430 * 100vw) 0 0 calc(83.8 / 430 * 100vw);
  padding-left: calc(17 / 430 * 100vw);
  transition: opacity 0.3s;
}
@media (min-width: 768px) {
  .pet-ring-shop__button {
    gap: 22px;
    width: 400px;
    height: 60px;
    font-size: 18px;
    margin: 40px auto 0;
    padding-left: 28px;
  }
}
@media (any-hover: hover) {
  .pet-ring-shop__button:hover {
    opacity: 0.7;
  }
}
.pet-ring-shop__button img {
  width: calc(28.1 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-shop__button img {
    width: 42px;
  }
}

/* ========================================
     特典
     ======================================== */
.pet-ring-benefit {
  background-color: #fff;
}

.pet-ring-benefit__intro {
  text-align: center;
  padding: calc(52.1 / 430 * 100vw) 0 calc(37.1 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-benefit__intro {
    padding: 100px 0 72px;
  }
}

.pet-ring-benefit__lead {
  font-family: "小塚ゴシック Pr6N", "Kozuka Gothic Pr6N", YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", sans-serif;
  font-size: calc(10.25 / 430 * 100vw);
  line-height: 1;
  letter-spacing: 0.21em;
  color: #4d4d4d;
  padding-left: 0.21em;
}
@media (min-width: 768px) {
  .pet-ring-benefit__lead {
    font-size: 16px;
  }
}

.pet-ring-benefit__divider {
  width: calc(242 / 430 * 100vw);
  margin: calc(13.2 / 430 * 100vw) auto 0;
}
@media (min-width: 768px) {
  .pet-ring-benefit__divider {
    width: 360px;
    margin-top: 20px;
  }
}

.pet-ring-benefit__heading {
  position: relative;
  isolation: isolate;
  width: fit-content;
  font-family: "小塚ゴシック Pr6N", "Kozuka Gothic Pr6N", YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", sans-serif;
  font-weight: 500;
  font-size: calc(26.36 / 430 * 100vw);
  line-height: 1;
  letter-spacing: 0.07em;
  color: #4d4d4d;
  margin: calc(39.5 / 430 * 100vw) auto 0;
}
@media (min-width: 768px) {
  .pet-ring-benefit__heading {
    font-size: 42px;
    margin-top: 60px;
  }
}
.pet-ring-benefit__heading::before {
  content: "";
  position: absolute;
  right: calc(-16.2 / 430 * 100vw);
  bottom: calc(-3.2 / 430 * 100vw);
  left: calc(-32.3 / 430 * 100vw);
  z-index: -1;
  height: calc(9.7 / 430 * 100vw);
  background-color: #f8d267;
}
@media (min-width: 768px) {
  .pet-ring-benefit__heading::before {
    right: -26px;
    bottom: -5px;
    left: -52px;
    height: 15px;
  }
}
.pet-ring-benefit__heading em {
  color: #b3513f;
}

.pet-ring-benefit__dots {
  -webkit-text-emphasis: filled dot #4d4d4d;
  text-emphasis: filled dot #4d4d4d;
}

.pet-ring-benefit-item {
  position: relative;
}
@media (min-width: 768px) {
  .pet-ring-benefit-item {
    padding-inline: max(40px, (100% - 880px) / 2);
  }
}
.pet-ring-benefit-item--tag {
  background-color: #cdc7b5;
  padding-bottom: calc(20.7 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-benefit-item--tag {
    padding-bottom: 48px;
  }
}
.pet-ring-benefit-item--movie {
  background-color: #9eadb7;
  padding-bottom: calc(37.6 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-benefit-item--movie {
    padding-bottom: 64px;
  }
}
.pet-ring-benefit-item--photo {
  background-color: #ccafa3;
  padding-bottom: calc(75.9 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-benefit-item--photo {
    padding-bottom: 120px;
  }
}

.pet-ring-benefit-item__visual {
  width: calc(332.7 / 430 * 100vw);
  aspect-ratio: 332.7/209.3;
  object-fit: cover;
}
@media (min-width: 768px) {
  .pet-ring-benefit-item__visual {
    width: 77.4%;
  }
}
.pet-ring-benefit-item--movie .pet-ring-benefit-item__visual {
  width: calc(356.4 / 430 * 100vw);
  aspect-ratio: 356.4/224;
  margin: 0 calc(0.7 / 430 * 100vw) 0 auto;
}
@media (min-width: 768px) {
  .pet-ring-benefit-item--movie .pet-ring-benefit-item__visual {
    width: 82.9%;
    margin-right: 0;
  }
}
.pet-ring-benefit-item--photo .pet-ring-benefit-item__visual {
  width: calc(338.9 / 430 * 100vw);
  aspect-ratio: 338.9/226.1;
  margin-left: calc(0.7 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-benefit-item--photo .pet-ring-benefit-item__visual {
    width: 78.8%;
    margin-left: 0;
  }
}

.pet-ring-benefit-item__label {
  position: relative;
  width: calc(363.3 / 430 * 100vw);
  height: calc(106.8 / 430 * 100vw);
  background: url("../img/pet-ring/stripe-tag.webp") no-repeat center/100% 100%, #a49979;
  margin: calc(-21.4 / 430 * 100vw) 0 0 calc(63.5 / 430 * 100vw);
  padding: calc(17.2 / 430 * 100vw) 0 0 calc(76.3 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-benefit-item__label {
    width: 84.5%;
    height: calc(106.8 * 1.6px);
    margin: calc(-21.4 * 1.6px) 0 0 14.8%;
    padding: calc(17.2 * 1.6px) 0 0 calc(76.3 * 1.6px);
  }
}
.pet-ring-benefit-item--movie .pet-ring-benefit-item__label {
  background: url("../img/pet-ring/stripe-movie.webp") no-repeat center/100% 100%, #508b9b;
  border: 0.75px solid #418b9b;
  margin: calc(-15.1 / 430 * 100vw) 0 0 calc(1 / 430 * 100vw);
  padding: calc(17.4 / 430 * 100vw) 0 0 calc(76.2 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-benefit-item--movie .pet-ring-benefit-item__label {
    margin: calc(-15.1 * 1.6px) 0 0;
    padding: calc(17.4 * 1.6px) 0 0 calc(76.2 * 1.6px);
  }
}
.pet-ring-benefit-item--photo .pet-ring-benefit-item__label {
  width: calc(339.5 / 430 * 100vw);
  background: url("../img/pet-ring/stripe-photo.webp") no-repeat center/100% 100%, #a87660;
  margin: calc(-40.7 / 430 * 100vw) 0 0 calc(90 / 430 * 100vw);
  padding-left: calc(76.2 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-benefit-item--photo .pet-ring-benefit-item__label {
    width: 79%;
    margin: calc(-40.7 * 1.6px) 0 0 21%;
    padding-left: calc(76.2 * 1.6px);
  }
}

.pet-ring-benefit-item__num {
  position: absolute;
  top: calc(30.4 / 430 * 100vw);
  left: calc(32.1 / 430 * 100vw);
  width: auto;
  height: calc(53.1 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-benefit-item__num {
    top: calc(30.4 * 1.6px);
    left: calc(32.1 * 1.6px);
    height: calc(53.1 * 1.6px);
  }
}
.pet-ring-benefit-item--movie .pet-ring-benefit-item__num {
  top: calc(28 / 430 * 100vw);
  left: calc(24.1 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-benefit-item--movie .pet-ring-benefit-item__num {
    top: calc(28 * 1.6px);
    left: calc(24.1 * 1.6px);
  }
}
.pet-ring-benefit-item--photo .pet-ring-benefit-item__num {
  left: calc(28.3 / 430 * 100vw);
  height: calc(54.1 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-benefit-item--photo .pet-ring-benefit-item__num {
    left: calc(28.3 * 1.6px);
    height: calc(54.1 * 1.6px);
  }
}

.pet-ring-benefit-item__en {
  width: auto;
  height: calc(10.5 / 430 * 100vw);
  margin-bottom: calc(8.6 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-benefit-item__en {
    height: calc(10.5 * 1.6px);
    margin-bottom: calc(8.6 * 1.6px);
  }
}
.pet-ring-benefit-item--movie .pet-ring-benefit-item__en {
  height: calc(7.8 / 430 * 100vw);
  margin-bottom: calc(11 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-benefit-item--movie .pet-ring-benefit-item__en {
    height: calc(7.8 * 1.6px);
    margin-bottom: calc(11 * 1.6px);
  }
}
.pet-ring-benefit-item--photo .pet-ring-benefit-item__en {
  height: calc(10.4 / 430 * 100vw);
  margin-bottom: calc(8.7 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-benefit-item--photo .pet-ring-benefit-item__en {
    height: calc(10.4 * 1.6px);
    margin-bottom: calc(8.7 * 1.6px);
  }
}

.pet-ring-benefit-item__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(1.8 / 430 * 100vw);
  color: #000;
}
@media (min-width: 768px) {
  .pet-ring-benefit-item__title {
    gap: calc(1.8 * 1.6px);
  }
}
.pet-ring-benefit-item__title::before {
  content: "";
  width: calc(14.5 / 430 * 100vw);
  border-top: 1px solid #f2f2f2;
  margin-bottom: calc(8.2 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-benefit-item__title::before {
    width: calc(14.5 * 1.6px);
    margin-bottom: calc(8.2 * 1.6px);
  }
}

.pet-ring-benefit-item__sub {
  font-weight: 500;
  font-size: calc(11.42 / 430 * 100vw);
  line-height: 1;
  letter-spacing: 0.18em;
  background-color: #fff;
  padding: calc(1.94 / 430 * 100vw) calc(4 / 430 * 100vw) calc(1.94 / 430 * 100vw) calc(4.3 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-benefit-item__sub {
    font-size: calc(11.42 * 1.6px);
    padding: calc(1.94 * 1.6px) calc(4 * 1.6px) calc(1.94 * 1.6px) calc(4.3 * 1.6px);
  }
}

.pet-ring-benefit-item__main {
  font-weight: 700;
  font-size: calc(15.17 / 430 * 100vw);
  line-height: 1;
  letter-spacing: 0.16em;
  background-color: #fff;
  padding: calc(4.8 / 430 * 100vw) calc(13 / 430 * 100vw) calc(7 / 430 * 100vw) calc(4.3 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-benefit-item__main {
    font-size: calc(15.17 * 1.6px);
    padding: calc(4.8 * 1.6px) calc(13 * 1.6px) calc(7 * 1.6px) calc(4.3 * 1.6px);
  }
}
.pet-ring-benefit-item__main em {
  color: #ce6c4b;
}
.pet-ring-benefit-item--movie .pet-ring-benefit-item__main em {
  font-family: "小塚ゴシック Pr6N", "Kozuka Gothic Pr6N", YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", sans-serif;
  font-size: 0.9782465392em;
  color: #418b9b;
}
.pet-ring-benefit-item--photo .pet-ring-benefit-item__main em {
  color: #b35131;
}

.pet-ring-benefit-item__card {
  width: calc(365.3 / 430 * 100vw);
  background-color: #fff;
  border: 1px solid #a49979;
  border-radius: calc(9 / 430 * 100vw);
  margin: calc(19.1 / 430 * 100vw) 0 0 calc(28.5 / 430 * 100vw);
  padding: calc(22.7 / 430 * 100vw) 0 calc(23.3 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-benefit-item__card {
    width: 100%;
    border-radius: 12px;
    margin: 36px 0 0;
    padding: 44px 0 48px;
  }
}
.pet-ring-benefit-item--movie .pet-ring-benefit-item__card {
  border-color: #508b9b;
  margin: calc(24.4 / 430 * 100vw) 0 0 calc(29.9 / 430 * 100vw);
  padding: calc(21.2 / 430 * 100vw) 0 calc(19.8 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-benefit-item--movie .pet-ring-benefit-item__card {
    margin: 40px 0 0;
    padding: 44px 0 48px;
  }
}
.pet-ring-benefit-item--photo .pet-ring-benefit-item__card {
  border-color: #b35131;
  margin-left: calc(28.7 / 430 * 100vw);
  padding: calc(18.5 / 430 * 100vw) 0 calc(19.1 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-benefit-item--photo .pet-ring-benefit-item__card {
    margin: 36px 0 0;
    padding: 44px 0 48px;
  }
}

.pet-ring-benefit-item__text {
  width: calc(300 / 430 * 100vw);
  font-size: calc(10.71 / 430 * 100vw);
  line-height: 1.73;
  letter-spacing: 0.107em;
  color: #221714;
  hanging-punctuation: allow-end;
  margin-left: calc(29.4 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-benefit-item__text {
    width: auto;
    font-size: 16px;
    line-height: 1.9;
    letter-spacing: 0.1em;
    margin: 0 56px;
  }
}
.pet-ring-benefit-item__text em {
  font-weight: 700;
  color: #ce6c4b;
}
.pet-ring-benefit-item--movie .pet-ring-benefit-item__text {
  width: calc(294 / 430 * 100vw);
  font-size: calc(11.42 / 430 * 100vw);
  line-height: 1.75;
  letter-spacing: 0.095em;
  margin-left: calc(29.5 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-benefit-item--movie .pet-ring-benefit-item__text {
    width: auto;
    font-size: 16px;
    line-height: 1.9;
    letter-spacing: 0.1em;
    margin: 0 56px;
  }
}
.pet-ring-benefit-item--movie .pet-ring-benefit-item__text em {
  color: #418b9b;
}
.pet-ring-benefit-item--photo .pet-ring-benefit-item__text {
  width: calc(294 / 430 * 100vw);
  font-size: calc(11.42 / 430 * 100vw);
  line-height: 1.75;
  letter-spacing: 0.095em;
  margin-left: calc(36 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-benefit-item--photo .pet-ring-benefit-item__text {
    width: auto;
    font-size: 16px;
    line-height: 1.9;
    letter-spacing: 0.1em;
    margin: 0 56px;
  }
}
.pet-ring-benefit-item--photo .pet-ring-benefit-item__text em {
  color: #b35131;
}

.pet-ring-benefit-item__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: calc(309.3 / 430 * 100vw);
  margin: calc(11.7 / 430 * 100vw) 0 0 calc(24.8 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-benefit-item__photos {
    width: auto;
    margin: 28px 48px 0;
  }
}
.pet-ring-benefit-item--photo .pet-ring-benefit-item__photos {
  width: calc(309.4 / 430 * 100vw);
  margin: calc(12.3 / 430 * 100vw) 0 0 calc(25.7 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-benefit-item--photo .pet-ring-benefit-item__photos {
    width: auto;
    margin: 28px 48px 0;
  }
}
.pet-ring-benefit-item__photos img {
  width: 100%;
  height: calc(102.1 / 430 * 100vw);
  object-fit: cover;
}
@media (min-width: 768px) {
  .pet-ring-benefit-item__photos img {
    height: auto;
    aspect-ratio: 3/2;
  }
}
.pet-ring-benefit-item--photo .pet-ring-benefit-item__photos img {
  height: calc(104 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-benefit-item--photo .pet-ring-benefit-item__photos img {
    height: auto;
  }
}

.pet-ring-benefit-item__movie {
  width: calc(290 / 430 * 100vw);
  max-width: none;
  margin: calc(10.8 / 430 * 100vw) 0 0 calc(33.7 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-benefit-item__movie {
    width: auto;
    margin: 28px 48px 0;
  }
}
.pet-ring-benefit-item__movie::before {
  display: none;
}
.pet-ring-benefit-item__movie > .lty-playbtn {
  width: calc(45 / 430 * 100vw);
  height: calc(45 / 430 * 100vw);
  background: url("../img/pet-ring/icon-play.svg") no-repeat center/contain;
  filter: none;
}
@media (min-width: 768px) {
  .pet-ring-benefit-item__movie > .lty-playbtn {
    width: 72px;
    height: 72px;
  }
}

/* ========================================
     お客様の声
     ======================================== */
.pet-ring-voice {
  background-color: #f4f3ec;
  padding: calc(80 / 430 * 100vw) 0 calc(44.5 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-voice {
    padding: 100px 0 72px;
  }
}

.pet-ring-voice__heading {
  font-family: "小塚ゴシック Pr6N", "Kozuka Gothic Pr6N", YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: calc(22.78 / 430 * 100vw);
  line-height: 1;
  letter-spacing: 0.193em;
  text-align: center;
  color: #b35131;
  padding-left: 0.193em;
}
@media (min-width: 768px) {
  .pet-ring-voice__heading {
    font-size: 34px;
  }
}

.pet-ring-voice__list {
  display: grid;
  gap: calc(7.8 / 430 * 100vw);
  width: calc(364.2 / 430 * 100vw);
  margin: calc(59.3 / 430 * 100vw) 0 0 calc(32.6 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-voice__list {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: min(100% - 80px, 960px);
    margin: 64px auto 0;
  }
}

.pet-ring-voice__item {
  background-color: #fff;
  padding: calc(19.9 / 430 * 100vw) calc(28 / 430 * 100vw) calc(12.6 / 430 * 100vw) calc(16.2 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-voice__item {
    padding: 32px 36px 30px;
  }
}

.pet-ring-voice__stars {
  font-family: "小塚ゴシック Pr6N", "Kozuka Gothic Pr6N", YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", sans-serif;
  font-size: calc(12.53 / 430 * 100vw);
  line-height: 1;
  letter-spacing: 0.27em;
  color: #b8b116;
  padding-left: calc(2.2 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-voice__stars {
    font-size: 18px;
    padding-left: 0;
  }
}

.pet-ring-voice__text {
  font-family: "小塚ゴシック Pr6N", "Kozuka Gothic Pr6N", YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", sans-serif;
  font-size: calc(10.25 / 430 * 100vw);
  line-height: 1.75;
  letter-spacing: 0.193em;
  color: #4b4846;
  hanging-punctuation: allow-end;
  margin-top: calc(9.4 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-voice__text {
    font-size: 15px;
    line-height: 1.9;
    letter-spacing: 0.12em;
    margin-top: 14px;
  }
}

/* ========================================
     快適にリラックスして過ごせる空間
     ======================================== */
.pet-ring-space {
  background-color: #f4f3ec;
  padding-bottom: calc(86.1 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-space {
    padding-bottom: 150px;
  }
}

.pet-ring-space__heading {
  display: flex;
  justify-content: center;
  font-family: "小塚ゴシック Pr6N", "Kozuka Gothic Pr6N", YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: calc(10.28 / 430 * 100vw);
  line-height: 1;
  letter-spacing: 0.207em;
  color: #b35131;
}
@media (min-width: 768px) {
  .pet-ring-space__heading {
    font-size: 16px;
  }
}
.pet-ring-space__heading::before {
  content: "＼";
  content: "＼"/"";
  margin-right: calc(10.7 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-space__heading::before {
    margin-right: 16px;
  }
}
.pet-ring-space__heading::after {
  content: "／";
  content: "／"/"";
  margin-left: calc(14.8 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-space__heading::after {
    margin-left: 20px;
  }
}

.pet-ring-space__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: calc(326.1 / 430 * 100vw);
  margin: calc(16.3 / 430 * 100vw) 0 0 calc(48.9 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-space__photos {
    width: min(100% - 80px, 720px);
    margin: 28px auto 0;
  }
}
.pet-ring-space__photos img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
}

/* ========================================
     ギャラリー
     ======================================== */
.pet-ring-gallery {
  position: relative;
  text-align: center;
  background-color: #e2e1da;
  padding: calc(42.8 / 430 * 100vw) 0 calc(51.6 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-gallery {
    padding: 64px 0 96px;
  }
}
.pet-ring-gallery::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: calc(28.9 / 430 * 100vw);
  background: url("../img/pet-ring/wave-gallery.svg") no-repeat center bottom/100% 100%;
}
@media (min-width: 768px) {
  .pet-ring-gallery::before {
    height: min(28.9 / 430 * 100vw, 64px);
  }
}

.pet-ring-gallery__heading {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(14 / 430 * 100vw);
  height: calc(19.9 / 430 * 100vw);
  font-family: "小塚ゴシック Pr6N", "Kozuka Gothic Pr6N", YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", sans-serif;
  font-weight: 500;
  font-size: calc(19.91 / 430 * 100vw);
  line-height: 1;
  letter-spacing: 0.21em;
  color: #b35131;
  padding-left: calc(10 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-gallery__heading {
    gap: 22px;
    height: 32px;
    font-size: 32px;
    padding-left: 16px;
  }
}
.pet-ring-gallery__heading img {
  width: calc(28.4 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-gallery__heading img {
    width: 44px;
  }
}

.pet-ring-gallery__list {
  display: grid;
}
.pet-ring-gallery__list.is-expanding {
  transition: height 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pet-ring-gallery__list {
  grid-template-columns: repeat(3, 1fr);
  gap: calc(4.2 / 430 * 100vw) calc(7.2 / 430 * 100vw);
  width: calc(380.4 / 430 * 100vw);
  margin: calc(43.1 / 430 * 100vw) 0 0 calc(26.2 / 430 * 100vw);
}
@media (min-width: 768px) {
  .pet-ring-gallery__list {
    gap: 12px 16px;
    width: min(100% - 80px, 880px);
    margin: 56px auto 0;
  }
}
.pet-ring-gallery__list img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
}

.pet-ring-gallery__item {
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.pet-ring-gallery__item.is-enter {
  opacity: 0;
  transform: translateY(calc(10 / 430 * 100vw));
}
@media (min-width: 768px) {
  .pet-ring-gallery__item.is-enter {
    transform: translateY(16px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pet-ring-gallery__item {
    transition: none;
  }
}

.pet-ring-gallery__more {
  display: block;
  width: calc(181.8 / 430 * 100vw);
  height: calc(31.7 / 430 * 100vw);
  font-family: "小塚ゴシック Pr6N", "Kozuka Gothic Pr6N", YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", sans-serif;
  font-size: calc(11.42 / 430 * 100vw);
  line-height: 1;
  letter-spacing: 0.159em;
  color: #f2f2f2;
  background-color: #b35131;
  border: 1px solid #fff;
  border-radius: calc(13.91 / 430 * 100vw);
  margin: calc(35 / 430 * 100vw) auto 0;
  padding: 0 0 0 0.159em;
  cursor: pointer;
  transition: opacity 0.3s;
}
@media (min-width: 768px) {
  .pet-ring-gallery__more {
    width: 280px;
    height: 52px;
    font-size: 18px;
    border-radius: 22px;
    margin-top: 48px;
  }
}
@media (any-hover: hover) {
  .pet-ring-gallery__more:hover {
    opacity: 0.7;
  }
}
.pet-ring-gallery__more[hidden] {
  display: none;
}
.pet-ring-gallery__more.is-leaving {
  overflow: hidden;
  height: 0;
  opacity: 0;
  border-width: 0;
  margin-top: 0;
  pointer-events: none;
  transition: height 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), margin-top 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease-out;
}