/* =========================================================
   Rakuten Affiliate Template
   PHP 8.x Responsive Theme
========================================================= */

:root{

    --primary:#bf0000;
    --primary-hover:#a00000;

    --text:#333333;
    --sub:#666666;

    --line:#dddddd;

    --bg:#f5f6f8;
    --card:#ffffff;

    --radius:8px;

    --shadow:
        0 2px 8px rgba(0,0,0,.05);
}

/* =========================================================
   Reset
========================================================= */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    font-size:16px;
    scroll-behavior:smooth;
}

body{
    margin:0;
    padding:0;
    background:var(--bg);
    color:var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Hiragino Sans",
        "Yu Gothic",
        Meiryo,
        sans-serif;

    line-height:1.7;
}

/* =========================================================
   Base
========================================================= */

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

a:hover{
    text-decoration:underline;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

.container{
    max-width:1200px;
    margin:0 auto;
    padding:20px;
}

/* =========================================================
   Header
========================================================= */

.site-header{
    background:var(--primary);
    color:#ffffff;
    padding:20px;
}

.site-header h1{
    margin:0;
    font-size:2rem;
}

.site-header a{
    color:#ffffff;
}

.site-description{
    margin-top:10px;
    opacity:.9;
}

/* =========================================================
   Navigation
========================================================= */

.global-nav{
    background:#ffffff;
    border-bottom:1px solid var(--line);
}

.global-nav ul{
    list-style:none;

    margin:0;
    padding:10px;

    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.global-nav li{
    margin:0;
    padding:0;
}

.global-nav a{
    display:block;

    padding:8px 12px;

    background:#f7f7f7;

    border-radius:4px;

    color:#333;
}

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

/* =========================================================
   Search
========================================================= */

.search-box{
    background:#ffffff;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    margin-bottom:20px;

    padding:20px;
}

.search-form{
    display:flex;
    flex-wrap:wrap;

    gap:15px;

    align-items:flex-end;
}

.search-row{
    flex:1;
    min-width:220px;
}

.search-row label{
    display:block;

    margin-bottom:5px;

    font-weight:bold;
}

.search-row input,
.search-row select{
    width:100%;

    padding:12px;

    border:1px solid #cccccc;

    border-radius:4px;
}

.search-submit{
    min-width:180px;
}

/* =========================================================
   Button
========================================================= */

button,
.buy-button{

    display:inline-block;

    background:var(--primary);

    color:#ffffff;

    border:none;

    border-radius:4px;

    padding:14px 24px;

    font-weight:bold;

    text-align:center;

    cursor:pointer;
}

button:hover,
.buy-button:hover{

    background:var(--primary-hover);

    color:#ffffff;

    text-decoration:none;
}

/* =========================================================
   Page Title
========================================================= */

.page-title{

    margin-bottom:20px;

    padding:15px;

    background:#ffffff;

    border-radius:var(--radius);

    box-shadow:var(--shadow);
}

.page-title h2{

    margin:0;

    font-size:1.5rem;
}

.page-title p{

    margin:8px 0 0;

    color:var(--sub);
}

/* =========================================================
   Product List
========================================================= */

.item{

    display:flex;

    gap:20px;

    background:var(--card);

    padding:15px;

    margin-bottom:15px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);
}

.item-image{

    width:180px;

    flex-shrink:0;
}

.item-body{

    flex:1;
}

.item h3{

    margin-top:0;

    font-size:1.15rem;
}

.item-price{

    color:var(--primary);

    font-size:1.8rem;

    font-weight:bold;

    margin:10px 0;
}

.item-review{

    color:var(--sub);

    font-size:.9rem;
}

.item-shop{

    color:var(--sub);

    margin-top:5px;
}

/* =========================================================
   Product Detail
========================================================= */

.item-detail{

    background:#ffffff;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:20px;
}

.item-detail-image{

    max-width:400px;

    margin:0 auto;
}

.item-detail-price{

    text-align:center;

    color:var(--primary);

    font-size:2rem;

    font-weight:bold;

    margin:20px 0;
}

.item-info{

    margin:20px 0;
}

.item-info dl{

    display:grid;

    grid-template-columns:160px 1fr;

    gap:10px;
}

.item-info dt{

    font-weight:bold;
}

/* =========================================================
   Genre Menu
========================================================= */

.genre-menu{

    background:#ffffff;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:20px;

    margin-top:20px;
}

.genre-menu h2{
    margin-top:0;
    margin-bottom:15px;
    padding-left:10px;
    border-left:4px solid var(--primary);
}

.genre-menu ul{
    list-style:none;
    padding:0;
    margin:0;

    display:grid;
    grid-template-columns:
        repeat(auto-fill,minmax(180px,1fr));

    gap:10px;
}

.genre-menu li{
    margin:0;
}

.genre-menu a{
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:64px;

    padding:12px;

    border-radius:12px;

    background:#ffffff;

    border:1px solid #e5e7eb;

    box-shadow:
        0 2px 6px rgba(0,0,0,.05);

    text-decoration:none;

    color:#333333;

    font-weight:bold;

    text-align:center;

    transition:
        transform .2s,
        box-shadow .2s,
        border-color .2s;
}

.genre-menu a:hover{
    text-decoration:none;

    border-color:#93c5fd;

    box-shadow:
        0 6px 14px rgba(0,0,0,.08);

    transform:
        translateY(-2px);

    background:#ffffff;
}

.genre-menu a.active{
    background:var(--primary);
    color:#ffffff;
    border-color:var(--primary);

    box-shadow:
        0 6px 14px rgba(
            191,
            0,
            0,
            .25
        );
}

.genre-menu a.active:hover{
    background:var(--primary);
    color:#ffffff;
    transform:none;
}

/* =========================================================
   Notice
========================================================= */

.notice{

    background:#fffbe6;

    border:1px solid #f5db84;

    border-left:6px solid #f0b400;

    border-radius:8px;

    padding:15px;

    margin-bottom:20px;
}

/* =========================================================
   Error
========================================================= */

.error-box{

    background:#fff1f1;

    border:1px solid #ffbcbc;

    border-left:6px solid #cc0000;

    border-radius:8px;

    padding:15px;

    margin-bottom:20px;

    box-shadow:var(--shadow);
}

.error-box h3{

    margin:0 0 10px;

    color:#cc0000;
}

.error-box p{

    margin:0;
}

/* =========================================================
   Pager
========================================================= */

.pager{

    text-align:center;

    margin:30px 0;
}

.pager a,
.pager span{

    display:inline-block;

    min-width:42px;

    padding:10px 14px;

    margin:2px;

    border:1px solid #dddddd;

    border-radius:6px;

    background:#ffffff;
}

.pager a:hover{

    background:#f5f5f5;

    text-decoration:none;
}

.pager .current{

    background:var(--primary);

    border-color:var(--primary);

    color:#ffffff;

    font-weight:bold;
}

/* =========================================================
   Footer
========================================================= */

.site-footer{

    margin-top:40px;

    background:#fafafa;

    border-top:1px solid #dddddd;
}

.footer-inner{

    max-width:1200px;

    margin:0 auto;

    padding:30px 20px;

    text-align:center;
}

.footer-nav{

    margin-bottom:20px;
}

.footer-nav a{

    margin:0 6px;

    color:#333333;
}

.footer-nav a:hover{

    color:var(--primary);
}

.affiliate-notice{

    color:#666666;

    font-size:.9rem;

    line-height:1.8;
}

.affiliate-notice p{

    margin:.4em 0;
}

.affiliate-id{

    margin-top:10px;

    color:#999999;

    font-size:.8rem;
}

.copyright{

    margin-top:20px;

    color:#999999;

    font-size:.85rem;
}

/* =========================================================
   Smartphone
========================================================= */

@media (max-width:768px){

    body{
        padding-bottom:0;
    }

    body.item-page{
        padding-bottom:80px;
    }

    .container{
        padding:10px;
    }

    .site-header{
        text-align:center;
        padding:12px;
    }

    .site-header h1{
        font-size:1.4rem;
        line-height:1.4;
    }

    .global-nav ul{
        display:flex;
        flex-wrap:nowrap;
        overflow-x:auto;
        gap:6px;
        padding:10px;
        -webkit-overflow-scrolling:touch;
    }

    .global-nav a{
        white-space:nowrap;
        font-size:.9rem;
    }

    .search-box{
        padding:15px;
    }

    .search-form{
        flex-direction:column;
        gap:12px;
    }

    .search-row{
        width:100%;
        min-width:auto;
    }

    .search-row input,
    .search-row select{
        height:50px;
        font-size:16px;
    }

    .search-submit{
        width:100%;
    }

    .search-submit button{
        width:100%;
        height:56px;
        font-size:18px;
    }

    .page-title{
        padding:12px;
    }

    .page-title h2{
        font-size:1.2rem;
        line-height:1.4;
    }

    .item{
        display:flex;
        align-items:flex-start;
        gap:10px;
        padding:12px;
    }

    .item-image{
        width:110px;
        flex-shrink:0;
        margin:0;
    }

    .item-image img{
        width:110px;
        height:auto;
        margin:0;
    }

    .ranking-list .rank-badge{
        display:block;
        text-align:center;
        margin-bottom:6px;
        font-size:.75rem;
    }

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

    .item h3{
        margin:0 0 6px;
        font-size:.95rem;
        line-height:1.5;

        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:3;
        overflow:hidden;
    }

    .item-price{

        font-size:1.6rem;
    }

    .item-detail-price{
        font-size:1.5rem;
        margin:6px 0;
    }

    .item-review{
        color:#ff9900;
        font-size:.9rem;
        font-weight:bold;
    }

    .buy-button{
        display:block;
        width:100%;
        padding:12px;
        margin-top:8px;
        font-size:1rem;
    }

    .item-detail{
        padding:15px;
    }

    .item-detail-price{
        font-size:1.8rem;
    }

    .item-info dl{
        display:block;
    }

    .item-info dt{
        margin-top:10px;
    }

    .item-info dd{
        margin-left:0;
    }

    .notice,
    .error-box{
        padding:12px;
    }

    .footer-nav{
        display:flex;
        flex-direction:column;
        gap:8px;
    }

    .footer-nav a{
        margin:0;
    }

    .genre-menu ul{
        grid-template-columns:
            repeat(2,1fr);
    }

    .genre-menu a:active{
        transform:
            scale(.98);
    }

}

/* =========================================================
   Sticky Buy Button
========================================================= */

@media (max-width:768px){

    .sticky-buy{

        position:fixed;

        left:0;
        right:0;

        bottom:0;

        z-index:9999;

        background:var(--primary);

        padding:10px;

        box-shadow:
            0 -2px 8px rgba(0,0,0,.2);
    }

    .sticky-buy a{

        display:block;

        text-align:center;

        color:#ffffff;

        font-size:1.1rem;

        font-weight:bold;
    }
}
/* =========================================================
   Mobile Ranking Grid
========================================================= */

@media (max-width:768px){

    .ranking-list{
        display:grid;
        grid-template-columns:
            repeat(2,1fr);
        gap:10px;
    }

    .ranking-list .item{
        display:flex;
        flex-direction:column;
        height:100%;
    }

    .ranking-list .item-image{
        aspect-ratio:1 / 1;
        display:flex;
        align-items:center;
        justify-content:center;
        overflow:hidden;
    }

    .ranking-list .item-image img{
        width:100%;
        height:100%;
        object-fit:contain;
    }

    .ranking-list .item h3{
        font-size:.8rem;
        line-height:1.4;
 
        min-height:5.6em;

        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:4;
        overflow:hidden;
    }

    .ranking-list .item-price{
        font-size:1.2rem;
        font-weight:bold;
        margin:6px 0;
    }

    .ranking-list .item-review{
        color:#ff9900;
        font-size:.8rem;
        font-weight:bold;
    }

    .ranking-list .buy-button{
        margin-top:auto;
    }

}
/* =========================================================
   Ranking Badge
========================================================= */

.ranking-item{
    position:relative;
}

.rank-badge{
    position:absolute;
    top:8px;
    left:8px;
    z-index:10;

    display:inline-block;
    padding:6px 10px;

    border-radius:999px;

    font-size:.8rem;
    font-weight:bold;

    background:#ffffff;
    color:#333333;

    box-shadow:
        0 2px 8px rgba(0,0,0,.15);
}

.rank-badge.gold,
.rank-badge.silver,
.rank-badge.bronze{
    min-width:54px;
    text-align:center;
}

.rank-badge.gold{
    background:#ffd700;
    color:#000;
}

.rank-badge.silver{
    background:#c0c0c0;
    color:#000;
}

.rank-badge.bronze{
    background:#cd7f32;
    color:#fff;
}
/* =========================================================
   Breadcrumb
========================================================= */

.breadcrumb{
    margin-bottom:15px;
    font-size:.9rem;
    color:#666666;
}

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

.breadcrumb a:hover{
    text-decoration:underline;
}
/* =========================================================
   Genre Description
========================================================= */

.genre-description{
    margin-top:20px;
    padding:20px;

    background:#ffffff;

    border-radius:12px;

    border:1px solid #e5e7eb;

    box-shadow:
        0 2px 8px rgba(0,0,0,.05);
}

.genre-description h3{
    margin-top:0;
    margin-bottom:15px;

    padding-left:10px;

    border-left:4px solid var(--primary);

    font-size:1.1rem;
}

.genre-description p{
    margin:0;
    line-height:1.9;
    color:#444444;
}
/* =========================================================
   404 Page
========================================================= */

.error-page{

    max-width:600px;

    margin:40px auto;

    padding:40px 30px;

    text-align:center;

    background:#ffffff;

    border-radius:12px;

    border:1px solid #e5e7eb;

    box-shadow:
        0 2px 8px
        rgba(0,0,0,.05);
}

.error-icon{

    font-size:4rem;

    margin-bottom:15px;
}

.error-page h1{

    margin:0;

    font-size:4rem;

    color:var(--primary);
}

.error-page h2{

    margin:10px 0 20px;
}

.error-page p{

    margin:10px 0;

    line-height:1.8;

    color:#555;
}