@charset "UTF-8";

/* =========================================
   Hero Section Styles
   PC: 1440px / SP: 375px (800px → 0.46875)
   ========================================= */

/* -----------------------------------------
   Hero Container
   ----------------------------------------- */
.hero {
    position: relative;
    width: 100%;
    height: 73.4rem;
    overflow: hidden;
}

/* =========================================
   Hero Slideshow Background with Zoom Effect
   ========================================= */
.hero__slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1; /* 通常時の重なり順 */
    transition: opacity 1.5s ease-in-out; /* フェードの時間 */
}

/* アクティブなスライド（表示中） */
.hero__slide.is-active {
    opacity: 1;
    z-index: 3; /* 最前面に表示 */
}

/* フェードアウト中のスライド */
.hero__slide.is-fading-out {
    opacity: 0; /* フェードアウトさせる */
    z-index: 2; /* アクティブの下、待機スライドの上 */
}

/* =========================================
   画像の余白対策：pictureタグを強制的に枠いっぱいに広げる
   ========================================= */
.hero__slide picture {
    display: block;
    position: absolute; /* 強制的に親要素（スライド枠）に合わせる */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero__slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1); /* 初期状態 */
}

/* アクティブ時のズームアニメーション */
.hero__slide.is-active .hero__slide-img {
    animation: heroZoom 6s ease-out forwards; /* 間隔に合わせて少し長めに設定 */
}

/* フェードアウト中の画像の挙動 */
/* アニメーション終了時点の拡大率を維持させる */
.hero__slide.is-fading-out .hero__slide-img {
    transform: scale(1.08); 
}

@keyframes heroZoom {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.08); /* 拡大率 */
    }
}

/* -----------------------------------------
   Hero Content (Catchphrase) - 1440px幅
   ----------------------------------------- */
.hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--w-page);
    margin: 0 auto;
    padding: 0 2rem;
    padding-top: 27.2rem;
}

.hero__catchphrase {
    font-family: var(--font-mincho);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    color: var(--c-text-white);
    text-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.4);
}

.hero__catchphrase-line {
    display: block;
    margin-bottom: 1rem;
}

.hero__catchphrase-main {
    font-size: 13rem;
}

.hero__catchphrase-sub {
    font-size: 10rem;
    display: inline;
}

/* -----------------------------------------
   Entry Button (Fixed Position)
   ----------------------------------------- */
.entry-btn {
    position: fixed;
    right: 0;
    bottom: 8.1rem;
    width: 26.8rem;
    height: 7.4rem;
    background-color: var(--c-primary);
    border-radius: 3.7rem 0 0 3.7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 0;
    padding-right: 7rem;
    gap: 0;
    text-decoration: none;
    z-index: 100;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.entry-btn:hover {
    transform: translateX(-0.5rem);
    box-shadow: -0.5rem 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
    opacity: 1;
}

.entry-btn__label {
    font-family: var(--font-base);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--c-text-white);
    text-align: center;
    line-height: 1.2;
}

.entry-btn__text {
    font-family: var(--font-base);
    font-size: 2.0rem; /* ★ 2.4rem から 2.0rem に縮小 */
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--c-text-white);
    text-align: center;
    line-height: 1.2;
}

.entry-btn__line {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6rem; /* ★ 10.3rem から 7rem に短く調整 */
    height: 2px;
    background-color: var(--c-text-white);
}

/* テキストとラベルを直接左にずらす（強制適用） */
.entry-btn__label,
.entry-btn__text {
    transform: translateX(-2rem) !important; /* マイナスの値で左へ移動 */
}

/* -----------------------------------------
   Floating Button (Scroll to Top)
   ----------------------------------------- */
.floating-btn {
    position: absolute;
    right: 2rem;
    bottom: 30rem; /* PC位置 */
    width: 4.4rem;
    height: 4.4rem;
    background-color: var(--c-border-gray);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 99;
    transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    opacity: 1;
    visibility: visible;
}

