/* news-single.css */

.news-single {
    max-width: 797px;
    margin: 0 auto;
    padding: 77px 0 100px;
}

/* パンくずは本文の左端(285px)には揃っておらず、そこから90px左（195px）から
   始まる（Figma実測）。中央寄せの入れ子で再現しようとすると親の幅指定に
   影響されやすいため、素直に負のmargin-leftで直接ずらす */
.news-single__breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    margin: 0 0 30px -90px;
    gap: 7px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    color: #000;
}

.news-single__breadcrumb a,
.news-single__breadcrumb-sep {
    flex-shrink: 0;
    color: #000;
    text-decoration: none;
}

.news-single__breadcrumb a:hover {
    text-decoration: underline;
}

/* 現在のページ名（タイトル）が長い場合、改行せずギリギリの文字数で省略する */
.news-single__breadcrumb-current {
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.news-single__category {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 10px;
    padding: 0 10px;
    height: 27px;
    border-radius: 3px;
    background: #17bae5;
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.32px;
}

/* 見た目だけのタグにしたいので、カテゴリーアーカイブへのリンクとしては機能させない */
.news-single__category a {
    color: inherit;
    text-decoration: none;
    pointer-events: none;
}

.news-single__title {
    margin: 0 0 17px;
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 34px;
    font-weight: 700;
    line-height: 42px;
    letter-spacing: 1.36px;
}

.news-single__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
}

.news-single__tags a {
    background: #e5e5e5;
    border-radius: 3px;
    padding: 1px 8px;
    color: #444;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    text-decoration: none;
    pointer-events: none;
}

.news-single__tags a::before {
    content: "#";
    color: #17bae5;
}

.news-single__thumbnail {
    margin: 0 0 42px;
}

.news-single__thumbnail img {
    display: block;
    width: 797px;
    height: 400px;
    object-fit: cover;
}

/* 「日時」「場所」「内容」「主催・お問合せ」は本文（wp:post-content）内で
   編集者が見出し＋段落で自由に入力する運用。タイトルがh1のため、見出しブロックの
   デフォルト階層（h2）に合わせてh2をこのデザインにする。見出しには下線
   (border-bottom)を引き、見出し直後の最初の段落だけ少し間隔を空ける。見出しが無い
   連続した段落（「内容」欄の複数行など）はmargin:0で詰めて表示する */
.news-single__content h2 {
    margin: 42px 0 15px;
    padding: 0 0 12px;
    border-bottom: 1.5px solid #17bae5;
    color: #212121;
    opacity: 0.9;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 24px;
    font-weight: 500;
}

.news-single__content h2:first-child {
    margin-top: 0;
}

.news-single__content p {
    margin: 0;
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 32px;
}

/* プライバシーポリシーページと同じ配色・ホバー挙動（水色+下線、ホバーで下線が消えて少し透過） */
.news-single__content a {
    color: #008cd5;
    text-decoration: underline;
    transition: opacity 0.2s ease;
}

.news-single__content a:hover {
    text-decoration: none;
    opacity: 0.7;
}

/* .wp-block-list側の margin:0 (下の方で指定) より詳細度を上げる必要があるため、
   リスト側を対象にする2つは.wp-block-listクラスも含めたセレクタにしている */
.news-single__content p + p,
.news-single__content ul + p,
.news-single__content ol + p,
.news-single__content p + ul.wp-block-list,
.news-single__content p + ol.wp-block-list,
.news-single__content ul.wp-block-list + ol.wp-block-list,
.news-single__content ol.wp-block-list + ul.wp-block-list,
.news-single__content ul.wp-block-list + ul.wp-block-list,
.news-single__content ol.wp-block-list + ol.wp-block-list {
    margin-top: 15px;
}

/* リストブロックは通常のp要素より大きく表示されるため、選択できる
   バリエーション（通常のリスト／チェックマークリスト等）すべてに対して
   文字サイズをp要素と揃える */
.news-single__content .wp-block-list {
    margin: 0;
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 32px;
}

.news-single__content .wp-block-list li {
    margin-top: 0;
    font-size: 18px;
    line-height: 32px;
}

