/* ============================================================
   求人ページ ブロック (Phase A) — 公開ページ用スタイル
   - prefix .rc-block, .rc-block-<type>
   - フォント/色/間隔は他ページ (blog/voice/faq/staff) と統一
   - すべての block は max-width 制限付きで中央寄せ
   ============================================================ */

/* メインカラム (2026-05-22 grid化: bar_chart の half/third レイアウトのため)
   既存ブロックは span 6 でフル幅維持、bar_chart のみ span 3 (half) / span 2 (third) で並ぶ
   2026-05-22b: `width: 100%` を明示しないと grid container が shrink-to-fit で 352px に縮んで
   `grid-template-columns` が壊れる (1100px 1列 になる) 事故が発生。grid item でも width:100% 必須。 */
.rc-blocks-main {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 40px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 24px;
    /* 2026-05-22: 88 → 64 (旧 margin-bottom 撤去のため少し締めても良い) */
    row-gap: 64px;
}

/* 各ブロックの基本: フル幅 (span 6) + 中央寄せ 820px
   2026-05-22 重要: width: 100% を明示しないと grid item が intrinsic width (min-content) に
   shrink してトラックが 1.6px になる事故が発生。max-width で頭打ち + margin: 0 auto で中央。
   2026-05-22b: min-width: 0 必須。デフォルト min-width: auto だと子の min-content (画像等) で
   grid track が 1100px+ に膨張して横スクロール&PC表示化する事故が発生。 */
.rc-block {
    grid-column: span 6;
    width: 100%;
    min-width: 0;
    max-width: 820px;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .rc-blocks-main {
        grid-template-columns: 1fr;
        row-gap: 48px;                   /* スマホは更に詰める */
    }
    .rc-block { grid-column: span 1; }
}

/* 共通: ブロックのセクション見出し（中央配置 + 下線アクセント）
   text / cards_3col / step_list 等で再利用 */
.rc-block-section-title {
    font-family: var(--rch2-font-serif);
    font-size: 20px;
    color: var(--rch2-text-main);
    letter-spacing: 0.12em;
    font-weight: 500;
    text-align: center;
    margin: 0 0 32px;
    line-height: 1.5;
}
.rc-block-section-title-text {
    display: inline-block;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rch2-accent);
}
@media (max-width: 768px) {
    .rc-block-section-title { font-size: 17px; margin-bottom: 24px; letter-spacing: 0.08em; }
    .rc-block-section-title-text { padding-bottom: 9px; }
}

/* 空状態 */
.rc-blocks-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--rch2-text-light);
    font-family: var(--rch2-font-serif);
}
.rc-blocks-empty p {
    font-size: 15px;
    margin: 0 0 8px;
}
.rc-blocks-empty-sub {
    font-size: 13px !important;
    color: var(--rch2-text-mute);
}

/* ============================================================
   Block: テキスト (Quill richtext)
   ============================================================ */
.rc-block-text {
    font-family: var(--rch2-font-serif);
    font-size: 16px;
    color: var(--rch2-text-sub);
    line-height: 1.95;
    letter-spacing: 0.04em;
}
.rc-block-text-inner > *:first-child { margin-top: 0; }
.rc-block-text-inner > *:last-child { margin-bottom: 0; }
.rc-block-text-inner p {
    margin: 0 0 24px;
}
.rc-block-text-inner h2 {
    font-family: var(--rch2-font-serif);
    font-size: 22px;
    color: var(--rch2-text-main);
    letter-spacing: 0.1em;
    font-weight: 500;
    margin: 48px 0 18px;
    padding-bottom: 10px;
    border-bottom: 0.5px solid var(--rch2-line);
}
.rc-block-text-inner h3 {
    font-family: var(--rch2-font-serif);
    font-size: 18px;
    color: var(--rch2-text-main);
    letter-spacing: 0.08em;
    font-weight: 500;
    margin: 36px 0 14px;
    padding-left: 12px;
    border-left: 3px solid var(--rch2-accent);
}
.rc-block-text-inner h4 {
    font-family: var(--rch2-font-serif);
    font-size: 16px;
    color: var(--rch2-text-main);
    margin: 28px 0 10px;
    font-weight: 500;
}
.rc-block-text-inner a {
    color: var(--rch2-accent-strong);
    text-decoration: underline;
    text-decoration-color: var(--rch2-accent-light);
    text-underline-offset: 3px;
}
.rc-block-text-inner a:hover {
    color: var(--rch2-text-main);
}
.rc-block-text-inner strong { color: var(--rch2-text-main); font-weight: 600; }
.rc-block-text-inner em { font-style: italic; }
.rc-block-text-inner ul,
.rc-block-text-inner ol {
    margin: 0 0 24px;
    padding-left: 1.6em;
}
.rc-block-text-inner li { margin-bottom: 6px; line-height: 1.85; }
.rc-block-text-inner blockquote {
    margin: 24px 0;
    padding: 4px 0 4px 20px;
    border-left: 2px solid var(--rch2-accent-light);
    font-style: italic;
    color: var(--rch2-text-mute);
}

