@charset "UTF-8";
/* index.html専用 */

/* ========================================
   Cyber Boot Splash
======================================== */

.splash {
    position: fixed;
    inset: 0;
    z-index: 9999;

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

    overflow: hidden;

    color: #ffffff;
    background:
        radial-gradient(
            circle at center,
            rgb(22 71 130 / 24%),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #010205,
            #020712 55%,
            #05020d
        );

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;
}


/* ========================================
   背景グリッド
======================================== */

.splash-grid {
    position: absolute;
    inset: -40% -20%;
    z-index: 0;

    background-image:
        linear-gradient(
            rgb(37 233 255 / 8%) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgb(37 233 255 / 8%) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    opacity: 0.65;

    transform:
        perspective(600px)
        rotateX(62deg)
        translateY(28%);

    transform-origin: center bottom;

    animation:
        splashGridMove 3s linear infinite;
}

@keyframes splashGridMove {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 55px;
    }

}


/* ========================================
   背景ノイズ・走査線
======================================== */

.splash::before {
    position: absolute;
    inset: 0;
    z-index: 7;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 3px,
            rgb(255 255 255 / 3%) 4px
        );

    content: "";

    pointer-events: none;

    animation:
        splashNoise 0.16s steps(2, end) infinite;
}

.splash::after {
    position: absolute;
    inset: 0;
    z-index: 6;

    background:
        radial-gradient(
            circle at center,
            transparent 30%,
            rgb(0 0 0 / 72%) 100%
        );

    content: "";

    pointer-events: none;
}

@keyframes splashNoise {

    0% {
        opacity: 0.25;
        transform: translateY(0);
    }

    50% {
        opacity: 0.5;
        transform: translateY(2px);
    }

    100% {
        opacity: 0.3;
        transform: translateY(-2px);
    }

}


/* ========================================
   スキャンライン
======================================== */

.splash-scanline {
    position: absolute;
    z-index: 5;
    top: -20%;
    left: 0;

    width: 100%;
    height: 120px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgb(37 233 255 / 9%),
            rgb(37 233 255 / 42%),
            rgb(37 233 255 / 9%),
            transparent
        );

    filter: blur(1px);

    animation:
        splashScanline 2.4s linear infinite;
}

@keyframes splashScanline {

    from {
        transform: translateY(-20vh);
    }

    to {
        transform: translateY(140vh);
    }

}


/* ========================================
   サイバーリング
======================================== */

.splash-ring {
    position: absolute;
    z-index: 1;

    width: min(62vw, 680px);
    aspect-ratio: 1;

    border:
        1px solid
        rgb(37 233 255 / 28%);

    border-radius: 50%;

    box-shadow:
        0 0 30px rgb(37 233 255 / 10%),
        inset 0 0 30px rgb(155 92 255 / 8%);
}

.splash-ring::before,
.splash-ring::after {
    position: absolute;
    border-radius: 50%;
    content: "";
}

.splash-ring::before {
    inset: 8%;

    border:
        1px dashed
        rgb(155 92 255 / 30%);
}

.splash-ring::after {
    inset: 22%;

    border:
        2px solid
        rgb(37 233 255 / 18%);
}

.splash-ring-01 {
    animation:
        splashRingRotate 12s linear infinite;
}

.splash-ring-02 {
    width: min(48vw, 510px);

    border-style: dashed;

    animation:
        splashRingRotateReverse 9s linear infinite;
}

@keyframes splashRingRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

@keyframes splashRingRotateReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }

}


/* ========================================
   中央コンテンツ
======================================== */

.splash-content {
    position: relative;
    z-index: 4;

    width: min(90%, 660px);

    text-align: center;
}


/* ========================================
   システム起動
======================================== */

.boot-screen {
    opacity: 0;
    transform: translateY(12px);

    animation:
        bootScreenAppear 0.45s ease 0.15s forwards;
}

