@charset "utf-8";

:root {
    --primary-100: #0eaf90;
    --primary-200: #7edac8;
    --primary-300: #ffffff;
    --accent-100: #eef08c;
    --accent-200: #888e2e;
    --text-100: #2a2a2a;
    --text-200: #525252;
    --bg-100: #ffffff;
    --bg-200: #f5f5f5;
    --bg-300: #b3b3b3;
    --error-100: #DA1333;
    --temp-min: #1359da;
}

html {
    /* 14px */
    color: var(--text-100);
    font-size: 3.5vw;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 400;
    font-style: normal;
}

.pc {
    display: none;
}

.sp {
    display: block;
}

input::placeholder {
    color: var(--bg-300);
}

textarea::placeholder {
    color: var(--bg-300);
}

/* データなしメッセージ */
.no_data_message {
    color: var(--bg-300);
    padding: 2% 0 0 1%;
}

/* モーダル用 */
.modal_no_data_message {
    color: var(--bg-300);
    padding: 0 0 0 5%;
}

/* しおり一覧用 */
.guide_no_data_message {
    color: var(--bg-300);
    text-align: center;
    padding: 3% 0 0 0;
} 

/* ===== アカウント関連 ===== */
.account_header {
    /* margin: 9.71% 0 0 0; */
    padding: 2.43% 0;
}

.account_icon {
    margin: 0 0 0 1.94%;
}

.account_icon img {
    width: 30.43%;
    object-fit: contain;
}

.account_title {
    font-size: 1.71rem;
    text-align: center;
    margin: 7.04% 0 3.64% 0;
}

.account_form {
    border: 0.5px solid var(--bg-300);
    margin: 0 6.31%;
    padding: 7.28% 8.5%;
}

.account_label {
    display: block;
    font-size: 1rem;
    margin: 0 0 1.38% 0;
}

.account_input {
    width: 100%;
    border: 0.5px solid var(--bg-300);
    border-radius: 4px;
    margin: 0 0 5.19% 0;
    padding: 3.28% 5.19%;
}

.account_button {
    width: 100%;
    display: block;
    text-align: center;
    background-color: var(--accent-100);
    border: 1.2px solid var(--accent-100);
    border-radius: 4px;
    padding: 2.49% 0;
}

.account_button:hover {
    background-color: var(--bg-100);
    border: 1.2px solid var(--accent-100);
}

/* ログイン画面のチェック状態 */
.account_checkbox {
    background-color: var(--bg-300);
}

.account_checkbox_label {
    display: block;
    width: 100%;
    margin: 0 0 5.19% 0;
}

.account_checkbox_label input[type="checkbox"] {
    position: relative;
    width: 7.36%;
    aspect-ratio: 1;
    border: 2px solid var(--primary-100);
    border-radius: 4px;
    vertical-align: -5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0 2.78% 0 0;
    background-color: white;
}

/* チェックが入っている時のスタイル */
.account_checkbox_label input[type="checkbox"]:checked:before {
    position: absolute;
    top: 25%;
    left: 22%;
    transform: rotate(45deg);
    width: 50%;
    height: 50%;
    border-right: 4px solid var(--primary-100);
    border-bottom: 4px solid var(--primary-100);
    content: '';
}

.account_link {
    display: block;
    color: var(--primary-100);
    text-align: center;
    text-decoration: underline;
    margin: 4.85% 0 0 0;
}

.account_error {
    display: block;
    color: var(--error-100);
    text-align: center;
    font-size: 0.9rem;
    margin: 0 6.31% 2%;
}

.account_input_error {
    display: block;
    color: var(--error-100);
    font-size: 0.8rem;
    margin: 0 0 1.38% 0;
}

/* ===== FontAwesome呪文 新しいタブ ===== */
a[target="_blank"]::after {
    content: '\f08e';
    font-family: FontAwesome;
    /* font-awesomeを使うための呪文 */
    margin: auto;
    margin-left: 0.5em;
}

