/* =====================================================
   Pineston AI Boost v3 — 内部ページ共通スタイル
   ※ vw単位を完全排除（px/rem/%のみ使用）
===================================================== */

.page-body { padding-top: var(--hdr-h); }

/* ---- ページヒーロー ---- */
.page-hero {
  background: linear-gradient(135deg, #EEF6EE 0%, #F7F9F7 100%);
  padding: 20px 24px 16px;    /* A28: about.htmlと同等に縮小 */
  border-bottom: 1px solid var(--bdr);
}
.page-hero h1 {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.3rem;          /* A28: フォントサイズも縮小 */
  color: var(--sumi);
  margin: 6px 0 6px;
}
.page-hero .lead { font-size: .92rem; color: var(--mute); }
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: var(--mute);
  margin-bottom: 10px;
}
.breadcrumb a { color: var(--konpeki); } /* S1: 常盤色→紺碧色 */
.breadcrumb span { color: var(--mute); }

/* ============================================
   サービスページ（5本柱）
============================================ */
/* S4: svc-block 縦積み構造に変更、svc-icon廃止 */
.svc-block {
  background: var(--white);
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  padding: 36px 36px;
  margin-bottom: 28px;
  display: block;
  transition: box-shadow var(--tr);
}
.svc-block:hover { box-shadow: var(--shadow); }
.svc-icon { display: none; } /* アイコンはタイトル内に移動したため非表示 */
.svc-num-badge {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--tok);
  background: rgba(192,224,191,.10); /* I28: 「できる支援」背景と同濃度にさらに薄く */
  border: 1px solid rgba(192,224,191,.5);
  padding: 3px 10px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 10px;
}
/* S4a / S5: アイコンをsvc-title文頭に配置 */
.svc-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.25rem;
  color: var(--sumi);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* S7: svc-title内のアイコンを常盤色に（消炭色→常盤色） */
.svc-title .svc-title-icon {
  color: var(--tokiwa);
  font-size: 1.1rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}
/* svc-lead: 旧アイコン配置の名残（互換性のため残す） */
.svc-lead {
  font-size: .9rem;
  color: var(--mute);
  margin-bottom: 18px;
  line-height: 1.6;
}
.svc-lead .svc-title-icon {
  font-size: 1.3rem;
  color: var(--tokiwa);
  flex-shrink: 0;
  margin-top: 1px;
}
.svc-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 16px;
}
.svc-cols h4 { font-size: .82rem; font-weight: 700; color: var(--sumi); margin-bottom: 10px; }
.svc-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #EEF6EE;
  border-radius: 6px;
  padding: 12px 16px;
  font-size: .83rem;
  color: var(--mute);
  line-height: 1.7;
}

/* 向いている方 */
.fit-card {
  background: var(--white);
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.fit-card i { font-size: 1.4rem; color: var(--tok); }
.fit-card p { font-size: .87rem; color: var(--mute); line-height: 1.7; }

/* フロー横型 */
.flow-h {
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
  justify-content: center;
}
.flow-h-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 160px;
  gap: 10px;
}
.fhs-num {
  width: 44px; height: 44px;
  background: var(--tok);
  color: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
}
.fhs-text { display: flex; flex-direction: column; gap: 4px; }
.fhs-text strong { font-size: .88rem; font-weight: 700; color: var(--sumi); }
.fhs-text span   { font-size: .78rem; color: var(--mute); line-height: 1.6; }
.fhs-arrow {
  padding: 0 8px;
  color: var(--mat);
  font-size: 1rem;
  margin-top: 14px;
}

/* ============================================
   料金ページ
============================================ */
.pricing-intro {
  max-width: 700px;
  margin: 0 auto 48px;
  text-align: center;
  font-size: .92rem;
  color: var(--mute);
  line-height: 1.85;
}

/* plan-grid / plan-card: pricing.htmlのインラインスタイルに完全移行のため削除 */

/* ============================================
   サービス業務委託料カード（横長縦積み）
   テーブル廃止・PC/スマホ共通・横スクロール不要
============================================ */
/* ============================================
   サービス業務委託料カード v2
   左：サービス名 ／ 右：料金・納期・概要3列
============================================ */
.svc-price-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 36px;
}

