@charset "UTF-8";

/* =========================================================
   リモートサポート
   共通デザインは app.css (ta-* クラス / token) に委譲。
   このファイルには body.--remote-support スコープの
   ページ固有スタイルのみ。
   class は使わず section ID・要素・属性セレクタで記述。
   ========================================================= */

body.--remote-support {
  background: #fff;
  margin: 0;
  overflow-x: clip;
}

body.--remote-support main {
  padding-top: 0;
}

body.--remote-support .global-header-reserve {
  height: 0 !important;
}

/* h3 の上下余白 */
body.--remote-support section h3 {
  margin: 40px 0 16px;
}

/* ta-link[tel] の → を非表示 */
body.--remote-support a.ta-link[href^="tel:"]::after {
  content: none;
}

/* ta-h4 の margin-bottom（app.css が margin:0 で消しているため復元） */
body.--remote-support .ta-h4 {
  margin-bottom: 8px;
}

/* ul: ・ 箇条書き、左寄せ */
body.--remote-support ul {
  list-style-type: "・ ";
  padding-left: 1.5em;
}

/* ol: 番号、左寄せ（デフォルトの大きい indent を縮小） */
body.--remote-support ol {
  padding-left: 1.5em;
}

/* アプリストアアイコン間の gap（固定値 26px） */
body.--remote-support [aria-label="アプリストアリンク"] {
  display: flex;
  gap: 26px;
}

/* 画像・figure は中央寄せ */
body.--remote-support figure {
  margin: 0;
  text-align: center;
}

/* ===== br-sp: PC では非表示 ===== */
@media screen and (min-width: 940px) {
  body.--remote-support .br-sp {
    display: none;
  }
}

/* ===== Hero ===== */
@media screen and (max-width: 939px) {
  /* STEP 見出し: ハンギングインデント（「STEP 0X：」幅分、折り返し行を揃える） */
  body.--remote-support .step-heading {
    padding-left: 5em;
    text-indent: -5em;
  }

  body.--remote-support .ta-hero {
    min-height: unset;
    padding: 24px 20px;
  }
  body.--remote-support .ta-hero__title {
    font-size: clamp(16px, calc((100vw - 55px) / 16), 26px);
    white-space: nowrap;
    overflow: visible;
    letter-spacing: 0;
  }
}