/* ============================================================
   style_support.css
   kyu_support.html 専用スタイル
   ============================================================ */

/* ----------------------------------------------------------
   サポートアイテムリスト（カード型レイアウト）
   ---------------------------------------------------------- */

/* カードリスト外枠：フレックスでカードを横並びに */
.support-rate-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
}

/* 各カードアイテム */
.support-rate-item {
  text-align: center;
}

/* カード内の画像コンテナ */
.support-rate-item__img {
  margin: 0;
}

.support-rate-item__img img {
  display: block;
}

/* カードタイトル：青色・中央揃え */
.support-rate-item__title {
  position: relative;
  text-align: center;
  color: #5FC5EB;
  font-weight: 500;
}

/* タイトル内スパン（is-full アイテムで注釈を絶対配置するため） */
.support-rate-item__title > span {
  position: relative;
}

/* 注釈テキスト（電話＆リモートサポートの「※プレミアムサポート」） */
.support-rate-item__note {
  position: absolute;
}

/* カードテキスト */
.support-rate-item__text {
  font-weight: 300;
  text-align: left;
}


/* ----------------------------------------------------------
   PC（768px以上）のレイアウト
   ---------------------------------------------------------- */
@media print, (min-width: 768px) {
  /* セクション全体の上部余白 */
  #reliable_support {
    padding-top: 85px;
  }

  /* カードリストの左右マージン調整 */
  .support-rate-list {
    margin: 0 -31px;
  }

  /* 通常カードの幅 */
  .support-rate-item {
    width: 320px;
    margin: 45px 31px 0;
  }

  /* 画像コンテナの高さ固定（整列のため） */
  .support-rate-item__img {
    height: 118px;
    margin-bottom: 8px;
  }

  /* 画像は高さに合わせて幅自動調整・中央揃え */
  .support-rate-item__img img {
    height: 100%;
    width: auto;
    margin: 0 auto;
  }

  /* タイトルのフォントサイズ */
  .support-rate-item__title {
    font-size: 28px;
  }

  /* 注釈の配置（タイトル右横に絶対配置） */
  .support-rate-item__note {
    text-align: left;
    bottom: 0;
    width: 100%;
    left: 102%;
    font-size: 13px;
  }

  /* テキストの幅制限と上部余白 */
  .support-rate-item__text {
    max-width: 800px;
    margin: 7px auto 0;
  }

  /* 全幅カード（電話＆リモートサポート） */
  .support-rate-item--full {
    width: 100%;
    margin: 40px auto 0;
  }

  /* 全幅カードの画像コンテナ */
  .support-rate-item--full .support-rate-item__img {
    margin: 0 auto;
    width: 308px;
    height: auto;
  }

  /* 全幅カードのテキスト：ブロック自体を中央に配置・テキストは左寄せ */
  .support-rate-item--full .support-rate-item__text {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }

  /* 全幅カードの画像 */
  .support-rate-item--full .support-rate-item__img img {
    height: auto;
    width: 100%;
  }

  /* 全幅カードのタイトル */
  .support-rate-item--full .support-rate-item__title {
    margin-top: 13px;
    padding-right: 15px;
  }
}

/* ----------------------------------------------------------
   スマートフォン（767px以下）のレイアウト
   ---------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  /* カードリストの上部余白 */
  .support-rate-list {
    margin-top: 45px;
  }

  /* カード間の余白 */
  .support-rate-item ~ .support-rate-item {
    margin-top: 28px;
  }

  /* 画像の高さ固定 */
  .support-rate-item__img img {
    height: 118px;
    margin: 0 auto;
  }

  /* タイトルのフォントサイズ */
  .support-rate-item__title {
    padding-top:8px;
    font-size: 24px;
  }

  /* テキストの上部余白 */
  .support-rate-item__text {
    margin-top: 11px;
  }

  /* 全幅カードの上部余白 */
  .support-rate-item--full {
    margin-top: 38px;
  }

  /* 全幅カードのテキスト：SP でもブロック自体を中央に配置（テキスト左寄せ維持） */
  .support-rate-item--full .support-rate-item__text {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 34px;
  }

  /* 全幅カードの画像（SPでは高さ auto） */
  .support-rate-item--full .support-rate-item__img img {
    height: auto;
  }

  /* 全幅カードの注釈フォントサイズ・位置 */
  .support-rate-item--full .support-rate-item__note {
    font-size: 13px;
    right: -33px;
    top: 37px;
  }
}