/* 横長カード本体 */
.svc-price-card {
  background: var(--white);
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  padding: 20px 20px;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;          /* はみ出し防止 */
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 640px) {
  .svc-price-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    padding: 20px 24px;
  }
}

/* 左：サービス名カラム */
.svc-price-name {
  font-size: .95rem;
  font-weight: 700;
  color: var(--sumi);
  margin: 0;
  padding: 0 0 12px 0;
  border-bottom: 1px solid var(--bdr);
  word-break: break-all;     /* スマホ折り返し */
}
@media (min-width: 640px) {
  .svc-price-name {
    width: 220px;
    min-width: 220px;
    word-break: normal;
    padding: 4px 20px 0 0;
    border-bottom: none;
    border-right: 1px solid var(--bdr);
    flex-shrink: 0;
  }
}

/* 右：料金・納期・概要エリア（スマホ：縦積み1列） */
.svc-price-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
@media (min-width: 640px) {
  .svc-price-meta {
    display: grid;
    grid-template-columns: 180px 110px 1fr;
    gap: 0 24px;
    padding-left: 20px;
    align-items: start;
    flex: 1;
    min-width: 0;
  }
}

/* 各列（ラベル＋値の縦積み） */
.svc-price-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

/* 概要列：スマホ・PC共通 */
.svc-price-item.svc-desc-item {
  min-width: 0;
}

/* 列ラベル（料金目安・納期目安・概要） */
.svc-price-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--mute);
  letter-spacing: .04em;
  white-space: nowrap;
}
.svc-price-label i {
  color: var(--tokiwa);
  margin-right: 3px;
}

/* 料金・納期の値 */
.svc-price-val {
  font-size: 1.0rem;
  font-weight: 700;
  color: var(--tokiwa);
  white-space: normal;
  word-break: break-word;
}
.svc-price-val small {
  font-size: .70rem;
  font-weight: 400;
  color: var(--mute);
  margin-left: 4px;
  white-space: normal;
}
/* 概要テキスト */
.svc-price-desc {
  font-size: .84rem;
  color: var(--mute);
  line-height: 1.7;
  margin: 0;
}

/* ※ estimate-pay-grid・price-table系は svc-price-stack/svc-price-card 縦積みカード方式への
      移行に伴い削除済み（2026-08-01）。テーブル形式は廃止。 */

/* ※ price-table-v2 は svc-price-stack/svc-price-card 縦積みカード方式への
      移行に伴い削除済み（2026-08-01）。 */

/* 料金方針ボックス */
.pricing-policy {
  background: #EEF6EE;
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  padding: 28px 32px;
  margin-bottom: 40px;
}
.pricing-policy h3 { font-size: 1rem; font-weight: 700; margin-bottom: 12px; }
.pricing-policy p  { font-size: .88rem; color: var(--mute); line-height: 1.8; }
.pricing-policy p + p { margin-top: 10px; }

/* 著作権・精算ボックス */
.pricing-rights {
  background: var(--white);
  border: 1px solid var(--bdr);
  border-left: 4px solid var(--kin);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 28px;
}
.pricing-rights h4 { font-size: .9rem; font-weight: 700; margin-bottom: 8px; color: var(--sumi); }
.pricing-rights p  { font-size: .85rem; color: var(--mute); line-height: 1.8; }

/* モニター特価バナー */
.monitor-banner {
  background: linear-gradient(135deg, var(--kin) 0%, #d4943c 100%);
  color: var(--white);
  border-radius: var(--radius);
  padding: 28px 32px;
  text-align: center;
  margin-bottom: 40px;
}
.monitor-banner h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; }
.monitor-banner p  { font-size: .88rem; opacity: .9; line-height: 1.7; }
/* P18/P20: 50% OFFを1行・枠内に収める */
.monitor-pct {
  font-size: clamp(1.6rem, 10vw, 2.8rem);
  font-weight: 700;
  font-family: 'Noto Serif JP', serif;
  margin: 10px 0 4px;
  white-space: nowrap;
  overflow: hidden;
}
.monitor-pct small { font-size: .45em; }

/* FAQ */
.pricing-faq { display: flex; flex-direction: column; gap: 12px; max-width: 740px; margin: 0 auto; }
.pfaq {
  background: var(--white);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  overflow: hidden;
}

