/* ========================================
   3UPラボ - メニューオーバーレイ
   ======================================== */

.menu-overlay {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-white);
    z-index: 99;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
}

.menu-overlay.is-active {
    transform: translateX(0);
}

.menu-overlay__inner {
    padding: 0;
}

.menu-overlay__section {
    margin-bottom: var(--spacing-xl);
}

.menu-overlay__title {
    font-size: var(--font-size-sm);
    color: var(--color-gray);
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--color-border);
}

.menu-overlay__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.menu-overlay__item a {
    display: block;
    padding: var(--spacing-sm) 0;
    color: var(--color-text);
    font-size: var(--font-size-base);
}

.menu-overlay__item a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

/* ========================================
   お仕事アコーディオン
   ======================================== */

.menu-accordion {
    background-color: var(--color-white);
}

.menu-accordion__header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    font-size: var(--font-size-base);
    font-weight: bold;
    color: var(--color-primary);
    background-color: var(--color-white);
    border: none;
    border-bottom: 1px solid var(--color-primary);
    cursor: pointer;
}

.menu-accordion__header:hover {
    background-color: var(--color-gray-light);
}

/* 矢印アイコン（オレンジ円 + 白抜き三角） */
.menu-accordion__icon {
    width: 20px;
    height: 20px;
    background-color: var(--color-primary);
    border-radius: 50%;
    position: relative;
    transition: transform 0.3s ease;
}

.menu-accordion__icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -30%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid var(--color-white);
}

/* 開いている時は右向きに回転 */
.menu-accordion.is-open .menu-accordion__icon {
    transform: rotate(-90deg);
}

/* サブメニューコンテンツ */
.menu-accordion__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background-color: var(--color-primary-light);
}

.menu-accordion.is-open .menu-accordion__content {
    max-height: 500px;
}

.menu-accordion__item {
    border-bottom: 1px solid var(--color-primary);
}

.menu-accordion__item a {
    display: block;
    padding: var(--spacing-md);
    padding-left: var(--spacing-lg);
    color: var(--color-text);
    font-size: var(--font-size-base);
    text-decoration: none;
}

.menu-accordion__item a:hover {
    background-color: var(--color-gray-light);
    text-decoration: none;
}

/* ========================================
   アイコンメニュー（2列×3行グリッド）
   ======================================== */

.menu-icons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
    padding: var(--spacing-xl) var(--spacing-lg);
    background-color: var(--color-white);
}

.menu-icons__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    text-decoration: none;
    color: var(--color-text);
}

.menu-icons__item:hover {
    text-decoration: none;
    opacity: 0.8;
}

/* SVGアイコン（円形ボーダー込み） */
.menu-icons__icon {
    width: 60px;
    height: 60px;
}

.menu-icons__item span {
    font-size: var(--font-size-sm);
    font-weight: bold;
    color: var(--color-text);
}

/* ========================================
   レスポンシブ（PC対応 - モーダルウィンドウ）
   ======================================== */

@media (min-width: 768px) {
    /* オーバーレイ背景（半透明） */
    .menu-overlay {
        top: 0;
        background-color: rgba(0, 0, 0, 0.3);
        transform: none;
        opacity: 0;
        visibility: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: var(--spacing-xl);
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .menu-overlay.is-active {
        opacity: 1;
        visibility: visible;
    }

    /* モーダルボックス */
    .menu-overlay__inner {
        background-color: var(--color-white);
        border-radius: 0;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 1);
        max-width: 800px;
        width: 90%;
        padding: var(--spacing-xl) 120px;
        max-height: 80vh;
        overflow-y: auto;
    }

    /* お仕事ヘッダー（PCでは常に開いた状態） */
    .menu-accordion__header {
        padding: var(--spacing-sm) 0;
        border-bottom: 1px solid var(--color-primary);
        cursor: default;
    }

    .menu-accordion__header:hover {
        background-color: transparent;
    }

    /* PCではアイコン非表示 */
    .menu-accordion__icon {
        display: none;
    }

    /* サブメニュー（常に表示、2列グリッド） */
    .menu-accordion__content {
        max-height: none;
        overflow: visible;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
        background-color: transparent;
        padding: var(--spacing-md) 0;
        border-bottom: 1px solid var(--color-primary);
    }

    .menu-accordion__item {
        border-bottom: none;
    }

    /* PC版: モニレポ参加履歴とBuzzクラの位置を入れ替え */
    .menu-accordion__item:nth-child(1) { order: 1; } /* モニレポ */
    .menu-accordion__item:nth-child(2) { order: 3; } /* モニレポ参加履歴 → 3番目 */
    .menu-accordion__item:nth-child(3) { order: 2; } /* Buzzクラ → 2番目 */
    .menu-accordion__item:nth-child(4) { order: 4; } /* スマートタスク */

    .menu-accordion__item a {
        display: inline-flex;
        align-items: center;
        padding: var(--spacing-sm) 0;
        padding-left: 0;
        color: var(--color-text);
    }

    /* 末尾にオレンジ丸+白抜き下向き三角 */
    .menu-accordion__item a::after {
        content: '';
        width: 16px;
        height: 16px;
        background-color: var(--color-primary);
        border-radius: 50%;
        margin-left: var(--spacing-xs);
        flex-shrink: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath fill='white' d='M0 0l6 5-6 5z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 8px 5px;
    }

    .menu-accordion__item a:hover {
        background-color: transparent;
        color: var(--color-primary);
    }

    /* アイコンメニュー（3列グリッド） */
    .menu-icons {
        grid-template-columns: repeat(3, 1fr);
        padding: var(--spacing-xl) 0;
        gap: var(--spacing-xl);
        background-color: transparent;
    }

    .menu-icons__icon {
        width: 64px;
        height: 64px;
    }

    .menu-icons__item span {
        font-size: var(--font-size-sm);
    }

    /* PC版: 報酬申請とお友達紹介の位置を入れ替え */
    .menu-icons__item:nth-child(1) { order: 1; }
    .menu-icons__item:nth-child(2) { order: 2; }
    .menu-icons__item:nth-child(3) { order: 4; } /* 報酬申請 → 4番目 */
    .menu-icons__item:nth-child(4) { order: 3; } /* お友達紹介 → 3番目 */
    .menu-icons__item:nth-child(5) { order: 5; }
    .menu-icons__item:nth-child(6) { order: 6; }
}