/* =========================================================
   pages.css — ページ固有スタイル
   依存: tokens.css / base.css / components.css

   対応Figma: 01_TOP 14:2 / 02_About 50:2 / 03_Services 52:76 /
   08_Cases 56:379 / 09_Case_Detail 57:460 / 10_Contact 57:576 /
   10b_Error 186:1650 / 10c_Thanks 186:1719 / 11_Privacy 95:1191 / 12_404 95:1267
   ＋各SP版
   ========================================================= */

/* =========================================================
   共通: ページタイトル・セクションリズム
   ========================================================= */
.page-title {
  padding: var(--space-6xl) 0 var(--space-lg);
}

.page-title .breadcrumb {
  margin-bottom: var(--space-lg);
}

.page-title__en {
  color: var(--color-text-primary);
}

.page-title__jp {
  margin-top: var(--space-lg);
  font-size: var(--text-label-s);
  font-weight: 500;
  color: var(--color-text-secondary);
}

.page-title__lead {
  margin-top: var(--space-3xl);
  font-size: var(--text-body);
  color: var(--color-text-primary);
  max-width: 1215px;
}

.section-block {
  padding-block: var(--space-3xl);
}

/* =========================================================
   TOP: 緑の曲線背景（Figma: Subtract 219:1827）
   Hero下部からServicesセクションまでを覆い、その上に
   WPセンターバナーとサービスカードが乗る
   ========================================================= */
.front-page {
  position: relative;
  overflow-x: clip; /* 曲線が横にはみ出しても横スクロールさせない */
}

/* 上下のカーブは高さ固定・中央は単色で伸縮させる（縦に引き伸ばすと曲線が歪むため3層で構成） */
.top-curve {
  position: absolute;
  top: 296px; /* Figma: Subtract y=372 − ヘッダー76（Heroはmain先頭） */
  left: 0;
  width: 100%;
  height: 848px;
  background:
    url("../img/top-curve-top.svg") top center / 100% 122px no-repeat,
    url("../img/top-curve-bottom.svg") bottom center / 100% 128px no-repeat,
    linear-gradient(var(--color-accent-primary), var(--color-accent-primary))
      center 122px / 100% calc(100% - 250px) no-repeat;
  z-index: 0;
  pointer-events: none;
}

/* コンテンツは曲線より前面に */
.front-page > .hero,
.front-page > .top-wpcenter,
.front-page > .top-services,
.front-page > .top-cases {
  position: relative;
  z-index: 1;
}

/* 緑の上に乗るServicesセクションは白文字（Figma準拠） */
.front-page .top-services .section-head,
.front-page .top-services .section-head__star,
.front-page .top-services .section-lead {
  color: var(--color-text-inverse);
}

/* =========================================================
   TOP: セクション間の余白（Figma準拠・上パディングで間隔を作る）
   WPCenter=44 / Services=88 / Cases=88（いずれも下0）
   ========================================================= */
.front-page .top-wpcenter {
  padding: 44px 0 0;
}

.front-page .top-services,
.front-page .top-cases {
  padding: var(--space-section) 0 0; /* 88 */
}

/* セクション見出し直下のリード文（Figma: Services/Cases 218:1809・219:1810） */
.section-lead {
  margin-top: var(--space-2xl); /* 28（SectionHeadとのgap） */
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-primary);
}

/* リード文がある場合、見出し直後のマージンは .section-lead 側で持つ */
.top-services .section-head,
.top-cases__head {
  margin-bottom: 0;
}

.section-lead + .top-services__grid,
.section-lead + .cases-grid {
  margin-top: var(--space-2xl); /* 28 */
}

/* =========================================================
   TOP: WPセンター
   ========================================================= */
/* 2026-08-03: セクション見出し・バナー内タイトル・チップを廃止（ロゴ＋説明＋外部アイコンのみ）
   左右余白48px（SP16px）はデザインどおり維持し、1440pxの上限だけ解除。
   → ワイドモニターでも余白が広がらず、常に「画面幅 − 96px」で伸びる */
