@charset "utf-8";
/* ============================================================
   dogrun.css ― お庭に作るプライベートドッグラン（page-dogrun.php / .dogrun-page）
   Figma: fileKey oXzfQDpSWu2tw25bQObV4Z / node 6182-168

   新築のお庭づくり／お庭のリフォームと同じ .plan-page 方式。
   読み込み順は本番・プレビューとも
     style.css → sunexterior.css → front-page.css → page-common.css
     → service.css → plan-page.css → dogrun.css
   見出し(.plan-sec-ttl)・CTA・施工事例・FAQ は plan-page.css をそのまま使い、
   ここではこのページ固有のパーツ（設備カード／土台設計の枠／ポイントカード）だけを定義する。
   page-common.css（.sc-page .page-content＝詳細度 0,2,1）に勝つよう
   原則 .sc-page .page-content / .sc-page #primary でスコープする。
   ============================================================ */

/* ============================================================
   カーポートページ（page-carport / .fp-sec-ttl）のトンマナに合わせる（2026-10 修正依頼）
   ・セクション見出しの左寄せ（EN 16px＋バー＋和文 Serif 32px/400）は 2026-10 に
     新築／リフォームと共通化し plan-page.css の .plan-sec-ttl へ移した。
   ============================================================ */

/* ---- イントロのキャッチ：カーポートの .cp-catch と同じ（Serif 28px/500・左寄せ・ラベル無し） ----
   page-common の h2（緑バー・下線・flex・26px）を打ち消す。 */
.sc-page .page-content h2.dr-catch {
  display: block;
  margin: 0 0 32px !important; /* 実機スマホの旧 style-sp.css（h2 margin !important）対策 */
  padding: 0;
  border: 0;
  background: none;
  font-family: "Noto Serif JP", serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .04em;
  color: #222;
}

.sc-page .page-content h2.dr-catch::before {
  content: none;
}

/* ページタイトル→キャッチの間隔は強みページ（タイトル→トップ画像）と同じ。
   どちらも汎用ページの本文枠の上余白（style.css の #content.page-content{padding-top} 等）で決まるので、
   ここでは打ち消さない（2026-10 ユーザー指示：強みページを基準にそろえる）。 */

/* ---- 導入写真（Figma image55＋キャプション）：.cp-hero と同じ ----------------
   PCは本文幅の70%で中央配置（2026-10 担当者指示）。キャプションは右寄せなので画像の右端にそろう。SPは全幅。 */
.dr-intro-fig {
  width: 70%;
  margin: 0 auto 32px;
}

.sc-page #primary .dr-intro-fig img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
}

.sc-page .page-content .dr-intro-fig figcaption {
  margin-top: 10px;
  text-align: right;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--fp-text-weak);
}

/* 導入文1行目（Serif 23px/600）。カーポートの導入1行目もこの見た目に合わせている（carport.css）。 */
.sc-page .page-content .dr-lead .dr-lead-catch {
  margin-bottom: 24px;
  font-family: "Noto Serif JP", serif;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: .05em;
  color: #1d1d1d;
}

/* ---- セクションリード -------------------------------------- */
.sc-page .page-content .dr-sec-lead {
  margin: 0;
  text-align: left;
  font-size: 17px;
  line-height: 2;
  letter-spacing: .04em;
  color: var(--fp-text);
}

/* ============================================================
   設備・素材のカテゴリ（フェンス・門扉／地面・床材 …）
   Figmaの【】付き小見出し。h2「ドッグラン外構・エクステリア」配下の h3。
   見た目もページ内の他の h3（プラン例・FAQ 等）と同じ page-common の緑バー h3 にそろえる
   （淡緑の帯で区別していたが、h2→h4 に飛んだように見えるとの指摘で撤去）。
   ============================================================ */
.dr-cat {
  margin-top: 64px;
}

.sc-page .page-content .dr-cat > h3 {
  margin-top: 0; /* 上の余白は .dr-cat の margin-top で取る */
}

.sc-page .page-content .dr-cat-lead {
  margin: 0 0 30px;
  font-size: 16px;
  line-height: 2;
  letter-spacing: .04em;
  color: var(--fp-text);
}

