/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 21 2025 | 07:22:33 */
/* =========================================================
   Q&A for postid:3801  —  site-color (生成り×ブラウン×オレンジ)
   反映範囲は .postid-3801 に限定（他ページへ波及しません）
   ========================================================= */

/* ---- カラートークン & ベース ---- */
.postid-3801 {
  --qa-bg: #fffdf8;           /* ページ全体の生成り背景に合わせる */
  --qa-card: #ffffff;         /* Q&Aカード背景 */
  --qa-border: #e5d8c5;       /* カードの枠線（淡いベージュ） */
  --qa-primary: #d97b1e;      /* メインオレンジ（矢印・アクセント） */
  --qa-primary-strong: #b05e12; /* 濃いオレンジブラウン */
  --qa-accent: #fff4d6;       /* 回答バッジなどの淡い黄み */
  --qa-text: #3d2b1f;         /* 本文ブラウン */
  --qa-muted: #7a6a55;        /* 補助テキスト（説明など） */
  --qa-radius: 14px;          /* 角丸 */
  --qa-shadow: 0 6px 20px rgba(90, 60, 30, 0.08); /* 柔らかい影 */
  --qa-gap: 14px;             /* Q&Aカードの間隔 */
  background: var(--qa-bg);
}

/* ---- コンテンツ幅・余白調整 ---- */
.postid-3801 .entry-content {
  max-width: 900px;
  margin-inline: auto;
  padding-block: 24px 56px;
  color: var(--qa-text);
}

/* ---- タイトル・見出し色味 ---- */
.postid-3801 .entry-content h1,
.postid-3801 .entry-content h2,
.postid-3801 .entry-content h3 {
  letter-spacing: .02em;
  color: var(--qa-primary-strong);
}

/* =========================================================
   Core/Details（wp-block-details）をQ&Aカードとして装飾
   - summary に質問（Q）
   - 本文に回答（A）
   ========================================================= */
.postid-3801 .wp-block-details {
  background: var(--qa-card);
  border: 1px solid var(--qa-border);
  border-radius: var(--qa-radius);
  box-shadow: var(--qa-shadow);
  overflow: clip;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  margin: var(--qa-gap) 0;
}

/* ホバー時の気持ちいい立ち上がり */
.postid-3801 .wp-block-details:hover {
  border-color: #e9cfae; /* オレンジ寄りの淡色 */
  box-shadow: 0 10px 26px rgba(90, 60, 30, 0.12);
}

/* summary＝質問行 */
.postid-3801 .wp-block-details > summary {
  list-style: none; /* 既定の三角を消す */
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  cursor: pointer;
  position: relative;
  user-select: none;
  font-weight: 700;
  color: var(--qa-text);
}

/* 左端の “Q” バッジ */
.postid-3801 .wp-block-details > summary::before {
  content: "Q";
  display: grid;
  place-content: center;
  width: 32px; height: 32px;
  font-weight: 800;
  border-radius: 999px;
  background: #fbeedc;              /* 薄いオレンジベージュ */
  color: var(--qa-primary-strong);
  border: 2px solid #e5d8c5;
}

/* 右端のトグル矢印 */
.postid-3801 .wp-block-details > summary::after {
  content: "";
  width: 10px; height: 10px;
  border-right: 2px solid var(--qa-primary-strong);
  border-bottom: 2px solid var(--qa-primary-strong);
  transform: rotate(45deg);
  transition: transform .2s ease;
  justify-self: end;
}

/* 開いている時は矢印を上向きに */
.postid-3801 details[open] > summary::after {
  transform: rotate(-135deg);
}

/* 回答ボディ（summary 以外の直下要素） */
.postid-3801 .wp-block-details > *:not(summary) {
  padding: 0 20px 20px 20px;
  color: var(--qa-text);
}

/* 回答の先頭に “A” バッジ（JSで挿入した .qa-answer-badge を装飾） */
.postid-3801 .qa-answer-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 12px;
  padding: 6px 10px;
  font-size: .9rem;
  border-radius: 999px;
  background: var(--qa-accent);     /* やわらかい黄み */
  color: #8a5a00;                   /* 文字は濃いオレンジブラウン */
  border: 1px solid #f0d58c;
}
.postid-3801 .qa-answer-badge::before {
  content: "A";
  font-weight: 800;
}

/* 回答内の細かな要素（リスト・リンクなど） */
.postid-3801 .wp-block-details p + ul,
.postid-3801 .wp-block-details p + ol { margin-top: 8px; }

.postid-3801 .wp-block-details a {
  color: var(--qa-primary-strong);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

.postid-3801 .wp-block-details strong { color: #2e2218; }

/* =========================================================
   折り畳みのスムーズアニメーション
   - JSが .qa-anim > div を差し込む想定
   ========================================================= */
.postid-3801 details > div.qa-anim {
  overflow: clip;
  transition: grid-template-rows .25s ease;
  display: grid;
  grid-template-rows: 0fr;  /* 閉状態 */
}
.postid-3801 details[open] > div.qa-anim { grid-template-rows: 1fr; }
.postid-3801 details > div.qa-anim > div { min-height: 0; }

/* =========================================================
   アクセシビリティ強化（キーボードフォーカス）
   ========================================================= */
.postid-3801 details:has(> summary:focus-visible) {
  outline: 3px solid rgba(217, 123, 30, 0.35); /* オレンジでフォーカスリング */
  outline-offset: 2px;
}

/* =========================================================
   補助ブロック：導入用の枠（任意：.qa-intro を使うと見出し下に説明枠）
   ========================================================= */
.postid-3801 .qa-intro {
  margin: 8px 0 18px;
  padding: 12px 16px;
  border-left: 6px solid var(--qa-primary);
  background: #fffaf1;
  border-radius: 10px;
  color: var(--qa-muted);
}

/* 末尾ボタン等との間隔を少し広げたいときのユーティリティ */
.postid-3801 .qa-stack-lg { margin-block-end: 28px; }