*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role='list'],ol[role='list']{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}


.noto-sans-<uniquifier> {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
  }
  


.orikaesi{
    white-space: nowrap;
}

#wrapper{
    background-color: #ffffffbd;
    padding: 0 0 100px 0;
    max-width: 1000px;
    margin: 0px auto -50px;
}

body{    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: rgb(63, 63, 63);
    background-image: url(img/cafe.JPG);

    font-family: "Noto Sans", sans-serif;
}





#sp_top{
    display: none;
}


.mv img{
    width: 100%;
    margin: auto;
}

header h1 img{    
    position: fixed;
    top: 40px;
    right: 40px;
    cursor: pointer;
    z-index: 1000;

}

header h1 img:hover {
    filter: drop-shadow(0 0 1rem rgb(255, 255, 255));
}




button{
    background-color: transparent;
    border: none;
    padding: 0;
    display: block;
    background-color: none;
    margin: 30px auto;
    cursor: pointer;
}
button:hover{

filter: drop-shadow(0 0 1rem rgb(255, 255, 255));
}
button img:hover {
    filter: invert(100%) !important;
}

button img{
    width: 480px;

}



#komari{
    padding: 70px 0 0 0;
    width: 100%;
    height: 1194px;
    background-image: url(img/osusume_bg.png);
    background-attachment: static;
    background-size: 120%;
    background-repeat: no-repeat;
  
}

#komari .komoji{
    text-align: center;
    display: block;
    font-size: 20px;
    /* text-align: center; */
    width: 89%;
    /* margin: 51px 0 -10px 0; */
    position: relative;
    top: 34px;
}
#komari .main_catch{
    font-size: 180px;
    color: rgb(255, 255, 255);
}
#komari .main_catch_sub{
    font-size: 80px;
}

#komari .main_catch_under{
    font-size: 109px;
    position: relative;
    top: -21px;
}


.nayanderu{
    top: 100px;
    z-index: 10;
    position: relative;
}

.nayanderu img{
    width: 580px;
}


.nayanderu .kaiketu{
    position: absolute;
    top: -35px;
    left: 20px;

    rotate: -16deg;
}

.nayanderu .kaiketu img{
    width: 247px;

}


.komari_lkakomi h2{
    background-position: 168px 21px;
    background-size: 352px 263px;
    background-repeat: no-repeat;
    background-image: url(img/orage_zabuton.png);
    display: block;
    text-align: right;
    width: 592px;
    margin: 100px auto 0px 294px;
}

.komari_lkakomi .komoji{
    font-size: 10vw;
}


.migigawa_pic{
    z-index: 1;
    top: 1vw;
    position: relative;
    right: 0;
}

p.migigawa_pic img{
    width: 710px;
}

.komari_lkakomi_shita{
    display: flex;
    justify-content: space-between;
    position: relative;
}






figure.mv{
        background-image: url(img/drinksMV.png);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;
        width: 100%;
        min-height: 50px; /* 最低限の高さを設定 */
    }
    
.menu_wrap{
    padding: 50px 0px 50px 0px;
    background-image: url(img/shouhinbg.png);
    /* width: 100%; */
    /* height: auto; */
    /* background-size: 105%; */
    background-repeat: no-repeat;
    position: relative;
}


.menu_cell{

 
    margin:50px auto;
    display: flex;
    justify-content: center;

}






.price {
    flex-shrink: 0;

    margin-left: 20px;
  }
  


  #tokutyou .bg{
    padding: 15px 0 20px 0;
    max-width: 1000px;
    /* height: 120vw; */
    background-color:rgba(255,255,255,0.8);
    background-blend-mode:lighten;
    /* background-image: url(img/tokutyou.png); */
    /* background-size: 115%; */
    background-repeat: no-repeat;
  }

  #tokutyou .content{
  }


  #tokutyou .content h2{
    font-size: 28px;

  }
  #tokutyou .content h3{
    font-size: 150px;
    margin: 40px 0px 30px 30px;
  }

  #tokutyou .content p{
    line-height: 1.8;
    font-size: 18px;
  }


  #tokutyou .content .kyoutyu{
    font-weight: bold;
    font-size: 26px;
}

.tokucho_grp{
    margin: 80px 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center; /* 縦方向に中央揃え */

}

.tokucho_grp img{
    width: 292px;
    flex-shrink: 0;
}

.tokucho_text {
    display: inline-block; /* テキスト幅を維持しつつブロック扱い */
    max-width: 392px;
    vertical-align: middle; /* 中央揃え */
    line-height: 1.5; /* 行間を調整 */
}
p.chousei_1{
    font-size: 17px !important;
    font-weight: bold;
    margin: 0px 0 12px 0;
}
p.chousei_2{
    font-size: 17px !important;

}




