/* リセットCSS */
<link href="css/reset.css" rel="stylesheet">


/* PC部屋〜の親要素コンテナのスタイル */
.background{
    position: relative;
    width: 100vw; /* ビューポートの幅に合わせる */
    height: 100vh; /* ビューポートの高さに合わせる */
    overflow-x: hidden; /* 横方向のスクロールを無効化 */
    overflow-y: auto; /* 縦方向のスクロールを許可 */
    display: flex; /* フレックスボックスで中央揃え */
    justify-content: center; /* 水平方向の中央揃え */
    align-items:flex-start ; /* フレックスアイテムを交差軸に沿って引き伸ばし、コンテナのサイズに合わせます。 */
    margin: 0; /* マージンをリセット */
    padding: 0; /* パディングをリセット */
}



/* 背景----------------------------------------------------------------------- */


/* 背景共通 */
.backgroundcommon {
    display: block; /* ブロック要素として表示 */
    position: absolute;
    top: 0vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
    width: 100%; /* 横幅を親要素に合わせる */
    height: auto; /* 高さを自動で調整 */
}

        /* 背景PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .backgroundcommon {
            top: 0vw; /* ビューポートの幅の割合で位置が決まる */
            left: 31vw; /* ビューポートの幅の割合で位置が決まる */
            width: 38%; /* 背景画像ßの幅に対しての割合でサイズを指定（例: 20%） */
            justify-content: center; /* 水平方向の中央揃え */
            }
        }

        /* 背景スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
            .backgroundcommon {
                top: 0vw; /* ビューポートの幅の割合で位置が決まる */
                left: 0vw; /* ビューポートの幅の割合で位置が決まる */
                width: 100%; /* 横幅を親要素に合わせる */
                height: auto; /* 高さを自動調整 */
            }
        }


/* 背景PC版（固定表示） */
.pcbackgroundleft,
.pcbackgroundright {
    display: none; /* 初期状態は非表示 */
    position: fixed; /* 固定表示に設定 */
    top: 0; /* ビューポートの上部 */
    height: 100%; /* 縦いっぱいに表示 */
    z-index: 98; /* 背景共通より上に表示 */
}

        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .pcbackgroundleft {
                display: block; /* PC版では表示 */
                left: 0; /* 左端に固定 */
                width: 31vw; /* 必要に応じて調整 */
            }

            .pcbackgroundright {
                display: block; /* PC版では表示 */
                right: 0; /* 右端に固定 */
                width: 31vw; /* 必要に応じて調整 */
            }
        }

        /* スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
            .pcbackgroundleft,
            .pcbackgroundright {
                display: none; /* スマホ版では非表示 */
            }
        }


/* PC　飾り画像（左右）----------------------------------------------------------------------- */

/* PC魚平ロゴ */
.pcuoheilogo {
    display: none; /* 初期状態は非表示 */
    position: fixed; /* 固定表示に設定 */
    top: 50%; /* ビューポートの縦中央 */
    left: 3vw; /* 必要に応じて横位置を調整 */
    transform: translateY(-50%); /* 縦方向中央揃え */
    height: auto; /* 高さを自動調整 */
    z-index: 100; /* 他の要素より前面に表示 */
}

        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .pcuoheilogo {
                display: block; /* PC版では表示 */
                width: 25vw; /* 必要に応じてサイズ調整 */
            }
        }

 /* PC下部ライン */
.buttomlinepc {
    display: none; /* 初期状態は非表示 */
    position: fixed; /* 固定表示に設定 */
    top: 98%; /* ビューポートの縦中央 */
    left: 0vw; /* 必要に応じて横位置を調整 */
    transform: translateY(-50%); /* 縦方向中央揃え */
    height: auto; /* 高さを自動調整 */
    z-index: 101; /* 他の要素より前面に表示 */
}

        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .buttomlinepc {
                display: block; /* PC版では表示 */
                width: 100vw; /* 必要に応じてサイズ調整 */
            }
        }

 /* PCススキ */
.susukipc {
    display: none; /* 初期状態は非表示 */
    position: fixed; /* 固定表示に設定 */
    top: 88%; /* ビューポートの縦中央 */
    left: 80vw; /* 必要に応じて横位置を調整 */
    transform: translateY(-50%); /* 縦方向中央揃え */
    height: auto; /* 高さを自動調整 */
    z-index: 100; /* 他の要素より前面に表示 */
}

        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .susukipc {
                display: block; /* PC版では表示 */
                width: 15vw; /* 必要に応じてサイズ調整 */
            }
        }

 /* PCまる */