.floating-btn:hover {
    background-color: #c0c0c0;
    transform: translateY(-0.3rem);
    opacity: 1;
}

.floating-btn i.fa-chevron-up {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 2rem;
    color: var(--c-text-white);
}

.floating-btn--fixed {
    position: fixed;
    bottom: 2rem;
}

/* =========================================
   Gallery Slider (Hero下部)
   ========================================= */
.gallery-slider--hero {
    position: relative;
    width: 100%;
    background-color: var(--c-bg-gray);
    padding-top: 10.5rem;
    padding-bottom: 4.4rem;
    overflow: hidden;
}

.gallery-slider__track {
    display: flex;
    gap: 2rem;
    animation: gallery-scroll 30s linear infinite;
}

.gallery-slider__item {
    flex-shrink: 0;
    width: 33.2rem;
    height: 19.9rem;
    overflow: hidden;
    border-radius: 0;
}

.gallery-slider__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes gallery-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-33.2rem * 7 - 2rem * 7));
    }
}

.gallery-slider__track:hover {
    animation-play-state: paused;
}

/* =========================================
   SP Responsive Styles (768px以下)
   ========================================= */
@media (max-width: 1024px) {
    /* Hero Container */
    .hero {
        height: calc(100svh - 4.7rem);
		min-height: 500px;
    }

.hero__slide picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* 既存の画像用CSS（確認用・このままでOKです） */
.hero__slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.05);
    will-change: transform;
    /* ★以下3行を追加（余白・描画バグ対策） */
    vertical-align: bottom;
    backface-visibility: hidden; /* Safari等でのフチのチラつきや透過を防ぐ */
    transform-origin: center center; /* 拡大の基準点を中央に固定 */
}
	
    /* Hero Content */
    .hero__content {
        padding: 0 1.5rem;
        padding-top: 26.8rem;
    }

    .hero__catchphrase-main {
        font-size: 5.5rem;
    }

    .hero__catchphrase-sub {
        font-size: 4.1rem;
    }

    .hero__catchphrase {
        line-height: 1.1;
    }

    .hero__catchphrase-line {
        margin-bottom: 0.5rem;
    }

    .entry-btn {
        width: 20.6rem;
        height: 5.6rem;
        bottom: 5.9rem;
        border-radius: 2.8rem 0 0 2.8rem;
        padding-left: 4.0rem !important;
        padding-right: 4.0rem; /* 右の余白を少し増やして全体を左へ押し出す */
        align-items: center;
    }

.entry-btn__label,
    .entry-btn__text {
        transform: none !important;
        position: static !important;
    }

    .entry-btn__label {
        font-size: 1.2rem;
        letter-spacing: 0.2em;
        text-align: center;
    }

    .entry-btn__text {
        font-size: 1.4rem; /* 長いテキストに合わせて少し小さく */
        letter-spacing: 0.15em; /* 文字間を微調整 */
        text-align: center;
    }

    .entry-btn__line {
        width: 4.5rem; /* 右側の白線を短く調整 */
        right: 0;
    }

    /* Floating Button - SP版 */
    .floating-btn {
        width: 3rem;
        height: 3rem;
        right: 1.5rem;
        bottom: 30rem;
    }

    .floating-btn i.fa-chevron-up {
        font-size: 1.4rem;
    }

    .floating-btn--fixed {
        bottom: 1.5rem;
    }

    /* Gallery Slider SP */
    .gallery-slider--hero {
        background-color: var(--c-text-white);
        padding-top: 2.6rem;
        padding-bottom: 2.6rem;
    }

    .gallery-slider__track {
        gap: 1.5rem;
    }

    .gallery-slider__item {
        width: 15.6rem;
        height: 9.4rem;
    }

    @keyframes gallery-scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-15.6rem * 7 - 1.5rem * 7));
        }
    }
}

