@charset "utf-8";

/* ========================================================================== 
   slider.css - Plan B: DYNAMISM & MOTION [Full Reproduction Edition]
   - レクストン仕様のアスペクト比を完全継承
   - 配置：テキストを【左上】、車両画像を【右下】に配置
   - 演出順序：テキスト同時表示 ＞ 車両スライドイン ＞ ロゴ表示 の順に固定
   - 1枚画像モード（.is-single）時でも、JSによる.is-active付与でアニメーションを開始
   ========================================================================== */

/* --- 1. スライダー外枠（アスペクト比維持） --- */
.hero-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 1; 
    margin: 0 auto;
    overflow: hidden;
    background: #000;
}

@media (min-width: 1403px) and (max-width: 1628px) {
    .hero-slider { aspect-ratio: 27 / 10; }
}
@media (max-width: 1400px) {
    .hero-slider { aspect-ratio: 11 / 5; }
}
@media (max-width: 1100px) {
    .hero-slider { aspect-ratio: 3 / 2; }
}
@media (max-width: 768px) {
    .hero-slider { aspect-ratio: 4 / 5; }
}

/* --- 2. スライド本体 & 背景ズーム（安定化ロジック） --- */
.slider-wrapper {
    width: 100%;
    height: 100%;
}

.hero-slider .slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.2s;
    z-index: 1;
    pointer-events: none;
}

.hero-slider .slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
    pointer-events: auto;
}

.hero-slider .slide-img {
    width: 100%; height: 100%;
    position: relative;
    overflow: hidden;
}

.hero-slider .slide-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 0%;
    transform: scale(1.15); 
}

.hero-slider .slide.is-active .slide-img img {
    transform: scale(1); 
    transition: transform 10s linear !important; 
}

/* --- 2.5 オーバーレイ設定 --- */
.slide-overlay {
    background: transparent !important;
}

/* --- 3. 左上ロゴ（修正：テキスト表示後に演出が開始されるよう1.4sに設定） --- */
.slide-logo {
    position: absolute;
    top: 20%; 
    left: 5%;
    width: 30%; 
    z-index: 3;
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 1s ease 1.4s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) 1.4s;
    pointer-events: none;
}

.slide.is-active .slide-logo {
    opacity: 1;
    transform: translateX(0);
}

.slide-logo img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.3));
}

/* --- 4. コンテンツエリア（左配置テキスト・右下画像） --- */
.slide-content {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    z-index: 4;
    pointer-events: none;
}

.content-inner { 
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8% 0 5% 8%;
    box-sizing: border-box;
}

.text-group {
    text-align: left;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
}

.slide-subtitle {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(12px, 1.2vw, 18px);
    font-weight: 700;
    color: #c5a059;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateX(-30px);/* 左からスライドイン */
    
    /* 0.5s から 0.8s に変更して表示開始を遅らせる */
    transition: opacity 0.8s ease 0.8s, transform 0.8s ease 0.8s;
    
    letter-spacing: 0.4em;
}

.slide.is-active .slide-subtitle { opacity: 1; transform: translateX(0); }

.slide-title {
    font-size: clamp(20px, 3.5vw, 42px);
    line-height: 1.6;
    font-weight: 900;
    font-family: "Yu Mincho", "游明朝体", serif;
}

.line-wrap {
    display: inline-block;
    /* overflow: hidden; を解除し境界線をなくす */
    vertical-align: bottom;
}

.slide-title span {
    display: inline-block;
    opacity: 0; /* 最初は透明 */
    transform: translateY(30px); /* 下からふわっと出すために移動量を調整 */
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 
   修正：3行（旅行の事なら / 何でもおまかせ！！ / お気軽にご相談下さい。）を
   同時に表示させるため transition-delay を 0.6s に完全同期 
*/
.slide.is-active .slide-title span { 
    opacity: 1;
    transform: translateY(0); 
}

.slide.is-active .slide-title .line-wrap:nth-of-type(1) span,
.slide.is-active .slide-title .line-wrap:nth-of-type(2) span,
.slide.is-active .slide-title .line-wrap:nth-of-type(3) span { 
    transition-delay: 0.6s; 
}


/* 右下：サブ画像 (右から左へのスライドイン演出を再現) */
.slide-sub-img {
    align-self: flex-end;
    width: clamp(250px, 35vw, 550px);
    opacity: 0;
    transform: translateX(100px); 
    transition: 
        opacity 1.2s ease 1.2s, 
        transform 1.5s cubic-bezier(0.23, 1, 0.32, 1) 1.2s;
    margin-right: 8%;
}

.slide-sub-img img {
    width: 100%;
    height: auto;
    filter: drop-shadow(-10px 10px 20px rgba(0,0,0,0.4));
}

.slide.is-active .slide-sub-img {
    opacity: 1;
    transform: translateX(0);
}

/* --- 5. 背後の巨大テキスト演出 --- */
.slider-bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 15vw;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.03);
    white-space: nowrap;
    z-index: 1;
    pointer-events: none;
    letter-spacing: -0.02em;
}

/* --- 6. UI --- */
.slider-ui {
    position: absolute;
    bottom: 40px;
    right: 5%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
}

.hero-slider.is-single .slider-ui { display: none !important; }

.slider-navigation { display: flex; align-items: center; gap: 30px; }
.slider-btn { background: none; border: none; width: 50px; height: 20px; cursor: pointer; position: relative; }
.slider-btn .btn-line { display: block; width: 100%; height: 2px; background: #fff; transition: 0.3s; }
.slider-btn.prev .btn-line::before { content: ""; position: absolute; left: 0; top: -4px; width: 10px; height: 2px; background: #fff; transform: rotate(-45deg); }
.slider-btn.next .btn-line::after { content: ""; position: absolute; right: 0; top: -4px; width: 10px; height: 2px; background: #fff; transform: rotate(45deg); }
.slider-btn:hover .btn-line { background: #e60012; }
.slider-pagination { display: flex; align-items: center; gap: 15px; color: #fff; font-family: 'Oswald', sans-serif; font-weight: 700; }
.slider-pagination .current { font-size: 24px; color: #e60012; }
.slider-pagination .total { font-size: 14px; opacity: 0.5; }
.slider-progress { width: 200px; height: 2px; background: rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; }
.progress-bar { position: absolute; top: 0; left: 0; height: 100%; width: 0; background: #e60012; }

/* --- 7. レスポンシブ調整 --- */
@media (max-width: 768px) {
    .slide-logo { top: 5%; left: 5%; width: 110px; }
    .content-inner {
        padding: 25% 5% 15% 5%;
        align-items: center;
        justify-content: space-around;
    }
    .text-group { text-align: center; }
    .slide-subtitle { margin-right: 0; text-align: center; transform: translateX(0); }
    .slide-title { font-size: clamp(18px, 5.5vw, 26px); }
    .slide-sub-img { 
        width: 85%; 
        align-self: center;
        margin-right: 0;
        transform: translateY(20px);
    }
    .slider-ui { right: 0; left: 0; align-items: center; bottom: 20px; }
    .slider-progress { width: 80%; }
}

@media screen and (min-width: 769px) and (max-width: 1100px){
    .content-inner {
        /* 上の余白を増やして全体を押し下げる */
        padding-top: 15%; 
    }
}