@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

/* =========================================================
   hazeru.jp トップ：白を基調に、青を主役、オレンジを差し色に
   ジュークボックスの世界観（白＋青＋細い線＋色つきボタン）に合わせた版
   ※ トップページ専用。ほかのページの style.css には影響しません。
   ========================================================= */
:root {
    --ink: #1c2738;
    --ink-soft: #55657a;
    --line: #dfe7f1;
    --bg: #ffffff;
    --bg-soft: #f5f8fc;

    /* アクセント：線・ボタン用 / 文字用（濃いめ） / 淡い面の色 */
    --blue: #2f6fdb;     --blue-ink: #1f57b8;   --blue-pale: #eef4fd;
    --cyan: #11a6c8;     --cyan-ink: #0b7c96;   --cyan-pale: #e8f6fa;
    --orange: #f08a24;   --orange-ink: #b45a08; --orange-pale: #fff3e2;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

.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;
}

/* ---------- バナー ---------- */
.hero { position: relative; }
.hero-img {
    display: block;
    width: 100%;
    height: clamp(180px, 30vw, 380px);
    object-fit: cover;
    object-position: 50% 50%;
}
/* バナーの下に、3色の細いライン（サイトの色の見本） */
.hero::after {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--blue) 0 34%, var(--cyan) 34% 67%, var(--orange) 67% 100%);
}

/* ---------- 本文 ---------- */
.container {
    max-width: 760px;
    margin: 0 auto;
    padding: 2rem 1.25rem 2.5rem;
}

.intro {
    margin: 0 0 2.4rem;
    padding: 0.2rem 0 0.2rem 1rem;
    border-left: 3px solid var(--blue);
}
.intro p {
    margin: 0;
    font-size: 1.02rem;
    color: var(--ink);
    letter-spacing: 0.02em;
}

.categories { display: flex; flex-direction: column; gap: 2.8rem; }

.category-box { --accent: var(--blue); --accent-ink: var(--blue-ink); --accent-pale: var(--blue-pale); }
.category-box--novel { --accent: var(--blue);   --accent-ink: var(--blue-ink);   --accent-pale: var(--blue-pale); }
.category-box--music { --accent: var(--cyan);   --accent-ink: var(--cyan-ink);   --accent-pale: var(--cyan-pale); }
.category-box--game  { --accent: var(--orange); --accent-ink: var(--orange-ink); --accent-pale: var(--orange-pale); }

/* ---------- カテゴリの見出し ---------- */
.category-box h2 {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0 0 1.1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--line);
    font-weight: 700;
}
.category-box h2::after {            /* 線の左側だけ、アクセント色で太く */
    content: "";
    position: absolute;
    left: 0; bottom: -1px;
    width: 56px; height: 3px;
    background: var(--accent);
}
.category-icon-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; flex-shrink: 0;
    border-radius: 10px;
    background: var(--accent-pale);
    color: var(--accent-ink);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, white);
}
.category-icon-badge svg { width: 1.35rem; height: 1.35rem; }
.cat-title { display: flex; flex-direction: column; line-height: 1.25; }
.cat-en {
    font-family: 'Space Grotesk', 'Zen Kaku Gothic New', sans-serif;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em;
    color: var(--accent-ink);
}
.cat-ja { font-size: 1.12rem; color: var(--ink); letter-spacing: 0.03em; }

/* ---------- 作品カード ---------- */
.work-list { display: flex; flex-direction: column; gap: 0.8rem; }

.work-item {
    position: relative;
    display: flex; align-items: center; gap: 1rem;
    text-decoration: none; color: inherit;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-pale) 70%, white), var(--accent-pale));
    border: 1px solid color-mix(in srgb, var(--accent) 22%, white);
    border-left: 4px solid var(--accent);          /* アクセントのライン */
    border-radius: 8px;
    padding: 0.95rem 1.05rem 0.95rem 1.1rem;
    box-shadow: 0 1px 2px rgba(20, 40, 80, 0.05);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.work-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(20, 40, 80, 0.10);
    border-color: color-mix(in srgb, var(--accent) 45%, white);
    border-left-color: var(--accent);
}
.work-item:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(20, 40, 80, 0.08); transition-duration: 0.05s; }
.work-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.work-item-text { flex: 1; min-width: 0; }
.work-item h3 { margin: 0 0 0.1rem; font-size: 1.04rem; font-weight: 700; color: var(--ink); letter-spacing: 0.01em; }
.work-desc { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }

/* タグ：角を小さく、線は細く */
.work-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.35rem 0 0.55rem; }
.work-tag {
    font-size: 0.7rem; font-weight: 500; letter-spacing: 0.02em;
    padding: 0.1rem 0.55rem;
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--accent) 38%, white);
    background: rgba(255, 255, 255, 0.75);
    color: var(--accent-ink);
    white-space: nowrap;
}
.work-tag--emphasis { background: var(--accent); border-color: var(--accent); color: #fff; }

/* 行動ボタン（読む／聴く／遊ぶ）：ジュークボックスの▶のように色をしっかり */
.work-action {
    display: inline-flex; align-items: center; gap: 0.25rem; flex-shrink: 0;
    padding: 0.42rem 0.8rem 0.42rem 1rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em;
    white-space: nowrap;
    box-shadow: 0 3px 8px color-mix(in srgb, var(--accent) 35%, transparent);
    transition: box-shadow 0.16s ease, filter 0.16s ease;
}
.work-arrow { width: 1.05rem; height: 1.05rem; flex-shrink: 0; transition: transform 0.16s ease; }
.work-item:hover .work-action { filter: brightness(1.06); box-shadow: 0 5px 12px color-mix(in srgb, var(--accent) 45%, transparent); }
.work-item:hover .work-arrow { transform: translateX(3px); }

.work-sublink {
    align-self: flex-start;
    margin: -0.25rem 0 0.2rem 0.3rem;
    font-size: 0.85rem; font-weight: 500;
    color: var(--accent-ink);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    transition: border-color 0.15s ease;
}
.work-sublink:hover { border-bottom-color: var(--accent); }

/* ノベルの中のゲーム寄りの1本：オレンジ */
.work-item--hybrid { --accent: var(--orange); --accent-ink: var(--orange-ink); --accent-pale: var(--orange-pale); }

/* ---------- フッター ---------- */
.site-footer {
    margin-top: 3rem; padding-top: 1.4rem;
    border-top: 1px solid var(--line);
    text-align: center; font-size: 0.88rem;
}
.footer-nav { margin-bottom: 0.6rem; }
.footer-nav a { color: var(--ink-soft); text-decoration: none; }
.footer-nav a:hover { color: var(--blue-ink); text-decoration: underline; }
.footer-nav .divider { margin: 0 0.6rem; color: var(--line); }
.copyright { margin: 0; color: #8a97a8; font-family: 'Space Grotesk', sans-serif; letter-spacing: 0.04em; }

/* ---------- サムネイル付きカード ---------- */
.work-thumb {
    grid-area: thumb;
    align-self: start;
    margin: 0;
    overflow: hidden;
    border-radius: 6px;
    aspect-ratio: 3 / 2;
    background: #0e1424;
    box-shadow: inset 0 0 0 1px rgba(20, 40, 80, 0.08);
}
.work-thumb img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}
.work-item:hover .work-thumb img { transform: scale(1.05); }

.work-item.has-thumb {
    display: grid;
    grid-template-columns: 11.5rem minmax(0, 1fr);
    grid-template-areas:
        "thumb text"
        "thumb action";
    grid-template-rows: 1fr auto;
    column-gap: 1rem;
    row-gap: 0.6rem;
    align-items: start;
}
.work-item.has-thumb .work-item-text { grid-area: text; }
.work-item.has-thumb .work-action { grid-area: action; justify-self: end; }

/* ---------- ピックアップ（NEW作品の大きなカード） ---------- */
.feature {
    --accent: var(--orange); --accent-ink: var(--orange-ink); --accent-pale: var(--orange-pale);
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 0 0 2.6rem;
    padding: 0.9rem;
    text-decoration: none;
    color: inherit;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-pale) 70%, white), var(--accent-pale));
    border: 1px solid color-mix(in srgb, var(--accent) 28%, white);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(20, 40, 80, 0.10);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.feature:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(20, 40, 80, 0.16); }