/* ============================================================
   Block: 大きい画像
   ============================================================ */
.rc-block-image {
    max-width: 1100px;
}
.rc-block-image figure {
    margin: 0;
}
.rc-block-image img {
    width: 100%;
    height: auto;
    display: block;
}
.rc-block-image figcaption {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 13px;
    color: var(--rch2-text-light);
    letter-spacing: 0.1em;
    text-align: center;
    margin-top: 14px;
}

/* ============================================================
   Block: 動画 (YouTube)
   ============================================================ */
.rc-block-video {
    max-width: 900px;
}
.rc-block-video figure { margin: 0; }
.rc-block-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}
.rc-block-video-wrap iframe,
.rc-block-video-wrap video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: contain;
    background: #000;
}
.rc-block-video figcaption {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 13px;
    color: var(--rch2-text-light);
    letter-spacing: 0.1em;
    text-align: center;
    margin-top: 14px;
}

/* ============================================================
   Block: 左画像 + 右テキスト
   ============================================================ */
.rc-block-image-text {
    max-width: 1100px;
}
.rc-block-image-text-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.rc-block-image-text.is-reversed .rc-block-image-text-inner {
    direction: rtl;
}
.rc-block-image-text.is-reversed .rc-block-image-text-image,
.rc-block-image-text.is-reversed .rc-block-image-text-body {
    direction: ltr;
}

.rc-block-image-text-image {
    /* デフォルトは 4:3 (--4-3 修飾子と同じ) */
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--rch2-line);
}
.rc-block-image-text-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* 2026-05-21 アスペクト比バリアント (縦長 / 正方形対応) */
.rc-block-image-text--4-3 .rc-block-image-text-image { aspect-ratio: 4 / 3; }
.rc-block-image-text--3-4 .rc-block-image-text-image { aspect-ratio: 3 / 4; }
.rc-block-image-text--1-1 .rc-block-image-text-image { aspect-ratio: 1 / 1; }
/* 縦長 (3-4): 画像セルを固定幅 320px に抑える (高さ約 427px / 適度なバランス)。
   direction: rtl で 1st-col が右に来るため、--3-4 / --3-4.is-reversed どちらも同じ指定で OK。 */
.rc-block-image-text--3-4 .rc-block-image-text-inner {
    grid-template-columns: 320px 1fr;
}
/* 正方形 (1-1): 380px 固定 (高さ 380px) */
.rc-block-image-text--1-1 .rc-block-image-text-inner {
    grid-template-columns: 380px 1fr;
}
.rc-block-image-text-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* 旧 .rc-block-image-text-title は廃止。タイトルは共通 .rc-block-section-title を 2 カラムの上に配置 */
.rc-block-image-text-content {
    font-family: var(--rch2-font-serif);
    font-size: 15px;
    color: var(--rch2-text-sub);
    line-height: 1.95;
    letter-spacing: 0.04em;
}
.rc-block-image-text-content > *:first-child { margin-top: 0; }
.rc-block-image-text-content > *:last-child { margin-bottom: 0; }
.rc-block-image-text-content p { margin: 0 0 16px; }

/* ============================================================
   Block: カード3枚 横並び
   ============================================================ */
.rc-block-cards-3col {
    max-width: 1100px;
}
.rc-block-cards-3col-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.rc-block-card {
    display: flex;
    flex-direction: column;
}
.rc-block-card-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--rch2-line);
    margin-bottom: 18px;
}
.rc-block-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rc-block-card-title {
    font-family: var(--rch2-font-serif);
    font-size: 17px;
    color: var(--rch2-text-main);
    letter-spacing: 0.08em;
    font-weight: 500;
    line-height: 1.55;
    margin: 0 0 10px;
}
.rc-block-card-desc {
    font-family: var(--rch2-font-serif);
    font-size: 14px;
    color: var(--rch2-text-sub);
    line-height: 1.85;
    letter-spacing: 0.04em;
    margin: 0;
}

/* ============================================================
   Block: CTA ボタン
   ============================================================ */
