@charset "UTF-8";
/* ====================================
     ガス会社変更の流れ
   ==================================== */
.flow__box {
  padding: 40px 20px;
  background-color: #ffffff;
  font-family: "Noto Sans JP", sans-serif;
  color: #333333;
  letter-spacing: 0.02em;
}

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

.flow__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto 40px;
  position: relative;
  width: 100%;
  max-width: 600px;
}
.flow__nav::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #3a6ea5;
  z-index: 1;
  transform: translateY(-50%);
}

.flow__nav-item {
  position: relative;
  z-index: 2;
  background-color: #ffffff;
  padding: 0;
  width: 21%;
}

.flow__nav-icon {
  width: 100%;
  height: auto;
}
/* フローカードエリア */
.flow__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media print, screen and (min-width: 768px) {
  .flow__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

.flow__card {
  border: 2px solid #3a6ea5;
  border-radius: 4px;
  padding: 16px 14px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.flow__card-title {
  display: flex;
  align-items: center;
  background-color: #1a3d66;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  padding: 4px 6px;
  line-height: 1.5;
  margin: 0;
}
@media print, screen and (min-width: 768px) {
  .flow__card-title {
    font-size: 20px;
    padding: 4px 6px;
  }
}

.flow__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  margin-right: 0.5em;
  width: 3em;
  height: auto;
  flex-shrink: 0;
}
.flow__card-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.flow__card-img {
  padding: 0;
  text-align: center;
  margin: 0;
}
.flow__card-img img {
  margin: 0 auto;
  width: 100%;
  height: auto;
}

.flow__card-text {
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
}

/* ポイントセクション */
.point__box {
  padding: 40px 20px;
  background-color: #f0f7ff;
  font-family: "Noto Sans JP", sans-serif;
  color: #333333;
}

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

.point__card {
  background-color: #ffffff;
  border: 2px solid #1a3d66;
  border-radius: 4px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 600px;
  margin: 0 auto;
  /* PC向けレイアウト */
}
@media print, screen and (min-width: 768px) {
  .point__card {
    padding: 20px;
    gap: 32px;
    justify-content: center;
    /* コンテンツを中央寄りに */
  }
}

.point__icon-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.point__icon-area img {
  width: 48px;
  height: auto;
  margin-bottom: 8px;
}
@media print, screen and (min-width: 768px) {
  .point__icon-area img {
    width: 60px;
  }
}

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

/* ====================================
   キャンペーン
   ==================================== */
/* スマホ時のみ改行用クラス */
.sp-only {
  display: block;
}
@media print, screen and (min-width: 768px) {
  .sp-only {
    display: none;
  }
}

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

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

/* ピル型バナー（上部・下部共通ベース） */
.recommend__conclusion-banner, .recommend__lead-banner {
  background-color: #1a3d66;
  color: #ffffff;
  text-align: center;
  border-radius: 100vmax;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 auto;
  letter-spacing: 0.05em;
}

.recommend__lead-banner {
  padding: 16px 20px;
  font-size: 18px;
  margin: 0 auto 32px;
  max-width: 600px;
}
@media print, screen and (min-width: 768px) {
  .recommend__lead-banner {
    font-size: 24px;
    padding: 24px 40px;
    margin-bottom: 40px;
  }
}

/* ラベルテキスト（＼テキスト／） */
.recommend__merit-label, .recommend__campaign-label {
  text-align: center;
  color: #1a3d66;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 16px;
}
@media print, screen and (min-width: 768px) {
  .recommend__merit-label, .recommend__campaign-label {
    font-size: 22px;
  }
}

.recommend__deco {
  color: #3a6ea5;
  margin: 0 4px;
}

.recommend__campaign-desc {
  text-align: center;
  font-size: 15px;
  margin-bottom: 32px;
}
@media print, screen and (min-width: 768px) {
  .recommend__campaign-desc {
    font-size: 16px;
  }
}

/* QUOカードエリア */
.recommend__gift {
  background-color: #f0f7ff;
  padding: 32px 20px;
  text-align: center;
  margin-bottom: 48px;
  border-radius: 4px;
  /* PC向けレイアウト（横並び） */
}
@media print, screen and (min-width: 768px) {
  .recommend__gift {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 48px 40px;
  }
}

.recommend__gift-figure {
  margin: 0 auto 16px;
  display: flex;
  justify-content: center;
  max-width: 160px;
}
@media print, screen and (min-width: 768px) {
  .recommend__gift-figure {
    margin: 0;
    max-width: auto;
  }
}
.recommend__gift-figure img {
  max-width: 100%;
  height: auto;
}

.recommend__gift-text {
  color: #1a3d66;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}
@media print, screen and (min-width: 768px) {
  .recommend__gift-text {
    font-size: 28px;
    text-align: left;
  }
}

/* メリットセクション */
.recommend__merit-label {
  margin-bottom: 24px;
}

.recommend__merit-list {
  border: 2px solid #1a3d66;
  background-color: #ffffff;
  padding: 24px 16px;
  border-radius: 4px;
  margin-bottom: 24px;
}
@media print, screen and (min-width: 768px) {
  .recommend__merit-list {
    padding: 40px;
  }
}

.recommend__merit-item {
  display: flex;
  gap: 16px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid #e0e0e0;
}
.recommend__merit-item:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}
@media print, screen and (min-width: 768px) {
  .recommend__merit-item {
    gap: 32px;
    padding-bottom: 32px;
    margin-bottom: 32px;
  }
}

.recommend__merit-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 60px;
}
@media print, screen and (min-width: 768px) {
  .recommend__merit-icon {
    width: 80px;
  }
}
.recommend__merit-icon img {
  width: 40px;
}
@media print, screen and (min-width: 768px) {
  .recommend__merit-icon img {
    width: 48px;
  }
}

