/* =============================================================
   PROMISE — FAQ Page Stylesheet
   faq.css  |  v2.0.0
============================================================= */

/* ---- Lead ------------------------------------------------ */


/* ---- FAQ Main -------------------------------------------- */
#faq-main { padding:0; }
.faq-inner { max-width: 1080px; margin: 0 auto; padding-inline: 40px }

/* ---- カテゴリブロック ------------------------------------ */
.faq-category { margin-bottom: 72px; }
.faq-category:last-child { margin-bottom: 0; }

.faq-category__heading { font-size: var(--fs-base); font-weight: 400; letter-spacing: .18em; padding-bottom: 16px; margin-bottom: 0; color: var(--gold); border-bottom: 1px solid var(--gray); display: flex; align-items: center; gap: 0; }
.faq-category__heading::before { content: ''; display: inline-block; width: 18px; height: 18px; margin-right: 10px; flex-shrink: 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.11 8.18'%3E%3Cpolygon points='1.86 0 4.53 0 7.2 0 9.11 2.3 4.62 8.18 0 2.3 1.86 0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.11 8.18'%3E%3Cpolygon points='1.86 0 4.53 0 7.2 0 9.11 2.3 4.62 8.18 0 2.3 1.86 0'/%3E%3C/svg%3E");
  
  /* background-sizeなどと同じ感覚でマスクの位置やサイズを調整 */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center left;
  mask-position: center left;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: #ababab; 
}

.faq-category__heading::before {
  background-color: #c9a96e; /* お好みの赤ピンクのカラーコードに */
}


/* ---- アコーディオンアイテム ------------------------------ */
.faq-list { list-style: none; }
.faq-item { border-bottom: 1px solid #333; overflow: hidden; }
.faq-item__question { width: 100%; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; text-align: left; color: #fff; transition: color .25s; }
.faq-item__question:hover { color: #aaaaaa; }

/* Q ラベル（テクスチャ文字） */
.faq-item__q-label { font-family: 'Cinzel', serif; font-size: clamp(14px, 1.55vw, 30px); letter-spacing: .18em; color: transparent; background-image: url('../image/bg_text.png'); background-size: cover; background-clip: text; -webkit-background-clip: text; flex-shrink: 0; padding-top: 1px; }
.faq-item__q-text { font-family: 'Noto Serif JP', serif; font-size:var(--fs-base); font-weight: 300; letter-spacing: .1em; line-height: 1.7; flex: 1; }
/* ＋ / × アイコン */
.faq-icon { flex-shrink: 0; width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; position: relative; transition: border-color .3s, transform .45s cubic-bezier(.25,.46,.45,.94); }
.faq-icon::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 1px; background: #fff; transition: background .25s; }
.faq-icon::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1px; height: 10px; background:  #fff; transition: transform .45s cubic-bezier(.25,.46,.45,.94), background .25s; }
.faq-item.open .faq-icon { transform: rotate(135deg); border-color: #fff; }
.faq-item.open .faq-icon::before,
.faq-item.open .faq-icon::after { background: #fff; }
.faq-item__answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s cubic-bezier(.25,.46,.45,.94); }
.faq-item.open .faq-item__answer { grid-template-rows: 1fr; }
.faq-item__answer-inner { overflow: hidden; }
.faq-item__answer-body { display: flex; gap: 20px; align-items: flex-start; padding: 0 0 28px; }

/* A ラベル（テクスチャ文字） */
.faq-item__a-label { font-family: 'Cinzel', serif; font-size: clamp(14px, 1.55vw, 30px); padding: 0 10px 0 1px; color: transparent; background-image: url('../image/bg_text.png'); background-size: cover; background-clip: text; -webkit-background-clip: text; flex-shrink: 0; margin-top: -3px; }
.faq-item__a-text { line-height: 2.2;  font-size:var(--fs-base); font-weight: 300;}
.faq-item__a-text a:hover { color: var(--gold-lt); border-color: var(--gold); }

/* ============================================================
   Responsive
============================================================ */
@media (max-width: 768px) {
  .page-hero--faq { min-height: 45vw; }
  #faq-lead       { padding-top: 100px; }
  .faq-lead-inner { padding-inline: 20px; }
  .faq-lead-text  { padding-bottom: 48px; font-size: .82rem; }
  #faq-main  { padding: 56px 0 80px; }
  .faq-inner { padding-inline: 5vw; }
  .faq-category           { margin-bottom: 52px; }
  .faq-category__heading  { font-size: .82rem; }
  .faq-item__q-text       { font-size: .82rem; }
  .faq-item__a-text       { font-size: .8rem; }
}