/* =========================================================
   overrides.css — カンプ(ChatGPT出力)に社内規定を当てる追記ぶん
   2026-08-18 ／ ここを外せばカンプ素の状態に戻る
   ---------------------------------------------------------
   ① Webフォント（カンプは読み込みゼロ＝Macでしか正しく見えなかった）
   ② 日本語組版（行間1.7〜1.9／字間.04em〜／禁則／両端揃え／見出しpalt）
   ③ 原稿を入れ直したことで必要になった部品のCSS
   ========================================================= */

/* ---------- ① フォント ---------- */
body, .plan-en, .section-kicker, .lane-label {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, sans-serif;
}

/* ---------- ② 日本語組版 ---------- */
body {
  line-height: 1.8;
  letter-spacing: .04em;
  text-align: justify;
  word-break: normal;
  line-break: strict;
  overflow-wrap: anywhere;
}
h1, h2, h3, .price strong, .plan-en, .section-kicker {
  font-feature-settings: "palt" 1;
  text-align: left;
}
/* 見出しは語の途中で割らない（本文用の overflow-wrap を打ち消す） */
h1, h2, h3 { overflow-wrap: normal; }
/* ⚠️ Noto Sans JP はヒラギノよりわずかに広く、h1 の1行目が 4px だけあふれて
   「作って終／わりに、」と割れていた。字間を -.07em → -.085em に詰めて収めている
   （カンプの詰め気味の意図はそのまま。見た目の差はほぼ無い） */
.hero h1 { letter-spacing: -.085em; }
h1, h2 { line-height: 1.4; }
h3 { line-height: 1.55; }
p, li, blockquote, figcaption { line-height: 1.85; }
/* 見出しの行のバランス調整はPCだけ（スマホは幅を使い切らせる） */
@media (min-width: 801px) {
  /* ⚠️ 素の h1,h2 だと .section-heading h2 などに負けて効かない。
     カンプ側と同じ強さのセレクタで指定する（「…サイトで／す。」の2文字残り対策） */
  .hero h1,
  .section-heading h2, .ai-role h2, .story h2, .about h2, .contact h2,
  h3 { text-wrap: balance; }
}
/* ⚠️ 2026-08-18 実測メモ（次に触る人へ）
   ja-wrap を流したあと word-break:keep-all を入れて計測したところ、
   スマホの見出しの行の使い切りが 52% → 8% まで**悪化**した。
   理由: ja-wrap の切れ目は文節ごとで細かく、次の文節が入らずに行が早く終わるため。
   このデザインの見出し（35〜48px）とスマホ幅では keep-all は使えない。
   → いまは自然折り返し（52%）のまま。合格ライン90%に上げるには、
     見出しごとに br-sp を実測して置く必要がある（旧実装 src/pages/index.html と同じやり方。
     旧実装でも 50〜89% どまりだった）。デザイン確定後にまとめて詰める。 */
/* 中央寄せが元から効いている箇所は保つ */
.section-heading.compact h2,
.contact-copy h2, .contact-copy p,
.monthly-heading h3 { text-align: inherit; }

/* ---------- ③ 追記した部品 ---------- */

/* 制作実績：CSSモックアップ → 実際のサイト画像へ */
.work-card .site-mockup { position: relative; overflow: hidden; padding: 0; }
.work-card .mock-browser { position: relative; z-index: 2; }
.work-card .mock-browser span { font-size: 10px; opacity: .75; letter-spacing: 0; }
.work-info a { text-decoration: none; }

/* =========================================================
   2026-08-19 社長ご指示：実績のスクショを、LPと同じく
   マウスを乗せるとページ全体が流れる形にする
   ⚠️ 画像は 760px幅のページ全体スクショ（例 shibagarden 760×3390）。
      差し替えたら縦横比が変わる＝流れる距離も変わるので実物で確認すること
   ========================================================= */
.site-mockup { height: 260px; position: relative; overflow: hidden; padding: 0; }
.work-shot {
  display: block; width: 100%; height: auto;
  position: absolute; top: 30px; left: 0;   /* ブラウザバー（30px）の下から */
  transition: transform 6s linear;
}
.work-card:hover .work-shot,
.work-card:focus-within .work-shot {
  transform: translateY(calc(-100% + 230px));   /* 230px = 枠260 − バー30 */
}

/* ★2026-08-19 社長ご指示：ヒストリアコードは枠を高くして、
   少なくとも【ヒーローセクションが全部見える】ようにする
   ⚠️ 実測：ヒストリアコードのFVは元画像の y=480px で終わる（そこから背景が白に変わる）。
      PCでの表示倍率は 0.756 なので、FVを収めるには 480×0.756 ≒ 363px 必要。
      460px（画像が見えるのは 430px）にして、下に次のセクションの入口が少し覗く形にした */
.own-work-fig .site-mockup { height: 460px; }
.own-work-fig:hover .work-shot,
.own-work-fig:focus-visible .work-shot {
  transform: translateY(calc(-100% + 430px));   /* 430px = 枠460 − バー30 */
}
@media (max-width: 767px) {
  /* ⚠️ スマホは横幅が狭いぶん画像も縮むので、同じ460pxだとFVの倍以上が入って間延びする。
     330px（画像300px）でFVがちょうど収まる */
  .own-work-fig .site-mockup { height: 330px; }
  .own-work-fig .work-shot { animation-name: own-scroll; }
  @keyframes own-scroll {
    0%   { transform: translateY(0); }
    100% { transform: translateY(calc(-100% + 300px)); }
  }
}

/* ⚠️ スマホ・タブレットはマウスが無いので、ゆっくり自動で流す（LP1と同じ扱い） */
@media (hover: none) {
  .work-shot { animation: work-scroll 18s ease-in-out infinite alternate; }
  @keyframes work-scroll {
    0%   { transform: translateY(0); }
    100% { transform: translateY(calc(-100% + 230px)); }
  }
}
/* 動きを減らす設定の端末では止める */
@media (prefers-reduced-motion: reduce) {
  .work-shot { transition: none; animation: none !important; }
}

/* =========================================================
   2026-08-19 見出しを「ブログの更新が止まるのは、」に変えたぶんの枠の調整
   ⚠️ 左右50%ずつ（615px）だと「ブログの更新が止まるのは、」（実測645px）が入らず、
      "ブログの更新／が止まるのは、" と【助詞の前】で割れていた。
      文字は小さくせず、枠の側を広げて解決する（8/18のCONCEPT・STORYと同じ対処）
   ========================================================= */
.problem .section-heading.split > div { flex: 0 0 56%; }
.problem .section-heading.split > p { flex: 1 1 auto; }

