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

/* --------------------------------------------------------------------------
   フォント設定：Avenir（欧文）＋ Zen Kaku Gothic New／游ゴシック（和文）
   ※ member-map-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);

     /* Q/Aバッジ用。カテゴリ番号のSVGと同じ書体
       ★ Adobe Fonts に追加した場合は "din-condensed" のような
         キット指定の名前を先頭に足してください */
    --font-din: "din-condensed", "DIN Condensed", "DIN Alternate",
                var(--font-latin), sans-serif;

    /* このページのカラートークン */
    --faq-ink:      #3c3518;   /* 本文の濃い色 */
    --faq-text:     #6b6459;   /* 通常テキスト */
    --faq-muted:    #8a857c;   /* 補足テキスト */
    --faq-faint:    #aaa59e;   /* さらに薄い補足 */
    --faq-navy:     #1e1b4b;
    --faq-plum:     #311042;
    --faq-line:     rgba(60, 53, 24, 0.12);
    --faq-card:     #fffdfa;
    --faq-grad:     linear-gradient(150deg, #1e1b4b 0%, #311042 100%);
}

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

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

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

/* スクリーンリーダー用ラベル */
.faq-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;
}


/* --------------------------------------------------------------------------
   ページ見出し
   -------------------------------------------------------------------------- */
.faq-page-head {
    margin-bottom: 28px;
    text-align: center;
}

.faq-page-label {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.28em;
    color: var(--faq-muted);
}

.faq-page-title {
    margin: 0 0 22px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.5;
    color: var(--faq-navy);
    position: relative;
}

.faq-page-title::after {
    content: "";
    display: block;
    width: 30px;
    height: 1px;
    margin: 16px auto 0;
    background: var(--faq-grad);
}

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

.faq-page-note {
    margin: 16px 0 0;
    padding: 12px 14px;
    background: rgba(60, 53, 24, 0.04);
    border-radius: 10px;
    font-size: 11.5px;
    line-height: 1.9;
    letter-spacing: 0.03em;
    color: var(--faq-muted);
    text-align: left;
}

.faq-page-note b {
    color: var(--faq-ink);
    font-weight: 700;
}

/* 蛍光ペン風マーカー（メンバー一覧の .mm-marker と同じ） */
.faq-marker {
    background: linear-gradient(transparent 62%, #ffff00 62%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 0 1px;
    font-weight: 700;
}


/* --------------------------------------------------------------------------
   検索窓
   -------------------------------------------------------------------------- */
.faq-search {
    margin-bottom: 28px;
}

.faq-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.faq-search-icon {
    position: absolute;
    left: 15px;
    width: 16px;
    height: 16px;
    color: var(--faq-faint);
    pointer-events: none;
    transition: color 0.2s ease;
}

.faq-search-wrap:focus-within .faq-search-icon {
    color: #7b2cbf;
}

.faq-search-input {
    width: 100%;
    padding: 14px 42px;
    font-size: 16px;          /* iOSでの自動ズーム防止のため16px以上 */
    font-family: inherit;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--faq-ink);
    background: #ffffff;
    border: 1px solid rgba(60, 53, 24, 0.18);
    border-radius: 26px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq-search-input::placeholder {
    color: #b7b2a8;
    font-weight: 400;
}

.faq-search-input:focus {
    border-color: #7b2cbf;
    box-shadow: 0 0 0 3px rgba(123, 44, 191, 0.14);
}

/* ブラウザ標準の×は自前ボタンと重なるので消す */
.faq-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.faq-search-clear {
    position: absolute;
    right: 12px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 15px;
    line-height: 1;
    color: var(--faq-muted);
    background: rgba(60, 53, 24, 0.08);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease;
}

.faq-search-clear:hover {
    background: rgba(60, 53, 24, 0.16);
}

.faq-search-clear[hidden] { display: none; }

/* --- よく検索されるキーワード --- */
.faq-tags {
    margin-top: 14px;
}

.faq-tags-label {
    display: block;
    margin-bottom: 8px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--faq-faint);
}

.faq-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.faq-tag {
    appearance: none;
    padding: 6px 13px;
    background: transparent;
    border: 1px solid rgba(60, 53, 24, 0.18);
    border-radius: 999px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--faq-muted);
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease,
                border-color 0.25s ease, transform 0.15s ease;
}

.faq-tag:hover { border-color: rgba(60, 53, 24, 0.35); }
.faq-tag:active { transform: scale(0.96); }

.faq-tag.is-active {
    background: var(--faq-grad);
    border-color: transparent;
    color: #ffffff;
    font-weight: 600;
}

.faq-result-count {
    margin: 12px 4px 0;
    min-height: 16px;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--faq-muted);
    text-align: right;
}

