/* ==========================================================
   Menu Page
   東風の占い MENU専用
========================================================== */


/* ==========================================================
   Introduction
========================================================== */
.menu-intro{
  margin:0 auto 3rem;
  text-align:center;
}

.menu-intro-text{
  max-width:700px;
  margin:1rem auto;
  line-height:2;
  text-align: left;
}

/* ==========================================================
   Menu Layout
========================================================== */
.menu-item{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 340px;
  gap:4rem;
  align-items:start;

  width:100%;
  max-width:1100px;
  margin:4rem auto;
}

.menu-detail{
  width:100%;
}

.menu-detail ul{
  line-height:2;
}

.menu-price-box{
  width:100%;
  position:sticky;
  top:5vh;

  padding:1.2rem;

  border:1px solid var(--ew-line);
  border-radius:10px;
  background:#faf9f7;
}

/* ==========================================================
   Price
========================================================== */
.menu-price{
  text-align:center;
  line-height:2;
}

.menu-note,
span.menu-note,
p.menu-note{
  display:block;

  margin: 0.1rem auto;
  padding-bottom: 0.3rem;

  font-size:0.85rem !important;
  line-height:1.5;
  letter-spacing: 0.08rem;
  color:#666;
}

.price-note{
  display:block;
  margin:0.25rem auto 0.3rem;

  font-size:0.8rem;
  color:var(--ew-sub);
  line-height:1.6;
  text-align:center;
}

/* ==========================================================
   Divider
========================================================== */
.menu-divider{
  border:0;
  border-top:1px solid var(--ew-line);
  margin:2rem auto;
}

.menu-sub-divider{
  margin:1rem 0;
  border:0;
  border-top:1px solid var(--ew-line);
}

/* ---- Typography: Menu only ----*/
.page-menu h4{
  font-size: 1.5rem;
  text-align:center;
  padding-bottom:0.2rem;
  letter-spacing:0.2rem;
  font-weight: 600;
}

.page-menu h5{
  font-size:1.2rem;
  text-align:center;
  letter-spacing:0.1rem;
  font-weight: 500;
}

.page-menu h6{
  font-size: 1.2rem;
  text-align: center;
  margin-top: 1rem;
}

/*---- Travel ----*/
.travel-pc{
  display:block;
}

.travel-pc img{
  display:block;
  width:100%;
  max-width:900px;
  height:auto;
  margin:0 auto;
}

.travel-sp{
  display:none;
}

.travel-table{
  width:100%;
  border-collapse:collapse;
}

.travel-table td{
  padding:0.8rem 0.5rem;
  border-bottom:1px solid var(--ew-line);
  vertical-align:middle;
}

.travel-table td:last-child{
  text-align:right;
  white-space:nowrap;
}

.travel-note{
  margin-top:1rem;
  font-size:.85rem;
  line-height:1.7;
  color:var(--ew-sub);
}

/*---- payment ----*/
.payment{
  max-width:480px;
  margin:2rem auto;
  text-align:center;
}

.payment-box{
  margin-top:1rem;
  padding: 1rem auto;

  border:1px solid var(--ew-line);
  border-radius:10px;

  background:#faf9f7;
}

.payment-list{
  margin: 0.5rem auto 1rem;

  list-style:none;
  padding:0;
}

.payment-list li{
  padding:.25rem 0;
}

.payment-note{
  display:block;

  margin: 0.75rem auto;
  padding-top: 0.75rem;

  font-size:0.85rem !important;
  line-height:1.5;
  letter-spacing: 0.08rem;
  color:#666;
  text-align: left;
}

/* ==========================================================
   SP
========================================================== */
@media(max-width:768px){

  .menu-item{
    grid-template-columns:1fr;
    gap:1rem;
    margin:3rem auto;
  }

  .menu-detail{
    padding-right:0;
  }

  .menu-price-box{
    position:static;
  }

.menu-price{
  text-align:center;
  line-height:2;
}

/* SP Price table */
.menu-price,
.menu-price p,
.menu-price span,
.menu-price-box p,
.price-note,
.menu-note{
  text-align:center !important;
}

  .travel-pc{
    display:none;
  }

  .travel-sp{
    display:block;
  }

}