@charset "UTF-8";
/* ==========================================================
   FAQ（よくあるご質問）
   ※ rem基準がSPで50%になるため、当セクションは px 指定で統一
   ========================================================== */
.faq {
  --f-ink: #20261b;
  --f-ink-soft: #5b6150;
  --f-green: #347448;
  --f-olive: #616646;
  --f-line: #e2e4d5;
  --f-tint: #f3f4ea;
  background: #fff;
}
.faq *, .faq *::before, .faq *::after { box-sizing: border-box; }

.faq-inner { max-width: 900px; width: 92%; margin: 0 auto; padding: 96px 0; }
@media screen and (max-width: 768px) { .faq-inner { width: 90%; padding: 60px 0; } }

/* --- 見出し --- */
.faq-head { text-align: center; margin-bottom: 48px; }
@media screen and (max-width: 768px) { .faq-head { margin-bottom: 32px; } }

.faq-head__en {
  display: block;
  font-family: Allison, "Segoe Script", "Brush Script MT", cursive;
  font-weight: 400;
  color: var(--f-green);
  font-size: clamp(52px, 5.6vw, 96px);
  line-height: .75;
  margin-bottom: 16px;
}
@media screen and (max-width: 768px) { .faq-head__en { font-size: clamp(44px, 13vw, 60px); } }

.faq-head__title {
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.4;
  color: var(--f-ink);
}
@media screen and (max-width: 768px) { .faq-head__title { font-size: clamp(20px, 5.6vw, 26px); letter-spacing: .04em; } }

.faq-head__lead {
  margin-top: 18px;
  font-size: 15px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .05em;
  color: var(--f-ink-soft);
}
@media screen and (max-width: 768px) { .faq-head__lead { font-size: 14px; } }

/* --- リスト --- */
.faq-list { display: flex; flex-direction: column; gap: 14px; }

.faq-item {
  background: var(--f-tint);
  border: 1px solid var(--f-line);
  border-radius: 10px;
  overflow: hidden;
  transition: background .25s ease, box-shadow .25s ease;
}
.faq-item[open] { background: #fff; box-shadow: 0 8px 26px rgba(32, 38, 27, .08); }

/* --- 質問（summary） --- */
.faq-q {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  position: relative;
  padding: 22px 66px 22px 22px;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .04em;
  color: var(--f-ink);
  transition: color .2s ease;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--f-green); }
.faq-q:focus-visible { outline: 3px solid var(--f-green); outline-offset: -3px; }
@media screen and (max-width: 768px) { .faq-q { gap: 10px; padding: 18px 52px 18px 16px; font-size: 15px; } }

.faq-q__mark, .faq-a__mark {
  flex: none;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .04em;
}
.faq-q__mark { color: var(--f-green); }
.faq-a__mark { color: var(--f-olive); }
@media screen and (max-width: 768px) { .faq-q__mark, .faq-a__mark { font-size: 17px; } }

/* --- 開閉アイコン --- */
.faq-q__icon {
  position: absolute;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--f-green);
}
.faq-q__icon::before, .faq-q__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transform: translate(-50%, -50%);
  transition: transform .25s ease, opacity .25s ease;
}
.faq-q__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-q__icon::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
@media screen and (max-width: 768px) { .faq-q__icon { right: 16px; width: 22px; height: 22px; } .faq-q__icon::before, .faq-q__icon::after { width: 10px; } }

/* --- 回答 --- */
.faq-a {
  display: flex;
  gap: 14px;
  margin: 0 22px 24px;
  padding-top: 20px;
  border-top: 1px dashed var(--f-line);
  font-size: 15px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .05em;
  color: var(--f-ink-soft);
}
@media screen and (max-width: 768px) { .faq-a { gap: 10px; margin: 0 16px 20px; padding-top: 16px; font-size: 14px; line-height: 1.9; } }

.faq-a p { margin: 0; }
.faq-a strong { color: var(--f-ink); font-weight: 700; }
.faq-a__note { display: block; margin-top: 10px; font-size: 13px; line-height: 1.8; color: #8e937f; }
@media screen and (max-width: 768px) { .faq-a__note { font-size: 12px; } }

.faq-item[open] .faq-a { animation: faqOpen .3s ease; }
@keyframes faqOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .faq-item, .faq-q, .faq-q__icon::before, .faq-q__icon::after { transition: none; } .faq-item[open] .faq-a { animation: none; } }

/* --- 締めの一文 --- */
.faq-close {
  margin-top: 32px;
  text-align: center;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .05em;
  color: var(--f-ink-soft);
}
@media screen and (max-width: 768px) { .faq-close { margin-top: 24px; font-size: 14px; } }

/* --- 公開前に確認・差し替えが必要な箇所（公開時にこのクラスごと外す） --- */
.faq-todo { background: #fff3b0; border-bottom: 2px dotted #d99a00; padding: 0 .2em; font-weight: 700; color: #20261b; }