@charset "utf-8";

/* ==========================================================================
   01. ルート変数 & 基本設定 (Variables & Base)
   ========================================================================== */
:root {
    --primary-color: #0f172a;
    --accent-color: #3b82f6;
    --text-light: #f8fafc;
}

/* スクロールバーのチラつき（シフト）完全防止 */
html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    overflow-x: hidden;
    width: 100%;
}

footer {
    background-color: #0f172a;
}

/* ==========================================================================
   02. 全体共通 スクロール連動アニメーション (Scroll Animations)
   ========================================================================== */
/* 巨大英字アニメーション */
.giant-text {
    opacity: 0;
    transform: scale(0.9) translateY(30px);
    filter: blur(8px);
    transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.6s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform, filter;
}

.giant-text.is-visible {
    opacity: 0.95;
    transform: scale(1) translateY(0);
    filter: blur(0);
}

/* 下からフェードイン */
.fade-up-element {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.fade-up-element.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 左右からのスライドイン */
.slide-in-left {
    opacity: 0;
    transform: translateX(-80px);
    filter: blur(10px);
    transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1.4s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.5s;
    will-change: opacity, transform, filter;
}

.slide-in-left.is-visible {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(80px);
    filter: blur(10px);
    transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1.4s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.9s;
    will-change: opacity, transform, filter;
}

.slide-in-right.is-visible {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
}

/* アニメーション遅延クラス */
.delay-100 {
    transition-delay: 100ms;
}

.delay-200 {
    transition-delay: 200ms;
}

.delay-300 {
    transition-delay: 300ms;
}

.delay-400 {
    transition-delay: 400ms;
}

.delay-500 {
    transition-delay: 500ms;
}

.delay-700 {
    transition-delay: 700ms;
}

/* ==========================================================================
   03. 共通UIコンポーネント (Common UI Components)
   ========================================================================== */
/* 下線付き「VIEW MORE」ボタン */
.view-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    transition: border-color 0.3s;
}

.view-more-btn:hover {
    border-bottom-color: #fff;
}

/* インタラクティブ・アローボタン */
.interactive-arrow-btn {
    position: relative;
    display: block;
    width: 160px;
    height: 50px;
    border: 1px solid #111;
    background-color: #fdfdfd;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.3s ease;
}

.interactive-arrow-btn:hover {
    background-color: #ffffff;
}

.interactive-arrow-btn .btn-text {
    position: absolute;
    top: 10px;
    left: 20px;
    color: #0056b3;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.interactive-arrow-btn .arrow-line {
    position: absolute;
    bottom: 12px;
    left: 20px;
    height: 1px;
    background-color: #111;
    width: 80px;
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.interactive-arrow-btn:hover .arrow-line {
    width: 120px;
}

.interactive-arrow-btn .arrow-line::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 8px;
    height: 1px;
    background-color: #111;
    transform-origin: right center;
    transform: rotate(45deg);
}