@charset "UTF-8";

/*共通---------------------------------------------------------------------------------------------------------------*/
#contents * {
    box-sizing: border-box;
}

#contents p,
#contents h2,
#contents h3,
#contents a {
    line-height: 34px;
    font-size: 18px;
    font-family: "メイリオ", sans-serif;
    color: #302100;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none !important;
}

.sp {
    display: none !important;
}

.pc {
    display: block !important;
}

/*PC---------------------------------*/
#contents .main {
    background: url(../img/bg.png) 0 0 repeat;
    background: 1000px auto;
    background-attachment: fixed;
    text-align: center;
    padding: 30px 0 0;
}

/*---------title---------*/
#contents .title {
    width: 100%;
    margin: 0 auto;
    max-width: 1400px;
    text-align: center;
}

#contents .title img {
    width: 100%;
    border-radius: 20px;
}

/*---------oshirase---------*/
#contents .oshirase {
    margin: 90px auto 0;
}

#contents .oshirase h2 img {
    width: 450px;
    margin: 0 auto 50px;
}

#contents .oshirase span {
    color: #041a72;
    font-weight: bold;
}

/*---------detail---------*/
#contents .detail {
    margin: 0 auto 0;
}

#contents .detail h3 {
    font-size: 28px;
    line-height: 45px;
    font-weight: bold;
    margin: 50px auto 20px;
}

#contents .detail h3 {
    position: relative;
    display: inline-block;
    padding: 0 45px;
}

#contents .detail h3::before {
    content: '';
    position: absolute;
    top: 80%;
    left: -20px;
    display: inline-block;
    width: 44px;
    height: 3px;
    background-color: #041a72;
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}

#contents .detail h3::after {
    content: '';
    position: absolute;
    top: 80%;
    right: -20px;
    display: inline-block;
    width: 44px;
    height: 3px;
    background-color: #041a72;
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
}


#contents .detail img {
    width: 700px;
    margin: 30px auto 30px;
    border-radius: 10px;
}

#contents .detail span {
    color: #041a72;
    font-weight: bold;
}

/*---------shop---------*/
#contents .shop {
    margin: 10px auto 0;
}

#contents .shop p {
    font-size: 20px;
    font-weight: bold;
    margin: 0 auto 40px;
}

#contents .shop .book img {
    width: 300px;
}


#contents .shop a {
    background: #041a72;
    display: block;
    width: 500px;
    color: #fff;
    border-radius: 50px;
    padding: 20px 0;
    margin: 0 auto 120px;
    transition: 0.5s;
}

#contents .shop a:hover {
    background: rgb(30, 59, 174);
}

#contents .shop a span {
    position: relative;
}

#contents .shop a span::after {
    content: '';
    width: 8px;
    height: 8px;
    border: 0px;
    border-top: solid 3px #fff;
    border-right: solid 3px #fff;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 7px;
    right: -55px;
    margin: 0 20px;
    transition: 0.5s;
}

#contents .shop a:hover span::after {
    right: -60px;
}

/*---------link---------*/
#contents .link {
    background: #d0c379;
    padding: 20px 0;
    margin: 0 auto 80px;
    border-top: #041a72 1px dashed;
    border-bottom: #041a72 1px dashed;
}

#contents .link ul {
    display: flex;
    flex-flow: wrap;
    width: 920px;
    margin: 0 auto;
}

#contents .link ul li {
    width: 450px;
}

#contents .link ul li:first-child {
    margin: 0 20px 0 0;
}

#contents .link ul li img {
    width: 100%;
    transition: 0.5s;
    border-radius: 10px;
    box-shadow: 0 10px 25px 0 rgba(117, 57, 0, 0.2);

}

#contents .link ul li img:hover {
    opacity: 0.7;
}

/*---------sns---------*/
#contents .sns {
    background: #f7f7f7;
    padding: 15px 0;
    margin: 60px auto 0;
}

#contents .sns ul {
    width: 800px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

#contents .sns ul li {
    width: 31%;
    margin: 0 2% 0 0;
    background: #fff;
    border-radius: 5px;
}

#contents .sns ul li:hover {
    opacity: 0.6;
    transition: 0.4s;
}

