@charset "UTF-8";

/* ===============================
   成人式５つのプラン
=============================== */

.seijin-plan-list{
  max-width:100%;
  margin:0 auto;

  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;

  padding:0 10px;
  box-sizing:border-box;
}

/* 上2枚・下3枚の指定解除 */
.seijin-plan-top,
.seijin-plan-bottom{
  display:contents;
}

/* 画像 */
.seijin-plan-img{
  width:100%;
  display:block;

  border-radius:10px;
}



/* ▼スマホ▼ */
@media screen and (max-width:768px){

  .seijin-plan-section{
    padding:35px 0;
    text-align:center;
  }

  /* 一覧 */
  .seijin-plan-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:0 8px;
  }

  /* 下3枚 */
  .seijin-plan-bottom{
    grid-column:1 / -1;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  /* 画像 */
  .seijin-plan-img{
    width:100%;
    display:block;
  }

  /* 最後の画像 */
  .seijin-plan-bottom img:last-child{
    grid-column:1 / 3;
    width:50%;
    margin:0 auto;
  }

}




/* ===============================
   空き状況
=============================== */

.reserve-section{
  background:#fdf6f9;
  padding:80px 20px;
  text-align:center;
}

/* 横並び全体 */
.reserve-line{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
  margin-top:40px;
}

/* 1枠 */
.reserve-item{
  background:#fff;
  border:2px solid #7a6a5f;
  border-radius:10px;

  width:110px;
  padding:14px 10px;

  display:flex;
  flex-direction:column;
  align-items:center;
}

/* 時間 */
.time{
  font-size:28px;
  color:#5d4b43;
  font-family:'Zen Maru Gothic', sans-serif;
  line-height:1;
}

/* ○ー */
.status{
  margin-top:10px;
  font-size:38px;
  font-weight:700;
  line-height:1;
}

.ok{
  color:#ff5b8a;
}

.ng{
  color:#999;
}

/* 注釈 */
.reserve-note{
  margin-top:25px;
  font-size:16px;
  color:#5d4b43;
  font-family:'Zen Maru Gothic', sans-serif;
}

/* ▼スマホ▼ */
@media screen and (max-width:768px){

  .reserve-section{
    padding:50px 10px;
  }

  .reserve-line{
    gap:8px;
    margin-top:25px;
  }

  .reserve-item{
    width:68px;
    padding:10px 4px;
  }

  .time{
    font-size:18px;
  }

  .status{
    font-size:26px;
    margin-top:6px;
  }

  .reserve-note{
    font-size:12px;
  }

}





/* ===============================
   キャンペーン価格
=============================== */

.plan-price-wrap{
  position:relative;
}

/* バッジ */
.campaign-badge{
  position:absolute;
  bottom:80px;
  left:50%;
  transform:translateX(-50%);
  font-size:14px;
  color:#fff;
  background:#f19db9;   /* ←背景色 */
  padding:6px 16px;
  border-radius:50px;
  white-space:nowrap;
  font-family:'Zen Maru Gothic', sans-serif;
}

/* 値段全体 */
.plan-price{
  position:absolute;
  bottom:38px;
  left:50%;
  transform:translateX(-50%);
  margin:0;
  font-family:'Zen Maru Gothic', sans-serif;
  white-space:nowrap;
  line-height:1;
}

/* 元の値段 */
.price-old{
  position:relative;
  display:inline-block;
  font-size:22px;
  color:#534741;
  margin-right:6px;
  letter-spacing:-0.1em; /* ←文字間詰める */
}

/* 斜め線 */
.price-old::after{
  content:"";
  position:absolute;
  left:-2px;
  top:50%;
  width:100%;
  height:1.5px;
  background:#888; /* ←グレー */
  transform:rotate(-8deg);
  transform-origin:center;
}

/* 新価格 */
.price-new{
  font-size:42px;
  font-weight:500;
  color:#ff2a00;
  letter-spacing:-0.16em; /* ←文字間詰める */
}

/* 円 */
.price-new span{
  font-size:24px;
}




/* ▼スマホ▼*/
@media screen and (max-width:768px){

  /* バッジ */
  .campaign-badge{
    bottom:52px;
    font-size:10px;
    padding:4px 10px;
    border-radius:30px;
  }

  /* 値段全体 */
  .plan-price{
    bottom:18px;
  }

  /* 元値 */
  .price-old{
    font-size:12px;
    margin-right:4px;
  }

  /* 新価格 */
  .price-new{
    font-size:22px;
  }

  /* 円 */
  .price-new span{
    font-size:13px;
  }

}