/* ==========================================================================
   news-page.css — お知らせ一覧ページ専用
   ※ style.css → header.css の「後に」読み込むこと
   ※ よくある質問ページ（faq-addon.css）とトンマナを揃えています
   ========================================================================== */

/* --------------------------------------------------------------------------
   フォント設定：faq-addon.css と同一
   -------------------------------------------------------------------------- */
:root {
    --font-latin: "Avenir Next", Avenir, "Century Gothic";

    --font-jp: "Zen Kaku Gothic New",
               "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体",
               "Yu Gothic", "游ゴシック",
               "Hiragino Sans", "ヒラギノ角ゴシック",
               sans-serif;

    --font-base: var(--font-latin), var(--font-jp);

    /* カラートークンも faq-addon.css と同じ値 */
    --nw-ink:    #3c3518;
    --nw-text:   #6b6459;
    --nw-muted:  #8a857c;
    --nw-faint:  #aaa59e;
    --nw-navy:   #1e1b4b;
    --nw-plum:   #311042;
    --nw-line:   rgba(60, 53, 24, 0.12);
    --nw-card:   #fffdfa;
    --nw-grad:   linear-gradient(150deg, #1e1b4b 0%, #311042 100%);
    --nw-ease:   cubic-bezier(0.22, 0.9, 0.3, 1);
}

body,
button,
input,
select,
textarea {
    font-family: var(--font-base);
}

body {
    font-weight: 400;
    letter-spacing: 0.04em;
}

/* Montserrat を使っていた箇所を Avenir 系に置き換え（faq と同じ） */
.site-header-nav a,
.gnav-toggle,
.gnav-toggle-label,
.gnav-group-label,
.gnav-entry-num,
.news-page-label,
.news-entry-date,
.news-chip-count,
.news-year span,
.news-new,
.news-contact-label,
.news-copyright {
    font-family: var(--font-latin), sans-serif;
}

.news-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   ページ見出し
   トップページのセクションタイトルと同じ構造：
   大きな英字 ＋ 小さな日本語 ＋ 中央の区切り線。
   ページ見出しなので、セクションより一段大きくしています。
   ========================================================================== */
.news-page-head {
    margin-bottom: 34px;
    text-align: center;
}

.news-page-en {
    display: block;
    font-family: var(--font-latin), sans-serif;
    font-size: clamp(32px, 10vw, 46px);
    font-weight: 400;
    letter-spacing: 0.04em;
    text-indent: 0.04em;
    line-height: 1.15;
    color: var(--nw-navy);
}

.news-page-ja {
    display: block;
    margin-top: 10px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
    color: var(--nw-muted);
}

.news-page-title {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    line-height: inherit;
    color: inherit;
}

/* 区切り線。イラストの下・リード文の上に置くため、擬似要素ではなく実要素。 */
.news-page-rule {
    display: block;
    width: 100%;
    height: 1px;
    margin: 24px auto 22px;
    background-color: var(--nw-line);
}

.news-page-lead {
    margin: 0;
    padding: 0 4px;
    font-size: 13px;
    line-height: 2;
    letter-spacing: 0.04em;
    color: var(--nw-text);
    text-align: left;
}

/* ==========================================================================
   ページ見出しの文字の中を流れるグラデーション
   文字そのものを窓にして、その奥の色を動かします（background-clip: text）。
   紫の濃淡の中を、金色の光が一度だけ横切ります。画像は読み込みません。
   background-clip: text が使えない環境では、単色のまま表示されます。

   ■ GIFや画像に差し替えるとき
     このページの <h1> に style="--title-art: url('../img/xxx.gif')" を足すか、
     下の --title-art を書き換えてください。画像のときは
     --title-art-size: cover; --title-art-motion: none; も一緒に指定します。

   ■ 画像を用意しない場合（初期値）
     紫の濃淡がゆっくり流れます。読み込むファイルは増えません。
   ========================================================================== */
.news-page-en {
    --title-art: linear-gradient(100deg,
        #1e1b4b 0%, #311042 26%, #6f5aa8 44%, #a8842e 52%, #6f5aa8 60%, #311042 76%, #1e1b4b 100%);
    --title-art-size: 300% 100%;
    --title-art-motion: titleArt 9s linear infinite;
}

/* background-clip: text が使えない環境では、単色のまま表示されます */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .news-page-en {
        background-image: var(--title-art);
        background-size: var(--title-art-size);
        background-position: 0 50%;
        background-repeat: repeat-x;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        animation: var(--title-art-motion);
    }
}

/* 端と端が同じ色なので、1周ぶん動かすと継ぎ目が出ません */
@keyframes titleArt {
    from { background-position:    0 50%; }
    to   { background-position: -300% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .news-page-en { --title-art-motion: none; }
}

/* ==========================================================================
   見出しの下のイラスト
   BRUTUS の「考える人」と同じ位置づけ。ページの顔になる絵を置いて、
   ごく小さく動かします。

   絵は GIF を入れる前提なので、CSS 側では動かしません（is-still）。
   GIF 自体が動いているところに CSS の変形を重ねると、
   コマ送りと変形がずれてちらついて見えます。

   ■ 絵の差し替え
     <img> の src を変えるだけです。

   ■ 静止画に変えて CSS で動かしたい場合だけ、クラスを差し替えます
     is-squash … 縦に伸び縮み
     is-bob    … ゆっくり上下に浮く
     is-sway   … 左右にゆらぐ
   ========================================================================== */
.news-page-art {
    /* 絵ごとに変えたいときは、この1行を上書きしてください
       例）<div class="news-page-art is-still" style="--art-w:120px"> */
    width: var(--art-w, 100px);
    max-width: 62%;
    margin: 22px auto 0;
    line-height: 0;
}

.news-page-art img {
    display: block;
    width: 100%;
    height: auto;
    /* 下端を軸にすると、地面に立ったまま伸び縮みして見えます */
    transform-origin: 50% 100%;
}

.news-page-art.is-squash img { animation: artSquash 2.6s ease-in-out infinite; }
.news-page-art.is-bob    img { animation: artBob    3.4s ease-in-out infinite; }
.news-page-art.is-sway   img { animation: artSway   4.2s ease-in-out infinite; }
.news-page-art.is-still  img { animation: none; }

/* 縦に伸びたぶん横を縮める。体積が保たれて生き物っぽく見えます */
@keyframes artSquash {
    0%, 100% { transform: scale(1, 1); }
    30%      { transform: scale(0.965, 1.055); }
    62%      { transform: scale(1.03, 0.965); }
}

@keyframes artBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

@keyframes artSway {
    0%, 100% { transform: rotate(-2.5deg); }
    50%      { transform: rotate(2.5deg); }
}

@media (prefers-reduced-motion: reduce) {
    .news-page-art img { animation: none; }
}

/* 絵を入れていないときは枠ごと畳む（区切り線の上に空きが出ないように） */
.news-page-art:has(img:not([src])),
.news-page-art:has(img[src=""]) {
    display: none;
}


/* ==========================================================================
   カテゴリのチップ（faq-index-chip と同じ形）
   ========================================================================== */
.news-filter {
    margin: 30px 0 8px;
}

.news-filter-label {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--nw-muted);
}

.news-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.news-chips::-webkit-scrollbar {
    display: none;
}

.news-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: transparent;
    border: 1px solid rgba(60, 53, 24, 0.18);
    border-radius: 999px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--nw-muted);
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.news-chip:hover {
    border-color: rgba(60, 53, 24, 0.35);
}

