html { scroll-behavior: smooth; }

/* ローディング用アニメーション */
@keyframes loadingBar {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(300%); }
}
.animate-loading-bar {
    animation: loadingBar 1s infinite linear;
}
.loading-hidden {
    opacity: 0;
    pointer-events: none;
}

body { font-family: 'Noto Sans JP', sans-serif; }

.hero-gradient {

    background: linear-gradient(135deg, rgba(240,249,255,1) 0%, rgba(224,242,254,1) 100%);

}

.text-shadow { text-shadow: 0 2px 4px rgba(0,0,0,0.1); }

/* モバイルメニュー表示時のスクロール固定用 */

.no-scroll { overflow: hidden; }

/* 通信インフラをイメージした背景ガイド演出 */
#network-guide {
    z-index: 50;
}

#network-line {
    z-index: 0;
    background: linear-gradient(to bottom, rgba(186, 230, 253, 0.15), rgba(186, 230, 253, 0.95), rgba(186, 230, 253, 0.25));
}

#network-dots {
    z-index: 1;
}

#network-orb {
    z-index: 20;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.7), 0 0 18px rgba(250, 204, 21, 0.35);
    transition: box-shadow 0.25s ease, opacity 0.25s ease;
    animation: orbBreath 2.6s ease-in-out infinite;
}

#network-orb.is-active {
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.9), 0 0 24px rgba(250, 204, 21, 0.65);
    opacity: 1;
}

.network-trail {
    z-index: 10;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.35), 0 0 14px rgba(250, 204, 21, 0.2);
    transition: opacity 0.18s linear;
}

