@charset "utf-8";
/* ==========================================================
   ▼ お役立ち記事の各ページ（articles/〇〇.html）
   ========================================================== */

/* 記事の白い箱 */
.articleBody{
    border: 1px solid transparent;
    background: linear-gradient(var(--bgBase), var(--bgBase)) padding-box, var(--gradientBorder) border-box;
    border-radius: var(--radius);
    padding: 2.5rem 3rem;
}
@media (max-width: 719px){
    .articleBody{
        padding: 1.5rem 1.25rem;
    }
}
.articleCategory{
    display: inline-block;
    color: var(--accent);
    font-size: 0.81rem;
    font-weight: 700;
}
.articleTitle{
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.5;
    margin: 0.3rem 0 0.75rem;
}
@media (max-width: 719px){
    .articleTitle{
        font-size: 1.38rem;
    }
}
.articleDate{
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    color: var(--textWeak);
    font-size: 0.81rem;
    margin-bottom: 2rem;
}
/* 記事の写真（記事一覧のカードと同じ画像。800×450。tools/makeArticlePhotos.php で作る） */
.articleHero{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: -1rem 0 2rem;
    border-radius: var(--radius);
    object-fit: cover;
}
/* 本文の途中に置く写真。縦横比を保ち、説明文との間も空ける */
.articlePhoto{
    margin: 2rem 0;
}
.articlePhoto img{
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}
.articlePhoto figcaption{
    margin-top: 0.5rem;
    color: var(--textWeak);
    font-size: 0.81rem;
    line-height: 1.7;
}

/* 写真の下で対象読者と話題を伝える。分類は一覧の絞り込みへつながる */
.articleCategories{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: -0.75rem 0 1.25rem;
}
.articleCategories a{
    display: inline-block;
    padding: 0.25em 0.88em;
    border: 1px solid var(--border);
    border-radius: 2rem;
    background: var(--muscatSoft);
    color: var(--accent);
    font-size: 0.88rem;
    font-weight: 700;
}
@media (hover: hover){
    .articleCategories a:hover{
        border-color: var(--accent);
        text-decoration: none;
    }
}
.articleAudience{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    color: var(--textSub);
    font-size: 0.88rem;
}
.articleAudience strong{
    color: var(--accent);
}
.articleLead{
    margin-bottom: 1.5rem;
}
/* 目次・出典はHTMLのまま保持し、必要な人が開いて読めるようにする */
.articleContents,
.articleSources{
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    font-size: 0.94rem;
}
.articleContents{
    margin-bottom: 2rem;
}
.articleContents summary,
.articleSources summary{
    color: var(--accent);
    font-weight: 700;
    cursor: pointer;
}
.textBody .articleContentsList{
    margin: 1rem 0 0;
    padding-left: 1.25rem;
}
.articleContentsList li + li{
    margin-top: 0.5em;
}
.textBody .articleContentsList a{
    text-decoration: none;
}
@media (hover: hover){
    .textBody .articleContentsList a:hover{
        text-decoration: underline;
        text-decoration-color: currentColor;
    }
}
/* 制度の説明と、編集側の考え・聞き方の例を区別する */
.articleViewpoint{
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    border-left: 3px solid var(--accent);
    border-radius: 0 0.5rem 0.5rem 0;
    background: var(--muscatSoft);
}
.articleQuestion{
    margin-top: 1.25rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
}
@media (max-width: 719px){
    .articleViewpoint,
    .articleQuestion{
        padding: 1rem;
    }
}
.articleViewpointTitle,
.articleQuestionTitle{
    color: var(--accent);
    font-weight: 700;
}
.articleCompanyNote,
.articleRelated{
    margin-top: var(--readingSectionGap);
}
.textBody .articleRelatedTitle{
    font-size: 1.13rem;
}
.articleSources{
    margin-top: 2rem;
}
.textBody .articleSources ul{
    margin-bottom: 0;
    overflow-wrap: anywhere;
}
.articleEditor{
    margin-top: 1rem;
    color: var(--textSub);
    font-size: 0.88rem;
}
/* 雇用形態の比較表は、狭い画面でも列の内容を折り返して読めるようにする */
.articleBody th{
    white-space: normal;
}
@media (max-width: 719px){
    .articleBody th,
    .articleBody td{
        padding: 0.6rem 0.5rem;
        overflow-wrap: anywhere;
    }
}

/* この記事のポイント */
.articleSummary{
    background: var(--accentSoft);
    border-radius: 0.5rem;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0 2rem;
}
.articleSummaryTitle{
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.textBody .articleSummary ul{
    margin-bottom: 0;
}
.articleSummary li + li{
    margin-top: 0.5em;
}

/* 求人検索への誘導 */
.articleCta{
    margin-top: 2.5rem;
    padding: 1.5rem;
    border: 1px solid transparent;
    background: linear-gradient(var(--bgBase), var(--bgBase)) padding-box, var(--gradientMain) border-box;
    border-radius: var(--radius);
    text-align: center;
}
.articleCtaText{
    margin-bottom: 1rem;
    font-weight: 700;
}
/* 案内リンクの次に並ぶボタンは、折り返した場合もタップする余白を保つ */
.articleBody p > a + .btnPrimary{
    margin-top: 0.875rem;
    margin-left: 0.75rem;
}

/* 注意書き */
.articleNote{
    margin-top: 2.5rem;
    color: var(--textSub);
    font-size: 0.88rem;
    line-height: 1.8;
}

/* 記事をシェアする（js/main.js の setupArticleShare が、一覧に戻るボタンの上に足す） */
.articleShare{
    margin-top: 2.5rem;
    padding: 1.25rem;
    border-radius: var(--radius);
    background: var(--muscatSoft);
    text-align: center;
}
.articleShareTitle{
    font-weight: 700;
}
/* .textBody の段落の余白を打ち消す */
.textBody .articleShareTitle{
    margin: 0;
}
.articleShareButtons{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.articleShareButton{
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.6em 1.25em;
    border: 1px solid transparent;
    border-radius: 2rem;
    background: linear-gradient(var(--bgBase), var(--bgBase)) padding-box, var(--gradientBorder) border-box;
    color: var(--textMain);
    font-size: 0.94rem;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--effectDuration) ease;
}
.articleShareButton svg{
    width: 1.1rem;
    height: 1.1rem;
}
@media (hover: hover){
    .articleShareButton:hover{
        background: linear-gradient(var(--bgSoft), var(--bgSoft)) padding-box, var(--gradientBorder) border-box;
        text-decoration: none;
    }
}

/* 記事の一覧に戻る */
.articleBack{
    margin-top: 2rem;
    text-align: center;
}

/* 記事の下の「この記事の条件の求人」（tools/buildArticleList.php が書き出し、js/main.js が求人を並べる） */
.articleJobs{
    margin-top: 2.5rem;
}
.articleJobsList{
    margin-bottom: 1.25rem;
}
.articleJobsMore{
    text-align: center;
}