/* AppRise style.css v2025-12-26_01 - 対応プラットフォームのOSアイコンの黒背景余白（下ライン）を解消 */
/* AppRise style.css v2025-12-25_08 - 6ページブロック用ページネーション矢印（<< / >>）スタイル追加 */
/* AppRise 共通スタイル - SP ファースト */
/* AppRise style.css v2025-12-18_01 - 6ページブロック用ページネーション矢印（<< / >>）スタイル追加nav checkbox square, show search svg, restore push-down dropdown */
/* AppRise style.css v2025-12-13_08 - 詳細/各ページの「一覧にもどる」リンクをボタン化（検索ボタン同色・白文字・角丸5px・下線なし） */
/* AppRise style.css v2025-12-12_08 - 詳細タイトル左のアプリアイコンをSPでも確実に正方形固定（!importantで強制） */
/* AppRise style.css v2025-12-12_07 - SPで詳細タイトルのアプリアイコンが横長になる問題を修正（正方形固定 + object-fit を詳細側で強制） */
/* AppRise style.css v2025-12-12_06 - タイトル横サムネの正方形維持（object-fit）＋OSバッジリンク対応 */
/* AppRise style.css v2025-12-12_04 - 詳細画面に「アプリ紹介（long_desc）」セクション（区切り線付き）を追加 */
/* AppRise style.css v2025-12-12_03 - ヘッダーの虫眼鏡アイコンを assets/icon_search.svg（img表示）に対応 */
/* AppRise style.css v2025-12-12_02 - ハンバーガーメニューをヘッダー直下の全幅ドロップダウン（下コンテンツが下にずれる方式）に変更 */
/* AppRise style.css v2025-12-12_01 - ヘッダーの虫眼鏡/ハンバーガーアイコンのタップ領域を約40pxに拡大 */
/* AppRise style.css v2025-12-11_04 - ジャンル検索「ジャンル一覧」の見出しをTOPと同じテロップに統一 */
/* AppRise style.css v2025-12-11_03 - ブランドカラー #c71585 統一（ボタン・ジャンルアイコン hover） */
/* AppRise style.css v2025-12-10_08 - TOPカード左右余白5px＋カード間マージン5pxに再調整 */

/* AppRise style.css v2025-12-03_01 - ゲーム一覧の5枚キャプチャと日付表示を追加 */
/* AppRise style.css v2025-12-05_03 - ヘッダー検索アイコン＆ジャンル検索画面用スタイルを追加 */
/* AppRise style.css v2025-12-03_02 - ゲーム詳細の対応OSアイコン表示を追加 */
/* AppRise style.css v2025-12-03_03 - 対応OSアイコンサイズを240x88に変更＆テキスト調整 */
/* AppRise style.css v2025-12-03_04 - 全体フォントをNoto Sans JPに変更＆基本フォントサイズを拡大 */
/* AppRise style.css v2025-12-03_05 - 対応OSアイコンサイズを180x66に調整 */
/* AppRise style.css v2025-12-03_06 - 対応OSアイコンを縦並び＆160x60に最終調整 */
/* AppRise style.css v2025-12-03_07 - 詳細画面にサムネイル用スタイルを追加 */
/* AppRise style.css v2025-12-03_08 - 詳細タイトルに角丸サムネイルアイコンを表示するレイアウト調整 */
/* AppRise style.css v2025-12-05_01 - 安全性バッジ（高・中・注）用のタグスタイル追加 */
/* AppRise style.css v2025-12-04_01 - スクリーンショット5枚のサムネイルレイアウト調整（1枚目横長205px・2枚目以降縦長90px） */
/* AppRise style.css v2025-12-05_02 - スクリーンショット拡大モーダル用スタイルを追加 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");
:root {
    --ap-bg: #f5f5f7;
    --ap-surface: #ffffff;
    --ap-border: #e0e0e0;
    --ap-accent: #c71585;
    --ap-accent-dark: #c71585;
    --ap-text-main: #222222;
    --ap-text-sub: #666666;
    --ap-text-mute: #999999;
    --ap-tag-bg: #f0f0ff;
    --ap-tag-text: #333399;
    --ap-radius-lg: 12px;
    --ap-radius-md: 8px;
    --ap-shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.04);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ap-text-main);
    background: radial-gradient(circle at top, #ffe4e1 0, #f5f5f7 48%, #f5f5f7 100%);
}

a {
    color: #0066cc;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Header */