/* 見出しを「あなたの会社専用のAIが引き受けます。」に変えたぶんの枠の調整（2026-08-19）
   ⚠️ 左の列が439pxしかなく「あなたの会社専用の」（実測467px）が入らずに
      "の" が1文字だけ次の行に落ちていた（社内規約：1〜2文字の孤立は不可）。
      gap が 115px と広すぎたので、そこを詰めて左の列に回す。右のカードは 631→625px でほぼ変わらない */
@media (min-width: 900px) {
  .ai-role .ai-role-grid { grid-template-columns: minmax(480px, 42%) 1fr; gap: 80px; }
}

/* ★2026-08-19 社長ご指示：実績6件は AIブログ導入前の制作。
   「AIが記事を書いた実績」と誤解されると詐欺のように見えるため、
   【カードのすぐ手前】に独立した注意書きを置く（リード文の中だと読まれない）
   ⚠️ LP1と同じ扱い：小さくしない・グレーで沈めない（打ち消し表示に見せない）
   ⚠️ 社内規約：左端だけの縦帯にしない。枠は四方に回す */
/* ⚠️ 2026-08-19 社長ご指示：白背景の囲みはやめる。地のままの文章で置く。
   ただし小さくしない・グレーで沈めないのは維持（打ち消し表示に見せないため） */
.works-caution {
  margin: 0 0 28px; padding: 0;
  font-size: 14px; line-height: 1.9; letter-spacing: .04em;
}
.works-caution strong { font-weight: 700; }

/* =========================================================
   2026-08-19 社長ご指示：ヒストリアコードの実例をLPと同じ形で載せる
   ⚠️ お客様の実績6件とは【分ける】（同じ列に混ぜると実績の水増しに見える。LP1と同じ判断）
   ⚠️ 画像の飛び先はトップページ。写っているのがトップだから。
      ブログへはテキストリンクの方で送る
   ========================================================= */
.own-work {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  align-items: center;
  margin: 0 0 34px; padding: 0 0 34px;
  border-bottom: 1px solid var(--line);
}
.own-work-t { line-height: 1.9; letter-spacing: .04em; }
.own-work-link {
  display: inline-block; margin-top: 14px;
  font-weight: 700; letter-spacing: .04em;
  text-underline-offset: .3em;
}
.own-work-link::after { content: " ↗"; }
.own-work-fig { position: relative; display: block; }
/* ⚠️ ブラウザバーの重ね順は .work-card 側にしか指定が無く、
   流れてきた画像がバーの上に乗って隠していた。こちらにも同じ指定を入れる */
