/* ==========================================================
   ヒーローセクション「四方から集う」レイヤーアニメーション（PC用）
   ========================================================== */

.hero {
    position: relative;
    width: 100%;
    aspect-ratio: 2918 / 1427;
    overflow: hidden;
    background: #3a2416;
}

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transform-origin: center center;
    animation: heroBgZoom 26s ease-in-out infinite;
}

/* 画面外では背景ズームを停止（スクロール中のGPU負荷を抑える） */
.hero.is-paused .hero-bg {
    animation-play-state: paused;
}

@keyframes heroBgZoom {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-bg { animation: none; }
}

.hero-flow {
    position: absolute;
    height: auto;
    z-index: 2;
    opacity: 0;
    animation-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
    animation-fill-mode: forwards;
}

/* 定位置（topimage.webpのレイアウトに準拠） */
.hero-flow1 { left: 17.36%; top: 0;      width: 16.93%; }
.hero-flow2 { left: 42.27%; top: 0;      width: 29.92%; }
.hero-flow3 { right: 3.02%; top: 0;      width: 16.79%; }
.hero-flow4 { left: 0.69%;  bottom: 0;   width: 30.88%; }
.hero-flow5 { right: 0.03%; bottom: 0;   width: 41.02%; }

/* 登場順：左上→右上（半リース＋額縁）→左下→右下 / スタッガー0.4秒 / 開始前に1秒待機
   durationは要素ごとに微妙にずらして速度差を演出 */
.hero-flow1 { animation-name: heroFlowTL; animation-delay: 1s;    animation-duration: 1.05s; }
.hero-flow2 { animation-name: heroFlowTR; animation-delay: 1.4s;  animation-duration: 0.85s; }
.hero-flow3 { animation-name: heroFlowTR; animation-delay: 1.55s; animation-duration: 1.15s; }
.hero-flow4 { animation-name: heroFlowBL; animation-delay: 1.8s;  animation-duration: 0.9s; }
.hero-flow5 { animation-name: heroFlowBR; animation-delay: 2.2s;  animation-duration: 1.1s; }

/* フェードは前半で早めに完了させ、ぼかし(blur)と移動は最後までゆっくり収束させる。
   これにより「ふわっと現れてピントが合っていく」質感になる */
@keyframes heroFlowTL {
    0%   { opacity: 0; filter: blur(14px); transform: translate(-60%, -60%); }
    40%  { opacity: 1; }
    100% { opacity: 1; filter: blur(0); transform: translate(0, 0); }
}
@keyframes heroFlowTR {
    0%   { opacity: 0; filter: blur(14px); transform: translate(60%, -60%); }
    40%  { opacity: 1; }
    100% { opacity: 1; filter: blur(0); transform: translate(0, 0); }
}
@keyframes heroFlowBL {
    0%   { opacity: 0; filter: blur(14px); transform: translate(-60%, 60%); }
    40%  { opacity: 1; }
    100% { opacity: 1; filter: blur(0); transform: translate(0, 0); }
}
@keyframes heroFlowBR {
    0%   { opacity: 0; filter: blur(14px); transform: translate(60%, 60%); }
    40%  { opacity: 1; }
    100% { opacity: 1; filter: blur(0); transform: translate(0, 0); }
}

.hero-text {
    position: absolute;
    left: 50%;
    top: 47%;
    transform: translate(-50%, -50%);
    z-index: 3;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    animation: heroTextIn 0.7s cubic-bezier(0.17, 0.84, 0.44, 1) 3.2s forwards;
}

.hero-text-sub {
    margin: 0 0 12px;
    color: #fff;
    font-size: 20px;
    letter-spacing: 0.2em;
}

.hero-text-main {
    margin: 0;
    color: #fff;
    font-size: 52px;
    font-weight: 700;
    letter-spacing: 0.15em;
}

@keyframes heroTextIn {
    from { opacity: 0; transform: translate(-50%, -40%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* frame-tr.png が存在する場合は非表示（現状プロジェクト内には無いが仕様書に基づく安全策） */
img[src*="frame-tr"] { display: none; }

/* ==========================================================
   ヒーローセクション モバイル対応（max-width: 768px）
   #top2（notpc）内：768px以下は四方から集うレイヤー演出、
   769px〜1024px（タブレット域）は従来の静止画スライダーのまま
   ========================================================== */

.hero-mobile { display: none; }

@media (max-width: 768px) {
    .hero-fallback-tablet { display: none; }

    .hero-mobile {
        display: block;
        aspect-ratio: 1334 / 1427;
        /* 縦スクロールを明示的に許可（入場アニメ中でもページを動かせる） */
        touch-action: pan-y;
        /* 入場アニメの合成をヒーロー内に閉じ込め、下セクションのタッチスクロールへの影響を抑える */
        isolation: isolate;
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    /* 装飾レイヤーはタップ不要。タッチをページへ通し、アニメ中のスクロール阻害を防ぐ */
    .hero-mobile .hero-bg,
    .hero-mobile .hero-flow,
    .hero-mobile .hero-text {
        pointer-events: none;
    }

    .hero-mobile .hero-text {
        left: 50%;
        top: 50%;
    }

    .hero-mobile .hero-text-sub {
        font-size: clamp(11px, 3.2vw, 15px);
        margin-bottom: 8px;
    }

    .hero-mobile .hero-text-main {
        font-size: clamp(22px, 7.5vw, 32px);
    }

    /* flow画像：モバイルは4枚構成（flow3は不使用）。やや大きめにして、はみ出た分は
       .hero の overflow:hidden でトリミングされる仕様（画面外の見切れはOK） */
    .hero-mobile .hero-flow1 { left: -6%;  top: -2%;   width: 36%; }
    .hero-mobile .hero-flow2 { left: auto; right: -16%; top: -3%; width: 60%; }
    .hero-mobile .hero-flow4 { left: -10%; bottom: -2%; width: 50%; }
    .hero-mobile .hero-flow5 { right: -10%; bottom: -1%; width: 58%; }

    /* SP：blur を外し、移動＋フェードのみ（iOSで入場中のタッチスクロール阻害を避ける） */
    @keyframes heroFlowTL {
        0%   { opacity: 0; transform: translate(-60%, -60%); }
        40%  { opacity: 1; }
        100% { opacity: 1; transform: translate(0, 0); }
    }
    @keyframes heroFlowTR {
        0%   { opacity: 0; transform: translate(60%, -60%); }
        40%  { opacity: 1; }
        100% { opacity: 1; transform: translate(0, 0); }
    }
    @keyframes heroFlowBL {
        0%   { opacity: 0; transform: translate(-60%, 60%); }
        40%  { opacity: 1; }
        100% { opacity: 1; transform: translate(0, 0); }
    }
    @keyframes heroFlowBR {
        0%   { opacity: 0; transform: translate(60%, 60%); }
        40%  { opacity: 1; }
        100% { opacity: 1; transform: translate(0, 0); }
    }

    /* SP：背景ズーム振幅を小さくして継続負荷を抑える */
    @keyframes heroBgZoom {
        0%   { transform: scale(1); }
        50%  { transform: scale(1.03); }
        100% { transform: scale(1); }
    }
}