/* =========================================
   Advanced Mobile Adjustments (Final)
   ========================================= */

/* 1. 【414px以上】の大画面スマホ (iPhone Plus/Maxなど)
   ヒーローエリアを縦に広げて画面いっぱいにする
*/
@media (min-width: 414px) and (max-width: 1024px) {
    .hero {
        height: 84rem; /* 62rem -> 84rem に拡大 */
    }
    
    /* ヒーローが広くなったので、ボタン位置は標準的な高さに戻す */
    .entry-btn {
        bottom: 63px !important;
    }

    .hero__content {
        padding-top: 34rem; /* 元の26.8remから増やして下にずらす */
    }
}

/* 3. 【標準〜少し細いスマホ (371px 〜 390px)】
   iPhone 12~15, Pixelなど
   文字サイズ調整
*/
@media (max-width: 413px) {
    .hero__content {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .hero__catchphrase {
        letter-spacing: -0.05em;
    }

    .hero__catchphrase-main {
        font-size: 5.0rem;
    }
    
    .hero__catchphrase-sub {
        font-size: 3.3rem;
    }
}

/* 4. 【極小スマホ (320px以下)】
   iPhone SE(第1世代)など
   文字サイズ維持 + 表示位置を上に上げる
*/
@media (max-width: 321px) {
    .hero__content {
        /* 上の余白を減らして位置を上げる */
        padding-top: 17rem; 
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .hero__catchphrase-main {
        font-size: 4.3rem;
    }
    
    .hero__catchphrase-sub {
        font-size: 3.1rem;
    }
    
    .hero__catchphrase-line {
        margin-bottom: 0.3rem;
    }
}

/* =========================================
   ファーストビュー調整 (タブレット表示のみ: 769px 〜 1024px)
   ========================================= */
@media screen and (min-width: 767px) and (max-width: 1024px) {
    /* 1. キャッチコピーを下にずらす */
    .hero__content {
        /* 既存の26.8remなどから数値を増やして下へ移動させます */
        padding-top: 45rem; 
    }

    /* 2. キャッチコピーの文字を大きくする */
    .hero__catchphrase-main {
        /* 既存の5.5remより大きくします */
        font-size: 8rem; 
    }
    
    /* サブコピー（あれば）もバランスを取って大きくする場合 */
    .hero__catchphrase-sub {
        font-size: 6rem; 
    }

    /* 【注意】文字を大きく・下にずらして枠からはみ出る場合は、
       以下のようにhero自体の高さを広げて調整してください */
    /*
    .hero {
        height: 100rem; 
    }
    */
}

@media screen and (min-width: 1025px) {
    .hero__content {
        /* 既存の26.8remなどから数値を増やして下へ移動させます */
        padding-top: 35rem; 
    }
}

/* =========================================
   タブレット表示 (767px - 1024px)
   上のスライドショー（Hero下）のサイズを大きくする
   ========================================= */
@media screen and (min-width: 767px) and (max-width: 1024px) {
    
    /* スライダー全体の上下の余白をPC版と同じ広さに戻す */
    .gallery-slider--hero {
        padding-top: 5rem !important;
        padding-bottom: 4.4rem !important;
        background-color: var(--c-bg-gray) !important; /* 背景色もPC版に合わせる */
    }

    /* 画像のサイズをPC版（大きいサイズ）に戻す */
    .gallery-slider--hero .gallery-slider__item {
        width: 33.2rem !important;
        height: 19.9rem !important;
    }

    /* 画像と画像の隙間をPC版に戻し、アニメーションも再設定 */
    .gallery-slider--hero .gallery-slider__track {
        gap: 2rem !important;
        animation: gallery-scroll-tab 30s linear infinite !important;
    }

    /* タブレット用のスライド移動距離（大きい画像7枚分＋隙間7つ分） */
    @keyframes gallery-scroll-tab {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-33.2rem * 7 - 2rem * 7));
        }
    }
}