#kutimkomi{
    padding: 30px 0 60px 0;
    background-color:rgba(255,255,255,0.8);
background-blend-mode:lighten;
    background-image: url(img/3967952_m.jpg);
    background-size: cover;
    background-position: center;
    width: 100%;

}



#kutimkomi .content{
    width: 800px;
    margin: auto;
}


#kutimkomi .content h2 img{
    margin: 30px auto;
    display: block;

}


.content .coment{
    display: flex;
    justify-content: space-evenly;
    margin: 40px 0;
    position: relative;
}


div.coment dl{
    top: 34px;
    position: relative;
    z-index: 0;
    margin: 0 0 0 20px;
    border-radius: 60px;
    background-color: #d9ff02;
    padding: 25px;
    width: 530px;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
}

div.coment dt{
    z-index: 10;
    font-weight: bold;
    font-size: 26px;
    text-decoration: underline;
    margin: 0 0 18px 0;
}
div.coment dd{
    font-size: 18px;
}

.coment .medatasu{
    font-size: 32px;
    font-weight: bold;
    background-color: white;
}
.coment .face{
    justify-items: stretch;
    width: 300px;
}

.coment .face img{
position: relative;
top: 50px;
}


#herfday{
    padding: 30px 0 0 0;
    /* background-color:rgba(255,255,255,0.8); */
background-blend-mode:lighten;
    background-image: url(img/harfday.png);
    background-size: cover;
    background-position: center;
    width: 100%;

}
#herfday .bg{
    position: relative;
}


#herfday .bg .tyuuigaki{
    text-align: right;
    /* width: 250px; */
    margin: 15px;
}





#herfday .title {
        display: flex; /* 親要素にFlexboxを設定 */
        justify-content: center; /* 水平方向に中央揃え */
        align-items: center; /* 垂直方向に中央揃え */
        height: 100%; /* 必要に応じて高さを設定 */
}

#herfday .title img{
    width: 300px;
    margin: 15px;
}

#herfday .title h2{
    display: block;
    font-size: 80px;
    background-size: 620px 78px;
    background-repeat: no-repeat;
    background-image: url(img/title_zabuton.png);
}



#herfday .sita{
    display: flex;
    justify-content: space-around;
}

.hatijuen{
    z-index: 100;
    position: relative;
    top: -118px;

}
.hatijuen img{
}

p.maru img{
    width: 65vw;
}

p.hangaku img{
    position: absolute;
    rotate: 0deg;
    top: 617px;
    width: 300px;
    right: 250px;
}
p.drinkset img{
    z-index: 44;
    width: 280px;
    position: absolute;
    bottom: 20px;
    left: 20px;
}

#myself H2{
    MARGIN: 50PX auto 9px;
    padding: 8px 0px 5px 0px;
    DISPLAY: BLOCK;
    WIDTH: 238px;
    FONT-SIZE: 48px;
    BACKGROUND-COLOR: #d9ff02;
    TEXT-ALIGN: center;
}

#myself img{
    display: block;
    margin: 7vw auto 1vw;
    width: 450px;
}

#myself h3{
    width: 182px;
    display: block;
    margin: 30px auto 6px;
    font-size: 42px;
}


#myself p.ruby{
    text-align: center;
    font-size: 18px;
    display: block;
    margin: -15px auto 15px;
}

#myself p{
    max-width: 660px;
    margin: auto;
    line-height: 1.8;
    font-size: 18px;
}


footer{
    background-color: #d9ff02;
    width: 100%;
}

footer ul{    list-style-type: none;
    justify-content: center;
    margin: 50px auto;
    padding: 30px 0 0 0;
    display: flex;
}
footer ul li{
padding: 0 15px;
}
footer ul li:first-child {
    padding: 0 15px 0 0; /* 独自のスタイル */
}

/* 最後のli要素 */
footer ul li:last-child {
    padding: 0 0 0 15px; /* 独自のスタイル */
}

footer ul li a{
    text-decoration: none;
    font-size: 18px;
}

footer ul li a:hover {
    background-color: #ffffffb0;
    box-shadow: 0px 0px 11px 8px #ffffffb0;
}



footer img{
    margin: 3vw auto 0;
    display: block;
    width: 100px;
}

footer img:hover{
    filter: drop-shadow(0 0 1rem rgb(255, 255, 255));
}


footer p{
    text-align: center;
    font-size: 16px;
    padding:  15px 0 30px 0;
}


.price{
    font-size: 18px;
    width: 500px;
}
span.nedan{
    font-size: 30px;

}


