/* =========================================================
   Cralier - FAQ Page Stylesheet
   (style.css の共通スタイルに上乗せ)
   ※ FAQ全体のフォントは指定どおり "M PLUS 1p" を使用
   ========================================================= */

/* =========================================================
   Breadcrumb(パンくず)— 帯状デザイン(共通)
   ========================================================= */
.breadcrumb {
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 8px 24px;
  background: var(--c-accent);
  color: var(--c-white);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  align-items: center;
}
.breadcrumb a {
  color: var(--c-white);
  text-decoration: none;
  opacity: 0.9;
  transition: opacity .2s;
}
.breadcrumb a:hover { opacity: 1; }
.breadcrumb__sep { margin: 0 8px; opacity: 0.7; }
.breadcrumb__current { color: var(--c-white); }

/* =========================================================
   FAQ 全体: フォント指定
   ========================================================= */
.faq-page {
  font-family: "M PLUS 1p", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: var(--c-text);
}

/* =========================================================
   Hero
   ========================================================= */
.faq-hero {
  padding: 32px 24px 24px;
  text-align: center;
}
.faq-hero__en {
  font-family: "Cormorant Garamond", serif;
  font-size: 36px;
  letter-spacing: 0.18em;
  color: var(--c-accent);
  margin: 0 0 6px;
  font-weight: 400;
}
.faq-hero__jp {
  font-size: 13px;
  color: var(--c-text);
  letter-spacing: 0.16em;
  margin: 0 0 16px;
}
.faq-hero__desc {
  font-size: 12px;
  color: var(--c-text);
  line-height: 1.85;
  margin: 0;
  letter-spacing: 0.04em;
}

/* =========================================================
   FAQ List(アコーディオン)
   ========================================================= */
.faq-list {
  list-style: none;
  padding: 0 20px 32px;
  margin: 8px 0 0;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.faq-item {
  background: var(--c-white);
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(124, 91, 56, 0.06);
  transition: box-shadow .2s;
}
.faq-item:hover {
  box-shadow: 0 4px 12px rgba(124, 91, 56, 0.10);
}

/* details/summary のデフォルト矢印を消す */
.faq-item details > summary { list-style: none; }
.faq-item details > summary::-webkit-details-marker { display: none; }

/* 質問(summary) */
.faq-item__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  transition: background .2s;
  user-select: none;
}
.faq-item__summary:hover {
  background: var(--c-bg-soft);
}

/* Q / A マーク(共通のラウンドバッジ) */
.faq-item__mark {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Cormorant Garamond", serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-white);
  background: var(--c-accent);
  letter-spacing: 0;
}
/* A マークだけ色を変える(ピンク系) */
.faq-item__mark--a {
  background: var(--c-pink-text, #d18ba0);
}

.faq-item__question {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--c-text);
  letter-spacing: 0.04em;
}

.faq-item__arrow {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--c-accent);
  transition: transform .25s ease;
}
.faq-item__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* 開いた時は矢印を反転 */
.faq-item details[open] .faq-item__arrow {
  transform: rotate(180deg);
}

/* 回答(answer) */
.faq-item__answer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 4px 18px 18px;
  border-top: 1px dashed var(--c-line);
  margin-top: 4px;
  padding-top: 14px;
}
.faq-item__answer p {
  flex: 1;
  font-size: 13px;
  line-height: 1.95;
  color: var(--c-text);
  margin: 0;
  letter-spacing: 0.04em;
}
.faq-item__answer a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity .2s;
}
.faq-item__answer a:hover { opacity: 0.7; }

/* アコーディオン開閉のなめらかアニメ(details 自体は CSS だけだとパッと開く)
   → 中身に上から差し込むようなフェード演出を付ける */
.faq-item details[open] .faq-item__answer {
  animation: faq-fade-in .25s ease-out;
}
@keyframes faq-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   FAQ Contact(下部のお問い合わせ案内)
   ========================================================= */
.faq-contact {
  padding: 24px 24px 48px;
  text-align: center;
}
.faq-contact__text {
  font-size: 13px;
  color: var(--c-text);
  line-height: 1.85;
  margin: 0 0 16px;
  letter-spacing: 0.04em;
}
.faq-contact__btn {
  display: inline-block;
  min-width: 240px;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--c-accent);
  color: var(--c-white);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-decoration: none;
  transition: opacity .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 4px 12px rgba(120, 90, 60, 0.18);
}
.faq-contact__btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(120, 90, 60, 0.22);
}