@charset "utf-8";
/* 求職者・企業向けの案内ページ：おすすめ記事 */
.guideMobileArticlesSlot{
    container-type: inline-size;
    container-name: guideMobile;
}
.guideMobileArticles{
    display: none;
}

/* 広告は通常どおり流し、おすすめ記事だけ画面の下端で止める。
   高さは guide.js で測る。本文の列を出ると追従を終える。 */
@container pageAd (min-width: 1105px){
    .guideAdColumn .sideArticles{
        position: sticky;
        top: calc(100vh - var(--guide-articles-height, 38rem) - 1.5rem);
        top: calc(100dvh - var(--guide-articles-height, 38rem) - 1.5rem);
        flex: 0 0 auto;
    }
}

/* 右の列が入らない幅では、求職者向けページのFAQ直前に出す。 */
@container guideMobile (max-width: 1104px){
    .guideMobileArticles{
        display: block;
        max-width: 960px;
        margin: 0 auto 3rem;
        padding: 0 1.5rem;
    }
    .guideMobileArticles .sideArticlesTitle{
        font-size: 1.25rem;
    }
    .guideMobileArticles .sideArticleList{
        gap: 1.25rem;
    }
    .guideMobileArticles .sideArticleTitle{
        font-size: 1rem;
    }
}
@container guideMobile (min-width: 720px) and (max-width: 1104px){
    .guideMobileArticles .sideArticleList{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 719px){
    .guideMobileArticles{
        padding: 0 1rem;
    }
}