@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);


html,body{
    width: 100%;
    color: #f2f3d9;
    font: 15px/150% 'Noto Sans JP', sans-serif;
    margin: 0;
}

img{
    border: 0px;
    max-width: 100%;
    height: auto;
}

#header,.color1,.color2{
    max-width: 100%;
    text-align: center;
    margin: 0 auto;
    padding: 80px 5%;
}

#header{
    height: 100vh;
    background: #1b2143 url(./img/header.png) no-repeat center fixed;
    background-size: cover;
    padding: 0;
}
#footer{
    text-align: right;
    max-width: 100%;
    height: 300px;
    background: #064789 url(./img/footer.png) no-repeat center fixed;
    background-size: cover;
    padding: 0;
}
#footer img{
    margin: 3% 10% 0 0;
}

.color1{
    background-color: #1b2143;
}

.color2{
    background-color: #064789;
}

/* 見出し */
h1{
    margin: 0;
    padding: 0;
}
h1 img{
    width: auto;
    height: 70vh;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 5%;
    left: 0;
    margin: auto;
}

h2{
    font-size: 22px;
    font-size: 1.5rem;
    line-height: 110%;
    font-weight: 700;
    position: relative;
    height: 30px;
    line-height: 30px;
    margin: 0 0 2em;
    padding: 0 1em;
    background-color: #ffe800;
}
.color1 h2{ color: #1b2143; }
.color2 h2{ color: #064789; }
h2:before, h2:after{
    position: absolute;
    content: '';
}
h2:before{
    top: 100%;
    left: 0;
    border-width: 0 15px 5px 0;
    border-style: solid;
    border-color: transparent;
    border-right-color: #9c722d;
}
h2:after{
    top: 0;
    right: 0;
    z-index: 2;
    border-width: 15px 10px;
    border-style: solid;
    border-color: transparent;
}
.color1 h2:after{ border-right-color: #1b2143; }
.color2 h2:after{ border-right-color: #064789; }

h3{
    font-size: 34px;
    font-size: 2.3rem;
    line-height: 110%;
    font-weight: 300;
    margin: 0 0 0.4em;
    padding: 0;
}
#bookflex h3{ margin: 0; }

h4{
    font-size: 18px;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.8em;
    color: #1b2143;
    background-color: #ffe800;
    margin: 1em 0 0.5em;
    padding: 0.2em 0;
}
#bookflex h4{
    font-size: 16px;
    font-size: 1.1rem;
    font-weight: 400;
    color: #064789;
}


/* 内容 */
#twitter{
    position: absolute;
    top: 5%;
    right: 5%;
}

#poem-title{
    font-size: 45px;
    font-size: 3rem;
    line-height: 110%;
    font-weight: 100;
    margin: 0 0 0.2em;
    padding: 0;
}

#poem-content{
    font-size: 22px;
    font-size: 1.5rem;
    line-height: 150%;
    font-weight: 100;
    margin: 10px 20% 0;
    padding: 0;
}

.poem-kikan{
    font-size: 19px;
    font-size: 1.3rem;
    line-height: 110%;
    letter-spacing: 0.1em;
    margin: 0;
    padding: 0;
}

#sample{
    max-width: 1200px;
    margin: auto;
}
#sample img{ margin: 10px 10px; }

.detail{
    letter-spacing: 0.4em;
    margin: -0.8em 0 0.4em;
    padding: 0;
}

#bookflex .detail{
    word-break: break-all;
    letter-spacing: 0.3em;
    margin: 0 0 0.5em;
    padding: 0;
}

.price{
    font-size: 45px;
    font-size: 3rem;
    line-height: 110%;
    letter-spacing: 0.05em;
    font-weight: 400;
    text-align: right;
    margin: 0.2em 0 0;
    padding: 0;
}

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.content li,info li{
    margin: 0.2em 0;
    padding: 0;
}

.info li{
    letter-spacing: 0.2em;
}

/* flexbox */
.flex,#bookflex > div{
    display: -webkit-flex; /* Safari */
    display: flex;
    -webkit-justify-content: center; /* Safari */
    justify-content: center;
}

#infoflex,#noveltyflex,#noveltyflex2,#bookflex > div{
    -webkit-flex-flow: row nowrap; /* Safari */
    flex-flow: row nowrap;
    -webkit-align-items: center; /* Safari */
    align-items: center;
}

