/* ============================================================
   top.css — トップページ専用
   命名規則: p-top-*
   絶対配置は「重なりの表現」だけに限定（メインコピーの白箱／
   シミュレーターのイラストと装飾の丸／ステップの丸アイコンの
   はみ出し／「※画像はイメージです」の注記）。
   ============================================================ */

/* ---------- ファーストビュー ---------- */
.p-top-hero {
  /* 次セクション(選ばれる3つの理由)側の padding-top:120px で120pxの間隔を作るため、
     上側はここでは追加しない（二重加算を避ける）。
     下側は、青い面が写真の下へ100pxはみ出す分（E案・2026-10-21採用）の余白 */
  padding-bottom: 60px;
}
.p-top-hero__inner {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
}
/* 青い面（E案）：写真の「左下」の背面にブランド青を敷く。
   お客様（役員）「バックに青を持ってきた方がいい」への回答として 2026-10-20 作成 → 10/21 採用。
   ・写真より下のレイヤー（写真に重なった部分は写真で隠れ、写真の左側と下だけが見える＝L字）
   ・左端は 1440px 枠の左端。幅60%＝1440px時 864px（写真の左端 320px を越えて背面へ回り込む）
   ・上端は写真の高さの10%の位置、下端は写真の下へ 100px（2026-10-20 社長「もう少し広く」で 19%→10%・80→100・48%→60%） */
.p-top-hero__inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  bottom: -100px;
  width: 60%;
  background: var(--c-blue);
  z-index: 0;
}
.p-top-hero__photo-wrap {
  position: relative;
  z-index: 1; /* 写真・白箱・数字は青い面の上 */
  margin-left: auto;
  margin-right: 50px;
  width: 74.3056%; /* 1070/1440 */
  max-width: 1070px;
}
.p-top-hero__photo {
  width: 100%;
  height: auto;
}
.p-top-hero__copy {
  position: absolute;
  left: -15.14%;   /* テキスト開始位置が page左158px に来るよう調整（レビュー第2ラウンド実測） */
  top: 59.66%;     /* (492-146)/580 */
}
.p-top-hero__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 各行(.p-top-hero__line)を文字幅ぴったりに縮める */
  gap: 0; /* Figma実測：1行目と2行目の行ボックスは隙間なく連続する */
}
/* 白い箱は行ボックス（.p-top-hero__line）に対する ::before。
   Figma実測：箱は行ボックスより小さく、行の中で上下にずれた位置にある
   （箱と文字は一致しない）ため、行ごとに ::before の top/height を個別指定する。
   すべて em 単位＝.p-top-hero__line の font-size（clampで比例）に追従する。 */
.p-top-hero__line {
  position: relative;
  display: block;
  font: 700 clamp(22px, 3.4722vw, 50px) / 1.9 var(--font-serif); /* 1.9=95px/50px */
}
.p-top-hero__line::before {
  content: "";
  position: absolute;
  background: #fff;
  z-index: 0;
}
.p-top-hero__line:first-child::before {
  left: -0.56em;   /* 28px/50px */
  right: -0.62em;  /* 31px/50px */
  top: 0.14em;     /* 7px/50px */
  height: 1.72em;  /* 86px/50px */
  box-shadow: 6px 6px 14px 1px rgba(0, 0, 0, 0.25);
}
.p-top-hero__line:last-child::before {
  left: -0.56em;   /* 28px/50px（左は1行目と同じ） */
  right: -0.62em;  /* 31px/50px。Figmaの箱幅701px＝左28＋文字642（実フォントの実測幅）＋右31。1行目と同じ右余白 */
  top: 0.22em;     /* 11px/50px */
  height: 1.56em;  /* 78px/50px */
  box-shadow: 6px 4px 10px 0 rgba(0, 0, 0, 0.4);
}
.p-top-hero__linetext {
  position: relative;
  z-index: 1;
  display: block;
  color: var(--c-text);
  white-space: nowrap;
}
/* 動く2桁の数字（E案）：写真の左側の青い面の中に置く（写真には重ねない）。白文字・光らせない。
   中身は assets/js/hero-counter.js（現行サイトと同じ見え方の演出）。
   左端はロゴの左端（40px）にそろえる。.p-top-hero__photo-wrap 基準の絶対配置なので、
   1440px枠の左端までの距離を計算で戻す：
   写真枠の左オフセット = 枠幅×(1/0.743056−1) − 50px = 34.5794% − 50px
   → left = −(34.5794% − 50px) + 40px = calc(-34.5794% + 90px)
   文字サイズ：写真左側の青い帯の幅（25.69vw − 50px）に2桁が収まるよう vw から逆算。1440px以上は180px */
