/* =========================================================
   MABBADUE INTERNAL NETWORK
   PC7 HOME LAB
   ========================================================= */


/* ------------------------------
   基本設定
   ------------------------------ */

:root {
    --text-main: #ffffff;
    --text-soft: rgba(255, 255, 255, 0.72);
    --header-bg: rgba(8, 12, 24, 0.28);
    --header-border: rgba(255, 255, 255, 0.14);

    --menu-bg: rgba(10, 14, 28, 0.88);
    --menu-hover: rgba(255, 255, 255, 0.10);

    --font-main:
        "Segoe UI",
        "Yu Gothic UI",
        "Yu Gothic",
        "Hiragino Kaku Gothic ProN",
        sans-serif;
}


* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
}


body {
    min-height: 100vh;

    overflow: hidden;

    font-family: var(--font-main);

    color: var(--text-main);

    background: #294fbb;
}



/* =========================================================
   背景
   ========================================================= */

.background {
    position: fixed;
    inset: 0;

    z-index: -10;

    overflow: hidden;

    background:
        linear-gradient(
            125deg,
            #163a8a 0%,
            #365ccf 24%,
            #6f39c5 48%,
            #d64c80 72%,
            #e88443 100%
        );

    background-size: 300% 300%;

    animation:
        backgroundShift 20s ease-in-out infinite alternate;
}


/* 背景のぼかし色 */

.background-orb {
    position: absolute;

    width: 70vw;
    height: 70vw;

    min-width: 600px;
    min-height: 600px;

    border-radius: 50%;

    filter: blur(120px);

    opacity: 0.58;

    animation:
        orbMove 18s ease-in-out infinite alternate;
}


.orb-1 {
    top: -35%;
    left: -20%;

    background: #00b7ff;
}


.orb-2 {
    right: -25%;
    bottom: -35%;

    background: #ff4a63;

    animation-delay: -7s;
}


.orb-3 {
    top: 25%;
    left: 45%;

    width: 50vw;
    height: 50vw;

    background: #6538e6;

    animation-delay: -12s;
}


/* 画面全体にごく薄い暗幕 */

.background::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.10),
            rgba(0, 0, 0, 0.02) 45%,
            rgba(0, 0, 0, 0.18)
        );
}


/* 背景色移動 */

@keyframes backgroundShift {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 55% 50%;
    }

    100% {
        background-position: 100% 50%;
    }

}


/* ぼかし光の移動 */

@keyframes orbMove {

    0% {
        transform:
            translate3d(-5%, -4%, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(8%, 5%, 0)
            scale(1.12);
    }

    100% {
        transform:
            translate3d(-2%, 10%, 0)
            scale(0.95);
    }

}



/* =========================================================
   ヘッダー
   ========================================================= */

.site-header {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    height: 88px;

    z-index: 100;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 48px;

    background: var(--header-bg);

    border-bottom: 1px solid var(--header-border);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}



/* =========================================================
   ブランド
   ========================================================= */

.brand {
    display: flex;
    align-items: center;

    gap: 14px;

    color: inherit;

    text-decoration: none;
}


/* 仮Mロゴ */

.brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    border: 2px solid rgba(255, 255, 255, 0.88);

    border-radius: 13px;

    font-size: 23px;
    font-weight: 650;

    letter-spacing: -0.08em;

    color: #ffffff;

    background: rgba(255, 255, 255, 0.05);
}


/* ロゴ画像へ置換する場合 */

.brand-logo-image {
    width: 46px;
    height: 46px;

    object-fit: contain;
}


.brand-text {
    display: flex;
    flex-direction: column;

    gap: 3px;
}


.brand-name {
    font-size: 17px;

    font-weight: 600;

    letter-spacing: 0.08em;

    line-height: 1;
}


.brand-subtitle {
    font-size: 10px;

    font-weight: 500;

    letter-spacing: 0.32em;

    color: var(--text-soft);

    line-height: 1;
}



/* =========================================================
   ヘッダーナビ
   ========================================================= */

.header-nav {
    display: flex;
    align-items: center;

    gap: 30px;

    height: 100%;
}


.nav-link {
    position: relative;

    color: rgba(255, 255, 255, 0.86);

    text-decoration: none;

    font-size: 13px;
    font-weight: 450;

    letter-spacing: 0.10em;

    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}


.nav-link:hover {
    color: #ffffff;
}


/* 下線 */

.nav-link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -7px;

    width: 100%;
    height: 1px;

    background: #ffffff;

    transform: scaleX(0);

    transform-origin: right;

    transition: transform 0.25s ease;
}


.nav-link:hover::after {
    transform: scaleX(1);

    transform-origin: left;
}



/* =========================================================
   内部リンクメニュー
   ========================================================= */

.menu {
    position: relative;
}


.menu summary {
    display: flex;
    align-items: center;

    gap: 8px;

    list-style: none;

    cursor: pointer;

    user-select: none;

    font-size: 13px;

    letter-spacing: 0.08em;

    color: rgba(255, 255, 255, 0.88);

    transition: color 0.2s ease;
}


.menu summary::-webkit-details-marker {
    display: none;
}


