@charset "UTF-8";
/* ==========================================================================
   p-kodawari  こだわり（下層②・1枚目）
   出典: Figma PC 983:977（1440×6586）/ SP 1028:756（390×8076）
   数値・色は 2026-08-17 に複製ファイルから REST /nodes で実取得。目視推測ゼロ。

   🔒 タブレット帯は比率で組む（固定pxはPC1440専用ブロックのみ）
   設計座標（PC）: FV y-40 / quality y789 / slide y2542 / factory y3040 / community y4626 / contact y5617
   ========================================================================== */
/* --- 共通見出し（泡＋テキスト・中央） --- */
/* 🔴 #56 SPの見出しが2行に折り返していた原因＝**PCの泡42px・gap25px をSPにも敷いていた**こと。
   Figma SP 実測（1028:830 title / 1028:831 泡 / 1028:832 見出し）:
     泡 29×29・泡x0 → 見出しx33（＝gap4）・見出し 308×32（**1行**）・24px。
   ∴ SPは泡29/gap4にして文字に308pxを渡す。PCは従来の実測値（42/25）を下のブロックで戻す。 */
.p-kodawari__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px; /* 実測(SP) 1028:831→1028:832: 泡右端29 -> 見出し33 */
  margin: 0;
  color: #333333; /* 実測 983:1168: #333333 */
  /* 🔴 #56 SPは22px（実測 1028:832: 308px÷14文字＝22.0/文字・PCは448÷14＝32.0/文字）。
     24pxだと14文字で336px必要になり、SPの見出し幅308に収まらず2行に折り返していた。 */
  font-size: clamp(22px, 18.2857142857px + 0.9523809524vw, 32px);
  font-weight: 700;
  line-height: 1.448;
}

/* 濃色帯の中（白抜き） */
.p-kodawari__heading--light {
  color: #ffffff; /* 実測 983:1121: #FFFFFF */
}

/* 🔴 #56 「自社工場だからできる品質管理」はFigma SPで**1行**（1028:832: 308×32）。
   14文字×22px＝308に対し、SP390では泡29+gap4を引くと余白がほぼゼロで、
   環境により1文字ぶん折り返す。折返し自体を禁止して1行を保証する
   （15文字の「地域とともに歩むクリーニング店」はFigma SPでも2行＝1028:921 192×70 なので対象外）。 */
.p-kodawari__heading--nowrap span {
  white-space: nowrap;
}

/* コミュニティ節は左寄せ */
.p-kodawari__heading--left {
  justify-content: flex-start;
}

.p-kodawari__heading-bubble {
  flex-shrink: 0;
  width: 29px; /* 実測(SP) 1028:831: 29×29 */
  height: 29px;
}

/* --- FV直下のリード文 --- */
.p-kodawari__lead {
  margin: 40px auto 0;
  padding: 0 22px;
  max-width: 1120px;
  color: #333333;
  font-size: clamp(16px, 14.5142857143px + 0.380952381vw, 20px); /* 実測 983:1172: 20px */
  font-weight: 500;
  line-height: 1.8;
}

/* ==========================================================================
   quality  品質へのこだわり（カード4枚）
   SPは1列積み。PCは左右交互の千鳥（下の min-width ブロック）
   ========================================================================== */
.p-kodawari__quality {
  margin-top: 80px; /* 実測(SP): FV下端 -> title y697 */
  padding: 0 22px;
}

/* S-51: FV下の青泡2個（PC実測 983:1169/983:1174）。SPは非表示（SPのFV泡はSP周回で照合） */
.p-kodawari__deco {
  display: none;
}

/* S-56（8/26指摘②後段）: contact帯の泡＝こだわりのFigmaに不在（y5400-6100のELLIPSE走査ゼロ）
   ＝btob S-50と同型の帯単位の出し分け。SP版contact帯はSP周回で照合 */
.c-contact-band__bubble {
  display: none;
}

.p-kodawari__card-list {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.p-kodawari__card + .p-kodawari__card {
  margin-top: 56px;
}

.p-kodawari__card-media {
  position: relative;
}

.p-kodawari__card-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 23px; /* 実測 983:1134 ほか: r23.46 */
  aspect-ratio: 513/378; /* 実測 983:1162 ほか: 513×378 */
  object-fit: cover;
}