.marupc {
    display: none; /* 初期状態は非表示 */
    position: fixed; /* 固定表示に設定 */
    top: 60%; /* ビューポートの縦中央 */
    left: 80vw; /* 必要に応じて横位置を調整 */
    transform: translateY(-50%); /* 縦方向中央揃え */
    height: auto; /* 高さを自動調整 */
    z-index: 99; /* 他の要素より前面に表示 */
}

        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .marupc {
                display: block; /* PC版では表示 */
                width: 15vw; /* 必要に応じてサイズ調整 */
            }
        }

 /* PCそら */
.skypc {
    display: none; /* 初期状態は非表示 */
    position: fixed; /* 固定表示に設定 */
    top: 20%; /* ビューポートの縦中央 */
    left: 70vw; /* 必要に応じて横位置を調整 */
    transform: translateY(-50%); /* 縦方向中央揃え */
    height: auto; /* 高さを自動調整 */
    z-index: 99; /* 他の要素より前面に表示 */
}

        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .skypc {
                display: block; /* PC版では表示 */
                width: 30vw; /* 必要に応じてサイズ調整 */
            }
        }

        /* スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
            .pcuoheilogo,
            .buttomlinepc,
            .susukipc {
                display: none; /* スマホ版では非表示 */
            }
        }



/* PC　メニューボタン類（右）----------------------------------------------------------------------- */

 /* PC店舗情報 */
.shopinfopc {
    display: none; /* 初期状態は非表示 */
    position: fixed; /* 固定表示に設定 */
    top: 48%; /* ビューポートの縦中央 */
    left: 73vw; /* 必要に応じて横位置を調整 */
    transform: translateY(-50%); /* 縦方向中央揃え */
    height: auto; /* 高さを自動調整 */
    cursor: pointer; /* クリック可能なカーソルを表示 */
    z-index: 100; /* 他の要素より前面に表示 */
}

 /* PCメニュー */
.menubuttonpc {
    display: none; /* 初期状態は非表示 */
    position: fixed; /* 固定表示に設定 */
    top: 48%; /* ビューポートの縦中央 */
    left: 78vw; /* 必要に応じて横位置を調整 */
    transform: translateY(-50%); /* 縦方向中央揃え */
    height: auto; /* 高さを自動調整 */
    cursor: pointer; /* クリック可能なカーソルを表示 */
    z-index: 100; /* 他の要素より前面に表示 */
}

 /* PC店主ご挨拶 */
.greetingpc {
    display: none; /* 初期状態は非表示 */
    position: fixed; /* 固定表示に設定 */
    top: 48%; /* ビューポートの縦中央 */
    left: 83vw; /* 必要に応じて横位置を調整 */
    transform: translateY(-50%); /* 縦方向中央揃え */
    height: auto; /* 高さを自動調整 */
    cursor: pointer; /* クリック可能なカーソルを表示 */
    z-index: 100; /* 他の要素より前面に表示 */
}

 /* PCコンセプト */
.conceptpc {
    display: none; /* 初期状態は非表示 */
    position: fixed; /* 固定表示に設定 */
    top: 48%; /* ビューポートの縦中央 */
    left: 88vw; /* 必要に応じて横位置を調整 */
    transform: translateY(-50%); /* 縦方向中央揃え */
    height: auto; /* 高さを自動調整 */
    cursor: pointer; /* クリック可能なカーソルを表示 */
    z-index: 100; /* 他の要素より前面に表示 */
}

 /* PCトップページ */
.toppagepc {
    display: none; /* 初期状態は非表示 */
    position: fixed; /* 固定表示に設定 */
    top: 48%; /* ビューポートの縦中央 */
    left: 93vw; /* 必要に応じて横位置を調整 */
    transform: translateY(-50%); /* 縦方向中央揃え */
    height: auto; /* 高さを自動調整 */
    cursor: pointer; /* クリック可能なカーソルを表示 */
    z-index: 100; /* 他の要素より前面に表示 */
}

 /* PCご予約はお電話にて */
.telbuttonpc {
    display: none; /* 初期状態は非表示 */
    position: fixed; /* 固定表示に設定 */
    top: 90%; /* ビューポートの縦中央 */
    left: 55vw; /* 必要に応じて横位置を調整 */
    transform: translateY(-50%); /* 縦方向中央揃え */
    height: auto; /* 高さを自動調整 */
    cursor: pointer; /* クリック可能なカーソルを表示 */
    z-index: 100; /* 他の要素より前面に表示 */
}

/* PC版（601px以上の画面サイズ） */
@media (min-width: 601px) {
    .shopinfopc,
    .menubuttonpc,
    .greetingpc,
    .conceptpc,
    .toppagepc{
        display: block; /* PC版では表示 */
        width: 3vw; /* 必要に応じてサイズ調整 */
    }
}

/* PC版1（601px以上の画面サイズ） */
@media (min-width: 601px) {
    .telbuttonpc{
        display: block; /* PC版では表示 */
        width: 27vw; /* 必要に応じてサイズ調整 */
    }
}

