@charset "utf-8";

/* ══════════════════════════════════════════
   PROVITY — PC用ページスタイル (index-pc.css)
   役割: トップページ固有のPC向けスタイル
         新規: 信頼バッジ / 料金ヒント / フォーム改善
   ══════════════════════════════════════════ */

/* ─── メインビジュアル ───────────────────── */
#mainvisual {
  position:    relative;
  padding-top: 8.0rem;
}
#mainvisual div {
  position: absolute;
  bottom:   10%;
  left:     4.5%;
  width:    45.5%;
}
#mainvisual p.trial {
  position:  absolute;
  bottom:    3.0rem;
  left:      50%;
  transform: translateX(-50%);
}
#mainvisual p.trial span {
  color:       var(--color-text);
  font-size:   2.2rem;
  font-weight: 700;
  display:     block;
  text-align:  center;
  position:    absolute;
  width:       100%;
  top:         -4.0rem;
  left:        50%;
  transform:   translateX(-50%);
}
#mainvisual p.trial span::before {
  position:        absolute;
  content:         '';
  background:      url("../image/line-l@2x.png") no-repeat left top;
  background-size: 2.0rem 2.4rem;
  width:  2.0rem;
  height: 2.4rem;
  margin-left: -3.0rem;
  bottom: 0;
}
#mainvisual p.trial span::after {
  position:        absolute;
  content:         '';
  background:      url("../image/line-r@2x.png") no-repeat right top;
  background-size: 2.0rem 2.4rem;
  width:  3.0rem;
  height: 2.4rem;
  bottom: 0;
}
#mainvisual p.trial a {
  color:         var(--color-text);
  font-size:     2.4rem;
  font-weight:   700;
  line-height:   1;
  text-align:    center;
  display:       block;
  background:    var(--color-accent);
  border-radius: var(--radius-btn);
  padding:       2.0rem;
  width:         45.0rem;
  height:        7.0rem;
  box-sizing:    border-box;
  border-bottom: 4px solid var(--color-accent-shadow);
  transition:    var(--transition);
}
#mainvisual p.trial a:hover {
  opacity: 0.82;
}

/* ─── 信頼バッジ ─────────────────────────── */
#trust-badges {
  background:     var(--color-primary);
  padding:        2.0rem 0;
  display:        flex;
  justify-content: center;
  gap:            4.0rem;
  flex-wrap:      wrap;
}
#trust-badges .badge {
  color:       #fff;
  font-size:   1.5rem;
  font-weight: 700;
  display:     flex;
  align-items: center;
  gap:         0.8rem;
  white-space: nowrap;
}
#trust-badges .badge::before {
  content:     '✓';
  display:     inline-block;
  background:  var(--color-accent);
  color:       var(--color-text);
  border-radius: 50%;
  width:       2.4rem;
  height:      2.4rem;
  line-height: 2.4rem;
  text-align:  center;
  font-size:   1.3rem;
  flex-shrink: 0;
}

/* ─── セクション共通タイトル ─────────────── */
h2.h2-title {
  font-weight:    700;
  font-size:      4.2rem;
  text-align:     center;
  margin-bottom:  8.0rem;
  padding-bottom: 3.0rem;
  position:       relative;
}
h2.h2-title::after {
  content:      '';
  background:   var(--color-accent);
  width:        8.0rem;
  height:       0.6rem;
  border-radius: 1.0rem;
  position:     absolute;
  bottom:       0;
  left:         50%;
  transform:    translateX(-50%);
}

/* ─── お悩みセクション ───────────────────── */
#nayami {
  background: var(--color-primary);
  padding:    8.0rem 0 0;
}
#nayami h2 {
  font-size:     3.2rem;
  font-weight:   700;
  text-align:    center;
  color:         #fff;
  margin-bottom: 4.0rem;
}
#nayami h2 span {
  font-size:     2.2rem;
  display:       block;
  margin-bottom: 1.0rem;
}
#nayami p { width: 82.6rem; margin: 0 auto; }