/* 番号円（実測 983:1164: 74×74・円の上に数字） */
.p-kodawari__card-num {
  position: absolute;
  top: -12px;
  left: -12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  color: #ffffff; /* 実測 983:1165: #FFFFFF */
  font-family: "Buenard", serif;
  font-size: 55.72px; /* 実測 983:1165: 55.717647552490234px */
  font-weight: 700;
  line-height: 1;
  /* 🔒 49件「01〜04と丸が上下中央揃えになっていない」の補正（サービス一覧と同じ現象）。
     Buenardは行ボックスの中心と数字の見た目の中心がずれ、flexのcenterだけでは下寄りに見える。
     画素実測でFigmaは円の中心から-1.25px。円74pxに対し 18.5px の padding-bottom で一致する */
  padding-bottom: 18.5px;
}

.p-kodawari__card-num--accent {
  background-color: #5fcafd; /* 実測 983:1164 / 1135: #5FCAFD（01・04） */
}

.p-kodawari__card-num--main {
  background-color: #005ca7; /* 実測 983:1144 / 1154: #005CA7（02・03） */
}

.p-kodawari__card-body {
  margin-top: 24px;
  /* 左の縦罫（実測 983:1160 Line 54: 高さ202の縦線） */
  padding-left: 32px;
  border-left: 1px solid #5fcafd;
}

.p-kodawari__card-title {
  margin: 0;
  color: #005ca7; /* 実測 983:1158: #005CA7 */
  font-size: clamp(20px, 18.5142857143px + 0.380952381vw, 24px); /* 実測: 24px */
  font-weight: 700;
  line-height: 1.448;
}

.p-kodawari__card-text {
  margin: 16px 0 0;
  color: #333333;
  font-size: 16px; /* 実測 983:1159: 16〜18px */
  font-weight: 500;
  line-height: 1.7;
}

/* ==========================================================================
   slide  工場風景の写真4枚（Figma は 2030px 幅で画面外へ流れる帯）
   実装＝横スクロールのストリップ。ページ自体の横スクロールは出さない。
   ========================================================================== */
/* 🔒 §B-9 アニメ⑤「こだわり4枚写真の左流れ」（49件・岡田さん確認済み）
   連続ループの横流れ。同じ4枚を2セット並べ、-50%（＝1セット分）動かして先頭へ戻す。
   速度・間隔は**未指定のため標準値**（40s・等速）＝ユーザー実見で調整する。 */
.p-kodawari__slide {
  margin-top: 80px;
  overflow: hidden;
}

@keyframes kodawari-slide-loop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.p-kodawari__slide-list {
  display: flex;
  width: max-content; /* 2セット分の実幅を持たせる（-50%が正確に1セット分になる） */
  gap: 24px; /* SP=24（PCは下の769+ブロックで実測47へ） */
  margin: 0;
  padding: 0 22px;
  list-style: none;
  animation: kodawari-slide-loop 40s linear infinite;
}

/* 動きを減らす設定の利用者には流さない（a11y） */
@media (prefers-reduced-motion: reduce) {
  .p-kodawari__slide-list {
    animation: none;
  }
}
/* 🔒 49件「4枚横並びの写真: デザインでは凸凹に配置されています」
   実測(PC 983:1123〜1126): y が **2542 / 2633 / 2633 / 2542** と交互（差91px）＝上下に振った配置。
   実装は4枚とも同じyの平坦な並びだった。 */
.p-kodawari__slide-item {
  flex: 0 0 auto;
  width: 235px; /* SPは半分サイズ */
}

/* S-53: 下げるのは**奇数枚目**（実測 x昇順の y = 2633/2542/2633/2542 ＝ 下・上・下・上）。
   旧 nth-child(2),(3) は①パターンが逆②2セット目(5〜8枚目)に効かず後半が平坦だった。
   ⚠️ % は**包含ブロックの幅**で解決されるため、ここでは px 指定にする（%だと273pxになった）。
   SPは写真が半分(235px)なので下げ量も半分の46px。 */
.p-kodawari__slide-item:nth-child(odd) {
  margin-top: 46px;
}

/* リストの高さは「下げた分」も含めて確保する */
.p-kodawari__slide-list {
  align-items: flex-start;
}

.p-kodawari__slide-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  aspect-ratio: 470/307; /* 実測 983:1123 ほか */
  object-fit: cover;
}

/* ==========================================================================
   factory  自社工場だからできる品質管理（グラデ帯・白抜き）
   ========================================================================== */