.recommend__merit-badge {
  color: #1a3d66;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
@media print, screen and (min-width: 768px) {
  .recommend__merit-badge {
    font-size: 14px;
  }
}

.recommend__merit-title {
  font-size: 16px;
  font-weight: 700;
  color: #333333;
  margin: 0 0 12px;
  line-height: 1.5;
}
@media print, screen and (min-width: 768px) {
  .recommend__merit-title {
    font-size: 18px;
  }
}

.recommend__merit-text {
  font-size: 14px;
  line-height: 1.8;
  margin: 0 0 12px;
}
@media print, screen and (min-width: 768px) {
  .recommend__merit-text {
    font-size: 16px;
  }
}

.recommend__merit-note {
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}
@media print, screen and (min-width: 768px) {
  .recommend__merit-note {
    font-size: 14px;
  }
}

.recommend__arrow {
  display: flex;
  justify-content: center;
  margin: 0 0 24px;
}

.recommend__conclusion-banner {
  padding: 16px 20px;
  font-size: 20px;
  max-width: 500px;
}
@media print, screen and (min-width: 768px) {
  .recommend__conclusion-banner {
    font-size: 28px;
    padding: 24px 40px;
  }
}

/* ====================================
     ご紹介制度
   ==================================== */
.present-info__box {
  padding: 40px 20px;
  background-color: #ffffff;
  font-family: "Noto Sans JP", sans-serif;
  color: #333333;
}

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

/* リード文 */
.board__box .present-info__lead {
  font-size: clamp(calc(14 / 16 * 1rem), calc(16 / 1440 * 100vw), calc(16 / 16 * 1rem));
  line-height: 1.8;
  margin: 0.5em 0;
}

.present-info__lead {
  font-size: clamp(calc(14 / 16 * 1rem), calc(16 / 1440 * 100vw), calc(16 / 16 * 1rem));
  line-height: 1.8;
  margin-bottom: 24px;
}
@media print, screen and (min-width: 768px) {
  .present-info__lead {
    font-size: clamp(calc(15 / 16 * 1rem), calc(18 / 1440 * 100vw), calc(18 / 16 * 1rem));
  }
}
.present-info__lead li {
  text-indent: -1em;
  padding-left: 1em;
}

/* プレゼントエリア */
.present-info__gift-area {
  background-color: #f0f7ff;
  padding: 32px 20px;
  margin-bottom: 24px;
  border-radius: 4px;
}
@media print, screen and (min-width: 768px) {
  .present-info__gift-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 40px;
  }
}

.present-info__gift-img {
  text-align: center;
  margin: 0 auto 24px;
  width: 50%;
  max-width: 280px;
}
@media print, screen and (min-width: 768px) {
  .present-info__gift-img {
    margin-bottom: 0;
    flex-shrink: 0;
    width: 280px;
  }
}
.present-info__gift-img img {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.present-info__gift-table-wrap {
  background-color: #ffffff;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.present-info__gift-table {
  width: 100%;
}

.present-info__gift-row {
  margin-bottom: 8px;
}
.present-info__gift-row:last-child {
  margin-bottom: 0;
}
.present-info__gift-row dt {
  background-color: #3e4a59;
  color: #ffffff;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  padding: 0 10px;
}
@media print, screen and (min-width: 768px) {
  .present-info__gift-row dt {
    font-size: 22px;
    padding: 4px 10px;
  }
}
.present-info__gift-row dd {
  background-color: #ffffff;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  padding: 16px 10px;
  margin: 0;
}
@media print, screen and (min-width: 768px) {
  .present-info__gift-row dd {
    font-size: 18px;
    padding: 20px 10px;
  }
}

.present-info__price {
  font-size: 20px;
  margin-left: 8px;
}
@media print, screen and (min-width: 768px) {
  .present-info__price {
    font-size: 24px;
    margin-left: 12px;
  }
}

/* 注釈 */
.board__box .present-info__note {
  margin-bottom: 0px;
}

.present-info__note {
  font-size: clamp(calc(12 / 16 * 1rem), calc(14 / 1440 * 100vw), calc(14 / 16 * 1rem)) !important;
  line-height: 1.8;
  margin-bottom: 40px;
  text-indent: -2.5em;
  padding-left: 2.5em;
}

/* 対応エリア見出し */
.present-info__area-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 24px;
  color: #333333;
}
@media print, screen and (min-width: 768px) {
  .present-info__area-title {
    font-size: 26px;
    margin-bottom: 32px;
  }
}

/* 対応エリアリスト */
.present-info__area-list {
  margin-bottom: 32px;
}

.present-info__area-item {
  margin-bottom: 1em;
}
.present-info__area-item:last-child {
  margin-bottom: 0;
}
@media print, screen and (min-width: 768px) {
  .present-info__area-item {
    display: flex;
    align-items: baseline;
    gap: 24px;
  }
}

.present-info__area-badge {
  display: inline-block;
  background-color: #3a6ea5;
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  padding: 4px 16px;
  line-height: 1;
  border-radius: 4px;
  margin-bottom: 4px;
}
@media print, screen and (min-width: 768px) {
  .present-info__area-badge {
    margin-bottom: 0;
    flex-shrink: 0;
    width: 120px;
    text-align: center;
  }
}

.present-info__area-text {
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
}

/* 最後の注釈 */
.present-info__sub-note {
  text-align: right;
  font-size: clamp(calc(12 / 16 * 1rem), calc(14 / 1440 * 100vw), calc(14 / 16 * 1rem));
  margin: 0;
}

.select__list ul li .select__list-title {
  text-align: center;
}