@charset "utf-8";
/* CSS Document */

#wrapper {
    background: url(../img/sakata_back_pht001.png) repeat-x,
    url(../img/sakata_back_pht002.png) 0px 1350px repeat;
}

#contents {
    position: relative;
    width: 1200px;
    height: 1550px;
    background: url(../img/sakata_top_pht001.png) 32px 150px no-repeat,
    url(../img/sakata_top_pht001.png) 495px 107px no-repeat,
    url(../img/sakata_top_pht001.png) 699px 12px no-repeat,
    url(../img/sakata_top_pht001.png) 982px 48px no-repeat,
    url(../img/sakata_top_pht002.png) 588px 70px no-repeat,
    url(../img/sakata_top_pht003.png) 24px 518px no-repeat,
    url(../img/sakata_top_pht004.png) 870px 828px no-repeat,
    url(../img/sakata_top_pht005.png) 540px 1020px no-repeat,
    url(../img/sakata_top_pht006.png) 942px 1193px no-repeat,
    url(../img/sakata_top_pht015.png) 596px 532px no-repeat,
    url(../img/sakata_top_back.png) 0px 0px no-repeat #fff;
    margin: 0 auto;
    color: inherit;
}

#contents h1 {
    position: absolute;
    top: 83px;
    left: 120px;
}

#contents h2.cap001 {
    position: absolute;
    top: 456px;
    left: 180px;
}

#contents h2.cap002 {
    position: absolute;
    top: 963px;
    left: 146px;
}

#contents h3 {
    position: absolute;
    top: 963px;
    left: 146px;
}

#s_title_01 {
    position: absolute;
    top: 38px;
    left: 121px;
}

#s_title_02 {
    position: absolute;
    top: 517px;
    left: 240px;
    width: 319px;
}

#s_title_02 p {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.875;
}

#s_title_03 {
    position: absolute;
    top: 1021px;
    left: 152px;
    width: 482px;
}

#s_title_03 p {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.875;
}

#s_menu {
    position: absolute;
    top: 303px;
    left: 125px;
}

#s_menu ul {
    display: flex;
}

#s_menu ul li {
    width: 25%;
}

#s_menu ul li.s_menu_01 {
    margin-right: 20px;
}

#s_menu ul li.s_menu_01 a {
    display: block;
}

#s_menu ul li.s_menu_01 a:hover img {
    opacity: 0;
}

#s_menu ul li.s_menu_01 a:hover {
    background: url(../img/sakata_btn_on_001.png) no-repeat;
}

#s_menu ul li.s_menu_01 p {
    font-size: 18px;
    font-size: 18rem;
    color: #FA3219;
    background-color: transparent;
}

#s_menu ul li.s_menu_02 {
    margin-right: 25px;
}

#s_menu ul li.s_menu_02 a {
    display: block;
}

#s_menu ul li.s_menu_02 a:hover img {
    opacity: 0;
}

#s_menu ul li.s_menu_02 a:hover {
    background: url(../img/sakata_btn_on_002.png) no-repeat;
}

#s_menu ul li.s_menu_02 p {
    font-size: 18px;
    font-size: 18rem;
    color: #FA3219;
    background-color: transparent;
}

#s_menu ul li.s_menu_03 {
    margin-right: 20px;
}

#s_menu ul li.s_menu_03 a {
    display: block;
}

#s_menu ul li.s_menu_03 a:hover img {
    opacity: 0;
}

#s_menu ul li.s_menu_03 a:hover {
    background: url(../img/sakata_btn_on_003.png) no-repeat;
}

#s_menu ul li.s_menu_03 p {
    margin-left: 24px;
    font-size: 18px;
    font-size: 18rem;
    color: #FA3219;
    background-color: transparent;
}

#s_menu ul li.s_menu_04 {
    margin-right: 0px;
}

#s_menu ul li.s_menu_04 a {
    display: block;
}

#s_menu ul li.s_menu_04 a:hover img {
    opacity: 0;
}

#s_menu ul li.s_menu_04 a:hover {
    background: url(../img/sakata_btn_on_004.png) no-repeat;
}

