/* ============================
   マンスリーページ（price-m）v2
   ============================ */
.price-m {
  font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
  max-width: 1100px;
  margin: 0 auto;
  color: #333;
}

.lineup-box {
  background: #EEE;
  padding: 30px;
  border-radius: 10px;
  margin-bottom: 50px;
}

.price-m h3 {
  font-size: 150%;
  margin-top: 0;
  font-weight: 900;
  color: #003873;
  border-left: 10px solid #019ac6;
  padding-left: 8px;
  background: #FFF;
}

.price-m h5 {
  background: #C10000;
  color: #FFF;
  font-size: 16px;
  font-weight: bold;
  padding: 3px 12px;
  border-radius: 20px;
  display: inline-block;
  width: auto;
  margin-top: 0;
  margin-right: 10px;
}

/* ヘッダー部分 */
.price-m .price-m-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.price-m .price-m-photo {
  flex: 1;
  text-align: center;
}
.price-m .price-m-photo img {
  max-width: 450px;
}
.price-m .price-m-photo .caption {
  display: block;
  font-size: 12px;
  color: #666;
}

.price-m .price-m-info {
  flex: 1;
  padding-left: 20px;
}
.price-m .car-type {
  font-size: 20px;
  border-bottom: 1px solid #999;
  padding-bottom: 5px;
  font-weight: 900;
}

/* プラン全体 */
.price-m .price-m-plans {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 20px 0;
}
.price-m .plan-box {
  flex: 1;
  position: relative; /* アイコン配置の基準 */
  background: #FFF;
  border-radius: 0 0 7px 7px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* プラン見出し */
.price-m .plan-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 8px 12px;
  font-size: 1rem;
  color: #fff;
  line-height: 1.2;
}

.price-m .plan-box .icon {
  position: absolute;
  /*top: -9px;        /* 帯の左上から少し下げる */
  left: -10px;      /* 左にはみ出す */
  transform: none;
  width: 80px;
  height: 80px;
  z-index: 2;
}

.price-m .plan-title .label {
  margin-left: 65px;
  display: flex;
  align-items: center;
  font-weight: bold;
}

.price-m .plan-title .date {
  padding: 4px 8px;
  font-size: 0.9rem;
  background: #fff;
  color: #333;
  white-space: nowrap;
}

/* プラン色分け（全てマンスリー） 
.price-m .monthly .plan-title {
  background: #247B3A;
}
.price-m .monthly .plan-title .date {
  background: #8ddea2;
}*/

/* ============================
   マンスリープラン色分け
   ============================ */

/* 1ヶ月 */
.price-m .monthly-1m .plan-title {
  background: #1779B7;      /* ブルー */
  color: #fff;
  border-radius: 0 7px;
}
.price-m .monthly-1m .plan-title .date {
  background: #cdedff;      /* 薄い水色 */
  color: #333;
  font-weight: 900;
  border-radius: 3px;
}

/* 3ヶ月 */
.price-m .monthly-3m .plan-title {
  background: #1D7639;      /* グリーン */
  color: #fff;
  border-radius: 0 7px;
}
.price-m .monthly-3m .plan-title .date {
  background: #c0fdd0;      /* ライトグリーン */
  color: #333;
  font-weight: 900;
  border-radius: 3px;
}

/* 6ヶ月 */
.price-m .monthly-6m .plan-title {
  background: #DC7A23;      /* オレンジ */
  color: #fff;
  border-radius: 0 7px;
}
.price-m .monthly-6m .plan-title .date {
  background: #ffe3ca;      /* 薄いオレンジ */
  color: #333;
  font-weight: 900;
  border-radius: 3px;
}


/* 価格 */
.price-m .price-info {
  margin: 10px 20px;
  text-align: center;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.4;
}
.price-m .price-info .price {
  color: #C10000;
}
.price-m .price-info .price strong {
  font-size: 150%;
  font-weight: 900;
}
.price-m .price-info .text-small,
.price-m .price-info .text-smaller {
  font-size: 0.9rem;
  color: #333;
}
.price-m .price-info .price .month {
  padding-right: 8px;
  font-size: 15px;
  margin-bottom: 10px;
  font-weight: normal;
}
.price-m .price-info .text-smaller .month {
  padding-right: 8px;
  margin-bottom: 10px;
  font-weight: normal;
}


/* オプション部分（注釈） PC表示 */
.price-m .price-m-option {
  margin-top: 20px;
  border-top: 1px solid #ccc;
  padding-top: 15px;
  display: flex;                /* 横並び */
  justify-content: center;      /* 中央寄せ */
  align-items: flex-start;
  gap: 20px;                    /* 見出しと本文の間隔 */
}

.price-m .price-m-option h4.cdw {
  border: 2px solid #333;
  padding: 23px;
  background: #f9f9f9;
  font-weight: bold;
  font-size: 1rem;
  margin: 20px 0;
  min-width: 180px;
  text-align: center;
  box-sizing: border-box;
  line-height: 1.2;
}


.price-m .price-m-option .option-body {
  max-width: 600px;             /* 読みやすい幅制限 */
}

.price-m .price-m-option .option-body p {
  margin: 4px 0;
  font-size: 0.95rem;
}

.price-m .price-m-option .mark-list {
  padding-left: 20px;
  list-style-position: outside;
}

.price-m .price-m-option .list-notice {
  font-size: 1rem;
  color: #555;
  line-height: 1.4;
  margin: 0 0 5px 0;
  list-style: disc inside;
}



/* ============================
   スマホ対応
   ============================ */
@media (max-width: 768px) {
  .lineup-box {
    padding: 15px;
    margin-bottom: 50px;
  }
  /* ヘッダーを縦並び */
  .price-m .price-m-header {
    flex-direction: column;
    text-align: center;
  }
  .price-m .price-m-info {
    padding-left: 0;
    margin-top: 10px;
  }

  /* プランを縦並びに */
  .price-m .price-m-plans {
    flex-direction: column;
    gap: 15px;
  }

  .price-m .plan-box {
    margin-bottom: 20px;
  }


  .price-m .price-m-photo img {
    max-width: 100%;
  }

  /* アイコンを少し小さく */
  .price-m .plan-box .icon {
    width: 65px;
    height: 65px;
  }
  .price-m .plan-title .label {
    margin-left: 55px;
  }

  /* オプションを縦並びに */
  .price-m .price-m-option {
    flex-direction: column;
    gap: 10px;
  }
  .price-m .price-m-option h4.cdw {
    width: 100%;           /* 横幅いっぱいにする */
    flex: none;            /* 固定幅を解除 */
    min-width: 0;          /* 飛び出し防止 */
    box-sizing: border-box;
    font-size: 0.95rem;
    text-align: center;
  }
  .price-m .price-m-option .option-body {
    width: 100%;
  }



  /* オプション部分のリスト調整 */
  .price-m .price-m-option .mark-list {
    padding-left: 0.5em;       /* 黒丸分だけ余白を確保 */
    margin: 0;                 /* 不要な外余白をリセット */
    list-style-position: outside; /* 黒丸は外に出す */
  }

  .price-m .price-m-option .list-notice {
    text-indent: 0;            /* 改行時の食い込みを防止 */
    margin-left: 0;            /* 左ズレを防止 */
  }
}