@charset "utf-8";

/*---------------------------- for PC css----------------------------*/
/*---------------------------- setting on class ----------------------------*/
/*---------------------------- body related----------------------------*/
.body__back-image {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
        url("../images/backImage--2000x1200.jpg");
    /* url("../images/newWallPaper.jpg"); */
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}
/*---------------------------- header related----------------------------*/
.hamburger-menu {
    display: none;
}

.header-menu {
    align-items: center;
    background-color: rgba(55, 55, 55, 0.98);
    display: grid;
    grid-template: auto / 24vw 72vw;
    justify-content: space-evenly;
    padding: 30px 0% 10px;
    position: sticky;
    z-index: 2147483647;
}

.header-menu-arrangement {
    margin: 0 0 0 auto;
}

.header-menu__unordered-list {
    display: grid;
    grid: auto / auto-flow auto;
    justify-content: space-evenly;
    list-style: none;
}
.header-menu__list {
    font-size: 14px;
    margin: 0 0 0 15px;
}

.header-menu__title {
    color: black;
    font-size: 24px;
    letter-spacing: 4px;
    text-align: center;
}

.header-menu__title--white {
    color: #ddd;
}

.header-menu__link {
    color: #ddd;
    text-decoration: none;
}
/*---------------------------- form related ----------------------------*/
.frame {
    appearance: auto;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 4px;
}

.fieldset--padding_10px {
    padding: 10px;
    border-radius: 4px;
}

.radio-group--button2 {
    display: grid;
    grid-template: auto / repeat(auto-fill, 50%);
    justify-content: space-evenly;
}

.radio-group--button7 {
    display: grid;
    grid-template: auto / repeat(auto-fill, 14%);
    justify-content: space-evenly;
}

.radio-group label {
    cursor: pointer;
    display: block;
}

.textarea--resize_both {
    resize: both; /* 縦横方向のリサイズを許可（デフォルト値） */
}

@media (max-width: 1020px) {
    /*---------------------------- for smartphone css----------------------------*/
    /*---------------------------- setting on class ----------------------------*/
    /*---------------------------- body related----------------------------*/
    .body__back-image {
        background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
            url("../images/backImage--675x1200.jpg");
        /* url("../images/newWallPaper--675x1200.jpg"); */
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
    }
    /*---------------------------- header related----------------------------*/
    /* header & hamburger-menu color */
    :root {
        --background-navbar: rgba(55, 55, 55, 0.98);
    }

    .hamburger-menu {
        background: var(--background-navbar);
        display: block;
        height: 52px;
        position: sticky;
        top: 0;
        width: 100%;
        z-index: 2147483647;
    }

    /* hamburger-menu items */
    .hamburger-menu__unordered-list {
        background: var(--background-navbar);
        clear: both;
        height: auto;
        list-style: none;
        margin-top: 52px;
        padding: 0 0 10px 0;
        position: absolute;
        top: 0;
        transform: scale(1, 0);
        transform-origin: top;
        transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
        width: 100%;
    }

    /* hamburger-menu button */
    .hamburger-menu__btn:checked ~ .hamburger-menu__unordered-list {
        transform: scale(1, 1);
        transform-origin: top;
        transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
    }

    /* hamburger-menu text */
    .hamburger-menu__link {
        color: #ddd;
        font-size: 16px;
        font-weight: 500;
        text-decoration: none;
        letter-spacing: 2px;
        opacity: 0;
        text-transform: capitalize;
        transition: 0.5s;
    }

    .hamburger-menu__list {
        border-top: 1px solid rgb(75, 75, 75);
        margin: 0 54px;
        opacity: 0;
        padding: 15px 0;
        transition: 0.5s;
    }

    .hamburger-menu__btn:checked ~ .hamburger-menu__unordered-list a,
    .hamburger-menu__btn:checked ~ .hamburger-menu__unordered-list li {
        opacity: 1;
        transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.2s;
    }

    .hamburger-menu__btn {
        display: none;
    }

    .hamburger-menu__patty {
        cursor: pointer;
        display: inline-block;
        padding: 24px 14px;
        position: relative;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    .hamburger-menu__buns {
        background: #ddd;
        display: block;
        height: 3px;
        position: relative;
        transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
        width: 26px;
    }

    .hamburger-menu__buns:before,
    .hamburger-menu__buns:after {
        background: #ddd;
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
        width: 100%;
    }

    .hamburger-menu__buns:before {
        top: 9px;
    }

    .hamburger-menu__buns:after {
        bottom: 9px;
    }

    /* hamburger-menu Animation Start */
    .hamburger-menu__btn:checked
    ~ .hamburger-menu__patty
    .hamburger-menu__buns:before {
        transform: rotate(-45deg);
    }

    .hamburger-menu__btn:checked
    ~ .hamburger-menu__patty
    .hamburger-menu__buns:after {
        transform: rotate(45deg);
    }

    .hamburger-menu__btn:checked
    ~ .hamburger-menu__patty:not(.steps)
    .hamburger-menu__buns:before {
        top: 0;
    }
    .hamburger-menu__btn:checked
    ~ .hamburger-menu__patty:not(.steps)
    .hamburger-menu__buns:after {
        bottom: 0;  
    }

    .hamburger-menu__btn:checked ~ .hamburger-menu__patty .hamburger-menu__buns {
        background: rgba(0, 0, 0, 0);
        transition: 0.2192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
    }
    /* hamburger-menu Animation End */

    /* header Container */
    .hamburger-menu__title {
        align-items: center;
        box-sizing: border-box;
        display: flex;
        height: 52px;
        justify-content: center;
        position: absolute;
        width: 100%;
    }

    /* header Text */
    .hamburger-menu__title--white {
        color: #ddd;
        font-size: 20px;
        letter-spacing: 4px;
        position: absolute;
        text-transform: uppercase;
    }

    .header-menu {
        display: none;  
    }
    /*---------------------------- form related ----------------------------*/
    .frame {
        appearance: auto;
        border: 1px solid #ccc;
        padding: 5px;
        border-radius: 4px;
    }

    .fieldset--padding_10px {
        padding: 10px;
        border-radius: 4px;
    }

    .radio-group--button2 {
        display: grid;
        grid-template: repeat(auto-fill, 50%) / auto;
        /* justify-content: space-evenly; */
    }

    .radio-group--button7 {
        display: grid;
        grid-template: repeat(auto-fill, 14%) / auto;
        /* justify-content: space-evenly; */
    }

    .radio-group label {
        cursor: pointer;
        display: block;
    }
}