/* ==========================================================================
   Hero Section - 企業サイト風信頼感×官公庁デザイン（2カラム版）
   v57.0.0 - Archive Page Color Scheme Unified
   ========================================================================== */

.hero {
    /* アーカイブページと統一したカラーパレット */
    --hero-navy-900: #1a2634;  /* アーカイブの book-cover 色 */
    --hero-navy-800: #243447;
    --hero-navy-700: #2c3e50;
    --hero-navy-600: #34495e;
    --hero-navy-100: #e8ecf1;
    --hero-navy-50: #f4f6f8;
    
    /* ゴールド（アーカイブと同じ） */
    --hero-gold: #c5a059;
    --hero-gold-light: #d4b77a;
    --hero-gold-pale: #f0e6c8;
    
    /* ニュートラル */
    --hero-white: #fdfdfd;
    --hero-white-pure: #ffffff;
    --hero-gray-900: #2b2b2b;
    --hero-gray-700: #495057;
    --hero-gray-600: #6c757d;
    --hero-gray-500: #adb5bd;
    
    /* タイポグラフィ */
    --hero-font-serif: "Shippori Mincho", "Yu Mincho", serif;
    --hero-font-sans: "Noto Sans JP", sans-serif;
    --hero-font-heading: "Zen Old Mincho", serif;
    
    /* スペーシング */
    --hero-space-xs: 4px;
    --hero-space-sm: 8px;
    --hero-space-md: 16px;
    --hero-space-lg: 24px;
    --hero-space-xl: 32px;
    --hero-space-2xl: 48px;
    --hero-space-3xl: 64px;
    
    /* レイアウト */
    --hero-container-max: 1400px;
    
    /* エフェクト */
    --hero-transition: 0.25s ease;
    --hero-shadow: 0 4px 12px rgba(0,0,0,0.15);
    --hero-shadow-lg: 0 10px 30px rgba(0,0,0,0.2);
    
    /* ボーダー */
    --hero-radius: 4px;
    --hero-radius-lg: 8px;
}

/* ==========================================================================
   ベーススタイル
   ========================================================================== */
.hero {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    font-family: var(--hero-font-sans);
    color: var(--hero-white);
    overflow: hidden;
}

/* ==========================================================================
   背景画像（右側に配置）+ アニメーション
   ========================================================================== */
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero__bg-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 110%;
    height: 110%;
    object-fit: cover;
    object-position: right center;
    /* ゆっくりズーム＆パンアニメーション */
    animation: hero-image-motion 20s ease-in-out infinite;
    transform-origin: center center;
}

/* 画像モーションアニメーション */
@keyframes hero-image-motion {
    0% {
        transform: scale(1.05) translate(0, 0);
    }
    25% {
        transform: scale(1.08) translate(-1%, -0.5%);
    }
    50% {
        transform: scale(1.1) translate(-2%, 0);
    }
    75% {
        transform: scale(1.08) translate(-1%, 0.5%);
    }
    100% {
        transform: scale(1.05) translate(0, 0);
    }
}

.hero__bg-overlay {
    position: absolute;
    inset: 0;
    /* アーカイブページの配色に合わせたグラデーション */
    background: linear-gradient(
        90deg,
        rgba(26, 38, 52, 0.97) 0%,
        rgba(26, 38, 52, 0.93) 35%,
        rgba(26, 38, 52, 0.75) 55%,
        rgba(26, 38, 52, 0.45) 75%,
        rgba(26, 38, 52, 0.25) 100%
    );
}

/* シマーエフェクト（光の反射） */
.hero__bg-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 0%,
        transparent 40%,
        rgba(255, 255, 255, 0.03) 50%,
        transparent 60%,
        transparent 100%
    );
    animation: hero-shimmer 8s ease-in-out infinite;
}

@keyframes hero-shimmer {
    0%, 100% {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        transform: translateX(100%);
        opacity: 1;
    }
}

/* ==========================================================================
   コンテナ・グリッド
   ========================================================================== */
.hero__container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--hero-container-max);
    margin: 0 auto;
    padding: var(--hero-space-3xl) var(--hero-space-lg);
}

.hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--hero-space-3xl);
    align-items: center;
}

