@charset "UTF-8";

/* ==========================================================================
   料金についての考え方
   ========================================================================== */
#price_concept {
  padding: 6.4rem 0;
}

#price_concept .concept_card {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  padding: 3.2rem 2.4rem;
  background-color: #fff;
  background-image: url(../img/menu/concept_bg.png);
  background-repeat: no-repeat;
  background-position: right 0.8rem bottom 0.8rem;
  background-size: 9rem auto;
  border-radius: 2.4rem;
  box-shadow: 0 0 1.2rem rgba(196, 169, 135, 0.18);
}

/* SPでは見出しと本文の区切りを下線に */
#price_concept .head_ttl {
  padding-bottom: 2.4rem;
  border-bottom: 1px solid #c4a987;
}

#price_concept .text {
  font-size: 1.6rem;
  line-height: 2;
  letter-spacing: 0.04em;
  color: #555;
}

/* ==========================================================================
   基本メニュー
   ========================================================================== */
#menu {
  position: relative;
  padding: 6.4rem 0;
  background-color: #f5ebd7;
  overflow: hidden;
}

/* 見出しの背面に重なる大きな英字 */
#menu .watermark {
  position: absolute;
  top: 8.8rem;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 8rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  color: #fff;
  opacity: 0.45;
  white-space: nowrap;
  pointer-events: none;
}

#menu .inner {
  position: relative;
  z-index: 1;
}

#menu .menu_list {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  margin-top: 3.2rem;
}

#menu .menu_list .item {
  display: flex;
  flex-direction: column;
  padding: 2.4rem;
  background-color: #fff;
  border-radius: 1.6rem;
}

#menu .menu_list .img {
  width: 100%;
  aspect-ratio: 345 / 230;
  background-color: #f0ece4;
  border-radius: 0.8rem;
  overflow: hidden;
}

#menu .menu_list .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#menu .menu_list .content_wrap {
  margin-top: 2.4rem;
}

#menu .menu_list .menu_head .ttl {
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.4;
  color: #555;
}

#menu .menu_list .price {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin-top: 0.8rem;
}

#menu .menu_list .price .times {
  font-size: 1.4rem;
  color: #555;
}

#menu .menu_list .price .yen {
  font-size: 2.4rem;
  font-weight: 600;
  color: #c9a882;
}

#menu .menu_list .price .tax {
  font-size: 1.3rem;
  color: #555;
}

#menu .menu_list .desc {
  margin-top: 1.6rem;
  font-size: 1.6rem;
  line-height: 2;
  letter-spacing: 0.04em;
  color: #555;
}

#menu .menu_list .note {
  margin-top: 1.6rem;
  font-size: 1.3rem;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: #888;
}

/* ==========================================================================
   Flow（プラン決定までの流れ）
   ========================================================================== */
#flow {
  padding: 6.4rem 0;
  background-color: #fffcf3;
}

#flow .flow_list {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  margin-top: 3.2rem;
}

#flow .flow_list .item .ttl {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
}

#flow .flow_list .item .ttl .num {
  font-size: 4rem;
  font-weight: 600;
  line-height: 1;
  color: #8fc8c2;
}

#flow .flow_list .item .ttl .jp {
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.5;
  color: #555;
}

#flow .flow_list .item .text {
  margin-top: 1.2rem;
  font-size: 1.6rem;
  line-height: 2;
  letter-spacing: 0.04em;
  color: #555;
}

#flow .flow_note {
  margin-top: 3.2rem;
  padding: 2.4rem;
  background-color: #fff;
  border: 1px solid #c4a987;
  font-size: 1.5rem;
  line-height: 2;
  letter-spacing: 0.04em;
  color: #555;
  text-align: center;
  text-wrap: balance;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
#faq {
  padding: 6.4rem 0;
  background-color: #fffcf3;
}

#faq .faq_list {
  margin-top: 3.2rem;
}

#faq .faq_list .item {
  padding-bottom: 2.4rem;
  margin-bottom: 2.4rem;
  border-bottom: 1px dotted #c4a987;
}

#faq .faq_list .item:last-child {
  margin-bottom: 0;
}

#faq .faq_list .q,
#faq .faq_list .a {
  display: flex;
  gap: 1rem;
  font-size: 1.6rem;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: #555;
}

#faq .faq_list .a {
  margin-top: 1.6rem;
}

#faq .faq_list .mark {
  flex-shrink: 0;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
}

#faq .faq_list .q .mark {
  color: #8fc8c2;
}

#faq .faq_list .a .mark {
  color: #c9a882;
}

/* ==========================================================================
   PC
   ========================================================================== */
@media (min-width: 768px) {
  /* 料金についての考え方 */
  #price_concept {
    padding: 8rem 0;
  }

  #price_concept .concept_card {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 6.4rem 4rem;
    background-position: right 0.8rem center;
    background-size: 17.5rem auto;
    border-radius: 4rem;
  }

  /* PCは見出しと本文を縦罫線で区切る（カンプ準拠） */
  #price_concept .head_ttl {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    padding: 0 5.6rem 0 0;
    border-bottom: none;
    border-right: 1px solid #c4a987;
  }

  #price_concept .text {
    flex: 1;
    padding-left: 4rem;
  }

  /* 基本メニュー */
  #menu {
    padding: 8rem 0;
  }

  #menu .watermark {
    top: 16.2rem;
    font-size: 16rem;
  }

  #menu .menu_list {
    flex-direction: row;
    gap: 4rem;
    margin-top: 4rem;
  }

  #menu .menu_list .item {
    flex: 1 1 0;
  }

  /* Flow */
  #flow {
    padding: 8rem 0;
  }

  #flow .flow_list {
    gap: 4rem;
    margin-top: 4rem;
  }

  #flow .flow_list .item .ttl .num {
    font-size: 5.6rem;
  }

  #flow .flow_list .item .ttl .jp {
    font-size: 3.2rem;
  }

  #flow .flow_list .item .text {
    margin-top: 2rem;
    font-size: 1.8rem;
  }

  #flow .flow_note {
    margin-top: 4rem;
    padding: 3.2rem;
    font-size: 1.8rem;
  }

  /* FAQ */
  #faq {
    padding: 8rem 0;
  }

  #faq .faq_list {
    margin-top: 4rem;
  }

  #faq .faq_list .q,
  #faq .faq_list .a {
    font-size: 1.8rem;
  }
}