@import url("https://fonts.googleapis.com/css2?family=Liter&display=swap");
/* ===============================================================
 product page
===============================================================*/
body {
  background-color: #f8f8f8;
}

.philo {
  margin-top: 17rem;
  margin-bottom: 18rem;
}
@media screen and (max-width: 834px) {
  .philo {
    margin-top: 6rem;
    margin-bottom: 6rem;
  }
}
.philo-item:not(:first-of-type) {
  margin-top: 12rem;
  padding-top: 11.5rem;
  border-top: 2px solid #e7e7e7;
}
@media screen and (max-width: 834px) {
  .philo-item:not(:first-of-type) {
    margin-top: 5rem;
    padding-top: 4rem;
  }
}
.philo-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 3rem;
}
@media screen and (max-width: 834px) {
  .philo-flex {
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}
.philo-hg {
  margin-bottom: 7.5rem;
  line-height: 1;
}
@media screen and (max-width: 834px) {
  .philo-hg {
    margin-bottom: 3rem;
  }
}
.philo-hg__en {
  font-family: "Instrument Serif", serif;
  font-size: clamp(5rem, 5vw, 10.6rem);
  color: #dddcda;
}
.philo-hg__ttl {
  font-size: 1.6rem;
  font-weight: 400;
  color: #b5b3b0;
}
.philo-catch {
  font-size: clamp(2.4rem, 2vw, 3.8rem);
  font-weight: 700;
}
.philo-txt01 {
  font-size: clamp(2.1rem, 2vw, 2.8rem);
}
.philo-dtl__item:not(:first-of-type) {
  margin-top: 4rem;
}
@media screen and (max-width: 834px) {
  .philo-dtl__item:not(:first-of-type) {
    margin-top: 1rem;
  }
}
.philo-dtl__ttl {
  font-size: clamp(2rem, 2vw, 2.4rem);
  font-weight: 600;
}
.philo-dtl__ttl span {
  font-size: 0.83em;
}
.philo-dtl .philo-txt02 {
  margin-left: 3rem;
}
@media screen and (max-width: 834px) {
  .philo-dtl .philo-txt02 {
    margin-left: 2rem;
  }
}
.philo-txt02 {
  font-size: clamp(1.5rem, 2vw, 1.8rem);
  line-height: 1.88;
}
.philo-txt02:not(:first-of-type) {
  margin-top: 3rem;
}
@media screen and (max-width: 834px) {
  .philo-txt02:not(:first-of-type) {
    margin-top: 1em;
  }
}
.philo-img {
  margin-top: 9rem;
  display: block;
}
@media screen and (max-width: 834px) {
  .philo-img {
    margin-top: 4rem;
  }
}
@media screen and (max-width: 450px) {
  .philo-img {
    margin-top: 3rem;
  }
}