#contents .sns ul li a {
    display: block;
    border-right: 10px;
    padding: 10px;
    line-height: 48px;
    font-size: 16px;
}

#contents .sns ul li:nth-child(3) {
    margin: 0;
}

#contents .sns ul li img {
    width: 45px;
    margin: 0 10px 0 0;
}

/*SP---------------------------------------------------------------------------------------------------------------*/

@media only screen and (max-width: 767px) {
    .sp {
        display: block !important;
    }

    .pc {
        display: none !important;
    }

    img {
        width: 100%;
        height: auto;
    }

    #contents .main {
        width: 100%;
        padding: 0;
    }

    .pankuzu {
        width: 100%;
        display: block;
        overflow-x: scroll;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
        overflow: auto;
        word-break: keep-all;
        white-space: nowrap;
        padding: 8px;
        margin: 0;
    }

    /*---------title---------*/
    #contents .title {
        width: 100%;
        max-width: 100%;
    }

    #contents .title img {
        width: 100%;
        border-radius: 0px;
    }

    /*---------oshirase---------*/
    #contents .oshirase {
        width: 85%;
        text-align: left;
        margin: 50px auto 0;
    }

    #contents .oshirase h2 img {
        width: 100%;
        margin: 0 auto 30px;
    }


    /*---------detail---------*/
    #contents .detail {
        border-top: #041a72 2px dashed;
        width: 85%;
        margin: 30px auto 0;
        padding: 30px 0 0;
    }

    #contents .detail h3 {
        font-size: 20px;
        line-height: 32px;
        margin: 0 auto 20px;
        padding: 0 10px;
    }

    #contents .detail img {
        width: 100%;
        margin: 20px auto 0;
    }

    #contents .detail h3::before {
        content: '';
        position: absolute;
        top: 80%;
        left: -20px;
        display: inline-block;
        width: 44px;
        height: 3px;
        background-color: #041a72;
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
    }

    #contents .detail h3::after {
        content: '';
        position: absolute;
        top: 80%;
        right: -20px;
        display: inline-block;
        width: 44px;
        height: 3px;
        background-color: #041a72;
        -webkit-transform: rotate(-60deg);
        transform: rotate(-60deg);
    }

    #contents .detail p {
        text-align: left;
    }

    /*---------shop---------*/
    #contents .shop {
        width: 85%;
        margin: 20px auto 0;
    }

    #contents .shop .book img {
        width: 200px;
    }

    #contents .shop p {
        margin: 0 auto 20px;
        text-align: center;
    }


    #contents .shop a {
        width: 100%;
        font-size: 16px;
        padding: 12px 0 20px;
        margin: 0 auto 70px;
        line-height: 26px;
    }


    #contents .shop a span::after {
        top: 50%;
    }

    #contents .shop a:hover span::after {
        right: auto;
    }

    /*---------link---------*/
    #contents .link {
        padding: 14px 0;
        margin: 0 auto 30px;
    }

    #contents .link ul {
        width: 100%;
        display: block;
    }

    #contents .link ul li {
        width: 100%;
        padding: 0 10px;
    }

    #contents .link ul li:first-child {
        margin: 0 auto 14px;
    }

    /*---------sns---------*/
    #contents .sns {
        background: #f7f7f7;
        padding: 15px 0;
        margin: 20px auto 0;
    }

    #contents .sns ul {
        width: 800px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
    }

    #contents .sns ul li {
        width: 31%;
        margin: 0 2% 0 0;
        background: #fff;
        border-radius: 5px;
    }

    #contents .sns ul li:hover {
        opacity: 0.6;
        transition: 0.4s;
    }

    #contents .sns ul li a {
        display: block;
        border-right: 10px;
        padding: 10px;
        line-height: 48px;
        font-size: 16px;
    }

    #contents .sns ul li:nth-child(3) {
        margin: 0;
    }

    #contents .sns ul li img {
        width: 45px;
        margin: 0 10px 0 0;
    }

    /*---------sns---------*/

    #contents .sns {
        margin: 0 auto 0;
    }

    #contents .sns ul {
        width: 100%;
        display: block;
    }

    #contents .sns ul li {
        width: 90%;
        margin: 0 auto 20px;
        background: #fff;
    }

    #contents .sns ul li:nth-child(3) {
        margin: 0 auto 0;
    }

}