@charset "UTF-8";

/**
 * サービス一覧ページ（/services/ ・ page-services.php）専用スタイル
 *
 * ■ 設計方針
 * - すべてのセレクタを .pservices 配下にスコープし、既存 assets/css/style.css の
 *   クラス（l- / m- / u- 系）とは一切干渉しない独立スタイルとして作成。
 *   （page-fee.php / assets/css/fee.css と同じ方式）
 * - 見た目は TOP の SERVICES セクション（.m-top-services）に合わせているが、
 *   style.css を再ビルドしても崩れないよう値はこのファイル内で独自に持つ。
 * - 変数はこのファイル内で --psv-* として定義（既存の --color__* 等は上書きしない）。
 *
 * ■ ブレークポイント
 * - PC ファースト。SP は max-width: 767px（既存テーマと同じ基準）。
 */

.pservices {
  /* カラー（既存テーマのトーンに合わせた値をこのファイル内で独自定義） */
  --psv-text: #222222;
  --psv-white: #ffffff;
  --psv-yellow: #ffe800;
  --psv-orange: #ff6a00;
  --psv-gray-700: #7a7a7a;

  /* タイポ */
  --psv-font-ja: "Zen Maru Gothic", sans-serif;

  /* レイアウト */
  --psv-inner: 1112px;
  --psv-duration: 0.3s;

  display: block;
  padding-block: 80px 96px;
  color: var(--psv-text);
  font-family: var(--psv-font-ja);
  line-height: 1.8;
}

.pservices *,
.pservices *::before,
.pservices *::after {
  box-sizing: border-box;
}

.pservices__inner {
  width: 100%;
  max-width: calc(var(--psv-inner) + 48px);
  margin-inline: auto;
  padding-inline: 24px;
}

/* =========================================
   リード
   ========================================= */
.pservices__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.pservices__catch {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.05em;
}

.pservices__lead {
  max-width: 880px;
  font-size: 16px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.04em;
  text-align: left;
}

.pservices__br--sp {
  display: none;
}

/* =========================================
   カード一覧
   ========================================= */
.pservices__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin: 0;
  padding: 0;
  padding-block-start: 56px;
  list-style: none;
}

.pservices__item {
  display: flex;
}

.pservices__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 32px;
  background-color: var(--psv-white);
  border: 2px solid var(--psv-text);
  border-radius: 24px;
  color: var(--psv-text);
  text-decoration: none;
  transition: background-color var(--psv-duration), translate var(--psv-duration);
}

.pservices__card-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.pservices__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: var(--psv-yellow);
  transition: background-color var(--psv-duration);
}

.pservices__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pservices__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--psv-orange);
}

.pservices__text {
  width: 100%;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

/* =========================================
   「詳しく見る」（個別ページが公開済みのカードだけ）
   ========================================= */
.pservices__card-more {
  display: flex;
  justify-content: center;
}

.pservices__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

.pservices__more-circle {
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--psv-yellow);
  transition: background-color var(--psv-duration);
}

/* 2 連矢印トラック（丸の 2 倍幅）。rest は 2 枚目を中央表示し、
   hover で右へ 1 丸分スライド＝1 枚目が左から入りループして見える */
.pservices__more-arrows {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 200%;
  translate: -50% 0;
  transition: translate calc(var(--psv-duration) * 1.6) cubic-bezier(0.33, 1, 0.68, 1);
}

.pservices__more-arrows svg {
  display: block;
  flex-shrink: 0;
  width: 50%;
  height: auto;
}

/* =========================================
   ホバー（リンクありのカードのみ）
   ========================================= */
@media (any-hover: hover) {
  .pservices__card--link:hover {
    background-color: var(--psv-yellow);
    translate: 0 -4px;
  }

  .pservices__card--link:hover .pservices__icon,
  .pservices__card--link:hover .pservices__more-circle {
    background-color: var(--psv-white);
  }

  .pservices__card--link:hover .pservices__more-arrows {
    translate: 0 0;
  }
}

/* =========================================
   SP
   ========================================= */
@media (max-width: 767px) {
  .pservices {
    padding-block: 40px 56px;
  }

  .pservices__inner {
    padding-inline: 16px;
  }

  .pservices__intro {
    gap: 16px;
  }

  .pservices__catch {
    font-size: 18px;
    line-height: 1.7;
  }

  .pservices__lead {
    font-size: 14px;
    line-height: 1.9;
  }

  .pservices__br--sp {
    display: inline;
  }

  .pservices__list {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-block-start: 32px;
  }

  .pservices__card {
    gap: 8px;
    padding: 30px 24px;
    border-radius: 16px;
  }

  .pservices__card-head {
    gap: 8px;
  }

  .pservices__icon {
    width: 80px;
    height: 80px;
  }

  .pservices__title {
    font-size: 18px;
  }

  .pservices__text {
    font-size: 14px;
  }

  .pservices__more {
    font-size: 15px;
  }
}

/* =========================================
   アニメーション抑制設定への配慮
   ========================================= */
@media (prefers-reduced-motion: reduce) {
  .pservices__card,
  .pservices__icon,
  .pservices__more-circle,
  .pservices__more-arrows {
    transition: none;
  }
}