@charset "utf-8";

body {
    background-color: #FFEEF0;
    font-family: "Zen Old Mincho", serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.05em;
    position: relative;
    color: #2D2D2D;
}

.contents {
    position: relative;
    z-index: 2;
}

footer {
    position: relative;
    z-index: 2;
}

@media screen and (min-width: 961px) {
    a {
        transition: .3s;
    }

    a:hover {
        opacity: .7;
    }
}

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

h2 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

@media screen and (max-width: 960px) {
    h2 {
        font-size: calc(40 * (100svw / 750));
    }
}

h3 {
    font-size: 28px;
    line-height: 57px;
    font-weight: 500;
}

@media screen and (max-width: 960px) {
    h3 {
        font-size: calc(35 * (100svw / 750));
        line-height: calc(72 * (100svw / 750));
    }
}

p {
    font-size: 19px;
    line-height: 38px;
    font-weight: 400;
}

@media screen and (max-width: 960px) {
    p {
        font-size: calc(24 * (100svw / 750));
        line-height: calc(48 * (100svw / 750));
    }
}

@media screen and (min-width: 961px) {
    .is_sponly {
        display: none;
    }
}

@media screen and (max-width: 960px) {
    .is_pconly {
        display: none;
    }
}

.roysnailbg {
    width: 100svw;
    height: 100svh;
    background-image: url(../img/bg.png);
    background-repeat: repeat;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    transition: 1s;
}

.roysnailbg.is_show {
    opacity: 1;
}

.roysnail {
    position: relative;
    z-index: 2;
    opacity: 0;
    transition: 1s;
}

.roysnail.is_show {
    opacity: 1;
}

/* loading
====================================================*/
.loadingarea {
    width: 100svw;
    height: 100svh;
    position: fixed;
    z-index: 999;
    background-color: #FFEEF0;
    transition: 1s;
    opacity: 0;
    pointer-events: none;
}

.loadingarea.is_show {
    opacity: 1;
}

.loading {
    width: 200px;
    height: 60px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.loading .circle {
    width: 20px;
    height: 20px;
    position: absolute;
    border-radius: 50%;
    background-color: #fff;
    left: 15%;
    transform-origin: 50%;
    animation: circle .5s alternate infinite ease;
}

@keyframes circle {
    0% {
        top: 60px;
        height: 5px;
        border-radius: 50px 50px 25px 25px;
        transform: scaleX(1.7);
    }

    40% {
        height: 20px;
        border-radius: 50%;
        transform: scaleX(1);
    }

    100% {
        top: 0%;
    }
}

.loading .circle:nth-child(2) {
    left: 45%;
    animation-delay: .2s;
}

.loading .circle:nth-child(3) {
    left: auto;
    right: 15%;
    animation-delay: .3s;
}

.loading .shadow {
    width: 20px;
    height: 4px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .5);
    position: absolute;
    top: 62px;
    transform-origin: 50%;
    z-index: -1;
    left: 15%;
    filter: blur(1px);
    animation: shadow .5s alternate infinite ease;
}

@keyframes shadow {
    0% {
        transform: scaleX(1.5);
    }

    40% {
        transform: scaleX(1);
        opacity: .7;
    }

    100% {
        transform: scaleX(.2);
        opacity: .4;
    }
}

.loading .shadow:nth-child(4) {
    left: 45%;
    animation-delay: .2s
}

.loading .shadow:nth-child(5) {
    left: auto;
    right: 15%;
    animation-delay: .3s;
}

.loading span {
    position: absolute;
    top: 75px;
    font-size: 20px;
    letter-spacing: 12px;
    color: #fff;
    left: 15%;
}

