@charset "UTF-8";
/*=======================================
	breakpoint
=======================================*/
/*=======================================
	hover
=======================================*/
/*=======================================
	中央配置
=======================================*/
/*=======================================
	可変レスポンシブ
=======================================*/
/* PC */
/* TB */
/* SP */
/*=======================================
	ブラウザ別
=======================================*/
/* Safari */
/* Firefox */
/*-------------------------
- support :ページ共通枠（ヘッダーの逃げ／コンテンツ幅）
- support_head :ページタイトルの余白／リード文（h1本体は common.scss の .page_ttl）
- support_list :サポートカード一覧（PC 3列×2行 ／ SP 1列）
- support_card :サポートカード
- support_card_btn :カード内ボタン（PC 横長 ／ SP 丸矢印）
-------------------------*/
/* ---- supportページ用 変数 ---- */
/* 見出し・リード文 */
/* カード本文 */
/* カード地 */
/* ボタン地 */
/* コンテンツ幅（Figma 1440 − 左右80） */
/* 左右の逃げ（Figma SP 375 − 左右20 = 335） */
/* カードの角丸 */
/* 既存PCヘッダー高さ（common.scss $hd_pc_h） */
/* 既存SPヘッダー高さ（common.scss $hd_sp_h） */
/* Figmaのカード実寸。PCはグリッド1カラム=408pxのとき366pxになる */
/* 本文の行送り。Figma直接値（16px / line-height 28px）。
   Figmaの Text Layout Box（2行=40px）は最終行の行間を含まない実測値のため、
   CSSの line-height で生じる上下各8pxを余白から差し引いて位置を合わせる */
/* (28 − 文字実寸12) / 2 */
/*=======================================
　support
=======================================*/
/* 既存ヘッダーは position:absolute のため、ページ側で開始位置を確保する */
.support {
  padding-top: 105px;
  /* ヘッダーがハンバーガーへ切り替わる幅（xl）で高さも切り替わる */
}
@media screen and (max-width: 1024px) {
  .support {
    padding-top: 60px;
  }
}
.support .support__inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
}

/* PC/SPで改行位置が異なる箇所の制御（products と同じ手法） */
.support-br--sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .support-br--sp {
    display: inline;
  }
}

/*=======================================
　support_head
=======================================*/
/* Figma PC : ttl(42) → Frame 603 padding 60 0 60 → 一覧
   Figma SP : contents-header gap 30 ／ リードは Frame 43 padding-top 10 */
/* Figmaのリード文 Text Layout Box（PC 13px / SP 36px）は行送りの余白を含まない実測値。
   CSSの line-height（PC 28px / SP 24px）で生じる上下の余白分を前後の余白から差し引く */
.support__head {
  padding-bottom: 52px; /* Figma padding-bottom 60 − (28 − 文字実寸13)/2 */
}
@media screen and (max-width: 768px) {
  .support__head {
    padding-bottom: 0;
  }
}
@media screen and (max-width: 768px) {
  .support__head .page_ttl {
    margin-top: 30px;
  }
}
.support__head .support__lead {
  margin-top: 52px; /* Figma gap 60 − 行送りの上余白 */
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  color: #1D1D1F;
}
@media screen and (max-width: 768px) {
  .support__head .support__lead {
    margin-top: 40px; /* Figma gap 30 ＋ Frame 43 padding-top 10 */
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.08em;
  }
}

/*=======================================
　support_list
=======================================*/
/* Figma PC : Frame 617 grid 1280幅 3列×2行 / column-gap 28 / row-gap 58
              Frame 618 padding-bottom 100
   Figma SP : Frame 572 padding 60 20 ／ Frame 599 gap 25 の1列 */
.support-list {
  padding-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .support-list {
    /* padding-top はリード文の行送り下余白6pxを差し引く */
    padding: 54px 0 60px;
  }
}
.support-list .support-list__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 28px;
  row-gap: 58px;
  /* 3列のままだとカード内に250pxのボタンが収まらなくなるため、
     既存ヘッダーがハンバーガーへ切り替わる幅（xl）で2列へ落とす */
}
@media screen and (max-width: 1024px) {
  .support-list .support-list__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }
}
@media screen and (max-width: 768px) {
  .support-list .support-list__grid {
    grid-template-columns: 1fr;
    row-gap: 25px;
  }
}

