/* HolyTech toB LP 追加CSS（2026-10-26）: (B2) SP固定バーでLINEを主役に／(B3) Google流入向けブロック
   style.css は画像パス(webp化)以外は変更しない。 */

/* ---- (B2) SP固定バー: LINE（緑・幅広・先頭）＋ 資料DL／無料診断（小） ---- */
@media (max-width: 767px) {
  #mv .mainblock .btns { align-items: stretch; }
  #mv .mainblock .btns li { width: 22%; }
  #mv .mainblock .btns li.ht-li-line,
  #mv .mainblock .btns li:has(> a.linecta) { width: 56%; order: -1; }
  #mv .mainblock .btns li a { height: 6rem; }
  #mv .mainblock .btns li a.linecta { background: #06c755; border: 1px solid #fff; }
  #mv .mainblock .btns li a.linecta .sub { font-size: 1.1rem; }
  #mv .mainblock .btns li a.linecta .main { font-size: 1.7rem; display: flex; align-items: center; gap: 0.4rem; }
  #mv .mainblock .btns li a.linecta .main .icon { display: inline-block; line-height: 0; }
  #mv .mainblock .btns li a.linecta .main .icon img { width: 2.2rem; }
  #mv .mainblock .btns li a:not(.linecta) .sub { font-size: 0.8rem; white-space: normal; line-height: 1.1; text-align: center; }
  #mv .mainblock .btns li a:not(.linecta) .main { font-size: 0.98rem; white-space: normal; line-height: 1.1; text-align: center; }
}

/* ---- (B3) Google流入向けブロック（JSが #mv 直下に挿入） ---- */
.ht-gblock { background: #f3f8f6; border-top: 4px solid #045545; padding: 3rem 1.6rem; }
.ht-gblock .ht-gblock-inner { max-width: 1000px; margin: 0 auto; }
.ht-gblock .ht-gblock-ttl { font-size: 2.4rem; font-weight: bold; color: #045545; text-align: center; margin: 0 0 1.6rem; line-height: 1.3; }
.ht-gblock .ht-gblock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.ht-gblock .ht-gblock-card { background: #fff; border-radius: 1rem; padding: 1.8rem 2rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); }
.ht-gblock .ht-gblock-card h3 { font-size: 1.6rem; font-weight: bold; color: #fff; background: #045545; display: inline-block; padding: 0.3rem 1.2rem; border-radius: 2rem; margin: 0 0 1.2rem; }
.ht-gblock .ht-gblock-card ul { list-style: none; margin: 0; padding: 0; }
.ht-gblock .ht-gblock-card li { font-size: 1.5rem; line-height: 1.5; padding: 0.7rem 0; border-bottom: 1px dashed #d8e4e0; color: #222; }
.ht-gblock .ht-gblock-card li:last-child { border-bottom: 0; }
.ht-gblock .ht-gblock-label { display: inline-block; min-width: 11em; font-weight: bold; color: #045545; }
.ht-gblock .ht-gblock-price strong { font-size: 2.2rem; color: #d90034; font-weight: bold; margin-right: 0.3rem; }
.ht-gblock .ht-gblock-case li { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; align-items: baseline; }
.ht-gblock .ht-gblock-case li .ht-gblock-label { flex: 0 0 auto; }
.ht-gblock .ht-gblock-case strong { color: #d90034; font-weight: bold; }
.ht-gblock .ht-gblock-small { font-size: 1.15rem; color: #666; font-weight: normal; }
.ht-gblock .ht-gblock-note { font-size: 1.1rem; color: #777; margin: 1rem 0 0; }
.ht-gblock .ht-gblock-ctas { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.2rem; margin-top: 1.8rem; }
.ht-gblock .ht-gblock-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 6.4rem; border-radius: 0.8rem; font-size: 1.7rem; font-weight: bold; text-decoration: none; text-align: center; line-height: 1.25; padding: 0.8rem 1rem; transition: opacity 0.2s; }
.ht-gblock .ht-gblock-btn:hover { opacity: 0.85; }
.ht-gblock .ht-gblock-btn .ht-gblock-small { display: block; margin-top: 0.3rem; }
.ht-gblock .ht-gblock-consult { background: #045545; color: #fff; }
.ht-gblock .ht-gblock-consult .ht-gblock-small { color: rgba(255, 255, 255, 0.85); }
.ht-gblock .ht-gblock-tel { background: #fff; color: #045545; border: 3px solid #045545; }
.ht-gblock .ht-gblock-line { background: #06c755; color: #fff; flex-direction: row; gap: 0.6rem; }
.ht-gblock .ht-gblock-line img { width: 2.4rem; height: 2.4rem; }
@media (max-width: 767px) {
  .ht-gblock { padding: 2.4rem 1.4rem; }
  .ht-gblock .ht-gblock-ttl { font-size: 2rem; }
  .ht-gblock .ht-gblock-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .ht-gblock .ht-gblock-card { padding: 1.4rem 1.4rem; }
  .ht-gblock .ht-gblock-card li { font-size: 1.35rem; }
  .ht-gblock .ht-gblock-label { display: block; min-width: 0; }
  .ht-gblock .ht-gblock-case li .ht-gblock-label { flex-basis: 100%; }
  .ht-gblock .ht-gblock-price strong { font-size: 2rem; }
  .ht-gblock .ht-gblock-ctas { grid-template-columns: 1fr; gap: 1rem; }
  .ht-gblock .ht-gblock-btn { min-height: 5.6rem; font-size: 1.6rem; }
}