/* -------------------------------------------------------
   FAQ アコーディオン
   summary: flex 1行 [Q番号 | 質問文(flex:1) | ▼アイコン]
     min-width:0 でスマホでも質問文が正常に折り返す
   pfaq-ans: grid 2列 [A番号(2.6em) | 回答文(1fr)]
     Q番号と同幅でAを揃え「Q」と「A」が縦に一致
------------------------------------------------------- */
.pfaq summary {
  padding: 11px 16px;
  font-weight: 700;
  font-size: .92rem;
  color: var(--sumi);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  transition: background var(--tr);
  user-select: none;
  text-align: left;     /* .sec-head の text-align:center 継承を打ち消す */
}
/* Q番号スパン：幅固定・縮まない */
.pfaq-num {
  flex-shrink: 0;
  width: 2.6em;
  color: var(--tokiwa);
  font-weight: 700;
  white-space: nowrap;
}
/* 質問文テキスト：伸縮・スマホ折り返しのため min-width:0 必須・左揃え固定 */
.pfaq-qtxt {
  flex: 1;
  min-width: 0;
  text-align: left;
}
/* ▼/▲ トグルアイコン：右端固定・縮まない */
/* style.css 側の ::after を pages.css で上書き */
.pfaq summary::after {
  content: '▼';
  display: inline-block;
  flex-shrink: 0;
  margin-left: 10px;
  color: var(--tokiwa);
  font-size: .7rem;
  transition: transform .25s ease;
  transform: rotate(0deg);
}
.pfaq[open] summary::after {
  content: '▼';
  transform: rotate(-180deg);
}
/* .pfaq summary::before : Q.は各summary内テキストに番号付きで記載するため削除 */
.pfaq summary:hover { background: #F0F8F0; }
.pfaq[open] summary { background: #EEF6EE; }

/* 回答エリア: grid 2列 [A番号(2.6em)] [回答文(1fr)] */
.pfaq-ans {
  padding: 12px 16px 16px 16px;
  font-size: .88rem;
  color: var(--mute);
  line-height: 1.8;
  border-top: 1px solid var(--bdr);
  display: grid;
  grid-template-columns: 2.6em 1fr;
  column-gap: 0;
  align-items: start;
  margin: 0;        /* <p>のデフォルトmarginを打ち消す */
}
/* A番号スパン */
.pfaq-anum {
  color: var(--tokiwa);
  font-weight: 700;
  white-space: nowrap;
  padding-top: .1em;
}
/* 回答本文スパン */
.pfaq-atext {
  line-height: 1.8;
  min-width: 0;
}

/* ============================================
   実績ページ
============================================ */
.results-intro {
  background: #EEF6EE;
  border-radius: var(--radius);
  padding: 24px 28px;
  font-size: .9rem;
  color: var(--mute);
  line-height: 1.85;
  margin-bottom: 36px;
}

/* ============================================
   事例カード：横長縦積み（モバイルファースト）
   results-grid廃止・results-stack/rs-card に完全移行
   2026-08-02
============================================ */
.results-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 48px;
}
.rs-card {
  background: var(--white);
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  padding: 24px 22px;
  box-sizing: border-box;
  width: 100%;
  transition: box-shadow var(--tr);
}
.rs-card:hover { box-shadow: var(--shadow); }
.rs-tag-row {
  margin-bottom: 10px;
}
.rs-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--sumi);
  margin: 0 0 14px;
  line-height: 1.7;
}
.rs-body {
  margin-bottom: 14px;
}
.rs-section-head {
  font-size: .85rem;
  font-weight: 700;
  color: var(--sumi);
  margin: 14px 0 6px;
}
.rs-list {
  list-style: none;
  padding: 0;
  margin: 0 0 6px;
}
.rs-list li {
  font-size: .84rem;
  color: var(--mute);
  line-height: 1.78;
  padding-left: 1.2em;
  position: relative;
  margin-bottom: 6px;
}
.rs-list li::before {
  content: '・';
  position: absolute;
  left: 0;
  color: var(--tokiwa);
}
/* 画像 */
.rs-img {
  margin: 14px 0 10px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--bdr);
  background: #fafafa;
}
.rs-img img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: contain;
}
.rs-img figcaption {
  font-size: .75rem;
  color: var(--mute);
  text-align: center;
  padding: 8px 12px;
  border-top: 1px solid var(--bdr);
  background: var(--bg);
}