/* テーブルブロックもp要素と文字サイズを揃える */
.news-single__content .wp-block-table {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 32px;
}

.news-single__content .wp-block-table td,
.news-single__content .wp-block-table th {
    font-size: 18px;
    line-height: 32px;
}

.news-single__content .wp-block-gallery {
    margin: 40px 0;
}

/* ギャラリーが連続する時だけ、間隔を20pxにする。最初のギャラリーのmargin-top、
   最後のギャラリーのmargin-bottomは40pxのまま変えない
   （マージンは隣接要素間で大きい方に収束するため、上下どちらも20pxにしておく） */
.news-single__content .wp-block-gallery:has(+ .wp-block-gallery) {
    margin-bottom: 20px;
}

.news-single__content .wp-block-gallery + .wp-block-gallery {
    margin-top: 20px;
}

.news-single__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 51px;
    margin-top: 30px;
}

/* ボタン自体の見た目（角丸ピル・枠線・ホバー等）はcomponents/button.cssの
   .pill-button（＋一覧に戻る用の.pill-button--dark）を共用する。
   ここではこのページ固有のサイズだけ上書きする */
.news-single__back {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.news-single__back .pill-button {
    width: 230px;
    height: 62px;
}

/* 782px〜1279px：PC版(1366px基準)のサイズ感をvwでそのまま縮小 */
@media (max-width: 1279px) {
    .news-single {
        max-width: 58.346vw;
        padding: 5.637vw 0 7.321vw;
    }

    .news-single__breadcrumb {
        margin: 0 0 2.196vw -6.588vw;
        gap: 0.512vw;
        font-size: 0.878vw;
    }

    .news-single__category {
        margin-bottom: 0.732vw;
        padding: 0 0.732vw;
        height: 1.976vw;
        border-radius: 0.22vw;
        font-size: 1.171vw;
        letter-spacing: -0.023vw;
    }

    .news-single__title {
        margin-bottom: 1.245vw;
        font-size: 2.489vw;
        line-height: 3.075vw;
        letter-spacing: 0.1vw;
    }

    .news-single__tags {
        gap: 0.586vw;
        margin-bottom: 1.464vw;
    }

    .news-single__tags a {
        border-radius: 0.22vw;
        padding: 0.073vw 0.586vw;
        font-size: 1.171vw;
        line-height: 1.903vw;
    }

    .news-single__thumbnail {
        margin-bottom: 3.075vw;
    }

    .news-single__thumbnail img {
        width: 58.346vw;
        height: 29.283vw;
    }

    .news-single__content h2 {
        margin: 3.075vw 0 1.098vw;
        padding-bottom: 0.878vw;
        font-size: 1.757vw;
    }

    .news-single__content p,
    .news-single__content .wp-block-list,
    .news-single__content .wp-block-list li,
    .news-single__content .wp-block-table,
    .news-single__content .wp-block-table td,
    .news-single__content .wp-block-table th {
        font-size: 1.318vw;
        line-height: 2.343vw;
    }

    .news-single__content p + p,
    .news-single__content ul + p,
    .news-single__content ol + p,
    .news-single__content p + ul.wp-block-list,
    .news-single__content p + ol.wp-block-list,
    .news-single__content ul.wp-block-list + ol.wp-block-list,
    .news-single__content ol.wp-block-list + ul.wp-block-list,
    .news-single__content ul.wp-block-list + ul.wp-block-list,
    .news-single__content ol.wp-block-list + ol.wp-block-list {
        margin-top: 1.098vw;
    }

    .news-single__content .wp-block-gallery {
        margin: 2.928vw 0;
    }

    .news-single__content .wp-block-gallery:has(+ .wp-block-gallery) {
        margin-bottom: 1.464vw;
    }

    .news-single__content .wp-block-gallery + .wp-block-gallery {
        margin-top: 1.464vw;
    }

    .news-single__actions {
        gap: 3.734vw;
        margin-top: 2.196vw;
    }

    .news-single__back {
        gap: 1.464vw;
    }

    .news-single__back .pill-button {
        width: 16.837vw;
        height: 4.539vw;
    }
}

/* 375px(Figmaスマホ実測値)基準：782pxまでvwで滑らかに拡大縮小する。
   602〜782pxはヘッダーがまだposition:fixedのまま（header.css参照）で通常フロー上は
   高さ0扱いのため、ヘッダー実高さ(51px)+隙間(11px)のフルオフセットをここで確保する。
   600px以下でヘッダーがstickyに変わった時の分は下の@media(max-width:600px)で減らす */
@media (max-width: 782px) {
    .news-single {
        max-width: 100%;
        padding: 16.533vw 4.267vw 14.933vw;
    }

    /* スマホのFigmaではパンくずは本文の左端と揃っており、PC版のような
       -90pxのズラしは無いため、ここで打ち消しておく */
    .news-single__breadcrumb {
        margin: 0 0 7.2vw;
        gap: 0.8vw;
        font-size: 2.933vw;
        letter-spacing: -0.029vw;
        line-height: 4.48vw;
    }

    .news-single__category {
        margin-bottom: 2.411vw;
        padding: 0 2.179vw;
        height: 6.123vw;
        border-radius: 0.735vw;
        font-size: 3.643vw;
        line-height: 4.531vw;
        letter-spacing: -0.073vw;
    }

    .news-single__title {
        margin-bottom: 2.933vw;
        font-size: 6.4vw;
        line-height: 9.067vw;
        letter-spacing: 0.256vw;
    }

    .news-single__tags {
        gap: 1.911vw;
        margin-bottom: 5.229vw;
    }

    .news-single__tags a {
        border-radius: 0.716vw;
        padding: 0 1.821vw;
        font-size: 3.643vw;
        line-height: 5.733vw;
    }

    .news-single__thumbnail {
        margin-bottom: 9.067vw;
    }

    .news-single__thumbnail img {
        width: 91.355vw;
        height: 60.903vw;
    }

    .news-single__content h2 {
        margin: 8.4vw 0 3vw;
        padding-bottom: 2.4vw;
        font-size: 4.8vw;
    }

    .news-single__content p,
    .news-single__content .wp-block-list,
    .news-single__content .wp-block-list li,
    .news-single__content .wp-block-table,
    .news-single__content .wp-block-table td,
    .news-single__content .wp-block-table th {
        font-size: 4vw;
        line-height: 7.467vw;
    }

    .news-single__content p + p,
    .news-single__content ul + p,
    .news-single__content ol + p,
    .news-single__content p + ul.wp-block-list,
    .news-single__content p + ol.wp-block-list,
    .news-single__content ul.wp-block-list + ol.wp-block-list,
    .news-single__content ol.wp-block-list + ul.wp-block-list,
    .news-single__content ul.wp-block-list + ul.wp-block-list,
    .news-single__content ol.wp-block-list + ol.wp-block-list {
        margin-top: 3.333vw;
    }

    .news-single__content .wp-block-gallery {
        margin: 2.933vw 0;
    }

    /* ギャラリー同士の間隔を、ギャラリー内の画像同士のgap(実測19.2px)と揃える。
       375px基準(19.2/375*100)で計算 */
    .news-single__content .wp-block-gallery:has(+ .wp-block-gallery) {
        margin-bottom: 5.12vw;
    }

    .news-single__content .wp-block-gallery + .wp-block-gallery {
        margin-top: 5.12vw;
    }

    /* ギャラリー内の各画像は幅がインラインstyleで指定されているため、
       !importantで上書きして1カラム（縦並び）にする */
    .news-single__content .wp-block-gallery .wp-block-image {
        width: 100% !important;
    }

    .news-single__actions {
        gap: 6.133vw;
        margin-top: 8vw;
    }

    .news-single__back {
        gap: 5.333vw;
        justify-content: center;
    }

    .news-single__back .pill-button {
        width: 48.267vw;
        height: 11.733vw;
    }
}

/* 600px以下：header.css側でヘッダーがposition:stickyに切り替わり、
   通常フロー上の高さ(51px)を持つようになるため、上のpaddingからその分を差し引き
   隙間(11px)だけ残す */
@media (max-width: 600px) {
    .news-single {
        padding-top: 2.933vw;
    }
}