@keyframes orbBreath {
    0%, 100% {
        opacity: 0.55;
        transform: translate(-50%, -50%) scale(0.96);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

.network-dot {
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease, background-color 0.25s ease;
}

.network-dot.is-active {
    transform: scale(1.2);
    opacity: 1;
    background-color: rgb(56 189 248);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.85);
}

.reveal-from-light {
    opacity: 0;
    transform: translateY(18px) scale(0.99);
    filter: blur(8px);
    transition: opacity 0.9s ease, transform 0.9s ease, filter 0.9s ease;
}

.reveal-from-light.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

.marker-sweep {
    background-image: linear-gradient(#FFF100, #FFF100);
    background-repeat: no-repeat;
    background-size: 0% 0.5em;
    background-position: 0 85%;
    transition: background-size 1.1s ease;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.marker-sweep.is-visible {
    background-size: 100% 0.5em;
}

.top-message-diagonal {
    position: relative;
    background: linear-gradient(145deg, rgba(240, 249, 255, 0.95), rgba(224, 242, 254, 0.95));
    clip-path: polygon(0 4.5%, 100% 0, 100% 94%, 0 100%);
}

.top-message-orb-fork {
    border-radius: 1.5rem;
}

.top-message-orb-fork__beam {
    position: absolute;
    left: 50%;
    top: 38%;
    width: 0.45rem;
    height: 70%;
    margin-left: -0.225rem;
    transform-origin: 50% 0%;
    border-radius: 999px;
    background: linear-gradient(to bottom, rgba(250, 204, 21, 0.95), rgba(56, 189, 248, 0.45), transparent);
    opacity: 0;
    filter: blur(0.5px);
}

.top-message-orb-fork__beam--left {
    transform: rotate(-32deg) translateY(0);
}

.top-message-orb-fork__beam--right {
    transform: rotate(32deg) translateY(0);
}

.top-message-diagonal.is-orb-forked .top-message-orb-fork__beam--left {
    animation: topMessageForkLeft 0.75s ease-out forwards;
}

.top-message-diagonal.is-orb-forked .top-message-orb-fork__beam--right {
    animation: topMessageForkRight 0.75s ease-out forwards;
}

@keyframes topMessageForkLeft {
    0% { opacity: 0; transform: rotate(-32deg) translateY(0) scaleY(0.25); }
    25% { opacity: 1; transform: rotate(-32deg) translateY(0) scaleY(1); }
    100% { opacity: 0; transform: rotate(-58deg) translateY(0) translateX(-42vw) scaleY(1.15); }
}

@keyframes topMessageForkRight {
    0% { opacity: 0; transform: rotate(32deg) translateY(0) scaleY(0.25); }
    25% { opacity: 1; transform: rotate(32deg) translateY(0) scaleY(1); }
    100% { opacity: 0; transform: rotate(58deg) translateY(0) translateX(42vw) scaleY(1.15); }
}

.culture-heading-hero {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 100;
    font-style: italic;
    line-height: 0.9;
    letter-spacing: 0.16em;
}

.infra-bullet-dot {
    transition: box-shadow 0.65s ease, transform 0.55s ease, filter 0.55s ease;
}

.infra-bullet.is-lit .infra-bullet-dot {
    box-shadow: 0 0 0 5px rgba(250, 204, 21, 0.35), 0 0 22px rgba(250, 204, 21, 0.9);
    transform: scale(1.45);
    filter: brightness(1.2);
}

.culture-text-stack .culture-body-prose {
    line-height: 1.8;
    letter-spacing: 0.1em;
}

.work-feature-card {
    transition: border-color 0.55s ease, border-width 0.55s ease, box-shadow 0.55s ease;
}

.work-feature-card.is-lit {
    border-color: #facc15 !important;
    border-width: 1px;
    box-shadow: 0 0 20px rgba(250, 204, 21, 0.5);
}

.work-feature-card.is-lit .work-feature-badge {
    background-color: #facc15;
}

#culture-intro-receive .culture-intro-line {
    opacity: 0;
    transform: translateY(-0.4rem);
    transition: opacity 1.1s ease, transform 1.1s ease;
}

#culture-intro-receive.is-active .culture-intro-line:nth-of-type(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
#culture-intro-receive.is-active .culture-intro-line:nth-of-type(2) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
#culture-intro-receive.is-active .culture-intro-line:nth-of-type(3) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
#culture-intro-receive.is-active .culture-intro-line:nth-of-type(4) { transition-delay: 0.64s; opacity: 1; transform: translateY(0); }
#culture-intro-receive.is-active .culture-intro-line:nth-of-type(5) { transition-delay: 0.88s; opacity: 1; transform: translateY(0); }
#culture-intro-receive.is-active .culture-intro-line:nth-of-type(6) { transition-delay: 1.12s; opacity: 1; transform: translateY(0); }
#culture-intro-receive.is-active .culture-intro-line:nth-of-type(7) { transition-delay: 1.36s; opacity: 1; transform: translateY(0); }
#culture-intro-receive.is-active .culture-intro-line:nth-of-type(8) { transition-delay: 1.6s; opacity: 1; transform: translateY(0); }
#culture-intro-receive.is-active .culture-intro-line:nth-of-type(9) { transition-delay: 1.84s; opacity: 1; transform: translateY(0); }
#culture-intro-receive.is-active .culture-intro-line:nth-of-type(10) { transition-delay: 2.08s; opacity: 1; transform: translateY(0); }

#culture-intro-receive .culture-ceo-reveal {
    opacity: 0;
    filter: blur(24px);
    transition: opacity 1.5s ease, filter 1.5s ease;
}

#culture-intro-receive.is-active .culture-ceo-reveal {
    opacity: 1;
    filter: blur(0);
    transition-delay: 0.24s;
}

#culture-intro-receive .culture-png-reveal {
    opacity: 0;
    filter: blur(20px);
    transition: opacity 1.5s ease, filter 1.5s ease;
}

#culture-intro-receive.is-active .culture-png-reveal {
    opacity: 1;
    filter: blur(0);
    transition-delay: 2.45s;
}

#culture-overlay-text {
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 1s ease, transform 1s ease;
}

#culture-overlay-text.is-in-view {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 767px) {
    #culture-overlay-text {
        word-break: keep-all;
    }
}