.news-chip:active {
    transform: scale(0.96);
}

.news-chip.is-active {
    background: var(--nw-grad);
    border-color: transparent;
    color: #ffffff;
}

.news-chip-count {
    font-size: 10.5px;
    font-weight: 700;
    opacity: 0.7;
}

.news-result-count {
    margin: 14px 0 0;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--nw-muted);
    text-align: right;
}

/* ==========================================================================
   一覧本体
   ========================================================================== */
.news-list {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}

/* 年の見出し */
.news-year {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 34px 0 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--nw-faint);
}

.news-year:first-child {
    margin-top: 6px;
}

.news-year::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--nw-line);
}

/* 1件のカード */
.news-entry {
    position: relative;
    margin-bottom: 14px;
    padding: 20px 20px 18px;
    background: var(--nw-card);
    border: 1px solid var(--nw-line);
    border-radius: 12px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.news-entry-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.news-entry-date {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #a8842e;
}

.news-entry-cat {
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1;
    padding: 4px 8px;
    border: 1px solid rgba(60, 53, 24, 0.18);
    border-radius: 3px;
    color: var(--nw-muted);
    white-space: nowrap;
}

/* 「重要」だけトップページと同じ紫グラデ＋黄文字 */
.news-entry-cat[data-cat="重要"] {
    background: var(--nw-grad);
    border-color: transparent;
    color: #ffff00;
    font-weight: 700;
}

.news-new {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 3px;
    background-color: #ffff00;
    color: var(--nw-plum);
}

.news-entry-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 0.03em;
    color: var(--nw-ink);
}

.news-entry-body {
    margin: 9px 0 0;
    font-size: 13px;
    line-height: 1.95;
    letter-spacing: 0.03em;
    color: var(--nw-text);
}

.news-item-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #7b2cbf;
    text-decoration: none;
    touch-action: manipulation;
}

.news-item-link:hover {
    text-decoration: underline;
}

/* ハッシュで開かれた記事を一度だけ光らせる */
.news-entry.is-target {
    border-color: rgba(123, 44, 191, 0.5);
    box-shadow: 0 0 0 3px rgba(123, 44, 191, 0.1);
}

.news-empty {
    margin: 40px 0;
    padding: 30px 20px;
    border: 1px dashed var(--nw-line);
    border-radius: 12px;
    text-align: center;
    font-size: 13px;
    color: var(--nw-muted);
}