/* スマホ版（600px以下の画面サイズ） */
@media (max-width: 600px) {
    .shopinfopc,
    .menubuttonpc,
    .greetingpc,
    .conceptpc,
    .toppagepc,
    .telbuttonpc {
        display: none; /* スマホ版では非表示 */
    }
}

/* ファーストビュー----------------------------------------------------------------------- */

 /*　FV暖簾 */
.noren  {
    display: block; /* ブロック要素として表示 */
    position: absolute;
    top: 0vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
    height: auto; /* 高さを自動で調整 */
}

        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .noren  {
            top: 0vw; /* ビューポートの幅の割合で位置が決まる */
            left: 30vw; /* ビューポートの幅の割合で位置が決まる */
            width: 39%; /* 背景画像ßの幅に対しての割合でサイズを指定（例: 20%） */
            justify-content: center; /* 水平方向の中央揃え */
            }
        }

        /* スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
            .noren  {
                top: 0vw; /* ビューポートの幅の割合で位置が決まる */
                left: 0vw; /* ビューポートの幅の割合で位置が決まる */
                width: 100%; /* 横幅を親要素に合わせる */
                
            }
        }


/* FV魚平ロゴ */
.fvuoheilogo {
    display: block;
    position: absolute;
    top: 0vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
    height: auto; /* 高さを自動で調整 */

}

/* PC版（601px以上の画面サイズ） */
@media (min-width: 601px) {
    .fvuoheilogo {
        top: 12vw;
        left: 40vw;
        width: 20%;
    }
}

/* スマホ版（600px以下の画面サイズ） */
@media (max-width: 600px) {
    .fvuoheilogo {
        top: 36vw;
        left: 23vw;
        width: 50%;
    }
}



/* ハンバーガーメニュー----------------------------------------------------------------------- */


 /*　SPハンバーガーメニュー */
 .sphumbager  {
    display: none; /* 初期状態は非表示 */
    position: fixed; /* 固定表示に設定 */
    top: 0vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
    height: auto; /* 高さを自動で調整 */
    cursor: pointer; /* クリック可能なカーソルを表示 */
    z-index: 100; /* 他の要素より前面に表示 */
}

        /* 背景PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .sphumbager  {
            display: none; /* 初期状態は非表示 */

            }
        }

        /* 背景スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
            .sphumbager  {
                display: block; /* ブロック要素として表示 */
                top: 10vw; /* ビューポートの幅の割合で位置が決まる */
                left: 70vw; /* ビューポートの幅の割合で位置が決まる */
                width: 20%; /* 横幅を親要素に合わせる */

            }
        }

 /*　SPハンバーガーメニュー全体 */
