:root {
  --mv_cta_primary-top:   #1E90FF; /* 上（明るめ） */
  --mv_cta_primary-bottom:#005B99; /* 下（濃いめ） */
  --mv_cta_secondary-top: #66B2FF;
  --mv_cta_secondary-bottom:#3399FF;
  --mv_cta_text-on-cta:   #FFFFFF;
  --mv_cta_focus-outline: #FFCC00;
}
.grid { display:grid; }
.mv { max-width:1100px; margin:0 auto 110px auto; border-radius:20px; background:#f5f7fa; }
.mv__inner { grid-template-columns:1fr 40%; gap:0 20px; margin:0; padding:20px; }
.mv__inner h1 { margin-bottom:0; color:#005bac; text-align:left; }
.mv__inner h1 span { display:inline-block; margin-bottom:15px; padding-bottom:0; border-bottom:3px #005bac solid; font-size:50%; }
.mv__inner h1::after { display:none; }
.mv__visual { text-align:center; }
.mv__visual img { max-height:400px; }
.mv__text { font-size:20px; }
.mv__merit { grid-template-columns: repeat(3, 30%); justify-content:space-between; }
.mv__merit li { color:#007acc; font-weight:bold; text-align:center; }
.mv__merit li img { display:block; max-width:75px; margin:0 auto 10px auto; }
.mv__cta { grid-template-columns: repeat(2, 48%); gap:0 20px; padding:20px; }
.mv__btn {
  display:block;
  appearance: none;
  border: 0;
  border-radius: 12px;
  padding: 22px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: var(--mv_cta_text-on-cta);
  background: var(--mv_cta_primary-bottom); /* フォールバック */
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 180ms ease, transform 120ms ease, opacity 120ms ease;
  outline: none;
  text-align:center;
}
.mv__btn--list {
  background: linear-gradient(180deg, var(--mv_cta_primary-top), var(--mv_cta_primary-bottom));
}
.mv__btn--form {
  background: linear-gradient(180deg, var(--mv_cta_secondary-top), var(--mv_cta_secondary-bottom));
}
.mv__btn--list:hover {
  background: linear-gradient(180deg, #39A1FF, #006BB3);
}
.mv__btn--form:hover {
  background: linear-gradient(180deg, #80BFFF, #4DA6FF);
}
.mv__btn:active {
  transform: translateY(1px);
  opacity: 0.95;
}
.mv__btn:focus-visible {
  outline: 3px solid var(--mv_cta_focus-outline);
  outline-offset: 2px;
}
.item { margin-bottom:50px; }
.item__heading { grid-template-columns:10em 1fr; justify-content:left; gap:0 20px; margin-bottom:30px; padding:20px; background-color:#003366; color:#FFFFFF; }
.item__category { padding:5px; border-radius:9999px; background-color:#FFFFFF; color:#003366; font-size:80%; text-align:center; line-height:28px; }
.item__name { font-size:28px; font-weight:bold; }
.item__type { display:inline-block; margin-left:1em; font-size:50%; font-weight:normal; }
.item__point { margin-bottom:30px; font-size:24px; font-weight:bold; text-align:center; }
.item__summary { max-width:750px; grid-template-columns:450px 1fr; gap:0 30px; margin:0 auto 30px auto; }
.item__price { align-content:center; }
.item__price_inner { border:1px #1E90FF solid; }
.item__price--heading { padding:10px; background-color:#1E90FF; color:#FFFFFF; font-size:18px; text-align:center; }
.price { padding:20px; font-weight:bold; font-size:18px; text-align:center; }
.price--strong { display:inline-block; font-size:38px; color:#CC0000; font-weight:bold; }
.item__spec { max-width:750px; margin:0 auto; padding:30px; border: 5px solid #ededed; border-radius: 10px; }
.spec {  }
.spec__item { display:inline-block; position:relative; margin:5px; padding:5px 1em; }
.spec__item::before { content:""; position:absolute; width:7px; height:7px; top:43%; left:0; background-color:#FFCC00; }
.notes { padding-top:50px; border-top:1px #CCCCCC solid; }
.table { grid-template-columns: 8em 1fr; gap:30px 20px; }
.table dt { font-weight:bold; }
.table dd ul.square_list li { margin-bottom:0; }
.table dd ul.square_list li::before { background-color:#333333; }
@media screen and (max-width:768px) {
  .grid { display:block; }
  .mv__visual { margin:50px 0; }
  .mv__visual img{ max-width:480px; }
  .mv__merit, .mv__cta { display:grid; justify-content:space-between; }
  .item__heading { line-height:1; }
  .item__category { width:10em; margin:0 auto 10px auto; }
  .item__name { text-align:center; }
  .item__img { max-width:400px; margin:0 auto 30px auto; }
  .table dd { margin-bottom:30px; }
  .table dd:last-child { margin-bottom:0; }
}
@media screen and (max-width:480px) {
  .mv__visual { margin:30px 0; }
  .mv__merit, .mv__cta { display:block; }
  .mv__merit li { margin-bottom:30px; }
  .mv__merit li:last-child  { margin-bottom:0; }
  .mv__btn { margin-bottom:20px; }
  .mv__btn:last-child { margin-bottom:0; }
}