/* タグ共通 */
.r-tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 4px;
  letter-spacing: .04em;
}
.r-tag-web   { background: rgba(0,123,187,.1);   color: var(--kon); }
.r-tag-brand { background: rgba(0,123,187,.1);   color: var(--kon); }
.r-tag-meo   { background: rgba(15,123,57,.1);   color: var(--tok); }
.r-tag-sns   { background: rgba(224,169,79,.12); color: #9a6e1a; }
.r-tag-tbd   { background: var(--bdr);           color: var(--mute); }

/* 外部リンク */
.r-card-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--tok);
}
.r-card-link:hover { text-decoration: underline; }

/* 利用者の声 */
.voices-grid {
  display: grid;
  grid-template-columns: 1fr;        /* スマホ：1列 */
  gap: 22px;
}
@media (min-width: 768px) {
  .voices-grid {
    grid-template-columns: repeat(2, 1fr); /* PC：2列 */
  }
}
.voice-card {
  background: var(--white);
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  padding: 24px 22px;
}
.voice-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.voice-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(15,123,57,.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--tok);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.voice-meta strong { display: block; font-size: .88rem; color: var(--sumi); }
.voice-meta span   { font-size: .75rem; color: var(--mute); }
.voice-stars { color: var(--kin); font-size: .85rem; margin-bottom: 8px; }
.voice-text  { font-size: .85rem; color: var(--mute); line-height: 1.78; }
.voice-note  {
  font-size: .72rem;
  color: var(--mute);
  text-align: center;
  margin-top: 18px;
  padding: 10px;
  background: var(--bg);
  border-radius: 6px;
}

/* ============================================
   代表者情報ページ
============================================ */
/* about-profile: インラインstyleで制御（比率1:4）*/
.about-profile {
  display: flex;
  flex-direction: row;
  gap: 32px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 640px) {
  .about-profile {
    flex-direction: column;
    align-items: center;
  }
}

/* 支援スタンス＋対応できること／事業概要＋職務略歴：左右2カラム */
.about-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}
.about-col {
  min-width: 0;
}
@media (max-width: 860px) {
  .about-two-col {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* 支援スタンス＋対応できること：1グリッドで左右カードを行単位で高さ統一 */
.stance-service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 32px;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}
/* ヘッダーブロック（タグラベル・見出し・仕切り線・説明文）*/
.ssg-head {
  padding-bottom: 8px;
}
/* カードをフル高さに */
.stance-service-grid .can-do-card {
  height: 100%;
  box-sizing: border-box;
}
@media (max-width: 860px) {
  .stance-service-grid {
    grid-template-columns: 1fr;
  }
  /* スマホ：ヘッダーを左右ペアで交互に出さず、左まとめ→右まとめに戻す */
  .ssg-head:last-of-type {
    margin-top: 8px;
  }
}
.about-photo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
/* 丸型アバター枠（画像差し替え可能な構造） */
.about-avatar-ring {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 4px solid var(--tok);
  overflow: hidden;
  background: #EEF6EE;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.about-avatar-ring img,
.about-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.about-avatar-ring .avatar-placeholder {
  color: var(--mat);
  font-size: 3.5rem;
}
.about-pname  { font-size: 1.1rem; font-weight: 700; color: var(--sumi); text-align: center; }
.about-ptitle { font-size: .78rem; color: var(--mute); text-align: center; line-height: 1.6; }
.about-msg h2 {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.45rem;
  color: var(--sumi);
  line-height: 1.55;
  margin: 12px 0;
  text-align: center;   /* 中央揃え */
}
.about-msg .tag-label {
  display: table;
  margin: 0 auto;       /* ラベルも中央揃え */
}
.about-msg .kincha-bar {
  display: block;
  margin-left: auto;
  margin-right: auto;   /* 仕切り線も中央揃え */
}
.about-msg p { font-size: .9rem; color: var(--mute); line-height: 1.85; margin-top: 12px; }

/* スタンスリスト */
.stance-list { display: flex; flex-direction: column; gap: 0; }
.stance-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 0;
  border-bottom: 1px solid var(--bdr);
}
.stance-item:last-child { border-bottom: none; }
.stance-icon {
  width: 44px; height: 44px;
  background: rgba(15,123,57,.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--tok);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.stance-text h3 { font-size: .95rem; font-weight: 700; margin-bottom: 6px; }
.stance-text p  { font-size: .87rem; color: var(--mute); line-height: 1.8; }

/* 事業概要テーブル */
.biz-table { border: 1px solid var(--bdr); border-radius: var(--radius); overflow: hidden; }
.biz-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  border-bottom: 1px solid var(--bdr);
}
.biz-row:last-child { border-bottom: none; }
.biz-label {
  background: #EEF6EE;
  padding: 14px 18px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--tok);
}
.biz-val {
  padding: 14px 18px;
  font-size: .88rem;
  color: var(--sumi);
  line-height: 1.7;
}
.biz-val a { color: var(--tok); }

