@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
    color: #412E27;
    box-sizing: border-box;
}

.container {
    width: 100% !important;
}

/* font設定 */
body {
    font-family: "Meiryo UI Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.fontstyle-EBgaramond {
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: bold;
    font-style: normal;
}

/* パンくずリスト */
.HM-breadcrumb {
    font-size: .8rem;
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 9999;
}

.HM-breadcrumb a {
    text-decoration: none;
    color: #412E27;
}

/* フェードアップ */
.fadeUp {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 2s ease, transform 2s ease;
}

.fadeUp.active {
    opacity: 1;
    transform: translateY(0);
}

/* ローディング画面 */
.splash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: rgb(236, 230, 223); */
    background-image: url(https://gigaplus.makeshop.jp/maam/LP-kitaAOYAMA/images/bg.jpg);
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 1s ease;
}

.splash.hidden {
    opacity: 0;
    pointer-events: none;
}

.loadingpage-logo {
    width: 500px;
}

.logo {
    font-size: 3rem;
    font-weight: bold;
    opacity: 0;
    animation: fadeIn 2s ease forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* メインページ */
:root {
    --duration: 2000ms;
    --stagger: 320ms;
    --gap: 0px;
    --height: 100vh;
}

.stage {
    width: 100%;
    display: flex;
    gap: var(--gap);
    overflow: hidden;
    margin-top: 60px;
}

.panel {
    position: relative;
    overflow: hidden;
}

.panel img {
    display: block;
    width: 80%;
    object-fit: cover;
    transform: translateY(110%);
    transition: transform var(--duration) cubic-bezier(.22, .9, .35, 1);
    margin: 0 auto;
}

.stage.revealed .panel img {
    transform: translateY(0%);
}

.panel:nth-child(1) img {
    transition-delay: calc(var(--stagger) * 0);
}

.panel:nth-child(2) img {
    transition-delay: calc(var(--stagger) * 1);
}

.panel:nth-child(3) img {
    transition-delay: calc(var(--stagger) * 2);
}

.panel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .panel img {
        transition: none;
        transform: none !important;
    }
}

@media (max-width: 560px) {
    .stage {
        flex-direction: column;
        height: 100vh;
    }

    .panel {
        height: 33.333%;
    }

    .panel img {
        object-position: center;
    }
}






.caption {
    position: absolute;
    left: 12px;
    bottom: 12px;
    background: rgba(0, 0, 0, 0.45);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
}

.center-logo {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
    transition: opacity .8s ease, transform .8s ease;
    z-index: 10;
}