.p-kodawari__factory {
  margin-top: 80px;
  padding: 60px 22px;
  /* 実測 983:1095: linear-gradient(#14B3FF → #5FCAFD) */
  background-image: linear-gradient(180deg, #14b3ff, #5fcafd);
}

.p-kodawari__factory-list {
  margin-top: 40px;
}

.p-kodawari__factory-item + .p-kodawari__factory-item {
  margin-top: 56px;
}

/* 🔒 49件「(SP)『自社工場だからできる品質管理』の写真は右寄りになります」
   実測(SP 1028:835/843/850): x30〜33・w359 ＝**右端389〜392**でフレーム(390)の端まで届く。
   実装は左右22pxのpadding内に収まり右端383で止まっていた → 右のpaddingを打ち消して端まで出す。 */
.p-kodawari__factory-media {
  display: block;
  margin-right: -22px;
}

/* 🔒 左上・左下のみ角丸（実測 PC 983:1103/1110/1118 = [36,0,0,36]／SP 1028:835 = [18,0,0,18]）
   ＝右は画面端まで裁ち落とす（実測: x882 -> 右端1442 でフレーム1440を超える）。
   49件「写真の角丸」＝4隅を丸めていたのが誤り */
.p-kodawari__factory-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px 0 0 18px;
  aspect-ratio: 560/319; /* 実測 983:1103 ほか */
  object-fit: cover;
}

.p-kodawari__factory-body {
  margin-top: 20px;
  color: #ffffff; /* 実測 983:1099 ほか: 帯の中は全て白 */
}

.p-kodawari__factory-head {
  display: flex;
  align-items: baseline;
  gap: 17px;
}

.p-kodawari__factory-num {
  font-family: "Buenard", serif;
  font-size: clamp(56px, 50.5474285714px + 1.3980952381vw, 70.68px); /* 実測 983:1099: 70.68345642089844px */
  font-weight: 500;
  line-height: 1.3;
}

.p-kodawari__factory-title {
  margin: 0;
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(24px, 21.0285714286px + 0.7619047619vw, 32px); /* 実測 983:1100: 32px */
  font-weight: 700;
  line-height: 1.448;
}

.p-kodawari__factory-subtitle {
  margin: 16px 0 0;
  font-size: clamp(16px, 14.5142857143px + 0.380952381vw, 20px); /* 実測 983:1101: 20px */
  font-weight: 500;
  line-height: 1.7;
}

.p-kodawari__factory-text {
  margin: 16px 0 0;
  font-size: 16px; /* 実測 983:1102: 16〜18px */
  font-weight: 500;
  line-height: 1.7;
}

/* ==========================================================================
   community  WITH THE COMMUNITY（円形写真＋取り組み2件）
   ========================================================================== */
.p-kodawari__community {
  margin-top: 80px;
  padding: 0 22px;
}

.p-kodawari__community-visual {
  position: relative;
  max-width: 400px;
  margin-inline: auto;
}

.p-kodawari__community-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 50%;
}

/* ⚠️Figmaは円周沿いのtext-path。SVG未書き出しのため直線で代替（軽微な意匠差） */
/* 🔴 #54 円周に沿う弧文字（SVG textPath）。
   viewBox 826 は写真の円(800)と同心で、半径413の弧に文字を乗せている
   （実測 983:1092 TEXT_PATH の箱826＝文字パスの外接円・文字28px/700/中央揃え）。
   写真に対する比率で置くので、幅が変わっても円と文字の関係が崩れない。 */
.p-kodawari__community-arc {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 103.25%; /* 826/800 */
  height: 103.25%;
  overflow: visible;
  transform: translate(-50%, -50%);
  fill: #5fcafd; /* 実測 983:1092: #5FCAFD */
  font-family: "Buenard", serif;
  font-size: 28px; /* 実測 983:1092 */
  font-weight: 700; /* 実測 983:1092 */
  letter-spacing: 0.02em;
}
.p-kodawari__community-arc text {
  text-anchor: middle;
}
.p-kodawari__community-arc {
  /* SP-first: SPはSP専用パスの弧文字のみ表示（SP周回 8/26） */
}
.p-kodawari__community-arc .p-kodawari__community-arc-text--pc {
  display: none;
}

.p-kodawari__community-body {
  margin-top: 40px;
}