.top-wpcenter > .container {
  max-width: none; /* 1440px制限を解除（左右パディングは .container の48px/16pxのまま） */
}

.solution-row {
  display: flex;
  align-items: center;
  gap: var(--space-3xl);
  width: 100%;
  padding: var(--space-2xl); /* 28 */
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg); /* 10 */
  color: var(--color-text-primary);
}

.solution-row__logo {
  width: 150px;
  flex: none;
}

.solution-row__desc {
  flex: 1;
  font-size: 12.5px;
  color: var(--color-text-secondary);
  max-width: 520px;
}

.solution-row__ext {
  width: 20px;
  height: 20px;
  color: var(--color-icon-default);
  flex: none;
}

/* =========================================================
   TOP: サービス4カード（写真＋ダークオーバーレイ）
   ========================================================= */
.top-services .section-head {
  margin-bottom: var(--space-2xl);
}

.top-services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md); /* 12 */
}

.svc-photo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 440px;
  padding: var(--space-3xl) var(--space-2xl) var(--space-2xl);
  border-radius: var(--radius-xl);
  background-size: cover;
  background-position: center;
  color: var(--color-text-inverse);
  overflow: hidden;
  isolation: isolate;
}

/* オーバーレイ（2026-08-04: PC/SPとも全カード一律30%） */
.svc-photo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.3);
  z-index: -1;
}

.svc-photo-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.svc-photo-card__en {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-display-s); /* 36 */
  line-height: 1.25;
}

.svc-photo-card__jp {
  font-size: var(--text-body-s);
  font-weight: 700; /* Figma: Noto Sans JP Bold */
}

.svc-photo-card__foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.svc-photo-card__desc {
  font-size: var(--text-body-s);
  font-weight: 700; /* Figma: Noto Sans JP Bold */
  line-height: 1.7;
}

.svc-photo-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: 14px;
  font-weight: 500;
}

/* =========================================================
   TOP: Cases セクション見出し行
   ========================================================= */
.top-cases__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2xl);
}

/* =========================================================
   Services ページ（4行・交互レイアウト）
   ========================================================= */
.service-list .svc-row {
  display: flex;
  align-items: center;
  gap: var(--space-6xl);
  padding: 40px;
  margin-bottom: var(--space-lg);
  background: var(--color-bg-surface);
  border-radius: var(--radius-xl);
  scroll-margin-top: 100px; /* アンカー遷移時にヘッダーへ隠れない */
}

.svc-row--reverse {
  flex-direction: row-reverse;
}

.svc-row__visual {
  width: 480px;
  aspect-ratio: 480 / 300;
  object-fit: cover;
  border-radius: var(--radius-lg);
  flex: none;
}

.svc-row__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  max-width: 560px;
}

.svc-row__num {
  color: var(--color-text-tertiary);
}

.svc-row__jp {
  color: var(--color-text-secondary);
}

.svc-row__desc {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
}

/* =========================================================
   Cases 一覧（フィルタ・グリッド・ページネーション）
   ========================================================= */
.cases-filter {
  padding-block: var(--space-sm) 0;
}

.cases-filter__row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.chip--active {
  border-color: var(--color-text-primary);
  color: var(--color-text-primary);
}

.cases-grid {
  display: grid;
  gap: var(--space-lg);
}

.cases-grid--three {
  grid-template-columns: repeat(3, 1fr);
}

/* WPページネーション（.page-numbers） */
.pagination {
  margin-top: var(--space-4xl);
}

.pagination .nav-links {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: var(--text-body);
}

.pagination .page-numbers.current {
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

/* =========================================================
   事例詳細
   ========================================================= */
.page-title--case .chip {
  margin-bottom: var(--space-lg);
}

.case-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-primary);
}

.case-client {
  margin-top: var(--space-lg);
}

