@charset "UTF-8";

.page-hero {
  text-align: center;
  padding: 140px 0 80px
}

@media (min-width: 1201px) {
  .page-hero {
    padding: 80px 0 40px
  }
}

.hero-title {
  color: var(--clr-text);
  font-size: var(--fs-title-l);
  font-weight: 500;
  line-height: 1.5
}

.hero-en {
  color: var(--clr-brown);
  font-size: var(--fs-title-sub);
  font-family: var(--ff-moda)
}

.anchor-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 4%;
  margin: 24px auto 80px
}

.anchor-btn .btn {
  margin: 0 0 4%
}

.plan__desc {
  padding: 24px 20px
}

.plan__desc .desc__item {
  padding: 0 0 16px
}

.plan__desc .desc__item:last-child {
  padding: 0
}

.plan-details {
  position: relative;
  border: 1px solid var(--clr-text);
  background-color: var(--clr-white);
  margin: 24px auto 0;
  padding: 32px 15px 20px
}

.plan-details__title {
  font-size: var(--fs-strong);
  text-align: center;
  font-weight: 400;
  position: absolute;
  width: 60%;
  top: -20px;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  z-index: 1
}

.plan-details__title:before {
  content: "";
  position: absolute;
  width: calc(100% + 60px);
  height: 14px;
  display: block;
  background-color: var(--clr-wh);
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  z-index: -1
}

.plan-details__list__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px
}

.plan-details__list__item:last-child {
  margin: 0
}

.plan-details__list__dt {
  width: 138px;
  height: 37px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

.studio .plan-details__list__dt {
  background-color: var(--clr-studio-greige)
}

.location .plan-details__list__dt {
  background-color: var(--clr-location-sky)
}

.pet .plan-details__list__dt {
  background-color: var(--clr-pet-mint)
}

.wedding .plan-details__list__dt {
  background-color: var(--clr-wedding-rose)
}

.plan-details__note {
  font-size: var(--fs-md)
}

.gallery {
  width: 96%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 56px auto 0;
  gap: 2%
}

.gallery__img {
  width: 49%
}

.caution__list__item {
  margin: 0 0 16px
}

.caution__list__item:last-child {
  margin: 0
}

.caution__list__dt {
  background-color: var(--clr-gray-mid);
  margin: 0 0 4px;
  padding: 5px 10px
}

.caution__list__dd {
  padding: 5px 10px
}

.caution__note {
  font-size: var(--fs-md);
  padding: 5px 0 0
}

.list.-circle .list__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start
}

.list.-circle .list__item:before {
  content: "・"
}