/* ---- 設備カード一覧 ---------------------------------------- */
.sc-page .page-content .dr-items {
  display: grid;
  gap: 40px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-page .page-content .dr-items--col2 { grid-template-columns: repeat(2, 1fr); }
.sc-page .page-content .dr-items--col3 { grid-template-columns: repeat(3, 1fr); }
.sc-page .page-content .dr-items--col4 { grid-template-columns: repeat(4, 1fr); gap: 36px 24px; }

.sc-page .page-content .dr-items > li {
  margin: 0;
  padding: 0;
}

.sc-page .page-content .dr-items > li::before {
  content: none;
}

/* 出典（figcaption）の有無で下の見出し・本文の書き出し位置がずれないよう、
   画像の下に常に出典1行分の枠（--dr-cap）を確保し、出典はその枠内に絶対配置する。
   出典が無い画像も同じ高さになるので、横並びのカードの h4 が同じ高さから始まる。 */
.dogrun-page {
  --dr-cap: 24px;
}

.dr-item-fig,
.dr-base-fig {
  position: relative;
  padding-bottom: var(--dr-cap);
}

.dr-item-fig {
  margin: 0;
}

/* 上の汎用 `.sc-page #primary .plan-page img{height:auto}`（1,2,1）に負けないよう 1,3,1 以上に。 */
.sc-page #primary .dr-items .dr-item-fig img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
}

/* 縦長写真はトリミングせず淡緑の地に収める */
.sc-page #primary .dr-items .dr-item-fig.is-contain img {
  object-fit: contain;
  background: var(--fp-bg-soft);
}

.sc-page .page-content .dr-item-fig figcaption,
.sc-page .page-content .dr-base-fig figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-page .page-content .dr-item-fig figcaption {
  text-align: right;
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--fp-text-weak);
}

/* カーポートの商品名（.cp-model-name：Serif 19px/600・#1d1d1d・マーク無し）と同じ書式 */
.sc-page .page-content .dr-item-body h4 {
  display: block;
  margin: 8px 0 8px;
  font-family: "Noto Serif JP", serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .06em;
  color: #1d1d1d;
}

.sc-page .page-content .dr-item-body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .03em;
  color: var(--fp-text);
}

/* 2件のカテゴリ（日よけ・シェード）は全幅2列だと写真が大きくなりすぎるため、
   各カードを「画像左＋説明右」の横組みにして2枚並べる。 */
.sc-page .page-content .dr-items--col2 > li {
  display: grid;
  grid-template-columns: 48% 1fr;
  gap: 22px;
  align-items: start;
}

.sc-page .page-content .dr-items--col2 .dr-item-body h4 {
  margin-top: 0;
}

/* 1件だけのカテゴリ（水飲み場・足洗い場）は画像左＋説明右 */
.sc-page .page-content .dr-items--single > li {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 36px;
  align-items: center;
}

.sc-page #primary .dr-items--single .dr-item-fig img {
  aspect-ratio: 1 / 1;
}

.sc-page .page-content .dr-items--single .dr-item-body h4 {
  margin-top: 0;
  font-size: 20px;
}

.sc-page .page-content .dr-items--single .dr-item-body p {
  font-size: 16px;
  line-height: 2;
}

/* ============================================================
   プロがこだわる「目に見えない土台」の設計（Figma 7187:98 の角丸枠）
   トンマナは .plan-notice（緑枠＋淡緑背景）に合わせる。
   ============================================================ */
.dr-base {
  margin-top: 72px;
  padding: 52px 48px 48px;
  border: 2px solid var(--fp-green);
  border-radius: 20px;
  background: var(--fp-bg-soft);
}

.sc-page .page-content .dr-base .dr-base-ttl {
  margin: 0 0 22px;
  text-align: left;
  font-family: "Noto Serif JP", serif;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .05em;
  color: var(--fp-green-dark);
}

.dr-base-lead {
  margin: 0;
}

.sc-page .page-content .dr-base-lead p {
  margin: 0;
  font-size: 16px;
  line-height: 2;
  letter-spacing: .03em;
  color: var(--fp-text);
}

