/**
 * a39: LP共通部品のスタイル
 *
 * 対象: partials/consultant-card.php / partials/voice-cards.php / partials/sp-sticky-cta.php
 * 現在は訪問相談LP（/service/visit）でのみ読み込む（header.php の is_page('visit') 分岐）。
 *
 * 書き方の約束（トップページで global/import.css が読まれず 1rem=16px になる罠を避けるため）
 *  - サイズは px で書く（rem を使わない）
 *  - common.css のユーティリティ（.wsN など）に依存しない
 *  - style.css の all:unset で hidden 属性が効かないため、各ブロックで [hidden] を定義し直す
 *
 * 予約ボタンの色（2026-09-26）
 *  - 色は CSS変数 --lp-cta-bg / --lp-cta-bg-hover で切り替える。未指定なら従来のオレンジ
 *    #B85A00（白文字 4.67:1）/ hover #8F4600 のまま（オンラインLP移行時もこの既定値で見た目が変わらない）
 *  - 訪問相談LPはモディファイア .lp-btn--visit / .lp-spCta--visit で「訪問相談の緑」にする。
 *    サイト共通の訪問色 --visit-color #1EAD82 は白文字で 2.86:1 と基準未達のため、
 *    同じ色相で濃くした #178262（4.77:1）/ hover #136D52（6.29:1）を使う
 */

.lp-consultants [hidden],
.lp-voice [hidden],
.lp-spCta [hidden] {
  display: none;
}

/* ---------------------------------------------------------------
 * 予約ボタン（.lp-btn）と LP別の色
 * ------------------------------------------------------------- */
