/* ============================================================
   Diary 求人サイト v2 — あなたの不安は？ (worries_accordion)
   - 2026-05-25 新規追加
   - FAQ デザインと一貫性を保ちつつ、HTML5 native <details>/<summary> 駆動 (JS 不要)
   - リンクは render_block_link マクロが出力する rc-block-link スタイルを流用
   ============================================================ */

.rc-h2-worries {
    background: var(--rch2-bg-base);  /* FAQ の背景 (#F5EFE6) と交互になるよう base 側を使う */
    padding: 120px 4rem;
}
.rc-h2-worries-inner {
    max-width: 880px;
    margin: 0 auto;
}
.rc-h2-worries-lead {
    text-align: center;
    font-family: var(--rch2-font-serif);
    color: var(--rch2-text-sub);
    font-size: 14.5px;
    line-height: 2.0;
    letter-spacing: 0.04em;
    margin: 0 0 56px;
}
.rc-h2-worries-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ============================================================
   アコーディオンアイテム (details 駆動)
   ============================================================ */
.rc-h2-worries-item {
    background: #fff;
    border: 1px solid var(--rch2-line);
    border-radius: 3px;
    overflow: hidden;
}
.rc-h2-worries-item[open] .rc-h2-worries-icon {
    transform: rotate(45deg);  /* + → ×（45度回転） */
    color: var(--rch2-accent);
}

/* 質問エリア (summary をボタン化) */
.rc-h2-worries-summary {
    list-style: none;             /* デフォルトの三角を非表示 (Chrome) */
    cursor: pointer;
    padding: 24px 28px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    transition: background 0.2s ease;
    user-select: none;
}
.rc-h2-worries-summary::-webkit-details-marker {
    display: none;                /* デフォルトの三角を非表示 (Safari) */
}
.rc-h2-worries-summary:hover {
    background: var(--rch2-bg-base);
}
.rc-h2-worries-summary:focus-visible {
    outline: 2px solid var(--rch2-accent);
    outline-offset: -2px;
}
.rc-h2-worries-q-mark {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 17px;
    color: var(--rch2-accent);
    flex-shrink: 0;
    line-height: 1.5;
    padding-top: 2px;
    letter-spacing: 0.05em;
}
.rc-h2-worries-title {
    font-family: var(--rch2-font-serif);
    font-size: 15.5px;
    color: var(--rch2-text-main);
    letter-spacing: 0.04em;
    line-height: 1.6;
    flex: 1;
}
.rc-h2-worries-icon {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--rch2-text-light);
    margin-left: 12px;
    transition: transform 0.3s ease, color 0.2s ease;
    display: inline-block;
    line-height: 1.4;
}

/* 回答エリア */
.rc-h2-worries-body {
    border-top: 1px solid var(--rch2-line);
    background: var(--rch2-bg-base);
    padding: 24px 28px;
}
.rc-h2-worries-body-text {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 16px;
}
.rc-h2-worries-body-text:last-child {
    margin-bottom: 0;
}
.rc-h2-worries-a-mark {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 17px;
    color: var(--rch2-text-light);
    flex-shrink: 0;
    line-height: 1.5;
    padding-top: 2px;
    letter-spacing: 0.05em;
}
.rc-h2-worries-body-paragraph {
    font-family: var(--rch2-font-serif);
    font-size: 13.5px;
    color: var(--rch2-text-sub);
    letter-spacing: 0.04em;
    line-height: 2.0;
    margin: 0;
    flex: 1;
    word-break: break-word;
}

/* render_block_link で出力されるリンクの位置調整 */
.rc-h2-worries-body .rc-block-link-wrap {
    margin-top: 12px;
    padding-left: 35px;           /* A. マークと文字の inset 分インデント */
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 1024px) {
    .rc-h2-worries { padding: 100px 2.5rem; }
}
@media (max-width: 768px) {
    .rc-h2-worries { padding: 88px 1.5rem; }
    .rc-h2-worries-lead { margin-bottom: 44px; font-size: 13.5px; line-height: 1.9; }
    .rc-h2-worries-list { gap: 10px; }
    .rc-h2-worries-summary { padding: 20px 22px; gap: 14px; min-height: 60px; }
    .rc-h2-worries-title { font-size: 14px; }
    .rc-h2-worries-q-mark,
    .rc-h2-worries-a-mark { font-size: 15px; }
    .rc-h2-worries-body { padding: 20px 22px; }
    .rc-h2-worries-body-text { gap: 14px; }
    .rc-h2-worries-body-paragraph { font-size: 13px; line-height: 1.9; }
    .rc-h2-worries-body .rc-block-link-wrap { padding-left: 29px; }
}
@media (max-width: 380px) {
    .rc-h2-worries { padding: 72px 1.2rem; }
}