@charset "UTF-8";
/* 支給追加コード */
.wbr {
  display: inline-block;
}

@media (min-width: 768px) {
  .sp {
    display: none;
  }
}

@media (max-width: 767px) {
  .pc {
    display: none;
  }
}

/* 全体共通見出しスタイル */
.section_title {
  font-size: 2rem;
  font-weight: bold;
  color: #007b79;
  text-align: center;
  margin-bottom: 3rem;
  line-height: 1.6;
  @media (width < 768px) {
    font-size: 1.5rem;
  }
}

.section_title .small {
  font-size: 1.5rem;
  display: block;
  @media (width < 768px) {
    font-size: 1.1rem;
  }
}
.section_inner {
  max-width: 960px;
  margin: auto;
}

/* ==========================================================================
   各セクションスタイル（親クラス内にネストしたメディアクエリを使用）
   ========================================================================== */
/* --- MV Section --- */
.mv_section {
  position: relative;
  width: 100%;
  height: 31.25rem; /* 500px */
  display: flex;
  align-items: center;
  background-color: #f7f6f3;
  overflow: hidden;
  @media (max-width: 767px) {
    flex-direction: column;
    height: auto;
  }
}

.mv_content {
  position: relative;
  z-index: 10;
  margin: 0 auto 0 0;
  width: 100%;
  padding: 2rem;
  background-color: rgba(255, 255, 255, 0.6);
  max-width: 480px;
  @media (max-width: 767px) {
    padding: 2rem 0;
    text-align: center;
    margin: auto;
    max-width: none;
  }
}

.mv_title {
  font-size: 2rem;
  font-weight: bold;
  color: #007b79;
  border-bottom: 0.125rem solid #009c9a;
  display: block;
  padding: 0 0 1.2rem 0;

  margin-bottom: 1rem;

  @media (width < 768px) {
      margin:auto;
        margin-bottom: 1rem;
    padding: 0 1rem 1rem 1rem;
    font-size: 1.7rem;
    width: fit-content;
  }
}

.mv_subtitle {
  font-size: 1.5rem;
  line-height: 1.4;
  color: #333333;
  font-family: var(--serif);
  padding: 0;
  margin: 0;
}

.mv_image {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  @media (max-width: 767px) {
    position: relative;
    width: 100%;
    height: 15.625rem;
  }
}

.mv_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Intro Section --- */
.intro_section {
  padding: 4rem 2rem;
  background-color: #ffffff;
  text-align: center;
  @media (max-width: 767px) {
    padding: 3rem 1rem;
  }
}

.intro_inner {
  max-width: 52.3125rem;
  margin: 0 auto;
}

.intro_lead {
  font-size: 2.4rem; /* 24px */
  color: #007b79;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  font-family: var(--serif);
  font-weight: normal;
  @media (width < 768px) {
    font-size: 1.5rem;
  }
}

.intro_lead span:not([class]) {
  display: block;
  font-size: 1.5rem;
  @media (width < 768px) {
    font-size: 1.2rem;
  }
}

.intro_badge img {
  max-width: 450px;
  width: 100%;
  height: auto;
  margin: 0 auto 1.5rem;
}

.intro_text {
  font-size: 1.25rem; /* 20px */
  color: #4a5565;
  line-height: 1.8;
  @media (max-width: 767px) {
    font-size: 1rem;
    text-align: left;
  }
}

