@charset "UTF-8";
.title__energy span small {
  font-size: 22px;
  display: block;
  margin-bottom: 5px;
}

/* --- スマホ版（768px以下）のスタイル --- */
@media screen and (max-width: 767px) {
  .title__energy span small {
    font-size: 18px;
    margin-bottom: 2px;
  }
}
.plan-benefit__box {
  padding: 40px 20px;
  background-color: #ffffff;
  font-family: "Noto Sans JP", sans-serif;
  color: #333333;
}

.plan-benefit__inner {
  max-width: 1000px;
  margin: 0 auto;
}

.plan-benefit__block {
  margin-bottom: 48px;
}
.plan-benefit__block--last {
  margin-bottom: 0;
}

/* タイトルバー */
.plan-benefit__title {
  display: flex;
  align-items: center;
  background-color: #3A6EA5;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  padding: 4px 8px;
  margin-bottom: 16px;
  line-height: 1.4;
}
@media print, screen and (min-width: 768px) {
  .plan-benefit__title {
    font-size: 24px;
    padding: 6px 10px;
    margin-bottom: 24px;
  }
}
.plan-benefit__title img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  flex-shrink: 0;
}
@media print, screen and (min-width: 768px) {
  .plan-benefit__title img {
    width: 28px;
    height: 28px;
    margin-right: 10px;
  }
}

/* カードグリッド */
.plan-benefit__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 10px;
}
@media print, screen and (min-width: 768px) {
  .plan-benefit__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 16px;
  }
}

.plan-benefit__card {
  border: 1px solid #E0E0E0;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
}

.plan-benefit__card-head {
  background-color: #CFD6DF;
  color: #333333;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  padding: 8px 6px;
}
@media print, screen and (min-width: 768px) {
  .plan-benefit__card-head {
    font-size: 16px;
    padding: 10px 8px;
  }
}

.plan-benefit__card-body {
  padding: 8px 7px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}
.plan-benefit__card-body--tall {
  padding: 8px 7px;
}

/* 基本料金割引テキスト */
.plan-benefit__price-red {
  color: #CA0817;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 4px;
}
@media print, screen and (min-width: 768px) {
  .plan-benefit__price-red {
    font-size: 22px;
  }
}

.plan-benefit__tax {
  color: #CA0817;
  font-size: 12px;
  line-height: 1;
}
@media print, screen and (min-width: 768px) {
  .plan-benefit__tax {
    font-size: 14px;
  }
}

/* 無料比較テキスト */
.plan-benefit__desc {
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 6px;
}
@media print, screen and (min-width: 768px) {
  .plan-benefit__desc {
    font-size: 15px;
    margin-bottom: 4px;
  }
}

.plan-benefit__text-blue {
  color: #3A6EA5;
  font-weight: 700;
}

.plan-benefit__saving {
  color: #CA0817;
  font-size: 14px;
  font-weight: 700;
}
@media print, screen and (min-width: 768px) {
  .plan-benefit__saving {
    font-size: 16px;
  }
}

.plan-benefit__saving-num {
  font-size: 24px;
}
@media print, screen and (min-width: 768px) {
  .plan-benefit__saving-num {
    font-size: 28px;
  }
}

/* 注釈リスト */
.plan-benefit__notes {
  font-size: 13px;
  line-height: 1.6;
}
@media print, screen and (min-width: 768px) {
  .plan-benefit__notes {
    font-size: 14px;
  }
}
.plan-benefit__notes li {
  text-indent: -1em;
  padding-left: 1em;
  margin-bottom: 4px;
}
.plan-benefit__notes li:last-child {
  margin-bottom: 0;
}

.plan-benefit__text {
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
}

.features__box {
  padding: 40px 20px;
  background-color: #ffffff;
  font-family: "Noto Sans JP", sans-serif;
  color: #333333;
}

.features__inner {
  max-width: 1000px;
  margin: 0 auto;
}

.features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media print, screen and (min-width: 768px) {
  .features__grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 32px;
    row-gap: 0;
    grid-template-rows: auto auto 1fr auto;
  }
}

.features__item {
  display: flex;
  flex-direction: column;
}
@media print, screen and (min-width: 768px) {
  .features__item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
  }
}

/* 
 * 見出しの修正：青いバーの伸縮と上揃え 
 */
.features__title.section__title {
  font-size: 20px;
  margin-bottom: 20px;
  /* flex-item（青いバー）をテキストの行数に合わせて縦に伸ばす */
  align-items: stretch;
}
.features__title.section__title::before {
  height: auto;
  min-height: 24px;
  top: 0;
}
@media print, screen and (min-width: 768px) {
  .features__title.section__title {
    font-size: 22px;
    margin-bottom: 24px;
    /* 1行のタイトルが2行分のグリッド高さに無駄に伸びるのを防ぐ */
    align-self: start;
  }
}

.features__img {
  margin: 0 0 16px;
}
.features__img img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 16/9;
}

.features__text {
  font-size: 15px;
  line-height: 1.8;
  margin: 0 0 24px;
}
@media print, screen and (min-width: 768px) {
  .features__text {
    font-size: 16px;
  }
}

/* ボタンラッパー */
.features__btn-wrap {
  margin-top: auto;
  text-align: right;
}
@media print, screen and (min-width: 768px) {
  .features__btn-wrap {
    align-self: end;
    margin-top: 0;
  }
}

/* 共通ボタン内の上書き調整 */
.features__btn.common__btn > * {
  font-size: 14px;
  padding: 12px 20px 11px;
}
@media print, screen and (min-width: 768px) {
  .features__btn.common__btn > * {
    font-size: 15px;
    padding: 14px 20px 13px;
  }
}