/* ============================================
   対応できること（5本柱グリッド）
============================================ */
.can-do-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}
.can-do-card {
  background: var(--white);
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  padding: 28px 24px;
  position: relative;
  transition: box-shadow var(--tr), transform var(--tr);
}
.can-do-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.can-do-num {
  position: absolute;
  top: 16px;
  right: 18px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--mat);
  background: rgba(192,224,191,.25);
  padding: 2px 8px;
  border-radius: 20px;
}
.can-do-icon {
  width: 48px;
  height: 48px;
  background: rgba(15,123,57,.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tok);
  font-size: 1.2rem;
  margin-bottom: 14px;
}
.can-do-card h3 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--sumi);
  margin-bottom: 14px;
  line-height: 1.45;
}
.can-do-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.can-do-list li {
  font-size: .83rem;
  color: var(--mute);
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.5;
}
.can-do-list li i { margin-top: 2px; flex-shrink: 0; }
.can-do-note {
  background: rgba(15,123,57,.05);
  border-left: 3px solid var(--tok);
  border-radius: 4px;
  padding: 14px 18px;
  font-size: .85rem;
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: 10px;
}
.can-do-note a { color: var(--tok); font-weight: 600; }
.can-do-note i { flex-shrink: 0; }

/* ============================================
   お問い合わせページ
============================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 36px;
  align-items: start;
}
.contact-box {
  background: var(--white);
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  padding: 36px 32px;
}
.contact-box h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }
.c-sub { font-size: .88rem; color: var(--mute); line-height: 1.7; margin-bottom: 24px; }

/* Google Forms 予定エリア */
.gforms-wrap { margin-top: 8px; }
.gforms-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #EEF6EE;
  border: 1px solid var(--bdr);
  border-radius: 8px;
  padding: 18px 20px;
  font-size: .88rem;
  color: var(--mute);
  line-height: 1.7;
}
.gforms-notice i { color: var(--tok); flex-shrink: 0; margin-top: 3px; font-size: 1rem; }
.gforms-notice-inner p + p { margin-top: 4px; }

/* サイドバー */
.mail-direct {
  background: var(--white);
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  padding: 22px 22px;
}
.mail-direct h3 {
  font-size: .9rem;
  font-weight: 700;
  color: var(--sumi);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.mail-direct h3 i { color: var(--tok); }
.mail-direct p { font-size: .83rem; color: var(--mute); line-height: 1.75; }
.mail-addr {
  display: inline-block;
  font-size: .95rem;
  font-weight: 700;
  color: var(--konpeki);
  text-decoration: underline;
  margin: 6px 0;
  word-break: break-all;
}
.promise-box {
  background: var(--white);
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  padding: 22px 22px;
}
.promise-box h3 {
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--sumi);
}

/* consult-examples（contactページ） */
.consult-examples {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  overflow: hidden;
}
.consult-item {
  display: block;               /* C6: アイコン別カラム廃止、縦積みに */
  padding: 22px 24px;
  border-bottom: 1px solid var(--bdr);
  background: var(--white);
}
.consult-item:last-child { border-bottom: none; }
.consult-icon { display: none; } /* C6: 円形アイコン非表示（h3文頭へ移動） */
/* C6: h3文頭のインラインアイコン */
.consult-text h3 {
  font-size: .92rem; font-weight: 700; margin-bottom: 6px; color: var(--sumi);
  display: flex; align-items: center; gap: 6px;
}
.consult-text h3 .ci {          /* C6: h3内インラインアイコン */
  color: var(--tok); font-size: .95rem; flex-shrink: 0;
}
.consult-text p  { font-size: .85rem; color: var(--mute); line-height: 1.8; }

