/* ============================================================
   service.css — サービスページ専用
   命名規則: p-service-*
   共通部品（タイトル帯・パンくず・青い見出し・ご依頼の流れカード）は
   common.css の c-page-title / c-breadcrumb / c-blue-heading / c-flow を使う。
   絶対配置は使わない（重なりの表現が無いページのため、すべて通常の
   ブロック/フレックス/グリッドで組む）。
   ============================================================ */

/* ---------- 取り扱いサービス ---------- */
.p-service-catalog {
  margin-top: 97px; /* パンくず下端から見出しまで（会社案内・info.cssと同じ値） */
}
.p-service-catalog__grid {
  margin-top: 28px; /* 見出しの罫線からカードグリッドまで */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
  row-gap: 40px;
}
.p-service-catalog__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 700 22px/1.4 var(--font-serif);
  color: var(--c-text);
}
/* タブレット幅（3列のまま列が狭くなる）では「企業パンフレット・DM」が2行にならないよう比例して縮める。
   スマホ（767px以下）は末尾のSPブロックで別に指定しているので対象外 */
@media (min-width: 768px) and (max-width: 1115px) {
  .p-service-catalog__heading {
    font-size: clamp(15px, 2vw, 22px);
    white-space: nowrap;
  }
}
.p-service-catalog__bar {
  flex: none;
  width: 5px;
  height: 26px;
  background: var(--c-blue);
}
.p-service-catalog__photo {
  margin-top: 22px;
  width: 100%;
  aspect-ratio: 380 / 214;
  object-fit: cover;
}

/* ---------- 信書便許可とは？ ---------- */
.p-service-shinsho {
  margin-top: 70px;
}
.p-service-shinsho__panel {
  height: 300px;
  box-sizing: border-box;
  background: var(--c-blue-pale);
  padding: 40px 170px 0;
  display: flex;
  align-items: flex-start;
  gap: 60px;
}
.p-service-shinsho__icon {
  flex: none;
  margin-top: 11px; /* 見出しの文字上端より11px下がスタート（Figma実測） */
}
.p-service-shinsho__body {
  flex: 1 1 auto;
  min-width: 0;
}
.p-service-shinsho__text {
  margin-top: 24px;
  font: 400 16px/26px var(--font-sans);
  color: var(--c-text);
}
.p-service-shinsho__text p {
  margin: 0;
}
.p-service-shinsho__text--note {
  margin-top: 16px;
}

/* ---------- GPS配布体制 ---------- */
.p-service-gps {
  margin-top: 50px;
}
.p-service-gps__panel {
  height: 322px;
  box-sizing: border-box;
  background: var(--c-bg);
  padding-top: 40px;
}
.p-service-gps__heading {
  margin: 0;
  text-align: center;
  font: 700 28px/1.3 var(--font-serif);
  color: var(--c-text);
}
.p-service-gps__grid {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
  /* カードは1180pxいっぱいではなく、パネル内側に30pxずつ余白を取る
     （p-top-public__gridと同じ考え方） */
  padding: 0 30px;
}
.p-service-gps__card {
  box-sizing: border-box;
  height: 162px;
  background: var(--c-white);
  border: 2px solid var(--c-line);
  border-radius: 10px;
  display: flex;
  align-items: flex-start;
  padding: 0 20px 0 0;
}
/* アイコンは大きさがカードごとに違う（110/100/132px）。左側128pxの
   「枠」の中で常に上下左右中央になるようにする（Figma実測：見出し・
   本文の開始位置(左128px)は3枚とも共通で、アイコンだけ枠内で中央）。 */
