@charset "UTF-8";

/*
 * お知らせ（/news、/news/{slug}）。layouts.site の上で使う。
 * 色・書体・余白・角丸は tokens.css の変数だけを使い、新しい値を作らない。
 */

/* パンくず（category/index.blade.php の cat-breadcrumb と同じ構造。SPは横スクロールで折り返さない） */
.news-crumb {
    margin: var(--space-12) 0 0;
}
.news-crumb__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    font-size: var(--fs-12);
    line-height: 1.4;
    color: var(--color-text-muted);
    -webkit-overflow-scrolling: touch;
}
.news-crumb__list::-webkit-scrollbar {
    display: none;
}
.news-crumb__item {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    white-space: nowrap;
}
.news-crumb__item a {
    color: var(--color-primary);
    text-decoration: none;
}
.news-crumb__item a:hover {
    text-decoration: underline;
}
.news-crumb__sep {
    font-size: var(--fs-10);
    color: var(--color-border-soft);
}
.news-crumb__current {
    color: var(--color-text-muted);
}
@media screen and (min-width: 768px) {
    .news-crumb {
        margin-top: var(--space-16);
    }
    .news-crumb__list {
        flex-wrap: wrap;
        font-size: var(--fs-13);
    }
}

/* 日付と種別（1件・一覧で共通） */
.news-article__meta,
.news-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-10);
    font-size: var(--fs-14);
    color: var(--color-text-muted);
}
/* .PostContent p の margin 1.5em を、メタ行だけ詰める */
.PostContent p.news-article__meta {
    margin: 0 0 var(--space-20);
    font-size: var(--fs-14);
    line-height: 1.6;
}
.news-type {
    display: inline-block;
    padding: 2px var(--space-10);
    border-radius: var(--radius-pill);
    background: var(--color-bg-tint);
    color: var(--color-primary-dark);
    font-size: var(--fs-12);
    font-weight: bold;
    line-height: 1.6;
}

/* 1件ページの画像と外部リンク */
.news-article__image {
    margin: 0 0 var(--space-25);
}
.news-article__image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}
.PostContent p.news-article__link {
    margin-top: var(--space-30);
}
.news-article__link .fa-external-link-alt {
    margin-left: var(--space-5);
    font-size: var(--fs-12);
}

/* 一覧に戻るボタン（.btnWrap .medium は min-width:100% なので幅を絞る） */
.news-back {
    margin: var(--space-40) 0;
}
.news-back .btnWrap {
    max-width: 400px;
    margin: 0 auto;
}

/* 一覧 */
.news-list {
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.news-list__item {
    border-bottom: 1px solid var(--color-border-light);
}
.news-card__link {
    display: block;
    padding: var(--space-25) var(--space-10);
    color: var(--color-text-dark);
    text-decoration: none;
}
.news-card__meta {
    margin: 0 0 var(--space-8);
}
.news-card__title {
    margin: 0 0 var(--space-8);
    font-size: var(--fs-18);
    font-weight: bold;
    line-height: 1.5;
    color: var(--color-text-dark);
}
.news-card__link:hover .news-card__title {
    color: var(--color-primary);
}
.news-card__excerpt {
    margin: 0;
    font-size: var(--fs-14);
    line-height: 1.7;
    color: var(--color-text-sub);
}
.news-list__empty {
    padding: var(--space-40) 0;
    text-align: center;
    color: var(--color-text-sub);
}

/* 一覧（body.worker_list）では .secInner に上下の大きな余白が付く。パンくずの箱にはその余白を使わない（ID 付きの既存セレクタより強くする） */
#main .news-crumb .secInner {
    padding-top: 0;
    padding-bottom: 0;
}

/* 1件ページ（body.news_show）。#main の既定の上余白 64px は PC の固定ヘッダー（約82px）より小さく、
   帯の上端がヘッダーに隠れて、見出しの飾り（.titleWrap::before/::after）が半分欠ける幅がある。
   一覧（body.worker_list）と同じ余白にそろえる */
.news_show #main .titlebg {
    padding: var(--space-50) 0;
}
@media screen and (min-width: 768px) {
    .news_show #main {
        padding-top: 110px;
    }
    .news_show #main .titlebg {
        padding: 3.515625vw 0;
    }
}

/* TOP の NEWS 節。section#faq と同じ2列の組み方（PC: 左に見出しとボタン 28%、右に一覧 66%。SP: 縦に並ぶ） */
.index section#news {
    margin: 0;
    padding-bottom: var(--space-100);
}
.index section#news .secInner {
    padding-top: var(--space-100);
}
.index section#news .titleWrap {
    margin-bottom: 0;
}
.index section#news .secInner .wrap:first-child {
    width: 100%;
    margin-bottom: var(--space-50);
}
.index section#news .secInner .wrap:nth-child(2) {
    width: 100%;
}
.news-list--top {
    max-width: none;
    border-top: 1px solid var(--color-border-light);
}
.news-list--top .news-card__link {
    padding: var(--space-20) var(--space-10);
}
.news-list--top .news-card__title {
    font-size: var(--fs-16);
}
@media screen and (min-width: 768px) {
    .index section#news {
        padding-bottom: 6.09372vw;
    }
    .index section#news .secInner {
        display: flex;
        justify-content: space-between;
        max-width: 62.5%;
        padding-top: 5.625vw;
    }
    .index section#news .titleWrap {
        margin-bottom: 4.68747vw;
    }
    .index section#news .titleWrap::before {
        left: 0;
        transform: translateX(0);
    }
    .index section#news .titleWrap::after {
        left: 15px;
        transform: translateX(0);
    }
    .index section#news .titleWrap h2,
    .index section#news .titleWrap p {
        text-align: left;
    }
    .index section#news .secInner .wrap:first-child {
        width: 28%;
        margin-bottom: 0;
    }
    .index section#news .secInner .wrap:nth-child(2) {
        width: 66%;
    }
}