/* 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: #c5a059; /* アクセントカラー */
}

/* ========================================================================== 
   4. 入力要素・フォーム微調整
   ========================================================================== */
input[type="checkbox"] {
    vertical-align: middle;
}

/* ========================================================================== 
   7. レスポンシブ 
   ========================================================================== */
@media (max-width: 768px) {
    html, body { 
        overflow-x: hidden;
        /* スマホ時は最大幅制限を解除 */
        max-width: 100%;
    }

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

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

    /* スマホでは演出の距離を少し短くして、スクロールに追従しやすくする */
    .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; }
}