a {
    text-decoration: none;
}

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

#hinotikara h2,
#hinotikara p,
#hinotikara dl,
#hinotikara li {
    font-size: 16px;
    color: #222;
    line-height: 32px;
    font-family: 'メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;

}

.sp {
    display: none;
}

.pc {
    display: block;
}

/*PC---------------------------*/

#hinotikara * {
    box-sizing: border-box;
}

/*---------title---------*/

#hinotikara .title {
    padding: 20px 0;
    width: 1024px;
    margin: 0 auto 90px;
    background-image: url(../img/bg_title.png), url(../img/bg_title.png);
    background-repeat: repeat-y, repeat-y;
    background-size: 35px auto, 35px auto;
    background-position: top left, top right;
}

#hinotikara .title h1 img {
    width: 375px;
    display: block;
    margin: 0 auto;
    opacity: 0;
    animation-name: fade;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-iteration-count: 1;
    animation-duration: 2s;
    animation-delay: 0.2s;
    animation-fill-mode: forwards
}

@keyframes fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/*---------quality---------*/

#hinotikara .quality {
    width: 1024px;
    margin: 0 auto 90px;
    display: flex;
    align-items: flex-start;
    flex-flow: wrap;
}

#hinotikara .quality .txt img {
    width: 370px;
    margin: 0 34px 0 0;
}

#hinotikara .quality .img {
    width: 620px;
    height: auto;
}

/*---------about---------*/

#hinotikara .about {
    padding: 40px 0;
    background: #f2efe7;
}

#hinotikara .about .wrap {
    width: 1024px;
    margin: 0 auto;
    display: flex;
    flex-flow: wrap;
    align-items: flex-start;
}

#hinotikara .about .wrap .txt {
    width: 440px;
    margin: 0 120px 0 0;
}

#hinotikara .about .wrap h2 {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 30px;
}


#hinotikara .about .wrap img {
    width: 461px;
}

/*---------detail---------*/
#hinotikara .detail {
    width: 1024px;
    margin: 40px auto;
}

#hinotikara .detail dl {
    display: flex;
    flex-flow: wrap;
}

#hinotikara .detail .pack {
    width: 863px;
    display: flex;
    flex-flow: wrap;
    margin: 85px auto 143px;
}

#hinotikara .detail .pack img {
    width: 455px;
}

#hinotikara .detail .pack p {
    width: 380px;
    margin: 120px 0 0 25px;

}

/*---------note---------*/

#hinotikara .note {
    border-top: 1px solid #7f7f7f;
    width: 1024px;
    margin: 0 auto;
    padding: 35px 0 90px;
}

/*---------button---------*/
#hinotikara .button {
    text-align: center;
}

#hinotikara .button a {
    width: 535px;
    display: block;
    color: #fff;
    margin: 0 auto 20px;
    background: #dd0000;
    font-size: 26px;
    padding: 23px 0;
}

#hinotikara .button a:hover {
    background: #a70000;
    transition: 0.2s;
}

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

#hinotikara .sns {
    background: #f7f7f7;
    padding: 15px 0;
    margin: 60px auto 0;
}

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

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

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

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

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

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

/* TOPへボタン */
#page_top {
    position: fixed;
    bottom: 30px;
    right: 20px;
    z-index: 1000;
}

#page_top a {
    background: #9d8858;
    color: #fff;
    text-align: center;
    text-decoration: none;
    padding: 15px 20px;
    border-radius: 50px;
}

#page_top a:hover {
    color: #fff;
    background-color: #624e1f;
    transition: 0.4s;
}

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

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

    .pc {
        display: none;
    }

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

    /*---------title---------*/

    #hinotikara .title {
        padding: 20px 0;
        width: 95%;
        margin: 0 auto 50px;
    }

    #hinotikara .title h1 img {
        width: 60%;
    }

    /*---------quality---------*/

    #hinotikara .quality {
        width: 100%;
        margin: 0 auto 50px;
    }

    #hinotikara .quality .txt img {
        width: 100%;
        margin: 0 auto 50px;
    }

    #hinotikara .quality .img {
        width: 100%;
        height: auto;
    }

    /*---------about---------*/

    #hinotikara .about {
        padding: 50px 0 0;
    }

    #hinotikara .about .wrap {
        width: 100%;
        display: block;
    }

    #hinotikara .about .wrap .txt {
        width: 90%;
        margin: 0 auto 30px;
    }

    #hinotikara .about .wrap h2 {
        text-align: center;
        margin: 0 0 15px;
    }

    #hinotikara .about .wrap img {
        width: 100%;
    }

    /*---------detail---------*/
    #hinotikara .detail {
        width: 90%;
        margin: 40px auto 20px;
    }

    #hinotikara .detail .pack {
        width: 80%;
        display: block;
        margin: 30px auto;
    }

    #hinotikara .detail .pack img {
        width: 100%;
    }

    #hinotikara .detail .pack p {
        width: 100%;
        margin: 15px 0 0;

    }

    /*---------note---------*/

    #hinotikara .note {
        width: 90%;
        padding: 35px 0;
    }

    /*---------button---------*/
    #hinotikara .button {
        text-align: center;
    }

    #hinotikara .button a {
        width: 90%;
        font-size: 20px;
        margin: 0 auto 10px;
    }

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

    #hinotikara .sns {
        background: #f7f7f7;
        padding: 15px 0;
        margin: 130px auto 0;
    }

    #hinotikara .sns ul {
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
    }

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

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

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

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

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

    /* TOPへボタン */
    #page_top {
        position: fixed;
        bottom: 30px;
        right: 20px;
        z-index: 1000;
    }

    #page_top a {
        background: #9d8858;
        color: #fff;
        text-align: center;
        text-decoration: none;
        padding: 15px 20px;
        border-radius: 50px;
    }

    #page_top a:hover {
        background-color: #624e1f;
        transition: 0.4s;
    }

    .top {
        opacity: 0;
        transform: translateY(10px);
        transition: all 0.5s;
    }

    .top.scrollin {
        opacity: 1;
        transform: translateY(0);
    }

    /*---------sns---------*/
    #hinotikara .sns {
        margin: 20px auto 0;
    }

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

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

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

    /*---------page_top---------*/
    #page_top {
        position: fixed;
        bottom: 20px;
        right: 10px;
    }



}