@charset "utf-8";

/*=======================================================
==========================================================
　　　　　　　　　　　　　MAIN CSS
==========================================================
========================================================*/
header {
  margin: 0;
}
.inner {
    max-width: 1400px;
}

ul.list-waku{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 9rem 8%;
}
ul.list-waku li{
  width:46%;
}
ul.list-waku li .list-waku-img{
  position:relative;
}

ul.list-waku li .list-waku-img::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-image: url(../img/waku.png);
  background-size: 100% 100%;
  aspect-ratio: 6 / 4;
}

ul.list-waku li .list-waku-img img{
  display: block;
  position:relative;
  width: 100%;
  height: 320px;
  padding: 2%;
  object-fit: cover;
}
ul.list-waku li h3 {
    font-size: 2rem;
    font-weight: normal;
    text-align: center;
    margin: 1.5em 0 .8em;
}


/* list-waku-02 内に li が1つもしくは2つの時、中央寄せ */
ul.list-waku-02:not(:has(li:nth-child(3))) {
  justify-content: center;
}

/* list-waku-02 内に li が1つだけの時、中央寄せ */
/*ul.list-waku-02 li:only-child {
  margin-left: auto;
  margin-right: auto;
}*/
.salon-p-box{
  padding:0 3em;
}
.price-box{
  display: flex;
  justify-content: space-between;
  margin: 1em 0 0;
  align-items: flex-end;
}
.price{
  font-size: 2rem;
  letter-spacing: normal;
  margin:0;
}
.price-right{
  font-size: 1.6rem;
  margin:0;
}
.price-right span{
  font-size:1.4rem;
  margin-left: .5em;
}

/*商品*/
ul.list-waku-02{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 9rem 3.5%;
}
ul.list-waku-02 li{
  width:31%;
}


.salon-menu-box-01{
  margin:0 0 10rem;
}
.menu-h2{
  color:#FDC600;
  background-color:#530B02;
  font-size: 2.5rem;
  font-weight:normal;
  text-align: center;
  padding:.4em 1em;
  margin:2em 0 1.5em;
}
.plin-p{
  width:95%;
  margin:0 auto 2em;
  font-size:1.6rem;
}

.drink-box{
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap:8rem;
}
.drink-box .list-waku{
  width:31%;
}
.drink-box .list-waku li{
  width:100%;
}


.drink-ul{
  width:40%;
}
ul.drink-ul h3 {
  font-size: 2rem;
  font-weight: normal;
  text-align: left;
  margin: 0 0 0;
}
.drink-ul .salon-p-box{
  border-bottom: 1px solid #D1AF97;
  padding: 2em 2em;
}
.drink-ul .price-box {
  justify-content: flex-end;
  margin: 0;
}
.drink-ul .price-box .price{
  margin-right:1em;
  font-size: 1.5rem;
}
.dri-p{
  margin: .4em 0;
}
.last-p{
  border: 3px solid #FDC600;
  background-color: #530B02;
  color:#fff;
  padding:1em 2em;
  font-size:1.7rem;
  text-align: center;
  border-radius:100px;
}

.salon-p-box > p span{
  display: block;
  font-size:1.65rem;
  margin:2em 0 .2em;
}



/*=======================================================
==========================================================
  　　　　　　　　　　　　SP only
==========================================================
========================================================*/
@media screen and (max-width:768px) {
main#main {
  margin-top: 62px;
}

ul.list-waku {
  flex-direction: column;
  gap: 5rem 0;
}
ul.list-waku li {
    width: 100%;
}
.salon-p-box {
  padding: 0 2em;
}
ul.list-waku-02 {
  flex-direction: column;
  gap: 5rem 0;
}
ul.list-waku-02 li {
  width: 100%;
}
ul.list-waku li h3{
  margin: 1.2em 0 .8em;
  text-align: center;
}





.drink-box {
  display: flex;
  flex-direction: column;
}
.drink-box .list-waku {
  width: 100%;
}
.drink-ul {
  width: 100%;
}
.drink-ul .salon-p-box {
    padding: 2em 1em;
}
.salon-menu-box-01 {
    margin: 0 0 7rem;
}










}/*====================================================
  　　　　　　　　　　　　さらに細かく480以下
=======================================================*/
@media screen and (max-width:480px) {

}/*=======================================================
==========================================================
  　　　　　　　　　　　　Ipad only
==========================================================
========================================================*/
@media screen and (min-width:768px) and ( max-width:1190px) {


}/*=======================================================
==========================================================
==========================================================
========================================================*/