/*犬猫販売個別ページ*/

/* =================================================
   INFO 上部写真・動画・個体情報　カスタム投稿部分
====================================================*/

.single-container {
  gap: 0;
  align-items: stretch;
  font-family: var(--font-gothic);
}

.pet {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: var(--space-l);
  line-height: 1.8;
}

.pet > * {
  width: 100%;
  min-width: 0;
}

.pet-gallery {
  position: relative;
  width: 100%;
  margin-inline: 0;
  min-width: 0;
}

.pet-main-swiper {
  width: calc(100% + 46px);
  margin-inline: -23px;
  min-width: 0;
}

.pet-thumb-swiper.swiper {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.pet-main-swiper .swiper-slide {
  aspect-ratio: 1 / 1;
  background-color: var(--color-bg);
}

.pet-main-swiper img,
.pet-thumb-swiper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pet-swiper-prev,
.pet-swiper-next {
  color: var(--color-text);
}

.pet-swiper-prev::after,
.pet-swiper-next::after {
  font-size: 18px;
}

.pet-swiper-prev {
  left: 23px;
}

.pet-swiper-next {
  right: 23px;
}

.pet-thumb-swiper {
  width: 100%;
  margin-top: var(--space-s);
  margin-inline: auto;
  margin-bottom: 0;
}

.pet-thumb-swiper .swiper-slide {
  aspect-ratio: 1 / 1;
  background-color: var(--color-bg);
  cursor: pointer;
  opacity: .45;
}

.pet-thumb-swiper .swiper-slide-thumb-active {
  opacity: 1;
}

.pet-button-box--pc {
  display: none;
}

.pet-header {
  display: grid;
  gap: var(--space-3m);
  text-align: center;
}

.pet-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  padding-bottom: var(--space-s);
  border-bottom: 1px solid var(--color-bg);
  font-weight: 400;
  line-height: 1;
}

.pet-name {
  max-width: 208px;
  font-size: var(--font-size-m);
  white-space: nowrap;  
}

.pet-title-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.pet-gender-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.pet-gender-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.pet-gender-box .gender-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.pet-gender {
  color: var(--color-text);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

.pet-price {
  font-size: var(--font-size-xxl);
  text-align: center;
}

.pet-price span {
  font-size: var(--font-size-xxs);
}

.pet-price-note {
  color: var(--color-cool);
  font-size: var(--font-size-xxs);
  line-height: 1.6;
  text-align: center;
}

.pet-profile {
  border-top: 1px solid var(--color-bg);
}

.pet-profile div {
  display: grid;
  grid-template-columns: 45% 55%;
  border-bottom: 1px solid var(--color-bg);
}

.pet-profile dt,
.pet-profile dd {
  font-size: var(--font-size-s);
  padding: var(--space-ss) var(--space-xs);
}

/*--------- ボタンの販売中、商談中、sold out表記 ---------*/

.pet-button-box {
  width: 100%;
}

.pet-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-m);
  width: min(100%, 270px);
  height: 60px;
  margin-inline: auto;
  border-radius: 8px;
  background-color: var(--color-warm);
  color: var(--color-white);
  font-size: var(--font-size-m);
  line-height: 1;
  text-decoration: none;
  font-weight: 600;
}

.pet-button img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.pet-button:hover {
  color: var(--color-white);
}

.pet-button span {
  color: var(--color-white);
}

.pet-button--soldout,
.pet-button--reserved {
  display: none;
}

.pet--soldout .pet-button--contact,
.pet--reserved .pet-button--contact {
  display: none;
}

.pet--soldout .pet-button--soldout {
  display: flex;
  color: var(--color-box);
  background-color: var(--color-bg);
  letter-spacing: .25em;
}

.pet--reserved .pet-button--reserved {
  display: flex;
  background-color: var(--color-hamburger);
  letter-spacing: .25em;
}

.pet-button-box--bottom:empty {
  display: none;
}

.pet--soldout .pet-button-box--bottom,
.pet--reserved .pet-button-box--bottom {
  display: none;
}

.pet--soldout .pet-description,
.pet--reserved .pet-description {
  margin-top: 0;
}

/*---------------------------------------------------*/
.pet-movie {
  width: 99%;
  aspect-ratio: 4 / 3;
  background-color: var(--color-bg);
}

.pet-movie iframe {
  width: 100%;
  height: 100%;
}

.pet-description p{
  white-space: pre-line;
}

/* =================================================
   お迎えの流れ　販売個別ページ共通
====================================================*/

.pet-guide {
  width: 100%;
  display: grid;
  gap: var(--space-l);
  margin-top: var(--space-xl);
}

/*---------------販売個別ページのh2共通-----------------*/

h2.pet-common {
  position: relative;
  margin-bottom: var(--space-m);
  padding-bottom: var(--space-xs);
  font-size: var(--font-size-ml);
  font-weight: 600;
  text-align: center;
}

h2.pet-common::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background-color: var(--color-bg);
}
/*---------------------------------------------------*/

.pet-flow-summary {
  display: grid;
  justify-items: center;
  gap: var(--space-m);
  margin-bottom: var(--space-m);
}

.pet-flow-step {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: var(--space-ss);
  align-items: start;
  width: 100%;
  height: 100px;
}

.pet-flow-step h3 {
  display: grid;
  place-items: center;
  width: 70px;
  min-height: 70px;
  padding: var(--space-s);
  background-color: var(--color-box);
  border-radius: 8px;
  color: var(--color-white);
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}

.pet-flow-number {
  font-size: var(--font-size-m);
  font-weight: 600;
  line-height: 1;
}