.ap-header {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    position: sticky;
    top: 0;
    z-index: 20;
}

.ap-header-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ap-logo {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    color: var(--ap-text-main);
    text-decoration: none;
}

.ap-logo-main {
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.03em;
}

.ap-logo-sub {
    font-size: 11px;
    color: var(--ap-text-sub);
}

.ap-nav-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    margin-left: auto;
    border: none;
    background: none;
    cursor: pointer;
    text-decoration: none;
    font-size: 24px;
    color: var(--ap-text-main);
}

.ap-nav-search-toggle:focus {
    outline: none;
}

.ap-nav-search-icon {
    display: inline-block;
    line-height: 1;
}



.ap-nav-search-toggle .ap-nav-search-img {
    width: 26px;
    height: 26px;
    display: block;
}

.ap-nav-toggle {
    border: none;
    background: transparent;
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
}

.ap-nav-toggle-bar {
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: var(--ap-text-main);
}

.ap-nav-toggle-label {
    font-size: 10px;
    color: var(--ap-text-sub);
}

.ap-nav-check {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.ap-global-nav {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    background: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: var(--ap-shadow-soft);
}

.ap-nav-check:checked + .ap-global-nav,
.ap-global-nav.is-open {
    max-height: 300px;
}

.ap-global-nav-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 10px 16px 14px;



    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ap-global-nav a {
    display: block;
    font-size: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f3f3f7;
    color: var(--ap-text-main);
}

.ap-global-nav a:hover {
    text-decoration: none;
    background: #ededf2;
}

/* Main layout */

.ap-main {
    max-width: 1080px;
    margin: 0 auto;
    padding: 16px 5px;
}

.ap-section {
    margin-bottom: 5px;
}

.ap-section-header {
    margin-bottom: 12px;
}

.ap-page-title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
}


.ap-section-detail .ap-page-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ap-section-detail .ap-page-title-thumb {
    flex: 0 0 56px !important;
    width: 56px !important;
    height: 56px !important;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
}
.ap-section-detail .ap-page-title-thumb .ap-game-thumb-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

.ap-section-detail .ap-page-title-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.ap-section-detail .ap-page-title-text {
    display: inline-block;
}
.ap-page-lead {
    margin: 0;
    font-size: 13px;
    color: var(--ap-text-sub);
}

/* Filter UI */

.ap-filter-toggle {
    width: 100%;
    margin: 12px 0;
    padding: 10px 12px;
    border-radius: var(--ap-radius-md);
    border: 1px solid var(--ap-border);
    background: rgba(255, 255, 255, 0.95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}

.ap-layout {
    display: block;
}

.ap-filter-panel {
    display: block;
    width: 100%;
    margin: 0 0 16px 0;
    padding: 12px;
    border-radius: var(--ap-radius-lg);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--ap-shadow-soft);
}

.ap-filter-panel.is-open {
    display: block;
}

.ap-filter-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ap-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ap-filter-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ap-text-sub);
}

.ap-input-text,
.ap-select {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--ap-border);
    font-size: 14px;
    outline: none;
    background: #ffffff;
}

.ap-input-text:focus,
.ap-select:focus {
    border-color: var(--ap-accent);
    box-shadow: 0 0 0 1px rgba(255, 95, 95, 0.2);
}

.ap-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
}

.ap-check {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--ap-text-main);
}

.ap-check input {
    margin: 0;
}

.ap-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.ap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.ap-btn-primary {
    background: linear-gradient(135deg, var(--ap-accent), var(--ap-accent-dark));
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(199, 21, 133, 0.35);
}

.ap-btn-primary:hover {
    text-decoration: none;
    background: var(--ap-accent-dark);
}

.ap-btn-ghost {
    background: #ffffff;
    color: var(--ap-text-main);
    border-color: var(--ap-border);
}

.ap-btn-ghost:hover {
    background: #f6f6f6;
    text-decoration: none;
}

/* Result */

