@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;400;500&display=swap');

html{

  background-color:#3C3C3C;

  font-family:"Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Noto Serif JP", serif;

    background-image: url(../img/bg.webp);





        background-size: 100%;

        background-attachment: fixed;}



body{

  width:900px;

  margin:0 auto;

  background-color:#EBEBEB;

}



p {

  color:#232323;

  margin:1rem auto;

  font-size: 14px;

  text-align: left;

  letter-spacing: 1px;

    transform: rotate(0.028deg);

    -o-transform: rotate(0.028deg);

    -ms-transform: rotate(0.028deg);

    -moz-transform: rotate(0.028deg);

    -webkit-transform: rotate(0.028deg);

}



.intro{

  width: 600px;

  margin: 0 auto;

}



.chui{

line-height: 14px;

}







h4{

  text-align: center;

  letter-spacing: 1px;

  padding: 1rem;

  border: 1px solid #AAA;

    display: table;

    margin: 2rem auto;

}



h5{

  text-align: center;

  margin: 1rem;

  letter-spacing: 1px;

  font-size: 1rem;

}



.map iframe{



    margin: 0 auto;

    display: block;

}



.intro_p{

  font-size: 27px;

}



.car_p{

}



.car_p ul{

  width: 80%;

}



.car_p li{

  width: 47%;

}





li img{

  width: 100%;

}





.sp_header{

  display: none;

}





.pc_header{

  display: block;

}



.novelty{



    width: 600px;

    margin: 0 auto;

    display: block;

}





h2{



  font-weight: 300;

  font-size: 16px;

  border-bottom: 1px solid #000;

  width: 75%;

  display: block;

  padding-bottom: 0.5rem;

font-weight: 600;

font-size: 16px;

line-height: 24px;

margin: 0 auto;

}



.chui{

font-size: 11px;

line-height: 15px;

}



p.mix{



font-size: 10px;

margin: 0;

}



section.menu{

  padding: 1rem;

  width: 90%;

  margin:0 auto;

  background: #FAFAFA;

box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);

border-radius: 4px;

    margin-bottom: 1rem;

}





.post img{

  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);



}



footer p{

  text-align: center;

}



.tenpo{

  font-size: 13px;

}



.post li{    flex: 1;

    flex-basis: 20%;

    max-width: 140px;

    padding: 2px;

}

ul.togo li{

    flex-basis: 30%;

    max-width: 200px;

    padding: 3px;

}

.post{

  display: flex;

  flex-wrap: wrap;

  width: 100%;

    justify-content: center;

  margin-bottom: 0;

}



.post li{

}



section p,section h2,section h3{

  text-align:center;

}



section h3{

  margin: 0;

font-size: 16px;

line-height: 24px;

}



section p.description{

  margin-top:0.5rem;

  margin-bottom:0.5rem;

  text-align: left;

}



.nezuko_serif{



    font-family: Noto serif TC;

    color: inherit!important;

    padding-left: 0!important;

    font-weight: normal;

}



.drink{

  width:500px;

border: 1px solid #A9A9A9;

border-radius: 5px;

padding: 1rem;

margin: 0 auto;

}



ul{

  padding-left: 0;

  display: flex;

  list-style-type: none;

  justify-content: space-around;

  margin:1rem auto;

}



.kuji_select input:hover{

  opacity: 0.8;

  	transition : all 300ms;

  }



a:hover{

  opacity: 0.8;

  	transition : all 300ms;

}

.navigation ul{

  width: 90%

}



.navigate ul li{

  width: 30%;

}

.navigate ul li img{

  width: 100%;

}

header img{

  width:100%;

}



.navigate img{

  border: 1px solid #555;

}



nav ul{

  width: 95%;

  flex-wrap: wrap;

}

nav ul li{

  width: 45%;

  margin-bottom: 1rem;

}



.machiasobi{

  border: 1px solid #333;

  padding: 1rem;

  text-align: center;

}



.shikishi_section{

  background-color: #EEEEEE;

  width: 95%;

  padding-top: 2rem;

  border: 1px solid;

  margin:0 auto;

  margin-bottom: 1.5rem;

}

.cart{

  width: 900px;

  margin: 0 auto;

}