.faq-result-count b {
    color: #311042;
    font-weight: 700;
}


/* --------------------------------------------------------------------------
   カテゴリ一覧（アンカーリンク）
   横1行のチップ。入りきらないぶんは横スクロールします。
   ※ メンバー一覧ページの .mm-filter-bar と同じ考え方
   -------------------------------------------------------------------------- */
.faq-index {
    margin-bottom: 28px;
}

.faq-index[hidden] { display: none; }

.faq-index-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 11px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--faq-muted);
    white-space: nowrap;
}

.faq-index-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--faq-line);
}

/* .container の左右パディングを打ち消して画面端まで流す
   （端で切れている見え方が「まだ続く」というヒントになる） */
.faq-index-chips {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    margin: 0 -24px;
    padding: 2px 24px 14px;
    border-bottom: 1px solid var(--faq-line);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.faq-index-chips::-webkit-scrollbar { display: none; }

@media (max-width: 600px) {
    .faq-index-chips {
        margin: 0 -16px;
        padding: 2px 16px 14px;
    }
}

.faq-index-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-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--faq-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.25s ease, color 0.25s ease,
                border-color 0.25s ease, transform 0.15s ease;
}

.faq-index-chip:hover {
    border-color: rgba(60, 53, 24, 0.35);
    color: var(--faq-ink);
}

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

/* スクロール中のカテゴリ（faq-page.js が付与） */
.faq-index-chip.is-current {
    background: var(--faq-grad);
    border-color: transparent;
    color: #ffffff;
    font-weight: 700;
}

.faq-index-chip-count {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--faq-faint);
}

.faq-index-chip.is-current .faq-index-chip-count {
    color: rgba(255, 255, 255, 0.72);
}


/* --------------------------------------------------------------------------
   カテゴリブロック
   -------------------------------------------------------------------------- */
.faq-cat {
    margin-bottom: 30px;
}

.faq-cat[hidden] { display: none; }

.faq-cat-head {
    position: relative;
    overflow: hidden;
    padding: 15px 20px 16px;
    background: var(--faq-grad);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-bottom: none;
    border-radius: 15px 15px 0 0;
    color: #f4ede0;
}

/* アクセントカラーのぼかし（右上） */
.faq-cat-glow {
    position: absolute;
    top: -70px;
    right: -50px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--faq-accent, #9d4edd) 0%, transparent 70%);
    opacity: 0.32;
    filter: blur(6px);
    pointer-events: none;
}

.faq-cat-num {
    position: relative;
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--faq-accent, #9d4edd);
}