.p-top-hero__counter {
  position: absolute;
  left: calc(-34.5794% + 90px);
  top: 24%;
  margin: 0;
  z-index: 1;
  font: 700 clamp(64px, calc(23vw - 96px), 180px) / 0.85 var(--font-num);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--c-white);
  pointer-events: none;
}

/* ---------- ファーストビューの動き（2026-10-13 社長指示：①写真のゆっくりズーム ②白箱が左から伸びて文字が現れる
   ＋E案（2026-10-21採用）：⓪青い面が左から伸びる → ①② → ③数字がふわっと出る）
   ・CSSのみ／1回だけ動いて止まる／レイアウトは動かさない（transform と clip-path だけ）
   ・写真は .p-top-hero__photo-wrap を overflow:hidden にできない（白箱が写真の外へはみ出す構図）ため、
     拡大と同時に clip-path で内側を切り、元の枠からはみ出さないようにする。
     inset 2.381% = (1 − 1/1.05) / 2 → 1.05倍に拡大したとき元の枠にぴったり一致 */
@keyframes psm-hero-zoom {
  from { transform: scale(1);    clip-path: inset(0); }
  to   { transform: scale(1.05); clip-path: inset(2.381%); }
}
@keyframes psm-hero-box {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes psm-hero-text {
  from { opacity: 0; transform: translateY(0.25em); }
  to   { opacity: 1; transform: none; }
}
@keyframes psm-hero-blue {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes psm-hero-counter {
  from { opacity: 0; transform: translateY(0.12em); }
  to   { opacity: 1; transform: none; }
}
.p-top-hero__inner::before {
  transform-origin: left center;
  animation: psm-hero-blue 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.p-top-hero__photo {
  animation: psm-hero-zoom 10s ease-out both;
}
.p-top-hero__line::before {
  transform-origin: left center;
  animation: psm-hero-box 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.p-top-hero__line:first-child::before { animation-delay: 0.25s; }
.p-top-hero__line:last-child::before  { animation-delay: 0.45s; }
.p-top-hero__linetext {
  animation: psm-hero-text 0.9s ease-out both;
}
.p-top-hero__line:first-child .p-top-hero__linetext { animation-delay: 0.55s; }
.p-top-hero__line:last-child  .p-top-hero__linetext { animation-delay: 0.85s; }
.p-top-hero__counter {
  animation: psm-hero-counter 0.9s ease-out 1.05s both;
}
@media (prefers-reduced-motion: reduce) {
  .p-top-hero__inner::before,
  .p-top-hero__photo,
  .p-top-hero__line::before,
  .p-top-hero__linetext,
  .p-top-hero__counter {
    animation: none;
  }
}

/* ---------- 選ばれる3つの理由 ---------- */
.p-top-reasons {
  /* 注意: l-container と同じ要素に付くため、水平paddingを消さないよう
     padding-top/bottomのみ指定する（paddingショートハンドは使わない） */
  padding-top: 120px;
  padding-bottom: 161px;
}
.p-top-reasons__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 41px;
  margin-top: 50px;
}
.p-top-reasons__item {
  position: relative;
}
.p-top-reasons__item:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -20px;
  width: 2px;
  background: var(--c-line-2);
}
.p-top-reasons__head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.p-top-reasons__num {
  flex: none;
  width: 40px;
  height: 40px;
  background: var(--c-blue);
  color: var(--c-white);
  font: 700 22px/40px var(--font-num);
  text-align: center;
}
.p-top-reasons__heading {
  font: 700 22px/1.3 var(--font-serif);
  color: var(--c-text);
}
.p-top-reasons__photo {
  width: 100%;
  aspect-ratio: 366 / 202;
  object-fit: cover;
  margin-top: 22px;
}
.p-top-reasons__text {
  margin-top: 22px;
  font: 400 16px/1.7 var(--font-sans);
}

/* ---------- 料金シミュレーター ---------- */
.p-top-simulator {
  position: relative;
  /* 高さを440pxに固定する（イラストの負のマージンがflexの高さ計算に
     影響し、指定しないと帯が440pxより高くなってしまうため） */
  height: 440px;
  background: var(--c-blue);
  color: var(--c-white);
  padding: 76px 0;
  overflow: visible;
}
.p-top-simulator__inner {
  max-width: 1440px;
  margin: 0 auto;
  /* イラストはleft208px、本文はleft758px/幅552px（右端は本文コンテナの右端1310pxに一致）
     という、通常の130px中央コンテナとは異なるFigma実測の独立配置 */
  padding: 0 130px 0 208px;
  display: flex;
  align-items: flex-start;
  gap: 60px;
}
.p-top-simulator__illustration-wrap {
  position: relative;
  flex: none;
  width: 490px;
  max-width: 490px;
  /* イラストが帯の上端より61px上へはみ出す */
  margin-top: -137px;
}
.p-top-simulator__illustration-wrap::before {
  content: "";
  position: absolute;
  left: 11.84%;
  top: 45.3%;
  width: 53.47%;
  padding-top: 53.47%;
  border-radius: 50%;
  background: var(--c-white);
  z-index: 1;
}
.p-top-simulator__dot {
  position: absolute;
  border-radius: 50%;
  background: var(--c-white);
  z-index: 1;
}
/* Figma実測（イラスト枠に対する相対%）: 装飾の丸5個 */
.p-top-simulator__dot--1 { left: 52.4%; top: 46.7%; width: 1.8%; padding-top: 1.8%; }
.p-top-simulator__dot--2 { left: 54.1%; top: 43.5%; width: 3.7%; padding-top: 3.7%; }
.p-top-simulator__dot--3 { left: 3.3%;  top: 44.1%; width: 7.1%; padding-top: 7.1%; }
.p-top-simulator__dot--4 { left: 9.8%;  top: 81.6%; width: 13.3%; padding-top: 13.3%; }
.p-top-simulator__dot--5 { left: 10.4%; top: 52%;   width: 3.1%; padding-top: 3.1%; }
.p-top-simulator__illustration {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
}
.p-top-simulator__content {
  flex: 1 1 auto;
  max-width: 552px;
  /* 帯top(=section padding-top:76px)を基準に、見出しがtop1569に来るよう追加14px */
  padding-top: 14px;
}
.p-top-simulator__heading {
  margin: 0;
  font: 700 28px/1.4 var(--font-serif);
}
.p-top-simulator__text {
  margin-top: 31px;
}
.p-top-simulator__text p {
  margin: 0;
  font: 500 16px/33px var(--font-sans);
}
.p-top-simulator__btn {
  margin-top: 32px;
  width: 270px;
}

/* ---------- 取り扱いサービス ---------- */
.p-top-services {
  background: var(--c-bg);
  padding: 100px 0 111px;
}
.p-top-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
  row-gap: 45px;
  margin-top: 55px;
}
.p-top-services__photo {
  width: 100%;
  aspect-ratio: 380 / 214;
  object-fit: cover;
}
.p-top-services__heading {
  margin-top: 16px;
  text-align: center;
  font: 700 22px/1.4 var(--font-serif);
  color: var(--c-text);
}

/* ---------- 配布実績 ---------- */
.p-top-works {
  padding-top: 100px;
  padding-bottom: 60px;
}
.p-top-works__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
  margin-top: 51px;
}
.p-top-works__photo-wrap {
  position: relative;
}
.p-top-works__photo {
  width: 100%;
  aspect-ratio: 380 / 285;
  object-fit: cover;
}
.p-top-works__imgnote {
  position: absolute;
  right: 11px;
  bottom: 7px;
  color: #000;
  font: 500 12px/17px var(--font-sans);
}
.p-top-works__tag {
  display: inline-block;
  margin-top: 10px;
  background: var(--c-dark);
  color: var(--c-white);
  font: 400 14px/20px var(--font-sans);
  padding: 0 10px;
}
.p-top-works__heading {
  display: block;
  margin-top: 10px;
  font: 700 22px/1.4 var(--font-sans);
  color: var(--c-text);
}
.p-top-works__desc {
  margin-top: 4px;
  font: 400 16px/1.6 var(--font-sans);
  color: var(--c-text);
}