.case-visual__img {
  width: 100%;
  aspect-ratio: 1344 / 520;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.case-summary__card {
  padding: var(--space-lg) var(--space-5xl);
}

.case-body__card {
  padding: var(--space-5xl);
}

.case-block {
  margin-bottom: var(--space-2xl);
}

.case-block__heading {
  margin-bottom: var(--space-md);
}

.case-block__body {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  max-width: 1100px;
}

/* ---- サブ画像スライダー（ドットのみ・最大10枚） ---- */
.case-slider {
  margin-top: var(--space-3xl);
}

.case-slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: var(--space-lg);
  scrollbar-width: none; /* Firefox */
  border-radius: var(--radius-lg);
}

.case-slider__track::-webkit-scrollbar {
  display: none;
}

.case-slider__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.case-slider__img {
  width: 100%;
  aspect-ratio: 1120 / 380;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.case-slider__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.case-slider__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-border-default);
  cursor: pointer;
}

.case-slider__dot.is-active {
  background: var(--color-accent-primary);
}

.other-cases .section-head {
  margin-bottom: var(--space-2xl);
}

/* =========================================================
   About
   ========================================================= */
.about-cols__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4xl);
}

.about-cols .section-head,
.about-clients .section-head {
  margin-bottom: var(--space-2xl);
}

.message-card {
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
}

.message-card__photo {
  aspect-ratio: 584 / 460;
  border-radius: var(--radius-lg);
  background: var(--color-border-default);
}

.message-card__copy {
  padding: var(--space-xl) var(--space-xs) 0;
}

.message-card__bio {
  margin-top: var(--space-lg);
}

.profile-card {
  padding: var(--space-xl) var(--space-5xl);
}

.clients-card {
  padding: 40px;
}

.clients-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.client-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88px;
  border-radius: var(--radius-md);
  background: var(--color-gray-100);
  color: var(--color-text-tertiary);
}

/* =========================================================
   Contact フォーム（CF7）＋ エラー表示（10b準拠）
   ========================================================= */
.form-card {
  padding: var(--space-5xl);
}

.form-card__lead {
  font-size: var(--text-body);
  color: var(--color-text-primary);
  max-width: 800px;
  margin-bottom: var(--space-2xl);
}

.form-field {
  max-width: 800px;
  margin-bottom: var(--space-2xl);
}

.form-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-label-s);
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

/* CF7は入力欄を span.wpcf7-form-control-wrap で包む（inline要素）ため
   ブロック化しないと width:100% が効かない */
.form-card .wpcf7-form-control-wrap {
  display: block;
}

/* CF7デフォルト構造（フォーム全体が1つの<p>＋<br>区切り）で貼られた場合の保険。
   雛形（assets/cf7-contact-form.html）を使えば .form-field が付き、この指定は不要 */
.form-card .wpcf7-form > p {
  max-width: 800px;
  font-size: var(--text-label-s);
  font-weight: 500;
  line-height: 2.2;
  color: var(--color-text-primary);
}

.form-card .wpcf7-form > p .wpcf7-form-control-wrap {
  margin: var(--space-sm) 0 var(--space-xl);
}

/* 必須バッジ（Figma: req — radius5・padding 2/8・bg inverse・Tag 10.5） */
.form-label .req {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-sm);
  border-radius: var(--radius-sm); /* 5 */
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  font-size: var(--text-tag); /* 10.5 */
  font-weight: 500;
  line-height: 1.4;
}

/* 入力欄（Figma: input — h48・radius5・bg gray/100・border default 1px・padding 14/16・text 12） */
.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="tel"],
.form-card textarea {
  width: 100%;
  padding: 13px var(--space-lg); /* 上下13＋line-height20＋border2 = 48 */
  background: var(--color-gray-100);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm); /* 5 */
  font-size: var(--text-body-s); /* 12 */
  line-height: 20px;
  color: var(--color-text-primary);
}

.form-card input::placeholder,
.form-card textarea::placeholder {
  color: var(--color-text-tertiary);
}

.form-card textarea {
  min-height: 160px;
  resize: vertical;
}

.form-card input:focus,
.form-card textarea:focus {
  outline: none;
  border-color: var(--color-accent-primary);
}

