/*
 Theme Name: JIN:R Child
 Template:   jinr
*/

/* =============================================
   S-Log TOPページ 全幅レイアウト対応
   ============================================= */

/* ---- ページタイトルを非表示 ---- */
.slog-front h1.entry-title,
.slog-front .entry-title,
.slog-front .page-title,
.slog-front .l-main__title,
.slog-front .entry-header,
.slog-front .page-header,
.slog-front .jinr-breadcrumb,
.slog-front .breadcrumb,
.slog-front .l-breadcrumb,
.slog-front .c--entry-title,
.slog-front #jinrPostTitle {
    display: none !important;
}

/* ---- サイドバーを非表示 ---- */
.slog-front #sidebar,
.slog-front .sidebar,
.slog-front .widget-area,
.slog-front .l-sidebar,
.slog-front aside {
    display: none !important;
}

/* ---- コンテナ・ラッパーの幅制限を解除 ---- */
.slog-front #wrapper,
.slog-front #container,
.slog-front .l-wrap,
.slog-front .l-container,
.slog-front .l-body,
.slog-front .site-content,
.slog-front #jinrMain,
.slog-front .jinr-main,
.slog-front #mainContent,
.slog-front .l-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ---- hero を強制的に全幅・2カラムに（PC のみ） ---- */
@media (min-width: 901px) {
    .slog-front #slog-top .hero__inner {
        display: grid !important;
        grid-template-columns: 1.05fr 0.95fr !important;
        gap: 40px !important;
        align-items: center !important;
    }
    .slog-front #slog-top .hero__copy {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    .slog-front #slog-top .hero__scene {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }
}

/* ---- スマホは1カラムに戻す ---- */
@media (max-width: 900px) {
    .slog-front #slog-top .hero__inner {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        padding: 20px 22px 50px !important; /* 上余白・左右余白・下余白 */
    }
    .slog-front #slog-top .hero__copy {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    .slog-front #slog-top .hero__scene {
        grid-column: 1 !important;
        grid-row: 2 !important;
        max-width: 320px !important;
        width: 100% !important;
        height: 300px !important;
        margin: 0 auto !important;
        display: block !important;
    }
    /* 余分な要素を非表示 */
    .slog-front #slog-top .hero__inner > *:not(.hero__copy):not(.hero__scene) {
        display: none !important;
    }
    /* wrap の左右余白を確保 */
    .slog-front #slog-top .wrap,
    .slog-front #slog-top .wrap-narrow {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }
}

/* ---- メインコンテンツエリアを全幅に ---- */
.slog-front #main,
.slog-front .l-main,
.slog-front .l-main__contents,
.slog-front .main-contents,
.slog-front #content,
.slog-front .content-area {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ---- 記事コンテンツエリアの余白を除去 ---- */
.slog-front .entry-content,
.slog-front .post-content,
.slog-front article {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* ---- JIN:R 固有ID の余白を除去 ---- */
.slog-front #mainContentInner,
.slog-front #jinrArticle,
.slog-front #postContent {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* ---- #slog-top を画面幅いっぱいに強制ブレイクアウト ---- */
.slog-front #slog-top {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    overflow-x: hidden !important;
}

/* ---- WordPress が自動挿入する br を非表示 ---- */
#slog-top br {
    display: none !important;
}
/* ただし about の br（改行）は残す */
#slog-top .about__statement br {
    display: inline !important;
}

/* h1 の br はPCのみ有効、スマホでは非表示 */
@media (min-width: 901px) {
    #slog-top h1 br {
        display: inline !important;
    }
}
/* h1 のスマホ改行を非表示 */
@media (max-width: 900px) {
    #slog-top h1 br {
        display: none !important;
    }
}

/* hero h1 フォントサイズ — scoped.css より後に読み込まれるため
   !important を2重にするためにインラインスタイル相当の specificity で上書き */
body #slog-top .hero h1,
body #slog-top .hero h1 {
    font-size: clamp(22px, 5.2vw, 70px) !important;
}

/* ---- #slog-top 内の p タグ余白をリセット ---- */
#slog-top p {
    margin: 0 !important;
    padding: 0 !important;
}

/* ---- s-chip をスマホで全幅に ---- */
@media (max-width: 900px) {
    #slog-top .s-chips {
        flex-direction: column !important;
    }
    #slog-top .s-chip {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ---- mekou__links を中央寄せ ---- */
#slog-top .mekou__links {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
}
#slog-top .mekou__msg {
    text-align: center !important;
}

/* ---- svc-card__n を大きく ---- */
#slog-top .svc-card__n {
    font-size: 70px !important;
    line-height: 1 !important;
    opacity: 0.15 !important;
}

/* ---- ① hero__eyebrow 上下余白 ---- */
#slog-top .hero__eyebrow {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}

/* ---- ② .sub 上下余白 ---- */
#slog-top .hero .sub {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

/* ---- ③ section-title 上下余白 ---- */
#slog-top .section-title {
    margin-top: 12px !important;
    margin-bottom: 20px !important;
}

/* ---- ④ section-sub 中央寄せ（center クラス配下のみ） ---- */
#slog-top .center .section-sub {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Mission / Approach の section-sub は左寄せ */
#slog-top [data-screen-label="mission"] .section-sub,
#slog-top [data-screen-label="approach"] .section-sub {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* CTA の p は中央寄せ */
#slog-top [data-screen-label="contact"] .cta__card > p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ---- sv-card__n を3倍に ---- */
#slog-top .sv-card__n {
    font-size: 40px !important;
    line-height: 1 !important;
}

/* ---- ⑤ pstep__n を3倍に ---- */
#slog-top .pstep__n {
    font-size: 36px !important;
    line-height: 1 !important;
    margin-bottom: 12px !important;
}

/* ---- about__youth は左ボーダー＋余白を復元 ---- */
#slog-top .about__youth {
    padding-left: 16px !important;
    border-left: 3px solid var(--cream-300) !important;
}

/* ---- #slog-top 内の h1〜h4 余白もリセット ---- */
#slog-top h1,
#slog-top h2,
#slog-top h3,
#slog-top h4 {
    margin: 0 !important;
    padding: 0 !important;
}