/* ─── 解決セクション ─────────────────────── */
#ressolution {
  padding:    14.0rem 0 11.0rem;
  background: url("../image/arrow@2x.png") no-repeat top center #fff;
  background-size: 20.0rem 7.0rem;
}
#ressolution h2 { width: 68.0rem; margin: 0 auto 6.0rem; }
#ressolution ul {
  display:         flex;
  justify-content: center;
  flex-wrap:       wrap;
  width:           93.0rem;
  margin:          0 auto;
}
#ressolution ul li { margin-right: 6.0rem; margin-bottom: 3.0rem; }
#ressolution ul li:nth-of-type(3),
#ressolution ul li:last-of-type { margin-right: 0; }
#ressolution a {
  text-align:    center;
  display:       block;
  border:        1px solid var(--color-primary);
  background:    #fff;
  width:         27.0rem;
  height:        27.0rem;
  border-radius: 27.0rem;
  box-sizing:    border-box;
  padding-top:   3.0rem;
  transition:    var(--transition);
  position:      relative;
}
#ressolution a span {
  display:     block;
  color:       var(--color-text);
  font-weight: 700;
  font-size:   2.0rem;
  line-height: 1.5;
  margin-bottom: 1.0rem;
}
#ressolution a img { width: 18.6rem; }
#ressolution a::after {
  font-family: 'Material Icons';
  content:     "\e5cf";
  color:       var(--color-primary);
  position:    absolute;
  bottom:      0;
  font-size:   5.0rem;
  left:        50%;
  transform:   translateX(-50%);
}
#ressolution a:hover { background: #F0F6FF; }

/* ─── 特徴セクション ─────────────────────── */
#charactor {
  background: linear-gradient(-50deg, var(--color-bg-blue-light) 0%, var(--color-bg-blue-fade) 100%);
  padding:    9.0rem 0;
}
#charactor .box {
  display:   flex;
  width:     110.0rem;
  margin:    0 auto 8.0rem;
  position:  relative;
}
#charactor .box:last-of-type { margin-bottom: 0; }
#charactor .box figure { width: 42.0rem; position: absolute; top: 0; left: 0; }
#charactor .box dl {
  width:      72.0rem;
  background: #fff;
  margin:     3.0rem 0 0 auto;
  padding:    6.0rem 5.0rem 6.0rem 8.0rem;
  box-sizing: border-box;
  box-shadow: var(--shadow-card);
}
#charactor .box.r figure { width: 42.0rem; position: absolute; top: 0; right: 0; left: auto; }
#charactor .box.r dl { margin: 3.0rem auto 0 0; padding: 6.0rem 8.0rem 6.0rem 5.0rem; }
#charactor .box dl dt {
  font-size:     3.4rem;
  font-weight:   700;
  color:         var(--color-primary);
  line-height:   1.3;
  display:       flex;
  align-items:   center;
  margin-bottom: 4.0rem;
}
#charactor .box dl dt span {
  font-size:     1.4rem;
  font-family:   var(--font-latin);
  font-weight:   700;
  font-style:    italic;
  line-height:   1;
  text-align:    center;
  color:         var(--color-primary);
  display:       block;
  border:        1px solid #C7DEFF;
  border-radius: 8.0rem;
  width:         8.0rem;
  height:        8.0rem;
  margin-right:  2.0rem;
  padding-top:   1.5rem;
  box-sizing:    border-box;
  flex-shrink:   0;
}
#charactor .box dl dt span em { font-size: 2.6rem; display: block; padding-top: 0.5rem; }
#charactor .box dl dd { font-size: 1.6rem; line-height: 1.8; }

/* ─── CTAセクション ──────────────────────── */
.contact {
  text-align: center;
  background: var(--color-primary);
  padding:    5.0rem 0;
}
.contact h2 {
  font-weight:   700;
  font-size:     3.6rem;
  color:         #fff;
  margin-bottom: 4.0rem;
}
.contact h2 span {
  position: relative;
  z-index:  2;
}
.contact h2 span::after {
  content:       '';
  background:    #7994D8;
  width:         100%;
  height:        1.0rem;
  position:      absolute;
  left:          0;
  bottom:        0;
  border-radius: 3.0rem;
  z-index:       -1;
}
.contact p a {
  color:         var(--color-text);
  font-size:     2.4rem;
  font-weight:   700;
  line-height:   2.6rem;
  text-align:    center;
  display:       block;
  background:    var(--color-accent);
  border-radius: var(--radius-btn);
  margin:        0 auto;
  padding:       2.0rem;
  width:         45.0rem;
  height:        7.0rem;
  box-sizing:    border-box;
  border-bottom: 4px solid var(--color-accent-shadow);
  transition:    var(--transition);
}
.contact p a:hover {
  opacity: 0.82;
}

