@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap");
@import url("https://fonts.googleapis.com/css2?family=League+Gothic&family=Noto+Sans+JP:wght@700&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    font-family: "Noto Sans JP", system-ui;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: var(--default_font_c);
}

textarea {
    font-size: 1.6rem;
}

html {
    font-size: 62.5%;
    touch-action: manipulation;
}

a,
a:hover,
a:visited {
    color: inherit;
}
h1 {
    font-size: 2.986rem;
}
h2 {
    font-size: 2.488rem;
    font-weight: 700;
    font-style: normal;
    /* color: var(--head_font_c); */
    color: var(--accent_gray_c);
}
h3 {
    font-size: 2.074rem;
    font-weight: 600;
}
h4 {
    font-size: 1.728rem;
    font-weight: 600;
}
h5 {
    font-size: 1.44rem;
}
h6 {
    font-size: 1.2rem;
}
p {
    font-size: 1.6rem;
}
small {
    font-size: 0.833rem;
}

body {
    height: 100svh;
    width: 100%;
    overflow-y: scroll;
    overscroll-behavior: contain;
    background: var(--bg_c);
    position: relative;
    font-size: 1.6rem;
}

body.no_scroll {
    /* overflow-y: hidden; */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

:root {
    --header_c: #1c1c1c;
    --base_c: #fff;
    --bg_c: #f9f9f9;
    --accent_gray_c: #f5f5f5;
    --accent_blk_c: #818181;
    --border_c: #d1d1d1;
    --default_font_c: #333;
    --head_font_c: #262626;
    --head_sub_font_c: #363636;
    --icon_btn_c: #858585;
    --input_fill_c: #f3f3f3;

    /* --bg_2: #d4d4d4;
    --font_color: #333333;
    --sub_bk: #d1d1d1;
    --red: #e40012;
    --blue: #009ee7;
    --yellow: #ffef00;

    --d_primary: #1d63ed;
    --d_primary_rgb: 29, 99, 237;
    --d_accent_1: #e5f2fc;
    --d_accent_1_rgb: 229, 242, 252;
    --d_accent_2: #00084d;
    --d_accent_2_rgb: 0, 8, 77;
    --d_accent_3: #17191e;
    --d_accent_3_rgb: 23, 25, 30; */
}

input,
select,
textarea {
    border: var(--border_c) 1px solid;
    border-radius: 5px;
    padding: 0 5px;
}
input:placeholder-shown,
select:placeholder-shown,
textarea:placeholder-shown {
    background: var(--input_fill_c);
}

.accent_btn {
    background: #128b81;

    &:hover {
        background: color-mix(in srgb, #128b81, #fff 20%);
    }
    &:active {
        background: color-mix(in srgb, #128b81, #000 20%);
    }
}
.del_btn {
    background: #f4cbcb;
    & > * {
        color: #cd1515;
    }
    &:hover {
        background: color-mix(in srgb, #f4cbcb, #fff 20%);
    }
    &:active {
        background: color-mix(in srgb, #f4cbcb, #000 5%);
    }
}

button {
    border-radius: 5px;
    background: var(--icon_btn_c);
    color: #fff;
    padding: 8px 25px;
    border: none;
    outline: none;
    cursor: pointer;
    &:hover {
        background: color-mix(in srgb, var(--icon_btn_c), #fff 20%);
    }
    &:active {
        background: color-mix(in srgb, var(--icon_btn_c), #000 20%);
    }
}

.container {
    width: 100%;
    height: 100%;
    padding: 0 min(3%, 20px);
}

.login_container {
    background: #d1d1d1;
    display: flex;
    justify-content: center;
    align-items: center;
}

form#login_form {
    width: 100%;
    max-width: 700px;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    border-radius: 5px;
    box-shadow: rgba(149, 157, 165, 0.296) 0px 8px 24px;
    padding: 30px 40px; /* 修正！！ */
    background: #ffffff;
    transition: all 0.8s;

    & h1 {
        text-align: center;
        font-size: 3.8rem;
        margin-bottom: 40px;
    }

    &:hover {
        box-shadow: rgba(149, 157, 165, 0.296) 1px 1px 4px;
    }
}

@media screen and (width < 700px) {
    form#login_form {
        padding: 30px max(5%, 18px); /* 修正！！ */
    }
}

.login_input_wrapper {
    display: flex;
    position: relative;

    & .login_icon {
        width: 50px;
        height: 100%;
        text-align: center;
        place-content: center;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }
    & .login_icon > svg {
        width: 30%;
        height: auto;
        vertical-align: middle;
        fill: var(--icon_btn_c);
    }

    & input {
        width: 100%;
        height: 100%;
        padding: 8px 10px 8px 50px;
        outline: none;
        font-size: 1.8rem;
        caret-color: #128b81;
    }
}

input#login_pw {
    padding: 8px 50px !important;
}

#login_eye {
    width: 50px;
    height: 100%;
    text-align: center;
    place-content: center;
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    z-index: 2;
    cursor: pointer;

    & > svg {
        width: 50% !important;
        height: auto;
    }
}

.login_error_msg {
    color: #cd1515;
    min-height: 25px;
    padding-left: 5px;
}

.login_register_wrapper {
    font-size: 1.6rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    & input[type="checkbox"] {
        width: 1.9rem;
        aspect-ratio: 1/1;
    }
}

#login_register_checkbox {
    transition: all 0.6s;
}

.login_btn_wrapper {
    margin-top: 20px;

    & button {
        width: 100%;
        height: 45px;
        background: #128b81;
        transition: background 0.3s;
        font-weight: 400;
    }

    & button:hover {
        background: color-mix(in srgb, #128b81, #fff 20%);
    }
}