@keyframes bootScreenAppear {

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

.boot-label {
    margin-bottom: 8px;

    color: rgb(37 233 255 / 65%);

    font-family:
        "Orbitron",
        sans-serif;

    font-size: clamp(0.58rem, 1.2vw, 0.76rem);
    letter-spacing: 0.35em;
}

.boot-title {
    color: #ffffff;

    font-family:
        "Orbitron",
        sans-serif;

    font-size: clamp(1.9rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: 0.14em;

    text-shadow:
        0 0 6px #ffffff,
        0 0 15px #25e9ff,
        0 0 36px rgb(37 233 255 / 60%);
}

.boot-module-list {
    display: grid;
    gap: 8px;

    width: min(100%, 480px);

    margin: 34px auto 0;
}

.boot-module {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 8px 14px;

    border-left:
        2px solid
        rgb(37 233 255 / 28%);

    color: rgb(255 255 255 / 70%);

    background:
        linear-gradient(
            90deg,
            rgb(37 233 255 / 8%),
            transparent
        );

    font-family:
        "Orbitron",
        sans-serif;

    font-size: clamp(0.65rem, 1.5vw, 0.86rem);
    letter-spacing: 0.12em;

    opacity: 0.32;

    transition:
        opacity 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.boot-module.is-active {
    opacity: 1;

    color: #ffffff;

    border-color: #25e9ff;

    transform: translateX(5px);
}

.boot-module.is-complete {
    opacity: 1;

    color: #8affd1;

    border-color: #8affd1;
}

.boot-status {
    color: rgb(255 255 255 / 38%);
}

.boot-module.is-active .boot-status {
    color: #ffe600;

    text-shadow:
        0 0 10px rgb(255 230 0 / 70%);
}

.boot-module.is-complete .boot-status {
    color: #8affd1;

    text-shadow:
        0 0 10px rgb(138 255 209 / 70%);
}

.boot-complete {
    margin-top: 24px;

    color: #8affd1;

    font-family:
        "Orbitron",
        sans-serif;

    font-size: clamp(0.7rem, 1.6vw, 0.9rem);
    letter-spacing: 0.24em;

    opacity: 0;

    text-shadow:
        0 0 12px rgb(138 255 209 / 65%);
}

.boot-complete.is-visible {
    animation:
        bootCompleteAppear 0.4s steps(2, end) forwards;
}

@keyframes bootCompleteAppear {

    0% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    65% {
        opacity: 0.35;
    }

    100% {
        opacity: 1;
    }

}


/* ========================================
   ローディング画面
======================================== */

.loading-screen {
    position: absolute;
    inset: 50% auto auto 50%;

    width: min(100%, 520px);

    opacity: 0;
    visibility: hidden;

    transform:
        translate(-50%, -50%)
        scale(0.96);

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease,
        transform 0.35s ease;
}

.loading-screen.is-visible {
    opacity: 1;
    visibility: visible;

    transform:
        translate(-50%, -50%)
        scale(1);
}

.loading-label {
    margin-bottom: 18px;

    color: #25e9ff;

    font-family:
        "Orbitron",
        sans-serif;

    font-size: clamp(1rem, 2.5vw, 1.5rem);
    letter-spacing: 0.2em;

    text-shadow:
        0 0 16px rgb(37 233 255 / 65%);
}

.loading-bar-wrap {
    position: relative;

    width: 100%;
    height: 16px;

    overflow: hidden;

    border:
        1px solid
        rgb(37 233 255 / 65%);

    background: rgb(0 0 0 / 65%);

    box-shadow:
        0 0 15px rgb(37 233 255 / 28%),
        inset 0 0 10px rgb(37 233 255 / 12%);
}

.loading-bar {
    display: block;

    width: 0;
    height: 100%;

    background:
        repeating-linear-gradient(
            90deg,
            #25e9ff 0,
            #25e9ff 12px,
            #087ea4 12px,
            #087ea4 16px
        );

    box-shadow:
        0 0 18px #25e9ff;

    transition:
        width 0.08s linear;
}

.loading-percent {
    margin-top: 14px;

    color: #ffffff;

    font-family:
        "Orbitron",
        sans-serif;

    font-size: clamp(1.4rem, 4vw, 2.5rem);
    font-weight: 800;

    text-shadow:
        0 0 14px #25e9ff;
}


/* ========================================
   ロゴ出現
======================================== */

.logo-screen {
    position: absolute;
    inset: 50% auto auto 50%;

    width: min(100%, 650px);

    opacity: 0;
    visibility: hidden;

    transform:
        translate(-50%, -50%)
        scale(0.82);

    transition:
        opacity 0.55s ease,
        visibility 0.55s ease,
        transform 0.55s ease;
}

.logo-screen.is-visible {
    opacity: 1;
    visibility: visible;

    transform:
        translate(-50%, -50%)
        scale(1);
}

.splash-logo-wrap {
    position: relative;

    width: clamp(125px, 18vw, 230px);
    aspect-ratio: 1;

    margin: 0 auto;
}

.splash-logo {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

.splash-logo-main {
    z-index: 2;

    filter:
        drop-shadow(
            0 0 15px
            rgb(37 233 255 / 55%)
        )
        drop-shadow(
            0 0 30px
            rgb(155 92 255 / 38%)
        );

    animation:
        logoCyberGlitch 1.1s steps(1, end);
}

.splash-logo-cyan,
.splash-logo-pink {
    z-index: 1;

    opacity: 0;

    mix-blend-mode: screen;
}

.logo-screen.is-visible
.splash-logo-cyan {
    animation:
        logoCyanGlitch 1s steps(1, end);
}

.logo-screen.is-visible
.splash-logo-pink {
    animation:
        logoPinkGlitch 1s steps(1, end);
}

@keyframes logoCyberGlitch {

    0% {
        opacity: 0;
        transform: scale(0.85);
        clip-path: inset(0 0 100% 0);
    }

    18% {
        opacity: 0.8;
        transform: translateX(-6px);
        clip-path: inset(18% 0 55% 0);
    }

    32% {
        opacity: 0.25;
        transform: translateX(8px);
    }

    50% {
        opacity: 1;
        transform: translateX(-3px);
        clip-path: inset(5% 0 12% 0);
    }

    70% {
        transform: translateX(2px);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
        clip-path: inset(0);
    }

}

@keyframes logoCyanGlitch {

    0%,
    100% {
        opacity: 0;
    }

    18% {
        opacity: 0.9;
        transform: translateX(12px);
        filter: hue-rotate(150deg);
    }

    40% {
        opacity: 0.45;
        transform: translateX(-8px);
    }

    62% {
        opacity: 0.7;
        transform: translateX(5px);
    }

}

@keyframes logoPinkGlitch {

    0%,
    100% {
        opacity: 0;
    }

    24% {
        opacity: 0.85;
        transform: translateX(-12px);
        filter: hue-rotate(-45deg);
    }

    48% {
        opacity: 0.4;
        transform: translateX(9px);
    }

    72% {
        opacity: 0.6;
        transform: translateX(-4px);
    }

}

.splash-site-title {
    margin-top: 22px;

    color: #ffffff;

    font-size: clamp(1.55rem, 4vw, 3.2rem);
    font-weight: 900;
    letter-spacing: 0.08em;

    text-shadow:
        0 0 5px #ffffff,
        0 0 14px #25e9ff,
        0 0 30px rgb(155 92 255 / 60%);

    opacity: 0;
    transform: translateY(12px);
}

.logo-screen.is-visible
.splash-site-title {
    animation:
        splashTitleAppear 0.55s ease 0.35s forwards;
}

.splash-site-name-en {
    margin-top: 8px;

    color: rgb(255 255 255 / 56%);

    font-family:
        "Orbitron",
        sans-serif;

    font-size: clamp(0.5rem, 1.2vw, 0.72rem);
    letter-spacing: 0.3em;

    opacity: 0;
}

.logo-screen.is-visible
.splash-site-name-en {
    animation:
        splashTitleAppear 0.55s ease 0.52s forwards;
}

.splash-message {
    margin-top: 24px;

    color: rgb(255 255 255 / 82%);

    font-size: clamp(0.78rem, 1.8vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.14em;

    opacity: 0;
    transform: translateY(10px);
}

.logo-screen.is-visible
.splash-message {
    animation:
        splashTitleAppear 0.55s ease 0.72s forwards;
}

@keyframes splashTitleAppear {

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ========================================
   終了演出
======================================== */

.splash-exit-light {
    position: absolute;
    z-index: 8;
    top: 50%;
    left: 50%;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #ffffff;

    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(0);

    pointer-events: none;
}

.splash.is-exiting
.splash-exit-light {
    animation:
        splashExitLight 0.85s ease-in forwards;
}

@keyframes splashExitLight {

    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(0);
    }

    25% {
        opacity: 1;

        box-shadow:
            0 0 30px #ffffff,
            0 0 80px #25e9ff,
            0 0 150px #9b5cff;

        transform:
            translate(-50%, -50%)
            scale(12);
    }

    100% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(280);
    }

}

.splash.splash-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* ========================================
   スマホ調整
======================================== */

@media screen and (max-width: 600px) {

    .splash-content {
        width: min(88%, 520px);
    }

    .splash-ring {
        width: 88vw;
    }

    .splash-ring-02 {
        width: 68vw;
    }

    .boot-module-list {
        margin-top: 28px;
    }

    .boot-module {
        padding: 7px 10px;

        font-size: 0.58rem;
    }

    .loading-bar-wrap {
        height: 13px;
    }

    .splash-site-title {
        letter-spacing: 0.04em;
    }

    .splash-site-name-en {
        letter-spacing: 0.18em;
    }

}
/* ========================================
   メインビュー
======================================== */

.main-visual {
    position: relative;

    width: 100%;

    /* ヘッダーを除いた画面いっぱい */
    min-height:
        calc(
            100svh -
            var(--header-height)
        );

    overflow: hidden;

    color: #ffffff;
    background: #050609;
}


/* ========================================
   メイン画像
======================================== */

.main-visual-main-image-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;

    overflow: hidden;
}

.main-visual-main-image {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center top;

    filter:
        brightness(0.72)
        saturate(0.92)
        contrast(1.08);
}


/* ========================================
   暗幕・グリッド
======================================== */

.main-visual-filter {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgb(2 4 8 / 45%),
            rgb(2 4 8 / 20%),
            rgb(2 4 8 / 45%)
        ),
        radial-gradient(
            circle at 50% 40%,
            transparent 18%,
            rgb(3 5 10 / 48%) 100%
        );
}

.main-visual-filter::before {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgb(255 255 255 / 3%) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgb(255 255 255 / 3%) 1px,
            transparent 1px
        );

    background-size:
        60px
        60px;

    mask-image:
        linear-gradient(
            to bottom,
            #000,
            transparent 92%
        );

    content: "";

    pointer-events: none;
}

.main-visual-filter::after {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 18% 25%,
            rgb(36 233 255 / 12%),
            transparent 28%
        ),
        radial-gradient(
            circle at 84% 75%,
            rgb(255 143 216 / 10%),
            transparent 28%
        );

    content: "";

    pointer-events: none;
}


