@charset "utf-8";

/* ══════════════════════════════════════════
   PROVITY — スマホ用ページスタイル (index-sp.css)
   役割: トップページのモバイル向けオーバーライド
   ══════════════════════════════════════════ */

@media only screen and (max-width: 750px) {

/* ─── メインビジュアル ─ */
#mainvisual { padding-top: 8.0rem; }
#mainvisual div { position: relative; bottom: 0; left: 0; width: 100%; }
#mainvisual figure { height: 143.0rem; }
#mainvisual p.trial { position: absolute; bottom: 9.0rem; }
#mainvisual p.trial span {
  font-size: 3.0rem;
  margin-bottom: 2.0rem;
  position: absolute;
  width: 100%;
  top: -5.0rem;
  left: 50%;
  transform: translateX(-50%);
}
#mainvisual p.trial a {
  font-size: 3.0rem;
  line-height: 4.6rem;
  border-radius: 10.0rem;
  width:  65.0rem;
  height: 10.0rem;
}

/* ─── 信頼バッジ ─ */
#trust-badges {
  gap:     2.5rem;
  padding: 3.0rem 2.0rem;
}
#trust-badges .badge { font-size: 2.2rem; }
#trust-badges .badge::before {
  width:       3.6rem;
  height:      3.6rem;
  line-height: 3.6rem;
  font-size:   1.8rem;
}

/* ─── h2タイトル ─ */
h2.h2-title { font-size: 5.0rem; margin-bottom: 8.0rem; }

/* ─── お悩み ─ */
#nayami { padding: 11.0rem 0 0; }
#nayami h2 { font-size: 4.0rem; margin-bottom: 7.0rem; }
#nayami p { width: 100%; }

/* ─── 解決 ─ */
#ressolution { padding: 17.0rem 0 11.0rem; }
#ressolution h2 { width: 65.0rem; height: 12.8rem; margin: 0 auto 6.0rem; }
#ressolution ul { width: 58.0rem; }
#ressolution ul li { margin-right: 4.0rem; margin-bottom: 4.0rem; }
#ressolution ul li:nth-of-type(2n) { margin-right: 0; }
#ressolution ul li:nth-of-type(3)  { margin-right: 4.0rem; }
#ressolution a { padding-top: 2.0rem; }
#ressolution a img { width: 16.2rem; height: 11.32rem; }
#ressolution a span { font-size: 2.4rem; }

/* ─── 特徴 ─ */
#charactor { padding: 11.0rem 0; }
#charactor .box { display: block; width: 100%; margin: 0 auto 8.0rem; }
#charactor .box figure {
  width:         68.0rem;
  height:        52.0rem;
  position:      relative;
  margin-bottom: -26.0rem;
}
#charactor .box dl,
#charactor .box.r dl {
  width:   100%;
  margin:  0 auto;
  padding: 32.0rem 5.0rem 10.0rem 5.0rem;
}
#charactor .box.r figure {
  width:    68.0rem;
  position: relative;
  margin-bottom: -26.0rem;
  margin-left: auto;
}
#charactor .box dl dt {
  font-size:     5.8rem;
  text-align:    center;
  display:       block;
  margin-bottom: 6.0rem;
}
#charactor .box dl dt span {
  font-size:     2.8rem;
  border-radius: 16.0rem;
  width:         16.0rem;
  height:        16.0rem;
  margin:        0 auto 5.0rem;
  padding-top:   4.0rem;
}
#charactor .box dl dt span em { font-size: 5.2rem; padding-top: 1.0rem; }
#charactor .box dl dd { font-size: 2.6rem; }

/* ─── CTA ─ */
.contact { padding: 10.0rem 0; }
.contact h2 { font-size: 4.8rem; margin-bottom: 6.0rem; }
.contact h2 span { line-height: 1.8; }
.contact p a { font-size: 3.4rem; line-height: 4.6rem; width: 65.0rem; height: 10.0rem; }

/* ─── 料金ヒント ─ */
#pricing { padding: 8.0rem 0; }
#pricing .pricing-cards {
  flex-direction: column;
  align-items:    center;
  width:          65.0rem;
}
#pricing .card { max-width: 65.0rem; width: 100%; }
#pricing .card .card-icon { font-size: 6.0rem; }
#pricing .card h3 { font-size: 3.2rem; }
#pricing .card p  { font-size: 2.4rem; }
#pricing .card .badge-free { font-size: 2.0rem; }
#pricing .note { font-size: 2.2rem; }

/* ─── システムフロー ─ */
#flow { padding: 11.0rem 0; }
#flow p { width: 70.0rem; }

/* ─── お客様の声 ─ */
#voice { padding: 11.0rem 0; }
#voice .voice-in {
  width:   65.0rem;
  display: block;
  padding: 7.0rem;
}
#voice .voice-in div { width: 100%; }
#voice .voice-in dt  { font-size: 2.8rem; margin-bottom: 4.0rem; }
#voice .voice-in dd  { font-size: 2.6rem; }
#voice .voice-in p   { font-size: 2.6rem; margin-top: 4.0rem; padding-top: 4.0rem; }
#voice .voice-in figure { margin-left: auto; margin-top: -2.0rem; }
#voice .ex { width: 65.0rem; }
#voice .ex h3 { font-size: 2.8rem; padding: 2.0rem; }
#voice .ex div.bg-ex { padding: 4.0rem 5.0rem; flex-wrap: wrap; }
#voice .ex div.bg-ex ul { width: 50%; }
#voice .ex div.bg-ex ul li { font-size: 2.6rem; margin-bottom: 2.0rem; }
.btn-prev-next { width: 100%; }
.swiper-button-next,
.swiper-button-prev { width: 10.0rem; height: 10.0rem; border-radius: 10.0rem; }
.swiper-button-next { top: -50.0rem; right: 0; }
.swiper-button-prev { top: -50.0rem; left:  0; }
.swiper-button-next::after,
.swiper-button-prev::after { font-size: 3.4rem; }
.swiper-pagination-bullet { width: 2.4rem; height: 2.4rem; }