.stage.show-logo .center-logo {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.center-logo img {
    width: 500px;
}

/* コンテンツ */
.about-fusionstore-container {
    text-align: center;
}

.about-fusionstore-title {
    width: 500px;
    display: block;
    margin: 0 auto;
    padding: 200px 0;
}

.about-fusionstore-block2 {
    background: url(https://gigaplus.makeshop.jp/maam/LP-kitaAOYAMA/images/bg.jpg);
    background-attachment: fixed;
    /* 背景を固定 */
    background-size: cover;
    /* 画面いっぱいに */
    background-position: center;
    /* 中央寄せ */
    background-repeat: no-repeat;
    /* 繰り返さない */
}

/* レイアウト指定 */
.about-fusionstore-sub {
    margin: 200px 0 0;
    font-size: 1.5rem;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.about-fusionstore-sub-ja {
    font-size: .8rem;
    margin: 0 0 50px;
}

.yagou {
    margin: 200px 0 50px;
    width: 500px;
}

.about-fusionstore-p {
    font-size: 2rem;
    margin-bottom: 50px;
}

.about-fusionstore-p2 {
    margin-top: 100px;
    font-size: 1.2rem;
    line-height: 2.8rem;
}

/* drawbox */
.about-fusionstore-p3 {
    position: relative;
    display: inline-block;
    padding: 35px 160px;
    line-height: 1.4;
    margin-top: 200px;
    font-weight: bold;
    font-size: 1.2rem;
}

.text{
    width: 300px;
}
.text2{
    font-size: .8rem;
}
.about-fusionstore-p3 .text {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .7s ease, transform .7s ease;
    transition-delay: 1.25s;
    position: relative;
    z-index: 2;
}

.about-fusionstore-p3 .box {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.about-fusionstore-p3 .rect {
    fill: none;
    stroke: rgba(0, 0, 0, 0.75);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    stroke-linecap: square;
    stroke-linejoin: miter;
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    opacity: 0;
}

.about-fusionstore-p3.is-anim .box-outer .rect {
    opacity: 1;
    animation: draw 1.1s ease forwards;
}

.about-fusionstore-p3.is-anim .box-inner .rect {
    opacity: 1;
    animation: draw 1.1s ease forwards;
    animation-delay: .12s;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

.about-fusionstore-p3.is-anim .text {
    opacity: 1;
    transform: translateY(0);
}

.concept-title {
    width: 300px;
    margin-top: 100px;
}

.kirikae {
    position: relative;
    top: 350px;
    width: 100%;
}

.kirikae2 {
    position: relative;
    top: -400px;
    width: 100%;
}


.brand-image {
    display: flex;
    justify-content: center;
    margin: 100px 0 500px;
    gap: 20px;
}

.brand-img {
    width: 400px;
}





/* ================================
   LOOK：その場で奥→手前に、ふわっとゆっくり浮き出る
================================ */
.look {
    position: relative;
    display: inline-block;
    opacity: 0;
    transform: scale(0.88);
    filter: blur(6px);
    transition:
        opacity 2.8s cubic-bezier(.16, 1, .3, 1),
        transform 2.8s cubic-bezier(.16, 1, .3, 1),
        filter 2.8s cubic-bezier(.16, 1, .3, 1);
    will-change: transform, opacity, filter;
}

.look.is-show {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

.look-img {
    display: block;
    width: 500px;
}

.look2-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    pointer-events: none;
}


.look3-img {
    width: 400px;
}

.look-ja {
    margin-bottom: 500px;
    font-size: 1.3rem;
}






/* ================================
   HAND 全体を中央に配置するラッパー
================================ */
.hand-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 120px 0;
    overflow: visible;
}

/* ================================
   HAND 本体：右上 → 左下へ“なでる”
================================ */
.hand {
    position: relative;
    display: inline-block;
    overflow: visible;

    transform: translate(0, 0) scale(1);
    filter: blur(0);

    transition:
        transform 2.8s cubic-bezier(.16, 1, .3, 1),
        filter 2.8s cubic-bezier(.16, 1, .3, 1);

    will-change: transform, filter;
}

/* ★ 発火時：右上 → 左下 */
.hand.is-show {
    transform: translate(-88px, 88px) scale(1.14);
    filter: blur(0);
}

/* ================================
   hand が通った“あと”を追う光（トレイル）
   HTML: <span class="hand-trail"></span> を .hand の中に入れてください
================================ */
.hand-trail {
    position: absolute;
    left: 180%;
    top: -10%;
    width: 420px;
    height: 3px;
    /* ★ 非対称：強い部分を“後ろ側（通過直後）”に */
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.00) 0%,
            rgba(255, 255, 255, 0.95) 18%,
            /* ← “あと”の芯 */
            rgba(255, 255, 255, 0.25) 55%,
            rgba(255, 255, 255, 0.00) 100%);

    filter: blur(1.2px);
    opacity: 0;
    pointer-events: none;
    z-index: 2;

    /* 片側（後ろ側）から伸ばす */
    transform-origin: 0% 50%;

    /* ★ 角度はここだけで管理（ご指定どおり） */
    --angle: -215deg;

    /* 初期（短い） */
    transform: translate(-50%, -50%) rotate(var(--angle)) scaleX(0.05);
}

/* 発火時：hand の“後ろ”に軌跡が伸びる */
.hand.is-show .hand-trail {
    animation: handTrail 2.8s cubic-bezier(.16, 1, .3, 1) forwards;
}

/* ★ 重要：アニメ中も rotate(var(--angle)) を保持（水平化・逆向き防止） */
@keyframes handTrail {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--angle)) scaleX(0.05);
    }

    25% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(var(--angle)) scaleX(1);
    }

    100% {
        opacity: 0.35;
        /* “なでた余韻” */
        transform: translate(-50%, -50%) rotate(var(--angle)) scaleX(1);
    }
}