.rc-block-cta {
    text-align: center;
    max-width: 100%;
}
.rc-block-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--rch2-font-serif);
    font-size: 14px;
    letter-spacing: 0.2em;
    padding: 14px 36px;
    text-decoration: none;
    border-radius: 999px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.25s ease;
    white-space: nowrap;
}
.rc-block-cta-btn--primary {
    background: var(--rch2-text-main);
    color: #fff;
    border: 1px solid var(--rch2-text-main);
}
.rc-block-cta-btn--primary:hover {
    background: var(--rch2-accent-strong);
    border-color: var(--rch2-accent-strong);
    transform: translateY(-1px);
}
.rc-block-cta-btn--outline {
    background: transparent;
    color: var(--rch2-text-main);
    border: 1px solid var(--rch2-text-main);
}
.rc-block-cta-btn--outline:hover {
    background: var(--rch2-text-main);
    color: #fff;
    transform: translateY(-1px);
}
.rc-block-cta-arrow {
    transition: transform 0.25s ease;
}
.rc-block-cta-btn:hover .rc-block-cta-arrow {
    transform: translateX(3px);
}

/* ============================================================
   Block: ステップリスト (1→2→3)
   ============================================================ */
.rc-block-steps {
    max-width: 720px;
}
/* セクション見出しは共通 .rc-block-section-title を使用 */
.rc-block-steps-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.rc-block-step {
    position: relative;
    display: flex;
    gap: 24px;
    padding-bottom: 36px;
}
.rc-block-step:last-child {
    padding-bottom: 0;
}
/* タイムライン縦線（最後のステップには出さない） */
.rc-block-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 27px;
    top: 64px;
    bottom: 8px;
    width: 1px;
    background: var(--rch2-line);
}
.rc-block-step-num {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border: 1.5px solid var(--rch2-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--rch2-font-display);
    font-size: 18px;
    letter-spacing: 0.08em;
    color: var(--rch2-accent-strong);
    background: var(--rch2-bg-base);
    position: relative;
    z-index: 1;
}
.rc-block-step-body {
    flex: 1;
    min-width: 0;
    padding-top: 10px;
}
.rc-block-step-title {
    font-family: var(--rch2-font-serif);
    font-size: 18px;
    color: var(--rch2-text-main);
    margin: 0 0 8px;
    letter-spacing: 0.08em;
    font-weight: 500;
    line-height: 1.5;
}
.rc-block-step-desc {
    font-family: var(--rch2-font-serif);
    font-size: 15px;
    color: var(--rch2-text-sub);
    line-height: 1.9;
    letter-spacing: 0.04em;
    margin: 0;
}

/* ============================================================
   プライバシーポリシー ページ (専用クラス: .rc-privacy-*)
   - シンプル読みやすさ重視、雑誌的セリフ
   ============================================================ */

/* 冒頭ブランドメッセージ (ヒーローと本文の間に挟む) */
.rc-privacy-message {
    max-width: 820px;
    margin: 0 auto 56px;
    padding: 48px 24px;
    text-align: center;
    background: var(--rch2-bg-section);
    border-top: 1px solid var(--rch2-line);
    border-bottom: 1px solid var(--rch2-line);
}
.rc-privacy-message p {
    margin: 0;
    font-family: var(--rch2-font-serif);
    font-size: 17px;
    color: var(--rch2-text-main);
    letter-spacing: 0.12em;
    line-height: 2.1;
    font-weight: 500;
}
@media (max-width: 768px) {
    .rc-privacy-message {
        margin-bottom: 40px;
        padding: 36px 20px;
    }
    .rc-privacy-message p {
        font-size: 15px;
        line-height: 1.95;
        letter-spacing: 0.08em;
    }
}

.rc-privacy-main {
    max-width: 820px;
    margin: 0 auto;
    padding-bottom: 80px;
    font-family: var(--rch2-font-serif);
    color: var(--rch2-text-sub);
    line-height: 1.95;
    letter-spacing: 0.04em;
    font-size: 15px;
}
.rc-privacy-intro {
    margin: 0 0 48px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--rch2-line);
}
.rc-privacy-section {
    margin-bottom: 38px;
}
.rc-privacy-section h2 {
    font-family: var(--rch2-font-serif);
    font-size: 18px;
    color: var(--rch2-text-main);
    letter-spacing: 0.1em;
    margin: 0 0 14px;
    padding-left: 14px;
    border-left: 3px solid var(--rch2-accent);
    font-weight: 500;
    line-height: 1.5;
}
.rc-privacy-section p {
    margin: 0 0 12px;
}
.rc-privacy-section p:last-child {
    margin-bottom: 0;
}
.rc-privacy-section ul {
    margin: 0 0 16px;
    padding-left: 1.6em;
}
.rc-privacy-section li {
    margin-bottom: 6px;
    line-height: 1.85;
}
.rc-privacy-contact {
    margin: 0;
    padding: 18px 22px;
    background: var(--rch2-bg-section);
    border-radius: 4px;
    border: 1px solid var(--rch2-line);
}
.rc-privacy-contact dt {
    font-weight: 500;
    color: var(--rch2-text-main);
    margin-top: 10px;
    font-size: 14px;
    letter-spacing: 0.06em;
}
.rc-privacy-contact dt:first-child {
    margin-top: 0;
}
.rc-privacy-contact dd {
    margin: 4px 0 0;
    padding-left: 1em;
    color: var(--rch2-text-sub);
}
.rc-privacy-meta {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--rch2-line);
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 13px;
    color: var(--rch2-text-light);
    text-align: right;
    letter-spacing: 0.08em;
}

