@charset 'utf-8';

/* =============================================================
   お知らせ（/news/ と /news/<スラッグ>/）
   design : PC 1440px / SP 375px

   - 一覧 … archive-news.php       .p-news--archive
   - 詳細 … single-news.php        .p-news--single
   - 見出し … template-parts/news-head.php

   写真の FV を持たないページなので、共通パーツ template-parts/fv.php
   は使わず、薄いグレー地の上に見出しを置くだけの構成にしている。
   ============================================================= */
/* 下の余白は c-contact 側の padding-bottom が持つので、ここでは付けない */
.p-news {
    background-color: var(--color-light-gray);
}


/* =============================================================
   見出し（パンくず ＋ タイトル）
   ============================================================= */
 /* html body に fixed ヘッダーぶんの padding-top が入っているので、
    ここではヘッダー下からの 20px だけを足す */
.p-news__head {
    padding-top: calc(20 * var(--u));
}

/* 左位置は FV ページのパンくず（.c-fv__bread）と同じ式。
   1440px でコンテンツ左端より 88px 外側に出る */
.p-news__bread {
    padding-inline: max(calc(20 * var(--u)), calc((100% - 1200px) / 2 - 88px));
}

/* 写真の上ではないので、パンくずは濃色になる */
.p-news__bread .c-fv__breadList {
    color: var(--color-dark-gray);
}

.p-news__bread .c-fv__breadItem a {
    color: var(--color-midium-gray);
}

.p-news__bread .c-fv__breadItem a:hover {
    color: var(--color-hamabo-blue);
}

.p-news__bread .c-fv__breadItem::after {
    background-color: var(--color-dark-gray);
}

/* l-inner に載せて左端をコンテンツ幅（1440px で 120px）に揃える。
   width を max-content にすると l-inner の margin-inline:auto で
   中央寄せになってしまうので付けない */
.p-news__ttl {
    margin-top: calc(124 * var(--u));
}

.p-news__ttl .c-secTtl__en {
    color: var(--color-hamabo-blue);
    letter-spacing: 0.0353em;   /* 3px */
    text-transform: uppercase;
}

.p-news__ttl .c-secTtl__ja {
    column-gap: calc(12 * var(--u));
    color: var(--color-dark-gray);
}


/* =============================================================
   カテゴリーのタグ（一覧の絞り込み・記事のカテゴリー共通）
   ============================================================= */
.p-news__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(75 * var(--u));
    height: calc(25 * var(--u));
    padding-inline: calc(10 * var(--u));
    border-radius: calc(12.5 * var(--u));
    background-color: var(--color-light-silver);
    color: var(--color-dark-gray);
    font-size: calc(13 * var(--u));
    font-weight: 500;
    letter-spacing: 0.0769em;   /* 1px */
    line-height: calc(15 / 13);
    transition: background-color 0.3s, color 0.3s;
    white-space: nowrap;
}

/* 記事のカテゴリー（詳細ページ）は青の塗り */
.p-news__tag--fill,
.p-news__tag--current {
    background-color: var(--color-hamabo-blue);
    color: #fff;
}

a.p-news__tag:hover {
    background-color: var(--color-hamabo-blue);
    color: #fff;
}


/* =============================================================
   一覧
   ============================================================= */
/* 「category」ラベル ＋ タグを右寄せで 1 行に */
.p-news__cats {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    column-gap: calc(43 * var(--u));
    margin-top: calc(73 * var(--u));
}

.p-news__cats-label {
    color: var(--color-midium-gray);
    font-family: var(--font-mon);
    font-size: calc(14 * var(--u));
    font-weight: 400;
    letter-spacing: 0.0714em;   /* 1px */
    line-height: calc(23 / 14);
}

.p-news__cats-list {
    display: flex;
    align-items: center;
    column-gap: calc(14 * var(--u));
}

/* li のまま置くと body の line-height:2 で高さが 32px になり、
   25px のタグが 3.5px 下にずれる */
.p-news__cats-item {
    display: flex;
    flex-shrink: 0;
}

/* デザインの一覧は内容幅（1200）の右寄せで 1049px */
.p-news__list {
    max-width: calc(1049 * var(--u));
    margin-top: calc(29 * var(--u));
    margin-left: auto;
    border-top: 1px solid var(--color-light-silver);
}

.p-news__item {
    border-bottom: 1px solid var(--color-light-silver);
}

/* サムネイル｜日付・カテゴリー・見出し｜丸矢印 */
.p-news__link {
    display: grid;
    grid-template-columns: calc(183 * var(--u)) 1fr calc(30 * var(--u));
    column-gap: calc(44 * var(--u));
    align-items: center;
    padding: calc(14 * var(--u)) calc(62 * var(--u)) calc(18 * var(--u)) calc(23 * var(--u));
}