.hamburger-menu {
    display: none; /* 初期状態は非表示 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* 半透明の背景 */
    z-index: 1000;
    padding: 20px;
}



 /*　SPハンバーガーメニュー背景 */
 .humbargerback  {
    display: none; /* 初期状態は非表示 */
    position: fixed; /* 固定表示に設定 */
    top: 0vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
    height: auto; /* 高さを自動で調整 */
    z-index: 100; /* 他の要素より前面に表示 */
}

        /* 背景PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .humbargerback {
            display: none; /* 初期状態は非表示 */

            }
        }

        /* 背景スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
            .humbargerback {
                display: block; /* ブロック要素として表示 */
                top: 0vw; /* ビューポートの幅の割合で位置が決まる */
                left: 0vw; /* ビューポートの幅の割合で位置が決まる */
                width: 100%; /* 横幅を親要素に合わせる */

            }
        }


 /*　SPハンバーガーメニュー閉じる */
 .closebutton  {
    display: none; /* 初期状態は非表示 */
    position: fixed; /* 固定表示に設定 */
    top: 0vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
    height: auto; /* 高さを自動で調整 */
    cursor: pointer; /* クリック可能なカーソルを表示 */
    z-index: 100; /* 他の要素より前面に表示 */
}

        /* 背景PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .closebutton  {
            display: none; /* 初期状態は非表示 */

            }
        }

        /* 背景スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
            .closebutton  {
                display: block; /* ブロック要素として表示 */
                top: 11vw; /* ビューポートの幅の割合で位置が決まる */
                left: 70vw; /* ビューポートの幅の割合で位置が決まる */
                width: 20%; /* 横幅を親要素に合わせる */

            }
        }


 /*　SPハンバーガーメニュートップページ */
 .sptoppage  {
    display: none; /* 初期状態は非表示 */
    position: fixed; /* 固定表示に設定 */
    top: 0vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
    height: auto; /* 高さを自動で調整 */
    cursor: pointer; /* クリック可能なカーソルを表示 */
    z-index: 100; /* 他の要素より前面に表示 */
}

        /* 背景PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .sptoppage  {
            display: none; /* 初期状態は非表示 */

            }
        }

        /* 背景スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
            .sptoppage {
                display: block; /* ブロック要素として表示 */
                top: 40vw; /* ビューポートの幅の割合で位置が決まる */
                left: 12vw; /* ビューポートの幅の割合で位置が決まる */
                width: 30%; /* 横幅を親要素に合わせる */

            }
        }


 /*　SPハンバーガーメニューご挨拶 */
 .spgreeting  {
    display: none; /* 初期状態は非表示 */
    position: fixed; /* 固定表示に設定 */
    top: 0vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
    height: auto; /* 高さを自動で調整 */
    cursor: pointer; /* クリック可能なカーソルを表示 */
    z-index: 100; /* 他の要素より前面に表示 */
}

        /* 背景PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .spgreeting  {
            display: none; /* 初期状態は非表示 */

            }
        }

        /* 背景スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
            .spgreeting {
                display: block; /* ブロック要素として表示 */
                top: 60vw; /* ビューポートの幅の割合で位置が決まる */
                left: 12vw; /* ビューポートの幅の割合で位置が決まる */
                width: 27%; /* 横幅を親要素に合わせる */

            }
        }



 /*　SPハンバーガーメニュー店舗情報 */
 .spshop  {
    display: none; /* 初期状態は非表示 */
    position: fixed; /* 固定表示に設定 */
    top: 0vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
    height: auto; /* 高さを自動で調整 */
    cursor: pointer; /* クリック可能なカーソルを表示 */
    z-index: 100; /* 他の要素より前面に表示 */
}

        /* 背景PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .spshop  {
            display: none; /* 初期状態は非表示 */

            }
        }

        /* 背景スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
            .spshop {
                display: block; /* ブロック要素として表示 */
                top: 80vw; /* ビューポートの幅の割合で位置が決まる */
                left: 12vw; /* ビューポートの幅の割合で位置が決まる */
                width: 27%; /* 横幅を親要素に合わせる */

            }
        }


 /*　SPハンバーガーメニューコンセプト */
 .spconcept  {
    display: none; /* 初期状態は非表示 */
    position: fixed; /* 固定表示に設定 */
    top: 0vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
    height: auto; /* 高さを自動で調整 */
    cursor: pointer; /* クリック可能なカーソルを表示 */
    z-index: 100; /* 他の要素より前面に表示 */
}

        /* 背景PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .spconcept  {
            display: none; /* 初期状態は非表示 */

            }
        }

        /* 背景スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
            .spconcept {
                display: block; /* ブロック要素として表示 */
                top: 40vw; /* ビューポートの幅の割合で位置が決まる */
                left: 60vw; /* ビューポートの幅の割合で位置が決まる */
                width: 27%; /* 横幅を親要素に合わせる */

            }
        }

 /*　SPハンバーガーメニュー店舗メニュー */
 .spmenu  {
    display: none; /* 初期状態は非表示 */
    position: fixed; /* 固定表示に設定 */
    top: 0vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
    height: auto; /* 高さを自動で調整 */
    cursor: pointer; /* クリック可能なカーソルを表示 */
    z-index: 100; /* 他の要素より前面に表示 */
}

        /* 背景PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .spmenu  {
            display: none; /* 初期状態は非表示 */

            }
        }

        /* 背景スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
            .spmenu {
                display: block; /* ブロック要素として表示 */
                top: 60vw; /* ビューポートの幅の割合で位置が決まる */
                left: 60vw; /* ビューポートの幅の割合で位置が決まる */
                width: 30%; /* 横幅を親要素に合わせる */

            }
        }

 /*　SPハンバーガーメニューホットペッパー */
 .sphotpepper  {
    display: none; /* 初期状態は非表示 */
    position: fixed; /* 固定表示に設定 */
    top: 0vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
    height: auto; /* 高さを自動で調整 */
    cursor: pointer; /* クリック可能なカーソルを表示 */
    z-index: 100; /* 他の要素より前面に表示 */
}

        /* 背景PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .sphotpepper  {
            display: none; /* 初期状態は非表示 */

            }
        }

        /* 背景スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
            .sphotpepper {
                display: block; /* ブロック要素として表示 */
                top: 76vw; /* ビューポートの幅の割合で位置が決まる */
                left: 60vw; /* ビューポートの幅の割合で位置が決まる */
                width: 30%; /* 横幅を親要素に合わせる */

            }
        }

 /*　SPハンバーガーメニューご予約はこちら */
 .spreservation {
    display: none; /* 初期状態は非表示 */
    position: fixed; /* 固定表示に設定 */
    top: 0vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
    height: auto; /* 高さを自動で調整 */
    cursor: pointer; /* クリック可能なカーソルを表示 */
    z-index: 100; /* 他の要素より前面に表示 */
}

        /* 背景PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .spreservation  {
            display: none; /* 初期状態は非表示 */

            }
        }

        /* 背景スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
            .spreservation {
                display: block; /* ブロック要素として表示 */
                top: 102vw; /* ビューポートの幅の割合で位置が決まる */
                left: 15vw; /* ビューポートの幅の割合で位置が決まる */
                width: 70%; /* 横幅を親要素に合わせる */

            }
        }



