@charset "utf-8";

/* ===================================================================
   スマホ用レイアウト上書き設定 (768px以下で適用)
   =================================================================== */
@media screen and (max-width: 768px) {
    
    .pc-only { display: none !important; }

    /* --- パンくずリスト --- */
    .breadcrumb-wrapper {
        /* スマホ用JSヘッダーの高さ分（約70px）に調整 */
        padding-top: 70px;
    }

    /* --- ヒーローセクション --- */
    .hero-parallax {
        height: 60vh;
        min-height: 400px;
        margin-bottom: 40px;
        /* スマホブラウザ(iOS等)は fixed が不安定なため、自然なスクロールに戻すのがモダンデザインの定石です */
        background-attachment: scroll; 
    }
    
    /* スライドショーの背景固定もスマホでは解除 */
    .hero-slide {
        background-attachment: scroll;
    }

    .hero-title {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .hero-title span {
        font-size: 16px;
    }

    .hero-text {
        font-size: 13px;
        line-height: 2;
    }

    /* --- 各エリアの区切りパララックス --- */
    .section-divider {
        height: 25vh;
        min-height: 200px;
        margin-top: 20px;
        background-attachment: scroll; /* スマホはスクロール連動 */
    }

    .parallax-title {
        font-size: 32px;
    }

    .parallax-title span {
        font-size: 12px;
    }

    /* --- コンテンツ（ツアー一覧）エリア --- */
    .content-section {
        padding: 40px 15px 30px;
    }

    /* エリアごとの背景色調整（わかりやすさ向上） */
    .content-section.bg-asia { background-color: #fdfbf7; } /* アジア: 微かな暖色 */
    .content-section.bg-africa { background-color: #fcf8f2; } /* アフリカ: 微かな土色 */
    .content-section.bg-europe { background-color: #f4f8fa; } /* 欧州・中近東: 微かな青系 */
    .content-section.bg-america { background-color: #f5f9f6; } /* 北米・中南米: 微かな緑系 */
    .content-section.bg-theme { background-color: #f8f6f9; } /* 目的別: 微かな紫系 */

    /* スマホは1列で写真を大きく見せる */
    .tour-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .tour-thumb {
        aspect-ratio: 16 / 10;
        margin-bottom: 15px;
    }

    .tour-title {
        font-size: 20px;
    }

    .tour-desc {
        font-size: 13px;
        margin-bottom: 15px;
    }

    .other-links-card {
        padding: 20px;
    }
}