/* ---------- 公共・選挙関連実績 ---------- */
/* 淡い青の面は画面幅いっぱいではなく、本文コンテナ(1180px)に収める。
   高さもFigma実測(265px)に固定する。 */
.p-top-public {
  /* 前セクション(配布実績)側のpadding-bottomで間隔を作るため、ここでは追加しない */
}
.p-top-public__panel {
  background: var(--c-blue-pale);
  height: 265px;
  padding-top: 30px;
}
.p-top-public__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
  margin-top: -8px;
  /* カードは380pxではなく360px幅・left160/540/920（パネルの左右端から30pxずつ内側） */
  padding: 0 30px;
}
.p-top-public__card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  height: 125px;
  padding: 20px;
}
.p-top-public__heading {
  font: 700 22px/1.4 var(--font-sans);
  color: var(--c-text);
}
.p-top-public__meta {
  margin-top: 12px;
  font: 400 16px/25px var(--font-sans);
  color: var(--c-text);
}
.p-top-public__meta p { margin: 0; }

/* ---------- 対応エリア ---------- */
.p-top-area {
  padding-top: 30px;
  /* 次セクション(ご依頼の流れ)のpadding-top:100pxで間隔を作るため、ここでは追加しない */
}
.p-top-area__box {
  /* 高さは注記の1行を足しても159pxのまま変えない（Figma実測） */
  height: 159px;
  border: 2px solid var(--c-line);
  border-radius: 10px;
  padding: 30px 40px 20px;
  text-align: center;
}
.p-top-area__box .c-heading { margin-bottom: 0; }
.p-top-area__text {
  margin-top: 22px;
  font: 400 16px/1.7 var(--font-sans);
  color: var(--c-text);
}
.p-top-area__note {
  margin-top: 4px;
  font: 400 14px/1.7 var(--font-sans);
  color: var(--c-text);
}