/* ===== フッターメニュー ===== */
#footer_menu {
    position: fixed;
    width: 100%;
    bottom: -1.5%;
    opacity: 0.9;
    z-index: 90;
}

#footer_menu .menu_container {
    position: relative;
    background-color: var(--bg-100);
}

#footer_menu .menu_container .register_button {
    display: inline-block;
    position: absolute;
    height: 100%;
    bottom: 100%;
    right: 3.38%;
}

#footer_menu .menu_container .register_button_false {
    display: none;
}

#footer_menu .menu_container .register_button i {
    color: var(--primary-100);
    font-size: 3.86rem;
}

#footer_menu ul {
    display: flex;
    margin: 0.72% 6.52% 3.38%;
}

#footer_menu ul li {
    width: 20%;
    text-align: center;
    padding: 1.9% 0 4.1%;
}

#footer_menu .menu_link i {
    display: block;
    color: var(--bg-300);
    font-size: 1.79rem;
    margin: 0 auto 5.58%;
}

#footer_menu .menu_link span {
    display: block;
    color: var(--bg-300);
    font-size: 0.71rem;
    font-weight: bold;
}

/* ====== 管理画面 ====== */
.mgmt_form {
    padding: 0 6.52% 25%;
}

.mgmt_item {
    margin: 0 0 3.62% 0;
}

.mgmt_label {
    display: block;
    font-size: 1.14rem;
    margin: 0 0 0.83% 0;
}

.mgmt_input {
    width: 100%;
    font-size: 1.14rem;
    border-radius: 4px;
    background-color: var(--bg-100);
    margin: 0;
    padding: 2.22% 4.16%;
}

.mgmt_textarea {
    width: 100%;
    height: 25%;
    font-size: 1.14rem;
    border-radius: 4px;
    background-color: var(--bg-100);
    padding: 2.22% 4.16%;
}

.mgmt_input_img {
    display: none;
}

.mgmt_button_label {
    display: block;
    width: 100%;
    font-size: 1.14rem;
    text-align: center;
    border-radius: 4px;
    background-color: var(--bg-100);
    margin: 3.06% 0 0 0;
    padding: 2.22% 0;
}

.mgmt_button_label:hover {
    color: var(--bg-300);
}

.mgmt_img {
    width: 100%;
    height: 38.65vw;
    object-fit: cover;
    border: none;
    background-color: var(--bg-100);
}

.mgmt_button {
    display: block;
    width: 100%;
    color: var(--bg-100);
    font-size: 1.14rem;
    font-weight: bold;
    text-align: center;
    border: 1px solid var(--primary-100);
    border-radius: 4px;
    background-color: var(--primary-100);
    padding: 1.93% 0;
}

.mgmt_button:hover {
    color: var(--primary-100);
    background-color: var(--bg-100);
}

.mgmt_delete_button {
    display: block;
    width: 80%;
    color: var(--error-100);
    font-weight: bold;
    text-align: center;
    border: 1px solid var(--error-100);
    border-radius: 4px;
    background-color: var(--bg-100);
    margin: 3.62% 10% 5.73%;
    padding: 0.97% 0;
}

.mgmt_delete_button:hover {
    color: var(--bg-100);
    background-color: var(--error-100);
}

.mgmt_exit_button {
    display: block;
    width: 80%;
    color: var(--bg-300);
    font-weight: bold;
    text-align: center;
    border: 1px solid var(--bg-300);
    border-radius: 4px;
    background-color: var(--bg-100);
    margin: 3.62% 10% 7.73%;
    padding: 0.97% 0;
}

.mgmt_exit_button:hover {
    color: var(--bg-100);
    background-color: var(--bg-300);
}

.mgmt_error {
    display: block;
    color: var(--error-100);
    text-align: center;
    font-size: 0.9rem;
    margin: 0 0 2.3%;
}