/* ─── 料金ヒントセクション ───────────────── */
#pricing {
  padding:    8.0rem 0;
  background: #fff;
}
#pricing .pricing-cards {
  display:         flex;
  justify-content: center;
  gap:             3.0rem;
  width:           100.0rem;
  margin:          0 auto;
}
#pricing .card {
  flex:           1;
  max-width:      30.0rem;
  border:         2px solid #e0e8f8;
  border-radius:  1.2rem;
  padding:        4.0rem 3.0rem;
  text-align:     center;
  background:     #fff;
  box-shadow:     var(--shadow-card);
  transition:     var(--transition);
}
#pricing .card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(42,75,181,.15); }
#pricing .card.featured {
  border-color: var(--color-primary);
  background:   linear-gradient(160deg, #EEF3FF 0%, #fff 100%);
}
#pricing .card .card-icon {
  font-size:     4.0rem;
  margin-bottom: 2.0rem;
  display:       block;
}
#pricing .card h3 {
  font-size:     2.0rem;
  font-weight:   700;
  color:         var(--color-primary);
  margin-bottom: 1.5rem;
}
#pricing .card p {
  font-size:   1.5rem;
  color:       var(--color-text-muted);
  line-height: 1.7;
}
#pricing .card .badge-free {
  display:       inline-block;
  background:    var(--color-accent);
  color:         var(--color-text);
  font-weight:   700;
  font-size:     1.3rem;
  padding:       0.4rem 1.2rem;
  border-radius: 3.0rem;
  margin-bottom: 1.5rem;
}
#pricing .note {
  text-align:  center;
  font-size:   1.4rem;
  color:       var(--color-text-muted);
  margin-top:  4.0rem;
}

/* ─── システムフロー ─────────────────────── */
#flow { padding: 9.0rem 0; }
#flow p { width: 98.5rem; margin: 0 auto; }
#flow > p:first-of-type {
  font-size:   1.6rem;
  line-height: 1.875;
  text-align:  center;
  margin-bottom: 5.0rem;
}

/* ─── お客様の声 ─────────────────────────── */
#voice {
  background: var(--color-bg-gray);
  padding:    9.0rem 0;
}
#voice .voice-in {
  width:           94.0rem;
  margin:          0 auto;
  display:         flex;
  justify-content: space-between;
  background:      #fff;
  padding:         6.0rem 10.0rem;
  box-sizing:      border-box;
  box-shadow:      var(--shadow-card);
}
#voice .voice-in div { width: 50.0rem; }
#voice .voice-in dt {
  font-size:     1.8rem;
  font-weight:   700;
  line-height:   1.7;
  color:         var(--color-primary);
  margin-bottom: 2.0rem;
}
#voice .voice-in dd { font-size: 1.6rem; line-height: 1.875; }
#voice .voice-in p {
  font-size:   1.6rem;
  border-top:  1px dotted var(--color-primary);
  margin-top:  2.0rem;
  padding-top: 2.0rem;
}
#voice .voice-in figure { width: 17.0rem; }

/* スワイパー */
.swiper { padding-bottom: 6.0rem; }
.swiper-wrapper { height: auto; }
.btn-prev-next { width: 94.0rem; margin: 0 auto; position: relative; }
.swiper-button-next,
.swiper-button-prev {
  width:      7.0rem;
  height:     7.0rem;
  background: var(--color-primary);
  border:     1px solid var(--color-primary);
  border-radius: 7.0rem;
}
.swiper-button-next { top: -18.0rem; right: -12.0rem; }
.swiper-button-prev { top: -18.0rem; left:  -12.0rem; }
.swiper-button-next:hover,
.swiper-button-prev:hover { background: #fff; border: 1px solid var(--color-primary); }
.swiper-button-next::after,
.swiper-button-prev::after { color: #fff; font-size: 2.6rem; }
.swiper-button-next:hover::after,
.swiper-button-prev:hover::after { color: var(--color-primary); }
.swiper-pagination-bullet { width: 1.2rem; height: 1.2rem; }
.swiper-pagination-bullet-active { background: var(--color-primary); }

#voice .ex { width: 94.0rem; margin: 0 auto; padding-top: 10.0rem; }
#voice .ex h3 {
  color:       #fff;
  font-weight: 700;
  font-size:   1.8rem;
  text-align:  center;
  line-height: 1;
  background:  var(--color-primary);
  padding:     1.0rem;
}
#voice .ex div.bg-ex {
  background: #fff;
  padding:    3.0rem 4.0rem;
  display:    flex;
  justify-content: space-between;
}
#voice .ex div.bg-ex ul li { font-size: 1.6rem; margin-bottom: 1.5rem; }