@media (max-width: 768px) {
    .rc-privacy-main { font-size: 14.5px; padding-bottom: 60px; }
    .rc-privacy-section h2 { font-size: 16px; letter-spacing: 0.06em; }
    .rc-privacy-intro { margin-bottom: 36px; padding-bottom: 22px; }
    .rc-privacy-section { margin-bottom: 30px; }
}

/* ============================================================
   Block: アコーディオン (カード式・折りたたみ Q&A)
   - native <details>/<summary> ベース、JS 不要
   - 各 item は独立したカード (薄ベージュ背景)
   - open 時に白背景 + 枠アクセント色 + + アイコンが × に回転して塗りつぶし
   ============================================================ */
.rc-block-accordion {
    max-width: 820px;
}
.rc-block-acc-list {
    display: flex;
    flex-direction: column;
    gap: 12px;                                   /* カード間の余白でグラフィック感 */
}
.rc-block-acc-item {
    background: var(--rch2-bg-section);          /* 閉じてる時は薄ベージュ */
    border: 1px solid var(--rch2-line);
    border-radius: 4px;
    overflow: hidden;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.rc-block-acc-item[open] {
    background: #fff;                            /* open 時は白に切替で「いま開いてる」感 */
    border-color: var(--rch2-accent);
    box-shadow: 0 2px 12px rgba(74, 53, 32, 0.06);
}
.rc-block-acc-item:hover:not([open]) {
    border-color: var(--rch2-accent-light);
}
.rc-block-acc-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    cursor: pointer;
    list-style: none;
    font-family: var(--rch2-font-serif);
    color: var(--rch2-text-main);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.5;
    transition: color 0.25s ease;
}
.rc-block-acc-summary::-webkit-details-marker { display: none; }   /* Safari/iOS の▶を消す */
.rc-block-acc-summary::marker { content: ''; }                      /* Firefox 等 */
.rc-block-acc-summary:hover {
    color: var(--rch2-accent-strong);
}
.rc-block-acc-title {
    flex: 1;
    min-width: 0;
}
/* 円形アイコン (+/×) - open時はアクセント色で塗りつぶし */
.rc-block-acc-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rch2-accent);
    border-radius: 50%;
    background: #fff;
    color: var(--rch2-accent);
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.rc-block-acc-item[open] .rc-block-acc-icon {
    transform: rotate(45deg);                    /* + → × */
    background: var(--rch2-accent);
    color: #fff;
}
.rc-block-acc-body {
    margin: 0 24px;
    padding: 20px 0 22px;
    border-top: 1px solid var(--rch2-line);      /* summary との区切り */
    font-family: var(--rch2-font-serif);
    font-size: 15px;
    color: var(--rch2-text-sub);
    line-height: 1.95;
    letter-spacing: 0.04em;
}

@media (max-width: 768px) {
    .rc-block-acc-list { gap: 10px; }
    .rc-block-acc-summary {
        padding: 18px 18px;
        font-size: 15px;
        letter-spacing: 0.06em;
    }
    .rc-block-acc-icon { width: 28px; height: 28px; font-size: 16px; }
    .rc-block-acc-body {
        margin: 0 18px;
        padding: 16px 0 18px;
        font-size: 14px;
        line-height: 1.85;
    }
}

/* ============================================================
   Block: 画像スライダー (横スクロール ギャラリー)
   - 高さ統一、幅可変、ネイティブ横スクロール
   - 親 .rc-block の max-width 820px を超えて 1100px まで広げる
   ============================================================ */