.p-news__thumb {
    display: block;
    align-self: start;
    overflow: hidden;
    border-radius: calc(10 * var(--u));
    background-color: #d9d9d9;
    aspect-ratio: 183 / 128;
}

.p-news__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* ホバー：全体を薄くせず、写真をゆっくりズーム（TOP の COMPANY PROFILE と同じ動き）。
   a:hover の opacity 0.7 は打ち消す */
.p-news__link:hover {
    opacity: 1;
}

.p-news__link:hover .p-news__thumb img {
    transform: scale(1.08);
}

.p-news__body {
    display: block;
    align-self: start;
    /* 写真の上端から 19px 下がった位置に日付が来る（デザイン実測） */
    margin-top: calc(19 * var(--u));
    min-width: 0;
}

.p-news__meta {
    display: flex;
    align-items: center;
    column-gap: calc(28 * var(--u));
}

.p-news__date {
    color: var(--color-hamabo-blue);
    font-family: var(--font-mon);
    font-size: calc(15 * var(--u));
    font-weight: 500;
    letter-spacing: 0.1em;   /* 1.5px */
    line-height: calc(18 / 15);
}

/* 3 行以上になる見出しは 2 行に収め、末尾を三点リーダーにする */
.p-news__ttl-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    max-width: calc(646 * var(--u));
    margin-top: calc(19 * var(--u));
    color: var(--color-dark-gray);
    font-size: calc(16 * var(--u));
    letter-spacing: 0.0625em;   /* 1px */
    line-height: 2;
}

/* 丸矢印。ホバーで青い塗り円＋白い矢印に反転 */
.p-news__arrow {
    position: relative;
    width: calc(30 * var(--u));
    aspect-ratio: 1 / 1;
    background: url(../img/common/arrow_circle_mgray.png) no-repeat center / contain;
}

.p-news__arrow::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url(../img/common/arrow_circle_blue.png) no-repeat center / contain;
    opacity: 0;
    transition: opacity 0.3s;
}

.p-news__link:hover .p-news__arrow::after {
    opacity: 1;
}

.p-news__empty {
    margin-top: calc(60 * var(--u));
    color: var(--color-dark-gray);
    font-size: calc(16 * var(--u));
    line-height: 2;
    text-align: center;
}

/* ---------- ページ送り ---------- */
.p-news__pager {
    max-width: calc(1049 * var(--u));
    margin-top: calc(46 * var(--u));
    margin-left: auto;
}

.p-news__pager-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* デザインは数字を 40px ピッチの枠に左詰めで並べている（1 2 3 4 5 ... 10 で 258px）。
   桁数で送りが変わらないよう、間隔ではなく枠幅で合わせる。 */
.p-news__pager-item {
    display: flex;
    min-width: calc(40 * var(--u));
}

.p-news__pager-item:last-child {
    min-width: 0;
}

.p-news__pager-item .page-numbers {
    display: inline-block;
    color: var(--color-midium-gray);
    font-family: var(--font-mon);
    font-size: calc(16 * var(--u));
    font-weight: 400;
    letter-spacing: 0;
    line-height: calc(23 / 16);
    transition: color 0.3s;
}

.p-news__pager-item .page-numbers.current {
    color: var(--color-hamabo-blue);
    font-weight: 600;
}

.p-news__pager-item a.page-numbers:hover {
    color: var(--color-hamabo-blue);
}


/* =============================================================
   詳細
   ============================================================= */
/* 本文まわりは 897px の中央寄せ（内容幅 1200 より狭い）。
   .l-inner と同じく max-width に左右余白ぶんを足しておかないと、
   padding が内側を食って本文が 897px より狭くなる */
.p-news__article {
    max-width: calc(897 * var(--u) + 2 * var(--inner-pad));
    margin-inline: auto;
    padding-inline: var(--inner-pad);
    /* main 直下の要素は 1px 重ねている（common.css の main > *）。ボタンがこの箱の下端ぴったりにあるので、
       そのままだと下の CONTACT がボタンの下の枠線 1px に重なって切れて見える。重なるぶんだけ余白を足す */
    padding-bottom: 1px;
}

.p-news--single .p-news__meta {
    margin-top: calc(113 * var(--u));
}

.p-news--single .p-news__date {
    font-size: calc(20 * var(--u));
    letter-spacing: 0.1em;   /* 2px */
    line-height: calc(24 / 20);
}

.p-news__article-ttl {
    margin-top: calc(24 * var(--u));
    color: var(--color-dark-gray);
    font-size: calc(36 * var(--u));
    font-weight: 700;
    letter-spacing: 0.0278em;   /* 1px */
    line-height: calc(66 / 36);
}

