@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;800&family=Noto+Sans+JP:wght@100..900&family=Staatliches&display=swap');
@media screen and (min-width: 0px) {
    :root {
        --ui-color: 129, 129, 129;
        --white: 255, 255, 255;
        --gray: 112, 112, 112;
        --lightgray: 168, 168, 168;
        --header-height: 74px;
        --font-size-large: 18px;
        --font-size-normal: 15px;
        --font-size-small: 10px;
    }

    * {
        box-sizing: border-box;
        font-feature-settings: "palt" 1;
        word-break: auto-phrase;
        letter-spacing: 0.04em;
        font-weight: normal;
        -webkit-text-size-adjust: 100%;
    }

    body {
        position: relative;
        padding-top: var(--header-height);
        font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
        font-size: var(--font-size-normal);
        line-height: 1.5;
        counter-reset: number 0;
    }

    .ja p {
        text-align: justify;
        word-break: break-all;
    }

    a {
        text-decoration: none !important;
    }

    ::before,
    ::after {
        pointer-events: none;
    }

    .wrapper {
        padding: 0;
        overflow-x: hidden;
    }

    /*header*/
    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        padding: 9px 20px;
        height: var(--header-height);
        border-bottom: 1px solid rgb(var(--lightgray));
        background-color: rgb(var(--white));
        z-index: 50;
    }

    .scroll {
        background-color: transparent;
    }

    header .header_wrap {
        position: relative;
        display: flex;
        align-items: center;
        max-width: 1366px;
        height: 100%;
        margin: 0 auto;
    }

    header .logo {
        display: block;
        width: fit-content;
        padding: 0;
        max-width: calc(var(--logo-size-width) / 2);
        color: rgb(var(--theme-color));
        font-size: var(--font-size-normal);
        line-height: 1;
    }

    header .logo a {
        display: block;
    }

    header .logo a img {
        width: 100%;
        height: auto;
        vertical-align: middle;
    }

    .lang {
        margin-left: auto;
        margin-right: 10px;
    }

    .lang_btn {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 10px;
        color: rgb(var(--ui-color));
        border: none;
        background: none;
        cursor: pointer;
    }

    .lang_btn * {
        pointer-events: none;
    }

    .lang_list {
        position: absolute;
        margin: 0;
        padding: 10px;
        padding-top: 5px;
        color: rgb(var(--white));
        background-color: rgb(var(--ui-color));
    }

    .lang_list li.lang_child {
        list-style: none;
        border-bottom: 1px solid;
    }

    .lang_list li.lang_child a {
        display: block;
        padding: 6px 14px;
        color: inherit;
        text-align: center;
        letter-spacing: 0.1em;
        font-size: var(--font-size-normal);
    }

    .hamburger {
        width: 35px;
        aspect-ratio: 1;
    }

    #hamburger {
        position: fixed;
        top: calc(var(--header-height) / 2);
        right: 20px;
        width: 35px;
        height: 35px;
        translate: 0 -50%;
        cursor: pointer;
        transition: 0.3s;
        z-index: 100;
    }

    #hamburger .inner_line {
        display: block;
        width: 25px;
        height: 3px;
        background-color: rgb(var(--ui-color));
        /* border-radius: 2px; */
    }

    .u-active #hamburger {
        box-shadow: none;
    }

    .hamburger #nav_wrap {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: center;
        gap: 36px;
        display: flex;
        width: 100vw;
        height: 0px;
        background-color: rgb(var(--ui-color));
        font-weight: bold;
        font-size: var(--font-size-normal);
        line-height: 1.25;
        text-align: center;
        color: rgb(var(--white));
        overflow-y: scroll;
        transition: .4s;
    }

    .hamburger #nav_wrap.active {
        bottom: 0;
        height: 100dvh;
        padding-bottom: env(safe-area-inset-bottom);
        z-index: 100;
    }

    .hamburger #hamburger span {
        position: absolute;
        left: 50%;
        translate: -50% -50%;
        transition: 0.6s;
    }

    .hamburger #hamburger span:first-of-type {
        top: 25%;
    }

    .hamburger #hamburger span:nth-of-type(2) {
        top: 50%;
    }

    .hamburger #hamburger span:last-of-type {
        top: 75%;
    }

    .navActive .hamburger #hamburger span {
        background-color: rgb(var(--white));
    }

    .hamburger #hamburger span#line1.line_1 {
        top: 50%;
        rotate: 45deg;
    }

    .hamburger #hamburger span#line2.line_2 {
        opacity: 0;
    }

    .hamburger #hamburger span#line3.line_3 {
        top: 50%;
        rotate: -45deg;
    }

    .menu_area {
        width: 100%;
        max-width: 240px;
        margin-top: var(--header-height);
        border-top: 1px solid;
    }

    .menu_area ul {
        display: flex;
        flex-direction: column;
        padding: 0;
        padding: 0;
        margin: 0;
        padding-left: 0;
    }

    .menu_area ul li.menu_child {
        list-style: none;
        border-bottom: 1px solid;
    }

    .menu_area ul li.menu_child a {
        display: block;
        padding: 16px 20px;
        color: inherit;
        font-size: var(--font-size-normal);
        line-height: 1;
        text-transform: lowercase;
    }

    .wrap {
        max-width: 400px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .wrap + .wrap {
        margin-top: 55px;
    }

    /*footer*/
    footer {
        padding: 13px 0;
        color: rgb(var(--white));
        text-align: left;
        background-color: rgb(var(--theme-color));
    }

    footer .copyright {
        font-size: var(--font-size-small);
        line-height: 1;
        text-align: center;
        font-weight: normal;
        color: rgb(var(--white));
    }
}

@media screen and (max-width: 768px) {
    .lang_btn img {
        width: 20px;
        height: auto;
    }

    .pc {
        display: none !important;
    }
}

@media screen and (min-width: 769px) {
    :root {
        --header-height: 148px;
        --font-size-large: 30px;
        --font-size-normal: 25px;
        --font-size-small: 20px;
    }

    body {
        max-width: 100vw;
        overflow-x: hidden;
    }

    header {
        padding: 10px 40px;
    }

    header .header_wrap {
        padding: 0;
        gap: 16px;
    }

    header .logo_area a {
        width: fit-content;
        max-width: 290px;
    }

    header .logo {
        display: flex;
        align-items: center;
        gap: 10px;
        max-width: none;
        margin: 0;
        letter-spacing: .08em;
    }

    header .logo a img {
        max-width: var(--logo-size-width);
    }

    .lang {
        margin-right: 20px;
    }

    .hamburger {
        width: 50px;
    }

    #hamburger {
        right: 40px;
        width: 50px;
        height: 50px;
    }

    #hamburger .inner_line {
        width: 50px;
        height: 5px;
    }

    .hamburger #nav_wrap {
        left: auto;
        max-width: 480px;
        max-height: 640px;
        transition: .8s;
    }

    .hamburger #nav_wrap.active {
        bottom: calc(100dvh - 640px);
    }

    .menu_area {
        max-width: 320px;
        padding-bottom: var(--header-height);
    }

    .hamburger #nav_wrap .menu_area .menu_child a,
    .hamburger #nav_wrap .menu_area .menu_child span {
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
    }

    .wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: unset;
    }

    .wrap {
        width: calc(100vw - 40px);
        padding: 0;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }

    .wrap + .wrap {
        margin-top: 110px;
    }

    .sp {
        display: none !important;
    }
}

.br {
    display: inline-block;
}