/* ========================================
   浮遊画像全体
======================================== */

.floating-image-list {
    position: absolute;
    inset: 0;
    z-index: 3;

    pointer-events: none;
}


/* ========================================
   浮遊リンク共通
======================================== */

.floating-image-card {
    position: absolute;

    display: block;

    width: var(--image-width, 150px);
    height: auto;

    pointer-events: auto;

    transform:
        translate3d(
            var(--move-x, 0px),
            var(--move-y, 0px),
            0
        );

    transition:
        transform 0.25s ease,
        filter 0.3s ease;

    will-change: transform;
}


/* ========================================
   浮遊する内側
======================================== */

.floating-image-motion {
    position: relative;

    width: 100%;
    height: auto;

    overflow: visible;

    border: 0;
    border-radius: 0;

    background: transparent;
    box-shadow: none;
    backdrop-filter: none;

    animation:
        floatingImageMove
        var(--float-time, 5s)
        ease-in-out
        var(--float-delay, 0s)
        infinite;

    will-change: transform;
}


/* ========================================
   画像
======================================== */

.floating-image {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 12px 16px
            rgb(0 0 0 / 48%)
        )
        drop-shadow(
            0 0 9px
            rgb(36 233 255 / 16%)
        );

    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}


/* 以前の装飾を消す */

