@charset "utf-8";
/* =========================
common
=========================== */
html {
    font-size: 62.5%;
}

body {
    font-family: 
    'Noto Sans JP',
    'Baloo 2',
    'Bebas Neue',
    'M PLUS 1',
    sans-serif;
    font-style: normal;
    color: #FFF;
    background-color: #23271F; 
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

img{
    /* max-width: 100%; */
    height: auto;
}

/* =========================
header
=========================== */
.header {
    padding: 0 0 0 2%;
    display:flex;
    align-items: center;
    justify-content: space-between;
    z-index: 999;
    position: relative;
}

.rogo1 {
    display: none;
}

/* .nav初期表示 */
.nav {
    background: #FF0;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    transform: translateX(100%);
    transition: transform 0.4s;
    background-image: url("../images/sphaikei4.png");
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: left 85%;
    padding-bottom: 30px;
    border-radius: 40px;
}

.nav__btn {
    padding-left: 270px;
}

.nav__list {
    margin-top: 25px;
}

.nav__item {
    color: #23271F;
    font-family: "Bebas Neue";
    font-size: 4rem;
    line-height: normal;
    margin-top: 15px;
    margin-left: 24px;
}
.sprogo2 { 
    margin-top: 20px;
}

.sprogo4 {
    margin-bottom: 250px;
}

.rogo2,.rogo4 {
    display: none;
}

.nav__item::before {
    content: '';
    display: inline-block;
}

/* .nav.acvive表示 */
.nav.active {
    transform: translateX(0);
}

.header__btn {
    position: relative;
    z-index: 10000;
    pointer-events: auto;
}

/* ここを追記（.header__btn のあたりに書くと分かりやすい） */
.nav.active + .header__btn {
  opacity: 0;           /* 見えなくする */
  pointer-events: none; /* クリックもできないように */
  transition: opacity .3s;
}


.scroll-infinitynav {
    margin-top: 30px;
    overflow: hidden;
}

.scroll-infinitynav1 {
    overflow: hidden;
    margin-top: 20px;
}

/* common pc */
@media screen and (min-width: 769px) {
    .sprogo1 {
        display: none;
    }

    .rogo1 {
        display: block;
        margin-left: -680px;
        margin-top: 10px;
    }

    .nav {
        border-radius: 40px;
        width: 673px;
    } 

    .nav__btn {
        margin-left: 250px;
        margin-top: 10px;
    }

    .sprogo2,.sprogo4 {
        display: none;
    }

    .rogo2 {
        display: block;
        margin-top: 20px;
    }

    .rogo4 {
        display: block;
        margin-top: 20px;
    }

    .nav__item {
        font-family: "Bebas Neue";
        font-size: 10rem;
        font-weight: 400;
        margin-left: 40px;
        margin-top: 30px;
    }

    .nav {
        background-image: url("../images/sphaikei4.png");
        background-repeat: no-repeat;
        background-size: auto 80%;
        background-position: -100% 80%;
        
    }
}

/* pc769px */

/* =========================
first-view
=========================== */
.container {
    overflow-x: hidden;
}

.first-view {
    position: relative;
}

.mark1 {
    display: none;
}

.fv-photo1 {
    display: none;
}

.fv-photo2 {
    display: none;
}

.fv-photo3 {
    display: none;
}

.fv-rogo2 {
    display: none;
}

.mark2 {
    display: none;
}

.pcscroll-infinity__item,.pcscroll-infinity__item2 {
    display: none;
}

.spmark1 {
    position: absolute;
    top: 12%;
    left: 50%;
    transform: translate(-50%,-50%);
}


.spcatchcopy1 {
    margin-top: 60px;
    position: relative;
    overflow: hidden;
    z-index: 10;
    margin-left: -50px;
}


@keyframes infinity-scroll-right {
from {
    transform: translateX(-100%);
}
    to {
    transform: translateX(0);
}
}
.scroll-infinity__list--right{
    animation :infinity-scroll-right 30s infinite linear 0.3s both;
}

@keyframes infinity-scroll-left {
from {
    transform: translateX(0);
}
    to {
    transform: translateX(-100%);
}
}
.scroll-infinity__list--left {
    animation :infinity-scroll-left 30s infinite linear 0.3s both;
}

.spscroll-infinity__item {
    margin-top: -15px;
    z-index: 0;
}

.spscroll-infinity__item2 {
    margin-top: 175px;
}

.spcatchcopy2 {
    margin-left: -50px;
}

.catchcopy{
    margin-top: -60px;
}

.spfv-photo2 {
    margin-left: 65%;
    margin-top: -80px;
}

.spfv-rogo2 {
    margin-top: -70px;
    margin-left: -5px;
    width: 100%;
    
}

.spfv-photo3 {
    margin-left:20px;
    
}

.spmark2 {
    margin-left: 190px;
    margin-top: -130px;
}

.TOP_animation{
    text-align: center;
    position: relative;
}

.TOP_animation:before{
    content:"";
    background-image: url(..//images/spmark2.png);
    background-size: 100%;
    width: 200px;
    height: 200px;
    position: absolute;
    margin-top: -150px;
    left: 40%;
    animation: rotation 3s alternate infinite;
    -webkit-animation: rotation 3s alternate infinite;
}

@keyframes rotation{
    0%, 5% {
    transform:
    translate(0%)
    rotate(0deg)
    }
    50%{
    transform:
    translate(75%)
    rotate(180deg);
    }
    95%, 100% {
    transform:
    translate(150%)
    rotate(360deg);
    }
}
@-webkit-keyframes rotation{
    0%, 5% {
    transform:
    translate(0%)
    rotate(0deg)
    }
    45%,50%{
    transform:
    translate(40%)
    rotate(180deg);
    }
    95%, 100% {
    transform:
    translate(80%)
    rotate(360deg);
    }
}

.catchcopy2{
    margin-top: -160px;
}


@media screen and (min-width: 769px) {
.spmark1 {
    display: none;
}

.mark1 {
    display: block;
    margin-left: 500px;
    margin-top: -50px;
}

.spfv-photo1,.spfv-photo2,.spfv-rogo2,.spfv-photo3,.spmark2 {
    display: none;
}

.spcatchcopy1,.spcatchcopy2 {
    display: none;
}

.fv-photo1 {
    display: block;
    margin-top: 20px;
    
}

.fv-photo2 {
    display: block;
    margin-left: 1200px;
    margin-top: -150px;
}


.fv-photo3 {
    display: block;
    margin-left: 150px;
    margin-top: 80px;
}

.mark2 {
    display: block;
    margin-left: 920px;
    margin-top: -300px;
    position: relative;
    z-index: 0;
}

.fv-rogo2 {
    display: block;
    margin-left: 150px;
    margin-top: -800px;
    position: relative;
    z-index: 10;
    width: 80%;
}

.catchcopy1 {
    display: block;
    margin-top: -350px;
    position: relative;
    overflow: hidden;
}


.catchcopy2 {
    display: block;
    margin-top: -100px;
}

.spscroll-infinity__item,.spscroll-infinity__item2 { 
    display: none;
}

.pcscroll-infinity__item,.pcscroll-infinity__item2 {
    display: block;
}

.pcscroll-infinity__item {
    margin-top: -10px;
}

.pcscroll-infinity__item2 {
    margin-top: 180px
}

.TOP_animation:before{
    content:"";
    background-image: url(..//images/mark2.png);
    background-size: 100%;
    width: 400px;
    height: 400px;
    position: absolute;
    margin-top: -200px;
    left: 40%;
    animation: rotation 3s alternate infinite;
    -webkit-animation: rotation 3s alternate infinite;
}

@keyframes rotation{
    0%, 5% {
    transform:
    translate(0%)
    rotate(0deg)
    }
    50%{
    transform:
    translate(75%)
    rotate(180deg);
    }
    95%, 100% {
    transform:
    translate(150%)
    rotate(360deg);
    }
}
@-webkit-keyframes rotation{
    0%, 5% {
    transform:
    translate(0%)
    rotate(0deg)
    }
    45%,50%{
    transform:
    translate(40%)
    rotate(180deg);
    }
    95%, 100% {
    transform:
    translate(80%)
    rotate(360deg);
    }
}
}
/* pc769px */
/* =========================
ABOUT
=========================== */
.about1, .catch1, .catch2, .abouthaikei1, .abouthaikei4 {
    display: none;
}

.spabout1 {
    margin-left: 30px;
    margin-top: 10px;
}

.spabouthaikei1 {
    position: relative;
    top: -440px;
    margin-left: 130px;
}

.spcatch1 {
    position: relative;
    top: 100px;
    left: -100px;
}

.spcatch2 {
    position: relative;
    top: -10px;
    left: 80px;
}

.about-text {
    font-family: "M PLUS 1";
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 2.56px;
    margin-top: -550px;
    margin-left: 37px;
    max-width: 180px;
}

.about-sub {
    font-family: "M PLUS 1";
    font-size: 1rem;
    font-weight: 800;
    line-height: 17px; /* 170% */
    letter-spacing: 2px;
    margin-top: 20px;
    margin-left: 42px;
    max-width: 260px;
}

.about-texten {
    font-family: "Baloo 2";
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 17px; /* 113.333% */
    letter-spacing: 2.25px;
    text-transform: lowercase;
    margin-top: 40px;
    margin-left: 46px;
}

.about-suben {
    font-family: "Baloo 2";
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 17px; /* 154.545% */
    letter-spacing: 1.32px;
    text-transform: lowercase;
    margin-top: 10px;
    margin-left: 46px;
}

.spscroll-infinity__item0 {
    margin-top: 50px;
}

.belt-rotate img {
    /* overflow: hidden; */
    position: absolute;
}

.belt-rotate {
    left: 0; right: 0;
    margin-top: 50px;
    margin-bottom: -100px;
    transform: translateY(-50%) rotate(-10deg); /* 親を斜めにする */
    transform-origin: center;
}

.belt-track{
    display: flex;
    will-change: transform;
    /* 一定位置まで行ったら戻る（上下にズレない） */
    animation: belt-move 20s linear infinite alternate;
}

@keyframes belt-move{
from { transform: translateX(0); }
to { transform: translateX(-50%); } /* 中身を2回並べた長さの半分など */
}


.spabouthaikei2 {
    margin-left: -80px;
    margin-top: 60px;
}

.spabouthaikei3 {
    margin-top: -50px;
}

.spabouthaikei4 {
    margin-top: -50px;
    width: 100%;
    height: auto;
    display: block;
}


@media screen and (min-width: 769px) {
.spabout1, .spcatch1,.spcatch2,.spabouthaikei1,.spabouthaikei2,.spabouthaikei3,.spabouthaikei4 {
    display: none;
}

.abouthaikei1 {
    display: block;
    margin-top: -50px;
    margin-left: -170px;
    position: relative;
    z-index: 10;
}

.about {
    position: relative;
}

.about1 {
    display: block;
    position: absolute;
    top: 160px;
    left: 200px;
}

.catch1 {
    display: block;
    position: absolute;
    top: 450px;
    left: 400px;
}

.catch2 {
    display: block;
    position: relative;
    top: -930px;
    left: 750px;    
}

.about-text {
    font-family: "M PLUS 1";
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: 4.8px;
    max-width: 100%;
    text-align: center;
    line-height: 1.8;
    position: relative;
    top: -450px;
}

.about-sub {
    font-family: "M PLUS 1";
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 2.1px;
    text-align: center;
    max-width: 700px;
    line-height: 2.5;
    position: relative;
    left: 350px;
    top: -430px;
}

.about-texten {
    font-family: "Baloo 2";
    font-size: 2rem;
    font-weight: 700;
    line-height: 17px; /* 85% */
    letter-spacing: 3px;
    text-transform: lowercase;
    position: relative;
    top: -430px;
    left: 570px;
}

.about-suben {
    font-family: "Baloo 2";
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 17px; /* 121.429% */
    letter-spacing: 2.1px;
    text-transform: lowercase;
    line-height: 2;
    position: relative;
    top: -430px;
    left: 600px;
}

.abouthaikei4 {
    display: block;
    margin-top: -320px;
    position: relative;
    z-index: 10;
    width: 120%;
}
.spscroll-infinity__item0 {
    display: none;
}

}

/* pc769px */
/* =========================
experience
=========================== */
.experience {
    background-image: url(..//images/sphaikei5.png);
    background-repeat: no-repeat;
    background-position-x: center;
} 

.belt-rotate2 img {
    /* overflow: hidden; */
    position: absolute;
}

.belt-rotate2 {
    left: 0; right: 0;
    margin-top: -40px;
    margin-bottom: 130px;
    transform: translateY(-50%) rotate(10deg); /* 親を斜めにする */
    transform-origin: center;
    position: relative;
    z-index: 0;
}

.belt-track2 {
    display: flex;
    will-change: transform;
    /* 一定位置まで行ったら戻る（上下にズレない） */
    animation: belt-move 20s linear infinite alternate;
}

@keyframes belt-move {
from { transform: translateX(0); }
to { transform: translateX(-50%); } /* 中身を2回並べた長さの半分など */
}

.pcscroll-infinity__item4 {
    display: none;
}

.spexperience1 {
    margin-left: 170px;
    margin-top: 20px;
    display: block;
}

.ex-sub {
    display: block;
    margin-left: 240px;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    margin-top: -30px;
}

.experience1 {
    display: none;
}

.experience-obi1 {
    display: none;
}

.experience-pic1 {
    display: none;
}

.experience-pic2 {
    display: none;
}

.experience-pic3 {
    display: none;
}

.experience-candy1 {
    display: none;
}

.spscroll-infinity__item3 {
    margin-top: -100px;
    position: relative;
    z-index: 0;
    margin-bottom: -280px;
}

.spexperience-pic1 {
    margin-left: -50px;
    position: relative;
    z-index: 10;
    margin-top: -200px;
}

.experience-text {
    font-family: "M PLUS 1";
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 17px; /* 121.429% */
    letter-spacing: 2.66px;
    text-align: center;
    margin-top: -30px;
    margin-bottom: 20px;
}

.ex-sub2 {
    font-family: "M PLUS 1";
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 2.09px;
    text-align: center;
    max-width: 270px;
    margin-left: 50px;
    margin-bottom: 40px;
    line-height: 1.8;
}

.experience-sub {
    font-family: "Baloo 2";
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 17px; /* 121.429% */
    text-transform: lowercase;
    text-align: center;
}

.enex-sub2 {
    font-family: "Baloo 2";
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 17px; /* 154.545% */
    letter-spacing: 0.22px;
    text-transform: lowercase;
    text-align: center;
    margin-top: 5px;
}

.spexperience-pic2 {
    margin-left: -130px;
    margin-top: -150px;
}

.spexperience-pic3 {
    margin-top: -270px;
    margin-left: 180px;
}


.spscroll-infinity__item11 {
    display: block;
}

.pcscroll-infinity__item5 {
    display: none;
}

.experience-text3 {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    margin-left: 32px;
    margin-top: 220px;
}

.expe-sub3 {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    max-width: 250px;
    margin-left: 120px;
    margin-top: 15px;
    line-height: 1.8;
}

.experience-caption {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    margin-left: 230px;
    margin-top: -40px;
}

.belt-rotate0 img {
    overflow: hidden;
    position: absolute;
    margin-top: 40px;
}

.belt-rotate0 {
    left: 0; right: 0;
    margin-top: -60px;
    transform-origin: center;
}

.belt-track0 {
    display: flex;
    will-change: transform;
    /* 一定位置まで行ったら戻る（上下にズレない） */
    animation: belt-move 20s linear infinite alternate;
}

@keyframes belt-move {
from { transform: translateX(0); }
to { transform: translateX(-50%); } /* 中身を2回並べた長さの半分など */
}

.experience-images1 {
    display: none;
}

.experience-images2 {
    display: none;
}

.experience-images3 {
    display: none;
}

.experience-images4 {
    display: none;
}

.gallery-window {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.gallery-track {
    margin-top: -30px;
    display: flex;
    align-items: center;
    will-change: transform;
    animation: gallery-yoyo 40s ease-in-out infinite alternate;
}

/* 左右にゆっくり傾く動き */

@keyframes rotate-swing {

0% {
    transform: rotate(15deg);
}

100% {
    transform: rotate(-15deg);
}

}

/* 横スクロールの動き（例） */
@keyframes gallery-yoyo {

0% {
    transform: translateX(0);
}

100% {
    transform: translateX(-1000px); /* ←環境に合わせて調整 */
}

}

.gallery-track img {
    gap: 0;
    padding: 0;
    display: inline-block;
    width: 300px;
    height: auto;
    flex-shrink: 0;
    animation: rotate-swing 3s ease-in-out infinite alternate; /* ←ここ追加 */
}

.spexperience-obi2 {
    margin-left: -20px;
    margin-top: -20px;
}

.experience-obi2 {
    display: none;
}

.spscroll-infinity__item4 {
    margin-top: 10px;
}

.roulette1 {
    display: none;
}

.spexperience-obi3 {
    margin-top: 70px;
}

/* =========================
ROULETTE (ルーレット一式)
=========================== */

/* 画面読み上げのユーティリティ（未定義なら） */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 任意：JSが付与する非表示用（未定義なら） */
.is-hidden{ display:none !important; }

/* 全体ラッパー（見出しやボタンを含むセクション） */
.roulette{ position: relative; }

.sproulette1 {
    margin-left: 60px;
    margin-top: 200px;
    position: relative;
    margin-bottom: -40px;
    width: 288px;
    height: auto;
}

/* 円ステージ：背景(星/緑の円/初期うまい棒)と結果を重ねる基準箱 */
.roulette-stage{
    position: relative;
    aspect-ratio: 1 / 1;
    margin: 0 auto;    
}


/* ===== 背景レイヤー ===== */
.roulette-haikei{
position: absolute;
  inset: 0;                       /* .roulette-stage にフィット */
  pointer-events: none;           /* 背景でボタンのクリックを妨げない */
z-index: 1;
}

/* 星の背景を全面に */
.sproulette-haikei1,
.roulette-haikei1{
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
}

/* 緑の円（中央固定） */
.sprouletteen{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 80%;
    height: auto;
    z-index: 2;
    }

/* 初期うまい棒（SP想定：下中央） */
.sproulette-umaibo3{
    position: absolute;
    left: 50%;
    width: 35%;
    z-index: 3;
    margin-top: -10px;
}

/* PC用の重ね画像を使う場合も同様に absolute */
.roulette-umaibo3{ position:absolute; inset:auto; z-index:3; }

/* ===== 結果レイヤー ===== */
/* 初期はJSで .show を付ける前提。高さゼロ指定はやめてOK */
.roulette-result{
    position: absolute;             /* .show が付く前でも位置基準は stage */
    inset: 0;                       /* センター演出のため舞台全体を覆う */
    overflow: visible;
    z-index: 5;                     /* 背景より前へ */
}

/* 表示時は「ど真ん中」に固定 */
.roulette-result.show{
    top: 50%; left: 50%;
    transform: translate(-50%,-140%);
    width: 100%; height: auto;
    margin-top: -30px;
    margin-bottom: 50px;
}

/* 結果カード：1枚だけ見せる（他は完全に隠す） */
.roulette-card{ 
    display: none !important; 
    opacity: 0; 
}
.roulette-card.active{ 
    display: block !important; 
    opacity: 1 !important;
}

/* 結果リストを中央寄せ（grid で1セル中央） */
.sproulette-result__list{
  display: grid !important;
  margin: 0; padding: 0; list-style: none;
  
}

/* 結果画像のサイズ（円からはみ出るなら max-width を微調整） */
.roulette-card img{
  display: block !important;
  height: auto !important;
  margin-inline: auto;
  margin-top: 80px;
}

/* ちょい演出（任意）：表示時に軽く回転 */
@keyframes roulette-one-spin{ to{ transform: rotate(360deg) } }
.roulette-card.active img{ animation: roulette-one-spin .6s ease; }

/* ===== ボタン・シェア周り（重なり順だけ整える） ===== */
.mawasu{ 
  position: relative; 
  z-index: 10;                    /* 結果より前に置くなら 6+ に */
  text-align: center;
}

/* 見出し画像（PC用）は初期は非表示の前提で */
.roulette1{ display:none; }

/* TRY THE ROULETTEブロックの高さを固定（ズレ防止） */
.roulette-title {
  display: block;
  position: relative;
  min-height: 100px; /* ← ここで消えても高さが残る */
}

/* 消えるアニメーションは維持 */
.roulette-title.is-hidden {
  opacity: 0;
  visibility: hidden;
}


.sproulette-umaibo3.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.roulette-card .pcumai,
.roulette-card .pcyoccan,
.roulette-card .pcramune,
.roulette-card .pckyabetu,
.roulette-card .pcpachi {
  display: none !important;
}

.roulette-card .spumai,
.roulette-card .spyoccan,
.roulette-card .spramune,
.roulette-card .spkyabetu,
.roulette-card .sppachi {
  display: block;
}

.spyoccan {
    padding: 10px;
}

.spkyabetu {
    padding: -7px;
}

.sproulette-card {
  display: none;
  opacity: 0;
  position: relative;
  z-index: 999;
  transform: scale(1);
  transition: opacity 0.5s ease, transform 0.4s ease;
}

.sproulette-card.show {
  display: block;
  opacity: 1;
  transform: scale(1);
}

.spspin {
    margin-top: -400px;
    position: relative;
    z-index: 10;
}

.pcspin {
    display: none;
}

.roulette-icon1,.roulette-icon2 {
    display: none;
}

.pcroulette-spin-btn {
    display: none;
}


.roulette-result-display {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 10;
}

.result-img {
width: 180px;
transition: transform 0.6s ease;
}

.result-img.spin {
transform: rotate(360deg);
}

.result-title,
.result-name {
color: #fff;
font-family: 'M PLUS 1', sans-serif;
text-shadow: 0 0 8px #0f0;
}


.rouletteokashi {
    font-family: "M PLUS 1";
    font-size: 1.2rem;
    font-weight: 700;
    margin-left: 120px;
    
}

.pcscroll-infinity__item6 {
    display: none;
}

.belt-rotate3 img {
    /* overflow: hidden; */
    position: absolute;
}

.belt-rotate3 {
    margin-top: -10px;
    margin-bottom: -40px;
    left: 0; right: 0; 
    transform: translateY(-50%) rotate(-10deg); /* 親を斜めにする */
    transform-origin: center;
}

.belt-track3 {
    display: flex;
    will-change: transform;
    /* 一定位置まで行ったら戻る（上下にズレない） */
    animation: belt-move 20s linear infinite alternate;
}

@keyframes belt-move{
from { transform: translateX(0); }
to { transform: translateX(-50%); } /* 中身を2回並べた長さの半分など */
}

.spscroll-infinity__item3 {
    margin-top: 90px;
    
}

/* 親：重ねるための土台 */
.roulette-haikei{
position: relative;
aspect-ratio: 1 / 1; /* 正方形をキープ */

}

/* 星の背景（全面に敷く） */
.sproulette-haikei1{
position: absolute;
width: 100%;
height: 100%;
object-fit: contain;
z-index: 1;
}

/* 緑の円：中央に固定 */
.sprouletteen{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%; /* 円の大きさはお好みで */
z-index: 2;
position: absolute;
}

/* うまい棒（例：下中央に） */
.sproulette-umaibo3{
position: absolute;
left: 50%;
bottom: 15%; /* はみ出し量は調整 */
transform: translateX(-50%);
z-index: 3;
}

/* 他の重ね画像があれば同様に absolute で配置 */
.roulette-umaibo3{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
z-index: 1;
}

/* 見た目で 2% だけ下げたい例（お好みで ± 調整） */
#roulette .roulette-card.active img{ transform: translateY(3%,5%) !important; }

.sproulette-spin-btn {
    margin-top: -50px;
}

/* クリック時だけ使うアニメ名を分ける（btn-glow） */
.roulette-spin-btn.glow-once {
  animation: btn-glow 0.6s ease-in-out;
}

@keyframes btn-glow {
  0%, 100% { filter: drop-shadow(0 0 0px #fff); }
  50%      { filter: drop-shadow(0 0 20px #ff0); }
}

/* ← ここポイント：hoverはアニメーションではなく単なるfilter変化 */
.roulette-spin-btn:hover {
  filter: drop-shadow(0 0 14px #ff0);
  transition: filter .2s ease;  /* ふわっと光る */
}

.sproulette-haikei2 {
    margin-top: -400px;
    margin-left: 55px;
}

.pcscroll-infinity__item7 {
    display: none;
}

.belt-rotate4 img {
    /* overflow: hidden; */
    position: absolute;
}

.belt-rotate4 {
    left: 0; right: 0;
    margin-top: 150px;
    margin-bottom: 100px;
    transform: translateY(-50%) rotate(10deg); /* 親を斜めにする */
    transform-origin: center;
    z-index: 0;
}


.belt-track4 {
    display: flex;
    will-change: transform;
    /* 一定位置まで行ったら戻る（上下にズレない） */
    animation: belt-move 20s linear infinite alternate;
}

@keyframes belt-move {
from { transform: translateX(0); }
to { transform: translateX(-50%); } /* 中身を2回並べた長さの半分など */
}

.roulette-haikei1,.roulette-umaibo3,.roulette-haikei2 {
    display: none;
}

.experience-obi3 {
    display: none;
}

.roulette-share {
    position: absolute;
    margin-left: -20px;
    margin-top: -120px;
}

.sproulette-icon1 {
    margin-left: 160px;
    margin-bottom: 30px;
    
}


.sproulette-icon2 {
    margin-left: 10px;
    margin-bottom: 30px;
}

.luretokyara {
    display: none;
}

.spluretokyara {
    position: relative;
    right: -170px;
    margin-top: 170px;
    width: 40%;
}
/* どこでも強制非表示にする */
.is-hidden { display: none !important; }

.pcumai,.pcyoccan,.pcramune,.pckyabetu,.pcpachi {
    display: none;
}


@media screen and (min-width: 769px) {
    .experience {
        background-image: url(..//images/haikei1.png);
        background-repeat: no-repeat;
        background-position-x: center;
}
.spexperience1,.spexperience-obi1,.spexperience-pic1,
.spexperience-pic2,.spexperience-pic3,.spexperience-candy1,
.spexperience-images3,.spexperience-images1,.spexperience-images2,
.spexperience-images4,.spexperience-obi2,.sproulette1,
.sproulette-haikei1,.sproulette-umaibo3,.sproulette-haikei2,
.spexperience-obi3,.spscroll-infinity__item11 {
    display: none;
}

.roulette-stage {
    max-height: 900px;   /* ← PCでの縦の最大値 */
    width: 1250px;        /* ← 正円にしたいなら同じ値 */
    margin: 0 auto;
  }

.roulette-title {
    margin-bottom: -200px;
}

.pcumai {
    padding: 200px;
}

.pcyoccan {
    padding: 240px;
}

.pcramune {
    padding: 200px;
}

.pckyabetu {
    padding: 200px;
}

.pcpachi {
    padding: 200px;
}

.rouletteokashi {
    margin-top: -50px;
}

.sprouletteen{
position: relative;

}

.spscroll-infinity__item4 {
    display: none;
}

.sproulette-icon1,sproulette-icon2 {
    display: none;
}

.sproulette-spin-btn {
    display: none;
}


@media screen and (min-width: 769px) {
  /* PCではSP画像を消して */
.roulette-card .spumai,
.roulette-card .spyoccan,
.roulette-card .spramune,
.roulette-card .spkyabetu,
.roulette-card .sppachi {
    display: none !important;
}

  /* PC画像だけ表示 */
.roulette-card .pcumai,
.roulette-card .pcyoccan,
.roulette-card .pcramune,
.roulette-card .pckyabetu,
.roulette-card .pcpachi {
    display: block !important;
}

.roulette-result.show{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -90%);  /* 中央ど真ん中 */
    width: 100%;
    height: auto;
    margin-top: 0;
    margin-bottom: 0;
  }

  /* 画像の余白もリセットしておくと合わせやすい */
  .roulette-card img{
    margin-top: 0;
  }
}

/* ルーレットのお菓子画像をPCでは大きく表示する */
@media (min-width: 769px) {


  /* ちょい演出（任意）：表示時に軽く回転 */
@keyframes roulette-one-spin{ to{ transform: rotate(360deg) } }
.roulette-card.active img{ animation: roulette-one-spin .6s ease; }
}

.spumai {
    padding: 90px;
}

.spramune {
    padding: 150px;
}

.pcroulette-spin-btn {
    display: block;
    margin-top: 120px;
}

.pcscroll-infinity__item4 {
    display: block;
    margin-top: 200px;
}


.belt-rotate4 {
    margin-top: 600px;
    margin-bottom: -100px;
}

.pcscroll-infinity__item5 {
    display: block;
    margin-top: 150px;
}

.pcscroll-infinity__item7 {
    display: block;
}

.belt-rotate3 { 
    margin-top: 200px;
}

.experience1 {
    display: block;
    margin-top: 160px;
    margin-left: 910px;
    position: relative;
}

.gallery-track img {
    gap: 0;
    padding: 0;
    display: inline-block;
    width: 50%;
    margin-top: 250px;
    height: auto;
    flex-shrink: 0;
    animation: rotate-swing 3s ease-in-out infinite alternate; /* ←ここ追加 */
    position: relative;
    z-index: 0;
}

.belt-track3 {
    margin-top: 200px;
    position: relative;
    z-index: 999;
}

.pcscroll-infinity__item6 {
    display: block;
    position: relative;
    z-index: 0;
}

.ex-sub {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    position: relative;
    right: -800px;   
}


.experience-obi1 {
    display: block;
    margin-top: -400px;
}

.experience-pic1 {
    display: block;
    margin-left: 20px;
}

.experience-text {
    font-family: "M PLUS 1";
    font-size: 2rem;
    font-weight: 800;
    line-height: 17px; /* 85% */
    letter-spacing: 3.8px;
    margin-top: 60px;
    margin-left: 380px;
    text-align: left;
}

.ex-sub2 {
    font-family: "M PLUS 1";
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.7; 
    letter-spacing: 3.04px;
    margin-left: 380px;
    max-width: 460px;
    text-align: left;
}

.experience-sub {
    font-family: "Baloo 2";
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.7; 
    text-transform: lowercase;
    margin-top: 70px;
    margin-left: -260px;
}

.enex-sub2 {
    font-family: "Baloo 2";
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.32px;
    text-transform: lowercase;
    margin-top: 5px;
    margin-left: -250px;
}

.experience-pic2 {
    display: block;
    margin-top: -200px;
    margin-left: 20px;
}

.experience-pic3 {
    display: block;
    margin-top: -860px;
    margin-left: 770px;
}


.experience-text3 {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    position: relative;
    top: 130px;
    margin-left: 100px;
    margin-bottom: -80px;
}

.expe-sub3 {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: 0.65px;
    position: relative;
    top: 210px;
    margin-left: 200px;
    max-width: 400px;
    margin-bottom: -80px;
}

.experience-images {
    display: flex;
    align-items: center;
    position: relative;
    margin-top: 140px;
    z-index: 10;
}

.experience-images1 {
    display: block;
    margin-left: -80px;
    margin-top: 200px;
}

.experience-images2 {
    display: block;
    margin-top: 170px;
    margin-left: -120px;
}

.experience-images3 {
    display: block;
    margin-top: -50px;
    margin-left: -80px;
}

.experience-images4 {
    display: block;
    margin-top: 160px;
    margin-left: -80px;
}

.experience-obi2 {
    display: block;
    margin-top: -770px;
}

.experience-caption {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    position: absolute;
    right: 0;
    transform: translateY(-50%); /* 縦位置の微調整 */
    line-height: 2;
    width: 400px;
}

.roulette1 {
    display: block;
    margin-top: 400px;
    padding: 0 400px;
}

.rouletteokashi {
    font-family: "M PLUS 1";
    font-size: 3.2rem;
    font-weight: 800;
    margin-top: -20px;
    padding: 0 400px;
}

.roulette-haikei1 {
    display: block;
    margin-left: 40px;
    
}

.roulette-umaibo3 {
    display: block;
    width: 30%;
    margin-top: -1000px;
    margin-left: 450px;
    position: relative;
    z-index: 999;
}

.spluretokyara {
    display: none;
}

.luretokyara {
    display: block;
    margin-left: 760px;
    margin-top: 450px;
    width: 30%;
}

.roulette-icon1,.roulette-icon2 {
    display: block;
}

.roulette-icon1 {
    margin-left: 1200px;
    margin-top: -70px;
}

.roulette-icon2 {
    margin-left: 1300px;
    margin-top: -130px;
}

.roulette-haikei2 {
    display: block;
    margin-top: -10px;
    margin-left: 480px;
}

.experience-obi3 {
    display: block;
    margin-top: -200px;
}

.spscroll-infinity__item2,.spscroll-infinity__item3,.spscroll-infinity__item4
.spscroll-infinity__item5,.spscroll-infinity__item6  {
    display: none;
}

}
/* pc769px */
/* =========================
gallery
=========================== */
.gallery1 {
    display: none;
}

.gallery-pic1,.gallery-pic2,.gallery-pic3,.gallery-pic4,.gallery-pic5,.gallery-pic6,.gallery-pic7,.gallery-pic8,
.gallery-pic9,.gallery-pic10,.experience-obi4,.gallery-pic11 {
    display: none;
}

.spgallery1 {
    margin-top: -20px;
    margin-left: 20px;
    margin-bottom: 10px;
    position: relative;
}


.spgallery-pic1 {
    margin-left: -70px;
    margin-top: -20px;
    position: relative;
}

.spgallery-pic7 {
    margin-top: -490px;
    margin-left: 20px;
    position: absolute;
}

.spgallery-pic2 {
    margin-left: 60px;
    margin-top: -140px;
    position: relative;
}

.spgallery-pic8 {
    position: absolute;
    margin-left: 180px;
    margin-top: -80px;
}

.spgallery-pic3 {
    margin-left: -100px;
    margin-top: -80px;
    position: relative;
    z-index: 1;
}

.spgallery-pic4 {
    margin-left: 140px;
    margin-top: -210px;
}

.spgallery-pic9 {
    margin-top: -250px;
    margin-left: -10px;
}

.spgallery-pic5 {
    margin-top: -85px;
    margin-left: -50px;
}

.spgallery-pic10 {
    margin-top: -70px;
    margin-left: 20px;
    position: absolute;
}

.spgallery-pic6 {
    position: relative;
    margin-left: 140px;
    margin-top: -60px;
}

.spgallery-pic11 {
    margin-top: -100px;
    margin-left: -60px;
    position: relative;
    z-index: 10;
    margin-bottom: -120px;
}

.spscroll-infinity__item6 {
    margin-top: -100px;
    position: relative;
    z-index: 0;
}

.gallery-content {
    margin-left: 20px;
}

.gallery-text {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    margin-left: 22px;
    margin-top: 30px;
    margin-bottom: 10px;
    line-height: 1.8;
}

.pcscroll-infinity__item8 {
    display: none;
}

.belt-rotate5 img {
    /* overflow: hidden; */
    position: absolute;
}

.belt-rotate5 {
    left: 0; right: 0;
    margin-top: -100px;
    transform: translateY(-50%) rotate(-10deg); /* 親を斜めにする */
    transform-origin: center;
    z-index: 0;
}

.belt-track5 {
    display: flex;
    will-change: transform;
    /* 一定位置まで行ったら戻る（上下にズレない） */
    animation: belt-move 20s linear infinite alternate;
}

@keyframes belt-move{
from { transform: translateX(0); }
to { transform: translateX(-50%); } /* 中身を2回並べた長さの半分など */
}

.gallery-sub {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: normal;
    margin-left: -110px;
}

.gallery-sub3 {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    margin-left: 25px;
}


@media screen and (min-width: 769px) {
    .spgallery1,.spgallery-pic1,.spgallery-pic2,.spgallery-pic7,
    .spgallery-pic8,.spgallery-pic3,.spgallery-pic4,.spgallery-pic9,
    .spgallery-pic5,.spgallery-pic10,.spgallery-pic6,.spgallery-pic11,
    .spexperience-obi4 {
        display: none;
    }

    .gallery1 {
        display: block;
        margin-top: 400px;
        margin-left: 200px;
    }

    .pcscroll-infinity__item8 {
        display: block;
    }

    .spscroll-infinity__item5 {
        display: none;
    }

   
    .gallery-sub {
        font-family: "Noto Sans JP", sans-serif;
        font-size: 3rem;
        font-weight: 700;
        letter-spacing: 3.9px;
        margin-left: 260px;
        margin-top: 10px;
    }

    .gallery-content {
        margin-left: 700px;
        margin-top: 100px;
        
    }

    .gallery-text {
        font-family: "Noto Sans JP", sans-serif;
        font-size: 2.2rem;
        font-weight: 700;
        letter-spacing: 3.08px;
        line-height: 2;
        text-align: center;
        margin-left: -200px;
        margin-top: 100px;
    }

    .gallery-sub3 {
        font-family: "Noto Sans JP", sans-serif;
        font-size: 1.1rem;
        font-weight: 500;
        margin-top: 30px;
        margin-left: -200px;
        line-height: 2.2;
        text-align: center;
    }

    .gallery-pic1 {
        display: block;
        margin-left: -100px;
    }

    .gallery-pic2 {
        display: block;
        margin-left: 800px;
        margin-top: -750px;
    }

    .gallery-pic7 {
        display: block;
        margin-left: 60px;
        position: relative;
        z-index: 10;
        margin-top: -30px;
    }

    .gallery-pic4 {
        display: block;
        margin-left: 730px;
        position: relative;
        z-index: 1;
    }

    .gallery-pic3 {
        display: block;
        margin-top: -770px;
        position: relative;
        z-index: 20;
    }

    .experience-obi4 {
        display: block;
        margin-top: -1100px;
        z-index: 0;
    }

    .gallery-pic8 {
        display: block;
        margin-left: 800px;
        position: relative;
        z-index: 10;
    }

    .gallery-pic5 {
        display: block;
        margin-left: -70px;
        margin-top: 50px;
    }


    .gallery-pic9 {
        display: block;
        margin-top: -150px;
        margin-left: 200px;
    }

    .gallery-pic6 {
        display: block;
        margin-top: -500px;
        margin-left: 430px;
    }

    .gallery-pic11 {
        display: block;
        margin-top: -800px;
        margin-left: 1000px;
    }

    .gallery-pic10 {
        display: block;
        margin-top: -120px;
        margin-left: 980px;
    }

    .belt-rotate5 {
        margin-top: -1100px;
    }
    
}

/* pc769px */
/* =========================
access
=========================== */
.access1 {
    display: none;
}

.access-ph1,.access-ph2 {
    display: none;
}

.access {
    background-image: url(..//images/sphaikei11.png);
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
} 

.spaccess1 {
    margin-top: 220px;
    margin-left: 190px;
}

.access-sub {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    margin-left: -130px;
}

.spaccess-ph1 {
    margin-left: -40px;
    margin-top: -20px;
    display: block;
}

.spaccess-ph2 {
    margin-top: -200px;
    margin-left: 130px;
}

.access-info {
    background-image: url(..//images/sphaikei7.png);
    background-repeat: no-repeat;
    background-position: 100%;
    margin-left: 50px;
}

.acc1 {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 17px; /* 141.667% */
    letter-spacing: 1.8px;
    margin-bottom: 10px;
}

.acc2 {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 17px; /* 106.25% */
    letter-spacing: 2.4px;
    margin-bottom: 10px;
}

.acc3,.acc4,.acc5 {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 17px; /* 154.545% */
    letter-spacing: 1.65px;
    margin-bottom: 10px;
}

.eng1 {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    margin-bottom: 10px;
    margin-top: 14px;
}

.map-links {
    padding: 0 10px;
}

.eng2, .eng3, .eng4 {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    margin-bottom: 10px;
}

.spscroll-infinity__item6 {
    margin-top: -7px;
}

.pcscroll-infinity__item9 {
    display: none;
}

/* .belt-rotate6 img {
    overflow: hidden;
    position: absolute;
} */

.belt-rotate6 {
    overflow: hidden;
    margin-bottom: -100px;
    left: 0; right: 0;
    margin-top: 100px;
    transform: translateY(-50%)rotate(10deg); /* 親を斜めにする */
    transform-origin: center;

} 

.belt-track6 {
    display: flex;
    will-change: transform;
    /* 一定位置まで行ったら戻る（上下にズレない） */
    animation: belt-move 20s linear infinite alternate;
} 

@keyframes belt-move{
from { transform: translateX(0); }
to { transform: translateX(-50%); } /* 中身を2回並べた長さの半分など */
}

.map-map {
    margin-left: 270px;
    margin-top: 20px;
    position: relative;
    z-index: 999;
}

.experience-obi5 {
    display: none;
}

@media screen and (min-width: 769px) {
    .access {
        background-image: url(..//images/Frame\ 233.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 130%;
        z-index: 0;
        margin-top: 100px;
    }

    .pcscroll-infinity__item9 {
        display: block;
        margin-top: 100px;
    }

    .spaccess1,.spaccess-ph1,.spaccess-ph2 {
        display: none;
    }

    .belt-rotate6 {
        margin-top: 500px;
    }

    .access1 {
        display: block;
        margin-left: 900px;
        margin-top: 1300px;
    }

    .map-links {
        margin-bottom: 15px;
    }

    .access-sub {
        font-family: "Noto Sans JP", sans-serif;
        font-size: 3rem;
        font-weight: 700;
        position: absolute;
        right: 240px;
    }

    .access-ph1 {
        display: block;
        margin-left: 70px;
        margin-top: -100px;
    }

    .access-ph2 {
        display: block;
        margin-left: 400px;
        margin-top: -350px;
    }

    .access-info {
        margin-left: 950px;
        margin-top: -800px;
    }

    .acc1 {
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 1.7;
        letter-spacing: 2.25px;
    }

    .acc2 {
        font-size: 2rem;
        font-weight: 400;
        line-height: 1.7; 
        letter-spacing: 3px;
    }

    .acc3,.acc4,.acc5 {
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 1.7; 
        letter-spacing: 2.4px;
    }

    .eng1 {
        font-size: 1.6rem;
        font-weight: 400;
        margin-top: 50px;
    }

    .eng2,.eng3,.eng4 {
        font-size: 1.1rem;
        font-weight: 400;
    }

    .map-map {
        margin-top: 50px;
        margin-left: 1000px;
        font-family: "Noto Sans JP", sans-serif;
        font-size: 1.3rem;
        font-weight: 600;
        line-height: 44.4px;
        letter-spacing: 3px;
    }

    
    .spexperience-obi5 {
        display: none;
    }

    .experience-obi5 {
        display: block;
    }
}

/* pc769px */
/* =========================
info
=========================== */
.spinfohaikei {
    margin-bottom: -450px;
}


.fuwafuwa {
    animation: fuwafuwa 2s ease-in-out infinite alternate;
    display: inline-block;
    transition: 2s ease-in-out;
    margin-top: 50px;
    height: auto;
}

@keyframes fuwafuwa {
0% {
    transform:translate(0, 0) rotate(-6deg);
}
50% {
    transform:translate(0, -6px) rotate(0deg);
}
100% {
    transform:translate(0, 0) rotate(6deg);
}
}

.spinfo1 {
    margin-top: 100px;
    z-index: 10;
    position: relative;
    margin-bottom: 50px;
}

.info1 {
    display: none;
}

.baseshop1 {
    display: none;
    margin-left: -500px;
}

.baseshop {
    position: relative;
    z-index: 10;
    display: inline-block;
    margin-bottom: 30px;
}

.baseline1,.baseline2 {
    display: none;
}

.baseshop-title {
    margin-top: 50px;
}

.spbaseshop1 {
    margin-top: 20px;
    margin-left: -80px;
}

.spbaseline1 {
    margin-top: 30px;
}

.pcinfohaikei  {
    display: none;
}

@media screen and (min-width: 769px) {
    .spinfo1 {
        display: none;
    }

    .spinfohaikei {
        display: none;
    }
    
    .pcinfohaikei {
        display: block;
        margin-top: 200px;
        margin-bottom: -800px;
        margin-left: 250px;
    }

    .info1 {
        display: block;
        margin-top: -50px;
        margin-left: 70px;
        z-index: 10;
        position: relative;
        margin-bottom: 150px;
    }

    .spbaseshop1 {
        display: none;
    }

    .baseshop1 {
        display: block;
        margin-left: px;
    }

    .sns {
        position: relative;
        z-index: 20;
    }

    .sns {
        position: relative;
        z-index: 999;
        pointer-events: auto;
    }

    .sns a {
        position: relative;
        z-index: 1000;
        display: inline-block;
    }

    .instagram {
        margin-top: 50px;
    }

    .X {
        margin-top: 50px;
        margin-left: 20px;
    }

}

/* pc769px */
/* =========================
footer
=========================== */
.footer {
    background-image: url(../images/sphaikei6.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 5px;
   
}

.footer-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 0;
    margin-bottom: 30px;
}

.footer-nav ul {
    display: flex;
    gap: 20px;
    margin-left: -30px;
}

.footer-nav li a:hover {
    color: #FF0;
}

.spinstagram {
    margin-bottom: -30px;
    margin-left: -20px;
}

.spX {
    margin-bottom: -30px;
    margin-left: 10px;
}

.rogo3 {
    display: none;
}

.storedekopin {
    margin-left: 265px;
}

.sprogo3 {
    margin-bottom: -20px;
    
}

.instagram,.X {
    display: none;
}

@media screen and (min-width: 769px) {
    .footer {
        background-image: url(../images/Group\ 136.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        padding: 230px 160px 0;
        position: relative;
    } 

    .sprogo3 {
        display: none;
    }

    .rogo3 {
        display: block;
        margin-top: 100px;
        margin-left: -140px;
    }

    .footer-nav {
        font-size: 1.7rem;
        font-weight: 400;
        letter-spacing: -0.17px;
    }
    
    .footer-nav ul {
        gap: 150px;
        margin-left: -300px;
        margin-top: 30px;
    }

    .sns {
        display: flex;
        margin-bottom: -120px;
        gap: 20px;
        margin-left: 40px;
    }

    .spinstagram,.spX {
        display: none;
    }

    .instagram,.X {
        display: block;
    }

    .storedekopin {
        margin-left: 1000px;
        margin-top: -30px;
        position: absolute;
        right: 10px;
    }

}

@media screen and (min-width: 769px) {
  .wrapper {
    max-width: 1440px;   /* 作ったデザインの幅 */
    margin: 0 auto;      /* 画面の中央に寄せる */
  }
}


/* pc769px */