.user-voice__box {
  padding: 40px 20px;
  background-color: #F0F7FF;
  font-family: "Noto Sans JP", sans-serif;
  color: #333333;
}

.user-voice__inner {
  max-width: 1000px;
  margin: 0 auto;
}

.user-voice__content {
  background-color: #ffffff;
  padding: 24px 16px;
  border-radius: 4px;
  margin-bottom: 24px;
  border: 1px solid #E0E0E0;
}
@media print, screen and (min-width: 768px) {
  .user-voice__content {
    padding: 48px 40px;
    margin-bottom: 32px;
  }
}

/* 共通見出しの上書き調整 */
.user-voice__title.section__title {
  font-size: 20px;
  margin-bottom: 24px;
}
@media print, screen and (min-width: 768px) {
  .user-voice__title.section__title {
    font-size: 24px;
    margin-bottom: 32px;
  }
}

.user-voice__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media print, screen and (min-width: 768px) {
  .user-voice__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

.user-voice__card {
  border: 1px solid #E0E0E0;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
}

.user-voice__card-header {
  background-color: #3A6EA5;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  padding: 4px 8px;
  line-height: 1.4;
}
@media print, screen and (min-width: 768px) {
  .user-voice__card-header {
    font-size: 16px;
    padding: 6px 10px;
  }
}

.user-voice__card-body {
  padding: 16px 8px;
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  /* 右下の人型アイコンを透過SVGで配置 */
  background-image: url('data:image/svg+xml;utf8,<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.5"><mask id="mask0_3194_25373" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="64" height="64"><rect width="64" height="64" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_3194_25373)"><path d="M22.9239 26.9434C20.3549 24.375 19.0703 21.2777 19.0703 17.6514C19.0703 14.0257 20.3549 10.9284 22.9239 8.35938C25.4929 5.79036 28.5902 4.50586 32.2159 4.50586C35.8416 4.50586 38.9389 5.79036 41.5079 8.35938C44.0769 10.9284 45.3614 14.0257 45.3614 17.6514C45.3614 21.2777 44.0769 24.375 41.5079 26.9434C38.9389 29.5124 35.8416 30.7969 32.2159 30.7969C28.5902 30.7969 25.4929 29.5124 22.9239 26.9434ZM4.04688 59.3998V51.0495C4.04688 49.2104 4.54641 47.5071 5.54547 45.9397C6.54453 44.3722 7.87974 43.1672 9.5511 42.3246C13.2632 40.5049 17.0081 39.14 20.7858 38.2298C24.5636 37.3196 28.3736 36.8645 32.2159 36.8645C36.0581 36.8645 39.8682 37.3196 43.6459 38.2298C47.4237 39.14 51.1686 40.5049 54.8807 42.3246C56.552 43.1672 57.8872 44.3722 58.8863 45.9397C59.8854 47.5071 60.3849 49.2104 60.3849 51.0495V59.3998H4.04688ZM9.68068 53.766H54.7511V51.0495C54.7511 50.289 54.5308 49.5847 54.0901 48.9368C53.6494 48.2896 53.0513 47.7613 52.2957 47.3519C49.0594 45.7581 45.7599 44.5506 42.3971 43.7293C39.0337 42.9087 35.64 42.4983 32.2159 42.4983C28.7918 42.4983 25.3981 42.9087 22.0347 43.7293C18.6719 44.5506 15.3724 45.7581 12.1361 47.3519C11.3805 47.7613 10.7824 48.2896 10.3417 48.9368C9.90102 49.5847 9.68068 50.289 9.68068 51.0495V53.766ZM37.5211 22.9566C38.9921 21.4855 39.7276 19.7171 39.7276 17.6514C39.7276 15.5857 38.9921 13.8173 37.5211 12.3462C36.05 10.8752 34.2816 10.1397 32.2159 10.1397C30.1502 10.1397 28.3818 10.8752 26.9107 12.3462C25.4397 13.8173 24.7042 15.5857 24.7042 17.6514C24.7042 19.7171 25.4397 21.4855 26.9107 22.9566C28.3818 24.4276 30.1502 25.1631 32.2159 25.1631C34.2816 25.1631 36.05 24.4276 37.5211 22.9566Z" fill="%23C2DCF8"/></g></g></svg>');
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 64px 64px;
}
@media print, screen and (min-width: 768px) {
  .user-voice__card-body {
    background-position: right 4px bottom 4px;
    padding: 20px 14px;
  }
}

.user-voice__plan-badge {
  display: inline-block;
  background-color: #3E4A59;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  padding: 4px;
  border-radius: 4px;
  margin-bottom: 8px;
  align-self: flex-start;
  line-height: 1.6;
}
@media print, screen and (min-width: 768px) {
  .user-voice__plan-badge {
    font-size: 14px;
    padding: 6px;
    margin-bottom: 10px;
  }
}

.user-voice__text {
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
  position: relative;
  z-index: 1;
}
@media print, screen and (min-width: 768px) {
  .user-voice__text {
    font-size: 15px;
  }
}

/* ボタンエリア */
.user-voice__btn-wrap {
  text-align: right;
}

.user-voice__btn.common__btn > * {
  font-size: 14px;
  padding: 12px 24px 11px;
  background-color: #ffffff;
}
@media print, screen and (min-width: 768px) {
  .user-voice__btn.common__btn > * {
    font-size: 16px;
    padding: 14px 32px 13px;
  }
}
@media (any-hover: hover) {
  .user-voice__btn.common__btn > *:hover {
    background-color: #3A6EA5;
  }
}