.ap-result-area {
    display: block;
}

.ap-result-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: baseline;
    margin-bottom: 8px;
}

.ap-result-count {
    margin: 0;
    font-size: 13px;
}

.ap-result-count strong {
    font-size: 16px;
}

.ap-result-keyword {
    margin: 0;
    font-size: 12px;
    color: var(--ap-text-sub);
}

.ap-result-empty {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--ap-text-sub);
}

.ap-game-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ap-game-card {
    margin: 0;
}

.ap-game-card-link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--ap-radius-lg);
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.03);
    box-shadow: var(--ap-shadow-soft);
    color: inherit;
    text-decoration: none;
}


.ap-game-card-link:hover {
    text-decoration: none;
    border-color: rgba(255, 95, 95, 0.4);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.ap-game-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
}

.ap-game-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-bottom: 6px;
    font-size: 11px;
    color: var(--ap-text-sub);
}

.ap-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 999px;
    background: #f3f3f5;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.ap-tag-genre {
    background: var(--ap-tag-bg);
    color: var(--ap-tag-text);
}

.ap-tag-platform {
    background: #f7f7ff;
}

.ap-tag-publisher {
    background: #fff7e5;
}
.ap-tag-safety {
    font-weight: 600;
}

.ap-tag-safety-1 {
    background: #e6f7e9;
    color: #137333;
}

.ap-tag-safety-2 {
    background: #fff7e5;
    color: #8a6d3b;
}

.ap-tag-safety-3 {
    background: #fdecea;
    color: #a61b1b;
}


.ap-game-summary {
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--ap-text-main);
}


.ap-game-detail-thumb {
    width: 96px;
    height: 96px;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
    margin: 0 0 12px;
}

.ap-game-detail-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ap-game-ss-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 6px 0 4px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.ap-game-ss-row::-webkit-scrollbar {
    height: 4px;
}

.ap-game-ss-item {
    flex: 0 0 auto;
    border-radius: 8px;
    overflow: hidden;
    background: #000000;
}

.ap-game-ss-item.ap-ss-wide {
    width: 205px;
    height: 115px;
}

.ap-game-ss-item.ap-ss-tall {
    width: 90px;
    height: 160px;
}

.ap-game-ss-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* AppRise style.css v2025-12-05_02 - スクリーンショット拡大モーダル */
.ap-ss-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.ap-ss-modal[data-open="1"] {
    display: flex;
}

.ap-ss-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.ap-ss-modal-content {
    position: relative;
    max-width: min(960px, 92vw);
    max-height: 92vh;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    padding: 16px 44px;
}

.ap-ss-modal-inner {
    position: relative;
    overflow: hidden;
}

#ap-ss-modal-image {
    display: block;
    max-width: 100%;
    max-height: 80vh;
    height: auto;
    border-radius: 10px;
}

.ap-ss-modal-close {
    position: absolute;
    top: 8px;
    right: 12px;
    border: none;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #333333;
}

.ap-ss-modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    color: #333333;
}

.ap-ss-modal-prev {
    left: 8px;
}

.ap-ss-modal-next {
    right: 8px;
}

html.ap-ss-modal-open,
html.ap-ss-modal-open body {
    overflow: hidden;
}
.ap-game-date-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 0 0 6px;
    font-size: 11px;
    color: var(--ap-text-sub);
}

.ap-game-date {
    display: inline-flex;
    align-items: center;
}
.ap-game-stores {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
}

.ap-store-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: #e8f4ff;
    font-size: 11px;
    color: #0353a4;
}

.ap-game-detail-link {
    margin: 0;
    font-size: 12px;
    color: var(--ap-text-sub);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ap-game-detail-link::after {
    content: '›';
    font-size: 14px;
}

/* Detail page */

.ap-breadcrumb {
    margin: 0 0 6px;
    font-size: 12px;
    color: var(--ap-text-sub);
}

.ap-breadcrumb a {
    color: var(--ap-text-sub);
    text-decoration: underline;
    text-decoration-style: dotted;
}

.ap-section-detail .ap-page-title {
    margin-bottom: 10px;
}

.ap-game-detail {
    display: block;
    margin-top: 8px;
    padding: 12px;
    border-radius: var(--ap-radius-lg);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--ap-shadow-soft);
}

