/* =============================================================
 * INNOVACTORY Theme - hero.css
 *
 * TOPページ ヒーローセクション
 * ============================================================= */

/* =============================================================
 * ヒーロー（TOPページ）
 * Figma: da35341a（現行サイトTOPページ）ベース
 * [TODO] 背景画像は撮り直し予定（Figma memo: 写真を変える）
 * ============================================================= */
/* 元サイト準拠: ヒーローはビューポート全画面 (100vh)。
 * 上部ヘッダー非搭載・サイドバー横配置のため 100vh フルで成立する。 */
.top-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh; /* モバイル URLバー考慮 */
    background: var(--color-dark) url(/wp-content/uploads/2023/12/fv-topimg.png) center / cover no-repeat;
    /* ↑ 背景画像はテーマデザインの一部としてここで管理する。
     *   元は post_content 内に inline style で持っていたが、設計と内容の分離方針により
     *   CSS 側に移行した。差し替え時はこのファイルの URL を更新する。 */
    display: flex;
    align-items: center;
    padding-block: var(--sp-xl);
    padding-inline: var(--container-padding-inline);
    overflow: hidden;
}
/* 背景画像とテキストのコントラスト確保用オーバーレイ。
 * 元の左→右グラデは右半分が薄すぎてサブタイトルが背景に埋もれていたため、
 * 全体に最低 0.40 のマスクを掛け、左半分はより濃くして見出しの輪郭を強調する。 */
.top-hero::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(
        to right,
        rgba(0,0,0,0.70) 0%,
        rgba(0,0,0,0.50) 50%,
        rgba(0,0,0,0.40) 100%
    );
    z-index: 0;
}
.top-hero-content {
    position: relative;
    z-index: 1;
    max-width: 720px;
}
.top-hero-title {
    font-size: clamp(34px, 4.4vw, 56px);
    font-weight: 800;
    color: var(--color-white);
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.5);
}
.top-hero-subtitle {
    font-size: clamp(13px, 1.3vw, 15px);
    font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--color-white);
    line-height: 1.5;
    margin-top: 16px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.6);
}
.top-hero-desc {
    font-size: clamp(14px, 1.5vw, 17px);
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.8;
    letter-spacing: 0.06em;
    margin-top: 28px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.6);
}
/* components.css の `.entry-content p { color: var(--color-text); }` (0,1,1)
 * がホーム本文ラッパー配下の <p> をダーク色で塗り潰すため、上記 .top-hero-*
 * (0,1,0) の `color: white` が負けて本文が背景に埋もれていた。色のみを
 * .top-hero でスコープした 0,2,0 で再上書きする（フォント等は responsive.css
 * の 0,1,0 上書きを温存するため、ここでは color だけに留める）。 */
.top-hero .top-hero-subtitle,
.top-hero .top-hero-desc {
    color: var(--color-white);
}
.top-hero-btn {
    display: flex; align-items: center;
    margin-top: 20px;
    padding-left: 4px;
}
.top-hero-btn-circle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    border: 1px solid var(--color-dark);
    border-radius: 50%;
    background: var(--color-white);
    transition: transform 0.3s;
    flex-shrink: 0;
}
.top-hero-btn-circle::after {
    content: '→';
    font-size: 16px;
    color: var(--color-dark);
}
.top-hero-btn:hover .top-hero-btn-circle { transform: scale(1.3); }
.top-hero-btn-text {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-white);
    margin-left: 15px;
}
.top-hero-btn:hover .top-hero-btn-text { color: var(--color-white); }