.faq-cat-title {
    position: relative;
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.4;
    background: linear-gradient(90deg, #ffffff 10%, var(--faq-accent, #e0c3fc) 95%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.faq-cat-body {
    padding: 2px 16px;
    background: var(--faq-card);
    border: 1px solid rgba(60, 53, 24, 0.11);
    border-top: none;
    border-radius: 0 0 15px 15px;
}

@media (max-width: 400px) {
    .faq-cat-body { padding: 2px 12px; }
}

/* カテゴリ一覧へ戻る */
.faq-back-index {
    display: inline-block;
    margin: 12px 0 0 2px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--faq-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.faq-back-index:hover { color: #311042; }


/* --------------------------------------------------------------------------
   Q&A アコーディオン
   -------------------------------------------------------------------------- */
.faq-item {
    border-bottom: 1px solid var(--faq-line);
    transition: background 0.3s ease;
}

.faq-item:last-of-type { border-bottom: none; }

.faq-item[hidden] { display: none; }

/* 質問（トリガー） */
.faq-q {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 16px 2px;
    cursor: pointer;
    list-style: none;
}

.faq-q::-webkit-details-marker { display: none; }

.faq-q:hover .faq-q-text { opacity: 0.65; }

.faq-q-mark,
.faq-a-mark {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: var(--font-din);
    font-size: 15px;          /* 幅が狭い書体なので大きめに */
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    padding-top: 1px;         /* 光学的な中央合わせ */
}

.faq-q-mark {
    background: var(--faq-grad);
    color: #ffffff;
}

.faq-a-mark {
    background: transparent;
    border: 1px solid rgba(60, 53, 24, 0.25);
    color: var(--faq-muted);
}

.faq-q-text {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.65;
    letter-spacing: 0.03em;
    color: var(--faq-ink);
    transition: opacity 0.2s ease;
}

/* ＋／− アイコン */
.faq-q-icon {
    position: relative;
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    margin-top: 6px;
}

.faq-q-icon::before,
.faq-q-icon::after {
    content: "";
    position: absolute;
    background-color: var(--faq-muted);
    transition: transform 0.3s ease, opacity 0.25s ease;
}

.faq-q-icon::before {
    top: 6px;
    left: 0;
    width: 13px;
    height: 1.5px;
}

.faq-q-icon::after {
    top: 0;
    left: 6px;
    width: 1.5px;
    height: 13px;
}

.faq-item[open] .faq-q-icon::before { transform: rotate(180deg); }
.faq-item[open] .faq-q-icon::after  { transform: rotate(90deg); opacity: 0; }

.faq-item[open] .faq-q-text { color: #311042; }

/* 回答 */
.faq-a {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 0 2px 20px 2px;
    animation: faqFadeIn 0.35s ease forwards;
}

.faq-a-body {
    flex: 1;
    min-width: 0;
}

.faq-a-body p {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.95;
    letter-spacing: 0.03em;
    color: var(--faq-muted);
}

.faq-a-body p:last-child { margin-bottom: 0; }

.faq-a-body b {
    font-weight: 700;
    color: var(--faq-ink);
}

.faq-a-body ul {
    margin: 0 0 10px;
    padding-left: 1.1em;
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--faq-muted);
}

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

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

@keyframes faqFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 検索ヒット箇所のハイライト */
.faq-hl {
    background: linear-gradient(transparent 58%, #ffff00 58%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    color: inherit;
    font-weight: inherit;
}


/* --------------------------------------------------------------------------
   検索結果ゼロ件
   -------------------------------------------------------------------------- */
.faq-no-result {
    margin: 10px 0 0;
    padding: 36px 20px;
    background: rgba(60, 53, 24, 0.03);
    border: 1px dashed rgba(60, 53, 24, 0.18);
    border-radius: 14px;
    text-align: center;
}

.faq-no-result[hidden] { display: none; }

.faq-no-result-title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--faq-ink);
}

.faq-no-result-text {
    margin: 0 0 18px;
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--faq-muted);
}

.faq-no-result-reset {
    appearance: none;
    padding: 10px 22px;
    background: var(--faq-grad);
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(49, 16, 66, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.faq-no-result-reset:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(49, 16, 66, 0.26);
}


/* --------------------------------------------------------------------------
   フッター（お問い合わせ）
   -------------------------------------------------------------------------- */
.faq-contact {
    max-width: 380px;
    margin: 54px auto 34px;
    padding-top: 34px;
    border-top: 1px solid var(--faq-line);
    text-align: center;
}

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

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

.faq-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: 50px;
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
}

.faq-back-home {
    margin: 22px 0 0;
}

.faq-copyright {
    font-size: 11px;
    color: var(--faq-faint);
    letter-spacing: 0.15em;
    text-align: center;
}


/* --------------------------------------------------------------------------
   スクロールフェードイン（faq-page.js が is-revealed を付与）
   ※ member-map-addon.css の .mm-reveal と同じ動き
   -------------------------------------------------------------------------- */
.faq-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--faq-reveal-delay, 0ms);
    will-change: opacity, transform;
}

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

/* 検索中は表示アニメを待たずに出す */
.faq-searching .faq-reveal {
    opacity: 1;
    transform: none;
    transition: none;
}

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

/* キーボード操作時のフォーカスを見えるように */
.faq-q:focus-visible,
.faq-index-card:focus-visible,
.faq-tag:focus-visible,
.faq-link:focus-visible,
.faq-back-index:focus-visible {
    outline: 2px solid #7b2cbf;
    outline-offset: 3px;
    border-radius: 6px;
}


.faq-cat-num {
    position: relative;
    display: block;
    width: auto;
    height: 24px;
    margin: 0 0 8px -1px;
}

/* トップページと同じフォントで矢印を描画する。
   faq-addon.css が button の font-family を上書きしているため、
   ここで style.css の body と同じスタックに戻す */
.scroll-top-btn {
    font-family: 'Montserrat', "Zen Kaku Gothic New",
                 "Yu Gothic Medium", "游ゴシック Medium", YuGothic,
                 "Hiragino Sans", sans-serif;
    letter-spacing: 0;
}

@media (max-width: 480px) {
    .scroll-top-btn,
    body.is-pwa .scroll-top-btn,
    body.is-line .scroll-top-btn {
        bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
        right: 14px !important;
    }
}


/* ==========================================================================
   ページ見出し
   トップページのセクションタイトルと同じ構造：
   大きな英字 ＋ 小さな日本語 ＋ 中央の区切り線。
   ページ見出しなので、セクションより一段大きくしています。
   ========================================================================== */
.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; }
}
}

/* ==========================================================================
   WordPress 対応で追加
   ========================================================================== */

/* キーワードの欄は、登録がないとき・ヒットしないときは丸ごと隠す */
.faq-tags[hidden] {
    display: none !important;
}

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