#footer {
}

#f_icon {
    position: absolute;
    float: left;
    top: 1380px;
    left: 143px;
}

#f_txt_01 {
    position: absolute;
    top: 1388px;
    left: 207px;
}

#f_txt_02 {
    position: absolute;
    top: 1424px;
    left: 210px;
}

#f_txt_02 p {

}

#f_txt_03 {
    position: absolute;
    top: 1446px;
    left: 207px;
}

#f_txt_04 {
    position: absolute;
    top: 1505px;
    left: 456px;
}

#f_txt_04 p {

}


#contents.animated {
    animation-delay: 0.5s;
}

#s_title_01.animated {
    animation-delay: 1.5s;
}

#contents h1.animated {
    animation-delay: 2.5s;
}

#s_menu.animated {
    animation-delay: 3.5s;
}

#contents h2.animated {
    animation-delay: 4.5s;
    animation-duration: 0.5s;
}

#s_title_03.animated,
#s_title_02.animated {
    animation-delay: 5.0s;
    animation-duration: 0.5s;
}

@media screen and (max-width: 479px) {
    #contents {
        width: auto;
        height: auto;
        background: none;
    }

    #s_title_01 {
        position: relative;
        top: 0;
        left: 0;
    }

    #contents h1 {
        position: relative;
        top: 0;
        left: 0;
        width: 80%;
        margin: 0 auto;
        padding-left: 10px;
    }

    #s_menu {
        position: relative;
        top: 0;
        left: 0;
        overflow: hidden;
        padding: 10px 0;
    }

    #s_menu ul {
        align-items: center;
        justify-content: center;
        letter-spacing: -0.4em;
    }

    #s_menu ul li.s_menu_01 {
        margin: 0 2.747vw 0 0;
        width: 16vw;
    }

    #s_menu ul li.s_menu_02 {
        margin:0 2.747vw 0 0;
        width: 18vw;
    }

    #s_menu ul li.s_menu_03 {
        margin-right: 0px;
        width: 24vw;
    }

    #s_menu ul li.s_menu_04 {
        margin-right: 0px;
        width: 25vw;
    }

    #s_menu ul li a img {
        width: 100%;
    }

    #s_menu ul li.s_menu_01 a:hover {
        background-size: 100%;
    }

    #s_menu ul li.s_menu_02 a:hover {
        background-size: 100%;
    }

    #s_menu ul li.s_menu_03 a:hover {
        background-size: 100%;
    }

    #s_menu ul li.s_menu_04 a:hover {
        background-size: 100%;
    }

    #contents h2.cap001 {
        position: relative;
        top: 0;
        left: 0;
        padding: 0 10px;
        margin-bottom: 5px;
        text-align: center;
    }

    #contents h2.cap001 img.img-responsive {
        display: inline-block;
    }

    #s_title_02 {
        position: relative;
        top: 0;
        left: 0;
        width: auto;
        padding: 0 10px;
        margin-bottom: 20px;
    }

    #contents h2.cap002 {
        position: relative;
        top: 0;
        left: 0;
        padding: 0 20px;
        margin-bottom: 5px;
        text-align: center;
    }

    #contents h2.cap002 img.img-responsive {
        display: inline-block;
    }

    #s_title_03 {
        position: relative;
        top: 0;
        left: 0;
        width: auto;
        padding: 0 10px;
        margin-bottom: 5px;
    }

    #footer {
        background: url(../img/sakata_back_pht002.png);
        padding: 20px 0 0 0;
    }

    #f_icon {
        position: relative;
        top: 0;
        left: 0;
        float: none;
        text-align: center;
    }

    #f_txt_01 {
        position: relative;
        top: 0;
        left: 0;
        text-align: center;
        margin-bottom: 5px;
    }

    #f_txt_02 {
        position: relative;
        top: 0;
        left: 0;
        text-align: center;
    }

    #f_txt_03 {
        position: relative;
        top: 0;
        left: 0;
        text-align: center;
    }

    #f_txt_04 {
        position: relative;
        top: 0;
        left: 0;
        text-align: center;
        font-size: 0.8em;
    }
}