.lp-btn--visit,
.lp-spCta--visit {
  --lp-cta-bg: #178262;
  --lp-cta-bg-hover: #136D52;
}
a.lp-btn,
a.lp-btn:link,
a.lp-btn:visited {
  display: block;
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 18px 16px;
  background: var(--lp-cta-bg, #B85A00);
  border-radius: 10px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.12);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
a.lp-btn:hover,
a.lp-btn:focus-visible {
  background: var(--lp-cta-bg-hover, #8F4600);
  color: #fff;
}
a.lp-btn:focus-visible {
  outline: 3px solid #1971c2;
  outline-offset: 3px;
}
@media (max-width: 767px) {
  a.lp-btn,
  a.lp-btn:link,
  a.lp-btn:visited {
    max-width: none;
    font-size: 18px;
  }
}

/* ---------------------------------------------------------------
 * コンサルタントカード（partials/consultant-card.php）
 * 呼び出し側で <ul class="lp-consultants__list"> に入れる
 * ------------------------------------------------------------- */
.lp-consultants__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-consultant-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  text-align: center;
}
.lp-consultant-card__figure {
  display: block;
  width: 120px;
  margin: 0 auto 12px;
}
.lp-consultant-card__img {
  display: block;
  width: 120px;
  height: 120px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
}
.lp-consultant-card__name {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}
.lp-consultant-card__name a {
  color: #333;
  text-decoration: none;
}
.lp-consultant-card__position {
  margin: 0 0 8px;
  font-size: 13px;
  color: #495057;
  line-height: 1.5;
}
.lp-consultant-card__qualifications {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.lp-consultant-card__qualifications li {
  display: inline-block;
  padding: 3px 10px;
  background: #e8f4fd;
  color: #1971c2;
  border-radius: 20px;
  font-size: 12px;
  line-height: 1.5;
}
/* 業界歴は資格とは別の色にして区別する */
.lp-consultant-card__qualifications li.lp-consultant-card__career {
  background: #e6f6f0;
  color: #0f6b4f;
  font-weight: 700;
}
.lp-consultant-card__action,
.lp-consultant-card__profile {
  display: block;
  width: 100%;
  max-width: 240px;
  box-sizing: border-box;
  margin: auto auto 0;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}
.lp-consultant-card__action {
  margin-bottom: 8px;
  background: #B85A00;
  color: #fff;
}
.lp-consultant-card__profile {
  border: 1px solid #00A39D;
  background: #fff;
  color: #00827d;
}
.lp-consultant-card__action + .lp-consultant-card__profile {
  margin-top: 0;
}
@media (max-width: 767px) {
  .lp-consultants__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .lp-consultant-card {
    padding: 16px 10px;
  }
  .lp-consultant-card__figure,
  .lp-consultant-card__img {
    width: 96px;
    height: 96px;
  }
  .lp-consultant-card__name {
    font-size: 15px;
  }
  .lp-consultant-card__qualifications li {
    font-size: 11px;
    padding: 2px 8px;
  }
  .lp-consultant-card__action,
  .lp-consultant-card__profile {
    font-size: 13px;
    padding: 10px 6px;
  }
}

/* 「もっと見る」（assets/js/lp-more.js）。7件目以降はサーバー側で hidden。JSが動くとボタンが出て、
   押すたびに data-step 件ずつ追加表示する。JSが動かない環境では noscript の一覧リンクだけ出る */
.lp-consultants__more {
  margin: 20px 0 0;
  text-align: center;
}
.lp-consultants__moreBtn {
  display: inline-block;
  min-width: 220px;
  padding: 12px 24px;
  border: 1px solid #00A39D;
  border-radius: 999px;
  background: #fff;
  color: #00827d;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}
.lp-consultants__moreLink {
  color: #1971c2;
  font-size: 15px;
  text-decoration: underline;
}
.lp-consultants__moreBtn:hover {
  background: #f3fbfd;
}
.lp-consultants__moreBtn:focus-visible {
  outline: 3px solid #1971c2;
  outline-offset: 3px;
}

/* ---------------------------------------------------------------
 * お客様の声（partials/voice-cards.php）
 * ------------------------------------------------------------- */
.lp-voice__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-voice__card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  text-align: left;
}
.lp-voice__meta {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: #00827d;
  line-height: 1.5;
}
.lp-voice__topics {
  margin: 0 0 10px;
  font-size: 13px;
  color: #495057;
  line-height: 1.6;
}
.lp-voice__topics-label {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 8px;
  background: #f1f3f5;
  border-radius: 4px;
  font-size: 12px;
}
.lp-voice__text {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.8;
  color: #333;
}
.lp-voice__more {
  margin-top: auto;
  font-size: 13px;
  font-weight: 700;
  color: #1971c2;
  text-decoration: underline;
}
@media (max-width: 767px) {
  .lp-voice__list {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------
 * SP追従CTA（partials/sp-sticky-cta.php）
 * 背景は --lp-cta-bg（既定 #B85A00 × 白文字 = 4.67:1、訪問は .lp-spCta--visit で #178262 = 4.77:1）
 * ------------------------------------------------------------- */
.lp-spCta {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 11; /* 既存 .l-header__cta.-sp・.online-spCta と同値 */
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
  transform: translateY(110%);
  transition: transform 0.3s ease;
}
.lp-spCta.is-show {
  transform: translateY(0);
}
.lp-spCta .lp-spCta__btn,
.lp-spCta .lp-spCta__btn:link,
.lp-spCta .lp-spCta__btn:visited {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px; /* タップ領域44px以上を確保 */
  box-sizing: border-box;
  border-radius: 8px;
  background: var(--lp-cta-bg, #B85A00);
  color: #fff;
  text-decoration: none;
}
.lp-spCta .lp-spCta__btn:hover,
.lp-spCta .lp-spCta__btn:focus-visible {
  background: var(--lp-cta-bg-hover, #8F4600);
}
.lp-spCta .lp-spCta__btn:focus-visible {
  outline: 3px solid #1971c2;
  outline-offset: 2px;
}
.lp-spCta__label {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}
.lp-spCta__sub {
  font-size: 11px;
  line-height: 1.4;
}
@media (min-width: 1024px) {
  .lp-spCta {
    display: none;
  }
}
@media (max-width: 1023px) {
  /* 追従バーに末尾コンテンツが隠れないよう余白を確保（<main> に付ける修飾クラス） */
  .l-main.l-main--hasSpCta {
    padding-bottom: 80px;
  }
}