.ap-game-detail-main {
    margin-bottom: 16px;
}

.ap-game-detail-meta {
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}

.ap-game-detail-meta div {
    display: flex;
    gap: 8px;
}

.ap-game-detail-meta dt {
    min-width: 96px;
    font-weight: 600;
    color: var(--ap-text-sub);
}

.ap-game-detail-meta dd {
    margin: 0;
}




/* URLなど長い文字列が枠からはみ出ないように折り返し（詳細ページ） */
.ap-game-detail-meta dd {
    flex: 1;
    min-width: 0;
}
.ap-game-detail-meta dd,
.ap-game-detail-meta dd a {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.ap-detail-divider {
    border: 0;
    border-top: 1px solid var(--ap-border);
    margin: 12px 0;
}

.ap-game-intro {
    margin-top: 0;
}

.ap-sub-title-intro {
    margin-top: 0;
}

.ap-game-intro-text {
    font-size: 13px;
    line-height: 1.7;
    color: var(--ap-text-main);
    white-space: normal;
}


.ap-os-icons {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-right: 0;
}

/* OSストア公式バッジ画像は「画像自体に黒背景」が含まれるため、外側の黒背景は持たせず、
   画像の実寸に合わせて余白（下の黒ライン等）が出ないようにする */
.ap-os-icon {
    width: 160px;
    height: auto;
    border-radius: 0;
    overflow: hidden;
    background: transparent;
    display: inline-block;
}

.ap-os-icon img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.ap-os-link {
    display: block;
    width: 100%;
    height: auto;
    text-decoration: none;
    line-height: 0;
    font-size: 0;
}

.ap-os-label {
    vertical-align: middle;
}
.ap-sub-title {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
}

.ap-store-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ap-btn-store {
    width: 100%;
    justify-content: flex-start;
}

.ap-btn-appstore {
    background: #000000;
    color: #ffffff;
    border-color: #000000;
}

.ap-btn-googleplay {
    background: #00c853;
    color: #ffffff;
    border-color: #00c853;
}

.ap-btn-jpstore {
    background: #0044cc;
    color: #ffffff;
    border-color: #0044cc;
}

.ap-store-links-empty {
    font-size: 13px;
    color: var(--ap-text-sub);
}

.ap-back-list {
    margin-top: 16px;
    font-size: 13px;
}

.ap-link-back {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 5px;
    background: var(--ap-accent);
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
}

.ap-link-back:hover,
.ap-link-back:focus {
    opacity: 0.92;
    text-decoration: none;
}

.ap-inline-link {
    color: var(--ap-accent);
    text-decoration: underline;
    word-break: break-all;
}

/* Footer */

.ap-footer {
    margin-top: 40px;
    padding: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(255, 255, 255, 0.9);
}

.ap-footer-inner {
    max-width: 1080px;
    margin: 0 auto;
    font-size: 11px;
    color: var(--ap-text-sub);
    text-align: center;
}

.ap-footer-copy {
    margin: 0;
}

/* Desktop layout */

@media (min-width: 768px) {
    .ap-header-inner {
        padding: 12px 24px;
    }

    .ap-nav-toggle {
        display: none;
    }

    .ap-global-nav {
        max-height: none;
        overflow: visible;
        transition: none;
    }

    .ap-global-nav-inner {
        padding: 10px 24px 14px;
        background: rgba(255, 255, 255, 0.92);
        border-top: 1px solid rgba(0, 0, 0, 0.04);
        box-shadow: none;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        gap: 12px;
    }

    .ap-global-nav a {
        font-size: 13px;
        padding: 4px 8px;
        background: transparent;
        border-radius: 8px;
    }

    .ap-main {
        padding: 20px 24px 32px;
    }

    .ap-layout {
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }

    .ap-filter-toggle {
        display: none;
    }

    .ap-filter-panel {
    display: block;
    width: 100%;
    margin: 0 0 16px 0;
    padding: 12px;
    border-radius: var(--ap-radius-lg);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--ap-shadow-soft);
}

    .ap-result-area {
        flex: 1;
    }

    .ap-game-detail {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr);
        gap: 24px;
    }

    .ap-game-detail-main {
        margin-bottom: 0;
    }

    .ap-footer {
        padding: 18px 24px;
    }
}

