/* style.css */

/* ========================================================================== 
   1. 基本スタイル 
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    vertical-align: bottom;
}

html {
    /* ウルトラワイド画面で背景が白一色になるのを防ぐための背景色（任意） */
    background-color: #f5f5f5; 
}

body {
    /* ウルトラワイド対策：コンテンツの最大幅を1920pxに制限 */
    max-width: 1920px;
    margin: 0 auto;
    width: 100%;
    
    font-family: 
        "Eurostile",
        "Microgramma",
        "Helvetica Neue",
        "Arial",
        sans-serif;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: #fff; /* 1920pxの中身は白背景 */
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    position: relative;
    /* 左右に影を落として境界をはっきりさせる演出（不要なら削除可） */
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
}

/* アクセシビリティ用：画面には出さないが読み上げ対象 */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================================================== 
   2. スクロール演出（main.js Intersection Observer 連動用）
   ========================================================================== */

/* A. 単体・親要素の基本状態 */
.reveal,
.reveal-item {
    opacity: 0;
    transform: translateY(30px); /* 少し下から */
    transition: opacity 1.0s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.0s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

/* 方向バリエーション（必要に応じてHTMLで追加可能） */
.reveal-left { transform: translateX(-30px); }
.reveal-right { transform: translateX(30px); }

/* B. 実行状態（is-visibleが付与された時） */
.reveal.is-visible,
.reveal-item.is-visible {
    opacity: 1;
    transform: translate(0, 0);
    pointer-events: auto;
}

/* C. グループ演出（reveal-group内の中身） */
/* JS側で各子要素に .reveal-item が自動付与される想定 */
.reveal-group {
    /* 親自体は動かさず、中身だけを制御する場合 */
    opacity: 1;
    transform: none;
}

/* ========================================================================== 
   3. 共通パーツ（タイトル系）
   ========================================================================== */
.section-title-area {
    text-align: center;
    margin-bottom: 40px; /* 余白を少し広めに調整 */
}

.section-title {
    font-size: 28px;
    color: #12458f; /* N-1 メインカラー（青系） */
    position: relative;
    padding-bottom: 15px;
    display: inline-block;
}

.section-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: #7aa0df; /* アクセントの薄い青 */
}

/* ========================================================================== 
   4. 入力要素・フォーム微調整
   ========================================================================== */
/* チェックボックスはinline-block要素として表示されますが、
   グローバルで指定したvertical-align: bottomが影響し、
   チェックボックスの位置が下寄りにズレてしまいます。
*/
input[type="checkbox"] {
    vertical-align: middle;
}

/* ========================================================================== 
   7. レスポンシブ
   ========================================================================== */
@media (max-width: 768px) {
    html, body { 
        overflow-x: hidden; 
        /* スマホ時は最大幅制限を実質無効化（100%表示） */
        max-width: 100%;
    }

    .section-title {
        font-size: 22px;
    }

    /* スマホでのチェックボックス位置微調整 */
    input[type="checkbox"] {
        vertical-align: middle;
        position: relative;
        top: 2px; /* 3pxから微調整 */
    }

    /* スマホでは演出の距離を少し短くして、スクロールに追従しやすくする */
    .reveal, .reveal-item {
        transform: translateY(20px);
    }
}

/* ========================================================================== 
   ユーティリティ
   ========================================================================== */
.pc-only { display: block; }
.sp-only { display: none; }

@media (max-width: 768px) {
    .pc-only { display: none !important; }
    .sp-only { display: block !important; }
}