.rc-block-slider {
    max-width: 1100px;
}
.rc-block-slider-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--rch2-accent) var(--rch2-line);
    padding-bottom: 14px;
}
.rc-block-slider-track {
    display: flex;
    gap: 14px;
    width: max-content;
}
.rc-block-slider-item {
    flex-shrink: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.rc-block-slider-item img {
    height: 360px;          /* デフォルト = 中 */
    width: auto;
    max-width: none;
    display: block;
    object-fit: cover;
    background: var(--rch2-line);
}
/* サイズバリアント (PC) */
.rc-block-slider--sm .rc-block-slider-item img { height: 240px; }
.rc-block-slider--lg .rc-block-slider-item img { height: 520px; }
.rc-block-slider--xl .rc-block-slider-item img { height: 680px; }
.rc-block-slider-item figcaption {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 12px;
    color: var(--rch2-text-light);
    letter-spacing: 0.1em;
    text-align: center;
    margin-top: 10px;
    padding: 0 4px;
}

/* スクロールバー (Webkit) — ブランドアクセント色で目立たせる */
.rc-block-slider-scroll::-webkit-scrollbar { height: 6px; }
.rc-block-slider-scroll::-webkit-scrollbar-track {
    background: var(--rch2-line);
    border-radius: 3px;
}
.rc-block-slider-scroll::-webkit-scrollbar-thumb {
    background: var(--rch2-accent);
    border-radius: 3px;
}

.rc-block-slider-hint {
    text-align: center;
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--rch2-text-light);
    letter-spacing: 0.1em;
    font-family: var(--rch2-font-en);
    font-style: italic;
}

/* ============================================================
   Block: テーブル (表)
   - PC: 標準表、上品な薄罫線
   - スマホ: 横スクロール対応
   ============================================================ */
.rc-block-table {
    max-width: 100%;
}
.rc-block-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.rc-block-table-inner {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--rch2-font-serif);
    font-size: 15px;
    color: var(--rch2-text-sub);
    line-height: 1.7;
    background: var(--rch2-bg-base);
}
.rc-block-table-inner th,
.rc-block-table-inner td {
    padding: 14px 18px;
    border: 0.5px solid var(--rch2-line);
    text-align: left;
    letter-spacing: 0.04em;
    vertical-align: middle;
}
.rc-block-table-inner thead th {
    background: var(--rch2-text-main);
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.12em;
    border-color: var(--rch2-text-main);
    padding-top: 16px;
    padding-bottom: 16px;
}
.rc-block-table-inner tbody tr:hover {
    background: var(--rch2-bg-section);
}

/* スマホ: フォント・パディング縮小 + 横スクロール時のヒント */
@media (max-width: 768px) {
    .rc-block-table-inner {
        font-size: 13.5px;
        min-width: max-content;  /* 内容を縮小せず横スクロール */
    }
    .rc-block-table-inner th,
    .rc-block-table-inner td {
        padding: 10px 12px;
    }
}

/* ============================================================
   Block: 人物メッセージ (1人用、雑誌インタビュー風)
   ============================================================ */
.rc-block-profile {
    max-width: 820px;
}
.rc-block-profile-inner {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: center;
}
/* 右に写真 (image_right): direction trick で順序反転 */
.rc-block-profile.is-reversed .rc-block-profile-inner {
    direction: rtl;
}
.rc-block-profile.is-reversed .rc-block-profile-image,
.rc-block-profile.is-reversed .rc-block-profile-body {
    direction: ltr;
}
.rc-block-profile-image {
    width: 280px;
    aspect-ratio: 3 / 4;          /* 縦長ポートレート */
    overflow: hidden;
    background: var(--rch2-line);
    border-radius: 4px;           /* 上品な微角丸 */
}
.rc-block-profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rc-block-profile-body {
    display: flex;
    flex-direction: column;
}
.rc-block-profile-role {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 13px;
    color: var(--rch2-text-light);
    letter-spacing: 0.18em;
    margin: 0 0 6px;
}
.rc-block-profile-name {
    font-family: var(--rch2-font-serif);
    font-size: 19px;
    color: var(--rch2-text-main);
    letter-spacing: 0.1em;
    font-weight: 500;
    margin: 0 0 12px;
    line-height: 1.5;
}
.rc-block-profile-divider {
    width: 32px;
    height: 1px;
    background: var(--rch2-accent);
    margin: 0 0 18px;
}
.rc-block-profile-text {
    font-family: var(--rch2-font-serif);
    font-size: 15px;
    color: var(--rch2-text-sub);
    line-height: 1.95;
    letter-spacing: 0.04em;
    margin: 0;
}

/* ============================================================
   Block: 区切り罫線
   ============================================================ */
.rc-block-divider {
    text-align: center;
}
.rc-block-divider-line {
    width: 40px;
    height: 1px;
    background: var(--rch2-accent);
    margin: 0 auto;
}

/* ============================================================
   レスポンシブ
   ============================================================ */