.price hr{
    border: #656060 solid 1px;
    margin: 0px 0 4px 0;
}


div.menu_cell figure img{
    width: 300px;
    display: block;
}


span.kakkogaki{
    font-size: 14px;
}
.price_zabuton {
    position: relative;
    display: inline-block;
    width: 93px;
    height: 33px;

}

.price_zabuton::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #d9ff02;
    background-size: 7px 6px;
    transform: rotate(-7deg);
    transform-origin: center;
    z-index: -1;
    pointer-events: none;
}

.nedan {
    position: relative;
    z-index: 1; /* 文字を背景より上に */
}



#tokutyou h3{
    z-index: 10;
    position: relative;
}



#tokutyou div.sen{
    top: 165px;
    z-index: -1;
    position: absolute;
    rotate: -6deg;
    display: block;
    width: 600px;
    height: 60px;
    background-color: #d9ff02;
}

#tokutyou div.sen2{
  
    top: 246px;
    z-index: -1;
    position: absolute;
    rotate: -6deg;
    display: block;
    width: 600px;
    height: 50px;
    background-color: #d9ff02;
}



p span.kyoutyu{
    background-color: #d9ff02;
}

.triangle {
     top: 117px;
    left: -49px;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-right: 50px solid #d9ff02;
    border-left: 0;
  }


  div.kutikomi_sen3,div.kutikomi_sen2,div.kutikomi_sen{
    display: none;
    z-index: -1;
    rotate: -4deg;
    position: absolute;
    display: block;
    background-color: #ffffff;
  }

  div.kutikomi_sen{
    display: none;
      top: 158px;
    width: 165px;
    height: 50px;
  }

  div.kutikomi_sen2{
    display: none;
    display: none;
    top: 185px;
    width: 275px;
    height: 54px;
  }

  div.kutikomi_sen3{
    display: none;
    top: 181px;
    width: 244px;
    height: 60px;
    left: 34px;
  }
  #info{
    width: 310px;
    margin: auto auto auto 0;
    display: block;
  }
.info_brock{
    max-width: 1000px;
    margin: auto;
    display: flex;
    justify-content: space-evenly;
}
.info_brock iframe{
    margin: auto;
    justify-content: center;
}


.myself_title{
    padding: 16px 4px;
    width: 330px;
    /* text-align: center; */
    display: block;
    background-color: #d9ff02;
    margin: 3vw auto 1vw;
    font-size: 21px;
}

.other{
    display: block;
    width: 80vw;
    margin: auto;
}

.other h1{
    text-align: center;
    margin: 20px auto;
    /* display: inline-block; */
    padding: 16px;
    background-color: #d9ff02;

}

.other main{text-align: center;}

div.other figure img{
    margin: 30px auto 60px;
    max-width: 100%;
    display: block;
}

.other h2{
    background-color: #ffffff;
    width: 200px;
    padding: 10px 0;
    margin: auto;
}
#point img{
    width: 430px;
}

.other main button a{
    font-size: 26px;
    padding: 15px 80px;
    color: #ffffff;
    background-color: brown;
    border-radius: 4px;
    border-top: groove;
    text-decoration: none;
    border-bottom: outset;
}
.other main button a:visited{
    color: #ffffff;
}

.other main button a:hover{
    background-color: rgb(194, 95, 14);
}




























  /* ▼画面サイズ（横幅）が1000px以下の場合に適用 */
@media screen and (max-width: 1000px) {
#myself p {
    max-width: 450px;
}
.komari_lkakomi h2 {
    width: 67vw;
    margin: 10vw 25vw 0vw 25vw;
}
#komari .komoji {
    font-size: 2vw;
    width: 100%;
    top: 6vw;
}
#komari .main_catch {
    font-size: 18vw;
}
#komari .main_catch_sub {
    font-size: 6VW;
}

    #komari .main_catch_under {
        font-size: 10VW;
        position: relative;
        top: -3VW;
    }
    .komari_lkakomi h2 {
        background-position: 18VW 6VW;
        background-size: 35VW 25VW;
    }
    #komari {
        height: 119VW;
    }
    .price {
        width: 50vw;

 }
}


   /* ▼画面サイズ（横幅）が850px以下の場合に適用 */