/* ==========================================================================
   左カラム：コンテンツ + フェードインアニメーション
   ========================================================================== */
.hero__content {
    max-width: 600px;
}

/* コンテンツ要素のフェードインアニメーション */
.hero__badge-group,
.hero__title,
.hero__description,
.hero__stats,
.hero__cta,
.hero__features {
    opacity: 0;
    transform: translateY(20px);
    animation: hero-fade-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero__badge-group { animation-delay: 0.1s; }
.hero__title { animation-delay: 0.2s; }
.hero__description { animation-delay: 0.3s; }
.hero__stats { animation-delay: 0.4s; }
.hero__cta { animation-delay: 0.5s; }
.hero__features { animation-delay: 0.6s; }

@keyframes hero-fade-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* バッジグループ */
.hero__badge-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hero-space-sm);
    margin-bottom: var(--hero-space-lg);
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--hero-space-xs);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: var(--hero-space-xs) var(--hero-space-md);
    border-radius: var(--hero-radius);
}

.hero__badge--official {
    background: var(--hero-gold);
    color: var(--hero-navy-900);
}

.hero__badge--date {
    background: rgba(255, 255, 255, 0.15);
    color: var(--hero-white);
    backdrop-filter: blur(4px);
}

/* タイトル */
.hero__title {
    font-family: var(--hero-font-heading);
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--hero-white);
    margin: 0 0 var(--hero-space-lg) 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* 説明文 */
.hero__description {
    font-size: 15px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 var(--hero-space-xl) 0;
}

/* ==========================================================================
   統計バー
   ========================================================================== */
.hero__stats {
    display: flex;
    gap: var(--hero-space-lg);
    margin-bottom: var(--hero-space-xl);
    padding: var(--hero-space-lg) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.hero__stat {
    display: flex;
    align-items: center;
    gap: var(--hero-space-md);
}

.hero__stat-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(197, 160, 89, 0.15);
    border: 1px solid var(--hero-gold);
    border-radius: 50%;
    color: var(--hero-gold);
    position: relative;
}

/* アイコンのパルスエフェクト */
.hero__stat-icon::before {
    content: '';
    position: absolute;
    inset: -4px;
    border: 1px solid var(--hero-gold);
    border-radius: 50%;
    opacity: 0;
    animation: hero-icon-pulse 3s ease-out infinite;
}

.hero__stat:nth-child(1) .hero__stat-icon::before { animation-delay: 0s; }
.hero__stat:nth-child(2) .hero__stat-icon::before { animation-delay: 1s; }
.hero__stat:nth-child(3) .hero__stat-icon::before { animation-delay: 2s; }

@keyframes hero-icon-pulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.hero__stat-icon svg {
    width: 24px;
    height: 24px;
}

.hero__stat-content {
    display: flex;
    flex-direction: column;
}

.hero__stat-main {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.hero__stat-number {
    font-family: var(--hero-font-heading);
    font-size: 28px;
    font-weight: 700;
    color: var(--hero-gold);
    line-height: 1;
}

.hero__stat-unit {
    font-size: 12px;
    font-weight: 700;
    color: var(--hero-white);
}

.hero__stat-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 2px;
}

/* ==========================================================================
   CTAエリア
   ========================================================================== */
.hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hero-space-md);
    margin-bottom: var(--hero-space-xl);
}

.hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hero-space-sm);
    padding: var(--hero-space-md) var(--hero-space-xl);
    border: 2px solid transparent;
    border-radius: var(--hero-radius);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--hero-transition);
}

.hero__btn--primary {
    background: var(--hero-navy-800);
    color: var(--hero-white);
    border-color: var(--hero-navy-700);
}

.hero__btn--primary:hover {
    background: var(--hero-navy-700);
    transform: translateY(-2px);
    box-shadow: var(--hero-shadow-lg);
}

.hero__btn--secondary {
    background: var(--hero-gold);
    color: var(--hero-navy-900);
    border-color: var(--hero-gold);
}

.hero__btn--secondary:hover {
    background: var(--hero-gold-light);
    transform: translateY(-2px);
    box-shadow: var(--hero-shadow-lg);
}

.hero__btn-icon {
    flex-shrink: 0;
}

