@charset "UTF-8";

/* ============================================================
   NAVI_V2.CSS — 推し旅コンポーネント v2 ナビゲーション共通
   REM SYSTEM: event.css と同じ pocoapokemon 方式
   100px = 1rem at 393px viewport  (design px ÷ 100 = rem)
   ============================================================ */

:root {
    --design-width-sp: 393;
    --content-width-pc: 430;
    --rem-ratio: calc(393 / 100);
    /* 3.93 */
    font-size: calc(430px / 3.93);
}

@media screen and (max-width: 430px) {
    :root {
        font-size: calc(100vw / 3.93);
    }
}

#mainHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    padding: 0.10rem;
    position: fixed;
    width: 100%;
    top: 0;
    transition: top 0.3s;
    box-shadow: 0 0.02rem 0.10rem rgba(0, 0, 0, 0.1);
    z-index: 100;
    max-height: 0.6rem;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 0.40rem;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 98%;
    margin: auto;
}

.menuBar {
    display: flex;
    align-items: center;
}

.hamburger-icon {
    fill: #000;
    height: 0.40rem;
}

#alertModal {
    display: none;
    z-index: 200;
}

#navLinks {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100%;
    width: 100vw;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    padding: 0.50rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: auto;
}

#navLinks.open {
    transform: translateX(0);
}

#navLinks ul {
    width: 100%;
    list-style: none;
    padding: 0;
}

#navLinks ul li {
    font-size: 0.20rem;
    margin-bottom: 0.20rem;
}

#navLinks ul li a {
    display: block;
    padding: 0.10rem 0.15rem;
    color: #333;
    text-decoration: none;
}

#close-btn {
    position: absolute;
    top: 0.20rem;
    right: 0.20rem;
    border: none;
    background: none;
    font-size: 0.30rem;
    cursor: pointer;
    color: #000;
}

.loginButtonStyle {
    color: #fff;
    background: linear-gradient(135deg, #fe6300, #ffba00);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.20rem;
    font-size: 0.18rem;
    font-weight: 500;
    width: 100%;
    max-width: 3.80rem;
    max-height: 0.60rem;
    border-radius: 0.05rem;
    text-decoration: none;
    cursor: pointer;
    margin: auto;
}

.loginButtonStyle img {
    height: 0.20rem;
    width: auto;
    margin-right: 0.15rem;
}

.logoutButton {
    color: #fff;
    background: linear-gradient(135deg, darkgray, gray);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.20rem;
    font-size: 0.18rem;
    font-weight: 500;
    width: 100%;
    max-width: 3.80rem;
    height: 0.60rem;
    border-radius: 0.05rem;
    text-decoration: none;
    cursor: pointer;
    margin: auto;
}

.logoutButton img {
    height: 0.20rem;
    width: auto;
    margin-right: 0.15rem;
}

@media (max-width: 768px) {
    .menuBar {
        display: flex;
    }
}

/* Loading Screen */

#loadingScreen {
    position: fixed;
    z-index: 101;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.loader {
    display: inline-block;
    width: 0.50rem;
    height: 0.50rem;
    border: 0.03rem solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

#loadingText {
    color: #fff;
    font-size: 0.20rem;
    margin-top: 0.20rem;
}

/* Survey */

#surveyModal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.20rem;
    padding-top: 0.20rem;
    overflow: auto;
    overflow-x: hidden;
    z-index: 100;
}

.survey-close {
    position: absolute;
    right: 0.05rem;
    top: 0.10rem;
    background: none;
    border: none;
    font-size: 0.30rem;
    cursor: pointer;
    color: #fff;
    z-index: 101;
}

.survey-content {
    background-color: #fff;
    padding: 0.20rem;
    margin-top: 5vh;
    width: 100%;
    max-width: 4.00rem;
    border-radius: 0.15rem;
    box-shadow: 0 0 0.30rem rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: auto;
    max-height: 75vh;
}

#survey-submit {
    display: block;
    width: 100%;
    padding: 0.15rem;
    border: none;
    background: linear-gradient(to right, #f8bd00, #f19500, #eb6c00);
    color: white;
    font-size: 0.16rem;
    border-radius: 0.10rem;
    cursor: pointer;
    text-align: center;
    margin-top: 0.20rem;
    transition: background-color 0.3s;
    font-weight: 600;
    font-family: 'Noto Sans JP', sans-serif;
}

#survey-submit:disabled {
    pointer-events: none;
    background: linear-gradient(to right, darkgray, gray);
}

#survey-form p {
    font-size: 1.2em;
    font-family: 'Noto Sans JP';
    font-weight: 500;
    margin-bottom: 0.15rem;
}

#survey-form select {
    width: 100%;
    padding: 0.15rem;
    margin-bottom: 0.20rem;
    border-radius: 0.25rem;
    border: 0.01rem solid #ccc;
    font-size: 1.1em;
}

@media (max-width: 375px) {

    .logoutButton,
    .loginButtonStyle {
        font-size: 4.5vw;
    }
}