#infoflex > div,#noveltyflex > div,#noveltyflex2 > div{
    -webkit-flex: 0 1 auto; /* Safari */
    flex: 0 1 auto;
    padding: 2%;
    max-width: 100%;
}

#noveltyflex{
    -webkit-flex-flow: row-reverse nowrap; /* Safari */
    flex-flow: row-reverse nowrap;
    margin-bottom: 2em;
}

#noveltyflex2{
    -webkit-flex-flow: row wrap; /* Safari */
    flex-flow: row wrap;
    margin-bottom: 2em;
}

#noveltyflex > div,#noveltyflex2 > div{ padding: 0; }

#bookflex{
    -webkit-flex-flow: row wrap; /* Safari */
    flex-flow: row wrap;
}

#bookflex > div{
    -webkit-flex: 1 1 550px; /* Safari */
    flex: 1 1 550px;

    border-radius: 5px;
    background: #064789;
    min-height: 300px;
    margin: 5px;
    padding: 20px;
}

#bookflex > div > div{ padding: 2%; }

.bookimg{
    -webkit-flex: 1 1 30%; /* Safari */
    flex: 1 1 30%;
    max-width: 100%;
    padding: 0;
}

.booktxt{
    -webkit-flex: 1 1 70%; /* Safari */
    flex: 1 1 70%;
    max-width: 100%;
    margin: 0;
}


/* リンク */
a:link{ color: #f2f3d9; }
a:visited{ color: #cad2c5; }
a:hover, a:active{ color: #f2f3d9; }

/* PAGE TOP */
#page-top {
    position: fixed;
    top: -35px;
    right: 20px;
    z-index: 3;
    font-size: 11px;
    transform: rotate( -90deg );
    transform-origin: right bottom;
}
#page-top:before {
    content: "";
    border-style: solid;
    border-width: 12px;
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    left: -5px;
    border-color: #ffe800 #ffe800 #ffe800 transparent;
    border-width: 12px 5px;
}
#page-top a{
    text-decoration: none;
}
#page-top span {
    background: #ffe800;
    color: #1b2143;
    font-weight: 500;
    width: 90vh;
    line-height: 24px;
    padding-left: 20px;
    display: block;
}

/* タブレット・狭いブラウザ */
@media only screen and (max-width: 1020px) and (min-width: 768px){
    #footer{ height: 250px; }
    .color1,.color2{ padding: 50px 4%; }
    h2{ margin: 0 0 1em; }

    #poem-title{
        font-size: 37px;
        font-size: 2.5rem;
        line-height: 110%;
        margin: 0 0 0.2em;
    }

    #poem-content{
        font-size: 21px;
        font-size: 1.4rem;
        margin: 10px 10% 0;
    }

    #page-top {
        right: 10px;
    }
}

/* スマホ */
@media only screen and (max-width: 767px){
    #header,#footer{ background-attachment: scroll; }
    #footer{ height: 150px; }
    #footer img{ width: 70%; }
    .color1,.color2{ padding: 30px 3%; }
    h2{ margin: 0 0 0.9em; }
    h3,#bookflex h3{ margin: 0.2em 0 0.4em; }

    #poem-title{
        font-size: 30px;
        font-size: 2rem;
        line-height: 110%;
        margin: 0 0 0.2em;
    }

    #poem-content{
        font-size: 16px;
        font-size: 1.1rem;
        margin: 8px 5% 0;
    }

    #sample img{ margin: 0; }

    #infoflex > div,#noveltyflex > div,#noveltyflex2 > div{
        margin: 0;
        padding: 0 10px;
    }

    #bookflex > div{
        margin: 5px 0;
        padding: 0 10px;
    }

    #bookflex > div > div{
        min-width: 12em;
        -webkit-flex: 1 1 auto; /* Safari */
        flex: 1 1 auto;
    }

    #infoflex,#noveltyflex,#noveltyflex2,#bookflex > div{
        -webkit-flex-flow: column wrap; /* Safari */
        flex-flow: column wrap;
    }

    #page-top {
        transform: none;
        top: auto;
        right: 0;
        bottom: 0;
        width: 70px;
    }
    #page-top span {
        padding-left: 10px;
    }
}