@charset "utf-8";
/*
Theme Name: manubol
*/
/*-------------------------------------------*/
/*  CONTENTS:
/*--------------------------------------------
1.0 - 年齢別おすすめ絵本
    1.1 - 絵本一覧
    1.2 - 年齢別TOP
    1.3 - 絵本詳細
    1.4 - 新刊絵本
2.0 - PickUp!絵本作家
3.0 - 年齢別タグ
4.0 - お知らせ
---------------------------------------------*/

/*-------------------------------------------*/
/*  1.0 - お年齢別おすすめ絵本
/*-------------------------------------------*/

/*  1.1 - 絵本一覧
/*-------------------------------------------*/
.book_list {
    padding: 0 20px;
    margin-bottom: 40px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
}
.book_list > div {
    margin: 30px 0 0;
}
.book_list h3 {
    margin-bottom: 8px;
    font-size: 1.6rem;
}
.book_list div p {
    margin-bottom: 20px;
    font-size: 1.3rem;
}
.book_list ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 20px;
}
.osusume_books-box .item2 {
    font-size: 1.3rem;
}
@media screen and (min-width: 768px) {
    .book_list {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/*  1.2 - 年齢別TOP
/*-------------------------------------------*/

.age_list h3 {
    margin-bottom: 30px;
    text-align: center;
    padding-bottom: 20px;
    background: url(../images/common/line_stripe.png) no-repeat bottom center;
    background-size: 114px 9px;
    font-size: 1.8rem;
}
@media screen and (min-width: 768px) {
    .book_list.age_list {
        display: block;
    }
    .age_list h3 {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        background: none;
    }
    .age_list h3:before,
    .age_list h3:after {
        content: '';
        width: 114px;
        height: 9px;
        flex-grow: 1;
        background-image: url(../images/common/line_stripe.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 15px;
    }
    .age_list h3:before {
        transform: rotate(180deg);/*ラインを反転*/
    }
    .book_list.age_list ul {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
}

/*  1.3 - 絵本詳細
/*-------------------------------------------*/
.book_detail {
    padding: 0 20px;
    margin: 20px 0;
}
.banner.bnr728 {
    display: none;
}
.book_detail h2 {
    font-size: 2.6rem;
}
.book_detail .book_cover {
    margin: 20px auto;
    width: 70%;
}
.book_detail .book_cover img {
    filter: drop-shadow(5px 5px 2px rgba(0,0,0,.1));
 }
aside > :nth-child(2) {
    display: none;
}
.book_detail .book_text {
    margin-bottom: 20px;
}
.tag {
    margin-top: 10px;
    font-size: 1.6rem;
    margin-right: 10px;
    border: 1px solid #3C3C43;
    border-radius: 50px;
    flex-shrink: 0;
    background: #fff;
    transition: 0.3s ease-in-out;
    display: inline-block;
    font-size: 1.4rem;
}
.tag:hover {
    opacity: 1;
    background: #304399;
}
.tag:hover a {
    opacity: 1;
    color: #FFF;
}
.tag a {
    padding: 5px 15px;
    display: block;
}
@media screen and (min-width: 768px) {
    .banner.bnr728 {
       display: block;
    }
        aside > :nth-child(2) {
        display: block;
    }
}

/*  1.4 - 新刊絵本
/*-------------------------------------------*/

.monthly_archive {
    margin: 0 20px;
    padding: 8px 12px;
    background: #FFEC78;
    color: #304399;
    font-weight: bold;
    font-size: 1.6rem;
}
ul.archive_list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 0 20px;
    list-style-type: none;
    border-left: 1px solid #ccc;
}
ul.archive_list li {
    padding: 8px 10px;
    background: #fff;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

@media screen and (min-width: 768px) {
    .monthly_archive {
        margin: 0;
        text-align: left;
    }
    ul.archive_list {
        margin: 0;
        display: block;
        padding: 0.5em;
        border-left: none;

    }
    ul.archive_list li {
        position: relative;
        margin-bottom: 10px;
        padding: 0 0 0 15px;
        border-bottom: none;
        border-right: none;
        background: transparent;
    }
    ul.archive_list li:before {
        position: absolute;
        top: 8px;
        left: 0;
        content:'';
        width: 8px;
        height: 10px;
        background: #3F51B5;
        clip-path: polygon(0 0, 0% 100%, 100% 50%);
    }
}

/*-------------------------------------------*/
/*  2.0 - PickUp!絵本作家
/*-------------------------------------------*/
.author_list {
    margin: 30px 0;
    font-weight: bold;
    font-size: 1.6rem;
}
.author_list ul {
    border-top: 1px solid #ccc;
}
.author_list ul li {
    border-bottom: 1px solid #ccc;
    background: #fff;
}
.author_list ul li a{
    padding: 10px 0 10px 30px;
}
.author_list ul li.arrow::after {
    inset: 0 20px 0 auto;
    height: .5em;
    width: .5em;

}
@media screen and (min-width: 768px) {
    .author_list {
        padding: 0;
    }
    .author_list ul {
        margin: 0;
        border-top: none;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
    }
    .author_list ul li {
        border-left: 3px solid #2E4298;
        border-bottom: none;
        background: transparent;
    }
    .author_list ul li a {
        padding: 8px 0 10px 15px;
    }
    .author_list ul li.arrow::after {
        border-top: none;
        border-right: none;
    }
}

/*-------------------------------------------*/
/*  3.0 - 年齢別タグ
/*-------------------------------------------*/

.book_tag {
    display: inline-block;
    margin-bottom: 3px !important;
    padding: 2px 5px;
    background: #F4DB46;
    color: #304399;
    font-size: 0.9rem;
}

/*-------------------------------------------*/
/*  4.0 - お知らせ
/*-------------------------------------------*/
.news_detail li {
    padding: 20px 0;
    border-bottom: 1px dashed #7E7E7E;
    font-size: 1.4rem;
}
.news_detail li:first-child {
    padding-top: 0;
}
.news_detail li:last-child {
    border-bottom: none;
}
.news_detail li .news_date { 
    margin-bottom: 10px;
    font-size: 1.2rem;
}
.news_detail .news_inner {
    width: 1000px;
    margin: 0 auto;
}
.news_topics { display: flex;}
.news_topics h2 { width: 20%;}
.news_topics ul { width: 80%;}
.news_topics .news_title {
    width: 730px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.news .btn_detail {
    width: 1000px;
    margin: 0 auto;
    text-align: right;
}
.news .btn_detail a {
    display: inline-block;
}