.floating-image-motion::before,
.floating-image-motion::after {
    display: none;
}


/* ========================================
   ホバー
======================================== */

.floating-image-card:hover {
    z-index: 20;

    filter:
        drop-shadow(
            0 0 18px
            rgb(36 233 255 / 28%)
        );
}

.floating-image-card:hover
.floating-image-motion {
    animation-play-state: paused;

    transform:
        translateY(-6px)
        scale(1.05);
}

.floating-image-card:hover
.floating-image {
    filter:
        brightness(1.08)
        saturate(1.08)
        drop-shadow(
            0 14px 18px
            rgb(0 0 0 / 52%)
        )
        drop-shadow(
            0 0 13px
            rgb(36 233 255 / 24%)
        );
}


/* ========================================
   完成イメージに合わせた配置
======================================== */

/* 01 Beスポーツとは
   右下の「好きな事が未来の力に」
*/
.floating-image-card-01 {
    --image-width:
        clamp(
            150px,
            14vw,
            245px
        );

    right: 2.5%;
    bottom: 14%;
}

/* 02 動画編集
   左上
*/
.floating-image-card-02 {
    --image-width:
        clamp(
            150px,
            13vw,
            225px
        );

    top: 8%;
    left: 5%;
}


/* 03 AI MUSIC
   左中央
*/
.floating-image-card-03 {
    --image-width:
        clamp(
            135px,
            12vw,
            205px
        );

    top: 34%;
    left: 4%;
}


