@charset "UTF-8";
/* ========================================
   Font Face
   ======================================== */
@font-face {
  font-family: "Audrey Normal";
  src: url("../font/audrey-normal.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* ========================================
     Functions
     ======================================== */
/* ========================================
     CSS Variables & Base
     ======================================== */
:root {
  --max-width: 430px;
}

.st-Contents {
  padding-top: 0;
}

/* ========================================
     Common Components
     ======================================== */
/* Button */
.button-wrapper {
  display: flex;
  justify-content: center;
  margin-top: calc(40 / 430 * 100vw);
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: calc(10 / 430 * 100vw);
  line-height: 0.527;
  letter-spacing: calc(1.5 / 430 * 100vw);
  color: #4b4846;
  text-decoration: none;
  background-color: #dddcd5;
  border-radius: calc(16 / 430 * 100vw);
  padding: calc(18 / 430 * 100vw);
  transition: opacity 0.3s;
}
@media (any-hover: hover) {
  .button:hover {
    opacity: 0.7;
  }
}

.faq-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(16 / 430 * 100vw);
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.023255814vw;
  line-height: 0.527;
  letter-spacing: 1.1627906977vw;
  color: #605542;
  text-decoration: none;
  background-color: #ffffff;
  border-radius: 100vh;
  padding: 4.1860465116vw;
  transition: opacity 0.3s;
}
@media (any-hover: hover) {
  .faq-button:hover {
    opacity: 0.7;
  }
}

/* ========================================
     Hero Section
     ======================================== */
.hero {
  aspect-ratio: 430/600;
  background: url("../img/metalallergies/hero.png") no-repeat center center/cover;
  padding-top: 26.6666666667%;
}
@media (min-width: 768px) {
  .hero {
    background: url("../img/metalallergies/hero_pc.png") no-repeat center center/cover;
    padding-top: 20.8333333333vw;
    aspect-ratio: 1920/1092;
  }
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-inline: auto;
}

.hero__subtitle-en {
  font-family: "Audrey Normal", sans-serif;
  font-weight: normal;
  font-size: calc(13 / 430 * 100vw);
  line-height: 1.2;
  letter-spacing: 0.1em;
  color: #fff;
}
@media (min-width: 768px) {
  .hero__subtitle-en {
    font-size: 2.1875vw;
    letter-spacing: 0.14em;
  }
}

.hero__title {
  font-family: "Noto Serif JP", serif;
  font-weight: 200;
  /* ExtraLight */
  font-size: calc(19 / 430 * 100vw);
  line-height: 1.2;
  letter-spacing: 0.175em;
  color: #fff;
  position: relative;
  padding-top: calc(10 / 430 * 100vw);
  margin-top: calc(20 / 430 * 100vw);
}
@media (min-width: 768px) {
  .hero__title {
    font-size: 3.5416666667vw;
    line-height: 1.4;
    letter-spacing: 0.2em;
    padding-top: 1.0416666667vw;
    margin-top: 3.125vw;
  }
}
.hero__title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 95%;
  height: 1px;
  background-color: #fff;
  transform: translateX(-50%);
}

.hero__subtitle {
  font-family: "Noto Serif JP", serif;
  font-weight: 200;
  /* ExtraLight */
  font-size: calc(14 / 430 * 100vw);
  line-height: 1.2;
  letter-spacing: 0.15em;
  /* 150 ÷ 1000 = 0.15em */
  color: #fff;
  margin-top: calc(20 / 430 * 100vw);
}
@media (min-width: 768px) {
  .hero__subtitle {
    font-size: 2.2916666667vw;
    line-height: 1.4;
    letter-spacing: 0.24em;
    color: #fff;
    margin-top: 2.0833333333vw;
  }
}

/* ========================================
     Intro Section
     ======================================== */
.intro {
  position: relative;
  z-index: 1;
}
.intro::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 100%;
  aspect-ratio: 1718/400;
  background: url("../img/metalallergies/intro_wave.png") no-repeat center center/cover;
  transform: translateY(-100%);
}
@media (min-width: 768px) {
  .intro::before {
    aspect-ratio: 1923/370;
    background: url("../img/metalallergies/intro_wave_pc.png") no-repeat center center/cover;
  }
}

.intro__content {
  background-color: #eeede5;
  /* padding-top: 80px; */
  padding-top: 20vw;
}
@media (min-width: 768px) {
  .intro__content {
    /* padding-top: 440px; */
  }
}

.intro__inner {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .intro__inner {
    max-width: calc(430 / 430 * 100vw);
  }
}

.intro__heading {
  font-family: "Noto Serif JP", serif;
  font-weight: 200;
  font-size: calc(15 / 430 * 100vw);
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-align: center;
}