.p-kodawari__initiative-list {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.p-kodawari__initiative {
  position: relative;
  padding-left: 0;
}
.p-kodawari__initiative + .p-kodawari__initiative {
  margin-top: 40px;
}

/* 🔒 49件「地域とともに歩むクリーニング店: 修正を下記画像にまとめました ※画像参照」
   先方の添付画像＝番号(01/02)の位置。実測 983:1088/1089 は **x1283**（右端1340）で、
   タイトル x736・本文右端1334 に対し**本文の右端側に寄せて置かれている**。
   実装はタイトルの真上（左寄せ）だった → 右寄せにする。 */
.p-kodawari__initiative-num {
  display: block;
  color: #5fcafd; /* 実測 983:1088: #5FCAFD */
  font-family: "Buenard", serif;
  font-size: clamp(48px, 41.5px + 1.6666666667vw, 65.5px); /* 実測 983:1088: 65.50140380859375px */
  font-weight: 500;
  line-height: 1;
  text-align: right;
}

/* S-54: 罫線はPCのみ（SPは番号が上・タイトル下の現行レイアウトを維持） */
.p-kodawari__initiative-line {
  display: none;
}

.p-kodawari__initiative-title {
  margin: 8px 0 0;
  color: #005ca7; /* 実測 983:1078: #005CA7 */
  font-size: clamp(22px, 19.7714285714px + 0.5714285714vw, 28px); /* 実測: 28px */
  font-weight: 700;
  line-height: 1.448;
}

.p-kodawari__initiative-subtitle {
  margin: 12px 0 0;
  color: #333333;
  font-size: clamp(16px, 14.5142857143px + 0.380952381vw, 20px); /* 実測 983:1079: 20px */
  font-weight: 700;
  line-height: 1.448;
}

.p-kodawari__initiative-text {
  margin: 12px 0 0;
  color: #333333;
  font-size: 16px; /* 実測 983:1080: 16px */
  font-weight: 500;
  line-height: 1.7;
}

/* ==========================================================================
   タブレット以上（769px〜）
   ========================================================================== */
@media (min-width: 769px) {
  /* PCは実測値へ戻す（実測 983:1167→1168: 泡42×42・泡右端601 → 見出し626＝gap25） */
  .p-kodawari__heading {
    gap: 25px;
  }
  .p-kodawari__heading-bubble {
    width: 42px;
    height: 42px;
  }
  /* S-55: FV本文（Figma 983:1172）＝実体は1ブロック x109/w691/fs20/fw500/lh40/#333/左揃え。
     実装は subtitle(24px・青・title下30px) + lead(中央寄せ1120幅) に分かれ色も位置も別物だった。
     構造は保ちスタイル・座標をFigma値へ（title下端→序文=gap75／序文3行120→空行40→段落）。 */
  .c-page-title__subtitle {
    margin-top: 75px; /* 実測: title下端264 → 本文339 */
    color: #333333; /* 実測 983:1172: #333333（旧: メイン青） */
    font-size: 20px; /* 実測: 20px（旧24px） */
    font-weight: 500;
    line-height: 2; /* 実測: lh40 */
  }
  .p-kodawari__lead {
    max-width: 691px; /* 実測 983:1172: w691 */
    /* 序文下端+空行40px（Figmaは同一テキスト内の空行）。FV帯は下端に固定余白100を持つため負マージンで詰める
       （実測: 帯下端594・序文下端494 → 段落上端534） */
    margin-top: -60px;
    margin-right: 0;
    margin-left: 7.57%; /* 実測: x109/1440 */
    padding: 0;
    line-height: 2; /* 実測: lh40 */
    text-align: left;
  }
  .p-kodawari__quality {
    position: relative; /* S-51: 泡のアンカー */
    padding: 0 32px;
  }
  /* S-51: FV下の青泡2個（実測 983:1169=196px abs(1102,615) / 983:1174=42px abs(1361,618)。
     見出し(y789)基準で上へ174/171・右基準で142/37。z-index:-1で本文の背後） */
  .p-kodawari__deco {
    position: absolute;
    z-index: -1;
    display: block;
    height: auto;
  }
  .p-kodawari__deco--big {
    top: -174px;
    right: 142px;
    width: 196px;
  }
  .p-kodawari__deco--small {
    top: -171px;
    right: 37px;
    width: 42px;
  }
  /* S-51: 共通FVの桃泡--bottom(1351,453)はこだわりのFigmaに存在しない（983:1170配下を全走査で確認） */
  .c-page-title__bubble--bottom {
    display: none;
  }
  /* 🔒 S-52: カードは2列の**マソンリー千鳥**（Figma画像実測: img01(188,944)/img02(775,1211)/
     img03(188,1632)/img04(775,1900)＝card03はcard02の下端(1752)より上(1632)から始まる＝行ペアのグリッドでは組めない）。
     → 画像上端の区間 [944-1211-1632-1900] を行トラック(267/421/268)にし、各カードが2行スパンで載る。
     スパン余り＝縦gap（card01→03=79 / card02→04=148）が自動的に一致する。 */
  .p-kodawari__card-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 513fr)); /* 実測: 画像513×2 */
    grid-template-rows: minmax(267px, auto) minmax(421px, auto) minmax(268px, auto) auto;
    gap: 0 74px; /* 実測: 画像列 188..701 / 775..1288 ＝ 列間74 */
    align-items: start;
    max-width: 1136px; /* 実測(PC) 983:1127: point枠1136（左36は番号円の食み出し分） */
    margin-top: 109px; /* 実測: 見出し下端835 → img01上端944（食み出す番号円は絶対配置） */
    margin-inline: auto;
    padding-left: 36px; /* 実測: 番号円x152 / 画像x188（左列） */
  }
  /* S-52: 番号円の食み出し量（Figma実測: y=-32が4枚中3枚・x=左列-36。01のy-48/右列x-13,-5は手置きズレ＝部品として統一） */
  .p-kodawari__card-num {
    top: -32px;
    left: -36px;
  }
  .p-kodawari__card + .p-kodawari__card {
    margin-top: 0;
  }
  .p-kodawari__card:nth-child(1) {
    grid-area: 1/1/span 2/2;
  }
  .p-kodawari__card:nth-child(2) {
    grid-area: 2/2/span 2/3;
  }
  .p-kodawari__card:nth-child(3) {
    grid-area: 3/1/span 2/2;
  }
  .p-kodawari__card:nth-child(4) {
    grid-area: 4/2/5/3;
  }
  .p-kodawari__slide-list {
    gap: 47px; /* S-53実測(PC): x -323→194 の送り517 − 470 ＝ 47（旧24はSP値のまま） */
  }
  .p-kodawari__slide-item {
    width: 470px; /* 実測(PC) 983:1123: 470×307 */
  }
  .p-kodawari__slide-item:nth-child(odd) {
    margin-top: 91px; /* S-53実測(PC): y2542 -> 2633 の差。奇数枚目が下（基底のコメント参照） */
  }
  .p-kodawari__factory {
    padding: 80px 0;
  }
  /* 🔒 実測(PC1440): item は x122 -> 右端1442（フレーム右端1440を超える）＝**右へ裁ち落とす**。
     従来の「1320px中央寄せ + 左右32pxパディング」だと写真が右端に届かない */
  .p-kodawari__factory-list {
    max-width: none;
    margin-inline: 0;
    padding-left: 8.47%; /* 実測: 左122px / 1440 */
  }
  .p-kodawari__factory-item {
    display: grid;
    align-items: center;
    /* 実測(PC): テキスト662 / 写真560 の比 */
    grid-template-columns: minmax(0, 662fr) minmax(0, 560fr);
    gap: 6.81%; /* 実測: 本文右端784 -> 写真x882 ＝ 98/1440 */
  }
  .p-kodawari__factory-item + .p-kodawari__factory-item {
    margin-top: 72px;
  }
  .p-kodawari__factory-media {
    order: 2;
    margin-right: 0; /* PCは裁ち落とし位置を別途指定しているため打ち消しは不要 */
  }
  /* PCの角丸は左側のみ36px（実測 983:1103 ほか: [36,0,0,36]） */
  .p-kodawari__factory-img {
    border-radius: 36px 0 0 36px;
  }
  .p-kodawari__factory-body {
    margin-top: 0;
  }
  /* 弧文字のPC/SP出し分け（基底が .p-kodawari__community-arc ネスト＝2クラスなので同詳細度で上書く） */
  .p-kodawari__community-arc .p-kodawari__community-arc-text--pc {
    display: block;
  }
  .p-kodawari__community-arc .p-kodawari__community-arc-text--sp {
    display: none;
  }
  .p-kodawari__community {
    display: grid;
    align-items: center;
    grid-template-columns: minmax(0, 800fr) minmax(0, 621fr);
    gap: 40px;
    max-width: 1440px;
    margin-inline: auto;
    padding: 0 32px;
  }
  /* 🔴 #54 円写真は左端まで裁ち落とす。
     実測 983:1091 = 800×800・**x-139.1**（フレーム1440の左端より外）。
     セクションの左padding32pxを打ち消したうえで、さらに139pxぶん外へ出す
     （%はグリッド列基準に解決されフレーム基準にならないため px で置く）。 */
  .p-kodawari__community-visual {
    max-width: none;
    margin-left: -171px; /* 32(padding) + 139(実測の食み出し) */
  }
  .p-kodawari__community-body {
    max-width: 621px; /* S-54実測: 本文列 x736 w621 */
    margin-top: 0;
  }
  /* S-54: タイトル＋罫線＋番号を1行に（実測: 罫線#CFCFCF 1px y4905＝タイトル中心・
     番号x1283 右端1340＝本文右端1357の17px内側・番号の中心はタイトル中心より24px上） */
  .p-kodawari__initiative-head {
    display: flex;
    align-items: center;
    padding-right: 17px;
  }
  .p-kodawari__initiative-head .p-kodawari__initiative-title {
    order: 1;
    margin: 0;
  }
  .p-kodawari__initiative-line {
    order: 2;
    display: block;
    flex: 1;
    border-top: 1px solid #cfcfcf; /* 実測 983:1086: #CFCFCF */
    margin: 0 17px 0 19px; /* 実測: タイトル右960→線979 / 線右1266→番号1283 */
  }
  .p-kodawari__initiative-head .p-kodawari__initiative-num {
    order: 3;
    transform: translateY(-24px);
  }
  .p-kodawari__initiative-list {
    margin-top: 82px; /* 実測: 見出し下端4789 → 行ボックス上端4871.5 */
  }
  .p-kodawari__initiative + .p-kodawari__initiative {
    margin-top: 110px; /* 実測: item1本文下端5080 → item2行ボックス上端5189.5 */
  }
  .p-kodawari__initiative-subtitle {
    margin-top: 2px; /* 実測: 行ボックス下端4937 → サブタイトル4939 */
  }
}
/* ==========================================================================
   PC専用（1440px〜）＝Figma実数値に着地させる
   ========================================================================== */