/* ◆地質を計算した水はけ対策と下地づくり◆（◆は擬似要素で緑に） */
.sc-page .page-content .dr-base .dr-base-sub {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  margin: 40px 0 26px;
  font-family: "Noto Serif JP", serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .05em;
  color: #1d1d1d;
}

.sc-page .page-content .dr-base .dr-base-sub::before,
.sc-page .page-content .dr-base .dr-base-sub::after {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--fp-green);
  transform: rotate(45deg);
}

/* 中央列だけ幅広（1.65倍）。左のメイン写真を1・3列目の写真と同じ大きさに保ったまま、
   右に施工写真2枚を縦積みするため（クライアント見本「画像レイアウト.pdf」）。
   各列は subgrid で行（見出し／写真／本文）の高さを共有し、写真の段と本文の開始位置を3列でそろえる。 */
.dr-base-grid {
  display: grid;
  grid-template-columns: 1fr 1.65fr 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 24px;
}

.dr-base-col {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: 24px 22px 26px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
}

.sc-page .page-content .dr-base-col h4 {
  min-height: 3em;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .03em;
  color: var(--fp-green-dark);
}

/* 括弧書き（排水路設計 等）は2行目に小さく */
.sc-page .page-content .dr-base-col h4 span {
  display: block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--fp-text);
}

.dr-base-fig {
  margin: 0 0 10px;
  align-self: center; /* 写真の段は中央列（縦積み）に合わせて高くなるので、写真は段の上下中央に */
}

.sc-page #primary .dr-base .dr-base-fig img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 6px;
}

/* 中央列：左にメイン写真、右に施工写真2枚を傾けて縦積み。
   メイン写真の幅＝1・3列目の写真幅。列幅は 1fr : 1.65fr なので
   「中央列の内寸(100%) + 左右padding 44px」÷1.65 − 44px で1列目の内寸と一致する。 */
.dr-base-fig.dr-base-fig--multi {
  padding-bottom: 0; /* 出典の余白はメイン写真側（.dr-base-main）で確保 */
}

.dr-base-imgs {
  display: grid;
  grid-template-columns: calc((100% + 44px) / 1.65 - 44px) 1fr;
  align-items: center;
  column-gap: 18px;
}

.dr-base-main {
  position: relative;
  margin: 0;
  padding-bottom: var(--dr-cap);
}

/* 中央列の本文も1・3列目と同じ幅に（＝メイン写真の幅）し、カードの左右中央に置く（行内は左揃え）。
   幅広の中央列いっぱいに流すと、本文の行長だけ他の列と違って見えるため。 */
.sc-page .page-content .dr-base-col.dr-base-col--multi p {
  max-width: calc((100% + 44px) / 1.65 - 44px);
  margin-inline: auto;
}

.dr-base-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 150px;
  justify-self: center;
  padding: 4px 0;
}

/* 写真のように白フチ＋影を付けて、見本どおり少し傾ける */
.sc-page #primary .dr-base .dr-base-stack img {
  aspect-ratio: 4 / 3;
  border: 4px solid #fff;
  border-radius: 3px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .16);
  box-sizing: border-box;
}

.sc-page #primary .dr-base .dr-base-stack img:first-child {
  transform: rotate(-2.5deg);
}

.sc-page #primary .dr-base .dr-base-stack img:last-child {
  transform: rotate(2deg);
}

.sc-page .page-content .dr-base-fig figcaption {
  font-size: 12px;
  color: var(--fp-text-weak);
}

.sc-page .page-content .dr-base-col p {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .02em;
  color: var(--fp-text);
}

.sc-page .page-content .dr-base .dr-base-note {
  margin: 34px 0 0;
  text-align: center;
  font-size: 16px;
  line-height: 2;
  letter-spacing: .03em;
  color: var(--fp-text);
}

/* ---- プラン例（service.css の .plan-content を流用） -------- */
.sc-page .service-page .dr-plan .plan-content {
  margin-bottom: 0;
}

/* service.css は .plan-image{width:34%} だが、.plan-detail（flex:1 1 auto）の本文が長いと
   flex-shrink で画像列が 179px まで潰れるため、flex-basis で幅を固定する。 */
