/* ============================================================
   Diary 求人サイト v2 — コンセプトセクション
   - ヒーロー（横長）→ コンセプト（左縦長画像+右テキスト）でリズム変化
   - 雑誌の特集ページ的な上品さ
   - パレット/フォントは hero.css の :root 変数を流用
   - スクロールでフェードイン（IntersectionObserver）
   ============================================================ */

/* ============================================================
   セクション本体
   ============================================================ */
.rc-h2-concept {
    background: var(--rch2-bg-base);  /* #FAF7F2 オフホワイト */
    padding: 140px 4rem;
}
.rc-h2-concept-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 38%) 1fr;
    gap: 80px;
    align-items: start;
}

/* ============================================================
   左: 縦長画像（3:4）
   ============================================================ */
.rc-h2-concept-image {
    position: relative;
    aspect-ratio: 3 / 4;
    width: 100%;
    background: var(--rch2-bg-section);
    border-radius: 3px;
    overflow: hidden;
}
.rc-h2-concept-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(0.92);
}
.rc-h2-concept-image-placeholder {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: var(--rch2-text-light);
    background: var(--rch2-bg-section);
}
.rc-h2-concept-image-placeholder::after {
    content: "Image  3:4";
    position: absolute;
    bottom: 16px;
    right: 18px;
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 12px;
    color: var(--rch2-text-light);
    letter-spacing: 0.2em;
}

/* ============================================================
   右: テキストエリア
   ============================================================ */
.rc-h2-concept-text {
    padding-top: 24px;  /* 画像と縦方向のリズムを合わせる微調整 */
}
.rc-h2-concept-eyebrow {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 13px;
    color: var(--rch2-text-light);
    letter-spacing: 0.4em;
    margin: 0 0 40px;
}
.rc-h2-concept-headline {
    font-family: var(--rch2-font-serif);
    font-size: 28px;
    color: var(--rch2-text-main);
    letter-spacing: 0.22em;
    line-height: 1.7;
    font-weight: 500;
    margin: 0 0 52px;
}
.rc-h2-concept-body {
    font-family: var(--rch2-font-serif);
    font-size: 16px;                            /* 14.5 → 16 で本文の可読性UP */
    color: var(--rch2-text-sub);
    letter-spacing: 0.07em;
    line-height: 1.95;                          /* サイズUPに合わせて 2.0 → 1.95 */
}
.rc-h2-concept-body p {
    margin: 0;
}
.rc-h2-concept-body p + p {
    margin-top: 30px;
}
.rc-h2-concept-closer {
    font-family: var(--rch2-font-serif);
    font-size: 17px;
    color: var(--rch2-text-main);
    letter-spacing: 0.22em;
    line-height: 1.75;
    font-weight: 500;
    margin: 52px 0 0;
}

/* ============================================================
   締めの一文の下の「お店について」リンク
   - 雑誌的・エディトリアル風（ボタン感は出さない）
   - ホバー時：罫線が伸びる + 矢印が右にスライド + 色がテラコッタに
   ============================================================ */
.rc-h2-concept-link {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    margin-top: 56px;
    text-decoration: none;
    color: var(--rch2-text-main);
    transition: color 0.25s ease, gap 0.25s ease;
}
.rc-h2-concept-link-label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    line-height: 1.2;
}
.rc-h2-concept-link-en {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 11px;
    color: var(--rch2-text-light);
    letter-spacing: 0.3em;
    transition: color 0.25s ease;
}
.rc-h2-concept-link-ja {
    font-family: var(--rch2-font-serif);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.18em;
    transition: color 0.25s ease;
}
.rc-h2-concept-link-line {
    height: 2px;
    width: 60px;
    background: var(--rch2-accent);
    transition: width 0.35s ease, background-color 0.25s ease;
    flex-shrink: 0;
}
.rc-h2-concept-link-arrow {
    font-family: var(--rch2-font-en);
    font-size: 24px;
    color: var(--rch2-accent);
    line-height: 1;
    transition: transform 0.3s ease;
}
.rc-h2-concept-link:hover {
    gap: 24px;
}
.rc-h2-concept-link:hover .rc-h2-concept-link-en,
.rc-h2-concept-link:hover .rc-h2-concept-link-ja {
    color: var(--rch2-accent);
}
.rc-h2-concept-link:hover .rc-h2-concept-link-line {
    width: 96px;
    background: var(--rch2-accent-strong);
}
.rc-h2-concept-link:hover .rc-h2-concept-link-arrow {
    transform: translateX(6px);
}

/* ============================================================
   既存セクションとの区切り（border-top + 余白）
   ============================================================ */
.rc-h2-concept-separator {
    height: 20px;
    background: var(--rch2-bg-base);
    border-top: 1px solid var(--rch2-line);
}

/* ============================================================
   スクロールフェードイン（汎用クラス。今後の Phase でも流用可能）
   - JS が要素に .is-visible を付ける
   - data-delay 属性でステップ表示
   ============================================================ */
.rc-fade-up {
    opacity: 0;
    transform: translateY(18px);
    /* 800ms → 500ms に短縮（旧設定だとスクロール追従が間に合わなかった） */
    transition: opacity 500ms ease-out, transform 500ms ease-out;
    will-change: opacity, transform;
}
.rc-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* 初回ロード時に既にビューポート内にあった要素用。
   JS が「is-visible-instant + is-visible」を同時付与 → トランジション無効で瞬時可視化。
   その後 JS が is-visible-instant を外して通常状態へ戻す（次の状態変更があれば trans 復活）。 */
.rc-fade-up.is-visible-instant {
    transition: none !important;
}

/* JS無効・古いブラウザ向けフォールバック：何もしないと見えないので即表示 */
@media (prefers-reduced-motion: reduce) {
    .rc-fade-up {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

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

/* タブレット: 余白を少し詰める */
@media (max-width: 1024px) {
    .rc-h2-concept { padding: 110px 2.5rem; }
    .rc-h2-concept-inner { gap: 56px; }
    .rc-h2-concept-headline { font-size: 25px; }
}

/* モバイル: 縦並び（画像 → テキスト）。画像は幅いっぱい */
@media (max-width: 768px) {
    .rc-h2-concept { padding: 88px 1.5rem; }
    .rc-h2-concept-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .rc-h2-concept-text { padding-top: 0; }
    .rc-h2-concept-eyebrow {
        font-size: 12px;
        letter-spacing: 0.35em;
        margin-bottom: 28px;
    }
    .rc-h2-concept-headline {
        font-size: 21px;
        letter-spacing: 0.2em;
        margin-bottom: 36px;
    }
    .rc-h2-concept-body { font-size: 14px; line-height: 1.95; }
    .rc-h2-concept-body p + p { margin-top: 26px; }
    .rc-h2-concept-closer {
        font-size: 16px;
        margin-top: 40px;
        letter-spacing: 0.2em;
    }
    .rc-h2-concept-link {
        margin-top: 40px;
        gap: 16px;
    }
    .rc-h2-concept-link-en { font-size: 10px; letter-spacing: 0.25em; }
    .rc-h2-concept-link-ja { font-size: 15px; }
    .rc-h2-concept-link-line { width: 48px; height: 2px; }
    .rc-h2-concept-link-arrow { font-size: 20px; }
    .rc-h2-concept-link:hover { gap: 18px; }
    .rc-h2-concept-link:hover .rc-h2-concept-link-line { width: 72px; }
    .rc-h2-concept-separator { height: 16px; }
}

/* 小型モバイル */
@media (max-width: 380px) {
    .rc-h2-concept { padding: 72px 1.2rem; }
    .rc-h2-concept-headline { font-size: 19px; }
}