@charset "UTF-8";

/*--------------------------------------------------------------
	Top Page Specific Styles
-------------------------------------------------------------- */
/* H1 in Main Slider */
#mainSlider h1 {
    margin: 0;
    padding: 0;
    line-height: 1;
    border: none;
}

#mainSlider h1 img {
    display: block;
    /* 余白除去 */
}

/* Global Navigation (Top Page Only) */
#g_navi {
    margin-bottom: 20px;
}

#g_navi nav {
    margin: 0 auto;
    width: 1024px;
}

#g_navi nav ul {
    display: flex;
    justify-content: center;
    gap: 1em;
}

#g_navi li {
    margin: 0 0.5em;
}

/* Bottom Content Wrapper */
#bottom_wrapper {
    border-top: 1px solid #eee;
    background-color: #fafafa;
}

#bottom {
    display: flex;
    justify-content: space-between;
    width: 980px;
    margin: 20px auto 0;
}

/* Sections */
#special,
#pick,
#news {
    padding: 0 40px 1em 2em;
    background-color: #fff;
    border: 1px solid #eee;
}

#special,
#pick {
    margin-top: 20px;
}

#left {
    width: 660px;
}

.margin {
    margin: 1em 0 1em 0;
}

#pick_up {
    width: 600px;
}

#pick_up img {
    margin-left: 2em;
}

/* News List */
.news-list {
    padding: 0 2em;
}

.news-list li {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.3em 0;
}

.news-list li::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #ff8c00;
    flex-shrink: 0;
}

.news-list time {
    color: #888;
    /* var(--text-muted) is not available here unless style.css is loaded, which it is. better to use var if possible or keep literal hex to be safe if order matters, but var is fine since style.css loads first */
    font-size: 14px;
    white-space: nowrap;
}

/* Right Sidebar (Top Page) */
#right {
    width: 290px;
}

#right ul {
    border: 1px solid #eee;
    background-color: #fff;
    padding-bottom: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#right li {
    margin-top: 20px;
    margin-left: 0;
    border-bottom: 1px solid #eee;
    width: 234px;
}

#right p {
    margin-left: 2em;
    border: 3px solid #eee;
    width: 234px;
    background-color: #ff8c00;
}

#right b {
    font-size: 0.7em;
}

#right div {
    width: 234px;
    margin-left: 2em;
    border: 1px solid #eee;
}

/* ID: tuika (Additional Content) */
#tuika {
    border: solid 1px #eee;
    padding: 20px 20px;
    margin-top: 20px;
    text-align: left;
    background-color: #fff;
}

#tuika h2 {
    font-weight: bold;
    border-left: solid 5px #3353b2;
    /* var(--primary-color) */
    padding-left: 10px;
    margin-bottom: 10px;
}

#tuika p {
    color: #333333;
    font-size: 12px;
}

#tuika em {
    font-style: normal;
}


/*--------------------------------------------------------------
	Top Page Media Queries (SP)
-------------------------------------------------------------- */
@media screen and (max-width: 959px) {

    /* g_navi: 縦並び */
    #g_navi nav {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }

    #g_navi nav ul {
        flex-direction: row;
        gap: 10px;
    }

    #g_navi li {
        margin: 0;
    }

    #g_navi li img {
        width: 100%;
        height: auto;
    }

    /* Bottom: 縦並び */
    #bottom {
        flex-direction: column;
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }

    #left,
    #right {
        width: 100%;
    }

    /* Sections */
    #special,
    #pick,
    #news {
        padding: 15px;
    }

    /* Special: 画像を縦並び */
    #special>a {
        display: block;
        margin-bottom: 10px;
    }

    #special>a img {
        width: 100%;
        height: auto;
    }

    #special .link-more {
        margin-left: 0;
    }

    /* News List */
    .news-list {
        padding: 0 0 0 1em;
    }

    .news-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 8px 0;
        border-bottom: 1px solid #eee;
    }

    .news-list li::before {
        display: none;
    }

    /* Pick Up: 2列グリッド */
    #pick_up {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    #pick_up img {
        width: 100%;
        margin-left: 0;
    }

    /* Right Sidebar: 横スクロール */
    #right ul {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding: 15px 0 0 0;
    }

    #right li {
        width: auto;
        margin-top: 0;
        border-bottom: none;
    }

    #right li img {
        width: 100px;
        height: auto;
    }

    /* tuika */
    #tuika {
        padding: 15px;
    }
}