/* ============================================
   プライバシーポリシー
============================================ */
.privacy-body {
  max-width: 740px;
  margin: 0 auto;
}
.privacy-body h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sumi);
  margin: 32px 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--bdr);
}
.privacy-body p { font-size: .88rem; color: var(--mute); line-height: 1.85; margin-top: 8px; }
.privacy-body ul { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.privacy-body ul li {
  font-size: .88rem;
  color: var(--mute);
  line-height: 1.7;
}

/* ============================================
   about.html — 支援スタンス（A25: 幅問題根本解決）
============================================ */
/* stance-list: コンテナ幅内に確実に収める */
.stance-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
/* stance-item: can-do-cardと同形のカードスタイル */
.stance-item {
  background: var(--white);
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  padding: 24px 20px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

/* ============================================
   レスポンシブ
============================================ */
@media (max-width: 860px) {
  .svc-block    { flex-direction: column; }
  .svc-cols     { grid-template-columns: 1fr; }
  .about-profile { flex-direction: column; align-items: center; text-align: center; }
  .about-msg .kincha-bar { margin-left: auto; margin-right: auto; }
  .contact-grid { grid-template-columns: 1fr; }
  /* P17/P19: plan-gridは480px以下のみ1カラム（別メディアクエリで定義） */
  .voices-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .flow-h { flex-direction: column; align-items: center; }
  .fhs-arrow { transform: rotate(90deg); }
  .biz-row { grid-template-columns: 110px 1fr; }
  .page-hero { padding: 16px 16px 12px; }
  .page-hero h1 { font-size: 1.2rem; }
  .about-msg h2 { font-size: 1.2rem; }
  .contact-box  { padding: 26px 20px; }
  .pricing-policy { padding: 20px 18px; }
  .svc-block { padding: 24px 20px; }
}
/* plan-grid: スマホでも常に2カラム固定（480px以下メディアクエリ削除済み） */

/* ============================================================
   about.html v2 — 完全リニューアル CSS（2026-08-02）
   モバイルファースト：min-width メディアクエリのみ使用
   インラインスタイル完全撤去・クラス名は ab- / ab2col- / prof- / abt- / abh- プレフィックス
============================================================ */

/* ---- ページヒーロー上書き ---- */
.ab-hero {
  padding-top: 14px;
  padding-bottom: 12px;
}
.ab-hero-lead {
  font-size: .95rem;
  font-weight: 700;
  color: var(--sumi);
  margin: 4px 0 0;
  line-height: 1.7;
}

/* ---- プロフィールセクション余白 ---- */
.ab-prof-section {
  padding-top: 32px;
  padding-bottom: 32px;
}

/* ============================================================
   プロフィールカード（prof-card）
   スマホ：縦積み　PC（min-width:680px）：横並び
============================================================ */
.prof-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: var(--white);
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-sizing: border-box;
  width: 100%;
}

/* 左：アバター＋名前ブロック */
.prof-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* アバター円形枠 */
.prof-avatar-ring {
  width: 160px;
  height: 160px;
  min-width: 160px;
  min-height: 160px;
  border-radius: 50%;
  border: 4px solid var(--tokiwa);
  overflow: hidden;
  background: var(--bg-sub);
  display: block;
}
.prof-avatar-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 名前テキスト */
.prof-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--sumi);
  text-align: center;
  margin: 4px 0 0;
}
.prof-name-en {
  font-size: .8rem;
  font-weight: 500;
  color: var(--mute);
  letter-spacing: .07em;
  text-align: center;
  margin: 0;
}
.prof-title {
  font-size: .78rem;
  color: var(--mute);
  text-align: center;
  line-height: 1.65;
  margin: 0;
}

/* 縦区切り線（スマホでは横線） */
.prof-divider {
  width: 100%;
  height: 1px;
  background: var(--bdr);
  flex-shrink: 0;
}

/* 右：代表メッセージブロック */
.prof-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.prof-right .tag-label {
  display: table;
  margin: 0 auto;
}
.prof-h2 {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.15rem;
  color: var(--sumi);
  line-height: 1.55;
  text-align: center;
  margin: 10px 0 0;
}
.prof-right .kincha-bar {
  margin: 14px auto;
}
.prof-body {
  font-size: .88rem;
  color: var(--mute);
  line-height: 1.85;
  text-align: left;
  margin: 0 0 10px;
  width: 100%;
}
.prof-body:last-child { margin-bottom: 0; }