/* コンセプト----------------------------------------------------------------------- */



/*　熱燗 */
.atsukan {
    display: block; /* ブロック要素として表示 */
    position: absolute;
    top: 0vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
    height: auto; /* 高さを自動で調整 */

}

        /* PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .atsukan {
                top: 53vw; /* ビューポートの幅の割合で位置が決まる */
                left: 52vw; /* ビューポートの幅の割合で位置が決まる */
                width: 23%; /* 幅を調整 */
                justify-content: center; /* 水平方向の中央揃え */
            }
        }
        /* スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
            .atsukan {
                top: 145vw; /* ビューポートの幅の割合で位置が決まる */
                left: 50vw; /* ビューポートの幅の割合で位置が決まる */
                width: 50%; /* 幅を調整 */
            }
        }


 /*　煙 */
 /* アニメーションの定義 */
@keyframes fadeSlide {
    0% {
        transform: translateY(20%); /* 画面下部から */
        opacity: 0; /* 非表示 */
    }
    25% {
        opacity: 1; /* 表示される */
    }
    75% {
        opacity: 1; /* 表示を維持 */
    }
    100% {
        transform: translateY(-3%); /* 画面上部へ移動 */
        opacity: 0; /* 非表示 */
    }
}

/*　煙 */
.kemuri {
    display: block; /* ブロック要素として表示 */
    position: absolute;
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
    height: auto; /* 高さを自動で調整 */
    animation: fadeSlide 5s infinite; /* アニメーションを適用 */
}

            @media (min-width: 601px) {
                .kemuri {
                    top: 65vw; /* ビューポートの幅の割合で位置が決まる */
                    left: 30vw; /* ビューポートの幅の割合で位置が決まる */
                    width: 25%; /* 幅を調整 */
                    justify-content: center; /* 水平方向の中央揃え */
                }
            }

            @media (max-width: 600px) {
                .kemuri {
                    top: 180vw; /* ビューポートの幅の割合で位置が決まる */
                    left: -5vw; /* ビューポートの幅の割合で位置が決まる */
                    width: 60%; /* 幅を調整 */
                }
            }


 /* コンセプト動画 */
.conceptback {
    display: block; /* 表示を確実にする */
    position: absolute; /* 任意の位置を指定 */
    top: 0vw; /* 初期値 */
    left: 0vw; /* 初期値 */
    height: auto; /* 高さを自動調整 */
}

@media (min-width: 601px) {
    .conceptback {
        top: 105vw; /* PCでの位置指定 */
        left: 30vw;
        width: 25%; /* PCでの幅指定 */
    }
}

@media (max-width: 600px) {
    .conceptback {
        top: 280vw; /* スマホでの位置指定 */
        left: 0vw;
        width: 65%; /* スマホでの幅指定 */
    }
}


 /*　赤い魚仕入れ写真 */
 .redfishphoto {
    display: block; /* ブロック要素として表示 */
    position: absolute;
    top: 0vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
    height: auto; /* 高さを自動で調整 */
}

        /* 背景PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .redfishphoto  {
            top: 138vw; /* ビューポートの幅の割合で位置が決まる */
            left: 50vw; /* ビューポートの幅の割合で位置が決まる */
            width: 16%; /* 背景画像ßの幅に対しての割合でサイズを指定（例: 20%） */
            justify-content: center; /* 水平方向の中央揃え */
            }
        }

        /* 背景スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
            .redfishphoto  {
                top: 355vw; /* ビューポートの幅の割合で位置が決まる */
                left: 57vw; /* ビューポートの幅の割合で位置が決まる */
                width: 43%;

            }
        }


 /*　鯛の煮付け写真 */
 .boiledfishphoto {
    display: block; /* ブロック要素として表示 */
    position: absolute;
    top: 0vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
    height: auto; /* 高さを自動で調整 */
}

        /* 背景PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
            .boiledfishphoto  {
            top: 163vw; /* ビューポートの幅の割合で位置が決まる */
            left: 33vw; /* ビューポートの幅の割合で位置が決まる */
            width: 16%; /* 背景画像ßの幅に対しての割合でサイズを指定（例: 20%） */
            justify-content: center; /* 水平方向の中央揃え */
            }
        }

        /* 背景スマホ版（600px以下の画面サイズ） */
        @media (max-width: 600px) {
            .boiledfishphoto  {
                top: 420vw; /* ビューポートの幅の割合で位置が決まる */
                left: 2vw; /* ビューポートの幅の割合で位置が決まる */
                width: 53%;

            }
        }

        