.intro__message {
  font-family: "Noto Serif JP", serif;
  font-size: calc(10 / 430 * 100vw);
  line-height: 1.8;
  letter-spacing: 0.174em;
  text-align: center;
  margin-top: calc(60 / 430 * 100vw);
}

/* ========================================
     About Allergy Section
     ======================================== */
.about-allergy {
  padding-block: calc(110 / 430 * 100vw) calc(40 / 430 * 100vw);
  background-color: #eeede5;
  overflow: hidden;
}

.about-allergy__inner {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .about-allergy__inner {
    max-width: calc(430 / 430 * 100vw);
  }
}

.about-allergy__title {
  font-family: "Noto Serif JP", serif;
  font-size: calc(15 / 430 * 100vw);
  letter-spacing: calc(1.5 / 430 * 100vw);
  text-align: center;
  position: relative;
  padding-bottom: calc(10 / 430 * 100vw);
}
.about-allergy__title::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100vw;
  height: 1px;
  background-color: #3e3a39;
  transform: translateX(-50%);
}

.about-allergy__content {
  max-width: calc(268 / 430 * 100vw);
  margin-left: auto;
  margin-right: auto;
  font-size: calc(10 / 430 * 100vw);
  line-height: 2;
  letter-spacing: calc(0.8 / 430 * 100vw);
  margin-top: calc(44 / 430 * 100vw);
}

.about-allergy__button {
  display: flex;
  justify-content: center;
  width: min(100%, 273 / 430 * 100vw);
  margin-left: auto;
  margin-right: auto;
  margin-top: calc(50 / 430 * 100vw);
}

/* ========================================
     Material Section
     ======================================== */
.material {
  padding-block: calc(100 / 430 * 100vw) calc(40 / 430 * 100vw);
  background-color: #f6f5f0;
}

.material__inner {
  max-width: var(--max-width);
  padding-inline: calc(30 / 430 * 100vw);
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .material__inner {
    max-width: calc(430 / 430 * 100vw);
  }
}

.material__heading {
  font-family: "Noto Serif JP", serif;
  font-size: calc(15 / 430 * 100vw);
  letter-spacing: calc(1.5 / 430 * 100vw);
  text-align: center;
  position: relative;
  padding-bottom: calc(10 / 430 * 100vw);
}
.material__heading::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100vw;
  height: 1px;
  background-color: #3e3a39;
  transform: translateX(-50%);
}

.material__lead {
  font-family: "Noto Serif JP", serif;
  font-size: calc(10 / 430 * 100vw);
  letter-spacing: calc(1.4 / 430 * 100vw);
  text-align: center;
  margin-top: calc(20 / 430 * 100vw);
}

/* Material Item */
.material__item {
  margin-top: calc(70 / 430 * 100vw);
}

.material__item + .material__item {
  margin-top: calc(80 / 430 * 100vw);
}

.material__label {
  display: flex;
  justify-content: center;
  margin-top: 0;
  width: min(100%, 151 / 430 * 100vw);
  margin-inline: auto;
}
.material__label img {
  width: 100%;
}

.material__image {
  margin-top: calc(16 / 430 * 100vw);
}
.material__image img {
  display: block;
  width: 100%;
}

.material__description {
  font-family: 游ゴシック体 Pr6N;
  font-size: calc(10 / 430 * 100vw);
  line-height: 1.8;
  letter-spacing: calc(1.69 / 430 * 100vw);
  padding-inline: calc(16 / 430 * 100vw);
  margin-top: calc(20 / 430 * 100vw);
}

/* Course */
.material__course {
  margin-top: calc(60 / 430 * 100vw);
}

.material__course-title {
  font-family: FOT-セザンヌ ProN;
  font-size: calc(11 / 430 * 100vw);
  line-height: 2.0536363636;
  letter-spacing: calc(2 / 430 * 100vw);
  padding-inline: calc(10 / 430 * 100vw);
}

.material__course-divider {
  width: 100%;
  height: 1px;
  background-color: #9ca09d;
  margin-top: calc(10 / 430 * 100vw);
}

.material__course-content {
  display: flex;
  gap: calc(20 / 430 * 100vw);
  margin-top: calc(30 / 430 * 100vw);
}

.material__course-text {
  font-family: 游ゴシック体 Pr6N;
  font-size: calc(10 / 430 * 100vw);
  line-height: 2;
  letter-spacing: calc(1 / 430 * 100vw);
  padding-top: calc(10 / 430 * 100vw);
  padding-left: calc(10 / 430 * 100vw);
}

.material__course-info {
  margin-top: calc(20 / 430 * 100vw);
}

.material__course-info-item {
  display: flex;
  margin-top: calc(4 / 430 * 100vw);
  font-size: calc(14 / 430 * 100vw);
  letter-spacing: 0.04em;
}