@media (max-width: 1024px) {
    /* 2026-05-22: 旧 .rc-block { margin-bottom: 48px } は撤去。
       grid 化したため row-gap で間隔制御するように統一 (重複防止) */
    .rc-block-image-text-inner { gap: 36px; }
}

@media (max-width: 768px) {
    /* 2026-05-22: 旧 .rc-block { margin-bottom: 40px } も撤去 (上記理由) */

    /* テキスト */
    .rc-block-text { font-size: 15px; line-height: 1.9; }
    .rc-block-text-inner p { margin-bottom: 18px; }
    .rc-block-text-inner h2 { font-size: 18px; margin: 36px 0 14px; }
    .rc-block-text-inner h3 { font-size: 16px; margin: 28px 0 12px; }

    /* 画像のキャプション */
    .rc-block-image figcaption,
    .rc-block-video figcaption { font-size: 12px; margin-top: 10px; }

    /* 画像+テキスト: 1カラム縦積みに */
    .rc-block-image-text-inner,
    .rc-block-image-text--3-4 .rc-block-image-text-inner,
    .rc-block-image-text--1-1 .rc-block-image-text-inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .rc-block-image-text.is-reversed .rc-block-image-text-inner {
        direction: ltr;
    }
    .rc-block-image-text-content { font-size: 14.5px; }
    /* スマホで縦長/正方形が画面いっぱいになると大きすぎるので最大幅を設定 */
    .rc-block-image-text--3-4 .rc-block-image-text-image { max-width: 280px; margin: 0 auto; }
    .rc-block-image-text--1-1 .rc-block-image-text-image { max-width: 340px; margin: 0 auto; }

    /* カード3列 → 1列 */
    .rc-block-cards-3col-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        max-width: 420px;
        margin: 0 auto;
    }
    .rc-block-card-title { font-size: 16px; }
    .rc-block-card-desc { font-size: 13.5px; }

    /* CTA: padding 縮小 */
    .rc-block-cta-btn { font-size: 13px; padding: 13px 28px; letter-spacing: 0.18em; }

    /* 区切り罫線 */
    .rc-block-divider-line { width: 30px; }

    /* ステップリスト */
    .rc-block-step { gap: 16px; padding-bottom: 28px; }
    .rc-block-step:not(:last-child)::before { left: 22px; top: 50px; }
    .rc-block-step-num { width: 44px; height: 44px; font-size: 15px; }
    .rc-block-step-body { padding-top: 6px; }
    .rc-block-step-title { font-size: 16px; letter-spacing: 0.06em; }
    .rc-block-step-desc { font-size: 14px; line-height: 1.85; }

    /* 画像スライダー (モバイル) */
    .rc-block-slider-item img { height: 240px; }                 /* デフォルト = 中 */
    .rc-block-slider--sm .rc-block-slider-item img { height: 180px; }
    .rc-block-slider--lg .rc-block-slider-item img { height: 320px; }
    .rc-block-slider--xl .rc-block-slider-item img { height: 400px; }
    .rc-block-slider-scroll { padding-bottom: 8px; }
    .rc-block-slider-scroll::-webkit-scrollbar { height: 0; }   /* スマホはスワイプ前提でバー非表示 */
    .rc-block-slider-hint { font-size: 11px; }

    /* 人物メッセージ */
    .rc-block-profile-inner {
        grid-template-columns: 1fr;
        gap: 22px;
        text-align: center;
    }
    .rc-block-profile.is-reversed .rc-block-profile-inner {
        direction: ltr;             /* モバイルは左右反転を解除して縦積み */
    }
    .rc-block-profile-image {
        width: 200px;
        aspect-ratio: 3 / 4;        /* 縦長維持 */
        margin: 0 auto;
    }
    .rc-block-profile-divider { margin: 0 auto 18px; }
    .rc-block-profile-text { text-align: left; font-size: 14.5px; }
    .rc-block-profile-name { font-size: 17px; }

}


/* ============================================================
   ブロック内リンク (text / image_text の本文下)
   2026-05-22 追加: 「詳しく見る →」スタイル。トップページの concept-link 流用設計
   ============================================================ */
.rc-block-link-wrap {
    margin-top: 24px;
    text-align: left;
}
.rc-block-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--rch2-font-serif);
    font-size: 15px;
    color: var(--rch2-text-main);
    letter-spacing: 0.1em;
    text-decoration: none;
    padding: 6px 0;
    transition: color 0.3s ease;
}
.rc-block-link-label {
    border-bottom: 1px solid var(--rch2-accent);
    padding-bottom: 4px;
}
.rc-block-link-line {
    width: 24px;
    height: 1px;
    background: var(--rch2-accent);
    transition: width 0.3s ease;
}
.rc-block-link-arrow {
    color: var(--rch2-accent);
    font-size: 16px;
    transition: transform 0.3s ease;
}
.rc-block-link:hover {
    color: var(--rch2-accent-strong);
}
.rc-block-link:hover .rc-block-link-line {
    width: 36px;
}
.rc-block-link:hover .rc-block-link-arrow {
    transform: translateX(4px);
}
/* 外部リンクは色を少し変える */
.rc-block-link--external .rc-block-link-arrow {
    font-size: 14px;     /* ↗ は小さめでバランス取る */
}

