/* ============================================================
   Diary 求人サイト — Follow us セクション
   - 雑誌的・上品ブランドトーン（コンセプト/3つの安心と並べて違和感ゼロを目標）
   - 円形SNSアイコン4つ横並び（PC: gap 56px / SP: gap 32px）
   - 色は全SNS共通 #B87A56（公式ロゴカラーは使わない）
   - 影/グラデ/角丸（円以外）禁止
   - フォント/色変数は hero.css の :root を流用
   ============================================================ */

/* セクション本体 */
.rc-h2-follow {
    background: var(--rch2-bg-base);  /* #FAF7F2 */
    padding: 120px 4rem;
}
.rc-h2-follow-inner {
    max-width: 900px;
    margin: 0 auto;
}

/* SNS横並びリスト */
.rc-h2-follow-list {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 56px;
    margin-top: 56px;
}

/* 各SNS（リンク全体） */
.rc-h2-follow-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--rch2-text-sub);
    transition: color 0.3s ease;
    /* 強い動きは避ける — translate は最小限、focus 時のみ少し浮かせる */
}

/* 円形アイコンコンテナ */
.rc-h2-follow-icon-circle {
    width: 56px;
    height: 56px;
    border: 0.5px solid var(--rch2-line);   /* #E8DDD0 */
    border-radius: 50%;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rch2-accent);              /* #B87A56 — currentColor で SVG に効く */
    transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

/* SVGアイコン本体 — color は親 .icon-circle から currentColor で継承 */
.rc-h2-follow-icon-svg {
    display: block;
    transition: transform 0.3s ease;
}

/* 英語ラベル */
.rc-h2-follow-label {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 12px;
    color: var(--rch2-text-sub);            /* #6B5544 — spec の #6B4226 に近い brand 色 */
    letter-spacing: 0.18em;                 /* 2px相当 */
    line-height: 1;
    transition: color 0.3s ease;
}

/* ホバー（控えめ） */
.rc-h2-follow-item:hover .rc-h2-follow-icon-circle {
    border-color: var(--rch2-accent-light); /* #C8987A */
    color: var(--rch2-accent-strong);       /* #6B4226 — SVG が濃色に */
    background: rgba(255, 255, 255, 0.4);
}
.rc-h2-follow-item:hover .rc-h2-follow-label {
    color: var(--rch2-text-main);           /* #4A3520 */
}
/* SVG微浮上（強すぎないように 1px だけ） */
.rc-h2-follow-item:hover .rc-h2-follow-icon-svg {
    transform: translateY(-1px);
}

/* キーボードフォーカス（アクセシビリティ） */
.rc-h2-follow-item:focus-visible {
    outline: none;
}
.rc-h2-follow-item:focus-visible .rc-h2-follow-icon-circle {
    border-color: var(--rch2-accent);
    box-shadow: 0 0 0 3px rgba(184, 122, 86, 0.15);
}

/* 補足キャプション */
.rc-h2-follow-caption {
    margin: 56px auto 0;
    max-width: 480px;
    text-align: center;
    font-family: var(--rch2-font-serif);
    font-size: 13px;
    color: var(--rch2-text-sub);            /* #6B5544 */
    line-height: 1.9;
    letter-spacing: 0.12em;
}

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

/* タブレット */
@media (max-width: 1024px) {
    .rc-h2-follow { padding: 100px 2.5rem; }
}

/* モバイル: 横並び維持（spec通り）。gap を縮めて 4個収める */
@media (max-width: 768px) {
    .rc-h2-follow {
        padding: 88px 1.5rem;
    }
    .rc-h2-follow-list {
        gap: 32px;
        margin-top: 40px;
        flex-wrap: nowrap;
    }
    .rc-h2-follow-icon-circle {
        width: 50px;
        height: 50px;
    }
    .rc-h2-follow-icon-svg {
        width: 20px;
        height: 20px;
    }
    .rc-h2-follow-label {
        font-size: 11px;
        letter-spacing: 0.15em;
    }
    .rc-h2-follow-caption {
        margin-top: 40px;
        font-size: 12.5px;
        letter-spacing: 0.1em;
        line-height: 1.85;
    }
}

/* 小型モバイル: 4個きつい場合に備えて gap をもう一段詰める */
@media (max-width: 380px) {
    .rc-h2-follow { padding: 80px 1.2rem; }
    .rc-h2-follow-list { gap: 22px; }
    .rc-h2-follow-icon-circle {
        width: 46px;
        height: 46px;
    }
    .rc-h2-follow-icon-svg {
        width: 18px;
        height: 18px;
    }
    .rc-h2-follow-label { font-size: 10.5px; }
}