@charset "utf-8";
/*===========
header
=============*/

.header{
    z-index: 999;
    position: fixed;
    width: 100%;
    background-image: url(../images/bg-yellow-sp.svg);
    background-repeat: no-repeat;
    background-size: cover;
}

@media screen and (min-width:769px) {
    .header{
        background-image: url(../images/bg-yellow-pc.svg);
        border-top: none;
    }
}


/*===========
top
=============*/
.section__top{
    padding: 257px  4.2% 30px ;
    position: relative;
    background-color: var(--primary-offwhite);
    overflow: hidden;
}

/*====下層ページ共通のDJエリア====*/
.record__area{
    position: absolute;
    top: 0;
    right: 4%;
    overflow: hidden;
    z-index: 2;
}


.record__box{
    width: 228px;
    height: 390px;
    position: relative;
}

.record__arm{
    width: 75%;
    height: auto;
    position: absolute;
    right: 0%;
    top: 48%;
    z-index: 5;
}

/*回転animation*/
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotate {
  animation: rotate 12s infinite linear;
}

@media screen and (min-width:769px) {
    .section__top{
        padding:  336px  12.5% 0;
    }

    .record__area{
        position: absolute;
        top: -2%;
        right: 4%;
        overflow: hidden;
    }
    
    .record__box{
        width: 34.3vw;
        height: 845px;
        position: relative;
    }

    .record__arm{
        width: 78%;
        height: auto;
        position: absolute;
        right: 0%;
        top: 29vw;
        z-index: 5;
    }
}/*pc769px*/

@media screen and (min-width:1400px) {
    .record__arm{
        width: 78%;
        height: auto;
        position: absolute;
        right: 0%;
        top: 26vw;
        z-index: 5;
    }
}


/*=======top=========*/
.question__ttlbox{
    width: 75.2%;
    max-width: 300px;
    height: auto;
    margin: -165px auto 49px;
}

.q-main-ttlmg-sp{
    width: 72.8%;
    height: auto;
    margin-left: -23%;
}

.q-main-ttlmg-pc{
    display: none;
}

.q-main-ttl{
    color: #231815;
    text-align: center;
    font-family: "IBM Plex Sans JP";
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.25; /* 125% */
    border-radius: 16px;
    border: 2px solid #231815;
    background: #FBFBFB;
    box-shadow: 8px 8px 0px 0px #452F29;
    padding: 28px 6px;
    margin: -32px auto 0;
    width: 80%;
}

@media screen and (min-width:769px) {
    .question__ttlbox{
        width: 61.5%;
        max-width: 390px;
        height: auto;
        margin: -352px auto 142px;
    }
    
    .q-main-ttlmg-sp{
        display: none;
    }
    
    .q-main-ttlmg-pc {
        display: block;
        width: 100%;
        margin-left: -25%;
        max-width: 320px;
        position: relative;
    }
    
    
    .q-main-ttl {
        font-size: 2.8rem;
        padding: 80px 50px;
        margin: -100px 0 0 auto;
        width: 100%;
        max-width: 280px;
    }

    

    .q-main-ttlmg-pc::before{
        display: inline-block;
        content: '';
        background-image: url(../images/qa-ttl-mitake-pc.svg);
        background-repeat: no-repeat;
        background-size: contain;
        width: 59%;
        height: 27vw;
        bottom: -51vw;
        left: 0%;
        position: inherit;
    }
}/*pc769px*/

@media screen and (min-width:1100px) {
    .q-main-ttlmg-pc{
        display: block;
        width: 100%;
        margin-left: -52%;
        max-width: 367px;
        position: relative;
    }

    .q-main-ttl{
        font-size: 4.8rem;
        padding: 113px 40px 98px;
        margin: -100px 0 0 auto;
        max-width: 390px;/*64.8%*/
    }

    .q-main-ttlmg-pc::before{
        display: inline-block;
        content: '';
        background-image: url(../images/qa-ttl-mitake-pc.svg);
        background-repeat: no-repeat;
        background-size: contain;
        width: 59%;
        height: 24vw;
        bottom: -42vw;
        left: 0%;
        position: inherit;
    }
}

/*=============================
top
===============================*/
.section__question__box{
    padding: 15px 4.2% 26px;
}
/*お店について*/
.about{
    width: 100%;
    max-width: 650px;
    height: auto;
    margin: 15px auto 0;
}

.about:first-of-type{
   margin-top: 0;
}

.q-ttl{
    width: 70.2%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.q-box{
    padding: 47px 12px 41px;
    background-image: url(../images/q-shop-bg-sp.webp);
    border: solid 2px #231815;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: -50%;
    display: inline-block;
}

.q-menu-box{
    background-image: url(../images/q-menu-bg-sp.webp);
}

.q-event-box{
    background-image: url(../images/q-event-bg-sp.webp);
}
.qa-item{
    padding: 16px 10px;
    border-radius: 16px;
    background-color: #FBFBFB;
    margin-top: 16px;
}

.question{
    color: #231815;
    font-family: "IBM Plex Sans JP";
    font-size: 1.8rem;
    font-weight: 900;
    cursor: pointer;
    transition: back;
}

.answer{
    margin-top: 10px;
    color: #231815;
    font-family: "IBM Plex Sans JP";
    font-size: 1.6rem;
    font-weight: 500;
}


.shop__mitake{
    width: 100%;
    max-width: 120px;
    display: block;
    transform: rotate(-4.6deg);
    margin: 26px 0 0 auto;
/*ゆらゆらさせる*/
    transform-origin: bottom center;
    animation: yurayura 2s linear infinite;
}

    @keyframes yurayura {
        0% , 100%{
            transform: rotate(8deg);
        }
        50%{
            transform: rotate(-8deg);
        }
    }

    /*回転animation*/
    @keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
    }

    .rotate {
    animation: rotate 12s infinite linear;
    }