/*=======================================
　support_card
=======================================*/
/* Figma PC : 408×366 / padding 57 50 48 ／ SP : 335幅 / padding 25 20 35 */
.support-card {
  position: relative; /* SPの丸ボタンの基準 */
  display: flex;
  flex-direction: column;
  min-height: 366px;
  padding: 57px 50px 48px;
  border-radius: 20px;
  background: #F6F6F8;
}
@media screen and (max-width: 1024px) {
  .support-card {
    padding: 45px 30px 40px;
  }
}
@media screen and (max-width: 768px) {
  .support-card {
    /* SPは内容量で高さが変わる（Figma実測 171 / 199px）。高さは固定しない */
    min-height: 0;
    /* Figma padding-bottom 35 − 本文の行送り下余白8 */
    padding: 25px 20px 27px;
  }
}
.support-card .support-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 51px;
}
@media screen and (max-width: 768px) {
  .support-card .support-card__head {
    gap: 30px;
  }
}
.support-card .support-card__ttl {
  font-weight: 500;
  font-size: 23px;
  line-height: 30px;
  color: #1D1D1F;
}
@media screen and (max-width: 768px) {
  .support-card .support-card__ttl {
    font-size: 20px;
    line-height: 28px;
  }
}
.support-card .support-card__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 83px;
}
@media screen and (max-width: 768px) {
  .support-card .support-card__icon {
    width: 45px;
  }
}
.support-card .support-card__icon img {
  display: block;
  width: auto;
  height: auto;
}
.support-card .support-card__txt {
  margin-top: 49px;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: #666666;
}
@media screen and (max-width: 1024px) {
  .support-card .support-card__txt {
    margin-top: 30px;
  }
}
@media screen and (max-width: 768px) {
  .support-card .support-card__txt {
    margin-top: 12px;
    /* SPは右下の丸ボタンを避けるため本文幅を狭める（Figma 295 → 253） */
    padding-right: 42px;
  }
}
.support-card .support-card__action {
  margin-top: auto;
  padding-top: 55px;
  text-align: center;
}
@media screen and (max-width: 1024px) {
  .support-card .support-card__action {
    padding-top: 35px;
  }
}
@media screen and (max-width: 768px) {
  .support-card .support-card__action {
    margin-top: 0;
    padding-top: 0;
  }
}

/*=======================================
　support_card_btn
=======================================*/
/* Figma PC : 250×50 / #CFAD75 / radius 999 / 白文字18px ＋ 右矢印
   Figma SP : 30×30 の丸ボタン。テキストは表示せず矢印のみ */
.support-card__btn {
  display: inline-flex;
  width: 250px;
}

/* SPでは丸ボタンにし、テキストは読み上げ用に残して視覚的に隠す。 */
@media screen and (max-width: 768px) {
  .support-card__btn {
    position: absolute;
    right: 20px;
    bottom: 19px;
    width: 30px;
    height: 30px;
  }
  .support-card__btn::after {
    top: 50%;
    right: 12px;
    width: 10px;
    height: 10px;
  }
  .support-card__btn .support-card__btn-txt {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* SPではカード全体、PCではボタン部分をリンク範囲にする */
.support-card {
  pointer-events: none;
}
.support-card:hover {
  opacity: 1;
}
.support-card .support-card__btn {
  pointer-events: auto;
}
.support-card:focus-visible .support-card__btn {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
@media screen and (max-width: 768px) {
  .support-card {
    pointer-events: auto;
  }
}

/*=======================================
　カードごとのアイコン表示サイズ（Figma実寸。SPはPCの0.8倍）
=======================================*/
.support-card--repair .support-card__icon img {
  width: 56.18px;
}
@media screen and (max-width: 768px) {
  .support-card--repair .support-card__icon img {
    width: 44.94px;
  }
}

.support-card--care .support-card__icon img {
  width: 62px;
}
@media screen and (max-width: 768px) {
  .support-card--care .support-card__icon img {
    width: 49.6px;
  }
}

.support-card--manual .support-card__icon img {
  width: 68px;
}
@media screen and (max-width: 768px) {
  .support-card--manual .support-card__icon img {
    width: 54.4px;
  }
}

.support-card--lot .support-card__icon img {
  width: 59.76px;
}
@media screen and (max-width: 768px) {
  .support-card--lot .support-card__icon img {
    width: 47.81px;
  }
}

.support-card--faq .support-card__icon img {
  width: 43.39px;
}
@media screen and (max-width: 768px) {
  .support-card--faq .support-card__icon img {
    width: 34.72px;
  }
}

.support-card--contact .support-card__icon img {
  width: 43.4px;
}
@media screen and (max-width: 768px) {
  .support-card--contact .support-card__icon img {
    width: 34.72px;
  }
}