/* ==========================================
   1. トップヒーローエリア（画面いっぱいの枠）
========================================== */
.top-hero {
    position: relative;
    width: 100%;
    
    /* 【超重要】画面の高さ(100vh)から、ヘッダーの高さ(clamp)を引き算してピッタリ収める */
    height: calc(100vh - clamp(70px, 6vw, 100px));
    
    /* スマホのSafariなどでURLバーが出た際に画面がハミ出すのを防ぐ最新の単位(dvh) */
    height: calc(100dvh - clamp(70px, 6vw, 100px));
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* ==========================================
   2. 背景画像の設定
========================================== */
.top-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    filter: brightness(0.5); /* 文字とロゴを目立たせるために背景を暗く落とす */
}

/* ==========================================
   3. キャッチコピーとロゴをまとめる箱
========================================== */
.top-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

/* キャッチコピー（フェードイン設定） */
.hero-catchphrase {
    color: #ffffff;


    font-weight: bold;

    text-shadow:    2px 2px 10px rgba(0, 0, 0, 0.8),
                    0 0 15px rgba(79, 174, 234, 1.0);

    margin: 0;
    text-align: center;
    
    /* 4K対応: 文字サイズ（24px〜60px）と文字間隔 */
    font-size: clamp(12px, 4vw, 50px);
    letter-spacing: clamp(2px, 0.5vw, 6px);
    
    /* アニメーションの初期状態（透明で少し下にある） */
    opacity: 0;
    transform: translateY(20px);
    
    /* アニメーションの実行（0.3秒後に1秒かけてフワッと現れる） */
    animation: heroFadeIn 1s ease forwards;
    animation-delay: 0.3s; 
}

/* ロゴ（フェードイン設定） */
.hero-logo {
    /* 4K対応: ロゴのサイズ（200px〜500px） */
    width: clamp(200px, 30vw, 500px);
    height: auto;
    
    /* アニメーションの初期状態 */
    opacity: 0;
    transform: translateY(20px);
    
    /* キャッチコピーの後に続いて現れるように、開始を1.2秒遅らせる */
    animation: heroFadeIn 1s ease forwards;
    animation-delay: 1.2s; 
}

/* ==========================================
   4. スクロールを促すアイコン（∨）
========================================== */
.hero-scroll-indicator {
    position: absolute;
    /* 4K対応: 画面下からの距離 */
    bottom: clamp(20px, 4vw, 50px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* ロゴが出終わった頃（2.5秒後）にフェードインし、同時にバウンド運動を開始する */
    opacity: 0;
    animation: 
        heroFadeIn 1s ease forwards 2.5s, 
        scrollBounce 2s infinite ease-in-out 2.5s;
}

/* ∨の形をCSSの枠線だけで作る魔法 */
.hero-scroll-indicator span {
    display: block;
    /* 4K対応: ∨の大きさ */
    width: clamp(15px, 2vw, 30px);
    height: clamp(15px, 2vw, 30px);
    
    /* 右と下にだけ白い線を引いて、45度回転させることで∨にする */
    border-right: 3px solid #ffffff;
    border-bottom: 3px solid #ffffff;
    transform: rotate(45deg);
}

/* ==========================================
   5. アニメーション（キーフレーム）の定義
========================================== */
/* フェードインしながらフワッと元の位置(0)に上がる動き */
@keyframes heroFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ∨が上下にフワフワとバウンドし続ける動き */
@keyframes scrollBounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(15px); /* 15px下に動く */
    }
}



/* ==========================================
   1. 大枠の設定（2カラムグリッド）
========================================== */
.top-contents-wrapper {
    /* 4K対応：全体の幅を制限し、画面の中央に配置する */
    width: 90%;
    max-width: 1200px;
    
    margin-left: auto;
    margin-right: auto;
    
    margin-top: clamp(20px, 3vw, 40px); 
    margin-bottom: clamp(40px, 6vw, 100px);
    
    /* 魔法のグリッド設定：2列に均等に並べる */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 4vw, 60px); /* 2つの箱の間の隙間 */
}

/* ==========================================
   2. 各ブロック（箱）のデザイン
========================================== */
.top-content-box {
    padding: clamp(30px, 4vw, 60px);
    
    /* 中身を縦に並べて、すべて中央揃えにする */
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
}

/* ==========================================
   3. 文字とボタンの配置設定
========================================== */
.top-content-title {
    color: #ffffff;
    font-size: clamp(24px, 3vw, 36px);
    margin-top: 0;

    border-bottom: 2px solid #1af7fb;
    padding-bottom: 10px;
    
    /* ==========================================
       【追加】ブラウザの初期余白を上書きして、隙間を狭くする
       スマホでは5px、PCでも最大15pxの狭い隙間にコントロールします
    ========================================== */
    margin-bottom: clamp(5px, 1vw, 15px); 
    
    letter-spacing: 2px;
}

.top-content-text {
    color: #ffffff;
    font-size: clamp(14px, 1.5vw, 18px);
    line-height: 1.8;
    
    /* ==========================================
       【追加】説明文(p)の上の初期余白もゼロにして、完全に隙間を支配する
    ========================================== */
    margin-top: 0; 
    
    /* 【プロの技】左右の文章の長さが違っても、ボタンの高さをピシッと一番下に揃える魔法 */
    flex-grow: 1; 
}

/* ==========================================
   ボタンの基本スタイル（ゴーストボタン）
========================================== */
.btn-link {
    /* 矢印とテキストを中央で綺麗に並べるためのFlexbox */
    display: inline-flex; 
    justify-content: center;
    align-items: center;
    
    /* 4K対応：余白と文字サイズを動的に */
    padding: clamp(12px, 1.5vw, 18px) clamp(30px, 4vw, 50px);
    font-size: clamp(16px, 1.5vw, 20px);
    font-weight: bold;
    
    /* 色と枠線の設定（画像に合わせる） */
    background-color: transparent; /* 背景を完全に透明にする */
    color: #ffffff; /* 文字色は白 */
    border: 3px solid #ffffff; /* 白くて少し太めの枠線 */
    border-radius: 12px; /* 画像のような絶妙な角丸 */
    
    text-decoration: none; 
    transition: all 0.3s ease; /* フワッと変化させる */
}

/* 擬似要素(::after)を使って、HTMLを変更せずに「＞」を自動追加する魔法 */
.btn-link::after {
    content: "＞";
    margin-left: 15px; /* テキストと矢印の間の隙間 */
    font-size: 0.9em; /* 矢印を少しだけ小さくしてバランスを取る */
    transition: transform 0.3s ease; /* ホバーで動かすための準備 */
}

/* ==========================================
   ホバー時（マウスが乗った時）のスタイル
========================================== */
.btn-link:hover {
    background-color: #1af7fb; /* 中の色を白で塗りつぶす */
    border-color: #1af7fb;
    color: #333333; /* 文字色を背景の黒に近い色にして読めるように反転させる */
    filter: brightness(1.0);
}

/* ホバー時に「＞」だけを少し右に動かす（クリッカブルな印象を高めるプロの技） */
.btn-link:hover::after {
    transform: translateX(5px);
}

/* ==========================================
   4. スマートフォン版（画面幅768px以下）
========================================== */
@media screen and (max-width: 768px) {
    .top-contents-wrapper {
        /* スマホの時は強制的に「1列（縦積み）」に変更する */
        grid-template-columns: 1fr; 
        
        /* スマホ画面に合わせて箱の幅を少し広げる */
        width: 95%; 
    }
}