/* ==========================================================================
   スクロールフェードイン（faq-reveal と同じ挙動）
   ========================================================================== */
.news-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.6s ease var(--news-reveal-delay, 0ms),
        transform 0.6s var(--nw-ease) var(--news-reveal-delay, 0ms);
}

.news-reveal.is-revealed {
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   フッター（faq-contact と同じ組み）
   ========================================================================== */
.news-footer {
    margin-top: 20px;
}

.news-contact {
    max-width: 380px;
    margin: 54px auto 34px;
    padding-top: 34px;
    border-top: 1px solid var(--nw-line);
    text-align: center;
}

.news-contact-label {
    margin: 0 0 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.28em;
    color: var(--nw-faint);
}

.news-contact-text {
    margin: 0;
    font-size: 13px;
    line-height: 2;
    letter-spacing: 0.04em;
    color: var(--nw-text);
}

.news-line-btn {
    display: flex;
    width: 70%;
    margin: 26px auto 0;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background-color: #06C755;
    border-radius: 999px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
}

.news-back-home {
    margin: 26px 0 0;
    text-align: center;
}

.news-link {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #7b2cbf;
    text-decoration: none;
}

.news-link:hover {
    text-decoration: underline;
}

.news-copyright {
    margin-top: 30px;
    text-align: center;
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--nw-faint);
}

@media (prefers-reduced-motion: reduce) {
    .news-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==========================================================================
   下書きプレビューの表示（WordPress のエディタの「プレビュー」から開いたとき）
   ========================================================================== */
.cms-preview-note {
    margin: 0 0 22px;
    padding: 10px 14px;
    border-radius: 8px;
    background-color: #ffff00;
    color: var(--nw-plum);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 0.04em;
    text-align: center;
}

/* ==========================================================================
   お知らせ本文（ブロックエディタで書いた中身）
   ----------------------------------------------------------------------
   本文は cms.js の rich() を通ってから入ります。
   ブロックエディタの class（wp-block-list など）は rich() が落とすので、
   ここでは素の p / ul / ol / li に対してスタイルを当てています。

   本文の既定は line-height 1.95 ですが、箇条書きは1行が短いので
   同じ行間だと間延びします。リストの中だけ 1.7 に詰めています。
   ========================================================================== */
.news-entry-body {
    margin: 9px 0 0;
    font-size: 13px;
    line-height: 1.95;
    letter-spacing: 0.03em;
    color: var(--nw-text);
}

.news-entry-body > :first-child { margin-top: 0; }
.news-entry-body > :last-child  { margin-bottom: 0; }

.news-entry-body p {
    margin: 0 0 0.9em;
}

.news-entry-body p:last-child { margin-bottom: 0; }

/* --- 箇条書き（リストブロック）--- */
.news-entry-body ul,
.news-entry-body ol {
    margin: 10px 0 12px;
    padding-left: 1.3em;
}

.news-entry-body li {
    list-style-type: disc;        /* リストの頭の黒丸 */
    margin-top: 3px;
    line-height: 1.7;             /* 本文（1.95）より詰める */
}

.news-entry-body li:first-child { margin-top: 0; }

.news-entry-body ol li { list-style-type: decimal; }

/* 黒丸の色と大きさ。本文の文字色より濃くして箇条書きの頭を立てる */
.news-entry-body li::marker {
    color: var(--nw-ink);
    font-size: 0.85em;
}

/* 入れ子。2階層目は白丸にして親子が分かるようにする */
.news-entry-body li > ul,
.news-entry-body li > ol { margin: 3px 0 0; }
.news-entry-body li li   { list-style-type: circle; }

/* --- 見出しブロック（rich() が H1→H2、H5/H6→H4 に寄せます）--- */
.news-entry-body h2,
.news-entry-body h3,
.news-entry-body h4 {
    margin: 18px 0 6px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.03em;
    color: var(--nw-ink);
}

.news-entry-body h2 { font-size: 14.5px; }
.news-entry-body h3 { font-size: 13.5px; }
.news-entry-body h4 { font-size: 13px; }

/* --- そのほかのブロック --- */
.news-entry-body strong,
.news-entry-body b { font-weight: 700; color: var(--nw-ink); }

.news-entry-body a {
    color: #7b2cbf;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.news-entry-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.news-entry-body figure { margin: 14px 0; }

.news-entry-body figcaption {
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--nw-muted);
    text-align: center;
}

.news-entry-body blockquote {
    margin: 14px 0;
    padding: 2px 0 2px 12px;
    border-left: 2px solid var(--nw-line);
    color: var(--nw-muted);
}

.news-entry-body hr {
    margin: 18px 0;
    border: 0;
    border-top: 1px solid var(--nw-line);
}

.news-entry-body .cms-align-center { text-align: center; }
.news-entry-body .cms-align-right  { text-align: right; }