/* ─── 導入フロー ─────────────────────────── */
#flow2 { padding: 9.0rem 0; display: none; }
#flow2 .flow-in { width: 60.0rem; margin: 0 auto 8.0rem; }
#flow2 .flow-in ul li {
  font-size:     1.8rem;
  text-align:    center;
  margin-bottom: 5rem;
  padding:       2.0rem;
  border:        1px solid var(--color-primary);
  border-radius: 5.0rem;
  position:      relative;
}
#flow2 .flow-in ul li span { font-size: 1.2rem; line-height: 1.5; display: block; padding-top: 1.0rem; }
#flow2 .flow-in ul li::after {
  content:   '▼';
  font-size: 2.6rem;
  color:     var(--color-primary);
  position:  absolute;
  bottom:    -3.6rem;
  left:      50%;
  transform: translateX(-50%);
}
#flow2 .flow-in ul li:last-of-type::after { content: ''; }

/* ─── サポート ───────────────────────────── */
#support {
  background: linear-gradient(-50deg, var(--color-bg-blue-light) 0%, var(--color-bg-blue-fade) 100%);
  padding:    9.0rem 0;
}
#support h3 {
  font-size:     2.4rem;
  font-weight:   700;
  text-align:    center;
  line-height:   1.6;
  color:         var(--color-primary);
  margin-bottom: 6.0rem;
}
#support ul { display: flex; justify-content: center; margin-bottom: 6.0rem; }
#support ul li { width: 31.0rem; margin: 0 5.0rem; }
#support p a {
  color:         var(--color-text);
  font-size:     2.4rem;
  font-weight:   700;
  line-height:   2.6rem;
  text-align:    center;
  display:       block;
  background:    var(--color-accent);
  border-radius: var(--radius-btn);
  margin:        0 auto;
  padding:       2.0rem;
  width:         45.0rem;
  height:        7.0rem;
  box-sizing:    border-box;
  border-bottom: 4px solid var(--color-accent-shadow);
  transition:    var(--transition);
}
#support p a:hover { opacity: 0.82; }

/* ─── 機能一覧 ───────────────────────────── */
#function { padding: 9.0rem 0; }
#function .f-list { display: flex; width: 100.0rem; margin: 0 auto; }
#function .f-list h3 {
  color:       #fff;
  font-size:   1.6rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 1.5rem;
  padding:     1.0rem;
}
#function .f-list .lineup { margin-right: 2.0rem; width: 34.0rem; }
#function .f-list .default { margin-right: 2.0rem; width: 32.0rem; }
#function .f-list .other { width: 32.0rem; }
#function .f-list .lineup  h3 { background: var(--color-primary); }
#function .f-list .default h3 { background: #06AEBF; }
#function .f-list .other   h3 { background: #a6a6a6; }
#function .f-list ul { margin-bottom: 2.0rem; }
#function .f-list li {
  font-size:   1.6rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  padding-left: 1.6rem;
  position:    relative;
}
#function .f-list li::before {
  content:  '●';
  font-size: 10px;
  color:    #FF832C;
  position: absolute;
  top:      0.5rem;
  left:     0;
}

/* ─── 画面イメージ ───────────────────────── */
#image { background: var(--color-bg-green); padding: 9.0rem 0 5.0rem; }
#image h2 {
  text-align:    center;
  font-size:     2.4rem;
  font-weight:   700;
  color:         var(--color-primary);
  margin-bottom: 3.0rem;
}
#image ul { width: 63.0rem; margin: 0 auto; }
#image ul li { margin-bottom: 3.0rem; }
#image ul li span {
  font-size:     1.6rem;
  margin-bottom: 2.0rem;
  padding-left:  1.0rem;
  display:       block;
  position:      relative;
}
#image ul li span::before {
  content:  '●';
  font-size: 6px;
  color:    #FF832C;
  position: absolute;
  top:      0.8rem;
  left:     0;
}
#image ul li img { filter: drop-shadow(1px 1px 5px #ddd); }
#image p.comment {
  text-align: center;
  font-size:  1.4rem;
  line-height: 1.7;
  padding-top: 3.0rem;
}

