@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * STYLES..............スタイル
 */





/*------------------------------------*\
    $STYLES
\*------------------------------------*/
/***** header Top *****/
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

    .header__line {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding-inline: 4%;
        background-color: #292929;
        box-sizing: border-box;
    }
    @media screen and (min-width: 768px) {
        .header__line { height: 80px }
    }
    @media screen and (max-width: 767px) {
        .header__line { height: 48px }
    }

        .header__logo {
            display: flex;
            align-items: center;
            height: 100%;
            padding-block: 8px;
            box-sizing: border-box;
        }
        .header__logo img.logo { height: 100% }
        .header__logo img.text {
            height: calc(100% * (48 / 64));
            padding-top: 5%;
            padding-left: 3%;
        }

        .header__accounts {
            padding-right: 2em;
            margin-left: auto;
            color: white;
            font-size: 12px;
            line-height: 1.5;
        }
        .header__accounts:hover { text-decoration: underline }

        .header__btn {
            display: block;
            cursor: pointer;
        }
        .header__btn img { width: 100% }
        @media screen and (min-width: 768px) {
            .header__btn { width: 32px }
        }
        @media screen and (max-width: 767px) {
            .header__btn { width: 28px }
        }

    /**
     * Navigation
     * ^nav
     */
    .header__nav {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100vh;
        height: -webkit-fill-available;
        pointer-events: none;
        z-index: 1
    }

        .header__nav__overlay {
            display: block;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            opacity: 0;
            transition: opacity .15s linear;
        }
        .nav-flag:checked ~ .header__nav .header__nav__overlay {
            opacity: 1;
            pointer-events: visible;
        }

        .header__menu {
            position: absolute;
            top: 0;
            right: 0;
            width: min(calc(100% - 32px), 320px);
            height: 100%;
            background-color: white;
            transition: transform .15s .15s linear;
        }
        .nav-flag:checked ~ .header__nav .header__menu {
            transform: translateX(0);
            pointer-events: visible;
        }
        @media screen and (min-width: 768px) {
            .header__menu { transform: translateX(calc(100% + 48px)) }
        }
        @media screen and (max-width: 767px) {
            .header__menu { transform: translateX(calc(100% + 32px)) }
        }

            .header__nav__closed {
                position: absolute;
                top: 0;
                right: 100%;
                width: var(--size);
                height: var(--size);
                cursor: pointer;
            }
            @media screen and (min-width: 768px) {
                .header__nav__closed { --size: 48px }
            }
            @media screen and (max-width: 767px) {
                .header__nav__closed { --size: 32px }
            }

            .header__nav__closed::before,
            .header__nav__closed::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                width: 96%;
                height: 2px;
                background-color: white;
            }
            .header__nav__closed::before { transform: translate(-50%, -50%) rotate(45deg) }
            .header__nav__closed::after { transform: translate(-50%, -50%) rotate(-45deg) }

            /**
             * ^lists
             */
            .header__menu__list {
                width: 100%;
                height: 100%;
                overflow-y: auto;
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .header__menu__list::-webkit-scrollbar { display: none }
            .header__menu__list--child {
                display: none;
                border-top: 1px solid #ccc;
                background-color: rgba(0, 0, 0, 0.05);
                overflow: hidden;
            }

                .header__menu__item,
                .header__menu__item--child { border-bottom: 1px solid #ccc }
                .header__menu__item--child:last-of-type { border-bottom: none }

                    /*a, button*/.header__menu__link,
                    /*a, button*/.header__menu__link--child {
                        display: block;
                        width: 100%;
                        padding-block: 8px;
                        padding-inline: 16px;
                        color: black;
                        font-size: 16px;
                        line-height: 1.25;
                        box-sizing: border-box;
                        text-align: left;
                        text-decoration: none;
                    }
                    button.header__menu__link {
                        position: relative;
                        padding-right: 60px;
                        cursor: pointer;
                    }
                    button.header__menu__link::before {
                        content: "";
                        position: absolute;
                        top: 50%;
                        right: 16px;
                        transform: translateY(-50%);
                        width: 1em;
                        height: 0.5em;
                        background-color: black;
                        clip-path: polygon(0 0, 50% 80%, 100% 0, 50% 100%);
                        transition: clip-path .15s linear;
                    }
                    button.header__menu__link.active::before { clip-path: polygon(0 100%, 50% 0%, 100% 100%, 50% 20%) }


/* Title block */
.main { padding-inline: 4% }
@media screen and (min-width: 768px) {
    .main { padding-top: 80px }
}
@media screen and (max-width: 767px) {
    .main {
        padding-top: 48px;
        background-color: white;
    }
}

    .main__head {
        margin-inline: calc(-100% / 0.92 * 0.04);
        background-image: url("../img/common/header_title_bg.png");
        background-repeat: repeat-x;
        background-size: contain;
        text-align: center;
        white-space: nowrap;
    }
    @media screen and (min-width: 768px) {
        .main__head { padding-block: 16px }
            .main__head__title { font-size: 30px }
            .main__head__title--en { font-size: 14px }
    }
    @media screen and (max-width: 767px) {
        .main__head { padding-block: 8px }
            .main__head__title { font-size: 24px }
            .main__head__title--en { font-size: 12px }
    }

    .main__inner {
        width: min(900px, 100%);
        margin-inline: auto;
        background-color: white;
        box-sizing: border-box;
    }