.p-service-gps__icon-slot {
  flex: 0 0 128px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-service-gps__icon {
  display: block;
}
.p-service-gps__card-body {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 27px; /* カード上端から見出しまで（Figma実測。アイコンの中央揃えとは別に固定） */
}
.p-service-gps__card-heading {
  margin: 0;
  font: 700 16px/1.3 var(--font-sans);
  color: var(--c-blue);
}
.p-service-gps__card-text {
  margin-top: 12px;
  font: 400 16px/25px var(--font-sans);
  color: var(--c-text);
}

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

/* ============================================================
   ===== SP（Figma node 173:969・幅440px基準）=====
   ============================================================ */
@media (max-width: 767px) {
  /* ---------- 取り扱いサービス ---------- */
  .p-service-catalog {
    margin-top: 30px; /* タイトル帯下端から見出しまで（パンくず非表示） */
  }
  .p-service-catalog__grid {
    margin-top: 21px;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 10px;
    row-gap: 31px;
  }
  .p-service-catalog__heading {
    /* Figmaは冊子・試供品／公共・行政関連の配布／封入・封かん作業／エリアフリーの
       4枚だけ中央寄せ指定になっているが、実際の画面では文字幅がバー直後の
       位置とほぼ重なり、店舗チラシ／企業パンフレット・DMと同じ左揃えに
       見える（Figmaのオートレイアウト由来の揺れ）。6枚とも左揃えに統一する。 */
    text-align: left;
  }
  /* 「企業パンフレット・DM」「公共・行政関連の配布」が2列（列の余白を
     引いた実質幅は440pxで180px・360pxで140px）でも1行に収まるよう
     比例縮小する。実測（canvasない・実フォント計測）で「企業パンフレット・DM」が
     18pxだと440px幅でも1行に収まらない（約193px必要）ため、上限も18pxより
     下げる。440pxで16.5px・360pxで13pxになる式（DESIGN.md 11章の比例縮小ルール）。 */
  .p-service-catalog__heading span:not(.p-service-catalog__bar) {
    font-size: clamp(13px, calc(4.375vw - 2.75px), 16.5px);
  }
  .p-service-catalog__photo {
    margin-top: 10px;
    aspect-ratio: 195 / 146; /* PCの380x214とは縦横比が違うためSP専用クロップ画像を使用 */
  }

  /* ---------- 信書便許可とは？ ---------- */
  .p-service-shinsho {
    margin-top: 50px;
  }
  .p-service-shinsho__panel {
    height: 427px;
    padding: 20px 20px 0;
    display: block;
  }
  .p-service-shinsho__icon {
    display: block;
    margin: 0 auto;
    width: 116px;
    height: 115px;
  }
  .p-service-shinsho__body {
    margin-top: 26px;
  }
  .p-service-shinsho__text {
    margin-top: 12px;
    font-size: 16px;
    line-height: 26px;
  }
  .p-service-shinsho__text--note {
    margin-top: 13px; /* 実フォントでは1文目が3行・2文目が2行に折り返す（Figmaの2段落=2行という
      見た目より長い）ため、Figma実測の間隔ではなく実測ベースの値にしてある */
  }

  /* ---------- GPS配布体制 ---------- */
  .p-service-gps {
    margin-top: 30px;
  }
  .p-service-gps__panel {
    height: auto;
    padding: 20px 20px 30px; /* Figma：最後のカード下端から面の下端まで30px（面の高さ493px） */
  }
  .p-service-gps__heading {
    font-size: 20px;
  }
  .p-service-gps__grid {
    margin-top: 23px;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
    padding: 0;
  }
  .p-service-gps__card {
    /* Figma：3枚とも高さ118px。本文が3行のカード（2・3枚目）も118pxに収めるため、
       上下の余白を固定せず「中身を上下中央」にする（2行＝上約20px、3行＝上約8px）。 */
    height: auto;
    min-height: 118px;
    padding: 14px 20px 14px 0; /* 本文が3〜4行で118pxを超えるとき文字が枠に触れないよう上下に余白（2026-10-08） */
    align-items: center;
  }
  .p-service-gps__icon-slot {
    flex-basis: 128px;
  }
  /* スマホ版Figmaのアイコン寸法（82／85／113px）。PCの寸法のままだと3枚目のカードが118pxを超える */
  .p-service-gps__card:nth-child(1) .p-service-gps__icon { width: 82px; height: 82px; }
  .p-service-gps__card:nth-child(2) .p-service-gps__icon { width: 85px; height: 85px; }
  .p-service-gps__card:nth-child(3) .p-service-gps__icon { width: 113px; height: 113px; }
  .p-service-gps__card-body {
    margin-top: 0;
    padding-bottom: 0;
  }
  .p-service-gps__card-text {
    margin-top: 5px;
    line-height: 25px; /* Figma leading-[25px] */
  }

  /* ---------- ご依頼から配布までの流れ ---------- */
  .p-service-flow {
    margin-top: 80px;
    padding-bottom: 80px;
  }
  .p-service-flow .c-flow__grid {
    margin-top: 20px;
  }
}