.sc-page .service-page .dr-plan .plan-content .plan-image {
  flex: 0 0 40%;
  width: 40%;
}

.sc-page #primary .dr-plan .plan-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
}

/* ============================================================
   重要な設計・管理ポイント（Figma 7343:98 ほか 角丸カード×3）
   ============================================================ */
.sc-page .page-content .dr-points-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.sc-page .page-content .dr-points-list > li.dr-point {
  margin: 0;
  padding: 32px 28px 30px;
  border: 1px solid var(--fp-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .04);
  line-height: 1.9;
}

/* 旧 sunexterior.css（テストサーバー版）の `.page-content ol li::before{ content:counter(my-awesome-counter) ". "; color:#b3e000; font-style:italic }`
   が「1.」「2.」をライム色で重ねて出すため打ち消す（番号は .dr-point-no で自前表示）。
   ローカルの sunexterior.css ではこのルールがコメントアウトされているのでプレビューでは再現しない。 */
.sc-page .page-content .dr-points-list > li.dr-point::before {
  content: none;
}

.dr-point-no {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--fp-green);
}

.sc-page .page-content .dr-point h4 {
  margin: 14px 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--fp-line);
  font-family: "Noto Serif JP", serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
  color: #1d1d1d;
}

/* 括弧書き（植物・薬品 等）は一回り小さく。②「メンテナンス性（掃除・消臭・芝管理）」が
   19pxのままだとカード幅に収まらず2行になり、①③と見出し下の罫線位置がずれるため。 */
.sc-page .page-content .dr-point h4 span {
  font-size: 14px; /* 15pxだと②が305.1px／使える幅305pxで0.1px足りず折り返す */
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--fp-text);
}

.sc-page .page-content .dr-point p {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .02em;
  color: var(--fp-text);
}

.sc-page .page-content .dr-point p:last-child {
  margin-bottom: 0;
}

.sc-page .page-content .dr-points-note {
  margin: 44px 0 0;
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: .04em;
  color: var(--fp-green-dark);
}

/* ============================================================
   SP（〜768px）
   ============================================================ */
