@charset "UTF-8";

/* =========================================================
   お問合せ
   共通デザインは app.css (ta-* クラス / token) に委譲。
   ページ固有スタイルのみ。フォント・色は token 経由。
   ========================================================= */

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

/* SP のみ表示する改行 */
.contact-sp-br {
  display: none;
}
@media (max-width: 939px) {
  .contact-sp-br {
    display: inline;
  }
}

body.--contact main {
  padding-top: 0;
}

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

body.--contact .ta-hero__title {
  font-size: 40px;
  white-space: nowrap;
}

@media (max-width: 939px) {
  body.--contact .ta-hero__title {
    font-size: 28px;
  }
}

/* ===== contact cards ===== */

body.--contact .ta-card {
  padding: 36px 28px;
}

body.--contact .contact-card__body {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* フォーム・電話カード内は中央寄せ */
body.--contact .contact-card__body--center {
  align-items: center;
  text-align: center;
  width: 100%;
}

/* ===== 電話番号 ===== */

body.--contact .contact-phone {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.--contact .contact-phone__label {
  background: #EBF3FC;
  color: var(--ta-color-primary);
  display: inline-block;
  font: 700 16px/1.7 var(--ta-font-family-ja);
  letter-spacing: var(--ta-letter-spacing-ja);
  padding: 2px 16px;
}

body.--contact .contact-phone__number {
  color: var(--ta-color-main);
  font: 700 44px/1.4 var(--ta-font-family-ja);
  letter-spacing: 0;
  margin: 0;
}

@media screen and (max-width: 939px) {
  body.--contact .contact-phone__number {
    font-size: 35px;
  }
}

/* ===== リモートサポートカード PC レイアウト ===== */

/* リモートサポートボタン: 白背景・青2px枠・角丸ピル・マウスアイコン付き（旧デザイン復元 2026-07-07）。
   アイコンは mask + currentColor で文字色に追従（通常=青 / hover=白）。SP は中央寄せ・全幅。 */
body.--contact .contact-btn--remote {
  align-self: center;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 16px 28px;
  background: #fff;
  border: 2px solid var(--ta-color-main);
  border-radius: 999px;
  color: var(--ta-color-main);
  font: 700 16px/1.4 var(--ta-font-family-ja);
  letter-spacing: var(--ta-letter-spacing-ja);
  text-align: left;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

/* マウスアイコン（icon-remote.svg をデータURIで内蔵。色は currentColor に追従） */
body.--contact .contact-btn--remote::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 32px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2033%2048%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M16.5%200C7.3875%200%200%207.3875%200%2016.5V31.5C0%2040.6125%207.3875%2048%2016.5%2048C25.6125%2048%2033%2040.6125%2033%2031.5V16.5C33%207.3875%2025.6125%200%2016.5%200ZM30%2031.5C30%2038.9437%2023.9438%2045%2016.5%2045C9.05625%2045%203%2038.9437%203%2031.5V16.5C3%209.05625%209.05625%203%2016.5%203C23.9438%203%2030%209.05625%2030%2016.5V31.5ZM16.5%207.5C14.0138%207.5%2012%209.51375%2012%2012V18C12%2020.4862%2014.0138%2022.5%2016.5%2022.5C18.9862%2022.5%2021%2020.4862%2021%2018V12C21%209.51375%2018.9862%207.5%2016.5%207.5ZM18%2018C18%2018.8288%2017.3288%2019.5%2016.5%2019.5C15.6713%2019.5%2015%2018.8288%2015%2018V12C15%2011.1713%2015.6713%2010.5%2016.5%2010.5C17.3288%2010.5%2018%2011.1713%2018%2012V18Z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2033%2048%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M16.5%200C7.3875%200%200%207.3875%200%2016.5V31.5C0%2040.6125%207.3875%2048%2016.5%2048C25.6125%2048%2033%2040.6125%2033%2031.5V16.5C33%207.3875%2025.6125%200%2016.5%200ZM30%2031.5C30%2038.9437%2023.9438%2045%2016.5%2045C9.05625%2045%203%2038.9437%203%2031.5V16.5C3%209.05625%209.05625%203%2016.5%203C23.9438%203%2030%209.05625%2030%2016.5V31.5ZM16.5%207.5C14.0138%207.5%2012%209.51375%2012%2012V18C12%2020.4862%2014.0138%2022.5%2016.5%2022.5C18.9862%2022.5%2021%2020.4862%2021%2018V12C21%209.51375%2018.9862%207.5%2016.5%207.5ZM18%2018C18%2018.8288%2017.3288%2019.5%2016.5%2019.5C15.6713%2019.5%2015%2018.8288%2015%2018V12C15%2011.1713%2015.6713%2010.5%2016.5%2010.5C17.3288%2010.5%2018%2011.1713%2018%2012V18Z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

body.--contact .contact-btn--remote:hover {
  background: var(--ta-color-main);
  color: #fff;
}

@media (min-width: 940px) {
  body.--contact .contact-card__body--remote {
    align-items: center;
    flex-direction: row;
    gap: 24px;
    justify-content: space-between;
  }

  body.--contact .contact-card__body--remote p {
    flex: 1 1 auto;
  }

  body.--contact .contact-btn--remote {
    flex: 0 0 auto;
    min-width: 220px;
    width: auto;
  }
}

/* ===== FAQ: View More 右寄せ ===== */

body.--contact .contact-faq-more {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}

/* ===== FAQ 専用スコープ調整 ===== */

/* FAQ 本文内リンク: 下線付き（ta-faq__link は border-bottom があるので除外） */
body.--contact .ta-faq__a-body a:not(.ta-faq__link) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* PDF リンク: 折り返し許可 */
body.--contact .ta-faq__link {
  white-space: normal;
}

/* ta-faq__ol 内は p 余白なし（alpha リスト項目の行間を詰める） */
body.--contact .ta-faq__ol p {
  margin: 0;
}

/* 段落間余白を 16px に縮める（27px はこのページには広すぎる） */
body.--contact .ta-faq__a-body p + p {
  margin-top: 16px;
}

/* ta-faq__ol の上マージン */
body.--contact .ta-faq__a-body .ta-faq__ol {
  margin-top: 0;
}

/* 注釈 div（リストでない使用）は左インデントをリセットして上の文字と揃える */
body.--contact .ta-faq__a-body > div.ta-faq__ol {
  margin-left: 0;
}

body.--contact .contact-doc-list__title,
body.--contact .contact-doc-list__note {
  display: block;
}

body.--contact .contact-doc-list__note {
  margin-left: 0;
  margin-top: 0;
}

body.--contact .contact-doc-list__note--line {
  margin-top: 0;
}

@media screen and (max-width: 939px) {
  body.--contact .contact-doc-list {
    list-style-position: outside;
    margin-left: 0;
    padding-left: 1.5em;
  }

  body.--contact .contact-doc-list > li {
    text-align: left;
  }

  body.--contact .contact-doc-list__title,
  body.--contact .contact-doc-list__note {
    display: block;
    text-align: left;
  }

  body.--contact .contact-doc-list__note {
    margin-left: 0;
    margin-top: 0;
  }

  body.--contact .contact-doc-list__note--line {
    display: block;
    margin-left: 0;
  }

  body.--contact .ta-faq__pdf-icon {
    height: 20px;
    width: 20px;
  }

  body.--contact .ta-faq__link {
    font-size: 11px;
    line-height: 1.5;
  }
}

/* ===== 営業・提携ボタン ===== */

body.--contact .contact-sales-btn {
  align-items: center;
  background: #fff;
  border: 2px solid var(--ta-color-main);
  border-radius: 40px;
  color: var(--ta-color-main);
  display: inline-flex;
  font: 700 16px/1.7 var(--ta-font-family-ja);
  justify-content: center;
  letter-spacing: var(--ta-letter-spacing-ja);
  min-height: 56px;
  padding: 12px 48px;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

body.--contact .contact-sales-btn:hover {
  background: var(--ta-color-main);
  color: #fff;
}

@media screen and (max-width: 939px) {
  body.--contact .ta-card {
    padding: 28px 18px;
  }

  body.--contact .contact-sales-btn {
    font-size: 16px;
    padding: 10px 32px;
    width: 100%;
  }
}