/* ヒーローセクション */
.hero-section {
    position: relative;
    width: 100%;
    /* ヘッダー分を避ける上部余白 */
    margin-top:90px;       /* ←ヘッダー高さ 90px に変更 */
    /* 画面の高さ(100vh)からヘッダー高さを引いた高さに */
    height: calc(88vh - 90px);
    overflow: hidden;
    padding-left: 26px; /* コンテナから移動 */
    padding-right: 26px; /* コンテナから移動 */
}

/* 背景画像 */
.hero-section .hero-bg {
    position: absolute;
    top: 0;
    left: 26px; /* 左側に26pxの余白 */
    right: 26px; /* 右側に26pxの余白 */
    width: calc(100% - 52px); /* 左右のパディング分を引く */
    height: 100%;
    background: url('https://www.empirestate.tokyo/wp-content/uploads/2025/06/挑戦で、全ての可能性を解き放つ。.png') center center no-repeat; /* center/coverから変更 */
    background-size: cover; /* ← coverに戻して画面いっぱいに */
    z-index: 0;
}

/* 薄いオーバーレイ */
.hero-section .hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Figmaデザインに合わせてオーバーレイを削除または非常に薄くする */
    /* background: none; */ /* ← オーバーレイ不要な場合 */
    background: rgba(255, 255, 255, 0.1); /* ← 必要であれば非常に薄く設定 */
    left: 0;
    width: 100%;
}

/* 中央コンテンツ */
.hero-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 40px 20px;   /* スクリーンショットの値、または適切な固定値 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Flexアイテムを垂直方向中央に */
    align-items: center;     /* Flexアイテムを水平方向中央に */
    text-align: center;
    color: #000000;
    height: 100%; /* ← 親要素(.hero-section)の高さに合わせる */
    box-sizing: border-box; /* paddingを含めて高さを100%にする */
}

/* テキスト背景のぼかし効果 */
.hero-content-blur-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 596px;  /* Figmaで指定された幅 */
    height: 390px; /* Figmaで指定された高さ */
    border-radius: 69px; /* Figmaで指定された角丸 */
    background: rgba(255, 255, 255, 0.15);
    z-index: -1;  /* テキストの背後に配置 */

    /* エフェクト適用 */
    filter: blur(90px);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    /* IE対応が必要な場合 */
    @supports (-ms-ime-align: auto) {
        background: rgba(255, 255, 255, 0.3);
    }

    /* ──────────────────────────
       Chrome（Arc）用フォールバック
       backdrop-filter が微妙に弱い場合に
       filter のみで背景を再描画＋拡大して強める
    ────────────────────────── */
    @supports not ((-webkit-backdrop-filter: blur(1px))) {
        /* 背景を元画像に戻して、自前でぼかし＆スケール */
        background: url('https://www.empirestate.tokyo/wp-content/uploads/2025/06/hero_bg.jpg') center center/cover no-repeat;
        filter: blur(100px);
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* サブタイトル */
.hero-subtitle {
    color: #212022; /* ローディング画面と統一 */
    /* ローディング画面と同じフォントファミリーに統一 */
    font-family: 'Zen Kaku Gothic Antique', 'Yaldevi', sans-serif;
    font-size: 42px; /* ローディング画面と統一 */
    font-style: normal;
    font-weight: 700;
    line-height: 71px; /* ローディング画面と統一 */
    letter-spacing: -0.04em; /* ローディング画面と統一 */
    /* 固定幅を削除して自動調整に変更 */
    width: auto; /* 442pxから変更 */
    max-width: 100%; /* 最大幅を設定 */
    height: auto; /* 75pxから変更 */
    flex-shrink: 0; /* 親がFlexコンテナの場合に影響 */
    margin-bottom: 0px; /* ローディング画面と統一 */
    /* 中央揃えのためにマージンautoを追加 */
    margin-left: auto;
    margin-right: auto;
    position: relative; /* ぼかし背景の上に表示するため */
    /* overflow: hidden; を削除して文字が見えるようにする */
    text-align: center; /* 中央揃えを明示 */
    white-space: nowrap; /* 改行を防ぐ */
}

/* ローディング画面と同様のひらがな調整をヒーローセクションにも適用 */
.hero-subtitle .char-te,
.hero-subtitle .char-de,
.hero-subtitle .char-wo,
.hero-subtitle .char-no,
.hero-subtitle .char-ki,
.hero-subtitle .char-comma {
    font-size: calc(42px * 0.976);
}

/* 句読点の横幅を詰める */
.hero-subtitle .char-comma {
    letter-spacing: -0.3em;
    margin-right: -0.2em;
}

/* ロゴ */
.hero-logo img {
    width: 760px; /* ローディング画面と統一 */
    height: auto; /* ローディング画面と統一 */
    flex-shrink: 0;
    object-fit: contain; /* 画像がコンテナ内に収まるように */
    margin-bottom: 30px; /* ローディング画面と統一 */
    position: relative; /* ぼかし背景の上に表示するため */
}

/* タグライン */
.hero-tagline {
    color: #1F2020;
    /* 指定されたフォント。環境にない場合を考慮し、sans-serifを追記 */
    font-family: "Hiragino Sans", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 13.68px;
    /* text-transform は指定されていないため削除 */
    position: relative; /* ぼかし背景の上に表示するため */
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
    .hero-section {
        /* モバイル時もヘッダー分を確保 */
  /* ←モバイルヘッダー高さ (必要なら調整) */
        /* モバイル時も画面高さからヘッダー高さを引く */
        height: calc(88vh - 85px); /* ← モバイルヘッダー高さが違う場合は90pxを調整 */
        padding-left: 16px; /* モバイル用パディング */
        padding-right: 16px; /* モバイル用パディング */
    }

    .hero-section .hero-bg,
    .hero-content {
        /* hero-content は中央寄せを維持 */
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
        left: 16px; /* モバイル時は16pxに */
        right: 16px; /* モバイル時は16pxに */
        width: calc(100% - 32px); /* モバイル時のパディング分を引く */
    }
    .hero-subtitle {
        /* ローディング画面と統一 */
        font-size: 31px; /* ローディング画面と統一 */
        line-height: 1.4; /* ローディング画面と統一 */
        letter-spacing: -0.03em; /* ローディング画面と統一 */
        width: auto; /* 幅は自動調整に */
        height: auto; /* 高さは自動調整に */
        margin-bottom: 5px; /* ローディング画面と統一 */
        white-space: nowrap; /* 強制的に1行表示 */
        overflow: visible; /* はみ出しても表示 */
        max-width: 95vw; /* 画面幅の95%以内に収める */
    }
    .hero-subtitle .char-te,
    .hero-subtitle .char-de,
    .hero-subtitle .char-wo,
    .hero-subtitle .char-no,
    .hero-subtitle .char-ki,
    .hero-subtitle .char-comma {
        font-size: calc(31px * 0.976);
    }
    .hero-subtitle .char-comma {
        letter-spacing: -0.3em;
        margin-right: -0.2em;
    }
    .hero-logo img {
        /* ローディング画面と統一 */
        width: 100%;
        height: auto;
        margin-bottom: 20px; /* ローディング画面と統一 */
    }
    .hero-tagline {
        /* モバイル用に調整 */
        font-size: 14px; /* モバイル用に縮小 */
        letter-spacing: 8px; /* 文字間隔も縮小 */
    }

    .hero-content-blur-bg {
        background: rgba(255, 255, 255, 0.15);
        filter: blur(50px);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);

        @supports not ((-webkit-backdrop-filter: blur(1px))) {
            background: url('https://www.empirestate.tokyo/wp-content/uploads/2025/06/hero_bg.jpg') center center/cover no-repeat;
            filter: blur(70px);
            transform: translate(-50%, -50%) scale(1.1);
        }
    }
}