.p-news__hero {
    margin-top: calc(64 * var(--u));
    overflow: hidden;
    border-radius: calc(10 * var(--u));
    background-color: #c4c4c4;
}

.p-news__hero img {
    display: block;
    width: 100%;
    aspect-ratio: 897 / 466;
    object-fit: cover;
}

/* ---------- エディタで書いた本文 ---------- */
.p-news__content {
    margin-top: calc(73 * var(--u));
    color: var(--color-dark-gray);
    font-size: calc(16 * var(--u));
    letter-spacing: 0.0625em;   /* 1px */
    line-height: 2;
}

.p-news__content > :first-child {
    margin-top: 0;
}

.p-news__content p {
    margin-top: calc(32 * var(--u));
}

/* 見出しは青の太字。デザインの「現場を知り、〜」に相当する */
.p-news__content h2,
.p-news__content h3,
.p-news__content h4 {
    margin-top: calc(64 * var(--u));
    color: var(--color-hamabo-blue);
    font-size: calc(24 * var(--u));
    font-weight: 700;
    letter-spacing: 0.0417em;   /* 1px */
    line-height: calc(42 / 24);
}

.p-news__content h3 { font-size: calc(20 * var(--u)); }
.p-news__content h4 { font-size: calc(18 * var(--u)); }

.p-news__content h2 + p,
.p-news__content h3 + p,
.p-news__content h4 + p {
    margin-top: calc(24 * var(--u));
}

.p-news__content a {
    color: var(--color-hamabo-blue);
    text-decoration: underline;
}

.p-news__content a:hover {
    text-decoration: none;
}

.p-news__content strong { font-weight: 700; }

.p-news__content ul,
.p-news__content ol {
    margin-top: calc(32 * var(--u));
    padding-left: calc(24 * var(--u));
}

.p-news__content ul { list-style: disc; }
.p-news__content ol { list-style: decimal; }

.p-news__content li + li {
    margin-top: calc(8 * var(--u));
}

.p-news__content img,
.p-news__content .wp-block-image {
    margin-top: calc(40 * var(--u));
}

.p-news__content img {
    height: auto;
    border-radius: calc(10 * var(--u));
}

.p-news__content table {
    width: 100%;
    margin-top: calc(40 * var(--u));
    border-collapse: collapse;
}

.p-news__content th,
.p-news__content td {
    padding: calc(14 * var(--u)) calc(18 * var(--u));
    border: 1px solid var(--color-light-silver);
    text-align: left;
    vertical-align: top;
}

.p-news__content th {
    background-color: #fff;
    font-weight: 500;
}

.p-news__content blockquote {
    margin-top: calc(40 * var(--u));
    padding-left: calc(24 * var(--u));
    border-left: 2px solid var(--color-midium-gray);
    color: var(--color-midium-gray);
}

/* ---------- 一覧へ戻る ---------- */
.p-news__foot {
    display: flex;
    justify-content: flex-end;
    margin-top: calc(88 * var(--u));
}

.p-news__back {
    width: calc(215 * var(--u));
}


/* CONTACT との間隔。c-contact 既定（PC 158px）ではなく
   一覧は 78px、詳細は 128px（デザイン実測） */
@media screen and (min-width: 769px) {

    .p-news--archive .c-contact {
        padding-top: calc(78 * var(--u));
    }

    .p-news--single .c-contact {
        padding-top: calc(128 * var(--u));
    }
}


/* =============================================================
   タブレット〜小さめの PC（769px 〜 1080px）
   ============================================================= */
@media screen and (min-width: 769px) and (max-width: 1080px) {

    .p-news__list,
    .p-news__pager {
        max-width: none;
    }

    .p-news__link {
        grid-template-columns: calc(150 * var(--u)) 1fr calc(30 * var(--u));
        column-gap: calc(28 * var(--u));
        padding-inline: 0;
    }

    .p-news__ttl-text {
        max-width: none;
    }
}


/* =============================================================
   SP
   ============================================================= */