/* App thumbnail on game cards */
.ap-game-thumb {
    position: relative;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: block;
    border-radius: 14px;
    background: radial-gradient(circle at top left, #ff80b5 0, #4f46e5 60%, #0ea5e9 100%);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
}

/* ランキング順位バッジ（サムネ左上） */
.ap-rank-badge {
    --ap-rank-ribbon: rgba(110, 110, 110, 0.95);
    position: absolute;
    top: 4px;
    left: 4px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
    background: linear-gradient(135deg, #bdbdbd 0%, #8e8e8e 100%);
    border: 2px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    z-index: 3;
}


/* ランキングリストでは順位バッジをアイコン外（左上）へ */
.ap-game-list-ranking .ap-game-thumb {
    overflow: visible;
}
.ap-game-list-ranking .ap-rank-badge {
    top: -10px;
    left: -10px;
}

/* リボン（簡易メダル風） */
.ap-rank-badge::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid var(--ap-rank-ribbon);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.14));
}

/* 1位：金 */
.ap-rank-1 {
    --ap-rank-ribbon: rgba(175, 121, 0, 0.95);
    color: #2b1b00;
    text-shadow: none;
    background: radial-gradient(circle at 30% 30%, #fff4b0 0%, #ffd86b 35%, #f3b11f 70%, #cc8a00 100%);
    border-color: rgba(255, 255, 255, 0.94);
}

/* 2位：銀 */
.ap-rank-2 {
    --ap-rank-ribbon: rgba(90, 98, 110, 0.92);
    color: #111827;
    text-shadow: none;
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #e9e9e9 38%, #bdbdbd 72%, #8b8b8b 100%);
    border-color: rgba(255, 255, 255, 0.94);
}

/* 3位：銅 */
.ap-rank-3 {
    --ap-rank-ribbon: rgba(122, 71, 34, 0.95);
    color: #2b1200;
    text-shadow: none;
    background: radial-gradient(circle at 30% 30%, #ffe1c2 0%, #f0b37d 40%, #c98349 72%, #8b4f24 100%);
    border-color: rgba(255, 255, 255, 0.94);
}

/* 4位以降（グレー） */
.ap-rank-default {
    --ap-rank-ribbon: rgba(110, 110, 110, 0.95);
    color: #ffffff;
    background: linear-gradient(135deg, #bdbdbd 0%, #8e8e8e 100%);
}

    .ap-game-thumb-image {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        border-radius: inherit;
    }


.ap-game-main {
    flex: 1;
    min-width: 0;
}

/* AppRise ジャンル検索ページ */
.ap-genre-search {
    max-width: 1080px;
    margin: 0 auto;
    padding: 12px 16px 24px;
}

.ap-genre-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.ap-genre-search-form {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
}

.ap-genre-search-input-wrap {
    flex: 1;
    background: #ffffff;
    border-radius: var(--ap-radius-md);
    border: 1px solid var(--ap-border);
    padding: 4px 8px;
    display: flex;
    align-items: center;
}

.ap-genre-search-input {
    border: none;
    background: transparent;
    width: 100%;
    font-size: 14px;
    padding: 6px 4px;
}

.ap-genre-search-input:focus {
    outline: none;
}

.ap-genre-search-cancel {
    border: none;
    background: none;
    color: var(--ap-accent);
    font-size: 14px;
    padding: 4px 8px;
}

.ap-genre-search-heading {
    font-size: 13px;
    color: var(--ap-text-sub);
    margin: 8px 0;
}

.ap-genre-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #ffffff;
    border-radius: var(--ap-radius-md);
    overflow: hidden;
    border: 1px solid var(--ap-border);
}

.ap-genre-list-item + .ap-genre-list-item {
    border-top: 1px solid var(--ap-border);
}

.ap-genre-list-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    text-decoration: none;
    color: var(--ap-text-main);
    font-size: 14px;
}

.ap-genre-list-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ap-genre-list-icon {
    font-size: 18px;
}

.ap-genre-list-label {
    font-size: 14px;
}

.ap-genre-list-arrow {
    font-size: 16px;
    color: var(--ap-text-sub);
}


/* ==============================
   トップ検索・お知らせ・ジャンル2列・新着アプリ
   ============================== */

.ap-section {
    padding: 16px 16px 0;
}

.ap-section-inner {
    max-width: 720px;
    margin: 0 auto;
}

/* トップ検索ボックス */
.ap-section-top-searchbox {
    padding-top: 5px;
}

.ap-top-search-form {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.ap-top-search-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #555555;
}

.ap-top-search-row {
    display: flex;
    gap: 8px;
}

.ap-top-search-input {
    flex: 1 1 auto;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid #dddddd;
    font-size: 14px;
}

.ap-top-search-input:focus {
    outline: none;
    border-color: #ff9bb3;
    box-shadow: 0 0 0 2px rgba(255, 155, 179, 0.35);
}

.ap-top-search-button {
    flex: 0 0 auto;
    padding: 10px 18px;
    border-radius: 999px;
    border: none;
    background: #c71585;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}


/* 新着情報・お知らせ */
.ap-section-news {
    margin-top: 5px;
}

.ap-news-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.ap-news-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.ap-section-title-sm {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}

.ap-news-all-button {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #dddddd;
    background-color: #ffffff;
    color: #777777;
}

.ap-news-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ap-news-footer {
    margin-top: 8px;
    text-align: right;
}


.ap-news-item + .ap-news-item {
    border-top: 1px dashed #f0d8d8;
}

.ap-news-item-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.ap-news-date {
    flex: 0 0 auto;
    font-size: 11px;
    color: #999999;
}

.ap-news-text {
    flex: 1 1 auto;
    font-size: 13px;
}

.ap-news-arrow {
    flex: 0 0 auto;
    font-size: 16px;
    color: #cccccc;
}

/* ジャンルから探す（2列ボタン） */
.ap-section-genre-quick {
    margin-top: 10px;
}
/* TOPセクション見出しテロップ（黒帯・フル幅） */
.ap-section-news .ap-section-title-sm,
.ap-section-genre-quick .ap-section-title,
.ap-section-genre-list .ap-section-title,
.ap-section-new-apps .ap-section-title,
.ap-section-ranking .ap-section-title {
    display: block;
    width: 100%;
    padding: 6px 10px;
    margin: 0 0 6px;
    border-radius: 3px;
    background: #000000;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;
}


.ap-section-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 12px;
}

.ap-genre-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ap-genre-chip {
    flex: 0 0 calc(50% - 4px);
    display: flex;
    align-items: center;
    justify-content: flex-start; /* アイコン＋テキストを左寄せ */
    gap: 8px;
    padding: 10px 8px;
    border-radius: 5px; /* 角丸5px */
    border: 1px solid #f0dede;
    background-color: #ffffff;
    font-size: 13px;
    text-align: left;
    text-decoration: none;
    color: #333333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.ap-genre-chip-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.ap-genre-icon-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
    transition: filter 0.15s ease;
}

.ap-genre-chip:hover {
    background-color: #f7efff; /* ほのかに紫がかった背景 */
}

.ap-genre-chip:hover .ap-genre-icon-img {
    /* モノクロPNGアイコンをブランドカラー #c71585 近辺に寄せるフィルタ */
    filter: invert(22%) sepia(96%) saturate(2311%) hue-rotate(308deg) brightness(90%) contrast(96%);
}


.ap-genre-chip-label {
    flex: 1 1 auto;
    line-height: 1.3;
}



.ap-genre-chip:active {
    transform: translateY(1px);
}

.ap-genre-empty {
    font-size: 13px;
    color: #777777;
}

/* ページネーション（□で囲まれた数字） */
.ap-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 14px 0 6px;
}

