/* ==========================================================
   Lesson Page
   東風の占い LESSON専用
========================================================== */

/* ==========================================================
   Lesson typo
========================================================== */
h4{
  text-align: center;
}

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

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

.lesson-detail{
  width:100%;
}

.lesson-price-box{
  width:100%;
  position:sticky;
  top:120px;

  padding:1.4rem;

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

/* ==========================================================
   Lesson Price
========================================================== */
.lesson-price{
  text-align:center;
  line-height:2;
  margin:-1rem auto;
}

.lesson-price span{
  display:block;
  font-size:.85rem;
  color:var(--ew-sub);
}

.lesson-note{
  margin-top:1.5rem;
  font-size:.8rem !important;
  line-height:1.7;
  color:#666;
  text-align:left;
}

/* ==========================================================
   Gift
========================================================== */
.lesson-gift{
  margin-top:1.5rem;
  padding:0.75rem;

  border-left:4px solid #82ae46;
  border-radius:8px;
  background:#f8fbf5;
}

.lesson-gift h5{
  margin:0 auto .5rem;
  text-align:center;
  font-size:1rem;
  letter-spacing:.12em;
  color:#250d00;
}

.lesson-gift p{
  margin:0;
  font-size:.9rem;
  line-height:1.8;
  text-align:center;
}

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

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

  .lesson-item{
    grid-template-columns:1fr;
    gap:1.5rem;

    width:100%;
    max-width:88%;
    margin:3rem auto;
  }

  .lesson-price-box{
    position:static;
    padding:1.2rem;
  }

  .lesson-divider{
    max-width:88%;
  }

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

}