/* ---------- ご依頼の流れ ----------
   カード本体（グリッド・カード・丸アイコン等）は common.css の c-flow* を
   トップ・サービスで共用する。ここではセクションの上下余白と、見出し
   （c-heading）からカードグリッドまでの間隔だけを持つ。 */
.p-top-flow {
  padding-top: 100px;
  padding-bottom: 120px;
}
.p-top-flow .c-flow__grid {
  margin-top: 102px; /* カード面の上端＝Figma 4168px（丸アイコンはその53px上） */
}

/* ---------- お知らせ ---------- */
.p-top-news {
  background: var(--c-bg);
  padding: 40px 0 49px; /* 面の高さ389px：見出し上端4639／最後の罫線4938／下端4988 */
}
.p-top-news .c-heading {
  margin-bottom: 12px; /* 1行目の上端4704px */
}
.p-top-news__list {
  /* Figma実測：一覧の幅は本文コンテナ(1180)より狭い1080px */
  max-width: 1080px;
}
.p-top-news__item {
  /* 行の間隔は78px（Figmaの罫線 4782/4860/4938）。タイトルが1行でも2行でも上下中央 */
  display: flex;
  align-items: center;
  gap: 30px; /* 日付(幅86px)の右端216px → タイトル左端246px */
  box-sizing: border-box;
  min-height: 78px;
  padding: 8px 0;
  border-bottom: 1px solid var(--c-line);
}
.p-top-news__date {
  flex: none;
  width: 86px;
  font: 700 16px/1.44 var(--font-sans);
  color: var(--c-text);
}
.p-top-news__link {
  font: 400 16px/1.44 var(--font-sans);
  color: var(--c-text);
  text-decoration: none;
}
.p-top-news__link:hover {
  text-decoration: underline;
}
.p-top-news__more {
  /* 「お知らせ一覧を見る」ボタン。2026-10-19 第4回MTGで「過去のお知らせへ行けない」抜けが見つかり追加（Figma未デザイン＝実装で決定）。
     一覧（幅1080px）の右端に揃える。見た目はお問い合わせの「修正する」と同じ白地・青枠（c-btn--outline） */
  display: flex;
  justify-content: flex-end;
  max-width: 1080px;
  margin: 30px 0 0;
}

/* ============================================================
   ===== SP（Figma node 159:375・幅440px基準）=====
   ============================================================ */
@media (max-width: 1199px) {
  /* 1200px未満は left208px の独立配置をやめ、標準の130pxコンテナに戻して
     横スクロールを防ぐ（Figma一致は1200px以上の要件のため） */
  .p-top-simulator__inner {
    padding: 0 130px;
    gap: 30px;
    align-items: center;
  }
  .p-top-simulator__illustration-wrap {
    width: 34%;
  }
  .p-top-simulator__content {
    max-width: none;
    padding-top: 0;
  }
}