/* ==========================================================================
   特徴リスト
   ========================================================================== */
.hero__features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hero-space-md) var(--hero-space-xl);
    list-style: none;
    margin: 0;
    padding: 0;
}

.hero__feature {
    display: flex;
    align-items: center;
    gap: var(--hero-space-sm);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.hero__feature-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--hero-gold);
}

/* ==========================================================================
   右カラム：ビジュアルスペース
   ========================================================================== */
.hero__visual {
    /* 背景画像で表示するため、このエリアは透明 */
}

/* ==========================================================================
   レスポンシブ - タブレット
   ========================================================================== */
@media (max-width: 1024px) {
    .hero {
        min-height: 500px;
    }
    
    .hero__grid {
        grid-template-columns: 1.2fr 0.8fr;
        gap: var(--hero-space-xl);
    }
    
    .hero__title {
        font-size: clamp(28px, 4.5vw, 42px);
    }
    
    .hero__stats {
        flex-wrap: wrap;
        gap: var(--hero-space-md);
    }
    
    .hero__stat-icon {
        width: 40px;
        height: 40px;
    }
    
    .hero__stat-icon svg {
        width: 20px;
        height: 20px;
    }
    
    .hero__stat-number {
        font-size: 24px;
    }
}

/* ==========================================================================
   レスポンシブ - モバイル
   ========================================================================== */
@media (max-width: 768px) {
    .hero {
        min-height: auto;
    }
    
    .hero__bg-overlay {
        background: linear-gradient(
            180deg,
            rgba(26, 38, 52, 0.9) 0%,
            rgba(26, 38, 52, 0.95) 100%
        );
    }
    
    .hero__container {
        padding: var(--hero-space-2xl) var(--hero-space-md);
    }
    
    .hero__grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .hero__content {
        max-width: 100%;
    }
    
    .hero__visual {
        display: none;
    }
    
    .hero__badge-group {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .hero__title {
        font-size: 28px;
    }
    
    .hero__description {
        font-size: 14px;
    }
    
    .hero__stats {
        flex-direction: column;
        gap: var(--hero-space-md);
        padding: var(--hero-space-md) 0;
    }
    
    .hero__stat {
        padding: var(--hero-space-sm) 0;
    }
    
    .hero__stat-icon {
        width: 36px;
        height: 36px;
    }
    
    .hero__stat-number {
        font-size: 22px;
    }
    
    .hero__cta {
        flex-direction: column;
    }
    
    .hero__btn {
        width: 100%;
        justify-content: center;
    }
    
    .hero__features {
        flex-direction: column;
        gap: var(--hero-space-sm);
    }
}

/* ==========================================================================
   アクセシビリティ
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .hero__btn {
        transition: none;
    }
    
    /* アニメーションを無効化 */
    .hero__bg-image {
        animation: none;
        transform: scale(1.05);
    }
    
    .hero__bg-shimmer {
        animation: none;
        display: none;
    }
    
    .hero__badge-group,
    .hero__title,
    .hero__description,
    .hero__stats,
    .hero__cta,
    .hero__features {
        animation: none;
        opacity: 1;
        transform: none;
    }
    
    .hero__stat-icon::before {
        animation: none;
        display: none;
    }
}

@media (prefers-contrast: high) {
    .hero__bg-overlay {
        background: rgba(26, 38, 52, 0.97);
    }
}

.hero a:focus-visible,
.hero button:focus-visible {
    outline: 3px solid var(--hero-gold);
    outline-offset: 3px;
}

/* ==========================================================================
   印刷スタイル
   ========================================================================== */
@media print {
    .hero {
        min-height: auto;
        padding: 24px 0;
        background: white;
        color: black;
    }
    
    .hero__bg {
        display: none;
    }
    
    .hero__title {
        color: black;
        text-shadow: none;
    }
    
    .hero__description,
    .hero__feature {
        color: #333;
    }
    
    .hero__btn {
        border: 2px solid black;
        background: white;
        color: black;
    }
}

/* ==========================================================================
   強制表示
   ========================================================================== */
.hero {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.hero__container,
.hero__grid,
.hero__content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.hero__grid {
    display: grid !important;
}