@charset "UTF-8";

/* ===========================================================
   JAII ブロック本文の補正（1.2.0）
   設計: 30_specs/editable-content.md §4
   jaii.css は変更しない。標準ブロック（グループ・段落・見出し・ボタン・区切り）の
   出力と、jaii.css が前提にしているモックアップのマークアップとの差だけをここで埋める。
   パターン（patterns/*.php）が付けるクラスと対になっている。
   =========================================================== */

/* ----- グループの子要素に自動で付く上余白を打ち消す -----
   theme.json の blockGap を null にしているので通常は出ないが、WordPress 側の既定が変わった場合に
   カード（.cards > .card）の2枚目以降だけ下にずれるのを防ぐ。下余白は jaii.css の指定を残すため触らない。 */
.is-layout-flow > *,.is-layout-constrained > *{margin-block-start:0}

/* ----- ボタン（ブロックスタイル is-style-jaii-*） ----- */
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:14px}
.wp-block-button .wp-block-button__link{display:inline-block;font-family:inherit;line-height:inherit;text-decoration:none;white-space:nowrap}

/* 塗り（旧 .btn-hero） */
.wp-block-button.is-style-jaii-primary .wp-block-button__link{background:var(--blue);color:#fff;font-weight:700;font-size:16px;padding:15px 34px;border:0;border-radius:999px;box-shadow:0 6px 18px rgba(22,104,199,.28);transition:transform .15s,background .2s}
.wp-block-button.is-style-jaii-primary .wp-block-button__link:hover{background:var(--blue-deep);color:#fff;transform:translateY(-1px)}

/* 白地・青枠（旧 .btn-ghost） */
.wp-block-button.is-style-jaii-ghost .wp-block-button__link{background:#fff;color:var(--blue);font-weight:700;font-size:16px;padding:15px 34px;border:1.5px solid var(--blue);border-radius:999px;transition:background .2s}
.wp-block-button.is-style-jaii-ghost .wp-block-button__link:hover{background:var(--blue-tint);color:var(--blue)}

/* 白（濃色の上。旧 .btn-white） */
.wp-block-button.is-style-jaii-white .wp-block-button__link{background:#fff;color:var(--blue-deep);font-weight:700;font-size:15px;padding:14px 32px;border:0;border-radius:999px;transition:opacity .2s}
.wp-block-button.is-style-jaii-white .wp-block-button__link:hover{opacity:.9;color:var(--blue-deep)}

/* 線（旧 .btn-outline） */
.wp-block-button.is-style-jaii-outline .wp-block-button__link{background:transparent;color:var(--blue);font-weight:700;font-size:15px;padding:13px 32px;border:1.5px solid var(--blue);border-radius:999px;transition:background .2s,color .2s}
.wp-block-button.is-style-jaii-outline .wp-block-button__link:hover{background:var(--blue);color:#fff}

/* ----- セクション見出し（.sec-head の英字ラベルを段落で組んだ場合） ----- */
/* jaii.css の body.home .sec-head p（説明文用）が英字ラベルにも当たるので打ち消す */
body.home .sec-head p.en{color:var(--blue);margin-top:0;max-width:none}

/* ----- メッセージ（区切りブロックを .rule として使う） ----- */
body .message hr.wp-block-separator.rule{border:0;width:44px;height:3px;background:var(--blue);border-radius:2px;margin:0 auto 26px;opacity:1}

/* ----- メディアカード（グループはリンクにできないため、見出しのリンクをカード全体に広げる） ----- */
body.home .media-card{position:relative}
body.home .media-card h3 a{color:inherit}
body.home .media-card h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
body.home .media-card p.tag{font-size:11px;opacity:.85}

/* ----- 入会フロー（番号は段落内の太字で書く） ----- */
body.home .join .wp-block-buttons{margin-top:24px}
body.home .join .wp-block-button.is-style-jaii-white .wp-block-button__link{padding:14px 34px;font-size:16px}
body.home .flow-step p{display:flex;gap:12px;align-items:center;font-size:14px;opacity:1}
body.home .flow-step strong{font-family:var(--font-latin);font-size:13px;font-weight:700;background:#fff;color:var(--blue-deep);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}

/* ----- 入会CTA（同期パターン cta-join） ----- */
.cta-wrap{padding-bottom:8px}

/* ----- スマホ幅：寄附バナーのボタンを旧レイアウト（グリッドで横幅いっぱい）に合わせる ----- */
@media (max-width:900px){
body.home .donate .wp-block-button{width:100%}
body.home .donate .wp-block-button .wp-block-button__link{display:block;text-align:left}
}

/* ----- メディアカード：X（1.2.1） ----- */
body.home .m-x{background:linear-gradient(145deg,#2B3440,#0B0F14)}
/* カードが4枚のときはPC幅で4列にする（3枚のときは従来どおり3列） */
/* 1.2.2：4列だと見出しが折り返す（例「ジャイコミチャンネル」）ため、4列は1100px以上に限り見出しを18pxに。901〜1099pxは2列×2段 */
@media (min-width:901px){
body.home .media-grid:has(> :nth-child(4)){grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1100px){
body.home .media-grid:has(> :nth-child(4)){grid-template-columns:repeat(4,1fr)}
body.home .media-grid:has(> :nth-child(4)) .media-card h3{font-size:18px}
}