@media (max-width: 767px) {
  /* ---------- ファーストビュー ---------- */
  .p-top-hero {
    padding-top: 30px;
    padding-bottom: 118px; /* 青の下端から次セクション見出しまで約60px */
  }
  /* 青い面：スマホは写真の左に余白がないので、写真の下半分の背面から写真の下まで横いっぱいに敷く */
  .p-top-hero__inner::before {
    left: 0;
    right: 0;
    width: auto;
    top: 45%;
    bottom: -130px;
  }
  .p-top-hero__photo-wrap {
    position: relative;
    margin: 0 20px;
    width: auto;
    max-width: none;
    aspect-ratio: 400 / 217;
  }
  .p-top-hero__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .p-top-hero__copy {
    left: 10px;
    top: 63.6%; /* (228-90)/217 */
  }
  .p-top-hero__line {
    font-size: clamp(20px, 5.9vw, 26px); /* 基準440px時=26px */
    line-height: 1.9615; /* 51px/26px */
  }
  .p-top-hero__line:first-child::before {
    left: -0.3846em;  /* 10px/26px */
    right: -0.4231em; /* 11px/26px */
    top: 0.1154em;    /* 3px/26px＝(行51px−箱45px)/2。文字を箱の上下中央に（2026-10-08 社長指摘。Figma実測の10pxは上寄り） */
    height: 1.7308em; /* 45px/26px */
  }
  .p-top-hero__line:last-child::before {
    left: -0.3846em;  /* 10px/26px（左は1行目と同じ） */
    right: -0.4231em; /* 11px/26px。Figmaの箱幅356px＝左10＋文字約334＋右11。1行目と同じ右余白 */
    top: 0.1154em;    /* 3px/26px。1行目と同じく上下中央 */
    height: 1.7308em; /* 45px/26px */
  }
  /* 数字：写真の下（青の上）。2行目の白箱は写真の下へ約20pxはみ出すので、その下に置く */
  .p-top-hero__counter {
    left: 0;                     /* 写真の左端にそろえる（写真枠は左右20pxマージン） */
    top: calc(100% + 40px);
    font-size: clamp(56px, 17vw, 76px);
  }

  /* ---------- 選ばれる3つの理由 ---------- */
  .p-top-reasons { padding-top: 73px; padding-bottom: 50px; }
  .p-top-reasons__grid {
    grid-template-columns: 1fr;
    row-gap: 50px; /* 説明文の下端→次の番号の上端=50px（レビュー第2ラウンド実測） */
    margin-top: 30px;
  }
  .p-top-reasons__item:not(:first-child)::before {
    display: none; /* PCの縦罫線は消す */
  }
  .p-top-reasons__head {
    align-items: flex-start;
    gap: 10px;
  }
  .p-top-reasons__num {
    width: 36px;
    height: 36px;
    font: 700 20px/36px var(--font-num);
  }
  .p-top-reasons__heading {
    font-size: 20px;
    line-height: 36px; /* 数字の四角(36px)と天端をそろえる */
  }
  .p-top-reasons__photo {
    margin-top: 20px;
    aspect-ratio: 400 / 220;
  }
  .p-top-reasons__text {
    margin-top: 10px;
    font-size: 16px;
    line-height: 27px;
  }

  /* ---------- 料金シミュレーター ---------- */
  .p-top-simulator {
    height: auto;
    min-height: 576px;
    padding: 0 20px 50px;
    overflow: visible;
  }
  .p-top-simulator__inner {
    flex-direction: column;
    align-items: flex-start; /* イラストの水平位置はmargin-leftで個別指定するため */
    padding: 0;
    gap: 0;
    max-width: none;
  }
  .p-top-simulator__illustration-wrap {
    width: 241px;
    max-width: 241px;
    /* Figma：left114＝中央より14px右。固定pxだと320px幅で画面からはみ出すため式で表す
       （本文幅400px時：200−120.5＋14＝93.5px≒Figmaの94px）。帯の上に32pxはみ出す */
    margin: -32px 0 0 calc(50% - 106.5px);
  }
  .p-top-simulator__content {
    max-width: none;
    width: 100%;
    padding-top: 30px;
  }
  .p-top-simulator__heading { font-size: 22px; }
  .p-top-simulator__text { margin-top: 22px; }
  .p-top-simulator__text p { font: 500 16px/27px var(--font-sans); }
  .p-top-simulator__btn {
    display: flex;
    margin: 40px auto 0; /* 本文下端→ボタン上端=40px（レビュー第2ラウンド実測） */
    width: 270px;
  }

  /* ---------- 取り扱いサービス ---------- */
  .p-top-services { padding: 50px 0 80px; } /* 面の下端=最後のラベル下端から80px */
  .p-top-services__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 10px;
    row-gap: 31px; /* 段の間隔(画像上端→次の画像上端)=212pxになる値 */
    margin-top: 30px;
  }
  .p-top-services__photo {
    aspect-ratio: 195 / 146; /* PCの380x214とは縦横比が違うためSP専用クロップ画像を使用 */
  }
  .p-top-services__heading {
    margin-top: 10px;
    /* 440px→18px・360px→13.5pxで一直線につながる式（レビュー第2ラウンド指定）。
       360〜414pxで最長ラベル「企業パンフレット・DM」も1行に収まることを確認済み。 */
    font-size: clamp(13px, calc(5.625vw - 6.75px), 18px);
  }

  /* ---------- 配布実績 ---------- */
  .p-top-works { padding-top: 50px; padding-bottom: 50px; }
  .p-top-works__grid {
    grid-template-columns: 1fr;
    row-gap: 51px;
    margin-top: 30px;
  }
  .p-top-works__photo {
    aspect-ratio: 400 / 300;
  }
  .p-top-works__imgnote {
    right: 12px;
    bottom: 12px;
    font-size: 12px;
  }
  .p-top-works__tag {
    margin-top: 10px;
    line-height: 22px;
  }
  .p-top-works__heading {
    margin-top: 10px;
    font-size: 18px;
  }
  .p-top-works__desc {
    margin-top: 6px;
    font-size: 16px;
  }

  /* ---------- 公共・選挙関連実績 ----------
     スマホ版Figmaには無い。PC版と内容をそろえるため表示する
     （対応エリアと同じ幅・淡い青の面に、白カード3枚を縦積み）。 */
  /* margin-topは持たせない（配布実績側のpadding-bottom:50pxで間隔を作る） */
  .p-top-public { margin-top: 0; }
  .p-top-public__panel {
    height: auto;
    padding: 20px;
  }
  .p-top-public__grid {
    grid-template-columns: 1fr;
    row-gap: 10px;
    margin-top: 16px;
    padding: 0;
  }
  .p-top-public__card {
    height: auto;
    padding: 16px 20px;
  }

  /* ---------- 対応エリア ---------- */
  .p-top-area { padding-top: 20px; padding-bottom: 50px; }
  .p-top-area__box {
    height: auto;
    /* 見出しの上端=箱の上端から15px（本文位置(59px)は変えないよう
       text側のmargin-topで5px分を補う） */
    padding: 15px 20px 20px;
  }
  .p-top-area__text {
    margin-top: 19px;
    font-size: 16px;
    line-height: 28px;
  }
  .p-top-area__note {
    margin-top: 6px;
    font-size: 14px;
  }

  /* ---------- ご依頼の流れ ----------
     カード本体は common.css の c-flow*（SP値含む）を使う。ここでは
     セクション余白と、見出しからカードグリッドまでの間隔だけ。 */
  /* padding-topは持たせない（対応エリア側のpadding-bottom:50pxで間隔を作る） */
  .p-top-flow { padding-top: 0; padding-bottom: 60px; }
  .p-top-flow .c-flow__grid {
    margin-top: 30px;
  }

  /* ---------- お知らせ ---------- */
  .p-top-news { padding-top: 50px; padding-bottom: 80px; }
  .p-top-news .c-heading.is-left {
    /* Figma SPは中央寄せ（PCは左揃え）。ここだけ上書きする */
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
  }
  .p-top-news__list {
    max-width: none;
  }
  .p-top-news__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-height: 0;
    padding: 20px 0;
  }
  .p-top-news__item:first-child {
    /* 見出し下線の下端から1件目の日付上端まで=30px（.c-heading側の
       margin-bottom:30pxのみで作る。ここで上乗せしない） */
    padding-top: 0;
  }
  .p-top-news__link {
    text-decoration: underline; /* Figmaは常時下線 */
  }
  .p-top-news__more {
    justify-content: center; /* SPは中央 */
    max-width: none;
  }
}