/* 04 Creative
   左下
*/
.floating-image-card-04 {
    --image-width:
        clamp(
            125px,
            11vw,
            190px
        );

    left: 3.5%;
    bottom: 7%;
}


/* 05 PLAY eゲーム
   左下・Creativeより少し上
*/
.floating-image-card-05 {
    --image-width:
        clamp(
            105px,
            9vw,
            160px
        );

    left: 5.5%;
    bottom: 26%;
}


/* 06 ご利用の流れ
   右上
*/
.floating-image-card-06 {
    --image-width:
        clamp(
            155px,
            14vw,
            235px
        );

    top: 7%;
    right: 2.5%;
}


/* 07 スタッフ
   右中央
*/
.floating-image-card-07 {
    --image-width:
        clamp(
            115px,
            10vw,
            175px
        );

    top: 35%;
    right: 3%;
}


/* 08 お問い合わせ
   右下・一番小さい
*/
.floating-image-card-08 {
    --image-width:
        clamp(
            110px,
            9vw,
            165px
        );

    right: 6%;
    bottom: 2.5%;
}


/* ========================================
   浮遊アニメーション
======================================== */

@keyframes floatingImageMove {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(-0.5deg);
    }

    50% {
        transform:
            translate3d(0, -10px, 0)
            rotate(0.6deg);
    }

}

/* ========================================
   スクロール案内
======================================== */

.scroll-guide {
    position: absolute;
    z-index: 6;
    bottom: 22px;
    left: 50%;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;

    color:
        rgb(255 255 255 / 58%);

    font-family:
        "Orbitron",
        sans-serif;

    font-size: 0.58rem;
    letter-spacing: 0.2em;

    transform:
        translateX(-50%);
}

.scroll-guide span:last-child {
    color: #24e9ff;
    font-size: 1.3rem;
}
/* ========================================
   Information
======================================== */

.information {
    position: relative;
}

.information::before {
    position: absolute;
    top: 0;
    right: 0;
    width: 30%;
    height: 100%;
    background:
        linear-gradient(
            135deg,
            transparent,
            rgb(40 215 255 / 5%)
        );
    content: "";
    pointer-events: none;
}

.information-list {
    position: relative;
    border-top: 1px solid #dce2e9;
}

.information-item {
    border-bottom: 1px solid #dce2e9;
}

.information-item > a {
    display: grid;
    grid-template-columns: 120px 110px 1fr 30px;
    align-items: center;
    gap: 24px;
    min-height: 92px;
    padding: 18px 24px;
    transition:
        background-color var(--transition),
        padding-left var(--transition);
}

.information-item > a:hover {
    padding-left: 34px;
    background-color: #f4fbfd;
}