/* 店主挨拶 */    
/* 背景PC版（601px以上の画面サイズ） */
@media (min-width: 601px) {
    .tensyugreeting {
        display: block; /* ブロック要素として表示 */
        position: absolute;
        top: 118vw; /* ビューポートの幅の割合で位置が決まる */
        left: 55vw; /* ビューポートの幅の割合で位置が決まる */
        width: 13%; /* 必要に応じてサイズを調整 */
        cursor: pointer; /* クリック可能なカーソルを表示 */
        height: auto; /* 高さを自動で調整 */
    }
}

/* 背景スマホ版（600px以下の画面サイズ） */
@media (max-width: 600px) {
    .tensyugreeting {
        display: block; /* ブロック要素として表示 */
        position: absolute;
        top: 313vw; /* ビューポートの幅の割合で位置が決まる */
        left: 67vw; /* ビューポートの幅の割合で位置が決まる */
        width: 30%; /* 必要に応じてサイズを調整 */
        cursor: pointer; /* クリック可能なカーソルを表示 */
        height: auto; /* 高さを自動で調整 */
    }
}

/* コンセプトのアニメーション */
        /* アニメーションの初期状態 */
        .atsukan, .conceptback, .tensyugreeting, .redfishphoto, .boiledfishphoto {
            opacity: 0; /* 透明にする */
            transform: translateX(100%); /* 初期位置を右に設定 */
            transition: all 1.5s ease; /* アニメーションの時間と効果 */
        }

        .tensyugreeting {
            transform: translateY(20%); /* 店主挨拶は上から登場 */
        }

        /* アニメーション適用時 */
        .atsukan.animate, .redfishphoto.animate {
            opacity: 1;
            transform: translateX(0); /* 元の位置に戻る */
        }

        .tensyugreeting.animate {
            opacity: 1;
            transform: translateY(0); /* 元の位置に戻る */
        }

        .boiledfishphoto, .conceptback {
            transform: translateX(-100%); /* 初期位置を左に設定 */
        }

        .boiledfishphoto.animate, .conceptback.animate {
            opacity: 1;
            transform: translateX(0); /* 元の位置に戻る */
        }


            
/* 店舗紹介----------------------------------------------------------------------- */


/*　店舗紹介背景 */
.shopinfobackground {
    display: block; /* ブロック要素として表示 */
    position: absolute;
    top: 0vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
    height: auto; /* 高さを自動で調整 */
        }
        
        /* 背景PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
                .shopinfobackground {
                top: 185vw; /* ビューポートの幅の割合で位置が決まる */
                left: 20vw; /* ビューポートの幅の割合で位置が決まる */
                width: 50%; /* 背景画像ßの幅に対しての割合でサイズを指定（例: 20%） */
                justify-content: center; /* 水平方向の中央揃え */
                }
            }
    
            /* 背景スマホ版（600px以下の画面サイズ） */
            @media (max-width: 600px) {
                .shopinfobackground {
                    top: 490vw; /* ビューポートの幅の割合で位置が決まる */
                    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
                    width: 100%;
    
                }
            }

/*　店舗紹介しめ縄 */
.shopinfosimenawa1 {
    display: block; /* ブロック要素として表示 */
    position: absolute;
    top: 0vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
    height: auto; /* 高さを自動で調整 */
        }
        
        /* 背景PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
                .shopinfosimenawa1 {
                top: 184vw; /* ビューポートの幅の割合で位置が決まる */
                left: 30.5vw; /* ビューポートの幅の割合で位置が決まる */
                width: 39%; /* 背景画像ßの幅に対しての割合でサイズを指定（例: 20%） */
                justify-content: center; /* 水平方向の中央揃え */
                }
            }
    
            /* 背景スマホ版（600px以下の画面サイズ） */
            @media (max-width: 600px) {
                .shopinfosimenawa1 {
                    top: 487vw; /* ビューポートの幅の割合で位置が決まる */
                    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
                    width: 100%;
    
                }
            }

/*　店舗紹介文字 */
.tenposyoukai {
    display: block; /* ブロック要素として表示 */
    position: absolute;
    top: 0vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
    height: auto; /* 高さを自動で調整 */
        }
        
        /* 背景PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
                .tenposyoukai {
                top: 194vw; /* ビューポートの幅の割合で位置が決まる */
                left: 36vw; /* ビューポートの幅の割合で位置が決まる */
                width: 18%; /* 背景画像ßの幅に対しての割合でサイズを指定（例: 20%） */
                justify-content: center; /* 水平方向の中央揃え */
                }
            }
    
            /* 背景スマホ版（600px以下の画面サイズ） */
            @media (max-width: 600px) {
                .tenposyoukai {
                    top: 510vw; /* ビューポートの幅の割合で位置が決まる */
                    left: 14vw; /* ビューポートの幅の割合で位置が決まる */
                    width: 40%;
    
                }
            }

