/* ===================================
   offeeer 本番HTML - トップページ追加スタイル
   (共通は style.css。ここは現行トップ(STUDIO)再現用の追加分)
   =================================== */

/* --- ヘッダー（透明オーバーレイ。追従はしない(2026-08-25 FB)。SP/タブレットでは上スクロール時のみ
   header-scroll.js が body.header-pinned を付け、下の白帯スタイルでスライドイン表示する） --- */
.header {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: auto;
  background: transparent;
  box-shadow: none;
  z-index: 100;
}
.header-inner {
  display: flex;
  align-items: center;
  padding: 20px 40px;
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
}
.logo { position: static; display: flex; align-items: center; }
.logo img { height: 124px; width: auto; }
/* デスクトップのロゴは中央寄せコンテナから外し、画面左端基準で置く。
   コンテナ内に置くとラップトップ幅でロゴが内側に入り込むという指摘への対応。ナビは従来どおりコンテナ内。
   追従はやめた(2026-08-25 FB)のでfixedではなくabsoluteでヘッダー左上に置く */
@media (min-width: 1025px) {
  .logo { position: absolute; top: 16px; left: 20px; }
  /* ロゴがフロー外になってもナビの縦位置が変わらないよう、ヘッダーの高さを維持する */
  .header-inner { min-height: 164px; }
}
/* SP/タブレット: 通常は非追従。上方向にスクロールしたときだけヘッダーを白帯で出す(2026-08-25 FB) */
@media (max-width: 1024px) {
  body.header-pinned .header {
    position: fixed;
    background: #fff;
    box-shadow: 0 2px 14px rgba(17, 39, 26, 0.1);
    animation: header-slide-down 0.25s ease-out;
  }
  /* 白帯のときはロゴを小さくしてバーをコンパクトに */
  body.header-pinned .logo img { height: 56px; }
  body.header-pinned .header-inner { padding-top: 10px; padding-bottom: 10px; }
  body.header-pinned .mobile-menu-btn { position: fixed; }
}
@keyframes header-slide-down {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
.nav { margin-left: auto; display: flex; gap: 28px; align-items: center; padding-top: 0; }
/* transition は color のみ。all にすると font-weight まで補間され、hover時に文字が
   0.3sかけて太くなる＝「拡大したように見える」挙動になるため対象から外す（太字は即時適用）。 */
.nav-link { font-weight: 600; color: var(--text-color); font-size: 0.95rem; transition: color 0.2s ease-in-out; }
.nav-link:hover { font-weight: 700; }
.header-cta {
  flex-shrink: 0;
  padding: 9px 24px;
  background: var(--accent-color);
  color: #fff;
  border: 2px solid var(--accent-color);
  border-radius: var(--radius-full);
  font-weight: 700;
  transition: all 0.3s ease-in-out;
}
.header-cta:hover { background: #fff; color: var(--accent-color); border-color: var(--accent-color); }
.mobile-nav-cta .header-cta { width: 100%; text-align: center; }

/* ===== HERO ===== */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 150px 0 80px;
  background: #fffaf5 url("../images/hero/hero-decoration.png") center center / cover no-repeat;
  overflow: hidden;
}
@media (max-width: 768px) {
  .hero { background-image: url("../images/hero/hero-decoration-mobile.png"); }
}
.hero-container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}
.hero-content { flex: 1; max-width: 620px; }
.hero-title {
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1.28;
  color: var(--text-color);
  margin: 0 0 24px;
  letter-spacing: 0.01em;
}
.hero-title .text-green { color: #32b470; }
.hero-description {
  font-size: 1rem;
  line-height: 2;
  color: var(--text-light);
  margin: 0 0 32px;
  max-width: 460px;
}
.hero-stats { display: flex; gap: 44px; margin: 0 0 34px; background: none; border: none; border-radius: 0; box-shadow: none; padding: 0; }
.hero-stat { display: flex; flex-direction: column; padding: 0; border-right: none; text-align: left; min-width: 0; }
.hero-stat-number { font-size: 2.6rem; font-weight: 800; color: #32b470; line-height: 1; font-variant-numeric: tabular-nums; }
.hero-stat-value { display: inline-block; }
.hero-stat-unit { font-size: 0.5em; font-weight: 700; margin-left: 1px; }
.hero-stat-label { font-size: 0.8rem; color: var(--text-light); margin-top: 8px; }

/* ヒーロー検索バー */
.hero-search { max-width: 440px; }
.hero-search-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 14px 22px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  color: var(--text-color);
  font-weight: 500;
  font-size: 0.92rem;
  margin-bottom: 14px;
  transition: all 0.3s ease-in-out;
}
.hero-search-bar:hover { border-color: var(--primary-color); box-shadow: 0 4px 16px rgba(50, 180, 112, 0.14); }
.hero-search-icon { color: #32b470; display: flex; }

/* ヒーロー右：緑の登録フォーム */
.hero-form-col { flex-shrink: 0; width: 400px; }
.hero-form-card {
  background: #fff;
  border-radius: 22px;
  padding: 28px 26px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}
.hero-form-card-green {
  background: var(--primary-color);
  box-shadow: 0 24px 60px rgba(50, 180, 112, 0.35);
}
.hero-form-title { font-size: 1.25rem; font-weight: 800; text-align: center; margin: 0 0 20px; color: var(--text-color); }
.hero-form-card-green .hero-form-title { color: #fff; }
.hero-form .form-row { display: flex; gap: 12px; }
.hero-form .form-group { margin-bottom: 14px; flex: 1; display: flex; flex-direction: column; }
.hero-form label { font-size: 0.8rem; font-weight: 600; margin-bottom: 6px; color: var(--text-color); }
.hero-form-card-green .hero-form label { color: #fff; }
.hero-form .req { color: #ffd54f; margin-left: 3px; }
.hero-form-card-green .hero-form .req { color: #ffe082; }
/* 任意項目の注記。必須の * より目立たせない */
.hero-form .opt { font-size: 0.72rem; font-weight: 500; color: #8a8f8c; margin-left: 4px; }
.hero-form-card-green .hero-form .opt { color: rgba(255, 255, 255, 0.75); }
.hero-form input[type="text"],
.hero-form input[type="email"],
.hero-form input[type="tel"] {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  background: #fff;
  font-family: inherit;
}
.hero-form .form-checkbox { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 16px; font-size: 0.78rem; }
.hero-form-card-green .form-checkbox { color: #fff; }
.hero-form-card-green .form-checkbox a { color: #fff; text-decoration: underline; }
.hero-form-consent { text-align: center; font-size: 0.82rem; margin: 8px 0 16px; color: #fff; }
.hero-form-consent a { color: #fff; text-decoration: underline; font-weight: 700; margin-right: 2px; }

/* 送信エラー表示（form-submit.js が生成。register.css の .rf-* と同役割だが、
   緑パネルの上に置くためこちらで配色する）。 */
.hero-form .rf-error-summary {
  display: block;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #e53935;
  border-radius: 8px;
  background: #fdecea;
  font-size: 0.8rem;
  line-height: 1.7;
  color: #b3261e;
}
.hero-form .rf-field-error {
  display: block;
  margin-top: 4px;
  font-size: 0.73rem;
  line-height: 1.5;
  font-weight: 600;
  color: #ffe9a8; /* 緑地の上で読める淡い黄。赤は背景に沈むため使わない */
}
.hero-form .rf-error-summary[hidden],
.hero-form .rf-field-error[hidden] { display: none; }
.hero-form input[aria-invalid="true"] { outline: 2px solid #ffb4ab; } /* borderだと1pxぶんレイアウトが動く */
.hero-form .btn-submit {
  width: 100%;
  padding: 13px;
  background: var(--accent-color);
  color: #fff;
  border: 2px solid var(--accent-color);
  border-radius: var(--radius-full);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.3s ease-in-out;
}
.hero-form .btn-submit:hover { background: #fff; color: var(--accent-color); border-color: var(--accent-color); }

/* ヒーロー装飾ブロブ（Studioプレビューの装飾画像に置き換えたため非表示） */
.hero-blob { display: none; position: absolute; border-radius: 50%; z-index: 1; opacity: 0.85; }
.hero-blob-1 { width: 320px; height: 320px; background: #d8efdd; top: -80px; right: 34%; }
.hero-blob-2 { width: 120px; height: 120px; background: #f4d97a; top: 120px; left: -30px; }
.hero-blob-3 { width: 90px; height: 90px; background: #a2d7d3; bottom: 90px; left: 30%; }
.hero-blob-4 { width: 160px; height: 160px; background: #cbe9d2; bottom: -50px; right: 8%; }

/* ===== 掲載経歴（メディア掲載ロゴ 無限ループ） ===== */
.keisai { background: #f7f7f7; overflow: hidden; padding: 30px 0; }
.keisai-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: keisai-scroll 32s linear infinite;
}
.keisai:hover .keisai-track { animation-play-state: paused; }
.keisai-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 38px;
}
.keisai-item img { height: 34px; width: auto; object-fit: contain; display: block; }
@keyframes keisai-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .keisai-track { animation: none; }
}

/* ===== 見出し ===== */
/* 見出しまわりの縦余白は2026-08-18「狭すぎる」FBで拡大（wrap下48→64 / eyebrow下10→16 / subtitle上18→26 / head-row下36→48） */
.section-heading-wrap { text-align: center; margin-bottom: 64px; }
.section-eyebrow { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; color: #32b470; margin-bottom: 16px; }
.section-heading {
  display: inline-block;
  position: relative;
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-color);
  padding-bottom: 0;
  line-height: 1.4;
}
.section-heading::after { display: none; }
.section-heading .text-green { color: inherit; }
/* eyebrow の e マスコットアイコン */
.eyebrow-icon { height: 1.15em; width: auto; vertical-align: -0.2em; margin-right: 7px; }
.section-heading-wrap .section-subtitle { margin-top: 26px; max-width: 720px; margin-left: auto; margin-right: auto; }
.section-heading-wrap .section-subtitle-left { max-width: 470px; text-align: left; }

/* 左寄せ見出し（すべて見る→ 付き） */
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 48px; gap: 20px; }
.section-heading-left { text-align: left; font-size: 1.9rem; padding-bottom: 0; }
.section-heading-left::after { display: none; }
.see-all {
  color: #32b470;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  border: 1.5px solid var(--primary-color);
  border-radius: var(--radius-full);
  padding: 11px 30px;
  transition: all 0.3s ease-in-out;
}
.see-all:hover { background: var(--primary-color); color: #fff; }
/* カード群の下に置く「すべて見る」(タブレット/スマホ専用。デスクトップは見出し行の右上リンクを使う) */
.see-all-bottom { display: none; }

/* セクション背景 */
.section-gray { background: #f4f7f5; }
.section-voice { background: #f7f7f7; }

/* ===== DATA HIGHLIGHT（カードなし・タイトル緑・ドーナツにラベル直付き） ===== */
/* 3枚を横一列に並べる(2026-08-13変更。旧Studioの2+1段組はユーザー指示で廃止)
   min-width: 0 が無いと、中間幅でドーナツの固定幅(262px)が列幅より勝って
   カードがグリッドからはみ出し、横スクロールが発生する */
@media (min-width: 769px) {
  .data-grid { grid-template-columns: repeat(3, 1fr); }
  .data-grid .data-card { min-width: 0; }
}
.data-card { background: none; border: none; border-radius: 0; padding: 0 12px; text-align: center; }
.data-card-title { font-size: 1.15rem; font-weight: 800; margin: 0 0 12px; color: #32b470; }
.data-card-desc { font-size: 0.86rem; color: var(--text-light); line-height: 1.8; margin: 0 auto 22px; max-width: 15em; min-height: 44px; text-align: left; }
.data-donut-wrap { position: relative; width: 262px; max-width: 100%; aspect-ratio: 1 / 1; margin: 0 auto; }
.data-donut { width: 100%; height: 100%; display: block; }
/* ドーナツSVG（画像→インラインSVG化。scroll連動で弧を時計回りに描画） */
.donut-seg { fill: none; stroke-width: 23.5; stroke-linecap: butt; }
/* JS有効時は初期状態で弧長0（非表示）。描画はJSが target(stroke-dasharray属性値) へ遷移させる。
   非JS環境ではこのルールが効かず、HTMLの stroke-dasharray 属性で静的な正しいドーナツが表示される。 */
.js .donut-seg { stroke-dasharray: 0 240; }
/* ラベルは各セグメントの中央（リング帯の上）に配置。背景色に応じて文字色を変えて可読性を確保 */
.data-label {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.12;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
}
.data-label .dl-name { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.01em; opacity: 0.95; }
.data-label .dl-pct { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 1px; }
/* コントラスト（濃緑=白文字＋影 / 薄緑=濃緑文字 / グレー=濃グレー文字） */
.dl-on-green { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.32); }
.dl-on-light { color: #2f7d54; }
.dl-on-gray { color: #5a5a5a; }
/* 各セグメント中央角の座標（リング帯中央 半径38%） */
.data-label-a1 { left: 86%; top: 38%; }   /* PM/PMO 40% */
.data-label-a2 { left: 38%; top: 86%; }   /* ITコンサル 30% */
.data-label-b1 { left: 68%; top: 83%; }   /* 100万円〜 84% */
.data-label-c1 { left: 28%; top: 19%; }   /* 週1〜2日 20% */
.data-label-c2 { left: 87%; top: 44%; }   /* 週5日 45% */
.data-label-c3 { left: 23%; top: 77%; }   /* 週3〜4日 35% */
/* 数字のポップイン（弧の描画完了に同期してJSが .is-shown を付与） */
@media (prefers-reduced-motion: no-preference) {
  .js .data-label { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  .js .data-label.is-shown {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

/* ===== 反復CTA帯 ===== */
.cta-band { background: #fff; text-align: center; padding: 8px 0 56px; }
.cta-band-gray { background: #f4f7f5; }
/* 参画者の声セクション直下のCTA。バンドの背景が直前セクションと違うと色の境目が
   ボタンのすぐ上に出て「余白がない」ように見えるため、声セクションと同じ灰色にする */
.cta-band-voice { background: #f7f7f7; }
.cta-band-btn {
  display: inline-block;
  background: var(--accent-color);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  padding: 14px 42px;
  border: 2px solid var(--accent-color);
  border-radius: var(--radius-full);
  box-shadow: 0 10px 24px rgba(213, 179, 37, 0.3);
  transition: all 0.3s ease-in-out;
}
.cta-band-btn:hover { background: #fff; color: var(--accent-color); border-color: var(--accent-color); box-shadow: 0 10px 24px rgba(213, 179, 37, 0.18); }

/* ===== FIND PROJECT カテゴリ ===== */
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.category-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 32px 20px;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text-color);
  transition: all 0.3s ease-in-out;
}
.category-btn:hover { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }

/* ===== FEATURED PROJECT カード（上:緑 / 下:白） ===== */
.pjcard-grid { align-items: stretch; }
.pjcard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 30px rgba(50, 180, 112, 0.12);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  overflow: hidden;
}
.pjcard:hover { transform: translateY(-10px); box-shadow: 0 22px 44px rgba(50, 180, 112, 0.2); }
.pjcard-head {
  background: var(--primary-color);
  color: #fff;
  padding: 22px 22px 24px;
}
.pjcard-cat {
  display: inline-block;
  background: #fff;
  color: #32b470;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 5px 15px;
  border-radius: var(--radius-full);
  margin-bottom: 14px;
}
.pjcard-title { font-size: 0.98rem; font-weight: 700; line-height: 1.6; margin: 0; min-height: 4.7em; color: #fff; }
.pjcard-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.pjcard-meta { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.pjcard-meta-item { display: flex; align-items: baseline; gap: 8px; }
.pjcard-meta-label { font-size: 0.72rem; color: var(--text-muted); }
.pjcard-meta-val { font-size: 1rem; font-weight: 800; color: var(--text-color); min-height: 1em; }
.pjcard-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; border-top: 1px solid #e9e9e9; padding-top: 16px; }
.pjcard-price { font-size: 1.4rem; font-weight: 800; color: #32b470; }
.pjcard-more {
  background: var(--primary-color);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  transition: all 0.3s ease-in-out;
}
.pjcard:hover .pjcard-more { background: var(--primary-dark, #32b470); }

/* ===== OURS VALUES 左右交互 ===== */
.value-list { display: flex; flex-direction: column; gap: 72px; }  /* 2026-08-18 画像行の縦間隔を拡大 56→72 */
.value-row { display: flex; align-items: center; gap: 56px; }
.value-row-reverse { flex-direction: row-reverse; }
.value-media { flex: 1; display: flex; justify-content: center; }
.value-media img { max-width: 100%; width: 420px; height: auto; }
.value-body { flex: 1; }
.value-title { font-size: 1.75rem; font-weight: 800; color: #32b470; margin: 0 0 24px; display: flex; align-items: baseline; gap: 12px; }
.value-num {
  color: #32b470;
  font-size: 1.75rem;
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1;
}
.value-text { font-size: 0.95rem; line-height: 2; color: var(--text-light); margin: 0; }

/* ===== Column 記事カード ===== */
.article-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; }
.article-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.article-thumb { aspect-ratio: 1200 / 630; overflow: hidden; background: #eef2f0; }
.article-thumb img { width: 100%; height: 100%; object-fit: cover; }
.article-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.article-date { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 10px; }
.article-title { font-size: 1rem; font-weight: 700; line-height: 1.55; color: var(--text-color); margin: 0 0 12px; }
.article-excerpt { font-size: 0.83rem; line-height: 1.85; color: var(--text-light); margin: 0 0 16px; }
.article-more { margin-top: auto; color: #32b470; font-weight: 700; font-size: 0.85rem; }

/* ===== PARTNER SERVICES ===== */
.partner-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.partner-card { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 34px 30px; display: flex; flex-direction: column; box-shadow: 0 8px 24px rgba(0,0,0,0.04); transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; }
.partner-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); }
.partner-card-logo { width: 100%; height: 88px; min-height: 0; padding: 0; border-right: none; background: transparent; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.partner-card-logo img { max-height: 58px; max-width: 210px; width: auto; object-fit: contain; }
.partner-card-text { font-size: 0.88rem; line-height: 1.85; color: var(--text-light); margin: 0 0 20px; flex: 1; }
.partner-card-more { color: #32b470; font-weight: 700; font-size: 0.85rem; transition: all 0.3s ease-in-out; }
.partner-card-more:hover { text-decoration: underline; }
.partner-card:hover .partner-card-more { font-weight: 800; }
/* 提携サービスは4枚(labol追加)。タブレットは2列、SPは768px以下の1列指定が後段で効く */
@media (max-width: 1024px) { .partner-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===== USER VOICE ===== */
.voice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.voice-card { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 30px 28px; box-shadow: 0 8px 24px rgba(0,0,0,0.05); position: relative; display: flex; flex-direction: column; }
.voice-quote { font-size: 0.92rem; line-height: 1.95; color: var(--text-color); position: relative; padding-top: 46px; flex: 1; }
.voice-quote::before { content: '\201C'; position: absolute; top: 4px; left: -2px; font-size: 4rem; line-height: 1; color: #32b470; font-family: Georgia, serif; font-weight: 700; }
.voice-attr { font-size: 0.82rem; color: var(--text-color); font-weight: 700; margin-top: 24px; border-top: 1px solid #ececec; padding-top: 16px; }

/* ===== FAQ アコーディオン ===== */
.faq-list { max-width: 860px; margin: 0 auto; border-top: 1px solid #e5e5e5; }
.faq-item { background: none; border: none; border-bottom: 1px solid #e5e5e5; border-radius: 0; margin-bottom: 0; }
.faq-q { list-style: none; cursor: pointer; padding: 24px 48px 24px 6px; font-weight: 700; color: #32b470; position: relative; font-size: 0.95rem; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after { content: '+'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: #32b470; font-weight: 400; line-height: 1; }
.faq-item[open] .faq-q::after { content: '\2212'; }
.faq-a { padding: 0 40px 24px 6px; color: #282828; font-size: 0.9rem; line-height: 1.9; }

/* ===== 最終CTA（フォーム） ===== */
.final-cta { background: #f7f7f7; padding: 72px 0; }
.final-cta-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 34px; }
.final-cta-copy { max-width: 640px; }
.final-cta-title { font-size: 2rem; font-weight: 800; margin-bottom: 20px; color: var(--text-color); }
.final-cta-text { font-size: 0.95rem; line-height: 1.9; color: var(--text-light); margin: 0; }
.final-cta-form { width: 100%; max-width: 440px; margin: 0 auto; }

/* ===== 締めCTAバンド ===== */
.closing-cta { background: var(--primary-color); padding: 56px 0; text-align: center; }  /* 2026-08-18「緑の領域が広すぎる」指摘で72px→56px */
.closing-cta-title { font-size: 1.9rem; font-weight: 700; color: #fff; margin: 0 0 22px; }
.closing-cta-text { font-size: 0.95rem; line-height: 1.95; color: #fff; max-width: 640px; margin: 0 auto 32px; }
.closing-cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.closing-cta-btn-primary { background: var(--accent-color); color: #fff; font-weight: 800; padding: 14px 38px; border: 2px solid var(--accent-color); border-radius: var(--radius-full); transition: all 0.3s ease-in-out; }
.closing-cta-btn-primary:hover { background: #fff; color: var(--accent-color); border-color: var(--accent-color); }
.closing-cta-btn-outline { background: transparent; color: #fff; font-weight: 800; padding: 16px 40px; border-radius: var(--radius-full); border: 1.5px solid #fff; transition: all 0.3s ease-in-out; }
.closing-cta-btn-outline:hover { background: #fff; color: #32b470; }

/* ===== フッター ===== */
.footer { background: #4c4c4c; padding: 64px 0 40px; }
.footer-top { display: flex; gap: 48px; justify-content: space-between; flex-wrap: wrap; padding-bottom: 8px; margin-bottom: 0; }
.footer-brand-col { max-width: 360px; }
.footer-wordmark { color: #fff; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 16px; }
.footer-brand-text { color: #fff; font-size: 0.84rem; line-height: 1.85; margin: 0 0 20px; }
.footer-social { display: flex; align-items: center; gap: 18px; }
.footer-social a { color: #fff; display: inline-flex; opacity: 0.9; transition: all 0.3s ease-in-out; }
.footer-social a:hover { opacity: 1; transform: scale(1.12); }
.footer-col a { transition: all 0.3s ease-in-out; }
.footer-social svg { display: block; }
.footer-links { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col-title { color: #fff; font-size: 0.9rem; font-weight: 800; margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 12px; list-style: none; padding: 0; margin: 0; }
.footer-col a { color: #fff; font-size: 0.83rem; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-copyright { color: rgba(255,255,255,0.5); font-size: 0.74rem; text-align: left; margin: 40px 0 0; }

/* ===== 出現アニメーション（STUDIO appear 再現：下20pxからフェードアップ・scroll連動） =====
   reveal は個別プロパティ translate を使用。hover は transform を使うため競合しない。
   .js ゲートで非JS環境では常に表示。prefers-reduced-motion では無効化。 */
@media (prefers-reduced-motion: no-preference) {
  .js .appear { opacity: 0; translate: 0 20px; }
  .js .appear.is-visible {
    opacity: 1;
    translate: 0 0;
    transition: opacity 0.8s ease-in-out, translate 0.8s ease-in-out;
  }
}

/* ===== レスポンシブ ===== */
/* --- 表示切替(スマホ専用/PC・タブレット専用の文字) --- */
.sp-only { display: none; }

/* --- トップ「おすすめの案件」カード(Studio準拠の緑ヘッダー型) ---
   一覧ページ(projects.css)の白カードとはデザインが別。projects.cssの方が後に
   読み込まれるため、.pl-grid を挟んだ詳細度で上書きする */
.pl-grid .v3 .v3__header { background: #32b470; padding: 18px 22px 22px; }
.pl-grid .v3 .v3__cat { background: #fff; border-color: #fff; }
.pl-grid .v3 .v3__title { color: #fff; }
.pl-grid .v3 .v3__specs { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 0; border-bottom: 1px solid #ececec; padding-bottom: 14px; margin-bottom: 16px; }
.pl-grid .v3 .v3__spec { flex-direction: row; align-items: center; gap: 8px; padding: 0; border: none; }
.pl-grid .v3 .v3__spec-head svg { display: none; }
.pl-grid .v3 .v3__spec-val { font-size: 1.05rem; font-weight: 800; }
.pl-grid .v3 .v3__bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; }
.pl-grid .v3 .v3__price { padding: 0; background: none; border: none; }
.pl-grid .v3 .v3__price-label { display: none; }
.pl-grid .v3 .v3__price-num { font-size: 1.55rem; }
.pl-grid .v3 .v3__price-unit { font-size: 0.95rem; padding-bottom: 3px; }
.pl-grid .v3 .v3__cta { width: auto; padding: 11px 24px; }

@media (max-width: 1024px) {
  .logo img { height: 56px; } /* 上スクロール時の白帯(body.header-pinned)と同じサイズに統一(2026-09-07 FB) */
  /* ロゴが右に寄って見えるというFBを受け、PCの固定ロゴ(left:20px)と同じ左位置に合わせる(2026-08-25) */
  .header-inner { padding-left: 20px; }
  /* ヘッダー内のCTAだけ隠す(.header-ctaはハンバーガーメニュー内でも使うため全体を消さない) */
  .header .header-cta { display: none; }
  /* モバイルはハンバーガーに集約。グローバルの .nav{display:flex} を打ち消す */
  .nav { display: none; }
  .hero-container { flex-direction: column; align-items: stretch; }
  /* Studioのスマホ版はヒーローの文章・統計・検索を左寄せにしている(2026-08-25 実機比較)。
     以前の中央揃え(2026-08-18)はStudio版と位置が違うという指摘を受けて左寄せへ戻した */
  /* 文字・ボタンは左寄せのまま、コンテンツブロックごと中央に置く(2026-08-25 FB) */
  .hero-content { max-width: 620px; margin: 0 auto; text-align: left; }
  .hero-stats { justify-content: flex-start; }
  .hero-stat { text-align: left; }
  /* 「500 / +」「5営業 / 日」のように数字と単位・ラベルが途中で改行されるのを防ぐ */
  .hero-stat-number, .hero-stat-label { white-space: nowrap; }
  .hero-form-col { width: 100%; max-width: 440px; margin: 0 auto; }
  .hero-title { font-size: 2.6rem; }
  /* Studioのスマホ版は「見出し→本文→画像」の順・左寄せ(画像は全幅) */
  .value-row, .value-row-reverse { flex-direction: column-reverse; gap: 32px; }
  .value-media img { width: 100%; }
  /* 「すべて見る」は見出し行の右上をやめてカード群の下・中央に出す(2026-08-18 FB) */
  .section-head-row .see-all { display: none; }
  .see-all-bottom { display: flex; justify-content: center; margin-top: 36px; }
  /* コラム3枚が2列+1枚の2段になるのを防ぎ、タブレットでは3列1段に収める(≤768pxは既存の1列指定が優先) */
  .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
@media (max-width: 768px) {
  .hero { padding-top: 120px; }
  .hero-title { font-size: 2.1rem; }
  /* style.cssがスマホで統計を縦積み(区切り線付き)にするが、Studioのスマホ版は3列横並び */
  .hero-stats { flex-direction: row; gap: 24px; width: auto; }
  .hero-stat { border-bottom: none; padding: 0; }
  .hero-stat-number { font-size: 2rem; }
  /* Studioのスマホ版の左右余白(約16px)に合わせる */
  .hero-container { padding: 0 20px; }
  .sp-only { display: inline; }
  .pc-only { display: none; }
  .section-heading, .section-heading-left { font-size: 1.5rem; }
  .section-heading-wrap { margin-bottom: 48px; }   /* モバイルはデスクトップ64pxより一段控えめ */
  .section-head-row { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 36px; }
  /* Studioのスマホ版はカテゴリボタンを全幅1列で並べる */
  .category-grid { grid-template-columns: 1fr; }
  .category-btn { padding: 28px 12px; font-size: 1rem; }
  .grid-3 { grid-template-columns: 1fr; }
  .pjcard-grid { grid-template-columns: 1fr; }
  .partner-grid { grid-template-columns: 1fr; }
  .voice-grid { grid-template-columns: 1fr; }
  .logo-bar-list { gap: 22px; }
  .logo-bar-list li { font-size: 0.9rem; }
  .final-cta-title, .closing-cta-title { font-size: 1.5rem; }
}