.information-item time {
    color: var(--color-subtext);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.information-category {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 4px 12px;
    border: 1px solid var(--color-blue-dark);
    border-radius: 999px;
    color: var(--color-blue-dark);
    font-size: 0.72rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}
.information-category:hover {
    background-color: var(--color-blue-dark);
    color: #fff;
}
.information-title {
    font-size: 1rem;
    font-weight: 700;
}

.information-arrow {
    color: var(--color-blue-dark);
    font-size: 1.3rem;
    transition: transform var(--transition);
}

.information-item > a:hover .information-arrow {
    transform: translateX(5px);
}

/* ========================================
   施設紹介
======================================== */

.facility-gallery {
    position: relative;

    display: block;
    overflow: hidden;

    color: var(--color-white);
}


/* 見出し */

.facility-gallery .section-heading {
    max-width: 900px;
    margin: 0 auto 48px;

    text-align: center;
}

.facility-gallery .section-heading-en {
    color: var(--color-blue);

    font-family:
        "Orbitron",
        sans-serif;

    letter-spacing: 0.18em;

    text-shadow:
        0 0 15px rgb(37 233 255 / 45%);
}

.facility-gallery .section-heading-ja {
    color: var(--color-white);
}


/* キャッチコピー */

.facility-catchcopy {
    margin-top: 22px;

    color: #ffffff;

    font-size:
        clamp(
            1.65rem,
            2.5vw,
            2.15rem
        );

    font-weight: 800;
    line-height: 1.5;

    text-shadow:
        0 0 16px rgb(37 233 255 / 28%);
}


/* 施設紹介文 */

.facility-gallery .section-description {
    max-width: 960px;
    margin: 20px auto 0;

    color: rgb(255 255 255 / 72%);

    font-size: 1rem;
    font-weight: 500;
    line-height: 2;

    white-space: nowrap;
}
.facility-card-caption .facility-card-title{
    text-align: center;
}
.facility-card-caption .facility-card-description_01,
.facility-card-caption .facility-card-description_02,
.facility-card-caption .facility-card-description_03,
.facility-card-caption .facility-card-description_04,
.facility-card-caption .facility-card-description_05,
.facility-card-caption .facility-card-description_06 {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin: 20px auto 0;

    color: rgb(255 255 255 / 72%);

    font-size: clamp(0.7rem, 0.8vw, 1rem);
    font-weight: 500;
    line-height: 1.7;
    text-align: center;
    white-space: normal;
overflow-wrap: break-word;
word-break: auto-phrase;
line-break: strict;
}

/* スマホ専用の改行をPCでは隠す */
br.facility-sp-break {
    display: none;
}
/* PCでは各カードの指定位置で改行 */
br.facility-pc-break_01,
br.facility-pc-break_02,
br.facility-card_03,
br.facility-card_04,
br.facility-card_05,
br.facility-card_06 {
    display: inline;
}
br.facility-pc-break {
    display: none;
}
/* 6枚のカード配置 */

.facility-gallery-grid {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 28px;
}


/* カード共通 */

.facility-card {
    --facility-accent: #25e9ff;
    --facility-glow: rgb(37 233 255 / 22%);
    --facility-glow-strong: rgb(37 233 255 / 42%);

    min-width: 0;
}


/* 偶数カードはピンク */

.facility-card:nth-child(even) {
    --facility-accent: #ff4fd8;
    --facility-glow: rgb(255 79 216 / 22%);
    --facility-glow-strong: rgb(255 79 216 / 42%);
}


.facility-card-figure {
    display: flex;
    flex-direction: column;

    height: 100%;
    margin: 0;

    /* common.cssの古い16:10指定を解除 */
    aspect-ratio: auto;

    /* ホバー時に写真をカードの外へ浮かせる */
    overflow: visible;

    border:
        1px solid
        var(--facility-accent);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgb(17 23 34 / 96%),
            rgb(5 7 12 / 98%)
        );

    box-shadow:
        0 18px 45px rgb(0 0 0 / 32%),
        0 0 18px var(--facility-glow);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

/* 写真部分 */

.facility-card-image-wrap {
    position: relative;
    z-index: 1;

    flex-shrink: 0;

    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: 17px 17px 0 0;

    background-color: #080b12;

    transform-origin: center bottom;

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease,
        border-radius 0.45s ease;
}
.facility-card-image-wrap::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 3px;

    background:
        var(--facility-accent);

    box-shadow:
        0 0 14px
        var(--facility-accent);

    content: "";
}

.facility-card-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.65s ease,
        filter 0.65s ease;
}


/* 文章部分 */