@media screen and (max-width: 850px) {
    div.menu_cell figure img {
        display: block;
        margin: auto;
    }
    .menu_cell {
        max-width: 340px;
        display: block;
    }
    .menu_wrap {
        height: auto;
        background-size: 105% 108%;
    }
    .price {
        margin: auto;
        width: 300px;
    }






    .tokucho_grp {
        padding: 0 8vw;
        max-width: 400px;
        margin: 80px auto;
        display: block;
    }
    .tokucho_grp img {
        margin: 4vw auto;
        width: 292px;
    }
    .content .coment {
        max-width: 80vw;
        display: block;
        justify-content: space-evenly;
        margin: 40px auto;
    }
    .coment .face {
        justify-items: stretch;
        max-width: 360px;
        margin: auto;
    }

    div.coment dl {
        margin: auto;
        width: 44vw;
    }
    .triangle {
        rotate: -26deg;
        top: -4vw;
        left: 158px;
        width: auto;
        height: auto;
    }
    div.kutikomi_sen {
        top: 192px;
    }
    div.kutikomi_sen2 {
        top: 209px;
        }
        #herfday .title img {
            max-width: 300px;
            margin: auto;
        }
        #herfday .title {
            text-align: center;
            display: inline-block;
        }
        #herfday .title h2 {
            text-align: center;
            display: inline;
            font-size: 14vw;
            background-size: cover;
        }

        
        #herfday .sita {
            display: block;
        }
        p.drinkset img {
display: none;
        }

        p.hangaku img {
            position: absolute;
            rotate: -8deg;
            top: 81vw;
            width: 50vw;
            right: 24vw;
        }
        #herfday .bg .tyuuigaki {
            padding: 0 0 3vw 0;
            font-size: 1.5vw;
            text-align: right;
            /* width: 250px; */
            margin: 1vw;
        }
        #tokutyou .content h3 {
            font-size: 20vw;
            }
            #tokutyou div.sen {
                top: 17vw;
                width: 83vw;
                height: 14vw;
            }
            #tokutyou div.sen2 {
                top: 34vw;
                z-index: -1;
                position: absolute;
                rotate: -6deg;
                display: block;
                width: 82vw;
                height: 8vw;
            }
            #kutimkomi .content {
                max-width: 98vw;
                margin: auto;
            }
            .hatijuen {
                    top: -13vw;
            }

            #myself img {
                display: block;
                margin: 7vw auto 1vw;
                width: 70vw;
            }

                #myself p {
                    max-width: 80vw;
                }
                .komari_lkakomi h2 {
                    width: 58vw;
                    margin: -2vh 25vw 0vw 25vw;
                }



                .nayanderu .kaiketu {
                    position: absolute;
                    top: -6vw;
                    left: -1vw;
                }
                .nayanderu .kaiketu img {
                    width: 26vw;
                }
                .nayanderu {
                    top: 13vw;
                }
                div.kutikomi_sen3 {
                    top: 25vw;
                    width: 20vw;
                    height: 6vw;
                    left: 9vw;
                }
}

































   /* ▼画面サイズ（横幅）が700px以下の場合に適用 */
   @media screen and (max-width: 700px) {

div.coment dl {
    margin: auto;
    width: 80vw;
}

header h1 img {
    position: fixed;
    top: 2vw;
    right: 2vw;
    width: 20vw;
}






   }












      /* ▼画面サイズ（横幅）が670px以下の場合に適用 */
      @media screen and (max-width: 670px) {




footer ul {
       display: block;
       text-align: center;
        }


        .komari_lkakomi_shita {
            display: block;
        }
        .nayanderu img {
            width: 90vw;
            margin: auto;
        }


        .nayanderu .kaiketu img {
            width: 50vw;
        }

        .nayanderu .kaiketu {
            top: 0vw;
            width: 49vw;
            left: 6vw;
        }
        .nayanderu {
            top: -8vw;
        }
        .migigawa_pic {
            top: -25vw;
        }

        #komari {
            background-position: -41vw;
            width: 100%;
            background-size: 271%;
            height: 270VW;
        }


           .komari_lkakomi h2 {
            width: 65vw;
            margin: -13vw auto 10vw;
            background-position: 3VW 8VW;
            background-size: 60VW 51VW;
        }
    




           #komari .komoji {
            font-size: 4vw;
       
           }
           #komari .main_catch {
            width: 38vw;
            font-size: 28vw;
        }
        #komari .main_catch_under {
            font-size: 15.3VW;
            position: relative;
            top: -3VW;
            filter: drop-shadow(0 0 1rem rgb(255, 255, 255));
        }

        .info_brock{
            text-align: left;
            width: 310px;
            margin: auto;
            display: block;
        }

ul#info{
    text-align: left;
    margin: auto;
}











    }









              /* ▼画面サイズ（横幅）が500px以下の場合に適用 */
   @media screen and (max-width: 500px) {

#top{
    display: none;
} 
#sp_top{

    display: block;
}
#sp_top img{
    width: 100%;
}



   }