@media screen and (max-width: 768px) {

    /* ---------- 見出し ---------- */
    .p-news__head {
        padding-top: calc(15 * var(--u));
    }

    .p-news__bread {
        padding-inline: var(--inner-pad);
    }

    .p-news__ttl {
        margin-top: calc(53 * var(--u));
    }

    .p-news__ttl .c-secTtl__en {
        font-size: calc(36 * var(--u));
        letter-spacing: 0.0833em;   /* 3px */
    }

    .p-news__ttl .c-secTtl__ja {
        font-size: calc(14 * var(--u));
    }

    /* ---------- カテゴリー ----------
       4 つ並ぶと 375px に収まらないので横スクロールにし、
       右端に地色のグラデーションを重ねて続きがあることを示す */
    .p-news__cats {
        position: relative;
        display: block;
        margin-top: calc(51 * var(--u));
        padding-inline: 0;
    }

    .p-news__cats-label {
        display: none;
    }

    .p-news__cats-list {
        column-gap: calc(6 * var(--u));
        overflow-x: auto;
        /* デザインの枠は 38px。25px のタグの上下に余白を持たせ、
           右端のグラデーションもこの高さに合わせる */
        padding-block: calc(6 * var(--u)) calc(7 * var(--u));
        padding-inline: calc(var(--inner-pad) + 2 * var(--u));
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .p-news__cats-list::-webkit-scrollbar {
        display: none;
    }

    .p-news__cats::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: calc(65 * var(--u));
        background: linear-gradient(to right, rgba(244, 245, 247, 0), var(--color-light-gray) 70%);
        pointer-events: none;
    }

    /* ---------- 一覧 ---------- */
    .p-news__list {
        max-width: none;
        margin-top: calc(29 * var(--u));
        border-top: 0;
    }

    /* 日付とカテゴリーを上段、写真と見出しを下段に置く 2 段組。
       .p-news__body が display:contents なので、写真・日付・見出しが
       そのままグリッドの子になる。HTML の順番は写真が先なので、
       行と列は明示的に指定する。 */
    .p-news__link {
        display: grid;
        grid-template-columns: calc(118 * var(--u)) 1fr;
        column-gap: calc(15 * var(--u));
        align-items: start;
        padding: 0 0 calc(25 * var(--u));
    }

    .p-news__meta {
        grid-row: 1;
        grid-column: 1 / -1;
        column-gap: calc(22 * var(--u));
        margin-bottom: calc(20 * var(--u));
    }

    .p-news__thumb {
        grid-row: 2;
        grid-column: 1;
        align-self: start;
        aspect-ratio: 118 / 83;
    }

    .p-news__body {
        display: contents;
    }

    /* SP は写真の横に置くので、3 行まで見せる（PC は 2 行） */
    .p-news__ttl-text {
        grid-row: 2;
        grid-column: 2;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        max-width: none;
        margin-top: 0;
        font-size: calc(14 * var(--u));
        letter-spacing: 0;
        line-height: 2;
    }

    .p-news__item + .p-news__item .p-news__link {
        padding-top: calc(20 * var(--u));
    }

    .p-news__arrow {
        display: none;
    }

    /* SP はタップ後にズームが残らないよう動かさない（TOP の COMPANY PROFILE と同じ） */
    .p-news__link:hover .p-news__thumb img {
        transform: none;
    }

    .p-news__pager {
        max-width: none;
        margin-top: calc(37 * var(--u));
    }

    /* 送りは PC と同じ 40px ピッチ。列全体を中央に置く（375px で左右 59px） */
    .p-news__pager-list {
        justify-content: center;
    }

    /* ---------- 詳細 ---------- */
    .p-news__article {
        max-width: none;
    }

    .p-news--single .p-news__meta {
        margin-top: calc(47 * var(--u));
        column-gap: calc(22 * var(--u));
        margin-bottom: 0;
    }

    .p-news--single .p-news__date {
        font-size: calc(15 * var(--u));
        letter-spacing: 0.0667em;   /* 1px */
        line-height: calc(18 / 15);
    }

    .p-news__article-ttl {
        margin-top: calc(24 * var(--u));
        font-size: calc(22 * var(--u));
        letter-spacing: 0;
        line-height: calc(38 / 22);
    }

    .p-news__hero {
        margin-top: calc(30 * var(--u));
    }

    .p-news__hero img {
        aspect-ratio: 333 / 173;
    }

    .p-news__content {
        margin-top: calc(59 * var(--u));
        letter-spacing: 0;
    }

    .p-news__content h2 {
        margin-top: calc(48 * var(--u));
        font-size: calc(20 * var(--u));
        letter-spacing: 0;
        line-height: calc(35 / 20);
    }

    .p-news__content h3 { font-size: calc(18 * var(--u)); }
    .p-news__content h4 { font-size: calc(16 * var(--u)); }

    /* デザインでは左右 80px の中央寄せ */
    .p-news__foot {
        justify-content: center;
        margin-top: calc(34 * var(--u));
    }

    /* SP の CONTACT との間隔は c-contact 既定の 42px ではなく 80px */
    .p-news .c-contact {
        padding-top: calc(80 * var(--u));
    }

    .p-news__back {
        width: calc(215 * var(--u));
    }
}