/* --- Onayami Section --- */
.onayami_section {
  background-color: #1a5f4e;
  padding: 4rem 2rem;
  background-image: url(images/bg_onayami.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  @media (max-width: 767px) {
    padding: 3rem 1rem;
  }
}

.onayami_inner {
  max-width: 52.5rem; /* 840px */
  margin: 0 auto;
}

.onayami_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  @media (max-width: 767px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

.onayami_list_item {
  background-color: #f9fafb;
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  @media (width < 768px) {
    padding: 1.5rem 0.9rem;
  }
}

.onayami_check {
  margin-bottom: 1rem;
}

.onayami_item_text {
  font-size: 1.25rem;
  font-weight: bold;
  color: #007b79;
  line-height: 1.5;
  @media (max-width: 767px) {
    font-size: 1rem;
  }
}

/* --- Feature Section --- */
.feature_section {
  padding: 4rem 2rem;
  background-color: #ffffff;
  text-align: center;
  background-image: url(images/airflow_bg.svg), url(images/img_airflow_big.webp);
  background-repeat: no-repeat, no-repeat;
  background-position:
    left top,
    right top;
  background-size: cover, 40vw;
  overflow: hidden;
  @media (width < 768px) {
    padding: 3rem 1rem;
    min-height: 100vh;
    background-position:
      left top,
      right top;
    background-size:
      50vw 100%,
      40vw auto;
  }
}

.feature_inner {
  max-width: 1380px;
  margin: 0 auto;
  padding: 4rem 2rem;
  container-type: inline-size;
  @media (width < 1024px) {
    padding: 2rem;
  }

  @media (width < 768px) {
    padding: 1rem;
  }
}

.feature_sub_lead {
  font-family: var(--serif);
  font-size: 2.5rem;
  margin-bottom: 3rem;
  color: #333333;
  font-weight: normal;
  line-height: 1.6;
  @media (max-width: 767px) {
    font-size: 1.5rem;
  }
}

.feature_sub_lead span {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: #333333;
  font-weight: normal;
  display: block;
  @media (width < 768px) {
    font-size: 1.2rem;
  }
}

.feature_box {
  display: grid;
  /* 横並び時は綺麗な2列（幅の計算はGridに任せる） */
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  text-align: left;
  /* 768px未満：スマホ時は1列の縦並びに切り替え */
  @media (width < 768px) {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.feature_box_item {
  display: flex;
  gap: 2.5rem;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  @media (width < 1024px) {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

.feature_box_item:nth-child(1) {
  @media (width > 768px) {
    margin-top: 0px;
  }
}

.feature_box_item:nth-child(2) {
  @media (width > 768px) {
    margin-top: 160px;
  }
}

.feature_box_item:nth-child(3) {
  @media (width > 768px) {
    margin-top: -160px;
  }
}

.feature_box_item:nth-child(4) {
  @media (width > 768px) {
    margin-top: 100px;
  }
}

.feature_icon {
  flex: 1 1 160px;
  flex-shrink: 0;
  @media (width < 1024px) {
    flex: 0 0 100px;
  }
}

.feature_icon img {
  width: 100%;
  height: 140px;
  object-fit: contain;
  @media (width < 768px) {
    height: 100px;
    width: 160px;
    margin: auto;
  }
}

.feature_item_title {
  font-size: 2.3cqi;
  font-weight: bold;
  color: #444444;
  line-height: 1.4;
  @media (width < 1024px) {
    font-size: 3cqi;
    text-align: center;
  }

  @media (width < 768px) {
    font-size: 1.2rem;
  }
}

.feature_item_text {
  font-size: 1rem;
  color: #4a5565;
  line-height: 1.6;
}

/* --- Explain Section --- */
.explain_section {
  background-color: #007b79;
  color: #ffffff;
  padding: 4rem 2rem;
  @media (max-width: 767px) {
    padding: 3rem 1rem;
  }
}

.explain_inner {
  max-width: 1280px;
  padding: 4rem 2rem;
  margin: 0 auto;
  container-type: inline-size;
  @media (width < 1024px) {
    padding: 4rem 0;
  }
}

.explain_section .section_title {
  color: #ffffff;
}

.explain_content {
  display: flex;
  align-items: flex-start;
  position: relative;
  z-index: 1;
  @media (width < 768px) {
    flex-direction: column;
    gap: 0;
  }
}

.explain_image {
  flex-shrink: 0;
  position: relative;
  z-index: 4;
  @media (width < 768px) {
    width: 100%;
  }
}

.explain_image img {
  width: 40cqi;
  position: relative;
  z-index: 4;
  margin-right: -4cqi;
  @media (width < 1024px) {
    margin-right: -8cqi;
  }

  @media (width < 768px) {
    width: 90cqi;
    margin: auto;
  }
}

.explain_text_area {
  background-color: #007b79;
  flex-grow: 1;
  clip-path: ellipse(50% 46% at center);
  color: white;
  padding: 7cqi 8cqi;
  transform: rotate(-2deg);
  @media (width < 1024px) {
    padding: 8cqi 10cqi;
  }

  @media (width < 768px) {
    margin-top: -16cqi;
    padding: 22cqi 35cqi 20cqi 35cqi;
    width: 160cqi;
    margin-left: -30cqi;
    margin-right: -30cqi;
  }
}

.explain_text_area > * {
  position: relative;
  z-index: 3;
  transform: rotate(2deg);
}

.explain_subtitle {
  font-size: 2cqi;
  font-family: var(--serif);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  font-weight: normal;
  @media (max-width: 767px) {
    font-size: 1.2rem;
  }
}

.explain_desc {
  font-size: 1rem;
  line-height: 1.8;
  font-weight: normal;
}

/* --- Flow Section --- */
.flow_section {
  padding: 4rem 2rem;
  background-color: #f7f6f3;
  @media (max-width: 767px) {
    padding: 3rem 1rem;
  }
}

.flow_inner {
  max-width: 75rem;
  margin: 0 auto;
}

.flow_list {
  display: flex;
  gap: 2.5rem;
  @media (max-width: 767px) {
    flex-direction: column;
    gap: 3rem;
  }
}

.flow_list_item {
  flex: 1;
  position: relative;
  text-align: center;
}

.flow_list_item:nth-child(1) {
  margin-top: 0;
  @media (width < 768px) {
    margin: 0 auto;
  }
}

.flow_list_item:nth-child(2) {
  margin-top: 100px;
  @media (width < 768px) {
    margin: 0 auto;
  }
}

.flow_list_item:nth-child(3) {
  margin-top: 200px;
  @media (width < 768px) {
    margin: 0 auto;
  }
}

.flow_step_badge {
  position: absolute;
  top: -1rem;
  left: 1.5rem;
  background-color: #007b79;
  color: #ffffff;
  font-size: 1.6rem;
  font-family: "Shippori Mincho", serif;
  padding: 1rem 2rem;
  border-radius: 15px;
}

.flow_image {
  width: 100%;
  height: 12.625rem;
  margin-bottom: 1.5rem;
  border-radius: 15px;
  overflow: hidden;
}

.flow_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flow_item_title {
  font-size: 1.625rem;
  font-weight: bold;
  color: #5c5c5c;
  margin-bottom: 1rem;
}

.flow_item_text {
  font-size: 1rem;
  color: #4a5565;
}

/* --- Comparison Section --- */
.comparison_section {
  padding: 4rem 2rem;
  background-color: #ffffff;
  @media (max-width: 767px) {
    padding: 3rem 1rem;
  }
}

.comparison_inner {
  max-width: 52.5rem;
  margin: 0 auto;
}

.comparison_box {
  display: flex;
  gap: 5rem;
  margin: auto;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  @media (max-width: 767px) {
    flex-direction: column;
    gap: 1.5rem;
  }
}

.comparison_card {
  flex: 1;
  border-radius: 2rem;
  padding: 2rem;
  text-align: center;
  max-width: 420px;
  width: 50%;
  @media (width < 768px) {
    width: 100%;
  }
}

.cleaning_card {
  background-color: #ebf2f1;
}

.whitening_card {
  background-color: rgba(233, 209, 144, 0.19);
}

.comparison_card_header {
  background-color: #ffffff;
  border-radius: 2rem;
  padding: 0.5rem 2rem;
  font-size: 1.25rem;
  font-weight: bold;
  color: #444444;
  margin-bottom: 2rem;
}

.comparison_card_list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  @media (width < 768px) {
    gap: 1rem;
  }
}

.comparison_card_item {
  font-size: 1.25rem;
  font-weight: bold;
  color: #444444;
}

.comparison_link_area {
  text-align: center;
}

.comparison_link {
  color: #007b79;
  font-size: 1rem;
  text-decoration: none;
  border-bottom: 0.125rem solid #007b79;
  padding-bottom: 0.25rem;
  display: inline-block;
}

/* --- Frequency Section --- */
.frequency_section {
  overflow: hidden;
  padding: 4rem 2rem;
  background-color: #f7f6f3;
  text-align: center;
  @media (max-width: 767px) {
    padding: 3rem 1rem;
  }
}

.frequency_inner {
  max-width: 52.5rem;
  margin: 0 auto;
}

.frequency_title_wrap {
  background-color: #e9d190;
  border-radius: 1rem;
  padding: 1.6rem 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-left: -30%;
  margin-bottom: -2rem;
  z-index: 3;
  @media (width < 768px) {
    margin-left: auto;
    margin-bottom: auto;
    margin-bottom: -3rem;
  }
}

.frequency_decor_icon {
  width: 1.7188rem;
  height: 2rem;
  background-color: #e9d190;
  position: absolute;
  bottom: -1rem;
  left: 2rem;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.frequency_main_title {
  font-size: 2rem;
  font-weight: bold;
  color: #444444;
  @media (max-width: 767px) {
    font-size: 1.25rem;
  }
}

.frequency_box {
  background-color: #ffffff;
  border-radius: 1rem;
  padding: 2rem;
  border: 0 solid transparent;
  box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.05);
  margin-bottom: 2rem;
  position: relative;
  z-index: 0;
  container-type: inline-size;
}

.frequency_illust {
  position: absolute;
  bottom: -5cqi;
  right: -5cqi;
  width: 35cqi;
  height: 300px;
  z-index: 3;
  @media (width < 768px) {
    position: relative;
    bottom: -60px;
    right: 0;
    left: 0;
    top: 0;
    margin: auto;
    width: 200px;
    height: 200px;
  }
}

.frequency_illust img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 3;
  @media (width < 768px) {
    width: 300px;
    height: 250px;
  }
}

.frequency_box_inner {
  padding: 2rem 0.5rem;
  @media (width < 768px) {
    padding: 1rem 0;
  }
}

.frequency_recommend_text {
  font-size: 1.5rem;
  color: #364153;
  line-height: 1.6;
  @media (max-width: 767px) {
    font-size: 1.1rem;
  }
}

.frequency_highlight {
  font-size: 2.25rem; /* 36px */
  color: #007b79;
  font-weight: bold;
  @media (max-width: 767px) {
    font-size: 1.6rem;
  }
}

.frequency_sub_text {
  font-size: 1rem;
  color: #4a5565;
  line-height: 1.6;
}

/* --- FAQ Section --- */
.faq_section {
  padding: 4rem 2rem;
  background-color: #ffffff;
  @media (max-width: 767px) {
    padding: 3rem 1rem;
  }
}

.faq_inner {
  max-width: 53.75rem; /* 860px */
  margin: 0 auto;
}

.faq_list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq_item {
  background-color: #ffffff;
  border-bottom: 0.0625rem solid #33a6a4;
}

.faq_question {
  font-size: 1.4rem; /* 18px */
  font-weight: bold;
  color: #00412f;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  @media (max-width: 767px) {
    font-size: 1rem;
  }
}

.faq_question::-webkit-details-marker {
  display: none;
}

.faq_toggle {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
  position: relative;
}

.faq_toggle::after {
  content: "▼";
  font-size: 0.75rem;
  color: #33a6a4;
}

.faq_answer {
  padding: 1rem 1.5rem 1.5rem;
  font-size: 1rem;
  color: #333333;
}

/* --- CTA Section --- */
.cta_section {
  padding: 4rem 2rem;
  background-color: #ffffff;
  text-align: center;
  background-image: url(images/cta_bg.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  @media (width < 768px) {
    height: 1000px;
    background: url(images/cta_img_sp.webp), linear-gradient(89deg, #f6f8f6 0.75%, #eff0eb 99.24%);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: contain;
    padding: 3rem 1rem;
  }
}

.cta_inner {
  max-width: 86.8125rem;
  margin: 0 auto;
}

.cta_title {
  font-size: 2rem;
  font-weight: normal;
  color: #007b79;
  font-family: "Shippori Mincho", serif;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.cta_small_text {
  font-size: 1.375rem;
  @media (max-width: 767px) {
    font-size: 1.125rem;
  }
}

.cta_desc {
  font-size: 1.125rem;
  color: #444444;
  line-height: 1.8;
  margin-bottom: 3rem;
  @media (max-width: 767px) {
    font-size: 1rem;
    text-align: center;
  }
}

.cta_buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  @media (max-width: 767px) {
    flex-direction: column;
    align-items: center;
  }
}

.cta_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 4.25rem; /* 68px */
  border-radius: 1048575rem;
  font-size: 1.25rem;
  font-weight: bold;
  text-decoration: none;
  box-shadow:
    0 1.25rem 0.7813rem rgba(0, 0, 0, 0.1),
    0 0.5rem 0.3125rem rgba(0, 0, 0, 0.1);
  @media (max-width: 767px) {
    font-size: 1.125rem;
    width: 16.25rem;
  }
}

.cta_btn svg {
  margin-right: 0.5rem;
}

a.cta_web {
  background-color: #007b79;
  color: #ffffff;
  width: 16.275rem; /* 260.4px */
}

a.cta_tel {
  background-color: #ffffff;
  color: #007b79;
  width: 15.0675rem; /* 241.08px */
}