/* 580px前後での調整 */
@media (max-width: 580px) {
    .hero-subtitle {
        font-size: 26px; /* ローディング画面と統一 */
        line-height: 1.3; /* ローディング画面と統一 */
        letter-spacing: -0.025em; /* ローディング画面と統一 */
        white-space: nowrap;
        max-width: 98vw;
    }
    .hero-subtitle .char-te,
    .hero-subtitle .char-de,
    .hero-subtitle .char-wo,
    .hero-subtitle .char-no,
    .hero-subtitle .char-ki,
    .hero-subtitle .char-comma {
        font-size: calc(26px * 0.976);
    }
    .hero-subtitle .char-comma {
        letter-spacing: -0.3em;
        margin-right: -0.2em;
    }
    .hero-logo img {
        width: 100%;
    }
    .hero-tagline {
        font-size: 15px; /* ローディング画面と統一 */
        letter-spacing: 0.2em; /* ローディング画面と統一 */
    }
}

/* 450px以下での調整 */
@media (max-width: 450px) {
    .hero-subtitle {
        font-size: 22px; /* ローディング画面と統一 */
        line-height: 1.3; /* ローディング画面と統一 */
        letter-spacing: -0.02em; /* ローディング画面と統一 */
    }
    .hero-subtitle .char-te,
    .hero-subtitle .char-de,
    .hero-subtitle .char-wo,
    .hero-subtitle .char-no,
    .hero-subtitle .char-ki,
    .hero-subtitle .char-comma {
        font-size: calc(22px * 0.976);
    }
    .hero-subtitle .char-comma {
        letter-spacing: -0.3em;
        margin-right: -0.2em;
    }
    .hero-logo img {
        width: 100%;
    }
    .hero-tagline {
        font-size: 13px; /* ローディング画面と統一 */
        letter-spacing: 0.15em; /* ローディング画面と統一 */
    }
}

/* 375px以下での調整 */
@media (max-width: 375px) {
    .hero-subtitle {
        font-size: 14px; /* ローディング画面と統一 */
        line-height: 1.1; /* ローディング画面と統一 */
        white-space: nowrap;
    }
    .hero-subtitle .char-te,
    .hero-subtitle .char-de,
    .hero-subtitle .char-wo,
    .hero-subtitle .char-no,
    .hero-subtitle .char-ki,
    .hero-subtitle .char-comma {
        font-size: calc(14px * 0.976);
    }
    .hero-subtitle .char-comma {
        letter-spacing: -0.3em;
        margin-right: -0.2em;
    }
    .hero-logo img {
        width: 100%;
        margin-bottom: 15px; /* ローディング画面と統一 */
    }
    .hero-tagline {
        font-size: 10px; /* ローディング画面と統一 */
        letter-spacing: 0.08em; /* ローディング画面と統一 */
    }
}

/* テキストアニメーション */
.hero-subtitle .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    filter: blur(0px); /* 初期状態はブラーなし */
    /* filter プロパティもトランジションの対象に含める */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out, filter 0.3s ease-out;
}

/* 表示時のアニメーションクラス（旧 .animate から変更） */
.hero-subtitle .char.animate-in {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
}

/* 非表示時のアニメーションクラス（新規追加） */
.hero-subtitle .char.animate-out {
    opacity: 0;
    transform: translateY(-20px); /* 上に移動しながら消える */
    filter: blur(5px); /* ブラーを適用 */
}

/* 特定の文字のサイズ調整は削除（.hero-subtitle のフォントサイズを継承させる） */
/*
.hero-subtitle .char-no {
    font-size: 30px; 
}

.hero-subtitle .char-ki {
    font-size: 50px; 
}
*/