.highlight-circle-trigger .circle-bg {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.highlight-circle-trigger.is-lit .circle-bg {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.work-feature-card .work-feature-badge {
    background-color: #e0f2fe;
    color: #000;
}
/* 社員の声：名前の横のドットが灯るアニメーション */
.interview-name-bullet {
    transition: all 0.6s ease;
    box-shadow: 0 0 0 0px rgba(250, 204, 21, 0);
}
.interview-card.is-lit .interview-name-bullet {
    background-color: #facc15;
    box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.3), 0 0 15px rgba(250, 204, 21, 0.8);
    transform: scale(1.2);
}

/* メインビジュアルの背景明滅（ネットワーク通信）アニメーション */
.animate-mv-glow {
    animation: mvGlow 3s ease-in-out infinite;
}

@keyframes mvGlow {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 1; }
}

/* メインビジュアル用アニメーション（1行ごとのザブトン・左からゆっくり出現） */
.zabuton-slide-left {
    opacity: 0;
    animation: slideZabutonLeft 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    transform-origin: left;
    width: 0;
}

.fade-in-left {
    opacity: 0;
    animation: fadeInLeft 1.0s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes slideZabutonLeft {
    0% { width: 0; opacity: 0; }
    1% { opacity: 1; }
    100% { width: 100%; opacity: 1; }
}

@keyframes fadeInLeft {
    0% { opacity: 0; transform: translateX(-15px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* お問い合わせフォームの点灯（虹彩）演出 */
.contact-card.is-lit {
    border-color: #facc15 !important; /* 黄色い囲み線 */
    box-shadow: 0 0 30px rgba(250, 204, 21, 0.4), 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

/* パララックス装飾の基本設定（コンテンツより奥：HTML で z-0 を併用） */
.parallax-decor {
    position: absolute;
    pointer-events: none;
    will-change: transform;
    z-index: 0;
}

/* 私たちがここで働き続ける理由カードの点灯（虹彩）演出 */
.reason-card.is-lit {
    border-color: #facc15 !important; /* 黄色い囲み線 */
    box-shadow: 0 0 30px rgba(250, 204, 21, 0.35), 0 10px 25px -5px rgba(0, 0, 0, 0.05) !important;
}

/* ===== レイヤー順序の厳密なルール（光の玉とコンテンツの重なり調整） ===== */

/* 1. 【最重要】各セクションが持っているz-indexの壁を強制解除し、要素が前に出られるようにする */
section {
    z-index: auto !important;
}

/* 2. 光の玉の通り道（各セクションの背景色より手前、コンテンツより奥） */
#network-guide {
    z-index: 10 !important;
}

/* 3. 装飾用のアイソメトリックイラスト画像（光の玉より手前） */
.parallax-decor {
    z-index: 20 !important;
}

/* 4. 優先して読ませる文字・カードなどのメインコンテンツ（一番手前・最優先） */
.work-feature-card,
.reason-card,
.contact-card,
.protect-content {
    position: relative !important;
    z-index: 30 !important;
}

/* スクロールバー非表示（社員の声の横スクロール用） */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Instagramギャラリー・ライトボックス */
.insta-gallery-item {
    display: block;
    width: 100%;
}

.insta-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.88);
    padding: 1rem;
}

.insta-lightbox:not(.hidden) {
    display: flex;
}

.insta-lightbox-image {
    max-width: min(92vw, 960px);
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0.75rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.insta-lightbox-close,
.insta-lightbox-prev,
.insta-lightbox-next {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease;
}

.insta-lightbox-close:hover,
.insta-lightbox-prev:hover,
.insta-lightbox-next:hover {
    background: rgba(255, 255, 255, 0.28);
}

.insta-lightbox-close {
    top: 1rem;
    right: 1rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    font-size: 2rem;
    line-height: 1;
}

.insta-lightbox-prev,
.insta-lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    font-size: 2rem;
    line-height: 1;
}

.insta-lightbox-prev {
    left: 1rem;
}

.insta-lightbox-next {
    right: 1rem;
}