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

/* PC
---------------------------------------------------------------------- */
@media (min-width: 1001px) {

    .pc_none {
        display: none;
    }

    #pageheader {
        width: 100%;
        height: 550px;
    display: flex;
        align-items: center;
        position: relative;
        z-index: 0;
        /*margin-top: 133px;*/
    }
    #pageheader h1 {
        color: #fff;
        font-size: calc(42em / 16);
        letter-spacing: 0.25em;
        padding-left: 200px;
    }
    #pageheader h1 span {
        display: block;
        font-size: calc(16em / 42);
        letter-spacing: 0.23em;
        margin-top: 20px;
    }
    #pageheader img {
        width: 100%;
        height: 550px;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #rank {
        width: 980px;
        margin: 30px auto 150px;
    }
    #rank img {
        width: 100%;
    }
    #rank .text {
        margin-bottom: 30px;
        font-size: 18px;
        line-height: 28px;
    }
    #rank .text li{
        padding-left: 1em;
        text-indent: -1em;
    }
    .btn {
        width: 550px;
        margin: 40px auto 60px;
        background-color: #4F6599;
    }
    .btn p {
        padding: 15px;
        text-align: center;
        font-size: 22px;
        font-weight: 700;
        color: #FFF;
    }
    .btn :hover {
        opacity: 0.7;
    }
    .btn_p {
        width: 550px;
        margin: 90px auto 0;
        background-color: #C6A930;
    }
    .btn_p p {
        padding: 15px;
        text-align: center;
        font-size: 22px;
        font-weight: 700;
        color: #FFF;
    }
    .btn_p :hover {
        opacity: 0.7;
    }

}

/* SP
---------------------------------------------------------------------- */
@media (max-width: 1000px) {

    .sp_none {
        display: none;
    }
    /*.facilities img {
        width: 100%;
        height: auto;
    }*/

    #pageheader {
        width: 100%;
        height: calc(300 / 375 * 100vw);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 0;
        /*margin-top: calc(50 / 375 * 100vw);*/
    }
    #pageheader h1 {
        color: #fff;
        font-size: calc(32em / 16);
        letter-spacing: 0.25em;
    }
    #pageheader h1 span {
        display: block;
        font-size: calc(15em / 32);
        letter-spacing: 0.23em;
        margin-top: calc(20 / 375 * 100vw);
    }
    #pageheader img {
        width: 100%;
        height: calc(300 / 375 * 100vw);
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }

    #rank {
        width: 100%;
        margin: calc(20 / 375 * 100vw) auto calc(80 / 375 * 100vw) ;
    }
    #rank .text {
        margin-bottom: calc(20 / 375 * 100vw);
        font-size: calc(16em / 16);
        letter-spacing: 0.1em;
        line-height: 1.6em;
    }
    #rank .text li{
        padding-left: 1em;
        text-indent: -1em;
    }
    #rank img {
        width: 100%;
    }
    .btn {
        width: 80%;
        margin: calc(30 / 375 * 100vw) auto;
        background-color: #4F6599;
    }
    .btn p {
        padding: 3vw;
        text-align: center;
        font-size: calc(18em / 16);
        letter-spacing: 0.1em;
        font-weight: 700;
        color: #FFF;
    }
    .btn_p {
        width: 80%;
        margin: calc(60 / 375 * 100vw) auto;
        background-color: #C6A930;
    }
    .btn_p p {
        padding: 3vw;
        text-align: center;
        font-size: calc(18em / 16);
        letter-spacing: 0.1em;
        font-weight: 700;
        color: #FFF;
    }

}