.mgmt_input_error {
    display: block;
    color: var(--error-100);
    font-size: 0.8rem;
    margin: 0 0 1.12% 0;
}

/* ====== PC用 ====== */
@media screen and (min-width: 800px) {
    html {
        /* font-size: 0.73vw; */
        font-size: 1vw;
    }

    body {
        overflow-x: clip;
        width: 100vw;
        height: 100vh;
    }

    #index {
        display: block;
    }

    .background {
        display: flex;
        position: fixed;
        /* width: 39.22vw; */
        /* width: 35vw; */
        width: 100vw;
        height: 100vh;
        /* background-image: url(../img/common/pc_background.png);
        background-repeat: no-repeat;
        background-size: cover; */
        background-color: var(--primary-200);
        z-index: -100;
    }

    #container_wrap {
        /* width: 21.56vw; */
        width: 30vw;
        min-height: 100vh;
        margin: 0 35vw;
        background-color: var(--bg-200);
    }

    #container_wrap .left_wrap {
        position: fixed;
        width: 35vw;
        height: 100vh;
        top: 0;
        left: 0;
    }

    #container_wrap .left_wrap img {
        position: absolute;
        width: 100%;
        bottom: 0;
    }

    #container_wrap .right_wrap {
        position: fixed;
        width: 35vw;
        height: 100vh;
        top: 0;
        right: 0;
        z-index: 3;
    }

    #container_wrap .right_wrap .nav_list {
        text-align: right;
        margin: 3vw 9vw 0;
    }

    #container_wrap .right_wrap .nav_list li {
        font-size: 1.4rem;
        font-weight: bold;
        margin: 0.6vw 0;
    }

    #container_wrap .right_wrap .nav_list li:nth-child(6) {
        margin-bottom: 2vw;
    }

    #container_wrap .right_wrap .nav_list li:nth-child(7),
    #container_wrap .right_wrap .nav_list li:nth-child(8),
    #container_wrap .right_wrap .nav_list li:nth-child(9) {
        font-size: 1.2rem;
        font-weight: normal;
        margin-right: 0.3vw;
    }
    
    #container_wrap .right_wrap .nav_list .nav_item a {
        color: var(--bg-100);
        padding: 0.3vw 0;
    }

    #container_wrap .right_wrap .nav_list .nav_item a[target="_blank"]::after {
        font-size: 1.3rem;
    }

    #container_wrap .right_wrap .nav_list .nav_item span {
        padding: 0.5vw;
    }

    #container_wrap .right_wrap .mobile_access {
        position: absolute;
        right: 8vw;
        bottom: 1vw;
        text-align: center;
    }

    #container_wrap .right_wrap .mobile_access p {
        position: relative;
        color: var(--bg-100);
        font-size: 1.2rem;
        margin: 0 0 0.8vw;
    }
    
    #container_wrap .right_wrap .mobile_access p::before,
    #container_wrap .right_wrap .mobile_access p::after {
        content: "";
        height: 90%;
        width: 0.05vw;
        background-color: var(--bg-100);
        position: absolute;
        bottom: 0;
    }

    #container_wrap .right_wrap .mobile_access p::before {
        left: 1.5vw;
        transform: rotate(-30deg);
    }

    #container_wrap .right_wrap .mobile_access p::after {
        right: 1.5vw;
        transform: rotate(30deg);
    }
    
    #container_wrap .right_wrap .mobile_access p .upper_text::after {
        content: "\A";
        white-space: pre;
    }

    #container_wrap .right_wrap .mobile_access img {
        height: 9vw;
    }

    .pc {
        display: block;
    }

    .sp {
        display: none;
    }

    #footer_menu {
        /* width: 21.56vw; */
        width: 30vw;
        bottom: -2.5%;
    }

    #footer_menu .menu_container {
        height: 12vh;
        background: none;
    }

    #footer_menu .menu_container .register_button {
        position: absolute;
        top: 0;
        right: 3%;
    }

    .mgmt_img {
        height: 10vw;
    }
}