/* ---- ラジオ（お問い合わせ種別）: CF7は .wpcf7-radio > .wpcf7-list-item > label ---- */
.form-card .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg) var(--space-xl);
  margin-top: var(--space-xs);
}

.form-card .wpcf7-list-item {
  margin: 0; /* CF7デフォルトの margin-left:1em を打ち消す */
}

.form-card .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-body-s); /* 12（Figma: 選択肢ラベル） */
  font-weight: 400;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.form-card .wpcf7-list-item-label {
  line-height: 1;
}

.form-card input[type="radio"],
.form-card input[type="checkbox"] {
  accent-color: var(--color-text-primary);
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
}

/* ---- 同意チェック（Figma: agree — gap8・Body-S） ---- */
.form-agree {
  margin: var(--space-2xl) 0;
}

.form-card .wpcf7-acceptance .wpcf7-list-item label {
  font-size: var(--text-body-s); /* 12 */
  color: var(--color-text-primary);
}

/* ---- 送信ボタン（Figma: Button Dark/L — h55・radius full・padding 16/32・Label-L 15） ----
   .form-submit ラッパーの有無に関わらず当たるよう .wpcf7-submit にも直接指定
   （CF7デフォルト構造で貼られた場合の保険） */
.form-submit {
  display: flex;
  justify-content: center;
  max-width: 800px; /* Figma: sendWrap w800（入力欄と同じ幅の中央） */
  margin-top: var(--space-3xl);
}

.form-card .wpcf7-submit,
.form-submit input[type="submit"] {
  display: block;
  margin: var(--space-3xl) auto 0; /* ラッパーが無くても中央寄せ */
  padding: var(--space-lg) var(--space-3xl); /* 16 / 32 */
  width: auto;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  font-family: var(--font-body);
  font-size: var(--text-label-l); /* 15 */
  font-weight: 500;
  line-height: 23px;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* .form-submit で囲まれている場合は二重マージンを避ける */
.form-submit input[type="submit"] {
  margin-top: 0;
}

.form-card .wpcf7-submit:hover {
  opacity: 0.85;
}

/* 送信処理中（CF7がdisabledを付与）は押せないことを見た目でも示す */
.form-card .wpcf7-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* CF7の送信中スピナー位置 */
.form-card .wpcf7-spinner {
  margin: 0 0 0 var(--space-md);
}

/* ---- CF7 エラー表示（10b_Contact_Error_Design 186:1650 準拠） ---- */
.form-card .wpcf7-not-valid {
  border: 1.5px solid var(--color-feedback-error);
}

.form-card .wpcf7-not-valid-tip {
  display: block;
  margin-top: var(--space-sm);
  font-size: var(--text-body-s);
  color: var(--color-feedback-error);
}

.form-card .wpcf7 form .wpcf7-response-output {
  margin: var(--space-2xl) 0 0;
  padding: var(--space-lg) var(--space-xl);
  border: 1px solid var(--color-feedback-error);
  border-radius: var(--radius-md);
  color: var(--color-feedback-error);
  font-size: var(--text-body);
  text-align: center;
}

.form-card .wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--color-accent-primary);
  color: var(--color-text-primary);
}

/* =========================================================
   送信完了（10c_Contact_Thanks_Design 186:1719）
   ========================================================= */
.thanks-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xl);
  padding: 96px var(--space-5xl);
  text-align: center;
}

.thanks-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--color-accent-primary);
  color: var(--color-text-inverse);
}

.thanks-card__icon svg {
  width: 28px;
  height: 28px;
}

.thanks-card__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.thanks-card__body {
  font-size: var(--text-body);
}

/* =========================================================
   プライバシーポリシー／汎用ページ本文
   ========================================================= */
.policy-card {
  padding: var(--space-5xl);
}

.policy-content > p {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  max-width: 1100px;
}

.policy-content h2 {
  font-size: var(--text-jp-heading);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: var(--space-3xl) 0 var(--space-md);
}

.policy-content__date {
  margin-top: var(--space-4xl);
}

