* {
            box-sizing: border-box;
        }

        html, body {
            margin: 0;
            width: 100%;
            height: 100%;
            background: #050505;
            color: #fff;
            font-family: Arial,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
            overflow: hidden;
        }

        body {
            display: grid;
            place-items: center;
        }

        .noise {
            position: fixed;
            inset: 0;
            background: radial-gradient(ellipse at 50% 40%,#222 0%,#050505 70%);
            pointer-events: none;
        }

        .stage {
            position: relative;
            width: min(94vw,1100px);
            text-align: center;
            z-index: 1;
        }

        .mark {
            display: inline-block;
            font-size: clamp(52px,11vw,150px);
            line-height: .88;
            font-weight: 900;
            letter-spacing: -.075em;
            opacity: 0;
            transform: translateY(35px) scale(.96);
            animation: enter 1s .15s forwards;
        }

            .mark span {
                display: block;
            }

            .mark em {
                font-style: normal;
                color: #ee1824;
                text-shadow: 0 0 30px #ed182455;
            }

        .subtitle {
            font-size: clamp(12px,1.5vw,18px);
            letter-spacing: .25em;
            margin-top: 32px;
            opacity: 0;
            animation: fade .85s .9s forwards;
        }

        .line {
            height: 1px;
            background: linear-gradient(90deg,transparent,#fff,transparent);
            width: 0;
            margin: 28px auto;
            animation: line 1s 1.25s forwards;
        }

        .pillars {
            display: grid;
            grid-template-columns: repeat(3,1fr);
            gap: 12px;
            margin: 36px auto 0;
            max-width: 950px;
        }

        .pillar {
            padding: 22px 12px;
            border-top: 3px solid var(--accent);
            background: linear-gradient(180deg,color-mix(in srgb,var(--accent) 20%,#0b0b0b),#0b0b0b);
            opacity: 0;
            transform: translateY(25px);
            animation: enter .6s var(--delay) forwards;
        }

            .pillar b {
                display: block;
                font-size: clamp(12px,1.65vw,20px);
                margin: 8px 0;
                white-space: nowrap;
                letter-spacing: -.035em;
            }

            .pillar small {
                letter-spacing: .15em;
                color: #bbb;
                font-size: 10px;
            }

        .skip {
            position: fixed;
            z-index: 3;
            right: 25px;
            top: 24px;
            border: 1px solid #888;
            background: #111b;
            color: white;
            padding: 12px 20px;
            cursor: pointer;
            letter-spacing: .12em;
        }

            .skip:hover {
                background: white;
                color: black;
            }

        .progress {
            position: fixed;
            bottom: 0;
            left: 0;
            height: 3px;
            background: #ee1824;
            width: 0;
            animation: progress 7s linear forwards;
        }

        .hint {
            position: fixed;
            bottom: 25px;
            color: #aaa;
            font-size: 11px;
            letter-spacing: .12em;
        }

        .wipe {
            position: fixed;
            z-index: 2;
            inset: 0;
            background: white;
            transform: translateY(100%);
            animation: wipe .75s 6.45s forwards;
            pointer-events: none;
        }

        @keyframes enter {
            to {
                opacity: 1;
                transform: none;
            }
        }

        @keyframes fade {
            to {
                opacity: 1;
            }
        }

        @keyframes line {
            to {
                width: 85%;
            }
        }

        @keyframes progress {
            to {
                width: 100%;
            }
        }

        @keyframes wipe {
            to {
                transform: translateY(0);
            }
        }

        @media(max-width:600px) {
            .pillars {
                grid-template-columns: 1fr;
                gap: 8px;
                margin-top: 18px;
            }

            .pillar {
                padding: 10px;
            }

                .pillar b {
                    font-size: clamp(12px,3.5vw,16px);
                    margin: 4px;
                    white-space: nowrap;
                }

            .pillar {
                padding: 10px 6px;
            }

            .line {
                margin: 18px auto;
            }

            .subtitle {
                margin-top: 20px;
            }

            .hint {
                bottom: 15px;
            }
        }

        @media(prefers-reduced-motion:reduce) {
            *, *:before, *:after {
                animation: none !important;
            }

            .mark, .subtitle, .pillar {
                opacity: 1;
                transform: none;
            }

            .line {
                width: 85%;
            }

            .progress, .wipe {
                display: none;
            }
        }
/* ロゴの実際のエンターマークを使ったラスト演出 */
.enter-scene{position:fixed;inset:0;z-index:5;display:grid;place-items:center;pointer-events:none;opacity:0;animation:enter-scene-show .3s 4.35s forwards}
.enter-scene:before{content:"";position:absolute;inset:0;background:rgba(5,5,5,.96)}
.enter-button{position:relative;z-index:1;display:flex;align-items:center;flex-direction:column;gap:18px;border:0;background:transparent;color:#fff;cursor:pointer;pointer-events:auto;opacity:0;transform:scale(.65);animation:enter-mark-appear .9s 4.5s cubic-bezier(.2,1.3,.3,1) forwards,enter-mark-tap .18s 6.48s forwards}
.enter-button img{height:clamp(145px,29vh,235px);width:auto;object-fit:contain;filter:drop-shadow(0 0 22px rgba(255,255,255,.2))}
.enter-button span{font-size:12px;font-weight:700;letter-spacing:.34em;color:#ddd}
.enter-button:hover img{filter:drop-shadow(0 0 22px rgba(255,255,255,.65))}
.fake-pointer{position:absolute;z-index:2;width:42px;height:52px;left:calc(50% + 160px);top:calc(50% + 140px);opacity:0;animation:pointer-click 1.05s 5.48s forwards;pointer-events:none;filter:drop-shadow(1px 2px 2px #000)}
body.is-entering:after{content:"";position:fixed;inset:0;background:#fff;z-index:20;animation:enter-exit .5s ease-in forwards}
@keyframes enter-scene-show{to{opacity:1}}
@keyframes enter-mark-appear{to{opacity:1;transform:scale(1)}}
@keyframes enter-mark-tap{50%{transform:scale(.88)}100%{transform:scale(1)}}
@keyframes pointer-click{0%{opacity:0;transform:translate(30px,35px)}15%{opacity:1}70%{opacity:1;transform:translate(-165px,-150px)}80%{transform:translate(-165px,-145px) scale(.9)}100%{opacity:0;transform:translate(-165px,-150px)}}
@keyframes enter-exit{from{opacity:0}to{opacity:1}}
@media(max-width:600px){.fake-pointer{left:calc(50% + 90px);top:calc(50% + 100px)}@keyframes pointer-click{0%{opacity:0;transform:translate(20px,20px)}15%{opacity:1}70%{opacity:1;transform:translate(-95px,-115px)}80%{transform:translate(-95px,-110px) scale(.9)}100%{opacity:0;transform:translate(-95px,-115px)}}}
@media(prefers-reduced-motion:reduce){.enter-scene{opacity:1;animation:none}.enter-button{opacity:1;transform:none;animation:none}.fake-pointer{display:none}}

.wipe{display:none}

/* エンターマークを黒背景でも見えるよう白抜き表示 */
.enter-button img{filter:brightness(0) invert(1) drop-shadow(0 0 10px rgba(255,255,255,.3));image-rendering:auto}
.enter-button:hover img{filter:brightness(0) invert(1) drop-shadow(0 0 15px rgba(255,255,255,.7))}

/* NEXT FRONTIER: X and F accent */
.mark em, .mark span:nth-child(2)::first-letter { color:#df1010; }
.mark em { text-shadow:0 0 30px #df101055; }


/* ロゴと3つの事業カードの背後に、薄い〇△□を表示 */
.stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(92vw, 1080px);
  height: min(58vw, 615px);
  transform: translate(-50%, -50%);
  background: url('../image/hero_emblem.png') center / contain no-repeat;
  opacity: .23;
  filter: brightness(2.1);
  pointer-events: none;
}
@media (max-width:600px) {
  .stage::before { width: 100vw; height: 75vh; opacity: .19; }
}