.facility-card-caption {
    display: flex;
    flex: 1;
    flex-direction: column;

    padding: 24px;

    background:
        linear-gradient(
            145deg,
            rgb(17 23 34 / 96%),
            rgb(5 7 12 / 98%)
        );
}

.facility-card-number {
    display: block;

    margin-bottom: 10px;

    color:
        var(--facility-accent);

    font-family:
        "Orbitron",
        sans-serif;

    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.18em;

    text-shadow:
        0 0 10px
        var(--facility-glow-strong);
}

.facility-card-caption h3 {
    min-height: 3em;

    color: #ffffff;

    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.5;
}

.facility-card-caption p {
    margin-top: 12px;

    color: rgb(255 255 255 / 70%);

    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.8;
}

/* マウスを置くと写真が浮き出る */

@media (hover: hover) and (pointer: fine) {

    .facility-card:hover {
        position: relative;
        z-index: 10;
    }

    .facility-card:hover
    .facility-card-figure {
        transform:
            translateY(-8px);

        box-shadow:
            0 28px 60px rgb(0 0 0 / 48%),
            0 0 34px var(--facility-glow-strong);
    }

    .facility-card:hover
    .facility-card-image-wrap {
        z-index: 2;

        border-radius: 16px;

        box-shadow:
            0 24px 45px rgb(0 0 0 / 55%),
            0 0 30px var(--facility-glow-strong);

        transform:
            translateY(-18px)
            scale(1.08);
    }

    .facility-card:hover
    .facility-card-image {
        filter:
            brightness(1.12)
            saturate(1.1);

        transform:
            scale(1.04);
    }

}


/* ========================================
   SNS
======================================== */

.sns-section {
    position: relative;
    overflow: hidden;
}

.sns-section::before {
    position: absolute;
    top: -120px;
    left: -120px;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background-color: rgb(40 215 255 / 10%);
    content: "";
    filter: blur(10px);
}

.sns-list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.sns-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 170px;
    padding: 25px 15px;
    border: 1px solid #dce3eb;
    border-radius: 18px;
    background-color: rgb(255 255 255 / 85%);
    box-shadow: 0 12px 35px rgb(15 35 55 / 7%);
    transition:
        color var(--transition),
        border-color var(--transition),
        background-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.sns-icon-img {
    display: block;
    width: clamp(90px, 8vw, 120px);
    height: clamp(90px, 8vw, 120px);
    object-fit: contain;
}.sns-name {
    color: var(--color-subtext);
    font-size: 0.8rem;
    font-weight: 700;
}

.sns-link:hover {
    border-color: var(--color-dark);
    color: var(--color-white);
    background-color: var(--color-dark);
    box-shadow: 0 18px 40px rgb(15 35 55 / 18%);
    transform: translateY(-8px);
}

.sns-link:hover .sns-name {
    color: rgb(255 255 255 / 72%);
}

/* ========================================
   リンクなしInformation
======================================== */

.information-item-inner {
    display: grid;
    grid-template-columns:
        130px
        110px
        1fr;

    align-items: center;
    gap: 22px;

    min-height: 82px;

    padding:
        20px
        10px;

    border-bottom:
        1px solid
        rgb(255 255 255 / 10%);
}

.information-item-static time {
    color:
        rgb(255 255 255 / 58%);

    font-family:
        "Orbitron",
        sans-serif;

    font-size: 0.78rem;
}

.information-item-static .information-title {
    color: #ffffff;

    font-weight: 700;
    line-height: 1.7;
}


/* お知らせ一覧を見るボタン */

.information .section-button {
    position: relative;
    z-index: 1;

    border-color: #25e9ff;
    color: #ffffff;
    background: rgb(5 6 9 / 88%);

    box-shadow:
        0 0 18px rgb(37 233 255 / 35%),
        inset 0 0 14px rgb(37 233 255 / 10%);

    text-shadow:
        0 0 8px rgb(37 233 255 / 70%);

    backdrop-filter: blur(10px);
}

.information .section-button:hover {
    border-color: #25e9ff;
    color: #050609;
    background: #25e9ff;

    box-shadow:
        0 0 28px rgb(37 233 255 / 60%);

    text-shadow: none;
}
/* 施設紹介を表示 */
.facility-gallery {
    display: block;
    color: var(--color-white);
}