.pet-flow-title {
  font-size:  var(--font-size-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.pet-flow-title-s { 
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -1px;
} 

.pet-flow-step p {
  font-size: var(--font-size-s);
  line-height: 1.7;
}

.pet-flow-arrow {
  width: 20px;
  height: auto;
  margin-left: 27px;
  margin-top: -20px;
  justify-self: start;
}

.pet-flow-description {
  white-space: pre-line;
  font-size: var(--font-size-s);
}

.after-follow {
  display: grid;
  justify-items: center;
  gap: var(--space-m);
  margin-top: var(--space-l);
  margin-bottom: var(--space-l);
  padding: var(--space-mm);
  border: 1px solid var(--color-sub);
  text-align: center;
}

.after-follow img {
  width: 150px;
  height: auto;
}

.after-follow p {
  font-family: var(--font-serif);
  line-height: 1.4;
  font-weight: 600;
}

/* =================================================
   遵守事項・生体保証　販売個別ページ共通
====================================================*/

.pet-guarantee {
  display: grid;
  gap: var(--space-l);
  font-size: var(--font-size-s);
}

.pet-guarantee p,
.pet-guarantee li {
  margin-bottom: var(--space-s);
}

.pet-guarantee ul>li {
  list-style-type: disc;
}

.pet-guarantee ul,
.pet-guarantee ol {
  padding-left: 1.4em;
}

.pet-guarantee li + li {
  margin-top: var(--space-m);
}

/* =================================================
   ************** メディアクエリ 1024px〜 **************
====================================================*/

/*------メディアクエリ　タブレット用-----------*/
@media (min-width: 768px) {
.pet-gallery {
  max-width: 500px;
  margin-inline: auto;
  min-width: 0;
}

.pet-movie {
  width: 460px;
  margin-inline: auto;
}

  .pet-flow-step p{
    font-size: var(--font-size-m);
    min-height: 70px;
    display: flex;
    align-items: center;
  }

}

@media (min-width: 1024px) {

/* =================================================
   INFO 上部写真・動画・個体情報　カスタム投稿部分　メディアクエリ
====================================================*/

  .single-container {
    width: 960px;
    padding-inline: 0;
  }

  .pet-gallery {
    grid-area: gallery;
    width: 100%;
    margin-inline: 0;
  }

  .pet-main-swiper.swiper {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .pet-swiper-prev {
      left: 10px;
    }

  .pet-swiper-next {
      right: 10px;
    }

  .pet-thumb-swiper {
    width: 330px;
  }

  .pet-header {
    grid-area: header;
    text-align: left;
  }

  .pet-title {
      gap: var(--space-m);
  }

  .pet-name {
      max-width: 300px;
      font-size: var(--font-size-ll);
  }
  .pet-gender
  {
    font-size: var(--font-size-s);
  }

  .pet-price {
    text-align: center;
  }

  .pet-movie {
    grid-area: movie;
  }

  .pet-description {
    grid-area: description;
  }

  .breadcrumb {
    margin: var(--space-m) 0 var(--space-l);
  }

  .pet {
    grid-template-columns: 430px 330px;
    grid-template-areas:
      "gallery header"
      "gallery profile"
      "gallery button-top"
      "movie description"
      ". button-bottom";
    column-gap: 70px;
    row-gap: var(--space-l);
    justify-content: center;
    align-items: start;
  }

  .pet-gallery {
    grid-area: gallery;
    width: 100%;
    margin-inline: 0;
  }

  .pet-header {
    grid-area: header;
    text-align: left;
    gap: var(--space-3m);
  }

  .pet-profile {
    grid-area: profile;
  }

/*--------- ボタンの販売中、商談中、sold out表記 ---------*/

  .pet-button-box--top {
    display: none;
  }

  .pet-button-box--pc {
    display: block;
    grid-area: button-top;
  }

  .pet-button-box--bottom {
    display: none;
  }
/*---------------------------------------------------*/
  .pet-movie {
    grid-area: movie;
  }

  .pet-description {
    grid-area: description;
  }

  .pet-thumb-swiper {
    width: 330px;
  }

/* =================================================
   お迎えの流れ　販売個別ページ共通　メディアクエリ
====================================================*/
  .pet-guide {
    gap: var(--space-xll);
    margin-top: var(--space-xl);
  }

  h2.pet-common{
    margin-bottom: var(--space-l);
  }

  .pet-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "summary"
      "description"
      "after";
    row-gap: var(--space-ll);
    align-items: start;
  }

  .pet-flow-summary-section,
  .pet-flow-description {
    width: min(100%, 800px);
    margin-inline: auto;
  }

  .pet-flow-arrow{
    margin-top: -25px;
    margin-left: 25px;
  }

  .pet-flow-step{
    height: 110px;
    gap: var(--space-m);
  }

  .pet-flow-step p{
    font-size: var(--font-size-m);
    min-height: 70px;
    display: flex;
    align-items: center;
  }

  .pet-flow-description {
    grid-area: description;
    font-size: var(--font-size-m);
  }

  .after-follow {
    grid-area: after;
    grid-template-columns: 1fr 1fr;
    gap:0;
    justify-content: center;
    align-items: center;
    width: 90%;
    margin: var(--space-ll) auto 0;
    padding: var(--space-l) var(--space-ll);
  }

  .after-follow img {
    width: 170px;
    margin-left: 100px;
  }

  .after-follow  p{
    font-size: var(--font-size-ml);
    line-height: 2;
  }

/* =================================================
   遵守事項・生体保証　販売個別ページ共通　メディアクエリ
====================================================*/

  .pet-guarantee {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
 
}