@charset "UTF-8";

/* =========================================================
   AcAsystem. トップページ ファーストビュー
   約3秒構成のヒーローアニメーション
   ========================================================= */

.aca-hero {
    --aca-bg-deep: #040b1b;
    --aca-bg-mid: #061a3e;
    --aca-bg-blue: #073e79;
    --aca-ivory: #f7f2e8;
    --aca-gold-light: #fff18b;
    --aca-gold-main: #f6c31e;
    --aca-gold-dark: #976000;
    --aca-black: #101010;

    --aca-draw-start: 0.1s;
    --aca-char-step: 0.065s;
    --aca-transform-start: 2.55s;
    --aca-transform-duration: 0.68s;
    --aca-cta-start: 2.65s;

    position: relative;
    display: flex;
    align-items: center;
    min-height: calc(100svh - var(--aca-nav-h, 74px));
    padding: clamp(24px, 6vh, 64px) 0 clamp(96px, 14vh, 150px);
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 30% 20%,
            rgba(84, 213, 255, 0.34),
            transparent 30%),
        radial-gradient(circle at 80% 82%,
            rgba(0, 104, 205, 0.4),
            transparent 32%),
        linear-gradient(150deg,
            var(--aca-bg-deep),
            var(--aca-bg-mid) 46%,
            var(--aca-bg-blue) 100%);
    background-size: 240% 240%, 240% 240%, 260% 260%;
    background-position: 10% 10%, 90% 90%, 0% 0%;
    animation: acaGradientDrift 16s ease-in-out infinite;
}

/* 斜めの細かいストライプ */
.aca-hero::before {
    content: "";
    position: absolute;
    inset: -30%;
    z-index: -3;
    opacity: 0.54;
    background:
        repeating-linear-gradient(132deg,
            transparent 0 54px,
            rgba(105, 212, 255, 0.055) 55px 57px,
            transparent 58px 104px);
    animation: acaStripeDrift 28s linear infinite;
}

/* 固定の斜めライン */
.aca-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        linear-gradient(140deg,
            transparent 0 57%,
            rgba(58, 210, 255, 0.58) 57.15% 57.45%,
            transparent 57.7%),
        linear-gradient(140deg,
            transparent 0 68%,
            rgba(58, 210, 255, 0.19) 68.1% 68.35%,
            transparent 68.6%);
}

/* 1本ずつ描かれる背景ライン */
.aca-background {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.aca-background-line {
    position: absolute;
    left: -30%;
    width: 160%;
    height: 2px;
    opacity: 0;
    transform: rotate(-10deg) scaleX(0);
    background:
        linear-gradient(90deg,
            transparent,
            rgba(81, 213, 255, 0.34),
            rgba(160, 232, 255, 0.5),
            rgba(81, 213, 255, 0.34),
            transparent);
}

.aca-line-from-top {
    transform-origin: right center;
}

.aca-line-from-bottom {
    transform-origin: left center;
}

.aca-line-1 {
    top: 26%;
    animation: acaDrawLine 7.5s ease-in-out 0.4s infinite;
}

.aca-line-2 {
    top: 48%;
    animation: acaDrawLine 9.8s ease-in-out 2.3s infinite;
}

.aca-line-3 {
    top: 72%;
    animation: acaDrawLine 8.4s ease-in-out 1.1s infinite;
}

.aca-line-4 {
    top: 88%;
    animation: acaDrawLine 11.2s ease-in-out 3.6s infinite;
}

.aca-line-5 {
    top: 12%;
    animation: acaDrawLine 10.4s ease-in-out 5.2s infinite;
}

.aca-line-6 {
    top: 60%;
    animation: acaDrawLine 8.9s ease-in-out 6.7s infinite;
}

/* コピー */
.aca-copy {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 0 clamp(18px, 6vw, 80px);
}

.aca-copy-svg {
    display: block;
    width: min(100%, 760px);
    height: auto;
    overflow: visible;
}

/* 筆記体(Alluraをパス化) */
.aca-script-line {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.55));
}

.aca-script-char {
    fill: #ffffff;
    fill-opacity: 0;
    stroke: #ffffff;
    stroke-width: 1.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: acaDrawChar 0.48s ease forwards;
    animation-delay:
        calc(var(--aca-draw-start) + (var(--char-index) * var(--aca-char-step)));
}

.aca-script-layer {
    animation: acaHideScript 0.38s ease var(--aca-transform-start) forwards;
}

/* 格式のあるセリフ体 */
.aca-formal-mask-rect {
    transform-box: fill-box;
    transform-origin: left center;
    transform: scaleX(0);
    animation:
        acaRevealFormal var(--aca-transform-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--aca-transform-start) forwards;
}

.aca-formal-layer {
    opacity: 0;
    animation:
        acaShowFormal 0.55s cubic-bezier(0.22, 1, 0.36, 1) var(--aca-transform-start) forwards;
}

.aca-formal-text,
.aca-formal-title {
    fill: var(--aca-ivory);
    font-family: "Cormorant Garamond", "Bodoni 72", Didot, Georgia, "Times New Roman", serif;
}

.aca-formal-text {
    font-weight: 400;
    letter-spacing: -0.025em;
}

.aca-formal-line-1,
.aca-formal-line-3 {
    font-size: 76px;
}

.aca-formal-line-2,
.aca-formal-line-4 {
    font-size: 116px;
}

.aca-formal-title {
    font-size: 68px;
    font-weight: 500;
    letter-spacing: -0.035em;
}

