@charset "UTF-8";

.spOnly {
    display: none;
}

@media screen and (max-width: 640px) {
    .spOnly {
        display: block;
    }
    .header .header_inner .btn {
        display: block;
        width: 34vw;
        position: absolute;
        z-index: 1;
        right: 12.07vw;
        top: 3.45vw;
    }
    .header .header_inner .spbtn {
        width: 12.07vw;
        height: 12.07vw;
        position: absolute;
        z-index: 999;
        right: 0;
        top: 0;
        display: grid;
        justify-items: center;
        align-content: center;
        grid-gap: 1vw;
        padding-top: 2vw;
        cursor: pointer;
    }
    .header .header_inner .spbtn .bar {
        width: 40%;
        height: 4.14vw;
        position: relative;
    }
    .header .header_inner .spbtn .bar::before, .header .header_inner .spbtn .bar::after {
        content: "";
        display: block;
        height: 3px;
        background-color: #00aa8c;
        width: 100%;
        border-radius: 1.5px;
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        transition: 0.3s;
        transform-origin: center center;
    }
    .header .header_inner .spbtn .bar::after {
        top: auto;
        bottom: 0;
    }
    .header .header_inner .spbtn .bar span {
        display: block;
        height: 3px;
        background-color: #00aa8c;
        width: 100%;
        border-radius: 1.5px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: 0.3s;
    }
    body.menuopen .header .header_inner .spbtn .bar span {
        opacity: 0;
    }
    .header .header_inner .spbtn .txt {
        font-size: 2.24vw;
    }
    .header .header_inner .spbtn .txt .open {
        display: none;
    }
    .header .header_inner .sp_menu ul {
        width: 70%;
        max-width: 400px;
        min-width: 300px;
        height: 100dvh;
        min-height: 100dvh;
        background-color: #FFFFFF;
        position: fixed;
        z-index: 2;
        top: 0;
        right: -105%;
        padding-top: 7.43dvh;
        padding-bottom: 8.57dvh;
        pointer-events: none;
        transition: 0.3s;
    }
    .header .header_inner .sp_menu ul li {
        border-bottom: 1px solid #C8C8C8;
    }
    .header .header_inner .sp_menu ul li a {
        font-size: min(4.14dvh, 1.4rem);
        height: 7.2dvh;
        padding: 0 1em;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        color: #000000;
    }
    .header .header_inner .sp_menu ul li.spcta.bg-red-btn {
        background-color: #f85d62;
        border: none;
        border-radius: 5px;
        color: #fff;
    }
    .header .header_inner .sp_menu ul li.spcta.bg-red-btn a {
        color: #fff;
        font-weight: bold;
    }
    .header .header_inner .sp_menu ul li.under-btn {
        border: none;
        text-align: center;
    }
    .header .header_inner .sp_menu ul li.under-btn a {
        color: #0096FF;
    }
    .header .header_inner .bg {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0;
        background-color: #FFFFFF;
        width: 100%;
        height: 19vw;
        transition: 0.3s;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 65%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 65%, 0 100%);
    }
    #header .header .header_inner .sp_menu ul li.spcta:first-of-type {
        margin-top: 4.57dvh;
      }
      #header .header .header_inner .sp_menu ul li.spcta {
        border: 1px solid #C8C8C8;
        width: 80%;
        margin: 1.14dvh auto 1.14dvh auto;
        text-align: center;
      }
      #header .header .header_inner .sp_menu ul li.spcta a::after {
        content: none;
      }
      #header .header .header_inner .sp_menu ul li.spcta.bg-red-btn {
        background-color: #f85d62;
        border: none;
        border-radius: 5px;
        color: #fff;
      }
      #header .header .header_inner .sp_menu ul li.spcta.bg-red-btn a{
        color: #fff;
        font-weight: bold;
      }
      body.menuopen {
        overflow: hidden;
      }
      body.menuopen .header .header_inner .spbtn .bar::before {
        transform: translate(-50%, -50%) rotate(45deg);
        top: 50%;
      }
      body.menuopen .header .header_inner .spbtn .bar::after {
        transform: translate(-50%, 50%) rotate(-45deg);
        bottom: 50%;
      }
      body.menuopen .header .header_inner .spbtn .bar span {
        opacity: 0;
      }
      body.menuopen .header .header_inner .spbtn .txt .close {
        display: none;
      }
      body.menuopen .header .header_inner .spbtn .txt .open {
        display: block;
      }
      body.menuopen .header .header_inner .sp_menu ul {
        right: 0;
        pointer-events: all;
      }
      body.menuopen .header .header_inner::before {
        content: "";
        display: block;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        background-color: rgba(0, 0, 0, 0.5);
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1;
      }
}