/* ─── FAQ ────────────────────────────────── */
#faq { padding: 9.0rem 0 2.0rem; }
#faq .faq-box { margin-bottom: 8rem; }
#faq h3 { font-size: 2.6rem; font-weight: 700; width: 100.0rem; margin: 0 auto 3.0rem; }
#faq dl {
  border-bottom: 1px dotted var(--color-border);
  width:         100.0rem;
  margin:        0 auto;
  padding:       2.0rem 0;
}
#faq dl:first-of-type { border-top: 1px dotted var(--color-border); }
#faq dl dt {
  color:        var(--color-primary);
  font-size:    1.6rem;
  line-height:  1.6;
  padding-left: 3.5rem;
  position:     relative;
  text-indent:  -2em;
  cursor:       pointer;
}
#faq dl dd {
  font-size:    1.6rem;
  line-height:  1.875;
  padding-top:  1rem;
  padding-left: 3.5rem;
  display:      none;
  position:     relative;
  text-indent:  -2em;
  box-sizing:   border-box;
}
#faq dl dt span.toggle_btn {
  text-indent:  100%;
  white-space:  nowrap;
  width:        24px;
  height:       24px;
  display:      block;
  position:     absolute;
  top:          50%;
  right:        2.5vw;
  transform:    translateY(-50%);
  overflow:     hidden;
}
#faq dl dt span.toggle_btn::before,
#faq dl dt span.toggle_btn::after {
  content:    '';
  display:    block;
  background: #000;
  width:      2.0rem;
  height:     2px;
  position:   absolute;
  top:        50%;
  left:       50%;
  transform:  translate(-50%, -50%);
}
#faq dl dt span.toggle_btn::before { width: 2px; height: 2.0rem; }
#faq dl dt.toggle_title.selected .toggle_btn::before { content: normal; }

/* ─── 会社概要 ───────────────────────────── */
#company { background: var(--color-bg-green); padding: 9.0rem 0; }
#company dl {
  border-bottom: 1px dotted var(--color-border);
  width:         80.0rem;
  margin:        0 auto;
  padding:       2.0rem 0;
  display:       flex;
}
#company dl:first-of-type { border-top: 1px dotted var(--color-border); }
#company dl dt {
  color:        var(--color-primary);
  font-size:    1.6rem;
  line-height:  1.6;
  padding-left: 2.0rem;
  width:        16.0rem;
  box-sizing:   border-box;
}
#company dl dd { font-size: 1.6rem; line-height: 1.6; }

/* ─── お問い合わせフォーム ───────────────── */
#contact { padding: 9.0rem 0; }
#contact p.comment {
  text-align:    center;
  font-size:     1.6rem;
  line-height:   1.7;
  margin-bottom: 2.0rem;
}
#contact form dl {
  border-bottom: 1px dotted var(--color-primary);
  width:         80.0rem;
  margin:        0 auto;
  padding:       2.0rem 0;
  display:       flex;
  align-items:   center;
}
#contact form dl:first-of-type { border-top: 1px dotted var(--color-primary); }
#contact form dl:last-of-type  { margin-bottom: 6.0rem; }

#contact form dl dt {
  font-size:    1.6rem;
  line-height:  1.6;
  padding-left: 2.0rem;
  width:        20.0rem;
  box-sizing:   border-box;
  position:     relative;
}
#contact form dl dt.need::before {
  content:        '必須';
  line-height:    1;
  font-size:      1.4rem;
  background:     var(--color-danger);
  border-radius:  0.5rem;
  display:        inline-block;
  padding:        0.5rem;
  color:          #fff;
  position:       absolute;
  top:            0;
  right:          0;
}
#contact form dl dt.option::before {
  content:       '任意';
  line-height:   1;
  font-size:     1.4rem;
  background:    #888;
  color:         #fff;
  border-radius: 0.5rem;
  display:       inline-block;
  padding:       0.5rem;
  position:      absolute;
  top:           0;
  right:         0;
}
#contact form dl dd {
  font-size:   1.6rem;
  line-height: 1.6;
  width:       60.0rem;
  padding:     0 2.0rem 0 4.0rem;
  box-sizing:  border-box;
}
#contact form dl dd input[type="text"],
#contact form dl dd input[type="email"],
#contact form dl dd input[type="tel"] {
  font-size:   1.6rem;
  border:      1px solid var(--color-border);
  padding:     2.0rem;
  width:       100%;
  box-sizing:  border-box;
  border-radius: 0.4rem;
  transition:  border-color var(--transition);
}
#contact form dl dd input[type="text"]:focus,
#contact form dl dd input[type="email"]:focus,
#contact form dl dd input[type="tel"]:focus {
  border-color: var(--color-primary);
  outline:      none;
}
#contact form dl dd input.short[type="text"] { width: 60%; margin-left: 2.0rem; }
#contact form dl dd textarea {
  font-size:     1.6rem;
  border:        1px solid var(--color-border);
  padding:       2.0rem;
  width:         100%;
  height:        15.0rem;
  box-sizing:    border-box;
  border-radius: 0.4rem;
  transition:    border-color var(--transition);
}
#contact form dl dd textarea:focus { border-color: var(--color-primary); outline: none; }