/* headerpc
====================================================*/
@media screen and (min-width: 961px) {
    .gnavheader {
        width: 100%;
        height: 80px;
        background-color: #fff;
        color: #2D2D2D;
        position: sticky;
        top: 0;
        z-index: 999;
    }

    .gnavareapc {
        width: 95%;
        max-width: 1100px;
        height: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .gnavareapc .gnavlogo {
        width: 170px;
    }

    .gnavareapc .gnav .gnav__list {
        display: flex;
        justify-content: space-between;
    }

    .gnavareapc .gnav .gnav__list li {
        width: fit-content;
        font-size: 15px;
        line-height: 1;
        margin-left: 20px;
    }

    .gnavareasp {
        display: none;
    }
}

/* headerpc end ====================================================*/

/* headersp
====================================================*/
@media screen and (max-width: 960px) {
    .gnavheader {
        width: 100%;
        height: calc(100 * (100svw / 750));
        background-color: #fff;
        color: #2D2D2D;
        position: sticky;
        top: 0;
        z-index: 999;
    }

    .gnavareasp {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .gnavareasp .gnavlogo {
        width: calc(240 * (100svw / 750));
        margin-left: calc(20 * (100svw / 750));
    }

    .gnavareasp .gnavbtn {
        width: calc(56 * (100svw / 750));
        height: calc(56 * (100svw / 750));
        margin-right: calc(50*(100svw / 750));
        position: relative;
        overflow: hidden;
    }

    .gnavareasp .gnavbtn::before {
        content: '';
        width: calc(56 * (100svw / 750));
        height: calc(56 * (100svw / 750));
        background-image: url(../img/gnavopen.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: .3s;
    }

    .gnavareasp .gnavbtn::after {
        content: '';
        width: calc(34 * (100svw / 750));
        height: calc(34 * (100svw / 750));
        background-image: url(../img/gnavclose.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        pointer-events: none;
        transition: .3s;
    }

    .gnavareasp .gnavbtn.open::before {
        opacity: 0;
        pointer-events: none;
    }

    .gnavareasp .gnavbtn.open::after {
        opacity: 1;
        pointer-events: auto;
    }

    .gnavareasp .gnav {
        width: 100%;
        min-height: calc(100svh - calc(100 * (100svw / 750)));
        background-color: #fff;
        position: fixed;
        top: calc(100 * (100svw / 750));
        left: 0;
        transform: translateX(100%);
        transition: .5s;
    }

    .gnavareasp .gnav.open {
        transform: translateX(0%);
    }

    .gnavareasp .gnav .gnav__list li {
        width: 100%;
        height: calc(85 * (100svw / 750));
        font-size: calc(30 * (100svw / 750));
        line-height: calc(85 * (100svw / 750));
        border-top: 1px solid #ccc;
    }

    .gnavareasp .gnav .gnav__list li a {
        width: 100%;
        height: 100%;
        padding-left: calc(40 * (100svw / 750));
        display: block;
    }

    .gnavareasp .gnav .gnav__snsarea {
        width: 100%;
        height: 100%;
        display: block;
        padding-top: calc(40 * (100svw / 750));
        border-top: 1px solid #ccc;
    }

    .gnavareasp .gnav .gnav__snsarea .gnav__snsttl {
        font-size: calc(45 * (100svw / 750));
        letter-spacing: 0.1em;
        text-align: center;
    }

    .gnavareasp .gnav .gnav__snsarea .gnav__sns {
        width: calc(164 * (100svw / 750));
        margin: calc(45 * (100svw / 750)) auto 0;
        display: flex;
        justify-content: space-between;
    }

    .gnavareasp .gnav .gnav__snsarea .gnav__sns li {
        width: calc(62 * (100svw / 750));
    }

    .gnavareapc {
        display: none;
    }
}

/* headersp end ====================================================*/



/* gradationbg
====================================================*/
.gradationbg {
    width: 100%;
    max-width: 1080px;
    padding: 2px;
    margin: 0 auto;
    position: relative;
    border-radius: 26px;
    z-index: 2;
    border-radius: 20px;
    background: -moz-linear-gradient(50% 0% -90deg, rgba(240, 204, 126, 1) 0.56%, rgba(234, 194, 109, 1) 20.81%, rgba(218, 167, 64, 1) 60.8%, rgba(200, 137, 15, 1) 100%);
    background: -webkit-linear-gradient(-90deg, rgba(240, 204, 126, 1) 0.56%, rgba(234, 194, 109, 1) 20.81%, rgba(218, 167, 64, 1) 60.8%, rgba(200, 137, 15, 1) 100%);
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0.0056, rgba(240, 204, 126, 1)), color-stop(0.2081, rgba(234, 194, 109, 1)), color-stop(0.608, rgba(218, 167, 64, 1)), color-stop(1, rgba(200, 137, 15, 1)));
    background: -o-linear-gradient(-90deg, rgba(240, 204, 126, 1) 0.56%, rgba(234, 194, 109, 1) 20.81%, rgba(218, 167, 64, 1) 60.8%, rgba(200, 137, 15, 1) 100%);
    background: -ms-linear-gradient(-90deg, rgba(240, 204, 126, 1) 0.56%, rgba(234, 194, 109, 1) 20.81%, rgba(218, 167, 64, 1) 60.8%, rgba(200, 137, 15, 1) 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F0CC7E', endColorstr='#C8890F' ,GradientType=0)";
    -moz-border-radius: 26px;
    -webkit-border-radius: 26px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F0CC7E', endColorstr='#C8890F', GradientType=0);
}

@media screen and (max-width: 1080px) {
    .gradationbg {
        width: 90%;
        border-radius: calc(26 * (100svw / 750));
    }
}

@media screen and (max-width: 960px) {
    .gradationbg {
        width: calc(700 * (100svw / 750));
        padding: calc(2 * (100svw / 750));
        border-radius: calc(26 * (100svw / 750));
    }
}

.gradationbg__inner {
    background-color: #fff;
    border-radius: 26px;
}

@media screen and (max-width: 960px) {
    .gradationbg__inner {
        border-radius: calc(26 * (100svw / 750));
    }
}

/* gradationbg end ====================================================*/

.contents {
    min-height: 50svh;
    padding: 100px 0;
    overflow: clip;
}

@media screen and (max-width: 960px) {
    .contents {
        padding: calc(100 * (100svw / 750)) 0;
    }
}


/* footer
====================================================*/
.footer {
    padding-top: 80px;
    background-color: #fff;
    position: relative;
    z-index: 10;
}

@media screen and (max-width: 960px) {
    .footer {
        padding-top: calc(80 * (100svw / 750));
    }
}

@media screen and (min-width: 961px) {
    .footer__block {
        width: 900px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.footer__logo {
    width: 250px;
}

@media screen and (max-width: 960px) {
    .footer__logo {
        width: calc(252 * (100svw / 750));
        margin: 0 auto;
    }
}

.footer__infoarea {
    width: 492px;
}

@media screen and (max-width: 960px) {
    .footer__infoarea {
        width: calc(616 * (100svw / 750));
        margin: calc(50 * (100svw / 750)) auto 0;
    }
}

.footer__infoarea p {
    font-size: 19px;
    line-height: 43px;
    font-weight: 400;
}

@media screen and (max-width: 960px) {
    .footer__infoarea p {
        font-size: calc(24 * (100svw / 750));
        line-height: calc(54 * (100svw / 750));
    }
}

.footer__infoarea dl {
    display: flex;
}

.footer__infoarea dt {
    width: 100px;
    display: flex;
    justify-content: space-between;
}

.footer__infoarea a {
    text-decoration: underline;
}

@media screen and (max-width: 960px) {
    .footer__infoarea {
        margin: calc(50 * (100svw / 750)) auto 0;
    }

    .footer__infoarea p {
        font-size: calc(24 * (100svw / 750));
        line-height: calc(54 * (100svw / 750));
    }

    .footer__infoarea dt {
        width: calc(130 * (100svw / 750));
    }
}

.footer__snsarea {
    width: fit-content;
    margin: 80px auto 0;
    display: block;
}

@media screen and (max-width: 960px) {
    .footer__snsarea {
        margin: calc(80 * (100svw / 750)) auto 0;
    }
}

.footer__snsttl {
    width: fit-content;
    font-size: 36px;
    letter-spacing: 0.1em;
    line-height: 1;
    text-align: center;
}

@media screen and (max-width: 960px) {
    .footer__snsttl {
        font-size: calc(45 * (100svw / 750));
    }
}

.footer__sns {
    width: 132px;
    margin: 50px auto 0;
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width: 960px) {
    .footer__sns {
        width: calc(164 * (100svw / 750));
        margin: calc(50 * (100svw / 750)) auto 0;
    }
}

.footer__sns li {
    width: 50px;
}

@media screen and (max-width: 960px) {
    .footer__sns li {
        width: calc(62 * (100svw / 750));
    }
}

.footer__copy {
    width: 100%;
    height: 50px;
    margin: 50px auto 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 50px;
    text-align: center;
    background-color: #3C3C3C;
    color: #fff;
}

@media screen and (max-width: 960px) {
    .footer__copy {
        height: calc(100 * (100svw / 750));
        margin: calc(50 * (100svw / 750)) auto 0;
        font-size: calc(24 * (100svw / 750));
        line-height: calc(100 * (100svw / 750));
    }
}

/* footer end ====================================================*/