.cart li {

  width: 380px

}



li p {

  width: 100%;

}



.cart li img{

  border: 1px solid #CCC;

}

.cart{

  background-color: white;

  padding: 1rem;

  -webkit-filter: drop-shadow(0px 0px 4px rgba(0,0,0,.25));

  filter: drop-shadow(0px 0px 4px rgba(0,0,0,.25));

  margin-bottom: 2rem;

}



.buy_box h3{

  text-align: center;

  font-size: 1rem;

  border-bottom: 1px solid #232323;

  padding-bottom: 0.5rem;

  margin-top: 0;

}

.delivery_est{

  margin-bottom: 10px!important;

}

.delivery_est span{

  font-size: 0.75rem;

  color: #ff5858;

}



.buy_box p{

  margin: 0;

  font-size: 0.9rem;

}



.payment_img{

  margin-top:5px;

  width: 80%;

}



.payment_brand p{

  font-size: 0.6rem;

  font-family: sans-serif;

  letter-spacing: 0;

}



.kuji_select input{

    background-color: #ff6d07;

    border: none;

  width: 250px;

    box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 15%);

    opacity: 1;

    transition: .2s;

    color: white;

    cursor: pointer;

    text-align: center;

    vertical-align: middle;

    display: inline-block;

    font-weight: 400;

    padding: 0.375rem 0.75rem;

    font-size: 1rem;

    line-height: 1.5;

    border-radius: 0.25rem;

}



form{

  padding-top: 0.75rem;

}



form select{

  display: inline-block;

width: 70px;

height: calc(1.5em + 0.75rem + 2px);

padding: 0.375rem 0.75rem;

font-size: 1rem;

font-weight: 400;

line-height: 1.5;

color: #495057;

background-color: #fff;

vertical-align: middle;

background-clip: padding-box;

border: 1px solid #ced4da;

border-radius: 0.25rem;

transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;



}



.login{

  color: #AF1818;

  font-family: sans-serif;

  font-weight: bold;

  text-align: center;

  font-size: 0.8rem!important;

  padding-top:5px;



}



.shikishi_intro{

  width: 90%;

  flex-wrap: wrap;

}

.shikishi_intro li{

  width: 30%;

  margin-bottom: 1rem;

}



.shikishi_intro img{



  -webkit-filter: drop-shadow(0px 0px 4px rgba(0,0,0,.25));

  filter: drop-shadow(0px 0px 4px rgba(0,0,0,.25));

}



.shikishi_intro p{

  padding: 0.35rem 0;

  background-color: white;

  text-align: center;

  font-weight: bold;

  font-size: 1.1rem;

  border: 1px solid #AEAEAE;

  margin-bottom: 0.7rem;

  width: 100%;

  margin-top:0;

  line-height: 1.2;

}



.author span{

  font-size: 0.8rem;

}



a:visited{

  color: inherit;

}

.chuijikou{

  width: 90%;

  margin: 0 auto;

  border:1px solid #000;

}



.chuijikou h3{

  display: block;

  padding: 0.85rem;

  border-bottom: 1px solid #000;

  width: 300px;

  margin: 0 auto;

  text-align: center;

}



#page_top{

  width: 50px;

  height: 50px;

  position: fixed;

  right: 20px;

  bottom: 20px;

  background: #666;

  opacity: 0.6;

  border-radius: 50%;

}

#page_top a{

  position: relative;

  display: block;

  width: 50px;

  height: 50px;

  text-decoration: none;

}

#page_top a::before{

  font-family: 'Font Awesome 5 Free';

  font-weight: 900;

  content: '\f106';

  font-size: 25px;

  color: white;

  position: absolute;

  width: 25px;

  height: 25px;

  top: -5px;

  bottom: 0;

  right: 0;

  left: 0;

  margin: auto;

  text-align: center;

}



footer{

  margin-top:2rem;

  background-color: #777;

  color: white;

  padding: 1rem;

}



footer ul{

  display: block;

  flex-wrap: wrap;

}



footer a{

  text-align: center;

  display: block;

  letter-spacing: 2px;

  text-decoration: none;

  color: white;

  margin: 5px;

}