.about-shop{
    position: relative;
}

.about-shop::after{
    content: '';
    display: inline-block;
    background-image: url(../images/qa-ttl-hatena.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 24%;
    height: 20vw;
    top: -15px;
    right: 0%;
    position: absolute;
}

.menu__mitake{
    width: 49%;
    display: block;
    margin: 13px auto 0 0;
    padding-left: 31px;
}


.event__hatena{
    width: 18%;
    display: block;
    margin: 26px 0 0 auto;
    animation: bounce 1.4s ease infinite; /* ぽよんと弾むアニメーションを無限に繰り返す */
}

    /* ぽよんと弾むアニメーションの設定 */
    @keyframes bounce {
    0% {
        transform: translateY(0) scale(1); /* 通常の位置とサイズ */
    }
    30% {
        transform: translateY(-50px) scale(1.1); /* 少し上にジャンプして大きくなる */
    }
    50% {
        transform: translateY(0) scale(0.8); /* 元の位置に戻りつつ縮む */
    }
    70% {
        transform: translateY(-25px) scale(1.1); /* 小さくジャンプして大きくなる */
    }
    100% {
        transform: translateY(0) scale(1); /* 元のサイズと位置に戻る */
    }
    }
/*=====ここからPCここからPC=======*/
@media screen and (min-width:769px) {
    .section__question__box{
        padding: 64px 4.2% 0;
    }

    /*お店について*/
    .about{
        width: 100%;
        max-width: 900px;
        height: auto;
        margin: 15px auto 0;
    }
    
    .about:first-of-type{
        margin-top: 0;
     }
     
     .q-ttl{
         width: 70.2%;
         margin: 0 auto;
         display: flex;
         justify-content: center;
     }
     
     .q-box{
         padding: 112px 40px;
         background-image: url(../images/q-shop-bg-pc.webp);
         border: solid 2px #231815;
         background-repeat: no-repeat;
         background-size: cover;
         margin-top: -44%;
         display: inline-block;
         width: 100%;
     }
     
     .q-menu-box{
         background-image: url(../images/q-menu-bg-pc.webp);
     }
     
     .q-event-box{
         background-image: url(../images/q-event-bg-pc.webp);
     }
     
     .qa-item{
         padding: 16px 40px;
         border-radius: 16px;
         background-color: #FBFBFB;
         margin-top: 40px;
     }
    

     .shop__mitake{
        width: 100%;
        max-width: 180px;
        display: block;
        transform: rotate(-4.6deg);
        margin: 26px 0 0 auto;
    /*ゆらゆらさせる*/
        transform-origin: bottom center;
        animation: yurayura 2s linear infinite;
    }

    .menu__mitake{
        width: 49%;
        display: block;
        margin: 40px auto 0 0;
        padding-left: 31px;
    }
    

    .event__hatena{
        width: 20%;
        margin-top: 42px;
    }
    
    .question{
        font-size: 2.4rem;
    }
    
    .answer{
        margin: 10px 24px 0;
        font-size: 2.2rem;
    }

}


/*=============================
アイテムたち
===============================*/
.question__items{
    padding: 26px 0 64px;
}

.contact__btnSet{
    margin: 0 auto;
}

.contact__txt{
    color: #231815;
    text-align: center;
    font-family: "IBM Plex Sans JP";
    font-size: 1.6rem;
    font-weight: 500;
}

/* ここからボタン*/
.btn{
    display: flex;
    margin: 0 auto;
    width: 243px;
    height: 69px;
    padding: 8px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 16px;
    border: 2px solid var(--primary-Black);
    background:var(--primary-white);
    box-shadow: 4px 4px 0px 0px var(--primary-Black);
    color: #220E05;
    font-family: Montserrat;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.5; /* 155% */
    transition: 0.4s;
    position: relative;
    margin-top: 3px;
}

.btn::after{
    display: block;
    content:'' ;
    width: 40px;
    height: 57px;
    background-image: url(../images/arrow-btn-sp.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    z-index: 3;
}

.btn:hover{
    opacity: 0.5;
}


/*======回転するみたけ君いらっしゃいませ=====*/
.rotate__cont{
    position: relative;
    width: 240px;
    height: 240px;
    margin:84px auto 0;
}
.rotate__inner-mitake{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 1;/* 読み上げ機能などに反応するように円より上に配置するため */
}
.rotate__float{
    animation: rotate 12s infinite linear;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/*レスポンシブ*/
@media screen and (min-width:769px) {
    .question__items {
        display: flex;
        flex-direction: row-reverse;
        align-items: flex-end;
        justify-content: space-between;
        gap: 106px;
        max-width: 880px;
        margin: 0 auto;
}

    .contact__btnSet{
        margin: 0 0 0 auto;
    }
    
    .contact__txt{
        font-size: 2rem;
    }


    /* ここからボタン*/
    .btn{
        width: 310px;
        height: 69px;
    }

    /*======回転するみたけ君いらっしゃいませ=====*/
    .rotate__cont{
        position: relative;
        width: 288px;
        height: 288px;
        margin:0 auto 0;
    }
}

@media screen and (min-width: 769px) {
    .footer {
        border-top: none;
    }
}