/* 画面全体を横切る光 */
.aca-sweep {
    position: absolute;
    inset: 0;
    z-index: 8;
    overflow: hidden;
    pointer-events: none;
}

.aca-sweep::before {
    content: "";
    position: absolute;
    top: -15%;
    left: 0;
    width: 34vw;
    height: 130%;
    opacity: 0;
    transform: translateX(-70vw) skewX(-14deg);
    background: linear-gradient(90deg,
            rgba(84, 213, 255, 0) 0%,
            rgba(255, 255, 255, 0.95) 44%,
            rgba(255, 227, 111, 0.95) 56%,
            rgba(84, 213, 255, 0) 100%);
    animation:
        acaSweep var(--aca-transform-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--aca-transform-start) forwards;
}

/* CTAボタン */
.aca-cta {
    position: absolute;
    left: clamp(18px, 6vw, 80px);
    bottom: clamp(32px, 7vh, 72px);
    z-index: 7;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: min(330px, calc(100% - 36px));
    min-height: 58px;
    padding: 0 24px;
    border: 1px solid rgba(255, 238, 125, 0.95);
    border-radius: 14px;
    overflow: hidden;
    color: var(--aca-black);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    opacity: 0;
    transform: translateY(16px);
    background:
        linear-gradient(135deg,
            var(--aca-gold-dark),
            var(--aca-gold-main) 30%,
            var(--aca-gold-light) 56%,
            var(--aca-gold-main) 77%,
            #7c4900);
    box-shadow:
        0 12px 34px rgba(0, 0, 0, 0.34),
        0 0 26px rgba(255, 196, 0, 0.26);
    animation:
        acaShowCta 0.52s cubic-bezier(0.22, 1, 0.36, 1) var(--aca-cta-start) forwards;
}

.aca-cta:hover,
.aca-cta:focus {
    color: var(--aca-black);
}

.aca-cta:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.aca-cta::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 12px;
    pointer-events: none;
    background:
        linear-gradient(110deg,
            transparent 24%,
            rgba(255, 255, 255, 0.56) 48%,
            transparent 70%);
    transform: translateX(-120%);
    animation: acaButtonShine 2.8s ease 3.5s infinite;
}

.aca-cta-label {
    position: relative;
    z-index: 1;
}

.aca-cta-arrow {
    position: relative;
    z-index: 1;
    font-size: 1.4rem;
    line-height: 1;
}

.aca-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* =========================================================
   キーフレーム
   ========================================================= */

@keyframes acaDrawChar {
    0% {
        opacity: 0;
        stroke-dashoffset: 1;
        fill-opacity: 0;
    }

    8% {
        opacity: 1;
    }

    62% {
        stroke-dashoffset: 0;
        fill-opacity: 0;
    }

    100% {
        opacity: 1;
        stroke-dashoffset: 0;
        fill-opacity: 1;
    }
}

@keyframes acaHideScript {
    to {
        opacity: 0;
        filter: blur(3px);
    }
}

@keyframes acaRevealFormal {
    to {
        transform: scaleX(1);
    }
}

@keyframes acaShowFormal {
    0% {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(6px);
    }

    72% {
        opacity: 1;
        transform: translateY(-1px);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes acaSweep {
    0% {
        opacity: 0;
        transform: translateX(-70vw) skewX(-14deg);
    }

    16% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(130vw) skewX(-14deg);
    }
}

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

@keyframes acaButtonShine {

    0%,
    34% {
        transform: translateX(-120%);
    }

    66%,
    100% {
        transform: translateX(120%);
    }
}

@keyframes acaGradientDrift {
    0% {
        background-position: 10% 10%, 90% 90%, 0% 0%;
    }

    50% {
        background-position: 70% 55%, 30% 45%, 60% 60%;
    }

    100% {
        background-position: 10% 10%, 90% 90%, 0% 0%;
    }
}

@keyframes acaStripeDrift {
    from {
        transform: translate3d(-3%, 0, 0);
    }

    to {
        transform: translate3d(3%, -2%, 0);
    }
}

@keyframes acaDrawLine {
    0% {
        opacity: 0;
        transform: rotate(-10deg) scaleX(0);
    }

    6% {
        opacity: 1;
    }

    42% {
        opacity: 1;
        transform: rotate(-10deg) scaleX(1);
    }

    62% {
        opacity: 0;
        transform: rotate(-10deg) scaleX(1);
    }

    100% {
        opacity: 0;
        transform: rotate(-10deg) scaleX(1);
    }
}

/* =========================================================
   レスポンシブ
   ========================================================= */

@media (max-width: 575.98px) {
    .aca-hero {
        min-height: calc(100svh - var(--aca-nav-h, 66px));
        padding-bottom: clamp(88px, 16vh, 132px);
    }

    .aca-cta {
        font-size: 0.95rem;
    }
}

@media (min-width: 992px) {
    .aca-copy-svg {
        width: min(62vw, 760px);
    }
}

/* =========================================================
   モーション低減設定
   ========================================================= */

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

    .aca-script-layer,
    .aca-sweep {
        display: none;
    }

    .aca-hero,
    .aca-hero::before,
    .aca-cta::before {
        animation: none;
    }

    .aca-background-line {
        animation: none;
        opacity: 1;
        transform: rotate(-10deg) scaleX(1);
    }

    .aca-formal-layer {
        opacity: 1;
        animation: none;
    }

    .aca-formal-mask-rect {
        transform: scaleX(1);
        animation: none;
    }

    .aca-cta {
        opacity: 1;
        transform: none;
        animation: none;
    }
}