.feature:active { transform: translateY(0); transition-duration: 0.05s; }
.feature:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.feature-media {
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 554 / 450;
    background: #0b0f1e;
    box-shadow: inset 0 0 0 1px rgba(20, 40, 80, 0.08);
}
.feature-media img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.feature:hover .feature-media img { transform: scale(1.04); }

.feature-body { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.feature-label {
    margin: 0;
    display: flex; align-items: center; gap: 0.55rem;
    font-family: 'Space Grotesk', 'Zen Kaku Gothic New', sans-serif;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em;
    color: var(--accent-ink);
}
.feature-title { margin: 0; font-size: 1.3rem; line-height: 1.4; font-weight: 700; color: var(--ink); letter-spacing: 0.01em; }
.feature .work-tags { margin: 0; }
.feature-lead { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }
.feature .work-action { align-self: flex-start; margin-top: 0.3rem; font-size: 0.95rem; padding: 0.55rem 1rem 0.55rem 1.2rem; }
.feature:hover .work-action { filter: brightness(1.06); box-shadow: 0 5px 12px color-mix(in srgb, var(--accent) 45%, transparent); }
.feature:hover .work-arrow { transform: translateX(3px); }

@media (min-width: 640px) {
    .feature { grid-template-columns: 300px minmax(0, 1fr); gap: 1.4rem; padding: 1.1rem; align-items: center; }
}

/* サムネイル付きカード：スマホでは、画像を上に大きく */
@media (max-width: 520px) {
    .work-item.has-thumb {
        grid-template-columns: 1fr;
        grid-template-areas:
            "thumb"
            "text"
            "action";
        grid-template-rows: auto;
        row-gap: 0.7rem;
    }
    .feature { margin-bottom: 2.2rem; }
    .feature-title { font-size: 1.2rem; }
}

/* ---------- スマホ ---------- */
@media (max-width: 520px) {
    .container { padding: 1.5rem 1rem 2rem; }
    .work-item { flex-direction: column; align-items: stretch; gap: 0.7rem; }
    .work-action { align-self: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
    .work-item, .work-arrow, .work-action { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
    .work-thumb img, .feature, .feature-media img { transition: none; }
}


/* =========================================================
   コンパクト表示：作品一覧をアイコンサイズに（作品が増えても見やすく）
   ========================================================= */
.work-list { gap: 0.6rem; }
.work-item,
.work-item.has-thumb {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    grid-template-areas: "thumb text action";
    grid-template-rows: auto;
    column-gap: 0.9rem; row-gap: 0;
    align-items: center;
    padding: 0.7rem 0.9rem 0.7rem 0.7rem;
}
.work-item .work-thumb {
    grid-area: thumb; align-self: center;
    aspect-ratio: 1 / 1; border-radius: 10px;
}
.work-item .work-item-text { grid-area: text; }
.work-item .work-action,
.work-item.has-thumb .work-action { grid-area: action; justify-self: end; align-self: center; }
.work-item h3 { font-size: 1rem; line-height: 1.4; margin-bottom: 0.15rem; }
.work-item .work-tags { margin: 0.1rem 0 0.3rem; }
.work-item .work-tag:nth-child(n+4) { display: none; }          /* タグは3つまで */
.work-desc {
    font-size: 0.85rem; line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 画像がない作品：カテゴリ色のアイコンタイル */
.work-thumb--ph {
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-pale);
    color: var(--accent-ink);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, white);
}
.work-thumb--ph svg { width: 2rem; height: 2rem; }

@media (max-width: 520px) {
    .work-item,
    .work-item.has-thumb {
        grid-template-columns: 3.75rem minmax(0, 1fr) auto;
        grid-template-areas: "thumb text action";
        column-gap: 0.7rem; align-items: center;
        padding: 0.6rem 0.7rem 0.6rem 0.6rem;
    }
    .work-thumb--ph svg { width: 1.6rem; height: 1.6rem; }
    .work-item .work-tag:nth-child(n+3) { display: none; }        /* スマホは2つまで */
    /* ボタンは矢印だけの丸に（カード全体がタップできる） */
    .work-item .work-action { width: 2.2rem; height: 2.2rem; padding: 0; justify-content: center; font-size: 0; gap: 0; }
    .work-item .work-arrow { width: 1.2rem; height: 1.2rem; }
}