/* ─── 導入フロー ─ */
#flow2 { padding: 11.0rem 0; display: none; }
#flow2 .flow-in { width: 60.0rem; margin: 0 auto 8.0rem; }
#flow2 .flow-in ul li { font-size: 2.6rem; }
#flow2 .flow-in ul li span { font-size: 1.8rem; }

/* ─── サポート ─ */
#support { padding: 11.0rem 0; }
#support h3 { font-size: 2.8rem; margin-bottom: 9.0rem; }
#support ul { margin-bottom: 7.0rem; }
#support ul li { margin: 0 1.5rem; height: 31.0rem; }
#support p { font-size: 2.6rem; width: 65.0rem; }
#support p a { font-size: 3.4rem; line-height: 4.6rem; width: 65.0rem; height: 10.0rem; }

/* ─── 機能一覧 ─ */
#function { padding: 11.0rem 0 7.0rem; }
#function .f-list { display: block; width: 65.0rem; }
#function .f-list h3 { font-size: 2.8rem; margin-bottom: 3.0rem; padding: 2.0rem; }
#function .f-list .lineup,
#function .f-list .default,
#function .f-list .other { margin-right: 0; width: 100%; }
#function .f-list ul { margin-bottom: 5.0rem; padding-left: 3.0rem; }
#function .f-list li { font-size: 2.6rem; margin-bottom: 1.0rem; padding-left: 2.6rem; }

/* ─── 画面イメージ ─ */
#image { padding: 11.0rem 0; }
#image h2 { font-size: 3.0rem; margin-bottom: 7.0rem; }
#image ul { display: block; width: 63.0rem; margin: 0 auto; }
#image ul li { width: 63.0rem; height: 41.5rem; margin-bottom: 10.0rem; }
#image ul li:last-of-type { margin-bottom: 5.0rem; }
#image ul li span { font-size: 2.6rem; margin-bottom: 3.0rem; padding-left: 2.0rem; }
#image p.comment { font-size: 2.2rem; }

/* ─── FAQ ─ */
#faq { padding: 11.0rem 0 4.0rem; }
#faq h3 { font-size: 3.2rem; width: 65.0rem; margin: 0 auto 3.0rem; }
#faq dl { width: 65.0rem; padding: 3.0rem 4.0rem; box-sizing: border-box; }
#faq dl dt { font-size: 3.0rem; padding-left: 3.0rem; padding-right: 5.0rem; }
#faq dl dt span.toggle_btn {
  right: -4.0rem;
}
#faq dl dt span.toggle_btn::before,
#faq dl dt span.toggle_btn::after { width: 3.0rem; }
#faq dl dt span.toggle_btn::before { width: 2px; height: 3.0rem; }
#faq dl dd { font-size: 2.6rem; padding-left: 5rem; margin-left: -2rem; }

/* ─── 会社概要 ─ */
#company { padding: 11.0rem 0; }
#company dl { width: 65.0rem; padding: 4.0rem 0; display: block; }
#company dl dt { font-size: 2.8rem; margin-bottom: 2.0rem; padding-left: 0; width: 100%; }
#company dl dd { font-size: 2.8rem; line-height: 1.7; }

/* ─── フォーム ─ */
#contact { padding: 11.0rem 0; }
#contact p.comment { font-size: 2.6rem; margin-bottom: 4.0rem; }
#contact form dl { width: 65.0rem; padding: 4.0rem 0; display: block; }
#contact form dl:last-of-type { margin-bottom: 6.0rem; }
#contact form dl dt {
  font-size:     2.6rem;
  margin-bottom: 2.0rem;
  padding-left:  0;
  width:         100%;
}
#contact form dl dt.need::before,
#contact form dl dt.option::before { font-size: 2.2rem; padding: 1.0rem; }
#contact form dl dd { font-size: 2.6rem; width: 100%; padding: 0; }
#contact form dl dd input[type="text"],
#contact form dl dd input[type="email"],
#contact form dl dd input[type="tel"] { font-size: 2.6rem; }
#contact form dl dd input.short[type="text"] { width: 40%; }
#contact form dl dd textarea { font-size: 2.6rem; height: 30.0rem; }

/* チェックボックス */
.form-check-row { width: 65.0rem; padding: 2.0rem 1.0rem; }
.form-check-row label { font-size: 2.6rem; gap: 2.0rem; }
.form-check-row input[type="checkbox"] { width: 3.6rem; height: 3.6rem; }
.form-check-row .check-note { font-size: 2.2rem; padding-left: 5.6rem; margin-top: 1.0rem; }
.privacy-agree-text { font-size: 2.2rem; }

.send {
  font-size: 3.4rem;
  line-height: 4.6rem;
  width:  65.0rem;
  height: 10.0rem;
}

/* 完了ページ */
#contact.complete { padding: 20.0rem 0 10.0rem; }
#contact.complete p.txt-comp { font-size: 2.6rem; width: 65.0rem; padding: 3.0rem; box-sizing: border-box; }
p.btn-top a { font-size: 3.4rem; line-height: 4.6rem; width: 65.0rem; height: 10.0rem; }

} /* end @media */