@media (max-width: 768px) {
  .dr-intro-fig {
    width: auto;
    margin-bottom: 32px;
  }

  .sc-page .page-content .dr-lead .dr-lead-catch {
    font-size: 18px;
  }

  /* カーポート SP の .cp-catch（21px / 1.7）と同じ */
  /* margin は !important：実機スマホだけで読まれる旧 style-sp.css の
     `.page-content h2{margin:30px 0 20px !important}` を打ち消す（カーポート .cp-catch と同じ 0 0 24px に） */
  .sc-page .page-content h2.dr-catch {
    margin: 0 0 24px !important;
    font-size: 21px;
    line-height: 1.7;
  }

  .sc-page .page-content .dr-sec-lead {
    margin-top: -6px;
    text-align: left;
    font-size: 15px;
    line-height: 1.9;
  }

  .dr-cat {
    margin-top: 48px;
  }

  .sc-page .page-content .dr-cat-lead {
    margin-bottom: 22px;
    font-size: 15px;
    line-height: 1.9;
  }

  .sc-page .page-content .dr-items--col2,
  .sc-page .page-content .dr-items--col3,
  .sc-page .page-content .dr-items--single {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* 1列表示では横に並ぶ相手がいないので、出典1行分の固定余白（--dr-cap）は不要。
     固定余白のままだと「画像→見出し」30px と「説明の終わり→次の画像」30px が同じになり、
     どの説明がどの画像のものか分かりにくい（近接で一体感が出ない）。
     出典は通常の流れに戻して画像のすぐ下に置き、画像→見出しを詰める。
     ※2列のまま並ぶ「地面・床材」（col4）は高さをそろえる必要があるので固定余白を残す。 */
  .dr-items--col2 .dr-item-fig,
  .dr-items--col3 .dr-item-fig,
  .dr-items--single .dr-item-fig,
  .dr-base-fig {
    padding-bottom: 0;
  }

  .sc-page .page-content .dr-items--col2 .dr-item-fig figcaption,
  .sc-page .page-content .dr-items--col3 .dr-item-fig figcaption,
  .sc-page .page-content .dr-items--single .dr-item-fig figcaption,
  .sc-page .page-content .dr-base-fig figcaption {
    position: static;
    margin-top: 4px;
  }

  .sc-page .page-content .dr-items--col4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 14px;
  }

  .sc-page .page-content .dr-items--col4 .dr-item-body h4 {
    font-size: 16px;
  }

  .sc-page .page-content .dr-items--col4 .dr-item-body p {
    font-size: 13px;
    line-height: 1.8;
  }

  .sc-page .page-content .dr-item-body h4 {
    margin-top: 12px;
    font-size: 17px;
  }

  /* col4 は出典用の固定余白(24px)が残るので、見出しの上は詰める */
  .sc-page .page-content .dr-items--col4 .dr-item-body h4 {
    margin-top: 2px;
  }

  .sc-page .page-content .dr-item-body p {
    font-size: 14px;
  }

  .sc-page .page-content .dr-items--col2 > li,
  .sc-page .page-content .dr-items--single > li {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .sc-page .page-content .dr-items--col2 .dr-item-body h4 {
    margin-top: 12px;
  }

  .sc-page #primary .dr-items--single .dr-item-fig img {
    aspect-ratio: 4 / 3;
  }

  .sc-page .page-content .dr-items--single .dr-item-body h4 {
    margin-top: 12px;
    font-size: 17px;
  }

  .sc-page .page-content .dr-items--single .dr-item-body p {
    font-size: 14px;
    line-height: 1.9;
  }

  .dr-base {
    margin-top: 48px;
    padding: 30px 16px 28px;
    border-radius: 14px;
  }

  .sc-page .page-content .dr-base .dr-base-ttl {
    font-size: 19px;
  }

  .sc-page .page-content .dr-base-lead p {
    font-size: 14px;
    line-height: 1.9;
  }

  /* 16px＋字間.05em＋両側の◆で約335px必要（375px幅の枠は331px）→1文字だけ折り返していた。
     画面幅に応じて縮め（375px→15px／320px→12.8px）、字間も詰めて1行に固定する。 */
  .sc-page .page-content .dr-base .dr-base-sub {
    gap: 8px;
    margin: 28px 0 18px;
    font-size: clamp(12px, 4vw, 15px);
    letter-spacing: .02em;
    white-space: nowrap;
  }

  .sc-page .page-content .dr-base .dr-base-sub::before,
  .sc-page .page-content .dr-base .dr-base-sub::after {
    width: 8px;
    height: 8px;
  }

  .dr-base-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 16px;
  }

  .dr-base-col {
    display: flex;
    flex-direction: column;
    grid-row: auto;
  }

  .dr-base-imgs {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }

  .dr-base-main {
    padding-bottom: 0;
  }

  .sc-page .page-content .dr-base-col.dr-base-col--multi p {
    max-width: none;
  }

  .sc-page .page-content .dr-base-main figcaption {
    position: static;
    margin-top: 4px;
  }

  .dr-base-stack {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    max-width: none;
    padding: 4px 6px;
  }

  .sc-page #primary .dr-base .dr-base-stack img {
    width: calc(50% - 8px);
  }

  .dr-base-col {
    padding: 20px 16px 22px;
  }

  .sc-page .page-content .dr-base-col h4 {
    min-height: 0;
    font-size: 16px;
  }

  .sc-page .page-content .dr-base-col p {
    font-size: 14px;
  }

  .sc-page .page-content .dr-base .dr-base-note {
    margin-top: 24px;
    text-align: left;
    font-size: 14px;
    line-height: 1.9;
  }

  .sc-page .page-content .dr-points-list {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .sc-page .page-content .dr-points-list > li.dr-point {
    padding: 24px 20px 22px;
  }

  .dr-point-no {
    font-size: 26px;
  }

  .sc-page .page-content .dr-point h4 {
    font-size: 17px;
  }

  .sc-page .page-content .dr-point h4 span {
    font-size: 13px;
  }

  .sc-page .page-content .dr-point p {
    font-size: 14px;
  }

  .sc-page .page-content .dr-points-note {
    margin-top: 30px;
    text-align: left;
    font-size: 15px;
    line-height: 1.9;
  }
}