.ap-pagination-item {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ap-border);
    border-radius: 6px;
    background: #ffffff;
    color: var(--ap-text-main);
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
}

.ap-pagination-item:hover {
    background-color: #f7efff;
    text-decoration: none;
}

.ap-pagination-item.is-current {
    border-color: var(--ap-accent);
}

.ap-pagination-item.is-current strong {
    font-weight: 700;
}

/* 新着アプリ 5件カード */
.ap-section-new-apps {
    margin-top: 10px;
}

.ap-section-header-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.ap-newapps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ap-newapps-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.ap-newapps-link {
    display: block;
    padding: 14px 14px 12px;
    text-decoration: none;
    color: inherit;
}

.ap-newapps-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 6px;
}

.ap-newapps-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}

.ap-newapps-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background-color: #fff3f6;
    color: #cc6f8a;
    font-size: 11px;
}

.ap-newapps-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 11px;
    color: #777777;
}

.ap-newapps-date-label {
    font-weight: 500;
}

.ap-newapps-date {
    margin-right: 6px;
}

.ap-newapps-empty {
    font-size: 13px;
    color: #777777;
}

/* PC幅で少し余白を広げる */
@media (min-width: 768px) {
    .ap-section {
        padding: 24px 24px 0;
    }

    .ap-section-inner {
        max-width: 960px;
    }
}


