/* Disabled custom cursor */
.cursor { display: none !important; }
body, a, button { cursor: auto !important; }
a, button, [data-hover], .btn, [role="button"] { cursor: pointer !important; }


    .art-hero { padding: 9rem 2.5rem 4rem; max-width: var(--container); margin: 0 auto; position: relative; z-index: 1; }
    .art-hero__pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: rgba(9,111,200,.08); border-radius: var(--radius-pill); font-family: var(--f-en); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.24em; color: var(--c-brand); text-transform: uppercase; margin-bottom: 2rem; opacity: 0; animation: fadeIn 1s var(--ease-out) .2s forwards; }
    .art-hero__pill::before { content: ''; width: 0.5rem; height: 0.5rem; background: var(--c-brand); border-radius: 50%; box-shadow: 0 0 8px rgba(9,111,200,.6); animation: dotPulse 2s var(--ease-soft) infinite; }
    @keyframes fadeIn { to { opacity: 1; } }
    .art-hero__title { font-family: var(--f-ja-bold); font-weight: 900; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.4; letter-spacing: 0.04em; color: var(--c-text); margin-bottom: 1rem; }
    .art-hero__en { font-family: var(--f-en); font-weight: 700; font-style: italic; font-size: clamp(1.5rem, 4vw, 3rem); line-height: 1; letter-spacing: -0.04em; color: var(--c-text-mute); margin-top: 0.5rem; }
    .art-hero__lead { font-family: var(--f-ja-bold); font-weight: 700; font-size: clamp(1rem, 1.3vw, 1.1875rem); line-height: 1.9; letter-spacing: 0.08em; color: var(--c-text); max-width: 36em; margin-top: 2rem; }

    /* Feature article (大きな記事) */
    .art-feature { max-width: var(--container); margin: 0 auto 4rem; padding: 0 2.5rem; position: relative; z-index: 1; }
    .art-feature__card { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; background: var(--c-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-rest); overflow: hidden; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); cursor: auto; align-items: stretch; }
    .art-feature__card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
    .art-feature__visual { aspect-ratio: 5/4; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--c-brand-deep), var(--c-brand), var(--c-brand-2)); }
    /* featured_media (アイキャッチ) を背景表示するパターン。 子側にborder-radius明示。 CSS変数fallback必須。
       🚨 aspect-ratio:3/2 は align-items:stretch 時に本文が長いとカード高さに追従→幅が膨張しgridセル(1.1fr)を超過、本文に重なってタイトル左端が切れる崩れを起こす(2026-06-05 claude-code-support FEATUREDで発生)。
       対策: aspect-ratio:auto で幅をgridセルに固定し、高さはstretchに任せる(画像は背景coverでトリミング)。min-heightで短文記事時を保険。 */
    .art-feature__visual--img { aspect-ratio: auto; min-height: 22.5rem; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; border-radius: var(--radius-xl, 1.5rem) 0 0 var(--radius-xl, 1.5rem); transition: transform 1s var(--ease-out); }
    .art-feature__card:hover .art-feature__visual--img { transform: scale(1.04); }
    .art-feature__visual-pattern { position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 50%), radial-gradient(circle at 75% 70%, rgba(255,255,255,.12), transparent 50%); animation: featurePulse 6s var(--ease-soft) infinite; }
    @keyframes featurePulse { 0%,100% { opacity: 0.85; } 50% { opacity: 1; transform: scale(1.05); } }
    .art-feature__badge { position: absolute; top: 1.5rem; left: 1.5rem; padding: 0.5rem 1rem; background: rgba(255,255,255,.95); border-radius: 999px; font-family: var(--f-en); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.24em; color: var(--c-brand); text-transform: uppercase; backdrop-filter: blur(8px); }
    .art-feature__body { padding: 3.5rem 3.5rem 3.5rem 0; display: flex; flex-direction: column; justify-content: center; }
    .art-feature__cat { font-family: var(--f-en); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.32em; color: var(--c-brand); text-transform: uppercase; margin-bottom: 1rem; }
    .art-feature__title { font-family: var(--f-ja-bold); font-weight: 900; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.6; letter-spacing: 0.06em; color: var(--c-text); margin-bottom: 1.5rem; }
    .art-feature__lead { font-family: var(--f-ja); font-weight: 500; font-size: 0.9375rem; line-height: 2; letter-spacing: 0.06em; color: var(--c-text-sub); margin-bottom: 2rem; }
    .art-feature__meta { display: flex; align-items: center; gap: 1.25rem; font-family: var(--f-en); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; color: var(--c-text-mute); text-transform: uppercase; padding-top: 1.5rem; border-top: 1px solid var(--c-line); }
    .art-feature__meta-author { display: inline-flex; align-items: center; gap: 0.5rem; }
    .art-feature__meta-avatar { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: linear-gradient(135deg, var(--c-brand), var(--c-brand-2)); }

    /* Filter */
    .art-filter { max-width: var(--container); margin: 0 auto; padding: 0 2.5rem; position: relative; z-index: 1; }
    .art-filter__inner { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: center; padding: 1.5rem 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
    .art-filter__label { font-family: var(--f-en); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.32em; color: var(--c-text-mute); text-transform: uppercase; margin-right: 1.5rem; }
    .art-filter__btn { padding: 0.625rem 1.125rem; background: transparent; border: 1px solid var(--c-line); border-radius: var(--radius-pill); font-family: var(--f-ja-bold); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; color: var(--c-text-sub); cursor: auto; transition: background-color .3s, color .3s, border-color .3s; }
    .art-filter__btn:hover { border-color: var(--c-text); color: var(--c-text); }
    .art-filter__btn.is-active { background: var(--c-text); color: var(--c-bg); border-color: var(--c-text); }

    /* Grid */
    .art-list { padding: 4rem 2.5rem 6rem; max-width: var(--container); margin: 0 auto; position: relative; z-index: 1; }
    .art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
    .art-card { display: flex; flex-direction: column; cursor: auto; transition: transform .5s var(--ease-out); }
    .art-card.is-hidden { display: none; }
    .art-card:hover { transform: translateY(-6px); }
    .art-card__visual { aspect-ratio: 16/10; position: relative; overflow: hidden; border-radius: var(--radius-lg); margin-bottom: 1.5rem; }
    .art-card__visual-bg { position: absolute; inset: 0; transition: transform 1s var(--ease-out); }
    .art-card:hover .art-card__visual-bg { transform: scale(1.06); }
    .art-card__visual--1 .art-card__visual-bg { background: linear-gradient(135deg, var(--c-brand-deep), var(--c-brand)); }
    .art-card__visual--2 .art-card__visual-bg { background: linear-gradient(135deg, var(--c-brand), var(--c-brand-2)); }
    .art-card__visual--3 .art-card__visual-bg { background: linear-gradient(135deg, #BE4F2A, var(--c-accent)); }
    .art-card__visual--4 .art-card__visual-bg { background: linear-gradient(135deg, var(--c-accent), var(--c-brand-2)); }
    .art-card__visual--5 .art-card__visual-bg { background: linear-gradient(135deg, #0F1A33, var(--c-brand)); }
    .art-card__visual--6 .art-card__visual-bg { background: linear-gradient(135deg, var(--c-brand-2), #fff); }
    /* featured_media (アイキャッチ画像) を直接表示するパターン */
    .art-card__visual--img { background-size: cover; background-position: center; background-repeat: no-repeat; transition: transform 1s var(--ease-out); }
    .art-card:hover .art-card__visual--img { transform: scale(1.04); }
    .art-card__visual-pattern { position: absolute; inset: 0; background: radial-gradient(circle at 30% 70%, rgba(255,255,255,.18), transparent 60%); pointer-events: none; }
    .art-card__cat { position: absolute; top: 1rem; left: 1rem; padding: 0.375rem 0.875rem; background: rgba(255,255,255,.95); border-radius: 999px; font-family: var(--f-en); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em; color: var(--c-text); text-transform: uppercase; z-index: 1; }
    .art-card__date { font-family: var(--f-en); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; color: var(--c-text-mute); text-transform: uppercase; margin-bottom: 0.75rem; }
    .art-card__title { font-family: var(--f-ja-bold); font-weight: 900; font-size: 1.0625rem; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-text); margin-bottom: 0.875rem; transition: color .3s; }
    .art-card:hover .art-card__title { color: var(--c-brand); }
    .art-card__lead { font-family: var(--f-ja); font-weight: 500; font-size: 0.8125rem; line-height: 1.95; letter-spacing: 0.06em; color: var(--c-text-sub); }

    /* Pagination */
    .art-pagination { text-align: center; padding: 2rem 0; }
    .art-pagination__btn { display: inline-flex; align-items: center; gap: 0.75rem; padding: 1rem 1.75rem; background: transparent; border: 1.5px solid var(--c-text); border-radius: var(--radius-pill); font-family: var(--f-ja-bold); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; color: var(--c-text); cursor: auto; transition: background-color .35s, color .35s, transform .35s var(--ease-spring); position: relative; overflow: hidden; }
    .art-pagination__btn::before { content: ''; position: absolute; inset: 0; background: var(--c-text); transform: scaleX(0); transform-origin: right; transition: transform .55s var(--ease-out); z-index: 0; }
    .art-pagination__btn > * { position: relative; z-index: 1; }
    .art-pagination__btn:hover { color: var(--c-bg); transform: translateY(-3px); }
    .art-pagination__btn:hover::before { transform: scaleX(1); transform-origin: left; }

    /* CTA */
    .art-cta { padding: 4rem 2.5rem 10rem; max-width: var(--container); margin: 0 auto; }
    .art-cta__inner { padding: 6rem 4rem; background: linear-gradient(135deg, #0A0F1C 0%, #0F1A33 50%, #1F2D55 100%); border-radius: var(--radius-xl); text-align: center; color: #fff; position: relative; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(9,111,200,.20); }
    .art-cta__inner::before { content: ''; position: absolute; top: 20%; left: 50%; transform: translateX(-50%); width: 70%; height: 60%; background: radial-gradient(circle, rgba(118,183,237,.40), transparent 60%); filter: blur(60px); animation: ctaGlow 8s var(--ease-soft) infinite; pointer-events: none; }
    @keyframes ctaGlow { 0%,100% { opacity: 0.6; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.1); } }
    .art-cta__inner > * { position: relative; z-index: 1; }
    .art-cta__label { font-family: var(--f-en); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.32em; color: rgba(255,255,255,.7); text-transform: uppercase; margin-bottom: 2rem; display: inline-flex; align-items: center; gap: 0.875rem; }
    .art-cta__label::before, .art-cta__label::after { content: ''; display: block; width: 2rem; height: 1px; background: rgba(255,255,255,.4); }
    .art-cta__title { font-family: var(--f-ja-bold); font-weight: 900; font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1.5; letter-spacing: 0.04em; color: #fff; margin-bottom: 1.5rem; }
    .art-cta__title em { font-style: normal; color: var(--c-brand-2); }
    .art-cta__sub { font-family: var(--f-ja-bold); font-weight: 700; font-size: 0.9375rem; line-height: 2.1; letter-spacing: 0.08em; color: rgba(255,255,255,.85); max-width: 32em; margin: 0 auto 3rem; }
    .art-cta__actions { display: inline-flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
    .art-cta .btn { display: inline-flex; align-items: center; gap: 0.75rem; padding: 1rem 1.625rem; font-family: var(--f-ja-bold); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; border-radius: var(--radius-pill); position: relative; overflow: hidden; transition: transform .35s var(--ease-spring); cursor: auto; }
    .art-cta .btn--primary { background: #fff; color: var(--c-text); }
    .art-cta .btn--primary::after { content: '→'; transition: transform .4s var(--ease-spring); }
    .art-cta .btn--primary:hover { transform: translateY(-3px); }
    .art-cta .btn--primary:hover::after { transform: translateX(5px); }
    .art-cta .btn--secondary { background: rgba(255,255,255,.08); color: #fff; border: 1.5px solid rgba(255,255,255,.4); backdrop-filter: blur(8px); }
    .art-cta .btn--secondary:hover { background: #fff; color: var(--c-text); border-color: #fff; transform: translateY(-3px); }

    @media (max-width: 1024px) {
      .art-hero, .art-feature, .art-filter, .art-list, .art-cta { padding-left: 1.5rem; padding-right: 1.5rem; }
      .art-feature__card { grid-template-columns: 1fr; }
      .art-feature__body { padding: 2rem 2rem 2.5rem; }
      .art-grid { grid-template-columns: repeat(2, 1fr); }
      /* モバイル: visual が上、body が下に縦並び → 角丸は上だけ。
         🚨 デスクトップ用の aspect-ratio:auto + min-height:22.5rem(本文と同高さにする設定)は、縦積みになるスマホでは
            横長アイキャッチ(1200×630)が縦に間延び/中央クロップされて文字が潰れる(2026-06-05)。スマホは元の3/2比率に戻す。 */
      .art-feature__visual--img { aspect-ratio: 3/2; min-height: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
    }
    @media (max-width: 768px) {
      .art-grid { grid-template-columns: 1fr; }
      .art-cta__inner { padding: 4rem 1.5rem; }
    }