.menu summary:hover {
    color: #ffffff;
}


.menu-arrow {
    display: inline-block;

    font-size: 13px;

    transition: transform 0.25s ease;
}


.menu[open] .menu-arrow {
    transform: rotate(180deg);
}



/* ドロップダウン */

.menu-panel {
    position: absolute;

    top: calc(100% + 22px);
    right: 0;

    width: 250px;

    padding: 8px;

    border: 1px solid rgba(255, 255, 255, 0.15);

    border-radius: 15px;

    background: var(--menu-bg);

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.30);

    overflow: hidden;

    animation: menuAppear 0.18s ease-out;
}


.menu-panel a {
    display: flex;
    flex-direction: column;

    gap: 4px;

    padding: 13px 14px;

    border-radius: 10px;

    text-decoration: none;

    color: #ffffff;

    transition: background 0.18s ease;
}


.menu-panel a:hover {
    background: var(--menu-hover);
}


.menu-panel span {
    font-size: 14px;

    letter-spacing: 0.03em;
}


.menu-panel small {
    font-size: 9px;

    color: rgba(255, 255, 255, 0.50);

    letter-spacing: 0.15em;
}


@keyframes menuAppear {

    from {
        opacity: 0;

        transform: translateY(-6px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}



/* =========================================================
   メイン
   ========================================================= */

.hero {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        110px
        32px
        90px;
}


.hero-content {
    text-align: center;

    transform: translateY(-2vh);

    text-shadow:
        0 2px 25px rgba(0, 0, 0, 0.16);
}



/* MABBADUE */

.hero-main {
    margin: 0;

    font-size: clamp(
        48px,
        8vw,
        112px
    );

    font-weight: 300;

    line-height: 1;

    letter-spacing: 0.22em;

    padding-left: 0.22em;
}


/* PC7 HOME LAB */

.hero-sub {
    margin:
        25px
        0
        0;

    font-size: clamp(
        13px,
        1.55vw,
        22px
    );

    font-weight: 450;

    letter-spacing: 0.48em;

    padding-left: 0.48em;

    color: rgba(255, 255, 255, 0.88);
}


/* 日本語 */

.hero-japanese {
    margin:
        20px
        0
        0;

    font-size: clamp(
        13px,
        1.25vw,
        18px
    );

    font-weight: 400;

    letter-spacing: 0.19em;

    color: rgba(255, 255, 255, 0.64);
}



/* =========================================================
   下部ステータス
   ========================================================= */

.status-footer {
    position: fixed;

    bottom: 0;
    left: 0;
    right: 0;

    min-height: 54px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 48px;

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 0.22em;

    color: rgba(255, 255, 255, 0.58);
}


.status-left {
    display: flex;
    align-items: center;

    gap: 10px;
}


.status-indicator {
    display: block;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #91ffbf;

    box-shadow:
        0 0 10px rgba(145, 255, 191, 0.75);

    animation:
        statusPulse 2.5s ease-in-out infinite;
}


.separator {
    margin: 0 8px;

    opacity: 0.45;
}


@keyframes statusPulse {

    0%,
    100% {
        opacity: 0.55;
    }

    50% {
        opacity: 1;
    }

}



/* =========================================================
   タブレット
   ========================================================= */

@media (max-width: 850px) {

    .site-header {
        height: 78px;

        padding: 0 24px;
    }


    .brand-logo {
        width: 42px;
        height: 42px;

        border-radius: 12px;
    }


    .brand-name {
        font-size: 15px;
    }


    .brand-subtitle {
        font-size: 9px;
    }


    .header-nav {
        gap: 18px;
    }


    .external-link {
        display: none;
    }


    .status-footer {
        padding:
            0
            24px;
    }

}



/* =========================================================
   スマートフォン
   ========================================================= */

@media (max-width: 560px) {

    .site-header {
        height: 72px;

        padding:
            0
            18px;
    }


    .brand {
        gap: 10px;
    }


    .brand-logo {
        width: 38px;
        height: 38px;

        border-radius: 10px;

        font-size: 19px;
    }


    .brand-name {
        font-size: 14px;
    }


    .brand-subtitle {
        font-size: 8px;

        letter-spacing: 0.25em;
    }


    .menu summary {
        font-size: 11px;
    }


    .menu-panel {
        position: fixed;

        top: 82px;
        left: 18px;
        right: 18px;

        width: auto;
    }


    .hero {
        padding:
            90px
            18px
            70px;
    }


    .hero-main {
        font-size: clamp(
            38px,
            12vw,
            60px
        );

        letter-spacing: 0.12em;

        padding-left: 0.12em;
    }


    .hero-sub {
        margin-top: 20px;

        font-size: 11px;

        letter-spacing: 0.32em;

        padding-left: 0.32em;
    }


    .hero-japanese {
        margin-top: 17px;

        font-size: 11px;

        letter-spacing: 0.10em;
    }


    .status-footer {
        min-height: 48px;

        padding:
            0
            18px;

        font-size: 7px;

        letter-spacing: 0.16em;
    }


    .status-right {
        display: none;
    }

}



/* =========================================================
   動きを減らす設定を使用している場合
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;
    }

}