.material__course-info-item dt {
  font-weight: 700;
  white-space: nowrap;
}

.material__course-info-item dd {
  font-weight: 400;
}

.material__course-image {
  width: min(100%, 143 / 430 * 100vw);
  height: -moz-fit-content;
  height: fit-content;
  flex-shrink: 0;
  margin-right: calc(-10 / 430 * 100vw);
}
.material__course-image img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 143/176;
  -o-object-fit: cover;
     object-fit: cover;
}

.material__course__button {
  display: flex;
  justify-content: center;
  width: min(100%, 273 / 430 * 100vw);
  margin-left: auto;
  margin-right: auto;
  margin-top: calc(40 / 430 * 100vw);
}

.collection {
  background-color: #eeede5;
  padding-block: calc(40 / 430 * 100vw) calc(40 / 430 * 100vw);
}

.collection__inner {
  max-width: calc(310 / 430 * 100vw + 30 / 430 * 100vw * 2);
  padding-inline: calc(30 / 430 * 100vw);
  margin-left: auto;
  margin-right: auto;
}

.collection__heading {
  font-family: "Noto Serif JP", serif;
  font-size: calc(15 / 430 * 100vw);
  letter-spacing: calc(1.5 / 430 * 100vw);
  text-align: center;
  position: relative;
  padding-bottom: calc(10 / 430 * 100vw);
}
.collection__heading::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100vw;
  height: 1px;
  background-color: #3e3a39;
  transform: translateX(-50%);
}

.collection__subheading {
  font-family: "Audrey Normal", sans-serif;
  font-size: calc(15 / 430 * 100vw);
  letter-spacing: calc(0.69 / 430 * 100vw);
  text-align: center;
  margin-top: calc(20 / 430 * 100vw);
}

.collection__wrap {
  margin-top: calc(50 / 430 * 100vw);
}
.collection__wrap + .collection__wrap {
  margin-top: calc(30 / 430 * 100vw);
}

.collection__title {
  font-family: "Audrey Normal", sans-serif;
  font-size: calc(15 / 430 * 100vw);
  letter-spacing: calc(0.69 / 430 * 100vw);
}

.collection__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(6 / 430 * 100vw) calc(10 / 430 * 100vw);
  margin-top: calc(20 / 430 * 100vw);
}

.collection__item {
  list-style: none;
}

.collection__image img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 149/102;
  -o-object-fit: cover;
     object-fit: cover;
}

.faq {
  background-color: #eeede5;
  padding-block: calc(60 / 430 * 100vw) calc(60 / 430 * 100vw);
}

.faq__inner {
  max-width: var(--max-width);
  padding-inline: calc(30 / 430 * 100vw);
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .faq__inner {
    max-width: calc(430 / 430 * 100vw);
  }
}

.faq__heading {
  font-family: "Noto Serif JP", serif;
  font-size: calc(15 / 430 * 100vw);
  letter-spacing: calc(1.5 / 430 * 100vw);
  text-align: center;
  position: relative;
  padding-bottom: calc(10 / 430 * 100vw);
}
.faq__heading::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100vw;
  height: 1px;
  background-color: #3e3a39;
  transform: translateX(-50%);
}

.faq__subheading {
  font-family: "Audrey Normal", sans-serif;
  font-size: calc(15 / 430 * 100vw);
  letter-spacing: calc(0.69 / 430 * 100vw);
  text-align: center;
  margin-top: calc(20 / 430 * 100vw);
}

.faq__content {
  display: flex;
  flex-direction: column;
  gap: calc(16 / 430 * 100vw);
  max-width: calc(340 / 430 * 100vw);
  margin-top: calc(60 / 430 * 100vw);
  margin-inline: auto;
}

.faq__question {
  font-family: 小塚ゴシック Pr6N;
  font-weight: 400;
  font-size: calc(10 / 430 * 100vw);
  line-height: 1.2;
  letter-spacing: calc(0.6 / 430 * 100vw);
}
.faq__question span {
  font-family: "Audrey Normal", sans-serif;
}

.faq__answer-text {
  font-family: 小塚ゴシック Pr6N;
  font-size: calc(10 / 430 * 100vw);
  line-height: 1.4;
  letter-spacing: calc(1 / 430 * 100vw);
  text-indent: -1.7em;
  padding-left: 1.7em;
}
.faq__answer-text span {
  font-family: "Audrey Normal", sans-serif;
}

.faq__button {
  width: min(100%, 280 / 430 * 100vw);
  margin-inline: auto;
  margin-top: calc(64 / 430 * 100vw);
}
.faq__button .icon {
  width: calc(22 / 430 * 100vw);
}/*# sourceMappingURL=metalallergies.css.map */