/*　セリ帽子 */
.cap {
    display: block; /* ブロック要素として表示 */
    position: absolute;
    top: 0vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
    height: auto; /* 高さを自動で調整 */
    z-index: 10;
        }
        
        /* 背景PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
                .cap {
                top: 190vw; /* ビューポートの幅の割合で位置が決まる */
                left: 50vw; /* ビューポートの幅の割合で位置が決まる */
                width: 18%; /* 背景画像ßの幅に対しての割合でサイズを指定（例: 20%） */
                justify-content: center; /* 水平方向の中央揃え */
                }
            }
    
            /* 背景スマホ版（600px以下の画面サイズ） */
            @media (max-width: 600px) {
                .cap {
                    top: 500vw; /* ビューポートの幅の割合で位置が決まる */
                    left: 55vw; /* ビューポートの幅の割合で位置が決まる */
                    width: 40%;
    
                }
            }

/*　店舗情報詳細 */
.shopinfodetail {
    display: block; /* ブロック要素として表示 */
    position: absolute;
    top: 0vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
    height: auto; /* 高さを自動で調整 */
        }
        
        /* 背景PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
                .shopinfodetail {
                top: 235vw; /* ビューポートの幅の割合で位置が決まる */
                left: 36vw; /* ビューポートの幅の割合で位置が決まる */
                width: 31%; /* 背景画像ßの幅に対しての割合でサイズを指定（例: 20%） */
                justify-content: center; /* 水平方向の中央揃え */
                }
            }
    
            /* 背景スマホ版（600px以下の画面サイズ） */
            @media (max-width: 600px) {
                .shopinfodetail {
                    top: 610vw; /* ビューポートの幅の割合で位置が決まる */
                    left: 15vw; /* ビューポートの幅の割合で位置が決まる */
                    width: 75%;
    
                }
            }

/*　ご予約はこちら1 */
.reservation {
    display: block; /* ブロック要素として表示 */
    position: absolute;
    top: 0vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
    cursor: pointer; /* クリック可能なカーソルを表示 */
    height: auto; /* 高さを自動で調整 */
        }
        
        /* 背景PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
                .reservation {
                    top: 236vw; /* ビューポートの幅の割合で位置が決まる */
                    left: 50vw; /* ビューポートの幅の割合で位置が決まる */
                    width: 13%; /* 背景画像ßの幅に対しての割合でサイズを指定（例: 20%） */
                    justify-content: center; /* 水平方向の中央揃え */
                }
            }
    
            /* 背景スマホ版（600px以下の画面サイズ） */
            @media (max-width: 600px) {
                .reservation {
                    top: 613vw; /* ビューポートの幅の割合で位置が決まる */
                    left: 50vw; /* ビューポートの幅の割合で位置が決まる */
                    width: 35%;
    
                }
            }

/*　ご予約はこちら2 */
.reservation2 {
    display: block; /* ブロック要素として表示 */
    position: absolute;
    top: 0vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
    cursor: pointer; /* クリック可能なカーソルを表示 */
    height: auto; /* 高さを自動で調整 */
        }
        
        /* 背景PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
                .reservation2 {
                    top: 295vw; /* ビューポートの幅の割合で位置が決まる */
                    left: 36vw; /* ビューポートの幅の割合で位置が決まる */
                    width: 28%; /* 背景画像ßの幅に対しての割合でサイズを指定（例: 20%） */
                    justify-content: center; /* 水平方向の中央揃え */
                }
            }
    
            /* 背景スマホ版（600px以下の画面サイズ） */
            @media (max-width: 600px) {
                .reservation2 {
                    top: 720vw; /* ビューポートの幅の割合で位置が決まる */
                    left: 15vw; /* ビューポートの幅の割合で位置が決まる */
                    width: 70%;
    
                }
            }

/*　メニューボタン */
.menubutton {
    display: block; /* ブロック要素として表示 */
    position: absolute;
    top: 0vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
    height: auto; /* 高さを自動で調整 */
    cursor: pointer; /* クリック可能なカーソルを表示 */
    z-index: 10;
        }
        
        /* 背景PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
                .menubutton {
                top: 290vw; /* ビューポートの幅の割合で位置が決まる */
                left: 36vw; /* ビューポートの幅の割合で位置が決まる */
                width: 28%; /* 背景画像ßの幅に対しての割合でサイズを指定（例: 20%） */
                justify-content: center; /* 水平方向の中央揃え */
                }
            }
    
            /* 背景スマホ版（600px以下の画面サイズ） */
            @media (max-width: 600px) {
                .menubutton {
                    top: 733vw; /* ビューポートの幅の割合で位置が決まる */
                    left: 15vw; /* ビューポートの幅の割合で位置が決まる */
                    width: 70%;
    
                }
            }