/* 画像+テキストの右カラム内 (本文下) — body の中なので margin 上だけ調整 */
.rc-block-image-text-body .rc-block-link-wrap {
    margin-top: 18px;
}

@media (max-width: 768px) {
    .rc-block-link { font-size: 14px; gap: 8px; }
    .rc-block-link-wrap { margin-top: 18px; }
}


/* ============================================================
   Block: 棒グラフ (bar_chart)
   - size: full = 1行に1グラフ (span 6) / half = 2列 (span 3) / third = 3列 (span 2)
   - color: brown (デフォルト) / beige / green
   - スマホ: どのサイズでも 1列 (span 1)
   2026-05-22 新規
   ============================================================ */
.rc-block-bar-chart {
    /* デフォルトはフル幅 (span 6) */
    max-width: 820px;
}
.rc-block-bar-chart--half {
    grid-column: span 3;
    max-width: none;
}
.rc-block-bar-chart--third {
    grid-column: span 2;
    max-width: none;
}

/* 棒グラフ本体 */
.rc-block-bar-chart-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.rc-block-bar-chart-row {
    display: grid;
    grid-template-columns: 110px 1fr 100px;      /* ラベル | バー | 値 (値列を 80→100 に拡大) */
    align-items: center;
    gap: 14px;
}
.rc-block-bar-chart-label {
    font-family: var(--rch2-font-serif);
    font-size: 14px;
    color: var(--rch2-text-main);
    letter-spacing: 0.06em;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 棒グラフのキャプション (1チャートの小見出し - 大見出しは TEXT ブロックで別に置く想定)
   2026-05-22 旧 rc-block-section-title (中央寄せ大見出し) はおおげさだったため小キャプションに変更 */
.rc-block-bar-chart-caption {
    font-family: var(--rch2-font-serif);
    font-size: 15px;
    color: var(--rch2-text-main);
    letter-spacing: 0.06em;
    margin: 0 0 14px;
    text-align: left;
    font-weight: 500;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--rch2-line);
}
.rc-block-bar-chart-track {
    position: relative;
    height: 22px;
    background: rgba(184, 122, 86, 0.10);        /* 薄ブラウン tint (バーの土台) */
    border-radius: 2px;
    overflow: hidden;
}
.rc-block-bar-chart-fill {
    height: 100%;
    background: var(--rch2-accent);              /* デフォルト brown */
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.rc-block-bar-chart-value {
    font-family: var(--rch2-font-en);
    font-size: 17px;                             /* 14 → 17 (2026-05-22 視認性UP) */
    color: var(--rch2-text-main);                /* light → main で濃く */
    letter-spacing: 0.04em;
    text-align: left;
    white-space: nowrap;
    font-weight: 500;
}

/* カラーバリアント */
.rc-block-bar-chart--c-brown .rc-block-bar-chart-fill { background: var(--rch2-accent); }
.rc-block-bar-chart--c-beige .rc-block-bar-chart-fill { background: var(--rch2-accent-light); }
.rc-block-bar-chart--c-green .rc-block-bar-chart-fill { background: #7A9A6E; }

/* サイズ別: half / third では値部分を少し圧縮するが、視認性は確保 */
.rc-block-bar-chart--half .rc-block-bar-chart-row,
.rc-block-bar-chart--third .rc-block-bar-chart-row {
    grid-template-columns: 90px 1fr 85px;       /* 値列 60→85 (視認性確保) */
}
.rc-block-bar-chart--half .rc-block-bar-chart-value,
.rc-block-bar-chart--third .rc-block-bar-chart-value {
    font-size: 15px;                            /* デフォの 17 より少し控えめだが視認性十分 */
}
.rc-block-bar-chart--third .rc-block-bar-chart-label {
    font-size: 13px;
}
/* キャプション (half/third では更に控えめ) */
.rc-block-bar-chart--half .rc-block-bar-chart-caption,
.rc-block-bar-chart--third .rc-block-bar-chart-caption {
    font-size: 14px;
    margin: 0 0 10px;
}

/* スマホ: 全サイズ 1列に。バーは画面幅いっぱい使う */
@media (max-width: 768px) {
    .rc-block-bar-chart--half,
    .rc-block-bar-chart--third {
        grid-column: span 1;
        max-width: 820px;
    }
    .rc-block-bar-chart-row,
    .rc-block-bar-chart--half .rc-block-bar-chart-row,
    .rc-block-bar-chart--third .rc-block-bar-chart-row {
        grid-template-columns: 80px 1fr 75px;     /* 値列 60→75 */
        gap: 10px;
    }
    .rc-block-bar-chart-label { font-size: 13px; }
    .rc-block-bar-chart-value,
    .rc-block-bar-chart--half .rc-block-bar-chart-value,
    .rc-block-bar-chart--third .rc-block-bar-chart-value { font-size: 15px; }  /* スマホでも視認性確保 */
    .rc-block-bar-chart-track { height: 20px; }
    .rc-block-bar-chart-caption { font-size: 14px; margin: 0 0 10px; }
}


/* ============================================================
   Block: 特徴カード (画像なし、2/3/4列)  2026-05-23
   ============================================================ */
.rc-block-feature-cards {
    max-width: 1100px;
}
.rc-block-feature-cards-grid {
    display: grid;
    gap: 24px;
}
.rc-block-feature-cards--cols-2 .rc-block-feature-cards-grid { grid-template-columns: repeat(2, 1fr); }
.rc-block-feature-cards--cols-3 .rc-block-feature-cards-grid { grid-template-columns: repeat(3, 1fr); }
.rc-block-feature-cards--cols-4 .rc-block-feature-cards-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }

.rc-block-feature-card {
    display: flex;
    flex-direction: column;
    padding: 24px 22px;
    background: var(--rch2-bg-card, #fdfaf6);
    border: 1px solid var(--rch2-line, #ece5da);
    border-radius: 0;
}
.rc-block-feature-card--has-icon {
    align-items: center;
    text-align: center;
}
.rc-block-feature-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--rch2-accent, #b87a56);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 14px;
    flex-shrink: 0;
}
.rc-block-feature-card-title {
    font-family: var(--rch2-font-serif, serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--rch2-text-main, #4a3c33);
    margin: 0 0 10px;
    line-height: 1.5;
    letter-spacing: 0.08em;
}
.rc-block-feature-card-text {
    font-family: var(--rch2-font-sans, sans-serif);
    font-size: 14px;
    color: var(--rch2-text-mute, #6f6258);
    line-height: 1.85;
    margin: 0;
    letter-spacing: 0.04em;
}

/* タブレット: 4列→2列、3列キープ */
@media (max-width: 1024px) {
    .rc-block-feature-cards--cols-4 .rc-block-feature-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

/* スマホ: 管理画面で選択した「スマホ列数」(mcols) に従う
   2026-05-24: 既存の cols-* を上書きするため、mcols-* の方が後に出ること & 同 specificity でOK */
@media (max-width: 768px) {
    /* mcols-1 (デフォルト): 1列 */
    .rc-block-feature-cards--mcols-1 .rc-block-feature-cards-grid {
        grid-template-columns: 1fr;
        max-width: 440px;
        margin: 0 auto;
        gap: 18px;
    }
    /* mcols-2: タイトルだけのカードを詰めて見せたい時に */
    .rc-block-feature-cards--mcols-2 .rc-block-feature-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: none;
        margin: 0;
        gap: 12px;
    }
    /* mcols-2 の時はカード内余白を少し詰めて 2列に収まりやすく */
    .rc-block-feature-cards--mcols-2 .rc-block-feature-card {
        padding: 16px 12px;
    }
    .rc-block-feature-cards--mcols-2 .rc-block-feature-card-icon {
        width: 40px; height: 40px; font-size: 18px; margin-bottom: 8px;
    }
    .rc-block-feature-cards--mcols-2 .rc-block-feature-card-title {
        font-size: 14px;
        letter-spacing: 0.04em;
    }
    .rc-block-feature-cards--mcols-2 .rc-block-feature-card-text {
        font-size: 12.5px;
        line-height: 1.7;
    }

    /* デフォルト (mcols-1) のカードスタイル */
    .rc-block-feature-cards--mcols-1 .rc-block-feature-card { padding: 20px 18px; }
    .rc-block-feature-cards--mcols-1 .rc-block-feature-card-icon { width: 48px; height: 48px; font-size: 22px; margin-bottom: 12px; }
    .rc-block-feature-cards--mcols-1 .rc-block-feature-card-title { font-size: 16px; }
    .rc-block-feature-cards--mcols-1 .rc-block-feature-card-text { font-size: 13.5px; line-height: 1.8; }
}

