@charset "utf-8";

/* 画像保存させない */
img{
    /* PCの右クリック禁止 */
    pointer-events: none;
}
img{
    /* SPの長押し禁止 */
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-touch-callout:none;
    -moz-user-select:none;
    user-select:none;
}

/*************
book
****************/
#mv_under {
    background-image: url(../img/book/mv.jpg);
    background-position: center 45%;
}

h3 {
    font-size: 36px;
}

.book h3 {
    margin: 0 0 20px 0;
    font-size: 40px;
    color: #333;
    text-align: left;
    line-height: 1.1em;
}

.book h3 em {
    display: block;
    font-size: 23px;
    color: #a1a1a1;
    line-height: 0.5;
    letter-spacing: 2px;
    font-weight: 400;
    margin: 0 0 20px 0;
}
.book h3 span {
    font-size: 20px;
    margin-top: -5px;
    display: block;
 }
 .book p.lead strong{
    font-weight: bold;

 }
 section.book_list,
 section.book_img {
    border-top:1px solid #ccc ;
    width: 90%;
}
section.book_list .inner,
section.book_img .inner {
    padding: 30px 0px;
}
section.book_list h4 {
    font-size: 26px;
    text-align: left;
    margin: 1.2em 0 0 0;
}
section.book_list h4 em {
    display: block;
    margin: -.5em 0;
    font-size: 18px;
    /*color: #b8b8b8;*/
}
section.book dl {
    display: flex;
}
section.book dt{
    width: 20%;
    margin: 0 3% 0 0;
}

section.book dd{
    width: 80%;
}
section.book dd p strong{
    font-weight: 500;
}
section.book dl img{
        width:100%;
        height: auto;
        float: none;
        margin: 0 5% 5% 0;
        border: 1px solid #ccc;
}
section.book_img .img {
    max-width: 900px;
    width: 100%;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2vw;
}

section.book_img .img a, 
section.book_img .img a img {
    width: 144px;
    height: 144px;
}

/*----------------------------------------
for PC (min-width:641px)
----------------------------------------*/
@media only screen and (min-width:641px),
print {

    section.book {
        max-width: 800px;
        width: 92%;
    }


    section p {
        text-align: center;
    }
    section.book p {
        margin: 0 0 2em 0;
        font-size: 16px;
        text-align: left;
    }

    section.book img {/*
        width: 36%;
        height: auto;
        float: right;
        margin: 0 0 8% 10%;
        border: 1px solid #ccc;*/

        width: 48%;
        height: auto;
        float: right;
        margin: 0 0 5% 5%;
        border: 1px solid #ccc;
    }


    section.book_list ul{
        margin: 20px auto;
    }
    section.book_list ul li{
        position: relative;
        display: inline-block;
        word-wrap:normal;
        padding-left: 1em;

    }
    section.book_list ul li span{
        color: #b8b8b8;
        display: inline-block;
        margin-right: 1em;
    }
    section.book_list ul li::before{
        position: absolute;
        top: -12px;
        left: -12px;
        content: "・";
        font-size: 30px;
    }

    section.book_list p.lead {
        margin: 10px auto 20px;
    }

    section.book_img ul{
        width: 900px;
        margin: 20px auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    section.book_img a img{
        width: 144px;
        height: 144px;
    }
    section.book_img p:not(.lead) {
        text-align: left;
    }
}

/*----------------------------------------
for SP (max-width:640px)
----------------------------------------*/

@media only screen and (max-width:640px),
print {
    section.book{
        margin: 0;
    }
    section.book h2 {
        font-size: 30px;
        line-height: 1.2em;
    }

    .book h3 {
        margin: 30px 0 0;
        font-size: 36px;
        text-align: center;
    }

    .book h3 em {
        font-size: 20px;
        line-height: 0.5;
        letter-spacing: 2px;
        font-weight: 400;
    }

    .book img {
        display: block;
        width: 100%;
        margin: 0 auto 40px;
        border: 1px solid #ccc;
    }
    .book p.lead{
        margin: 20px auto 0;
        text-align: left;
    }
    section.book dl {
        display: block;
    }
    section.book dt{
        width: 60%;
        margin: 1.5em auto;
    }
    
    section.book dd{
        width: 100%;
        margin: 0 0 1em 0;
        text-align: center;
    }
    /*
    section.book dd p strong{
        font-weight: 500;
    }
    section.book dl img{
            width:100%;
            height: auto;
            float: none;
            margin: 0 5% 5% 0;
            border: 1px solid #ccc;
    }*/
    section.book_list, 
    section.book_img {
        width: 100%;
        padding: 40px 0 0;
    }
    section.book_list .inner, section.book_img .inner {
        padding: 10px 0;
      }
    section.book_list h4 {
        font-size: 24px;
        line-height: 1.2em;
    }
    section.book_list h4:first-of-type {
        margin: 0 0 0 0;
    }
    section.book_list h4 em {
            margin-top: 0.1em;
        }
    section.book_list ul{
        margin: 10px auto 20px;
    }
    section.book_list ul:last-of-type{
        margin: 10px auto 0;
    }
    section.book_list ul li{
        position: relative;
        display: inline-block;
        width: 100%;
        word-wrap:normal;
        padding-left: 1em;

    }
    section.book_list ul li span{
        color: #b8b8b8;
        display: inline-block;
        margin-right: 1em;
    }
    section.book_list ul li::before{
        position: absolute;
        top: -12px;
        left: -12px;
        content: "・";
        font-size: 30px;
    }
    section.book_img .img {
        width: 100%;
    }
    section.book_img .img {
        justify-content: center;
        gap: 10px;
      }

}