/*　店舗紹介しめ縄2 */
.shopinfosimenawa2 {
    display: block; /* ブロック要素として表示 */
    position: absolute;
    top: 0vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
    height: auto; /* 高さを自動で調整 */
    z-index: 10;
        }
        
        /* 背景PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
                .shopinfosimenawa2 {
                top: 300vw; /* ビューポートの幅の割合で位置が決まる */
                left: 30.5vw; /* ビューポートの幅の割合で位置が決まる */
                width: 39%; /* 背景画像ßの幅に対しての割合でサイズを指定（例: 20%） */
                justify-content: center; /* 水平方向の中央揃え */
                }
            }
    
            /* 背景スマホ版（600px以下の画面サイズ） */
            @media (max-width: 600px) {
                .shopinfosimenawa2 {
                    top: 742vw; /* ビューポートの幅の割合で位置が決まる */
                    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
                    width: 100%;
    
                }
            }

/* 店舗紹介（googlemap）----------------------------------------------------------------------- */
 

.iframe-wrp {
    position: relative;
    width: 100%;
    padding-top: 75%; /* = height ÷ width × 100 */
  }

   /* 背景PC版（601px以上の画面サイズ） */
   @media (min-width: 601px) {
  .iframe-wrp iframe {
    position: absolute;
    top: 265vw;
    left: 35vw; 
    width: 30%;
    height: 30%;
    }
    }

     /* 背景スマホ版（600px以下の画面サイズ） */
   @media (max-width: 600px) {
    .iframe-wrp iframe {
      position: absolute;
      top: 678vw;
      left: 18vw; 
      width: 65%;
      height: 52%;
      }
      }




/* 店舗紹介（写真スライダー）----------------------------------------------------------------------- */

/* スライダー全体を覆うコンテナ */
.slider-container {
    position: relative;¥
    width: 100%; /* 幅を指定 */
    height: auto; /* 高さを自動調整 */
}

/* スライダーの中身 */
.slider {
    position: relative;
    width: 100%;
    height: auto;
}

/* 各画像のスタイル */
.shopinfophoto {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    cursor: pointer; /* クリック可能なカーソルを表示 */
    opacity: 0; /* 初期状態で非表示 */
    transition: opacity 1s ease-in-out; /* フェードイン・アウトのアニメーション */
}

/* PC版（601px以上の画面サイズ） */
@media (min-width: 601px) {
    .shopinfophoto {
        top: 202vw; /* PCでの位置指定 */
        left: 36.5vw;
        width: 27%;
    }
}

/* スマホ版（600px以下の画面サイズ） */
@media (max-width: 600px) {
    .shopinfophoto {
        top: 524vw; /* スマホでの位置指定 */
        left: 16vw;
        width: 68%;
    }
}



/* オーナー紹介----------------------------------------------------------------------- */

/*　オーナー紹介背景 */
.ownerbackground {
    display: block; /* ブロック要素として表示 */
    position: absolute;
    top: 0vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
    height: auto; /* 高さを自動で調整 */
        }
        
        /* 背景PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
                .ownerbackground {
                top: 303vw; /* ビューポートの幅の割合で位置が決まる */
                left: 30vw; /* ビューポートの幅の割合で位置が決まる */
                width: 40%; /* 背景画像ßの幅に対しての割合でサイズを指定（例: 20%） */
                justify-content: center; /* 水平方向の中央揃え */
                }
            }
    
            /* 背景スマホ版（600px以下の画面サイズ） */
            @media (max-width: 600px) {
                .ownerbackground {
                    top: 750vw; /* ビューポートの幅の割合で位置が決まる */
                    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
                    width: 100%;
    
                }
            }



/* フッター----------------------------------------------------------------------- */


/*　フッター */
.fotter {
    display: block; /* ブロック要素として表示 */
    position: absolute;
    top: 0vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
    cursor: pointer; /* クリック可能なカーソルを表示 */
    height: auto; /* 高さを自動で調整 */
        }
        
        /* 背景PC版（601px以上の画面サイズ） */
        @media (min-width: 601px) {
                .fotter {
                top: 410vw; /* ビューポートの幅の割合で位置が決まる */
                left: 30vw; /* ビューポートの幅の割合で位置が決まる */
                width: 40%; /* 背景画像ßの幅に対しての割合でサイズを指定（例: 20%） */
                justify-content: center; /* 水平方向の中央揃え */
                }
            }
    
            /* 背景スマホ版（600px以下の画面サイズ） */
            @media (max-width: 600px) {
                .fotter {
                    top: 1015vw; /* ビューポートの幅の割合で位置が決まる */
                    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
                    width: 100%;
    
                }
            }