/* ふわっとした“にじみ” */
.hand-trail::after {
    content: "";
    position: absolute;
    inset: -6px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.45) 35%,
            rgba(255, 255, 255, 0.18) 70%,
            rgba(255, 255, 255, 0) 100%);
    filter: blur(6px);
    opacity: .9;
    pointer-events: none;
}


/* ================================
   画像とテキスト
================================ */
.hand-img {
    display: block;
    width: 400px;
    height: auto;
    position: relative;
    z-index: 3;
}

.hand-label {
    margin-top: 14px;
    font-size: 1.3rem;
    letter-spacing: .08em;
    text-align: center;
    margin-bottom: 500px;
}

.hand3-img {
    width: 400px;
}







/* ================================
   FEEL：後ろ→前へ“ふわっと”表示
================================ */
.feel {
    position: relative;
    display: inline-block;

    /* 初期：奥・ぼかし・やや小さく */
    opacity: 0;
    transform: scale(0.92);
    filter: blur(6px);

    transition:
        opacity 2.6s cubic-bezier(.16, 1, .3, 1),
        transform 2.6s cubic-bezier(.16, 1, .3, 1),
        filter 2.6s cubic-bezier(.16, 1, .3, 1);

    will-change: transform, opacity, filter;
}

/* 表示状態：手前へ */
.feel.is-show {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

/* ================================
   feel-img：心臓みたいに“ブルッ”
================================ */
.feel-img {
    display: block;
    width: 500px;
    height: auto;
    transform-origin: center;
    will-change: transform;
}

/* 表示後に“鼓動”を重ねる */
.feel.is-beat .feel-img {
    animation: feelBeat 900ms ease-out both;
}

/* 「鼓動 + ぶるっ」 */
@keyframes feelBeat {
    0% {
        transform: scale(1) translate(0, 0) rotate(0);
    }

    12% {
        transform: scale(1.10) translate(-1px, 1px) rotate(-1deg);
    }

    22% {
        transform: scale(0.98) translate(1px, -1px) rotate(1deg);
    }

    34% {
        transform: scale(1.08) translate(-1px, 0px) rotate(-0.6deg);
    }

    48% {
        transform: scale(1.00) translate(1px, 0px) rotate(0.6deg);
    }

    62% {
        transform: scale(1.05) translate(0px, -1px) rotate(-0.3deg);
    }

    78% {
        transform: scale(1.00) translate(0px, 0px) rotate(0deg);
    }

    100% {
        transform: scale(1.00) translate(0px, 0px) rotate(0deg);
    }
}

.feel3-img {
    position: relative;
    top: -87px;
    left: 155px;
    width: 350px;
}




.end-ja {
    margin-bottom: 200px;
    font-size: 1.3rem;
}

.end-ja2 {
    padding-bottom: 400px;
    width: 700px;
}

.info-img {
    width: 250px;
}

.info-ja {
    padding-bottom: 80px;
}

.storename-title {
    border-bottom: 1px solid;
    width: 100px;
    font-weight: bold;
    margin: 0 auto;
    margin-bottom: 10px;
}

.storename {
    margin-bottom: 50px;
    font-size: 1.5rem;
}

.location {
    margin-bottom: 100px;
}





.event-dates {
    font-size: 1.3rem;
    margin-bottom: 150px;
}

.sns-img {
    width: 400px;
}

.insta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding-bottom: 25px;
}

.insta-img {
    width: 50px;
}

.insta-name {
    font-size: 1.4rem;
}

.end-container {
    padding-bottom: 500px;
}




.map-wrap {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 100px;
    border-radius: 16px;
    overflow: hidden;
}

.map-wrap iframe {
    display: block;
    width: 100%;
    height: 450px;
    border: 0;
}

@media (max-width: 768px) {
    .map-wrap iframe {
        height: 320px;
    }
}