/* =========================================================
   FAQ よくある質問
   assets/css/faq.css
========================================================= */

/* =========================================================
   0. right-layout / 共通調整
========================================================= */

.faq-body .page-standard__inner,
.faq-body .page-standard__content,
.faq-archive-body .page-standard__inner,
.faq-archive-body .page-standard__content{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.faq-body .entry-title,
.faq-body .page-title,
.faq-body .article-header,
.faq-body .right-layout-title,
.faq-body .right-layout-page-title,
.faq-body .page-standard__page-title-wrap,
.faq-body .page-standard__page-title,
.faq-body .archive-title,
.faq-body .list-title,
.faq-archive-body .entry-title,
.faq-archive-body .page-title,
.faq-archive-body .article-header,
.faq-archive-body .right-layout-title,
.faq-archive-body .right-layout-page-title,
.faq-archive-body .page-standard__page-title-wrap,
.faq-archive-body .page-standard__page-title,
.faq-archive-body .archive-title,
.faq-archive-body .list-title{
  display: none !important;
}

.faq-page{
  width: 100% !important;
  color: #171310 !important;
  background: #fff !important;
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif !important;
}

.faq-page *,
.faq-page *::before,
.faq-page *::after{
  box-sizing: border-box !important;
}

.faq-page img{
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
}

.faq-inner{
  width: 90% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
}

/* =========================================================
   1. HERO
========================================================= */

.faq-hero{
  width: 100% !important;
  padding: 86px 0 58px !important;
  background: #fff !important;
  text-align: center !important;
}

.faq-hero__inner{
  width: 90% !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

.faq-hero__label{
  margin: 0 0 14px !important;
  color: #d3ae46 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.32em !important;
}

.faq-hero h1{
  margin: 0 0 26px !important;
  padding: 0 !important;
  color: #171310 !important;
  font-size: 42px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: 0.16em !important;
  text-align: center !important;
}

.faq-hero__lead{
  margin: 0 !important;
  color: #5c554d !important;
  font-size: 14px !important;
  line-height: 2.2 !important;
  letter-spacing: 0.08em !important;
}

/* =========================================================
   2. カテゴリナビ
========================================================= */

.faq-category{
  width: 100% !important;
  padding: 0 0 78px !important;
  background: #fff !important;
}

.faq-category__list{
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.faq-category__item,
.faq-category__item:visited{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 92px !important;
  padding: 20px 14px !important;
  background: #fdfcf9 !important;
  border: 1px solid #eee9df !important;
  color: #171310 !important;
  text-decoration: none !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.65 !important;
  letter-spacing: 0.08em !important;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
}

.faq-category__item span{
  display: block !important;
  margin: 0 0 8px !important;
  color: #d3ae46 !important;
  font-family: "Times New Roman", serif !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
}

.faq-category__item:hover{
  background: #fff !important;
  border-color: #d3ae46 !important;
}

/* =========================================================
   3. FAQリスト
========================================================= */

.faq-list{
  width: 100% !important;
  padding: 0 0 120px !important;
  background: #fff !important;
}

.faq-section{
  margin: 0 0 92px !important;
  scroll-margin-top: 150px !important;
}

.faq-section:last-child{
  margin-bottom: 0 !important;
}

.faq-section__head{
  margin: 0 0 34px !important;
  padding: 0 0 18px !important;
  border-bottom: 1px solid #eee9df !important;
}

.faq-section__head p{
  margin: 0 0 10px !important;
  color: #d3ae46 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
}

.faq-section__head h2{
  margin: 0 !important;
  padding: 0 !important;
  color: #171310 !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.12em !important;
  text-align: left !important;
}

.faq-section__items{
  display: grid !important;
  gap: 16px !important;
}

/* =========================================================
   4. FAQカード
========================================================= */

.faq-item,
.faq-item.is-open{
  display: block !important;
  width: 100% !important;
  grid-template-columns: none !important;
  background: #fff !important;
  border: 1px solid #eee9df !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.faq-item__question{
  position: relative !important;
  width: 100% !important;
  min-height: 82px !important;
  padding: 24px 74px 24px 34px !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  background: #fff !important;
  border: none !important;
  color: #171310 !important;
  text-align: left !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.faq-item__qmark{
  flex: 0 0 auto !important;
  color: #d3ae46 !important;
  font-family: "Times New Roman", serif !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

.faq-item__title{
  display: block !important;
  color: #171310 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.75 !important;
  letter-spacing: 0.08em !important;
}

.faq-item__icon{
  position: absolute !important;
  top: 50% !important;
  right: 32px !important;
  width: 18px !important;
  height: 18px !important;
  transform: translateY(-50%) !important;
}

.faq-item__icon::before,
.faq-item__icon::after{
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  background: #d3ae46 !important;
  transform: translate(-50%, -50%) !important;
  transition: transform 0.25s ease, opacity 0.25s ease !important;
}

.faq-item__icon::before{
  width: 18px !important;
  height: 1px !important;
}

.faq-item__icon::after{
  width: 1px !important;
  height: 18px !important;
}

.faq-item.is-open .faq-item__icon::after{
  opacity: 0 !important;
  transform: translate(-50%, -50%) rotate(90deg) !important;
}

/* =========================================================
   5. 回答部分
   質問の下に回答を表示
========================================================= */

.faq-item__answer{
  display: none !important;
  width: 100% !important;
  clear: both !important;
  border-top: 1px solid #eee9df !important;
  background: #fdfcf9 !important;
}

.faq-item.is-open .faq-item__answer{
  display: block !important;
}

.faq-item__answer-inner{
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  padding: 34px 42px 38px !important;
}

.faq-item__answer-text{
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  gap: 18px !important;
}

.faq-item__amark{
  flex: 0 0 auto !important;
  color: #9d9488 !important;
  font-family: "Times New Roman", serif !important;
  font-size: 24px !important;
  line-height: 1.4 !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

.faq-item__body{
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

.faq-item__body p{
  margin: 0 0 16px !important;
  color: #5c554d !important;
  font-size: 14px !important;
  line-height: 2.15 !important;
  letter-spacing: 0.06em !important;
}

.faq-item__body p:last-child{
  margin-bottom: 0 !important;
}

.faq-item__image{
  display: block !important;
  width: 100% !important;
  max-width: 420px !important;
  margin: 28px 0 0 48px !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  background: #fff !important;
}

.faq-item__image img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* =========================================================
   6. 空表示
========================================================= */

.faq-empty{
  padding: 70px 30px !important;
  background: #fdfcf9 !important;
  border: 1px solid #eee9df !important;
  text-align: center !important;
}

.faq-empty p{
  margin: 0 !important;
  color: #5c554d !important;
  font-size: 14px !important;
  line-height: 2 !important;
  letter-spacing: 0.08em !important;
}

/* =========================================================
   7. お問い合わせCTA
========================================================= */

.faq-contact{
  width: 100% !important;
  padding: 96px 0 !important;
  background: #171310 !important;
  color: #fff !important;
  text-align: center !important;
}

.faq-contact__inner{
  width: 90% !important;
  max-width: 840px !important;
  margin: 0 auto !important;
}

.faq-contact__label{
  margin: 0 0 16px !important;
  color: #d3ae46 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.32em !important;
}

.faq-contact h2{
  margin: 0 0 24px !important;
  padding: 0 !important;
  color: #fff !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  letter-spacing: 0.12em !important;
  text-align: center !important;
}

.faq-contact p{
  margin: 0 !important;
  color: rgba(255,255,255,0.78) !important;
  font-size: 14px !important;
  line-height: 2.1 !important;
  letter-spacing: 0.08em !important;
}

.faq-contact__buttons{
  display: flex !important;
  justify-content: center !important;
  gap: 18px !important;
  margin: 42px 0 0 !important;
}

.faq-contact__button,
.faq-contact__button:visited{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 220px !important;
  min-height: 54px !important;
  padding: 0 30px !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.12em !important;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}

.faq-contact__button--gold{
  background: #d3ae46 !important;
  border: 1px solid #d3ae46 !important;
  color: #fff !important;
}

.faq-contact__button--gold:hover{
  background: #fff !important;
  border-color: #fff !important;
  color: #171310 !important;
}

.faq-contact__button--outline{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  color: #fff !important;
}

.faq-contact__button--outline:hover{
  background: #fff !important;
  border-color: #fff !important;
  color: #171310 !important;
}

/* =========================================================
   8. Responsive
========================================================= */

@media screen and (max-width: 1100px){

  .faq-category__list{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .faq-item__image{
    max-width: 420px !important;
  }

}

@media screen and (max-width: 767px){

  .faq-hero{
    padding: 62px 0 46px !important;
  }

  .faq-hero h1{
    font-size: 32px !important;
  }

  .faq-hero__lead br{
    display: none !important;
  }

  .faq-category{
    padding-bottom: 56px !important;
  }

  .faq-category__list{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .faq-list{
    padding-bottom: 80px !important;
  }

  .faq-section{
    margin-bottom: 68px !important;
    scroll-margin-top: 130px !important;
  }

  .faq-section__head h2{
    font-size: 23px !important;
  }

  .faq-item__question{
    min-height: 74px !important;
    padding: 20px 56px 20px 22px !important;
    gap: 12px !important;
  }

  .faq-item__title{
    font-size: 15px !important;
  }

  .faq-item__icon{
    right: 22px !important;
  }

  .faq-item__answer-inner{
    padding: 26px 22px !important;
  }

  .faq-item__answer-text{
    gap: 12px !important;
  }

  .faq-item__image{
    max-width: 100% !important;
    margin: 24px 0 0 36px !important;
  }

  .faq-contact{
    padding: 72px 0 !important;
  }

  .faq-contact h2{
    font-size: 22px !important;
  }

  .faq-contact__buttons{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .faq-contact__button{
    width: 100% !important;
    min-width: 0 !important;
  }

}

/* FAQ 上部：背景画像 */
.faq-page .faq-hero{
  position: relative !important;
  width: 100% !important;
  min-height: 360px !important;
  margin: 0 !important;
  padding: 105px 20px 120px !important;
  background-image:
    linear-gradient(
      rgba(255,255,255,0.72),
      rgba(255,255,255,0.72)
    ),
    url("/wp-content/uploads/2026/06/MG_1109.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.faq-page .faq-hero__inner{
  position: relative !important;
  z-index: 2 !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.faq-page .faq-hero__label{
  margin: 0 0 22px !important;
  color: #d4b572 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.32em !important;
  line-height: 1 !important;
}

.faq-page .faq-hero__title{
  margin: 0 0 26px !important;
  color: #111 !important;
  font-size: 40px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.22em !important;
}

.faq-page .faq-hero__text{
  margin: 0 !important;
  color: #555 !important;
  font-size: 13px !important;
  line-height: 2.1 !important;
  letter-spacing: 0.12em !important;
}

/* FAQ カテゴリボタン：ヒーロー画像に少し重ねる */
.faq-page .faq-category{
  position: relative !important;
  z-index: 5 !important;
  margin-top: -42px !important;
  padding: 0 20px 70px !important;
  background: transparent !important;
}

.faq-page .faq-category .faq-inner{
  max-width: 1100px !important;
  margin: 0 auto !important;
}

.faq-page .faq-category__list{
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.faq-page .faq-category__item{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 78px !important;
  padding: 16px 12px !important;
  background: rgba(255,255,255,0.94) !important;
  border: 1px solid #e8e0d2 !important;
  color: #111 !important;
  text-decoration: none !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06) !important;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease !important;
}

.faq-page .faq-category__item span{
  display: block !important;
  margin: 0 0 8px !important;
  color: #d4b572 !important;
  font-size: 13px !important;
  font-style: italic !important;
  letter-spacing: 0.08em !important;
  transition: color 0.25s ease !important;
}

.faq-page .faq-category__item:hover,
.faq-page .faq-category__item:focus-visible{
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
  transform: translateY(-3px) !important;
}

.faq-page .faq-category__item:hover span,
.faq-page .faq-category__item:focus-visible span{
  color: #d4b572 !important;
}

/* 下のFAQ一覧との余白 */
.faq-page .faq-list{
  padding-top: 0 !important;
}


html{
  scroll-behavior: smooth !important;
}

/* FAQのページ内リンクで、止まる位置を少し下げる */
.faq-page [id]{
  scroll-margin-top: 120px !important;
}