.own-work-fig .mock-browser { position: relative; z-index: 2; background: #fff; }
.own-work-fig .mock-browser span { font-size: 10px; opacity: .75; letter-spacing: 0; }
.own-work-fig .site-mockup {
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  box-shadow: 0 15px 38px #2720390d;
}
.own-work-mark {
  position: absolute; right: -14px; bottom: -14px;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: grid; place-items: center; font-size: 20px; font-weight: 700;
  transition: transform .3s ease;
}
.own-work-fig:hover .own-work-mark { transform: scale(1.08); }

@media (max-width: 767px) {
  /* スマホは縦積み。文章 → 画像 の順（先に何の話か分かる） */
  .own-work { grid-template-columns: 1fr; gap: 20px; }
}

/* お客様の声：副題・リード・顔写真 */
.voice-lead { margin-top: 12px; max-width: 46em; }
.voice-sub { font-weight: 700; margin: 4px 0 10px; opacity: .85; }
.voice-person { display: flex; align-items: center; gap: 12px; }
.voice-person img {
  width: 48px; height: 48px; border-radius: 50%;
  object-fit: cover; flex: 0 0 auto;
}
.voice-person span { font-size: 12px; line-height: 1.7; text-align: left; }
/* ★2026-08-19 社長ご指示：引用本文と区切り線が接していた（実測では24px重なっていた）ので離す。
   🔴 ハマりどころ：カンプでは `.voice-person` が **position:absolute; bottom:28px** で
      カードの下に貼り付けてある（3枚の人物欄の高さを揃えるため）。
      そのため margin-top も padding-bottom も**位置に効かない**（カードの高さにも入らない）。
      → カード側の下パディングで【人物欄のぶんの領域】を確保するのが正しい直し方 */
.voice-card { padding-bottom: 148px; }
.voice-card .voice-person { padding-top: 20px; }

/* デモ動画カード（カンプの code-window と差し替え） */
.demo-card {
  background: var(--paper, #fffdf8);
  border-radius: 18px; padding: 18px;
  box-shadow: 0 18px 40px rgba(39, 32, 57, .18);
}
/* 🔴 白いカードの中なのに文字が白のままで、コントラスト1.02:1＝見えていなかった。
   （メモにある「.sec--dark の中に白カードを置くと中の文字まで白くなる」事故と同じ） */
.demo-card .demo-lead { color: var(--ink); font-weight: 700; margin: 0 0 10px; text-align: left; }
.demo-video {
  display: block; width: 100%; border-radius: 10px; background: #000;
}
.demo-cap { font-size: 13px; margin: 12px 0 0; color: var(--ink, #272039); }
.demo-note { font-size: 12px; margin: 8px 0 0; color: var(--muted, #716c76); }
.demo-note b { font-weight: 700; }

/* サービス：共通で含まれるもの の見出し */
.included-label {
  font-size: 12px; letter-spacing: .18em; font-weight: 700;
  margin: 34px 0 12px; text-align: left; opacity: .7;
}

/* オプション表（2026-08-18 社長ご指示：料金はこのページに全部出す） */
.opt-block { margin-top: 44px; }
.opt-table {
  width: 100%; border-collapse: collapse; margin-top: 18px;
  font-variant-numeric: tabular-nums;
}
.opt-table th,
.opt-table td {
  border-bottom: 1px solid var(--line);
  padding: 14px 8px; text-align: left; vertical-align: baseline;
}
.opt-table th { font-size: 14px; font-weight: 700; }
.opt-table td { font-size: 13px; white-space: nowrap; text-align: right; }
.opt-table td strong { font-size: 20px; font-weight: 900; color: var(--blue-deep); }
.opt-taxin {
  display: block; margin-top: 2px;
  font-size: 11px; font-weight: 400; color: var(--muted);
}
@media (max-width: 800px) {
  .opt-table th, .opt-table td { display: block; padding: 0 4px; border: 0; }
  .opt-table th { padding-top: 14px; }
  .opt-table td { text-align: left; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  .opt-taxin { display: inline; margin-left: 6px; }
}

/* ★2026-08-19 社長ご指示：ブログ欄は実際の記事のアイキャッチ画像を出す（B案）。
   カンプは「白い丸の中に和柄を小さく置く」作りなので、写真のときだけ全面表示に切り替える。
   ⚠️ アイキャッチが無い記事は和柄のまま出す（穴を開けない）＝ has-photo が付かない */
.blog-thumb.has-photo::before { display: none; }          /* 白い丸を消す */
.blog-thumb.has-photo img {
  width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0;
}
/* 写真の上だと薄いグレーの番号が読めないので、白＋影にする */
.blog-thumb.has-photo > span {
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

/* フッターの住所行 */
.footer-addr { font-size: 12px; opacity: .75; margin-top: 8px; }

/* =========================================================
   2026-08-18 社長ご指示（FVの修正3点）
   ========================================================= */

/* ① ヘッダーは「忍＋SHINOBI-WEB」→ ヒログシクミデザインの正規ロゴへ
   ⚠️ フッターは濃い地でロゴの黒文字が消えるため、あえて差し替えていない */
.brand--logo { flex-direction: column; align-items: flex-start; gap: 5px; }
.brand-logo { display: block; width: auto; height: 34px; }
/* ロゴ下の添え書き（地域名。順位の源なので外さない）
   ⚠️ nowrap にすると375pxでヘッダーが横にはみ出す（8/17に実際に起きた）。必ず normal */
.brand-tag {
  font-size: 10px; letter-spacing: .06em; line-height: 1.45;
  color: var(--muted); white-space: normal; text-align: left;
}
.brand.inverse .brand-tag { color: #ffffff8c; }
@media (max-width: 800px) {
  .brand-logo { height: 24px; }
  .brand-tag { font-size: 9px; }
}

/* ② 丸バッジは「働く／ホームページ」で改行。
   2行になったぶん、文字を少し詰めて円からはみ出さないようにする */
.hero-stamp strong { line-height: 1.25; }
@media (max-width: 800px) { .hero-stamp strong { font-size: 12px; } }

/* ②-b FVの3点は原稿の文言が長く、flexで縮められて「用意す／る」と割れていた。
   実測: 3項目で436px + 余白48px = 484px、枠は497pxなので1行に収まる */
.hero-notes { gap: 18px; }
.hero-notes > span { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 800px) { .hero-notes > span { white-space: normal; } }

/* =========================================================
   2026-08-18 社長ご指示（CONCEPT セクション）
   ========================================================= */

/* ④ 「AIが引き受けます。」を改行させない。
   実測: 1555px幅で 必要509px / 枠508px と **1pxだけ**足りずに折り返していた。
   字間を -.055em → -.068em に詰めて収める（カンプの詰め気味の意図は保つ） */
.ai-role h2 { letter-spacing: -.068em; }
/* ⚠️ 1920px で 1555px より枠が狭くなる（495px < 508px）現象の対策。
   .content-width は 1380px で頭打ちなのに gap:9vw だけが伸び続け、
   左の見出し列がどんどん削られていたため。間隔に上限を付けて列幅を確保する。 */
@media (min-width: 801px) { .ai-role-grid { gap: min(9vw, 124px); } }

/* ⑤ 丸バッジ（青「よくある」・ピンク「SHINOBI」）を和柄の丸へ。
   ピンク側は「SHINOBI」が円からはみ出して「SHINOB」に切れていた問題も、これで解消。
   使う和柄はページ内にすでにある2枚（生成り＝よくある側／濃紫＝SHINOBI側）。
   左右の色の区別は、リストのチェック記号（青／ピンク）が引き続き持つ。 */
/* ⚠️ カンプ側の `.role-cards article:last-child .role-card-head>span{background:pink}` は
   詳細度が高いので、article を挟んで上回らせる（でないとピンクの地が残る） */
.role-cards article .role-card-head > span.wa-dot {
  background: none; padding: 0; overflow: hidden;
  display: block; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
}
.role-cards article .role-card-head > span.wa-dot img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}

/* =========================================================
   2026-08-18 社長ご指示（WHY IT DOESN'T STOP セクション）
   ========================================================= */

/* ⑥ 「始められないからでした。」を改行させない。
   実測(1620px): 必要697px / 枠686px。CONCEPTと同じく gap:9vw が広がって列を削っていたので、
   間隔に上限を付けて枠を広げ、あわせて字間を少し詰める。 */
@media (min-width: 801px) { .story-grid { gap: min(9vw, 110px); } }
.story h2 { letter-spacing: -.07em; }
/* スマホは 35px だと「始められないからでした。」(12文字=397px) が 331px の枠に入らず
   「た。」だけ3行目に落ちる。ご指示（改行なし）を優先して、この見出しだけ字を詰める */
@media (max-width: 800px) { .story h2 { font-size: 29px; } }

/* ⑦ 黄丸の「AIがやるのは」が 8px で読めないので大きくする */
.story-stamp small { font-size: 11px; letter-spacing: .1em; }

/* 🔴 黄丸が、必ず出すと決めている早送りの注記に重なって隠していた。
   丸の位置（社長のデザイン）は動かさず、文字側に逃げ場をつくる */
@media (min-width: 801px) {
  .demo-card .demo-cap, .demo-card .demo-note { padding-right: 152px; }
}
/* スマホはカードが狭く、丸が注記を4行まるごと覆ってしまう（文字を逃がす幅が取れない）。
   重ねるのをやめて、カードの下にそのまま置く */
@media (max-width: 800px) {
  .story-stamp { position: static; width: 125px; margin: 20px 0 0 auto; }
}

/* =========================================================
   2026-08-18 社長ご指示（SERVICE セクション）
   ========================================================= */

/* ★2026-08-19 社長ご指示：3枚のカードを揃える
   ⚠️ 見出し・本文・カードの高さ・幅は元から揃っていた（実測）。揃っていなかったのは【イラスト】。
      枠が中央揃え（align-items:center）で、絵の高さが 221/260/290px とばらつくため、
      下端が 464/484/499px とズレて「不揃い」に見えていた。
   ⚠️ 3枚は縦横比が違う（900×555／631×585／673×855）ので高さを同一にはできない。
      そこで【下端を揃えて地面に立たせ】、上限を下げて大きさのばらつきを縮める */
.deliver-card .deliver-image { align-items: end; }
.deliver-card .deliver-image img { max-height: 260px; max-width: 100%; }
/* ★2026-08-19 社長ご指示：絵と見出しが接していた（間隔0px）ので離す。
   絵は小さくせず、見出しの側に余白を足す（3枚とも同じだけ伸びるので揃いは保たれる） */
.deliver-card h3 { margin-top: 26px; }

/* ⑧ カードの「伺う／作る／続ける」を大きく・太く（24px・標準 → 32px・極太） */
.deliver-card h3 { font-size: 32px; font-weight: 800; letter-spacing: .01em; }
@media (max-width: 800px) { .deliver-card h3 { font-size: 28px; } }

/* ⑩ スマホで 03「続ける」の忍者が見出しに 20px 重なっていた。
   原因: 枠は 270px に縮むのに、画像の上限が PC のまま 290px だったため。
   枠からはみ出さないように上限を枠基準にする（01・02 は元から収まっているので影響なし） */
/* ⚠️ max-height:100% は効かず（%の基準が枠にならず）逆に 321px まで大きくなった。
   枠が 270px なので実寸で 258px に抑える */
@media (max-width: 800px) {
  .deliver-card .deliver-image img { max-height: 258px; }
}

/* ⑨ スマホでくノ一が見出し1行目（「…作り、」）に重なっていた。
   小さくして上へ逃がし、文字にかからない位置に置く */
@media (max-width: 800px) {
  .deliver-runner { width: 104px; top: -16px; right: -20px; }
}

/* ③ スマホの忍者を中央に（カンプは right:-31vw で右に寄って見切れていた）。
   丸バッジも忍者の上に乗るよう、右端から中央寄りへ移す */
@media (max-width: 800px) {
  .hero-ninja { right: auto; left: 50%; transform: translateX(-50%); }
  .hero-stamp { right: 50%; transform: translateX(50%); }
}

/* 税込の併記（消費税法63条・総額表示。大きい数字の下に小さく添える）
   2026-08-18 社長ご指示 */
.price-tax {
  margin: 2px 0 0; font-size: 12px; line-height: 1.5;
  color: var(--muted); letter-spacing: .02em; text-align: left;
  font-variant-numeric: tabular-nums;
}
/* ⚠️ .price は上下に罫線（border-block）が入るので、税込を div の外に置くと
   「線の下」に出てしまう。中に入れたうえで、折り返して数字の真下に来るようにする */
.price { flex-wrap: wrap; }
.price .price-tax { flex: 0 0 100%; }
/* 月額は「金額＋税込」をひと組にして右側に縦積み */
.monthly-grid .monthly-price { align-items: flex-end; gap: 2px; }
.monthly-grid .monthly-price .price-tax { text-align: right; white-space: nowrap; }

/* 料金：おすすめラベルが長くなったぶんの逃がし */
.plan-card.recommended .recommend-label {
  white-space: nowrap; font-size: 11px; letter-spacing: .02em;
}

/* =========================================================
   2026-08-19 社長ご判断：トップとLPは内容が重なってよい。
   代わりに「会社の顔」だけはトップにしか無いので、ここを厚くする
   （LP1は新トップ公開と同時に noindex にして食い合いを止める）
   ========================================================= */

/* ★2026-08-19 社長ご指示：くノ一と背景の円が下端で切れていたので、
   セクションをまたいで【次のセクションの上に被る】ように出す。
   ⚠️ 原因は .about の overflow:hidden（絵が30px・円が170pxはみ出して切られていた）
   ⚠️ 解禁すると横にもはみ出せてしまうので、body 側で横スクロールを止める
   ⚠️ 絵がブログのリンクの上に乗るとクリックを邪魔するので pointer-events:none */
.about { overflow: visible; }
.about .about-character { z-index: 2; }
.about .about-character img,
.about .about-circle { pointer-events: none; }
body { overflow-x: hidden; }

/* 会社概要。地域名で検索して来た人が「三重県の会社か」を確かめる場所。
   伊賀市 4.1位 / 三重県 9.2位 の受け皿なので、薄くしない */
.about .about-copy .company-facts {
  margin: 26px 0 4px; padding: 0;
  border-top: 1px solid var(--line);
  font-size: 14px; line-height: 1.9; letter-spacing: .04em;
}
.about .about-copy .company-facts > div {
  display: flex; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.about .about-copy .company-facts dt {
  flex: 0 0 6.5em; color: var(--muted); font-weight: 500;
}
.about .about-copy .company-facts dd { margin: 0; flex: 1 1 auto; }
.about .about-copy .company-facts a { color: inherit; }

/* ⚠️ スマホで dt に 6.5em を取ると本文側が 200px 台まで痩せる。
   社内規約「スマホは行が画面幅を使い切る」に反するので縦積みにする */
@media (max-width: 640px) {
  .about .about-copy .company-facts > div { display: block; padding: 10px 0; }
  .about .about-copy .company-facts dt { font-size: 12px; margin-bottom: 1px; }
}

/* ⚠️ 「ヒログシクミデザインについて」が2行に割れて「て」が1文字だけ落ちていた
   （社内規約：見出し・ラベルの1〜2文字孤立は不可）。14文字×14px＝約200pxで、
   PC 590px・スマホ 331px のどちらにも収まるので nowrap で1行に固定する */
.about .about-copy .circle-link span { white-space: nowrap; }

/* 保守・移設・設置は「頼まれればやる」（2026-08-19 社長）。
   セクションを立てず、CONTACT に1行だけ添える */
.contact .contact-copy .contact-sub {
  margin-top: 12px; font-size: 14px; line-height: 1.8;
  letter-spacing: .04em; opacity: .82;
}

/* =========================================================
   2026-08-19 下層ページの型（まず個人情報保護方針で作る）
   ⚠️ トップのカンプCSSをそのまま使い、下層固有のものだけここに足す
   ⚠️ 日本語組版：行間1.9／字間.04em／max-width に ch は使わない（社内規約）
   ========================================================= */

/* ページ見出しの帯 */
.page-head {
  padding: 96px 0 56px;
  background: var(--paper, #fffdf8);
  border-bottom: 1px solid var(--line);
}
.page-head h1 {
  margin: 10px 0 0;
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 900; line-height: 1.35;
  letter-spacing: -.02em; font-feature-settings: "palt";
}
.page-head .page-lead {
  margin: 22px 0 0; font-size: 15px;
  line-height: 1.9; letter-spacing: .04em;
}

/* 本文 */
.legal { padding: 64px 0 96px; }
.legal-body { max-width: 46em; }
.legal-body h2 {
  margin: 56px 0 18px; padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 20px; font-weight: 900; line-height: 1.6;
  letter-spacing: .01em;
}
.legal-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-body h3 {
  margin: 26px 0 10px;
  font-size: 15px; font-weight: 700; line-height: 1.7;
}
.legal-body p {
  margin: 0 0 16px;
  font-size: 15px; line-height: 1.9; letter-spacing: .04em;
}
.legal-list { margin: 0 0 16px; padding-left: 1.3em; list-style: disc; }
.legal-list li {
  margin-bottom: 8px;
  font-size: 15px; line-height: 1.9; letter-spacing: .04em;
}
.legal-body a { text-underline-offset: .3em; }

/* 事業者の情報（トップのABOUTと同じ作りに揃える） */
.legal-facts { margin: 0 0 8px; border-top: 1px solid var(--line); font-size: 15px; }
.legal-facts > div {
  display: flex; gap: 16px; padding: 11px 0;
  border-bottom: 1px solid var(--line);
  line-height: 1.9; letter-spacing: .04em;
}
.legal-facts dt { flex: 0 0 11em; color: var(--muted); font-weight: 500; }
.legal-facts dd { margin: 0; flex: 1 1 auto; }

/* 外部送信の表。⚠️ 横に長いので、はみ出す時は表の中だけ横スクロールさせる */
.legal-table-wrap { overflow-x: auto; margin: 0 0 16px; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.legal-table th, .legal-table td {
  padding: 12px 14px; border-bottom: 1px solid var(--line);
  text-align: left; line-height: 1.8; letter-spacing: .02em; vertical-align: top;
}
.legal-table thead th {
  font-size: 12px; color: var(--muted); font-weight: 700;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.legal-table tbody th { font-weight: 700; }

.legal-note {
  margin: 10px 0 0; padding: 0;
  font-size: 14px; line-height: 1.9; letter-spacing: .04em;
}
.legal-date { margin-top: 40px; font-size: 14px; color: var(--muted); }

@media (max-width: 767px) {
  .page-head { padding: 68px 0 40px; }
  .legal { padding: 44px 0 64px; }
  .legal-body h2 { margin-top: 40px; font-size: 18px; }
  /* ⚠️ スマホで dt に 11em を取ると本文が痩せる（社内規約：行が画面幅を使い切る） */
  .legal-facts > div { display: block; padding: 12px 0; }
  .legal-facts dt { font-size: 12px; margin-bottom: 2px; }
}

/* ⚠️ 本文の overflow-wrap:anywhere（日本語組版の指定）が表の英字にも効いて、
   「Microsof／t」「Cloudflar／e」と語の途中で割れていた。表の中だけ打ち消す。
   ただしURLは長いので、そこだけは途中で折り返してよい */
.legal-table th, .legal-table td { overflow-wrap: normal; word-break: normal; }
.legal-table tbody td:nth-child(2) { white-space: nowrap; }   /* 提供元（Google／Microsoft…） */
.legal-table a { word-break: break-all; }
.legal-table tbody th { width: 12em; }

/* ⚠️ 2026-08-19 削除：.greeting / .greeting-quote / .greeting-sign / .company / .map-wrap
   `/about/` も文書レイアウト（.legal）から外したため不要になった。
   経緯は最下部の【ABOUT詳細をトップと同じ格に上げる】の項を読むこと。
   🔴 `.legal-facts` は **個人情報保護方針が使っている**ので残してある。消さないこと。 */

/* ---------- ブログ一覧（下層） ---------- */
.blog-archive { padding: 64px 0 96px; }
.blog-archive .blog-grid { gap: 40px 28px; }
/* ⚠️ トップは3件だが一覧は12件。4行になるので行間を少し広げる */

/* 個人情報保護方針への導線をフッターで押しやすく（社長ご指示 2026-08-19） */
.footer-bottom a[href="/privacy-policy/"] {
  display: inline-block; padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  letter-spacing: .12em;
  transition: background-color .25s ease, border-color .25s ease;
}
.footer-bottom a[href="/privacy-policy/"]:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .6);
}

/* =========================================================
   2026-08-19 社長ご指示：下層ページが殺風景なので、
   ヘッダーと本文の横の空きに忍者・和柄を入れる
   ⚠️ 原稿の指示どおり【下層は控えめに】。本文の読みやすさを最優先する
   ⚠️ 本文に重ねない・クリックを邪魔しない（pointer-events:none）
   ⚠️ スマホは幅が無いので全部消す（PCの位置前提の絶対配置。過去に本文へ乗る事故あり）
   ========================================================= */

/* ── ページ見出しの帯 ── */
.page-head { position: relative; overflow: hidden; }
/* 和柄の丸（右上・大きく薄く） */
.page-head::before {
  content: ""; position: absolute; right: -70px; top: -86px;
  width: 286px; aspect-ratio: 1; border-radius: 50%;
  background: url("/img/70102a0b.webp") center / cover;
  opacity: .5; pointer-events: none; z-index: 0;
}
/* 忍者（右下・帯の底に立つ） */
.page-head::after {
  content: ""; position: absolute; right: 104px; bottom: 0;
  width: 206px; height: 218px;
  background: url("/img/a71b84a1.webp") center bottom / contain no-repeat;
  pointer-events: none; z-index: 1;
}
/* 文字は必ず絵より前に出す（重ね順を自分で作る。カンプの帯と同じ考え方） */
.page-head .content-width { position: relative; z-index: 2; }

/* ── 本文の左右の空き（実測：左右とも224px） ── */
.legal { position: relative; overflow: hidden; }
.legal::before {
  content: ""; position: absolute; left: -100px; top: 140px;
  width: 250px; aspect-ratio: 1; border-radius: 50%;
  background: url("/img/70102a0b.webp") center / cover;
  opacity: .55; pointer-events: none; z-index: 0;
}
.legal::after {
  content: ""; position: absolute; right: -80px; bottom: 120px;
  width: 210px; aspect-ratio: 1; border-radius: 50%;
  background: url("/img/a9b6c866.webp") center / cover;
  opacity: .45; pointer-events: none; z-index: 0;
}
.legal .content-width { position: relative; z-index: 1; }

/* 会社概要のブロックは飾りを重ねない（表が読みづらくなるため） */
.legal.company::before, .legal.company::after { display: none; }

@media (max-width: 900px) {
  /* ⚠️ 狭い画面では絵の逃げ場が無く、本文に乗る。全部消す */
  .page-head::before, .page-head::after,
  .legal::before, .legal::after { display: none; }
}

/* ⚠️ 2026-08-19 削除：.step-list / .step-row / .step-no / .step-img / .faq（罫線版）
   /service/ を「文書レイアウト（.legal）」から外したため不要になった。
   経緯は最下部の【SERVICE詳細をトップと同じ格に上げる】の項を読むこと。 */

/* 料金への導線 */
.price-link { margin: 26px 0 0; }

/* トップのSERVICEから /service/ への導線（2026-08-19：リンクが1つも無かったため追加） */
.service-more { margin: 22px 0 0; }

/* ⚠️ 検品ツールが「balanceがスマホでも効いている」と判定したため、
   スマホ側で明示的に pretty へ戻す（社内規約：balanceはPCだけ）。
   min-width:801px の指定だけでは、ツールが打ち消しを確認できない */
@media (max-width: 768px) {
  .hero h1,
  .section-heading h2, .ai-role h2, .story h2, .about h2, .contact h2,
  h1, h2, h3 { text-wrap: pretty; }
}

/* ---------- ブログカード：写真・タイトル・カテゴリーをリンクに（2026-08-19 社長ご指示） ---------- */
.blog-thumb-link { display: block; text-decoration: none; }
.blog-thumb-link .blog-thumb { transition: transform .35s ease, box-shadow .35s ease; }
.blog-thumb-link:hover .blog-thumb {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(39, 32, 57, .16);
}
/* 写真そのものも少し寄る（押せることが伝わる） */
.blog-thumb-link .blog-thumb img { transition: transform .5s ease; }
.blog-thumb-link:hover .blog-thumb.has-photo img { transform: scale(1.05); }

/* タイトル */
.blog-card h3 .blog-title-link {
  color: inherit; text-decoration: none;
  transition: color .2s ease;
}
.blog-card h3 .blog-title-link:hover { color: var(--blue-deep); text-decoration: underline; text-underline-offset: .25em; }

/* カテゴリー（押すとカテゴリー一覧へ） */
.blog-meta .blog-cat {
  background: var(--ink); color: #fff;
  letter-spacing: 0; border-radius: 99px; padding: 6px 9px;
  text-decoration: none;
  transition: background-color .2s ease;
}
.blog-meta .blog-cat:hover { background: var(--blue-deep); }

/* 🔴 2026-08-19 ハマりどころ：カンプに `.blog-card>a { display:flex; border-top:1px; ... }` があり、
   READ MORE 用のその指定が【写真のリンクにも当たって】サムネの幅が0に潰れていた。
   カンプより強いセレクタで打ち消す（引き継ぎの「カンプ側のセレクタは詳細度が高い」の実例） */
.blog-card > a.blog-thumb-link {
  display: block;
  border-top: 0;
  padding-top: 0;
  font: inherit;
  letter-spacing: normal;
  justify-content: normal;
}

/* =========================================================
   【SERVICE詳細をトップと同じ格に上げる】2026-08-19 社長ご指示（3度目で意図が確定）
   ---------------------------------------------------------
   社長のお言葉:
   「トップページのサービス項目で結構こだわって作ってくれてるのに、
     いざ詳細ページに行くとものすごくショボショボになっている。
     詳細ページの方が劣っているということは許されない」

   🔴 原因（実測）: /service/ の本文が【個人情報保護方針と同じ .legal】で組まれていた。
      器そのものが別物だった。
      | | トップのSERVICE | /service/（修正前） |
      | 横幅   | 1380px            | 46em（約690px）＝条文の段組み |
      | 見出し | 60px              | 20px＋上罫線（規約の条文と同じ書式） |
      | 3ステップ | 白カード＋色丸＋絵260px | 罫線1本の行＋絵90〜150px |
      | FAQ    | —                 | 罫線だけ |
      ⚠️ イラストを足す（8/19の2度目の対応）だけでは器が文書のままなので直らなかった。

   対応: .legal から外し、トップと同じ語彙で組み直す。
      ・白カード（四方に枠・角丸8・影）＋色丸（blue/pink/gold・opacity .14）＝ .deliver-card と同じ
      ・キッカー（Arial・字間.22em）＋大見出し ＝ .section-heading と同じ
      ・地をクリーム→紙→クリームで交互（トップの deliver→pricing のリズム）
   ⚠️ 文言は1文字も変えていない。並べ方と見せ方だけ
   ⚠️ .legal は /privacy-policy/ と /about/ が使っている。触らないこと（新しく .svc を作った）
   ========================================================= */

/* 幅：トップは1380pxだが、詳細は読ませるページなので1180pxで止める
   （1380pxだと本文1行が55字を超える。46em=690pxのままでは狭すぎて貧相に見えていた） */
.svc-width { width: min(1180px, 100% - 44px); margin: 0 auto; position: relative; z-index: 1; }

.svc { position: relative; overflow: hidden; padding: 104px 0 96px; }
.svc--steps    { background: var(--cream); }
.svc--included { background: var(--paper); }
.svc--faq      { background: var(--cream); }
/* ヘッダーが position:fixed（88px）なので、#faq が見出しごと隠れないように逃がす */
.svc[id] { scroll-margin-top: 96px; }

/* ── 見出し（h1=52px より小さく、旧20pxより大きく。トップの作りに合わせる） ── */
.svc-heading { margin-bottom: 46px; }
.svc-heading h2 {
  margin: 0; font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 900; line-height: 1.42; letter-spacing: -.04em;
  font-feature-settings: "palt" 1;
}
.svc-heading.split { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
/* ⚠️ `flex: 0 0 auto` ＋ max-width だけだと、長い文のときに箱が痩せて
   「三重県伊賀市一／之宮です。」と語中で割れた（/about/ のACCESSで実測）。
   幅を先に決めて、そこに収まる字数を確保する */
.svc-heading.split > p {
  /* ⚠️ 26em(364px)では「一之宮で／す。」と2文字が落ちた。実測26字ぶん＝28em で1行に収まる */
  flex: 0 0 28em; width: 28em; max-width: 100%; margin: 0 0 6px;
  color: var(--muted); font-size: 14px; line-height: 2; letter-spacing: .04em;
}
/* 見出しの行バランスはPCだけ（社内規約。スマホは幅を使い切らせる） */
@media (min-width: 801px) { .svc-heading h2 { text-wrap: balance; } }
@media (max-width: 768px) { .svc-heading h2 { text-wrap: pretty; } }

/* ── 3つのステップ：横長の白カード ── */
.svc-steps { display: grid; gap: 26px; }
.svc-step {
  display: grid; grid-template-columns: 330px 1fr; align-items: center; gap: 46px;
  position: relative; overflow: hidden;
  background: var(--paper); border: 1px solid #2720391a; border-radius: 8px;
  box-shadow: 0 15px 45px #2720390f;
  padding: 40px 52px;
  transition: transform .25s ease;
}
.svc-step:hover { transform: translateY(-6px); }
/* 色丸：トップの .deliver-card:after と同じ考え方（絵の後ろで枠の外へ抜ける） */
.svc-step::before {
  content: ""; position: absolute; left: -84px; top: 50%; transform: translateY(-50%);
  width: 330px; aspect-ratio: 1; border-radius: 50%; opacity: .14; z-index: 0;
}
.svc-step.blue::before { background: var(--blue); }
.svc-step.pink::before { background: var(--pink); }
.svc-step.gold::before { background: var(--gold); }

/* ⚠️ 3枚は縦横比が違う（900×555／631×585／673×855）。高さは揃わないので
   【下端を揃えて地面に立たせる】（8/19にトップのカードで学んだのと同じ） */
.svc-step-visual {
  position: relative; z-index: 1;
  display: grid; place-items: end center; height: 250px;
}
.svc-step-visual img {
  max-width: 100%; max-height: 250px;
  object-fit: contain; filter: drop-shadow(0 16px 12px #27203914);
}
.svc-step-text { position: relative; z-index: 1; }
/* 番号は左・STEPは右端。トップのカードの .deliver-top と同じ振り方。
   ⚠️ これが無いと文が短いカード（03）で右半分が空いて締まらない（実測して足した） */
.svc-step-no {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.svc-step-no b { font: 900 30px/1 Arial; color: var(--blue-deep); }
.svc-step-no span { font: 800 9px Arial; letter-spacing: .17em; color: var(--muted); }
.svc-step.pink .svc-step-no b { color: var(--pink); }
.svc-step.gold .svc-step-no b { color: #b78900; }
/* 「伺う／作る／続ける」はトップのカードと同じ32px・極太に揃える（ここが格の差の主因） */
.svc-step-text h3 {
  margin: 0 0 14px; font-size: 32px; font-weight: 800;
  letter-spacing: .01em; line-height: 1.45;
}
.svc-step-text p { margin: 0; font-size: 16px; line-height: 1.95; letter-spacing: .04em; color: var(--muted); }
.svc-step-text p strong { color: var(--ink); }

/* ── 3プラン共通で含まれるもの：札 → 9枚のカードへ ──
   ⚠️ 地が紙なのでカードはクリームで塗る（紙の上に紙だと枠しか見えない） */
.svc-inc {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin: 0; padding: 0; list-style: none;
}
.svc-inc li {
  display: flex; align-items: center; gap: 13px;
  background: var(--cream); border: 1px solid #2720391a; border-radius: 8px;
  padding: 20px 22px;
  font-size: 15px; font-weight: 700; line-height: 1.6; letter-spacing: .04em;
  text-align: left;
}
/* 印はサイト内にある語彙（丸）を使い回す。色はトップの札と同じ3色を回す */
.svc-inc li::before {
  content: ""; flex: 0 0 12px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--blue-deep);
}
.svc-inc li:nth-child(3n+2)::before { background: var(--pink); }
/* ⚠️ --gold(#ffd31a) の12px丸はクリーム地だとほぼ見えない（実測）。
   トップが金の文字に使っている #b78900 を丸にも使う */
.svc-inc li:nth-child(3n)::before { background: #b78900; }
.svc-note { margin: 24px 0 0; color: var(--muted); font-size: 14px; line-height: 1.9; letter-spacing: .04em; }

/* ── よくあるご質問：罫線 → カード。PCは2列（1180pxを1列で使うと1行が長すぎる） ── */
.svc-faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 0; }
.svc-faq > div {
  background: var(--paper); border: 1px solid #2720391a; border-radius: 8px;
  box-shadow: 0 12px 32px #2720390d;
  padding: 30px 32px 32px;
}
.svc-faq dt {
  position: relative; padding-left: 44px;
  font-size: 17px; font-weight: 800; line-height: 1.65; letter-spacing: .03em;
}
.svc-faq dt::before {
  content: "Q"; position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--blue-deep); color: #fff;
  display: grid; place-items: center; font: 800 14px/1 Arial;
}
.svc-faq dd {
  margin: 16px 0 0; padding-left: 44px; position: relative;
  color: var(--muted); font-size: 15px; line-height: 1.95; letter-spacing: .04em;
}
.svc-faq dd::before {
  content: "A"; position: absolute; left: 0; top: 1px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--pink); color: #fff;
  display: grid; place-items: center; font: 800 14px/1 Arial;
}

/* ── 和柄（PCの左右の空きだけ。本文には重ねない） ── */
.svc--steps::after {
  content: ""; position: absolute; right: -90px; top: 64px;
  width: 250px; aspect-ratio: 1; border-radius: 50%;
  background: url("/img/a9b6c866.webp") center / cover;
  opacity: .34; pointer-events: none; z-index: 0;
}
.svc--faq::after {
  content: ""; position: absolute; left: -110px; bottom: 88px;
  width: 240px; aspect-ratio: 1; border-radius: 50%;
  background: url("/img/70102a0b.webp") center / cover;
  opacity: .4; pointer-events: none; z-index: 0;
}

@media (max-width: 1080px) {
  .svc-step { grid-template-columns: 260px 1fr; gap: 34px; padding: 34px 38px; }
  .svc-step::before { left: -70px; width: 270px; }
}
@media (max-width: 900px) {
  /* ⚠️ 狭い画面では絵の逃げ場が無く本文に乗る。飾りは全部消す（.legal と同じ判断） */
  .svc--steps::after, .svc--faq::after { display: none; }
  .svc-faq { grid-template-columns: 1fr; }
  .svc-inc { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .svc { padding: 64px 0 68px; }
  .svc-heading { margin-bottom: 30px; }
  .svc-heading.split { display: block; }
  .svc-heading.split > p { max-width: none; margin: 16px 0 0; }
  .svc-steps { gap: 18px; }
  .svc-step { grid-template-columns: 1fr; gap: 18px; padding: 26px 20px 30px; }
  .svc-step::before { left: 50%; top: 116px; transform: translate(-50%, -50%); width: 240px; }
  .svc-step-visual { height: 190px; }
  .svc-step-visual img { max-height: 190px; }
  .svc-step-text h3 { font-size: 26px; }
  .svc-step-text p { font-size: 15px; }
  .svc-inc { grid-template-columns: 1fr; gap: 10px; }
  .svc-inc li { padding: 16px 18px; font-size: 14px; }
  /* ⚠️ 文字は小さくせず【余白を詰めて】本文の幅を取り戻す（社内規約・LP2で確立したやり方）。
     22px+38px だと「AIの利用料は別にかかります／か。」と1文字孤立が出た（実測） */
  .svc-faq > div { padding: 24px 18px 26px; }
  .svc-faq dt { font-size: 16px; padding-left: 34px; }
  .svc-faq dd { padding-left: 34px; }
  .svc-faq dt::before, .svc-faq dd::before { width: 26px; height: 26px; font-size: 12px; }
}

/* =========================================================
   【ABOUT詳細をトップと同じ格に上げる】2026-08-19 社長ご指示
   ---------------------------------------------------------
   社長:「/about/ についても詳細ページの方が正直しょぼいです。
          ここもサービスのページ同様の考え方で、詳細の方が良くなるように」

   🔴 原因は `/service/` と同じ。**文書レイアウト（.legal）で組まれていた。**
      | | トップのABOUT | /about/（修正前） |
      | 横幅   | 画面いっぱい2カラム | 46em（約690px）。1440pxの画面で右半分が空 |
      | 見出し | 68px              | 30px ／ 会社概要・アクセスは20px＋上罫線 |
      | 代表の写真 | （イラストのくノ一＋大きな円） | **84pxの小さな丸**を文末に添えるだけ |
      | 会社概要 | 6項目・罫線       | 9項目・罫線（トップとほぼ同じ＝詳細の意味が無い） |
      | 地図   | —                 | 本文幅690pxに収まって小さい |

   対応（`/service/` で作った `.svc` をそのまま土台に使う）:
      ・代表あいさつ＝**2カラム**。左に**代表の写真を大きくカードで**（84px→320px）／右に本文16px
      ・引用＝🔴 **左端だけのピンクの縦帯を撤去**（社内規約違反。[[avoid-ai-looking-design]]）。
        **四方に枠を回した白カード＋桃の丸**に
      ・会社概要＝罫線 → **2列のカード表**（トップは6項目の罫線。ここが「詳細の方が上」になる差）
      ・アクセス＝地図を**幅いっぱい・16:7**の枠付きカードに
      ・地をクリーム→紙→クリームで交互に
   ⚠️ 文言は1文字も変えていない。並べ方と見せ方だけ
   ========================================================= */

.svc--greeting { background: var(--cream); }
.svc--company  { background: var(--paper); }
.svc--access   { background: var(--cream); }

/* ── 代表あいさつ：左に写真カード／右に本文 ── */
.ab-greeting { display: grid; grid-template-columns: 320px 1fr; gap: 56px; align-items: start; }

.ab-profile {
  position: relative; overflow: hidden;
  background: var(--paper); border: 1px solid #2720391a; border-radius: 8px;
  box-shadow: 0 15px 45px #2720390f;
  padding: 22px 22px 24px;
}
/* 色丸はカードの外へ抜ける（トップのカードと同じ考え方）。
   ⚠️ 最初は左上に置いたが、写真がカードのほとんどを占めるので
      22pxの余白にしか出ず【青い帯】に見えた（実測）。名前の後ろへ移して面で見せる */
.ab-profile::before {
  content: ""; position: absolute; right: -62px; bottom: -72px;
  width: 215px; aspect-ratio: 1; border-radius: 50%;
  background: var(--blue); opacity: .14; z-index: 0;
}
.ab-profile-photo { position: relative; z-index: 1; border-radius: 6px; overflow: hidden; }
.ab-profile-photo img { display: block; width: 100%; height: auto; }
.ab-profile-name { position: relative; z-index: 1; margin: 18px 0 0; text-align: left; }
.ab-profile-name span { display: block; color: var(--muted); font-size: 12px; letter-spacing: .06em; }
.ab-profile-name strong { display: block; margin-top: 5px; font-size: 22px; font-weight: 900; letter-spacing: .04em; }

/* 本文。読み物なので 15px → 16px に上げる。
   ⚠️ 2カラムでも右の列は804pxあり、16pxだと1行50字で長い（読み物の上限は45字前後）。
   46em＝736px＝約46字で止める。⚠️ `ch` は使わない（日本語では想定の半分になる社内規約） */
.ab-body { max-width: 46em; }
.ab-body p { margin: 0 0 18px; font-size: 16px; line-height: 1.95; letter-spacing: .04em; }
.ab-body p:last-child { margin-bottom: 0; }
.ab-body strong { font-weight: 800; }

/* 引用。🔴 左端だけの縦帯（ピンクのバー）は社内規約違反なので撤去し【四方に枠】にした。
   ⚠️ 代わりに桃の丸を枠から抜かせたら、カードが低いぶん円が切られて
      【桃色の塊】に見えた（実測）。丸は切らずに収まる大きさで、印として左に置く */
.ab-quote {
  position: relative;
  margin: 32px 0; padding: 30px 34px 32px 68px;
  background: var(--paper); border: 1px solid #2720391a; border-radius: 8px;
  box-shadow: 0 12px 32px #2720390d;
  font-size: 21px; font-weight: 800; line-height: 1.75; letter-spacing: .03em;
  text-align: left;
}
.ab-quote::before {
  content: ""; position: absolute; left: 32px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--pink);
}

/* ── 会社概要：2列のカード表 ── */
.ab-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0; }
.ab-facts > div {
  display: flex; gap: 18px; align-items: baseline;
  background: var(--cream); border: 1px solid #2720391a; border-radius: 8px;
  padding: 18px 22px;
}
.ab-facts dt { flex: 0 0 6.5em; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.ab-facts dd { margin: 0; flex: 1 1 auto; font-size: 15px; font-weight: 700; line-height: 1.75; letter-spacing: .04em; }
.ab-facts a { color: inherit; }
/* ⚠️ 9項目＝奇数なので、2列だと最後の1枚だけ右半分が空いて欠けて見える。横に伸ばす */
.ab-facts > div:last-child { grid-column: 1 / -1; }

/* ── アクセス：地図を幅いっぱいに ── */
.ab-map {
  position: relative; width: 100%; aspect-ratio: 16 / 7;
  border: 1px solid #2720391a; border-radius: 8px; overflow: hidden;
  box-shadow: 0 15px 45px #2720390f;
}
.ab-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── 和柄（PCの左右の空きだけ。本文には重ねない） ── */
.svc--greeting::after {
  content: ""; position: absolute; right: -96px; top: 54px;
  width: 240px; aspect-ratio: 1; border-radius: 50%;
  background: url("/img/70102a0b.webp") center / cover;
  opacity: .34; pointer-events: none; z-index: 0;
}
.svc--access::after {
  content: ""; position: absolute; left: -108px; bottom: 74px;
  width: 230px; aspect-ratio: 1; border-radius: 50%;
  background: url("/img/a9b6c866.webp") center / cover;
  opacity: .38; pointer-events: none; z-index: 0;
}

@media (max-width: 1080px) {
  .ab-greeting { grid-template-columns: 260px 1fr; gap: 38px; }
}
@media (max-width: 900px) {
  .svc--greeting::after, .svc--access::after { display: none; }
  .ab-facts { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  /* ⚠️ 写真を上・本文を下に縦積み。写真は幅いっぱいにせず、大きすぎない 220px で止める
     （縦長 800×981 なので幅いっぱいにすると1画面が写真で埋まる） */
  .ab-greeting { grid-template-columns: 1fr; gap: 26px; }
  .ab-profile { max-width: 260px; padding: 16px 16px 18px; }
  .ab-profile-name strong { font-size: 20px; }
  .ab-body p { font-size: 15px; margin-bottom: 16px; }
  /* ⚠️ この見出しだけ22文字と長く、28pxでは「…できる」／【を、】／答えに…」と
     2文字が孤立した（実測。1行あたり23.7px/字で15字＝355px > 枠331px）。
     余白はもう詰められない（左右22pxは社内の下限）ので、ここだけ26pxにして
     「一度は「自分で更新できる」を、」を1行に収める。他の見出しは28pxのまま */
  .svc--greeting .svc-heading h2 { font-size: 26px; }
  .ab-quote { margin: 26px 0; padding: 22px 20px 24px 56px; font-size: 18px; }
  .ab-quote::before { left: 24px; }
  /* ⚠️ dt に 6.5em を取ると本文が痩せる（社内規約：行が画面幅を使い切る）。縦に積む */
  .ab-facts > div { display: block; padding: 15px 18px; }
  .ab-facts dt { font-size: 12px; margin-bottom: 3px; }
  .ab-facts dd { font-size: 14px; }
  .ab-map { aspect-ratio: 4 / 3; }
}