/* チェックボックス行 */
.form-check-row {  width:         80.0rem;  margin:        0 auto 2.0rem;  padding:       1.5rem 2.0rem;  border-radius: 0.6rem;}
.form-check-row.trial-check { background: #EEF3FF; border: 1px solid #C7DEFF; }
.form-check-row.privacy-check { border-top: 1px dotted var(--color-primary); padding-top: 3.0rem; }
.form-check-row label {  display:     flex;  align-items: center;  gap:         1.2rem;  cursor:      pointer;  font-size:   1.6rem;  font-weight: 700;  line-height: 1.5;}
.form-check-row input[type="checkbox"] {  width:      2.4rem;  height:     2.4rem;  flex-shrink: 0;  accent-color: var(--color-primary);  cursor:     pointer;}
.form-check-row.trial-check label { color: var(--color-primary); }
.form-check-row .check-note {  font-size:   1.4rem;  color:       var(--color-text-muted);  font-weight: 400;  margin-top:  0.6rem;  padding-left: 3.6rem;}
.privacy-agree-text {  font-size:   1.4rem;  color:       var(--color-text-muted);}
.privacy-agree-text a {  color:           var(--color-primary);  text-decoration: underline;}

/* 送信ボタン */
.send {
  color:         var(--color-text);
  font-size:     2.4rem;
  font-weight:   700;
  line-height:   1;
  text-align:    center;
  border:        none;
  display:       block;
  background:    var(--color-accent);
  border-radius: var(--radius-btn);
  margin:        0 auto 3.0rem;
  padding:       2.0rem;
  width:         45.0rem;
  height:        7.0rem;
  box-sizing:    border-box;
  border-bottom: 4px solid var(--color-accent-shadow);
  transition:    var(--transition);
  cursor:        pointer;
}
.send:hover {
  opacity: 0.82;
}
.back {
  color:         #fff;
  font-size:     2.2rem;
  font-weight:   700;
  line-height:   2.6rem;
  text-align:    center;
  border:        none;
  display:       block;
  background:    #888;
  border-radius: var(--radius-btn);
  margin:        0 auto 3.0rem;
  padding:       2.0rem;
  width:         30.0rem;
  height:        7.0rem;
  box-sizing:    border-box;
  cursor:        pointer;
}

/* 完了ページ */
#contact.complete { padding: 9.0rem 0 10.0rem; }
#contact.complete p.txt-comp {
  font-size:   1.6rem;
  text-align:  center;
  line-height: 1.7;
  border:      1px solid var(--color-border);
  width:       50.0rem;
  margin:      0 auto;
  padding:     4.0rem;
}
p.btn-top a {
  color:         var(--color-text);
  font-size:     2.4rem;
  font-weight:   700;
  line-height:   2.6rem;
  text-align:    center;
  display:       block;
  background:    var(--color-accent);
  border-radius: var(--radius-btn);
  margin:        0 auto 9.0rem;
  padding:       2.0rem;
  width:         45.0rem;
  height:        7.0rem;
  box-sizing:    border-box;
  border-bottom: 4px solid var(--color-accent-shadow);
  transition:    var(--transition);
}
p.btn-top a:hover { opacity: 0.82; }

.errMsg { color: #d00; }

/* ─── ページトップボタン ─────────────────── */
#page-top {
  position:      fixed;
  right:         3.0rem;
  bottom:        3.0rem;
  width:         5.0rem;
  height:        5.0rem;
  background:    var(--color-primary);
  color:         #fff;
  font-size:     2.0rem;
  font-weight:   700;
  line-height:   5.0rem;
  text-align:    center;
  border-radius: 50%;
  box-shadow:    0 4px 12px rgba(0,0,0,.2);
  opacity:       0;
  pointer-events: none;
  transition:    opacity .3s ease;
  z-index:       200;
  text-decoration: none;
}
#page-top:hover { opacity: 0.75 !important; }

@media only screen and (max-width: 750px) {
  #page-top {
    right:       2.0rem;
    bottom:      2.0rem;
    width:       8.0rem;
    height:      8.0rem;
    font-size:   3.0rem;
    line-height: 8.0rem;
  }
}