.search-results__item {
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--color-border-default);
}

/* =========================================================
   404（12_404_Design 95:1267）
   ========================================================= */
.not-found {
  padding: 120px 0;
}

.not-found__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  text-align: center;
}

.not-found__code {
  color: var(--color-text-primary);
}

.not-found__title {
  color: var(--color-text-primary);
}

/* =========================================================
   レスポンシブ（〜1023px: タブレット調整）
   ========================================================= */
@media (max-width: 1023px) {
  .top-services__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cases-grid--three {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-cols__grid {
    grid-template-columns: 1fr;
  }

  .svc-row,
  .svc-row--reverse {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xl);
  }

  .svc-row__visual {
    width: 100%;
  }
}

/* =========================================================
   レスポンシブ（〜767px: SP各デザイン準拠）
   ========================================================= */
@media (max-width: 767px) {
  .page-title {
    padding: var(--space-3xl) 0 var(--space-sm);
  }

  .page-title__en {
    font-size: var(--text-display-l); /* SPも64ベース（SP実デザイン準拠） */
  }

  .section-block {
    padding-block: var(--space-xl);
  }

  /* TOP: 緑の曲線背景（Figma SP: Subtract 219:1850 — PCより浅いカーブの専用形状） */
  .top-curve {
    top: 240px; /* Figma SP: y=304（Hero上端64からの相対＝240） */
    height: 1665px;
    background:
      url("../img/sp-curve-top.svg") top center / 100% 49px no-repeat,
      url("../img/sp-curve-bottom.svg") bottom center / 100% 47px no-repeat,
      linear-gradient(var(--color-accent-primary), var(--color-accent-primary))
        center 49px / 100% calc(100% - 96px) no-repeat;
  }


  /* TOP: SPのセクション余白（Figma: 上40 / 下8） */
  .front-page .top-wpcenter,
  .front-page .top-services,
  .front-page .top-cases {
    padding: 40px 0 var(--space-sm);
  }

  /* リード文はSPで14px（Figma SP_01_TOP準拠） */
  .section-lead {
    margin-top: var(--space-lg); /* 16 */
    font-size: var(--text-body); /* 14 */
  }

  .section-lead + .top-services__grid,
  .section-lead + .cases-grid {
    margin-top: var(--space-lg); /* 16 */
  }

  .solution-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-xl);
  }

  .solution-row__desc {
    font-size: var(--text-caption);
  }

  .top-services__grid {
    grid-template-columns: 1fr;
  }

  .svc-photo-card {
    min-height: 300px;
  }

  /* Cases */
  .cases-grid--three {
    grid-template-columns: 1fr;
  }

  /* 事例詳細 */
  .case-title {
    font-size: 22px;
  }

  .case-visual__img {
    aspect-ratio: 343 / 220;
  }

  .case-summary__card {
    padding: var(--space-sm) var(--space-xl);
  }

  .case-body__card {
    padding: var(--space-xl);
  }

  .case-slider__img {
    aspect-ratio: 303 / 180;
  }

  .case-slider__dot {
    width: 6px;
    height: 6px;
  }

  /* About */
  .profile-card {
    padding: var(--space-sm) var(--space-xl);
  }

  .clients-card {
    padding: var(--space-xl);
  }

  .clients-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Contact */
  .form-card {
    padding: var(--space-xl) var(--space-xl) var(--space-3xl);
  }

  .form-field--radio .wpcf7-radio {
    flex-direction: column;
    gap: var(--space-md);
  }

  /* Thanks */
  .thanks-card {
    padding: var(--space-6xl) var(--space-xl);
    gap: var(--space-xl);
  }

  .thanks-card__icon {
    width: 56px;
    height: 56px;
  }

  .thanks-card__en {
    font-size: var(--text-display-m);
  }

  /* Privacy / 汎用 */
  .policy-card {
    padding: var(--space-xl);
  }

  /* 404 */
  .not-found {
    padding: var(--space-6xl) 0;
  }

  .not-found__code {
    font-size: 64px;
  }
}