@media (min-width: 1440px) {
  .p-kodawari__quality {
    margin-top: 90px; /* S-55実測: 段落下端699 → 見出し789（旧120で30px深かった） */
  }
  .p-kodawari__slide {
    margin-top: 100px;
  }
  .p-kodawari__factory {
    margin-top: 100px;
    padding-top: 100px;
    padding-bottom: 100px;
  }
  .p-kodawari__community {
    margin-top: 120px;
    /* S-54実測: 円写真列704（−139..661+gap相当）＋本文列621＝本文が x736 に着地する固定値 */
    grid-template-columns: 704px 621px;
    gap: 0;
    justify-content: start;
  }
}
/* ==========================================================================
   SP周回（2026-08-26）: Figma SP 1028:756 実測に合わせたSP限定の幾何修正。
   🔒 768px以下限定＝769px以上（タブレット・PC）には一切影響しない（PC22面は承認済み）。
   本文系fsの実装16統一 vs Figma SP 18/20混在は S-16裁定（実装統一を維持）に従い変更しない＝📮起票。
   数値は各行コメントのFigma実測アンカー（ページ座標）から。
   ========================================================================== */
@media (max-width: 768px) {
  /* FV: SPサブコピーの折返し幅（1028:769 実測 w330）。ブラウザ字幅差でFigma幅ぴったりだと1字早く折れるため
     折返し限界だけ+12（PC周回一次情報#2の型）。342〜350で行構成13/22/22/4/10/13=Figma一致を幅走査で確認 */
  .p-kodawari .c-page-title__subtitle--sp {
    width: 342px;
  }
  /* FV: リード文（1028:769 の空行1行=27.2px・箱x30・lh27.2/fs16=1.7） */
  .p-kodawari__lead {
    margin-top: 27px;
    padding: 0 30px;
    line-height: 1.7;
  }
  /* リード下端625 → 見出しy697（見出し高32を引いた実測アンカーは調整後に再実測） */
  .p-kodawari__quality {
    position: relative; /* 泡2つ（--small/--big）の位置基準 */
    margin-top: 72px; /* 実測: リード下端625 → 見出し697 ＝ 72 */
  }
  /* 🔴 SPの泡2つ（2026-08-28 実測・ユーザー実機指摘②）
     Figma SP 1028:771（グループ x307 y295 71×404）の中身:
       1028:772 小 … x357 y295 21×21.5   ＝FV右下（サブコピーの右）
       1028:773 大 … x312 y590 66.7×67   ＝FVと「品質へのこだわり」の間
     PCブロック(469〜)は display:block だが**基底が display:none** のためSPでは両方消えていた。
     位置は見出し「品質へのこだわり」y697 を基準に上方向で置く（small 697-295=402 / big 697-590=107）。 */
  .p-kodawari__deco {
    position: absolute;
    z-index: -1;
    display: block;
    height: auto;
  }
  .p-kodawari__deco--small {
    top: -402px;
    left: 357px;
    width: 21px;
  }
  .p-kodawari__deco--big {
    top: -107px;
    left: 312px;
    width: 67px;
  }
  /* 見出しy697(h35) → point1 y802 ＝ 見出し上端+105。実装見出しh32 → margin 73 */
  .p-kodawari__card-list {
    margin-top: 73px;
  }
  /* 🔴 番号円のSP実測（2026-08-28・ユーザー実機指摘③）
     基底の 74px/fs55.72 は **PCノード 983:1164/1165 の値**でSP上書きが無かった＝SPで1.52倍だった。
     Figma SP実測: 円 1028:787 = 48.6×48.6（x22.4 y804.8）／数字 1028:788 = fs36.573 lh47.58。
     カード(画像)は x22.4 y802 起点＝円は画像の左上から x0 / y+2.8 の位置に重なる。 */
  .p-kodawari__card-num {
    top: -2.8px;
    left: 0;
    width: 48.6px;
    height: 48.6px;
    font-size: 36.57px;
    /* 🔴 光学中心の補正（2026-08-28 実測・ユーザー実機指摘）
       基底の padding-bottom:18.5px は **PCの円74px用**に較正した値（円の25%）。
       SP円48.6pxにそのまま乗ると38%となり効き過ぎて、数字が円の中心より上に見えていた。
       画素実測（白重心・円内マスク r=20／罠#36）:
         Figma  dy = +1.77（4円平均・01/02のみなら+2.56）
         修正前 dy = -3.07（4円平均）＝ 約5px 上に寄っていた
       円48.6の25%＝12.15を起点に、Figmaの重心に寄せて9pxを採用。 */
    padding-bottom: 9px;
  }
  /* 🔴 SPの番号円は配色がPCと違う（2026-08-28 実測・ユーザー裁定「SPはSPのデザインに合わせる」）
       PC 983:1164/1154/1144/1135 = 水色 / 紺 / **紺** / **水色**
       SP 1028:787/798/809/820    = 水色 / 紺 / **水色** / **紺**
     ＝03と04が入れ替わっている。PCは千鳥2列・SPは1列で並びが違うためどちらも成立し、
     内容（意味）は変わらない純粋な意匠差＝各媒体の承認済みFigmaどおりに出し分ける（CLAUDE.md §0②）。
     toneはPHPで両媒体共通に出るため、SPだけCSSで上書きする。 */
  .p-kodawari__card:nth-child(3) .p-kodawari__card-num {
    background-color: #5fcafd; /* 03: SPは #5FCAFD */
  }
  .p-kodawari__card:nth-child(4) .p-kodawari__card-num {
    background-color: #005ca7; /* 04: SPは #005CA7 */
  }
  /* 画像の角丸 1028:785: 15.4（PCは23） */
  .p-kodawari__card-img {
    border-radius: 15.4px;
  }
  /* 本文ブロック: 縦罫 1028:782 は x29.0（カード左端22.4から+6.6）・タイトル 1028:780 は x48.1
     ＝罫線からの padding は 19.1。画像下端1073.7 → タイトル1093.8 ＝ 20.1 */
  .p-kodawari__card-body {
    margin-top: 20px;
    padding-left: 19px;
  }
  /* タイトル 1028:780: fs20 lh28.96 ／ 本文 1028:781: fs18 lh30.6（実装は16pxでSP推定だった） */
  .p-kodawari__card-title {
    line-height: 1.448;
  }
  .p-kodawari__card-text {
    margin-top: 15px; /* 実測: タイトル下端1151.8 → 本文1166.8 ＝ 15.0 */
    font-size: 18px;
    line-height: 1.7; /* 実測: lh30.6 ÷ fs18 */
  }
  /* point間: 1353→1403 / 1894→1944 / 2438→2488 ＝ 50 */
  .p-kodawari__card + .p-kodawari__card {
    margin-top: 50px;
  }
  /* point4下端3013 → slide y3103 ＝ 90 */
  .p-kodawari__slide {
    margin-top: 90px;
  }
  /* slide下端3302 → 帯y3392 ＝ 90 ／ 帯上端→見出し3425.5 ＝ 33.5 ／ リスト下端5588 → 帯下端5617 ＝ 29 */
  .p-kodawari__factory {
    margin-top: 90px;
    padding-top: 33px;
    padding-bottom: 29px;
  }
  /* 見出し下端3457.5 → card_01 y3527.5 ＝ 70 */
  .p-kodawari__factory-list {
    margin-top: 70px;
  }
  /* card_01下端4221.5 → item_02 y4271.5 ＝ 50（item_02→card_03 も 50） */
  .p-kodawari__factory-item + .p-kodawari__factory-item {
    margin-top: 50px;
  }
  /* 帯下端5617 → 円写真上端 y5748.2 ＝ 131（1028:859 実測。弧文字は上に食み出す＝overflow visible） */
  .p-kodawari__community {
    margin-top: 131px;
  }
  /* 円写真: 1028:859 実測 280φ・中心x191.2（ページ中心195から-3.8） */
  .p-kodawari__community-visual {
    width: 280px;
    left: -4px;
  }
  /* 弧文字: SPは文字パス円がbbox 316（1028:860）＝写真280に対し112.86%（PCの103.25%と別比率）。
     パス円中心はbbox実測で写真中心の+8px右。fs20（PC28）＝viewBox826系でのfs= 20×826/316 ≒ 52.3。
     letterSpacingはSP実測0（PCは0.02em） */
  .p-kodawari__community-arc {
    left: calc(50% + 8px);
    width: 112.86%;
    height: 112.86%;
    font-size: 52.3px;
    letter-spacing: 0;
  }
  /* 円写真下端6028.2 → 見出しy6136 ＝ 108（community-bodyのmargin40とはマージン相殺で108が効く）
     SPは見出しブロックが中央配置（1028:919 フレーム x83 w225 ＝ (390-225)/2）＝--leftはPC側の指定 */
  .p-kodawari__community .p-kodawari__heading--left {
    justify-content: center;
    margin-top: 108px;
  }
  /* 見出し上端6136 → i1タイトル6238 ＝ +102（見出しh64＋行内で番号がタイトルを35.5押し下げる分を差し引き） */
  .p-kodawari__initiative-list {
    margin-top: 4px;
  }
  /* i1本文下端6544.1 → i2タイトル6600.1 ＝ 56 */
  .p-kodawari__initiative + .p-kodawari__initiative {
    margin-top: 56px;
  }
  /* SPもPC同様「タイトル—罫線—番号」の1行構成（fresh 1028:927/933 実測: SPにも罫線が実在
     ＝S-54当時の「罫線はPCのみ」はSP再実測で更新）。罫線・番号はタイトル最終行に整列
     （実測: 線y6253=タイトル行中心／番号グリフ下端≈タイトル下端+2） */
  .p-kodawari__initiative-head {
    display: flex;
    align-items: flex-end;
    padding-right: 14px; /* 実測: 番号右端356 → 行ボックス右端370 */
  }
  .p-kodawari__initiative-head .p-kodawari__initiative-title {
    order: 1;
    margin: 0;
  }
  .p-kodawari__initiative-line {
    order: 2;
    display: block;
    flex: 1;
    border-top: 1px solid #cfcfcf; /* 実測 1028:927: #CFCFCF（PCと同色） */
    margin: 0 9px 15px; /* 実測: タイトル右180→線189／線右290→番号299＝9。下15=最終行中心 */
  }
  .p-kodawari__initiative-head .p-kodawari__initiative-num {
    order: 3;
    font-size: 65.5px; /* 実測 1028:926: fs65.5（PC 983:1088 と同値。clamp下限48に根拠なし） */
    transform: translateY(2px); /* 実測: グリフ下端≈タイトル下端+2 */
  }
  /* タイトル下端6267 → サブ6299 ＝ 32 ／ サブ下端6367 → 本文6382.1 ＝ 15 */
  .p-kodawari__initiative-subtitle {
    margin-top: 32px;
    line-height: 1.7; /* 実測 1028:924: lh34/fs20=1.7（基底1.448はタイトル用の値だった） */
  }
  .p-kodawari__initiative-text {
    margin-top: 15px;
  }
}
/* SP文字プロパティ＝Figma SP実測（全数照合 2026-08-28）: 品質へのこだわり見出し fs24/lh34.8 */
@media (max-width: 768px) {
  .p-kodawari__quality .p-kodawari__heading {
    font-size: 24px;
    line-height: 1.45;
  }
}