/* 新着アプリ：カードレイアウト（検索結果と似た見た目） */
.ap-section-new-apps ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ap-section-new-apps ul li {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.03);
    font-size: 12px;
    line-height: 1.6;
    color: #555555;
}

.ap-section-new-apps ul li a:first-child {
    display: block;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 6px;
}



/* AppRise style.css v2025-12-10_10 - 新着アプリのグラデアイコンを検索結果カードと同じ正方形に統一 */
.ap-section-new-apps ul li a.ap-game-card-link:first-child {
    display: flex;
    align-items: flex-start;
}

/* 念のため、新着アプリのアイコンも56pxの正方形として固定 */
.ap-section-new-apps ul li a.ap-game-card-link:first-child .ap-game-thumb {
    flex: 0 0 56px;
    height: 56px;
}

/* AppRise style.css v2025-12-11_01 - 新着アプリカードの外側フレームを無効化（li 側を透明に） */
.ap-section-new-apps ul li {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0 0 16px;
}


/* --- Genre search pagination --- */
.ap-pagination{
    display:flex;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
    margin:16px 0 6px;
}


/* ページネーション：ブロック移動（<< / >>） */
.ap-pagination-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 8px;
  height:36px;
  font-weight:700;
  color:#7a1b58;
  text-decoration:none;
}
.ap-pagination-arrow:hover{
  text-decoration:underline;
}
.ap-pagebox{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:34px;
    height:34px;
    padding:0 10px;
    border:1px solid var(--ap-border);
    border-radius:8px;
    background:#fff;
    color:var(--ap-text-main);
    text-decoration:none;
    font-weight:600;
    line-height:1;
}
.ap-pagebox:hover{
    border-color:var(--ap-accent);
}
.ap-pagebox-active{
    border-color:var(--ap-accent);
}
.ap-pagebox-nav{
    min-width:auto;
}


/* ===== AppRise additions (mypage favorites layout + telop headings) =====
 * AppRise style.css v2025-12-25_08
 * Non-destructive: appended rules only.
 */

/* Mypage: align favorites list with heading (remove default UL indent) */
ul.ap-list{
  list-style:none;
  padding-left:0;
  margin-left:0;
}

/* Mypage: favorites as light cards with 3px gap */
ul.ap-list > li{
  background:#f5f5f5;
  border-radius:10px;
  padding:10px 12px;
  margin:0 0 3px 0; /* 3px gap */
}
ul.ap-list > li:last-child{
  margin-bottom:0;
}

/* Mypage black-telop headings (お気に入り一覧 / 登録情報変更)
   - Keep top-page telops untouched (separate selector) */
.ap-mypage-fav-title,
h1.ap-mypage-fav-title,
h2.ap-mypage-fav-title,
h3.ap-mypage-fav-title,
div.ap-mypage-fav-title{
  background:#000;
  color:#fff;
  font-weight:700;
  font-size:14px !important;
  line-height:1.15 !important;
  padding:10px 12px;
  border-radius:6px;
  margin:12px 0 10px;
  display:block;
}
.ap-mypage-fav-title *{
  font-size:inherit !important;
  line-height:inherit !important;
  font-weight:inherit !important;
  color:inherit !important;
}
/* ===== end additions ===== */