/* PC：横並びに展開 */
@media (min-width: 680px) {
  .prof-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    padding: 32px 36px;
  }
  .prof-left {
    width: 180px;
    min-width: 180px;
    padding-right: 28px;
  }
  .prof-divider {
    width: 1px;
    height: auto;
    align-self: stretch;
    margin: 0 28px 0 0;
  }
  .prof-right {
    flex: 1;
    align-items: flex-start;
  }
  .prof-right .tag-label {
    display: inline-block;
    margin: 0;
  }
  .prof-h2 {
    font-size: 1.3rem;
    text-align: left;
  }
  .prof-right .kincha-bar {
    margin: 14px 0;
  }
}

/* ============================================================
   2カラムグリッド（ab2col）
   スマホ：1列　PC（min-width:860px）：2列
   ヘッダー行・カード行・ボタン行で共用
============================================================ */
.ab2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

/* ヘッダー行 */
.ab2col-head {
  text-align: center;
  padding-bottom: 4px;
}
.ab2col-h2 {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.2rem;
  color: var(--sumi);
  margin: 8px 0 0;
  text-align: center;
}
.ab2col .tag-label {
  display: table;
  margin: 0 auto;
}
.ab2col-head .kincha-bar {
  margin: 12px auto;
}
.ab2col-lead {
  font-size: .85rem;
  color: var(--mute);
  line-height: 1.8;
  margin: 0;
  text-align: center;
}

/* カード行 */
.ab2col-cards {
  margin-bottom: 16px;
  align-items: stretch;
}

/* ボタン行 */
.ab2col-btns {
  margin-top: 8px;
}
.ab-btn-cell {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}

/* テーブル行 */
.ab2col-tables {
  align-items: start;
}

/* PC：2列展開 */
@media (min-width: 860px) {
  .ab2col {
    grid-template-columns: 1fr 1fr;
    gap: 16px 32px;
  }
  .ab2col-h2 { font-size: 1.3rem; }
}

/* ============================================================
   APPROACHカード / SERVICEカード（ab-card）
============================================================ */
.ab-card {
  background: var(--white);
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  padding: 22px 20px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  transition: box-shadow var(--tr), transform var(--tr);
}
.ab-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

/* バッジ */
.ab-badge {
  display: table;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--tokiwa);
  background: rgba(192,224,191,.10);
  border: 1px solid rgba(192,224,191,.5);
  border-radius: 4px;
  padding: 3px 10px;
  margin-bottom: 10px;
}
.ab-badge-svc {
  background: rgba(15,123,57,.07);
  border-color: rgba(15,123,57,.18);
}

/* タイトル行：アイコン＋h3横並び */
.ab-card-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.ab-card-icon {
  color: var(--tokiwa);
  font-size: 1.05rem;
  flex-shrink: 0;
}
.ab-card-h3 {
  font-size: .92rem;
  font-weight: 700;
  color: var(--sumi);
  margin: 0;
  line-height: 1.45;
}

/* 本文 */
.ab-card-body {
  font-size: .84rem;
  color: var(--mute);
  line-height: 1.8;
  margin: 0;
}

/* チェックリスト */
.ab-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ab-card-list li {
  font-size: .83rem;
  color: var(--mute);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.55;
}
.ab-card-list li i {
  color: var(--tokiwa);
  font-size: .8rem;
  flex-shrink: 0;
  margin-top: 3px;
}

