.wrapper {
    box-sizing: border-box;
    margin: 0 10px;
    padding: 0;
    min-width: 320px;
    max-width: 100%
}

@media (max-width: 374px) {
    .wrapper {
        min-width: 280px
    }
}

@media (min-width: 768px) {
    .wrapper {
        width: 1120px;
        margin: 0 auto
    }
}

.mc {
    color: #5da7e6 !important
}

.red {
    color: #c66 !important
}

.k {
    color: #000 !important
}

.wh {
    color: #fff !important
}

.rps-img {
    max-width: 100%;
    height: auto
}

@media (min-width: 768px) {
    .nopc {
        display: none
    }
}

@media (max-width: 767px) {
    .nosp {
        display: none
    }
}

.small {
    font-size: 80%
}

.cf::after {
    content: "";
    display: block;
    clear: both
}

.ta-c {
    text-align: center
}

.ta-l {
    text-align: left
}

.ta-r {
    text-align: right
}

a {
    text-decoration: none
}

@keyframes fadein {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media (min-width: 768px) {
    .half-box {
        float: left;
        width: 46%;
        margin: 2%;
        box-sizing: border-box
    }
}

.left_column, .right-column {
    position: relative;
    z-index: 1
}

@media (min-width: 768px) {
    .left_column {
        width: 760px;
        float: left
    }

    .right_column {
        width: 320px;
        float: right
    }
}

@media (min-width: 768px) {
    .one3rd {
        float: right;
        width: 31%;
        box-sizing: border-box
    }

    .one3rd.mid {
        margin: 0 3.5%
    }
}

.two-column {
    list-style: none;
    column-count: 1;
    column-gap: 2rem;
    padding: 1rem 0
}

@media (min-width: 768px) {
    .two-column {
        column-count: 2
    }

    .two-column li {
        display: block
    }

    .two-column li, .two-column article, .two-column section, .two-column p {
        break-inside: avoid
    }
}

.three-column {
    list-style: none;
    column-count: 1;
    column-gap: 2rem;
    padding: 1rem 0
}

@media (min-width: 768px) {
    .three-column {
        column-count: 3
    }

    .three-column li {
        display: block
    }

    .three-column li, .three-column article, .three-column section, .three-column p {
        break-inside: avoid
    }
}

.four-column {
    list-style: none;
    column-count: 1;
    column-gap: 2rem;
    padding: 1rem 0
}

@media (min-width: 768px) {
    .four-column {
        column-count: 4
    }

    .four-column li {
        display: block
    }

    .four-column li, .four-column article, .four-column section, .four-column p {
        break-inside: avoid
    }
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    height: 100vh
}

body {
    background: #5da7e6;
    padding: 0;
    margin: 0;
    height: 100vh;
    overflow-x: hidden !important;
    font-family: Verdana, Geneva, "sans-serif"
}

body::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background: url("images/spbg_0B8A1834.jpg") 50% bottom no-repeat;
    background-size: cover
}

@media (min-width: 768px) {
    body::before {
        background-image: url("images/bg_0B8A1834.jpg")
    }
}

_::-webkit-full-page-media, _:future, :root body {
    letter-spacing: .08rem
}

main {
    height: 100vh;
    animation-name: fadein;
    animation-duration: 1s
}

.top {
    height: 100%;
    text-align: center;
    position: relative;
    padding: 0 1rem
}

.top .logo {
    position: absolute;
    max-width: 80%;
    height: auto;
    position: absolute;
    margin: auto;
    top: 40%;
    bottom: 60%;
    left: 0;
    right: 0
}

@media (min-width: 768px) {
    .top .logo {
        position: absolute;
        margin: auto;
        top: 40%;
        bottom: 60%;
        left: 10%;
        right: 90%
    }
}

.contents {
    background: #fff;
    padding: 4rem 0
}

.contents h2 {
    font-weight: 800;
    color: #000000
}


.contents h3 {
    font-weight: 400;
    color: #000000
}