/* ============================================================
   インラインリンク
============================================================ */
.ab-inline-link {
  color: var(--konpeki);
  text-decoration: underline;
  word-break: break-all;
}
.ab-inline-link:hover { color: #3aadee; }

/* ============================================================
   ボタン色バリエーション
============================================================ */
.btn-konpeki {
  background: var(--konpeki);
  border-color: var(--konpeki);
  color: var(--white) !important;
}
.btn-konpeki i { color: var(--white); }
.btn-konpeki:hover { background: #3aadee; border-color: #3aadee; opacity: 1; }

.btn-kincha {
  background: var(--kincha);
  border-color: var(--kincha);
  color: var(--sumitan) !important;
}
.btn-kincha i { color: var(--sumitan); }
.btn-kincha:hover { background: #d4943c; border-color: #d4943c; opacity: 1; }

/* ============================================================
   事業概要テーブル（abt-table / abt-row）
============================================================ */
.abt-table {
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}
.abt-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  border-bottom: 1px solid var(--bdr);
  min-width: 0;
}
.abt-row:last-child { border-bottom: none; }
.abt-label {
  background: #EEF6EE;
  padding: 13px 8px;
  font-size: .75rem;
  font-weight: 700;
  color: var(--tokiwa);
  word-break: keep-all;
  overflow-wrap: break-word;
  line-height: 1.5;
}
.abt-val {
  padding: 13px 14px;
  font-size: .85rem;
  color: var(--sumi);
  line-height: 1.75;
  word-break: break-all;
  overflow-wrap: break-word;
  min-width: 0;
}
.abt-val small { font-size: .78rem; color: var(--mute); }

/* ============================================================
   職務略歴テーブル（abh-row）
============================================================ */
.abh-row {
  display: grid;
  grid-template-columns: 66px 1fr;
  border-bottom: 1px solid var(--bdr);
  min-width: 0;
}
.abh-row:last-child { border-bottom: none; }
.abh-label {
  background: #EEF6EE;
  padding: 13px 6px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--tokiwa);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.5;
  word-break: keep-all;
}
.abh-year { white-space: nowrap; }
.abh-tilde {
  display: inline-block;
  transform: rotate(90deg);
  line-height: 1.2;
  margin: 2px 0;
  font-size: .72rem;
}
.abh-val {
  padding: 13px 12px;
  font-size: .83rem;
  color: var(--sumi);
  line-height: 1.75;
  word-break: normal;
  overflow-wrap: break-word;
  min-width: 0;
}

/* ============================================================
   最終CTA
============================================================ */
.ab-cta-lead {
  color: rgba(255,255,255,.78);
  max-width: 480px;
  margin: 14px auto 28px;
  font-size: .92rem;
  text-align: center;
  line-height: 1.8;
}

/* ============================================================
   back-to-top ボタン（about.html 用）
============================================================ */
#back-to-top {
  position: fixed;
  bottom: 28px;
  right: 24px;
  z-index: 9999;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: var(--matsuba);
  color: var(--sumitan);
  box-shadow: 0 3px 12px rgba(42,46,43,.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s;
}
#back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}
#back-to-top:hover { background: #a8d0a7; }

/* ============================================================
   pricing.html — pay-grid / pay-item / pricing-rights-list
   （未定義クラス追加・スマホ完全対応）
   モバイルファースト：min-width のみ使用
============================================================ */

/* 支払方式グリッド：スマホ1列、PC2列 */
.pay-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 12px;
}
@media (min-width: 680px) {
  .pay-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

/* 支払方式アイテム */
.pay-item {
  background: var(--bg);
  border: 1px solid var(--bdr);
  border-radius: var(--r-sm);
  padding: 16px 18px;
}
.pay-item strong {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  color: var(--sumi);
  margin-bottom: 8px;
}
.pay-item p {
  font-size: .83rem;
  color: var(--mute);
  line-height: 1.75;
  margin: 0;
}

/* 著作権・精算リスト */
.pricing-rights-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pricing-rights-list li {
  font-size: .84rem;
  color: var(--mute);
  line-height: 1.8;
  padding-left: 1.1em;
  position: relative;
}
.pricing-rights-list li::before {
  content: '・';
  position: absolute;
  left: 0;
  color: var(--tokiwa);
  font-weight: 700;
}

/* pricing.html — スマホ全体の横スクロール防止 */
.pv-card {
  min-width: 0;
  word-break: break-word;
  overflow-wrap: break-word;
}
.pv-price-num {
  word-break: keep-all;
}
.svc-price-card {
  min-width: 0;
  word-break: break-word;
  overflow-wrap: break-word;
}
.svc-price-meta {
  flex-wrap: wrap;
}
.svc-price-val {
  white-space: normal;
  word-break: break-word;
}

/* monitor-banner スマホ対応 */
.monitor-banner {
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}
.monitor-pct {
  word-break: keep-all;
}