@charset "UTF-8";
/* BUILD_TAG: sunpaint_child_ver1.58 / 2026-10-19 */
/* 燦Paint トップページ装飾
   ver1.26 デザインの基準を小倉建築計画工房様（oapaa.com）に固定。
   配色は深緑版に一本化し、小倉建築計画工房様の深い緑に合わせた。濃紺版は削除。
   見出しの英字は筆記体をやめ、セリフ体の大文字＋広い字間にした。
   選ばれる理由の番号は、背景が透ける大きな数字＋斜めの細線にした。
   ver1.27 コンセプト・施工事例・代表挨拶も画面いっぱいの面にし（18番）、
   見出し下線の青（SWELLのメインカラー）をトップページだけ配色に合わせた（24番）。
   ver1.28 幅の広い画面で左右が白く残っていたため、3つの面に生成りの背景を持たせた（18番）。
   ver1.29 番号の右端を44pxにそろえた（5番）。
   ver1.30 斜線が数字の中を横切り打ち消し線のように見えたため、数字の右下の角から右上へ伸ばす位置に移した（5番）。
   ver1.31 スマホで見出しが本文と大差なく小さかったため、h2 21px・h3 17px に上げた（10番）。
   ver1.32 PCで選ばれる理由の横幅を1100→1200pxに広げ、見出しを最大22pxに上げた（5番・18番）。
   ver1.33 スマホで番号と斜線を3/4に縮め、選ばれる理由の見出しを17→19pxに上げた（10番）。
   ver1.34 トップ写真の下中央に「SCROLL」と上下の細い線を置いた（25番）。
   ver1.35 「SCROLL」をゆっくり上下にふわふわ動かした（25番）。
   ver1.36 スマホのトップ写真を縦長にし、キャッチコピーを左下・2行に（26番）。代表の顔写真の枠（27番）。
   ver1.37 顔写真にクラスを付けなくても効くよう、代表挨拶の中の画像ブロックを直接指定した（27番）。
   ver1.38 スマホのトップ写真の高さを7割→6割にし、家の形が分かる画角にした（26番）。
   ver1.39 英字の添え書きを「COLORING LIFE, CREATING PEACE OF MIND.」に（26番）。PCのキャッチコピーも左寄せ2行に（30番）。
           グローバルメニューを太字のゴシックに（29番）。全ページ共通のフッター（28番）。
   ver1.40 グローバルメニューを15→16px、字間を広げた（22番。小倉建築計画工房様は16px）。
   ver1.41 PCのフッターの文字を小倉建築計画工房様の大きさに（メニュー・所在地16px、SNS32px、ロゴ120px）（28番）。
   ver1.42 代表挨拶を「写真左・名前と経歴を右」のスタッフ紹介の形に（31番）。トップ画像の下のお知らせ（32番）。
   ver1.43 お知らせを実際のSWELLの出力（見出し h2.c-secTitle、日付がリンクの中）に合わせた（32番）。
   ver1.44 スマホの代表挨拶を「写真左・役職と名前を右、経歴はその下」の形に（31番）。
           選ばれる理由の見出しが2行になっても下線の高さがそろうようにした（5番）。
   ver1.45 下層ページの見出し画像（.sp-page-hero）を試験的に追加（33番）。
   ver1.46 33番を作り直し。全固定ページのタイトル帯を朝日の写真＋白い明朝の文字に統一し、
           高さをスマホ160px・PC360pxにした（小倉建築計画工房様と同じ）。
   ver1.47 業務内容ページの「施工の流れ」を小倉建築計画工房様の流れの形に（34番）。
   ver1.48 「施工の流れ」の斜線が手順名にかかっていたため、間隔を広げて線を短くした（34番）。
   ver1.49 手順の間の矢印に矢じりが見えていなかったため、線の右端を跳ね上げた形にした。見出しと手順名を細字に（34番）。
   ver1.50 選ばれる理由のPOINT形式（35番）、よくある質問の帯（36番）、劣化チェックの左右並び（37番）、
           お問い合わせ枠のボタン3つ（38番）を追加。
   ver1.51 よくある質問の見出しの上に余白を足した（35番）。お問い合わせ枠の見出しが1文字だけ改行されないようにした（38番）。
   ver1.52 スマホ開閉メニューに電話・LINE・連絡先・SNS（39番）、施工事例一覧のタイトル帯の位置（40番）、
           会社概要の施工エリア（41番）を追加。
   ver1.53 グローバルメニューを2段に（42番）、PCのヘッダーを写真の上に透かして重ねる（43番）、
           お知らせとブログの一覧の英字・トップのお知らせ欄（44番）、トップの施工の流れ・よくある質問の抜粋（45番）。
   ver1.54 下層ページの「現地調査・お見積もりは無料です」の枠をトップと共通に（46番）、
           スマホのヘッダーを半透明に（47番）、全ページの背景を生成りに（48番）。
   ver1.55 SWELLのメインカラーの紺が残っていた帯・見出し・表の見出し等を深緑にそろえた（49番）。
   ver1.56 スマホのヘッダーをロゴ左・メニュー右にした際の、ロゴの左余白と空の検索枠（50番）。
   ver1.57 技術と施工へのこだわりの各項目を、劣化チェックと同じ文章左・写真右の並びに（51番）。
   ver1.58 PCの追従ヘッダーも、写真の上と同じ白の半透明にした（52番）。 */

/* 番号用の数字だけを読み込む（0〜9の10文字に絞っている） */
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@700&text=0123456789&display=swap");
/* ver1.39 メニューとフッターの文字だけを読み込む（使う文字に絞っているので軽い）。
   メニューの文言を変えたら、ここにも同じ文字を足すこと */
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@700&text=%E5%88%9D%E3%82%81%E3%81%A6%E3%81%AE%E3%81%8A%E5%AE%A2%E6%A7%98%E3%81%B8%E6%A5%AD%E5%8B%99%E5%86%85%E5%AE%B9%E6%96%BD%E5%B7%A5%E4%BA%8B%E4%BE%8B%E6%8A%80%E8%A1%93%E3%81%A8%E3%81%93%E3%81%A0%E3%82%8F%E3%82%8A%E4%BC%9A%E7%A4%BE%E6%A6%82%E8%A6%81%E3%83%96%E3%83%AD%E3%82%B0%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B%E3%83%97%E3%83%A9%E3%82%A4%E3%83%90%E3%82%B7%E3%83%BC%E3%83%9D%E3%83%AA%E3%82%B7%E3%83%BCTOP%E7%9F%A5%E3%82%89&display=swap");

/* =========================================================
 * 1. パレット
 * =======================================================*/

:root {
  /* 深緑（小倉建築計画工房様の配色に合わせた） */
  --d-dark: #364238;
  --d-dark-2: #4D5849;
  --d-dark-3: #5F6B5B;
  --d-accent: #F09000;
  --d-accent-2: #D97B00;

  /* 生成りの下地（タムラ塗装様の紙のような質感） */
  --d-paper: #F7F4EC;
  --d-paper-2: #FFFFFF;
  --d-paper-3: #EFEADD;

  --d-ink: #1C1C1A;
  --d-ink-60: #5A5A56;
  --d-line: #DCD6C6;

  --d-serif: "Shippori Mincho", "游明朝", YuMincho, "Yu Mincho",
    "ヒラギノ明朝 ProN", "Noto Serif JP", serif;
  --d-sans: "游ゴシック", YuGothic, "Yu Gothic", "Noto Sans JP",
    "ヒラギノ角ゴ ProN", メイリオ, Meiryo, "MS Pゴシック", sans-serif;
  /* 見出しに重ねる英字（小倉建築計画工房様と同じ系統のセリフ体） */
  --d-en: Georgia, "Times New Roman", "游明朝", YuMincho, "Yu Mincho", serif;
  --d-num: "Zen Kaku Gothic New", "Helvetica Neue", Arial, "游ゴシック", YuGothic, sans-serif;
  --d-label: #9B7954;         /* 明るい面の英字 */
  --d-label-on-dark: #C8B79B; /* 濃い面の英字 */
}

/* =========================================================
 * 2. 下地
 * =======================================================*/

.home #content,
.home .l-content,
.home #main_content {
  background: var(--d-paper);
}

.home .post_content {
  font-family: var(--d-sans);
  color: var(--d-ink);
}

.home .post_content p {
  line-height: 2.1;
  letter-spacing: 0.03em;
}

/* =========================================================
 * 3. 見出し（英字を重ねる）
 * =======================================================*/

/* SWELLのh2既定スタイル（背景の帯・上下の罫線・装飾要素）を落とす。
   テーマ側の指定に確実に勝たせるため #body_wrap から書く。 */
#body_wrap .post_content h2.sp-h2 {
  position: relative;
  margin: 0 0 1.5em;
  padding: 0 0.6em;
  background: none;
  background-image: none;
  border: 0;
  border-top: 0;
  border-bottom: 0;
  box-shadow: none;
  color: var(--d-dark);
  font-family: var(--d-serif);
  font-size: clamp(1.2rem, 3.4vw, 2rem);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.06em;
  text-align: center;
  overflow-wrap: anywhere;
}

#body_wrap .post_content h2.sp-h2::after {
  content: none;
  display: none;
}

/* 見出しの上に置く英字（小倉建築計画工房様の「HOUSING PERFORMANCE」のような小さな見出し）。
   ver1.25までは筆記体を絶対配置で重ねていたが、流れの中に置く形に変えた。
   重なりを計算する必要がなくなり、画面幅で日本語に食い込むことがない。 */
#body_wrap .post_content h2.sp-h2::before {
  content: "";
  position: static;
  display: block;
  height: auto; /* ver1.42 SWELLのh2::beforeの height:100% を打ち消す（グリッド内で英字が伸びるため） */
  margin: 0 0 1.35em;
  /* 字間の分だけ右にずれて見えるので、同じ量を左に足して中央をそろえる */
  padding-left: 0.26em;
  font-family: var(--d-en);
  font-size: clamp(0.72rem, 1.4vw, 0.82rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--d-label);
  opacity: 1;
  white-space: nowrap;
  pointer-events: none;
  background: none;
  border: 0;
  transform: none;
}

/* クラス名はブロック側の記述に合わせて据え置き、表示する英字だけ変えている。
   --message はリード文、--greeting は代表挨拶に付いている。
   Story は日本語見出しの「創業STORY」と重複するため Origin にしている。 */
#body_wrap .post_content h2.sp-h2--message::before { content: "Concept"; }
#body_wrap .post_content h2.sp-h2--reason::before  { content: "Reason"; }
#body_wrap .post_content h2.sp-h2--works::before   { content: "Works"; }
#body_wrap .post_content h2.sp-h2--story::before   { content: "Origin"; }
#body_wrap .post_content h2.sp-h2--greeting::before{ content: "Message"; }

/* 濃い面の上に置く見出し */
#body_wrap .post_content .sp-sec--dark h2.sp-h2 {
  color: #FFFFFF;
}

#body_wrap .post_content .sp-sec--dark h2.sp-h2::before {
  color: var(--d-label-on-dark);
}

/* h3 */
.home .post_content h3 {
  font-family: var(--d-serif);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--d-dark-2);
}

/* =========================================================
 * 4. セクション
 * =======================================================*/

.home .post_content .sp-sec {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: clamp(56px, 8vw, 100px);
  padding-bottom: clamp(56px, 8vw, 100px);
}

/* 生成りより少し濃い帯 */
.home .post_content .sp-sec--tint {
  background: var(--d-paper-3);
}

/* 濃い色の面（小倉建築計画工房様のような区切り） */
.home .post_content .sp-sec--dark {
  background: var(--d-dark);
  color: #FFFFFF;
}

.home .post_content .sp-sec--dark p {
  color: rgba(255, 255, 255, 0.86);
}

.home .post_content .sp-sec--dark h3 {
  color: #FFFFFF;
}

/* 左右の余白。
   alignfull のときはSWELL側のコンテナ余白が外れるため、
   :not(.alignfull) で条件を付けると全幅セクションだけ余白ゼロになる。
   条件は付けず、常に内側へ余白を持たせる。 */
.home .post_content .sp-sec--dark,
.home .post_content .sp-sec--tint,
.home .post_content .sp-sec--lead,
.home .post_content .sp-sec--works,
.home .post_content .sp-sec--greeting {
  padding-left: clamp(20px, 5vw, 48px);
  padding-right: clamp(20px, 5vw, 48px);
}

/* セクションの内側のコンテナは、二重に余白が付かないよう詰める */
.home .post_content .sp-sec > .wp-block-group__inner-container {
  padding-left: 0;
  padding-right: 0;
}

/* =========================================================
 * 5. 選ばれる理由の3カラム（番号付き）
 * =======================================================*/

.home .post_content .sp-reason {
  counter-reset: sp-reason;
  gap: clamp(24px, 3.5vw, 44px);
  margin-top: clamp(28px, 4vw, 44px);
}

/* 番号は小倉建築計画工房様の「家づくりの流れ」の形。
   大きな数字を見出しの背面に薄く置き、斜めの細線を添える。
   数字と線は isolation で列の中に閉じ込め、濃い面の背景より手前・見出しより奥に置く。 */
.home .post_content .sp-reason > .wp-block-column {
  counter-increment: sp-reason;
  position: relative;
  isolation: isolate;
  padding-top: 34px;
}

.home .post_content .sp-reason > .wp-block-column::before {
  content: counter(sp-reason);
  position: absolute;
  top: 0;
  left: 0;
  /* 数字の幅は1が細く2・3が広い。右端を44pxにそろえ、斜線との位置関係を一定にする */
  width: 44px;
  text-align: right;
  z-index: -1;
  font-family: var(--d-num);
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: rgba(54, 66, 56, 0.14);
  pointer-events: none;
}

.home .post_content .sp-reason > .wp-block-column::after {
  content: "";
  position: absolute;
  /* 数字の右下の角（36px, 66px）あたりを起点に、45度で右上へ伸ばす。
     中心は(64px, 38px)。数字の中を横切らないので打ち消し線に見えない */
  top: 0;
  left: 63px;
  z-index: -1;
  width: 1px;
  height: 78px;
  background: rgba(54, 66, 56, 0.22);
  transform: rotate(45deg);
  pointer-events: none;
}

/* 濃い面の上では白を透かす */
.home .post_content .sp-sec--dark .sp-reason > .wp-block-column::before {
  color: rgba(255, 255, 255, 0.18);
}

.home .post_content .sp-sec--dark .sp-reason > .wp-block-column::after {
  background: rgba(255, 255, 255, 0.3);
}

.home .post_content .sp-reason > .wp-block-column > h3 {
  position: relative;
  padding-left: 78px;
  margin: 0 0 0.7em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  min-height: 2.9em;
  display: flex;
  align-items: flex-end;
}

.home .post_content .sp-reason > .wp-block-column > p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 2;
}

/* ver1.32 PCの見出しを 17px → 最大22px に上げる（小倉建築計画工房様は19〜24px） */
@media (min-width: 960px) {
  .home .post_content .sp-reason > .wp-block-column > h3 {
    font-size: clamp(18px, 1.45vw, 22px);
    /* ver1.44 「一級塗装技能士が在籍する外壁塗装店」のように2行になる見出しがあるため、
       3列とも2行分の高さを取り、1行の見出しは下に寄せて下線の位置をそろえる */
    min-height: calc(2 * 1.7em + 0.6em);
  }
}

/* 960〜1279pxは列が狭く、18pxだと「GOOD JOB保証登録施工店」が2行に折れて下線の高さがずれる */
@media (min-width: 960px) and (max-width: 1279px) {
  .home .post_content .sp-reason > .wp-block-column > h3 {
    font-size: 16px;
  }
}

/* 960〜1023pxでは16pxでも3列目が2行になる。3列とも2行分の高さを取り、下線の位置をそろえる */
@media (min-width: 960px) and (max-width: 1023px) {
  .home .post_content .sp-reason > .wp-block-column > h3 {
    min-height: 4.1em;
  }
}

@media (max-width: 959px) {
  .home .post_content .sp-reason > .wp-block-column > h3 {
    min-height: 0;
    display: block;
  }
}

/* =========================================================
 * 6. 本文の読み物パート（創業STORY・代表挨拶）
 * =======================================================*/

.home .post_content .sp-story p {
  font-family: var(--d-serif);
  font-size: clamp(0.98rem, 2.2vw, 1.05rem);
  line-height: 2.25;
  letter-spacing: 0.05em;
}

.home .post_content .sp-profile {
  font-family: var(--d-serif);
  font-size: 1.02rem;
  line-height: 2.1;
  letter-spacing: 0.06em;
  color: var(--d-dark-2);
  padding-bottom: 1.4em;
  border-bottom: 1px solid var(--d-line);
  margin-bottom: 1.8em;
}

/* =========================================================
 * 7. ボタン
 * =======================================================*/

.home .post_content .wp-block-buttons {
  margin-top: clamp(28px, 4vw, 44px);
}

.home .post_content .sp-btn .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  min-width: 17em;
  padding: 1em 2em;
  background: var(--d-paper-2);
  border: 1px solid var(--d-dark);
  border-radius: 0;
  color: var(--d-dark);
  font-family: var(--d-sans);
  font-size: 0.97rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  justify-content: space-between;
  transition: background 0.25s, color 0.25s;
}

.home .post_content .sp-btn .wp-block-button__link::after {
  content: "→";
  font-size: 1.05em;
  line-height: 1;
}

.home .post_content .sp-btn .wp-block-button__link:hover {
  background: var(--d-dark);
  color: #FFFFFF;
}

/* 濃い面の上のボタン */
.home .post_content .sp-sec--dark .sp-btn .wp-block-button__link {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.7);
  color: #FFFFFF;
}

.home .post_content .sp-sec--dark .sp-btn .wp-block-button__link:hover {
  background: #FFFFFF;
  color: var(--d-dark);
}

/* CTAの主ボタン */
.home .post_content .sp-btn--accent .wp-block-button__link {
  background: var(--d-accent);
  border-color: var(--d-accent);
  color: #FFFFFF;
}

.home .post_content .sp-btn--accent .wp-block-button__link:hover {
  background: var(--d-accent-2);
  border-color: var(--d-accent-2);
  color: #FFFFFF;
}

/* =========================================================
 * 8. CTA
 * =======================================================*/

.home .post_content .sp-cta {
  background: var(--d-dark);
  padding: clamp(48px, 7vw, 84px) clamp(20px, 5vw, 48px);
  text-align: center;
}

.home .post_content .sp-cta p {
  color: rgba(255, 255, 255, 0.9);
}

.home .post_content .sp-cta__lead {
  font-family: var(--d-serif);
  font-size: clamp(1.2rem, 3.2vw, 1.6rem);
  line-height: 1.8;
  letter-spacing: 0.08em;
  color: #FFFFFF;
  margin-bottom: 0.8em;
}

/* =========================================================
 * 9. 施工事例の一覧
 * =======================================================*/

.home .post_content .p-postList__title {
  font-family: var(--d-serif);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--d-dark);
}

.home .post_content .p-postList__body {
  background: var(--d-paper-2);
  padding: 1.1em 1.2em;
}

.home .post_content .c-moreLink__btn,
.home .post_content .p-postListMore .c-moreLink {
  font-family: var(--d-sans);
  letter-spacing: 0.06em;
  color: var(--d-dark);
}

/* =========================================================
 * 10. スマホ
 * =======================================================*/

@media (max-width: 599px) {
  /* ver1.26 英字を流れの中に置いたため、上余白は不要になった（旧 2.4em）
     ver1.31 文字を 16px前後 → 21px に上げた（本文は13px前後） */
  #body_wrap .post_content h2.sp-h2 {
    font-size: 21px;
    padding-top: 0;
    padding-left: 0.4em;
    padding-right: 0.4em;
    letter-spacing: 0.03em;
  }

  .home .post_content .sp-btn .wp-block-button__link {
    width: 100%;
    min-width: 0;
  }

  /* リード文の見出しは2行の文なので、21pxだと幅360pxで3行に折れる。18pxで2行に収める */
  #body_wrap .post_content h2.sp-h2--message {
    font-size: 18px;
  }

  /* 選ばれる理由。ver1.33 番号と斜線をPCの3/4に縮め、見出しを主役にする。
     番号 64→48px、右端 44→33px。斜線は長さ 78→58px、中心 (64,38)→(48,29)。 */
  .home .post_content .sp-reason > .wp-block-column {
    padding-top: 22px;
  }

  .home .post_content .sp-reason > .wp-block-column::before {
    width: 33px;
    font-size: 48px;
  }

  .home .post_content .sp-reason > .wp-block-column::after {
    top: 0;
    left: 47px;
    height: 58px;
  }

  /* 見出し 17px → 19px。番号が小さくなった分、左の空きも 78 → 60px に詰める。
     20pxだと幅360pxの端末で「GOOD JOB保証登録施工店」が2行に折れる */
  .home .post_content .sp-reason > .wp-block-column > h3 {
    font-size: 19px;
    padding-left: 60px;
  }
}

/* =========================================================
 * 11. 動きを抑える設定への対応
 * =======================================================*/

@media (prefers-reduced-motion: reduce) {
  .home .post_content .sp-btn .wp-block-button__link {
    transition: none;
  }
}

/* =========================================================
 * 12. スクロール表示アニメーション
 *    クラスは sunpaint-design.js が読み込み時に付与する
 * =======================================================*/

#body_wrap.home .post_content .sp-anim {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.75s ease, transform 0.75s ease;
  will-change: opacity, transform;
}

#body_wrap.home .post_content .sp-anim.is-in {
  opacity: 1;
  transform: none;
}

/* =========================================================
 * 13. フッターのSNSリンク
 *
 *    SWELLのフッターナビは a に border-right で区切り線を出す。
 *    （.l-footer__nav a { border-right:1px solid }）
 *    そのままだとアイコン1つずつに縦線が付くため打ち消す。
 * =======================================================*/

.l-footer__nav {
  align-items: center;
  row-gap: 0.6em;
}

.l-footer__nav .sp-sns {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-left: 1.2em;
}

.l-footer__nav .sp-sns a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid currentColor;
  border-right: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.7;
  transition: opacity 0.25s;
}

.l-footer__nav .sp-sns a:hover {
  opacity: 1;
  text-decoration: none;
}

.l-footer__nav .sp-sns svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

/* スマホでは行を分け、文字リンクとの間に余白を取る */
@media (max-width: 599px) {
  .l-footer__nav .sp-sns {
    flex-basis: 100%;
    justify-content: center;
    margin-left: 0;
    margin-top: 1em;
    gap: 0.9em;
  }

  .l-footer__nav .sp-sns a {
    width: 40px;
    height: 40px;
  }

  .l-footer__nav .sp-sns svg {
    width: 19px;
    height: 19px;
  }
}

/* SNSの下にコピーライトが重ならないよう余白を確保 */
.l-footer__foot .copyright {
  margin-top: 1.2em;
}

@media (prefers-reduced-motion: reduce) {
  #body_wrap.home .post_content .sp-anim {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .l-footer__nav .sp-sns a {
    transition: none;
  }
}

/* =========================================================
 * 15. 施工事例の工事情報テーブル
 *    スマホで1列目が潰れて縦書きのように見えるため、
 *    横並びのまま項目名の幅を確保する。
 *    sunpaint-works.css の縦積み指定（display:block）も打ち消す。
 * =======================================================*/

.sunpaint-works-info__table {
  table-layout: fixed;
  width: 100%;
}

.sunpaint-works-info__table th,
.sunpaint-works-info__table td {
  display: table-cell;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
}

.sunpaint-works-info__table th {
  width: 8.5em;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .sunpaint-works-info__table {
    font-size: 0.88rem;
    line-height: 1.75;
  }

  .sunpaint-works-info__table th,
  .sunpaint-works-info__table td {
    display: table-cell;
    padding: 0.6rem 0.7rem;
    white-space: normal;
  }

  /* 項目名は最長が「施工エリア」「建物種別」の5文字。
     6.6em あれば折り返さずに収まる。 */
  .sunpaint-works-info__table th {
    width: 6.6em;
    white-space: nowrap;
    border-bottom: 1px solid var(--sp-line, #DCDCD6);
  }
}

@media (max-width: 374px) {
  .sunpaint-works-info__table {
    font-size: 0.82rem;
  }

  .sunpaint-works-info__table th {
    width: 6em;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .sunpaint-works-info__table td {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* =========================================================
 * 16. 本文中のテーブル（会社情報など2列の表）
 *
 *    WordPress標準のテーブルブロックは列幅を指定しないため、
 *    内容の長い行に引っぱられて1列目が潰れ、
 *    項目名が1文字ずつ縦に折り返してしまう。
 *
 *    :has(td:nth-child(2):last-child) で「2列の表」だけに当てる。
 *    業務内容ページの3列表（塗料の種類／耐用年数／特徴）には当たらない。
 * =======================================================*/

.post_content .wp-block-table table:has(tr > td:nth-child(2):last-child) {
  table-layout: fixed;
  width: 100%;
}

.post_content .wp-block-table table:has(tr > td:nth-child(2):last-child) td:first-child {
  width: 9em;
  white-space: nowrap;
  vertical-align: top;
}

.post_content .wp-block-table table:has(tr > td:nth-child(2):last-child) td:nth-child(2) {
  vertical-align: top;
  overflow-wrap: anywhere;
}

/* :has() に対応していない環境向けの保険。
   2列でも3列でも、項目名が縦に割れることだけは防ぐ。 */
.post_content .wp-block-table td:first-child {
  word-break: normal;
}

@media (max-width: 600px) {
  .post_content .wp-block-table table:has(tr > td:nth-child(2):last-child) {
    font-size: 0.88rem;
    line-height: 1.75;
  }

  .post_content .wp-block-table table:has(tr > td:nth-child(2):last-child) td {
    padding: 0.6rem 0.7rem;
  }

  /* 項目名の最長は「事業内容」「保有資格」「電話番号」の4文字。
     5.4em あれば折り返さない。 */
  .post_content .wp-block-table table:has(tr > td:nth-child(2):last-child) td:first-child {
    width: 5.4em;
  }
}

@media (max-width: 374px) {
  .post_content .wp-block-table table:has(tr > td:nth-child(2):last-child) {
    font-size: 0.82rem;
  }

  .post_content .wp-block-table table:has(tr > td:nth-child(2):last-child) td {
    padding: 0.5rem;
  }
}

/* 業務内容ページの3列表は、スマホで横スクロールさせる */
@media (max-width: 600px) {
  .post_content .wp-block-table {
    overflow-x: auto;
  }
}

/* =========================================================
 * 17. ヘッダーロゴのサイズ
 *
 *    SWELLはカスタマイザーの値を CSS変数で出力している。
 *    --logo_size_sp   スマホ（既定48px）
 *    --logo_size_pc   PC（既定60px）
 *    --logo_size_pcfix 追従ヘッダー（既定32px）
 *
 *    円形ロゴは同じ高さでも小さく見えるため、スマホだけ上げる。
 *    カスタマイザー側を書き換えたい場合は、この指定を消してよい。
 * =======================================================*/

:root {
  --logo_size_sp: 64px;
  --logo_size_pc: 94px;
  --logo_size_pcfix: 50px;
}

@media (max-width: 374px) {
  :root {
    --logo_size_sp: 56px;
  }
}

/* =========================================================
 * 18. 生成りの面を全幅にする
 *
 *    ブロック側に align full を付けずに全幅へ広げる。
 *    ブロックコードを貼り直さずに済む。
 *    ver1.27 でコンセプト・施工事例・代表挨拶も対象にした。
 *    幅868pxで止まり、左右に白い余白が出ていたため。
 *    100vw のはみ出しは、SWELLの #body_wrap（overflow-x: clip）で切られる。
 * =======================================================*/

.home .post_content .sp-sec--tint,
.home .post_content .sp-sec--lead,
.home .post_content .sp-sec--works,
.home .post_content .sp-sec--greeting {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ver1.28 生成りの色は #content（幅1296pxまで）が持っていて、面そのものは透明だった。
   幅1296pxを超える画面では、全幅にしても左右が白く見えていた。面に直接色を持たせる。 */
.home .post_content .sp-sec--lead,
.home .post_content .sp-sec--works,
.home .post_content .sp-sec--greeting {
  background: var(--d-paper);
}

/* セクションの間や前後に #content の外側がのぞかないよう、土台も生成りにする。
   SWELLは .home を #body_wrap 自身に付けるので、.home #body_wrap では当たらない。 */
#body_wrap.home {
  background: var(--d-paper);
}

/* 内側の本文は読みやすい幅で止める */
.home .post_content .sp-sec--lead > .wp-block-group__inner-container,
.home .post_content .sp-sec--works > .wp-block-group__inner-container,
.home .post_content .sp-sec--greeting > .wp-block-group__inner-container,
.home .post_content .sp-sec--tint > .wp-block-group__inner-container {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.home .post_content .sp-sec--dark > .wp-block-group__inner-container {
  max-width: 1200px; /* ver1.32 1100px から広げた（小倉建築計画工房様は1180px） */
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
 * 19. メインビジュアルのキャッチコピー
 * =======================================================*/

.p-mainVisual__slideTitle {
  font-family: var(--d-serif);
  font-size: clamp(1.3rem, 4vw, 2.6rem);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.14em;
}

.p-mainVisual__slideTitle::after {
  content: "";
  display: block;
  width: clamp(48px, 8vw, 88px);
  height: 1px;
  margin: 0.9em auto 0;
  background: currentColor;
  opacity: 0.8;
}

/* =========================================================
 * 20. 印刷・PDF保存への対応
 *
 *    スクロールで表示する要素は opacity:0 のまま印刷されると
 *    白紙になる。印刷時は必ず表示する。
 * =======================================================*/

@media print {
  #body_wrap.home .post_content .sp-anim,
  #body_wrap.home .post_content .sp-anim:not(.is-in) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .sp-fixbar {
    display: none !important;
  }

  .home .post_content .sp-sec--dark,
  .home .post_content .sp-cta {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* =========================================================
 * 21. ヘッダーのアイコン（RSS・検索）
 *
 *    RSSは押すとXMLの生データが開き、一般の閲覧者には不要。
 *    企業サイトでは隠す。
 *    検索はタップ領域を44px四方まで広げる（指で押せる最小の目安）。
 * =======================================================*/

.c-iconList__item.-rss {
  display: none;
}

.c-iconList__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.c-iconList__icon {
  font-size: 19px;
}

@media (max-width: 959px) {
  .c-iconList__link {
    min-width: 48px;
    min-height: 48px;
  }

  .c-iconList__icon {
    font-size: 21px;
  }
}

/* =========================================================
 * 22. グローバルメニュー
 *
 *    SWELLの既定は14px・左右10px。
 *    7項目あるため詰まって見える。文字を大きくし、
 *    項目の間隔と字間を広げて読みやすくする。
 * =======================================================*/

@media (min-width: 960px) {
  .c-gnav > .menu-item > a {
    padding: 0 16px;
  }

  /* ver1.40 15px → 16px（小倉建築計画工房様と同じ大きさ）、字間 0.06 → 0.1em */
  .c-gnav > .menu-item > a .ttl {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.5;
  }
}

/* 項目が多いため、幅が狭いPCでは少し詰める */
@media (min-width: 960px) and (max-width: 1199px) {
  .c-gnav > .menu-item > a {
    padding: 0 10px;
  }

  .c-gnav > .menu-item > a .ttl {
    font-size: 14px;
    letter-spacing: 0.03em;
  }
}

/* 追従ヘッダーのメニューも合わせる */
@media (min-width: 960px) {
  .l-fixHeader .c-gnav > .menu-item > a .ttl {
    font-size: 15px;
    letter-spacing: 0.06em;
  }
}

/* =========================================================
 * 23. 追従バー（4つとも背景を塗る）
 *
 *    アオイエペイント様の縦並びバーと同じ考え方。
 *    項目ごとに色を変え、文字とアイコンは白で抜く。
 *    色は配色テーマ（深緑／濃紺）に連動する。
 *    アイコンは4つとも線の太さ2pxの単色SVG（currentColor）で、
 *    白い文字色をそのまま使う。LINE・口コミだけの個別指定は持たない（ver1.25）。
 * =======================================================*/

.sp-fixbar {
  background: transparent;
  border-top: 0;
  box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.16);
}

.sp-fixbar__item {
  border-left: 0;
  color: #FFFFFF;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.sp-fixbar__item:first-child {
  border-left: 0;
}

/* 無料見積（主導線） */
.sp-fixbar__item--contact {
  background: var(--d-accent);
  color: #FFFFFF;
  border-left-color: transparent;
}

/* お電話 */
.sp-fixbar__item[href^="tel:"] {
  background: var(--d-dark-2);
  color: #FFFFFF;
}

/* LINE（公式カラー） */
.sp-fixbar__item--line {
  background: #06C755;
  color: #FFFFFF;
}

/* Google口コミ */
.sp-fixbar__item--review {
  background: var(--d-dark);
  color: #FFFFFF;
}

/* 押したときの反応 */
.sp-fixbar__item:hover {
  filter: brightness(1.12);
}

/* PC（右下に縦並び） */
@media (min-width: 960px) {
  .sp-fixbar {
    width: 92px;
    border: 0;
    border-radius: 4px;
    overflow: hidden;
  }

  .sp-fixbar__item {
    height: 82px;
    border-top: 0;
    font-size: 0.72rem;
    gap: 5px;
  }

  .sp-fixbar__item:first-child {
    border-top: 0;
  }

  .sp-fixbar__item svg {
    width: 26px;
    height: 26px;
  }
}

/* スマホ（下部に横並び） */
@media (max-width: 959px) {
  .sp-fixbar__item {
    font-size: 0.68rem;
  }

  .sp-fixbar__item svg {
    width: 22px;
    height: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sp-fixbar__item:hover {
    filter: none;
  }
}

/* =========================================================
 * 24. 見出し（h3）の下線をトップページの配色に合わせる
 *
 *    SWELLのh3は下線の左3割をメインカラー（青 #04384C）で塗っている。
 *    カスタマイザーで変えると下層ページにも及ぶため、トップページだけここで上書きする。
 *    色の割合（29.3%）はSWELLの指定に合わせている。
 * =======================================================*/

.home .post_content h3::before {
  background: repeating-linear-gradient(90deg,
    var(--d-label) 0%, var(--d-label) 29.3%,
    rgba(150, 150, 150, 0.2) 29.3%, rgba(150, 150, 150, 0.2) 100%);
}

.home .post_content .sp-sec--dark h3::before {
  background: repeating-linear-gradient(90deg,
    var(--d-label-on-dark) 0%, var(--d-label-on-dark) 29.3%,
    rgba(255, 255, 255, 0.18) 29.3%, rgba(255, 255, 255, 0.18) 100%);
}

/* =========================================================
 * 25. トップ写真の下の「SCROLL」表示
 *
 *    小倉建築計画工房様と同じ形。白い「SCROLL」の文字の上下に、長さ24pxの細い縦線を置く。
 *    ver1.35 文字と上の線をゆっくり上下させる（ふわふわ）。下の線は写真の下端に付いたまま。
 *    疑似要素で作っているため押せない飾り（参考サイトは本文へのリンク）。
 *    線は背景のグラデーションで上下に1本ずつ描き、下の線は写真の下端まで届く。
 *
 *    スライドの切り替えの点（ページネーション）が同じ下中央にあり重なるため消した。
 *    参考サイトも点を出していない。
 * =======================================================*/

#body_wrap.home .p-mainVisual::after {
  content: "SCROLL";
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 11;
  transform: translateX(-50%);
  padding: 30px 0 30px 0.2em; /* 左の0.2emは字間の分の中央補正 */
  font-family: var(--d-en);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.2em;
  color: #FFFFFF;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.35); /* 空など明るい写真でも読めるように */
  background:
    linear-gradient(#FFFFFF, #FFFFFF) center top / 1px 24px no-repeat,
    linear-gradient(#FFFFFF, #FFFFFF) center bottom / 1px 24px no-repeat;
  pointer-events: none;
  animation: sp-scroll-float 2.8s ease-in-out infinite;
}

/* 下の余白を 30→38px と伸び縮みさせ、文字と上の線だけを8px上下させる。
   下の線は要素の下端（写真の下端）に固定されるので離れない */
@keyframes sp-scroll-float {
  0%, 100% { padding-bottom: 30px; }
  50%      { padding-bottom: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  #body_wrap.home .p-mainVisual::after {
    animation: none;
  }
}

#body_wrap.home .p-mainVisual .swiper-pagination {
  display: none;
}

@media print {
  #body_wrap.home .p-mainVisual::after {
    display: none;
  }
}

/* =========================================================
 * 26. スマホのトップ写真（小倉建築計画工房様のスマホ表示に合わせる）
 *
 *    写真を画面の6割の高さの縦長にし、キャッチコピーを左下に2行で大きく置く。
 *    ver1.38 7割では窓と玄関しか映らず家だと分かりにくかったため6割に下げた。
 *    「色褪せない景色を、／住まいに。」の改行は、幅を約9文字分に絞って作っている
 *    （カスタマイザーの文言は変えなくてよい）。下の細線の代わりに英字の社名を添える。
 * =======================================================*/

@media (max-width: 599px) {
  #body_wrap.home .p-mainVisual.-height-set .p-mainVisual__inner {
    height: 60vh;
    height: 60svh;
  }

  #body_wrap.home .p-mainVisual__textLayer {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
    padding-bottom: 96px; /* 下の「SCROLL」と重ならない位置 */
  }

  #body_wrap.home .p-mainVisual__slideTitle {
    width: 10.3em;
    font-size: 26px;
    line-height: 1.8;
    letter-spacing: 0.12em;
    text-align: left;
  }

  #body_wrap.home .p-mainVisual__slideTitle::after {
    content: "COLORING LIFE, CREATING PEACE OF MIND.";
    width: auto;
    height: auto;
    margin: 0.7em 0 0;
    background: none;
    font-family: var(--d-en);
    width: calc(100vw - 48px); /* 英字は見出しの幅（約9文字）に縛られないようにする */
    font-size: 11px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.14em;
    opacity: 0.9;
  }
}

/* =========================================================
 * 27. 代表挨拶の顔写真
 *
 *    代表挨拶の中の画像ブロックに当てる。追加CSSクラス（sp-greeting-photo）は付けなくてよい。
 * =======================================================*/

#body_wrap .post_content .sp-greeting-photo,
#body_wrap .post_content .sp-sec--greeting .wp-block-image {
  margin: 0 auto 1.6em;
  text-align: center;
}

#body_wrap .post_content .sp-greeting-photo img,
#body_wrap .post_content .sp-sec--greeting .wp-block-image img {
  width: 240px;
  max-width: 60%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (max-width: 599px) {
  #body_wrap .post_content .sp-greeting-photo img,
  #body_wrap .post_content .sp-sec--greeting .wp-block-image img {
    width: 200px;
  }
}

/* =========================================================
 * 28. 全ページ共通のフッター（小倉建築計画工房様の形）
 *
 *    ウィジェット「フッター1」にカスタムHTMLで .sp-footer を置く。
 *    左にロゴ・所在地・電話・SNS、右にメニューを縦3列。
 *    これを置いたページでは、SWELL標準のフッターメニュー（旧SNSアイコン含む）を隠す。
 * =======================================================*/

#body_wrap:has(.sp-footer) .l-footer__nav {
  display: none;
}

.l-footer .sp-footer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 24px 24px;
  color: #555;
  text-align: left;
}

.sp-footer__logo img {
  display: block;
  width: 96px;
  height: auto;
}

.sp-footer__addr {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: 0.08em;
}

.sp-footer__addr a {
  color: inherit;
  text-decoration: none;
}

.sp-footer__sns {
  display: flex;
  gap: 16px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.sp-footer__sns a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: #555;
}

.sp-footer__sns svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.sp-footer__nav ul {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 18px 32px;
  justify-content: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-footer__nav a {
  font-family: "Zen Kaku Gothic New", var(--sans, sans-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #555;
  text-decoration: none;
}

.sp-footer__nav a:hover {
  color: var(--d-dark);
}

@media (min-width: 960px) {
  .l-footer .sp-footer {
    grid-template-columns: 1fr auto;
    align-items: start;
    padding: 72px 48px 32px;
  }

  /* 縦に5・3・1で並べる（小倉建築計画工房様と同じ流れ） */
  .sp-footer__nav ul {
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    gap: 22px 56px;
  }

  /* ver1.41 小倉建築計画工房様のPCフッターに合わせる（メニュー・所在地 16px、SNS 40px枠） */
  .sp-footer__logo img {
    width: 120px;
  }

  .sp-footer__addr {
    font-size: 16px;
    line-height: 1.9;
  }

  .sp-footer__sns {
    gap: 24px;
  }

  .sp-footer__sns a {
    width: 48px;
    height: 48px;
  }

  .sp-footer__sns svg {
    width: 32px;
    height: 32px;
  }

  .sp-footer__nav a {
    font-size: 16px;
  }

  /* 9項目を5・3・1にする。プライバシーポリシーだけ3列目の先頭へ */
  .sp-footer__nav li:nth-child(n+6):nth-child(-n+8) {
    grid-column: 2;
  }

  .sp-footer__nav li:nth-child(9) {
    grid-column: 3;
    grid-row: 1;
  }
}

/* 幅960〜1079pxは列が足りず長い項目が折れるため、メニューだけ少し小さく */
@media (min-width: 960px) and (max-width: 1079px) {
  .sp-footer__nav a {
    font-size: 14px;
    letter-spacing: 0.06em;
  }

  .sp-footer__nav ul {
    gap: 22px 36px;
  }
}

/* スマホは2列。長い項目名が折れないよう、字間と大きさを控えめにする */
@media (max-width: 959px) {
  .sp-footer__logo img {
    width: 72px;
  }

  /* 列の幅を中身に合わせる。長い2項目（技術と施工へのこだわり・プライバシーポリシー）は左列に入る */
  .sp-footer__nav ul {
    grid-template-columns: auto auto;
    gap: 16px 20px;
  }

  .sp-footer__nav a {
    font-size: 13px;
    letter-spacing: 0.02em;
  }
}

/* =========================================================
 * 29. グローバルメニューを太字のゴシックに（小倉建築計画工房様と同じ書体・太さ）
 * =======================================================*/

.c-gnav > .menu-item > a .ttl,
.c-gnav > .menu-item > a {
  font-family: "Zen Kaku Gothic New", var(--sans, sans-serif);
  font-weight: 700;
}

/* =========================================================
 * 30. PCのキャッチコピー（小倉建築計画工房様のPCの形）
 *
 *    中央1行では写真の上で寂しく見えたため、左寄せで2行・太めにし、
 *    下に英字の添え書きを置く。スマホは26番。
 * =======================================================*/

@media (min-width: 600px) {
  #body_wrap.home .p-mainVisual__textLayer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
  }

  #body_wrap.home .p-mainVisual__slideTitle {
    width: 10.3em;
    font-size: clamp(28px, 2.8vw, 42px);
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 0.12em;
    text-align: left;
  }

  #body_wrap.home .p-mainVisual__slideTitle::after {
    content: "COLORING LIFE, CREATING PEACE OF MIND.";
    width: max-content;
    height: auto;
    margin: 1em 0 0;
    background: none;
    font-family: var(--d-en);
    font-size: clamp(12px, 1vw, 15px);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.2em;
    opacity: 0.9;
  }
}

/* =========================================================
 * 31. 代表挨拶をスタッフ紹介の形にする（築さん支給の参考画像 IMG_8403 の形）
 *
 *    写真を左、右に「名前・ローマ字・役職 ｜ 経歴」、その下に挨拶文。
 *    プロフィールの段落（.sp-profile）はHTMLとして編集し、次の4つのspanで書く。
 *      sp-staff__name / sp-staff__roman / sp-staff__role / sp-staff__career
 *    spanが無い旧い書き方のままでも崩れないよう、spanがあるときだけ横並びにする。
 * =======================================================*/

@media (min-width: 768px) {
  #body_wrap .post_content .sp-sec--greeting > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: 240px 1fr;
    column-gap: 56px;
    max-width: 1000px;
  }

  #body_wrap .post_content .sp-sec--greeting > .wp-block-group__inner-container > * {
    grid-column: 2;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  #body_wrap .post_content .sp-sec--greeting > .wp-block-group__inner-container > h2 {
    grid-column: 1 / -1;
  }

  #body_wrap .post_content .sp-sec--greeting > .wp-block-group__inner-container > .wp-block-image {
    grid-column: 1;
    grid-row: 2 / span 20;
    align-self: start;
    margin: 0;
  }

  #body_wrap .post_content .sp-sec--greeting .wp-block-image img {
    width: 100%;
    max-width: none;
  }
}

/* プロフィール：左に名前と役職、縦線、右に経歴 */
#body_wrap .post_content .sp-profile:has(.sp-staff__name) {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "name career"
    "role career";
  justify-content: start;
  column-gap: 40px;
  margin-bottom: 2em;
  padding-bottom: 0;
  text-align: left;
  border: 0;
}

.sp-profile .sp-staff__name {
  grid-area: name;
  font-family: var(--d-serif);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.5;
  color: var(--d-dark);
}

.sp-profile .sp-staff__roman {
  margin-left: 0.9em;
  font-family: var(--d-en);
  font-size: 0.6em;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.sp-profile .sp-staff__role {
  grid-area: role;
  margin-top: 0.8em;
  font-family: var(--d-serif);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  color: #666;
}

.sp-profile .sp-staff__career {
  grid-area: career;
  align-self: center;
  padding: 0.3em 0 0.3em 40px;
  border-left: 1px solid #999;
  font-family: var(--d-serif);
  font-size: 1rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.08em;
}

.sp-profile .sp-staff__name,
.sp-profile .sp-staff__role,
.sp-profile .sp-staff__career {
  display: block;
}

.sp-profile .sp-staff__roman {
  display: inline;
}

/* spanの間の改行（br）は使わない */
.sp-profile:has(.sp-staff__name) > br {
  display: none;
}

/* スマホ（ver1.44）：築さん支給の参考画像 IMG_8474 の形。
   写真を左、右に「役職（上）・名前・ローマ字（下）」、経歴と挨拶文は下に全幅で並べる。
   プロフィールの段落を display:contents にして、中のspanを直接グリッドに並べている。 */
@media (max-width: 767px) {
  #body_wrap .post_content .sp-sec--greeting > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: 120px 1fr;
    column-gap: 20px;
  }

  #body_wrap .post_content .sp-sec--greeting > .wp-block-group__inner-container > * {
    grid-column: 1 / -1;
  }

  #body_wrap .post_content .sp-sec--greeting > .wp-block-group__inner-container > h2 {
    grid-row: 1;
  }

  #body_wrap .post_content .sp-sec--greeting > .wp-block-group__inner-container > .wp-block-image {
    grid-column: 1;
    grid-row: 2 / span 2;
    margin: 0;
  }

  #body_wrap .post_content .sp-sec--greeting .wp-block-image img {
    width: 100%;
    max-width: none;
  }

  #body_wrap .post_content .sp-sec--greeting > .wp-block-group__inner-container > .sp-profile:has(.sp-staff__name) {
    display: contents;
  }

  .sp-profile .sp-staff__role {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    margin: 0 0 0.3em;
    font-size: 0.9rem;
    text-align: left;
  }

  .sp-profile .sp-staff__name {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    font-size: 1.5rem;
    letter-spacing: 0.12em;
    text-align: left;
  }

  .sp-profile .sp-staff__roman {
    display: block;
    margin: 0.4em 0 0;
    font-size: 0.55em;
  }

  .sp-profile .sp-staff__career {
    grid-column: 1 / -1;
    grid-row: 4;
    margin: 1.6em 0 1.4em;
    padding: 0;
    border: 0;
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.9;
    text-align: left;
  }
}

/* =========================================================
 * 32. トップ画像の下のお知らせ（小倉建築計画工房様の形）
 *
 *    ウィジェット「トップページ上部」に「最近の投稿」（投稿日を表示）を置き、
 *    その下にカスタムHTMLで「お知らせ一覧」へのリンク（.sp-news-more）を置く。
 *    日付を上、タイトルを下にし、1件ごとに細い線で区切る。
 * =======================================================*/

.home .widget_recent_entries {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
}

.home .widget_recent_entries .c-widget__title,
.home .widget_recent_entries .widget-title {
  margin: 0 0 1.8em;
  padding: 0 0 36px;
  border: 0;
  background: none;
  font-family: var(--d-serif);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-align: center;
  color: var(--d-dark);
  position: relative;
}

.home .widget_recent_entries .c-widget__title::before,
.home .widget_recent_entries .widget-title::before {
  display: none;
}

/* 見出しの下の短い縦線 */
.home .widget_recent_entries .c-widget__title::after,
.home .widget_recent_entries .widget-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 20px;
  background: #999;
  border: 0;
}

.home .widget_recent_entries ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.home .widget_recent_entries li {
  display: flex;
  flex-direction: column-reverse; /* 日付を上にする */
  gap: 0.3em;
  margin: 0;
  padding: 1.1em 0;
  border: 0;
  border-bottom: 1px solid #DDD8CC;
}

.home .widget_recent_entries li::before {
  display: none;
}

.home .widget_recent_entries li a {
  padding: 0;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: #333;
  text-decoration: none;
}

.home .widget_recent_entries .post-date {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: #999;
}

.sp-news-more {
  margin: 2.2em 0 0;
  text-align: center;
}

.sp-news-more a {
  display: inline-block;
  min-width: 200px;
  padding: 0 1em 0.5em;
  border-bottom: 1px solid #999;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  color: #555;
  text-decoration: none;
}

.sp-news-more a::after {
  content: " →";
}

/* ver1.43 SWELLの実際の出力に合わせた指定
   見出しは h2.c-secTitle.-widget > span、日付は a の中の span.recent_entries_date */
.w-frontTop {
  padding: clamp(56px, 7vw, 88px) 0 clamp(48px, 6vw, 72px);
}

.w-frontTop .widget_recent_entries .c-secTitle {
  margin: 0 0 1.8em;
  padding: 0 0 36px;
  border: 0;
  background: none;
  font-family: var(--d-serif);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-align: center;
  color: var(--d-dark);
  position: relative;
}

.w-frontTop .widget_recent_entries .c-secTitle::before {
  display: none;
}

.w-frontTop .widget_recent_entries .c-secTitle::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 20px;
  background: #999;
}

.w-frontTop .widget_recent_entries li > a {
  display: flex;
  flex-direction: column-reverse; /* 日付を上にする */
  gap: 0.35em;
  padding: 0;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: #333;
}

.w-frontTop .widget_recent_entries li > a::before {
  display: none;
}

.w-frontTop .widget_recent_entries .recent_entries_date {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: #999;
}

/* =========================================================
 * 33. 下層ページのタイトル帯（固定ページ・施工事例一覧・ブログ一覧で共通）
 *
 *    SWELLの「タイトルをコンテンツの上に表示」＋タイトル背景画像を使う。
 *    背景は築様支給の朝日の写真（文字なし）。文字はページタイトルをそのまま重ねる。
 *    高さは小倉建築計画工房様に合わせ、スマホ160px・PC360px。
 *    英字はページIDごとにCSSで添える（下の一覧）。
 *    施工事例の一覧だけはSWELLの帯が出ないため、見出し（h1）を帯に仕立てている。
 * =======================================================*/

#body_wrap .l-topTitleArea {
  min-height: 0;
  height: 160px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 明るい空の上でも白文字が読めるよう、写真を少しだけ沈める
   （SWELLのフィルターは「なし」にしているので、ここで薄い黒を重ねる） */
#body_wrap .l-topTitleArea {
  position: relative;
  overflow: hidden;
}

#body_wrap .l-topTitleArea::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: #000;
  opacity: 0.2;
  pointer-events: none;
}

#body_wrap .l-topTitleArea__body {
  position: relative;
  z-index: 2;
}

#body_wrap .l-topTitleArea .l-topTitleArea__img {
  object-fit: cover;
  object-position: 50% 55%;
}

#body_wrap .l-topTitleArea__body {
  width: 100%;
  text-align: center;
}

#body_wrap .l-topTitleArea .c-pageTitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  padding: 0;
  font-family: var(--d-serif);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
}

/* SWELLの「サブタイトル」欄は使わない（入っていても隠す） */
#body_wrap .l-topTitleArea .c-pageTitle__subTitle {
  display: none;
}

/* ページ名の上に小さく添える英字。ページを増やしたらここに1行足す */
#body_wrap .l-topTitleArea .c-pageTitle::before {
  display: block;
  font-family: var(--d-en);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.32em;
  opacity: 0.9;
}

#body_wrap.page-id-46 .l-topTitleArea .c-pageTitle::before { content: "GUIDE"; }
#body_wrap.page-id-48 .l-topTitleArea .c-pageTitle::before { content: "SERVICE"; }
#body_wrap.page-id-50 .l-topTitleArea .c-pageTitle::before { content: "QUALITY"; }
#body_wrap.page-id-52 .l-topTitleArea .c-pageTitle::before { content: "COMPANY"; }
#body_wrap.page-id-54 .l-topTitleArea .c-pageTitle::before { content: "CONTACT"; }
#body_wrap.page-id-57 .l-topTitleArea .c-pageTitle::before { content: "PRIVACY POLICY"; }
#body_wrap.blog .l-topTitleArea .c-pageTitle::before { content: "BLOG"; }
#body_wrap.post-type-archive-works .l-topTitleArea .c-pageTitle::before { content: "WORKS"; }

/* 施工事例の一覧はSWELLのタイトル帯が出ない画面なので、
   本文の見出し（h1）を画面幅いっぱいの帯にして同じ見た目にする。
   背景は固定ページと同じ朝日の写真。写真を差し替えるときはここのURLも変える */
#body_wrap.post-type-archive-works .l-content {
  padding-top: 0;
}

#body_wrap.post-type-archive-works .l-mainContent__inner > .c-pageTitle {
  position: relative;
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  height: 160px;
  margin: 0 0 clamp(40px, 6vw, 64px);
  padding: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  background:
    linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url("/wp-content/uploads/2026/10/page-header-bg.jpg") 50% 55% / cover no-repeat;
  border: 0;
  font-family: var(--d-serif);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
}

#body_wrap.post-type-archive-works .l-mainContent__inner > .c-pageTitle .c-pageTitle__inner {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
}

#body_wrap.post-type-archive-works .l-mainContent__inner > .c-pageTitle .c-pageTitle__inner::before,
#body_wrap.post-type-archive-works .l-mainContent__inner > .c-pageTitle .c-pageTitle__inner::after {
  content: none;
}

#body_wrap.post-type-archive-works .l-mainContent__inner > .c-pageTitle .c-pageTitle__subTitle {
  display: none;
}

#body_wrap.post-type-archive-works .l-mainContent__inner > .c-pageTitle::before {
  content: "WORKS";
  display: block;
  position: static;
  width: auto;
  height: auto;
  background: none;
  font-family: var(--d-en);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.32em;
  opacity: 0.9;
}

#body_wrap.post-type-archive-works .l-mainContent__inner > .c-pageTitle::after {
  content: none;
}

@media (min-width: 960px) {
  #body_wrap .l-topTitleArea {
    height: 360px;
  }

  #body_wrap .l-topTitleArea .c-pageTitle {
    font-size: 36px;
  }

  #body_wrap .l-topTitleArea .c-pageTitle::before {
    font-size: 13px;
  }

  #body_wrap.post-type-archive-works .l-mainContent__inner > .c-pageTitle {
    height: 360px;
    font-size: 36px;
  }

  #body_wrap.post-type-archive-works .l-mainContent__inner > .c-pageTitle::before {
    font-size: 13px;
  }
}

/* =========================================================
 * 34. 業務内容ページの「施工の流れ」（小倉建築計画工房様の「ご相談からの流れ」の形）
 *
 *    本文の「カスタムHTML」ブロックに <section class="sp-flow"> を置いている。
 *    見出しは中央の細い明朝＋下に縦線、各手順は大きな薄い番号＋斜線＋手順名。
 *    PCは横3つずつ、手順の間に細い矢印。写真がある手順は小さめの写真を挟む。
 *    背景はトップページと同じ生成り（--d-paper）を画面幅いっぱいに敷く。
 * =======================================================*/

#body_wrap .post_content .sp-flow {
  position: relative;
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  margin: 0 0 clamp(56px, 8vw, 96px);
  padding: clamp(48px, 7vw, 88px) 20px clamp(40px, 6vw, 72px);
  box-sizing: border-box;
  transform: translateX(-50%);
  background: var(--d-paper);
}

/* 見出し：SWELLの帯の装飾をすべて外して、細い明朝＋縦線にする */
#body_wrap .post_content .sp-flow .sp-flow__title {
  position: relative;
  margin: 0 auto clamp(40px, 6vw, 64px);
  padding: 0 0 56px;
  border: 0;
  background: none;
  box-shadow: none;
  font-family: var(--d-serif);
  font-size: clamp(22px, 2.4vw, 26px);
  font-weight: 400;
  letter-spacing: 0.16em;
  line-height: 1.5;
  color: var(--d-ink);
  text-align: center;
}

#body_wrap .post_content .sp-flow .sp-flow__title::before {
  content: none;
}

#body_wrap .post_content .sp-flow .sp-flow__title::after {
  content: "";
  position: absolute;
  top: auto;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 40px;
  margin: 0;
  border: 0;
  background: var(--d-ink-60);
  transform: none;
}

#body_wrap .post_content .sp-flow .sp-flow__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

#body_wrap .post_content .sp-flow .sp-flow__item {
  position: relative;
  margin: 0;
  padding: 0;
}

#body_wrap .post_content .sp-flow .sp-flow__item::before,
#body_wrap .post_content .sp-flow .sp-flow__item::marker {
  content: none;
}

/* 番号＋斜線＋手順名 */
#body_wrap .post_content .sp-flow .sp-flow__head {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 48px;
  min-height: 64px;
  margin: 0 0 16px;
}

#body_wrap .post_content .sp-flow .sp-flow__num {
  position: relative;
  flex: 0 0 auto;
  min-width: 0.9em;
  font-family: var(--d-en);
  font-size: 60px;
  font-weight: 400;
  line-height: 1;
  color: #D3CCBC;
}

/* 数字の右下から右上へ伸びる細い斜線（ver1.48 手順名にかからないよう、間隔を広げて線を短くした） */
#body_wrap .post_content .sp-flow .sp-flow__num::after {
  content: "";
  position: absolute;
  right: -10px;
  bottom: -2px;
  width: 1px;
  height: 46px;
  background: #C9C1AF;
  transform: rotate(40deg);
  transform-origin: bottom center;
}

#body_wrap .post_content .sp-flow .sp-flow__name {
  margin: 0;
  padding: 0 0 4px;
  border: 0;
  background: none;
  font-family: var(--d-serif);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.5;
  word-break: auto-phrase;
  color: var(--d-ink);
}

#body_wrap .post_content .sp-flow .sp-flow__name::before,
#body_wrap .post_content .sp-flow .sp-flow__name::after {
  content: none;
}

#body_wrap .post_content .sp-flow .sp-flow__img {
  margin: 0 0 14px;
}

#body_wrap .post_content .sp-flow .sp-flow__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

#body_wrap .post_content .sp-flow .sp-flow__text {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.06em;
  line-height: 1.95;
  color: var(--d-ink);
}

/* スマホ：写真は横幅の8割に抑える */
@media (max-width: 599px) {
  #body_wrap .post_content .sp-flow .sp-flow__img {
    width: 80%;
  }
}

/* タブレット：横2つ */
@media (min-width: 600px) {
  #body_wrap .post_content .sp-flow .sp-flow__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 56px 48px;
  }
}

/* PC：横3つ＋手順の間の矢印（各行の右端には付けない） */
@media (min-width: 960px) {
  #body_wrap .post_content .sp-flow .sp-flow__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 64px 72px;
  }

  #body_wrap .post_content .sp-flow .sp-flow__name {
    font-size: 17px;
  }

  #body_wrap .post_content .sp-flow .sp-flow__item:not(:nth-child(3n)):not(:last-child)::after {
    content: "";
    position: absolute;
    top: 38px;
    right: -60px;
    width: 48px;
    height: 10px;
    border: 0;
    /* 細い線の右端を斜めに跳ね上げた矢印（小倉建築計画工房様と同じ形） */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10' viewBox='0 0 48 10'%3E%3Cpath d='M0 9.5H47.5L39 3' fill='none' stroke='%23A9A08B' stroke-width='1'/%3E%3C/svg%3E") no-repeat right bottom / 48px 10px;
  }
}

/* =========================================================
 * 35. 初めてのお客様へ「選ばれる理由」（POINT形式）
 *
 *    本文の「カスタムHTML」ブロックに <section class="sp-reason"> を置いている。
 *    見出しは大きな薄い英字（Reason）の上に日本語を重ねる（アオイエペイント様の「Strength」の形）。
 *    各POINTは写真と文章を左右交互に並べる（--rev で写真が右）。スマホは写真が上・文章が下。
 * =======================================================*/

#body_wrap .post_content .sp-reason {
  margin: 0 0 clamp(64px, 8vw, 104px);
}

/* 大きな英字＋日本語の見出し（SWELLの見出し装飾はすべて外す） */
#body_wrap .post_content .sp-sec-title {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0 0 clamp(40px, 6vw, 72px);
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--d-ink);
  text-align: center;
}

#body_wrap .post_content .sp-sec-title::before,
#body_wrap .post_content .sp-sec-title::after {
  content: none;
}

#body_wrap .post_content .sp-sec-title__en {
  grid-area: 1 / 1;
  font-family: var(--d-en);
  font-size: clamp(56px, 10vw, 120px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #E4DED0;
  user-select: none;
}

#body_wrap .post_content .sp-sec-title__ja {
  grid-area: 1 / 1;
  align-self: end;
  position: relative;
  margin-bottom: -0.15em;
  font-family: var(--d-serif);
  font-size: clamp(21px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  color: var(--d-dark);
}

/* POINT：写真と文章 */
#body_wrap .post_content .sp-point {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 0 0 clamp(56px, 8vw, 96px);
}

#body_wrap .post_content .sp-point:last-child {
  margin-bottom: 0;
}

#body_wrap .post_content .sp-point__media {
  margin: 0;
}

#body_wrap .post_content .sp-point__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

#body_wrap .post_content .sp-point__num {
  margin: 0 0 10px;
  font-family: var(--d-en);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--d-dark);
}

#body_wrap .post_content .sp-point__num span {
  margin-left: 2px;
  font-size: 2.4em;
}

#body_wrap .post_content .sp-point__title {
  position: relative;
  margin: 0 0 24px;
  padding: 0 0 14px;
  border: 0;
  background: none;
  font-family: var(--d-serif);
  font-size: clamp(20px, 2.2vw, 25px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.55;
  color: var(--d-ink);
}

#body_wrap .post_content .sp-point__title::before {
  content: none;
}

/* 見出しの下の短い線（アオイエペイント様と同じ位置） */
#body_wrap .post_content .sp-point__title::after {
  content: "";
  position: absolute;
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  width: 4.5em;
  height: 3px;
  border: 0;
  background: var(--d-dark);
}

#body_wrap .post_content .sp-point__body p,
#body_wrap .post_content .sp-point__body li {
  font-size: 15px;
  line-height: 1.95;
}

#body_wrap .post_content .sp-point__body p {
  margin: 0 0 1em;
}

#body_wrap .post_content .sp-point__body ul {
  margin: 0 0 1em;
}

#body_wrap .post_content .sp-point__body > :last-child {
  margin-bottom: 0;
}

@media (min-width: 960px) {
  #body_wrap .post_content .sp-point {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
  }

  /* 偶数番目は写真を右に */
  #body_wrap .post_content .sp-point--rev .sp-point__media {
    order: 2;
  }
}

/* 本文の途中に置いた見出し（よくある質問など）は、前の文章との間を広めにとる */
#body_wrap .post_content * + .sp-sec-title {
  margin-top: clamp(64px, 8vw, 104px);
}

/* =========================================================
 * 36. よくある質問（小倉建築計画工房様の形）
 *
 *    SWELLのアコーディオンブロックはそのまま使い、見た目だけ変える。
 *    濃いグレーの帯に大きな薄い「Q」を重ね、右端に細い開閉の矢印。
 * =======================================================*/

#body_wrap .post_content .swell-block-accordion__item {
  margin: 0 0 16px;
  border: 0;
  background: none;
}

#body_wrap .post_content .swell-block-accordion__title {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 72px;
  padding: 18px 64px 18px 76px;
  border: 0;
  background: #4A4A47;
  color: #fff;
  font-family: var(--d-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.6;
  overflow: hidden;
  cursor: pointer;
}

#body_wrap .post_content .swell-block-accordion__title::before {
  content: "Q";
  position: absolute;
  top: 50%;
  left: 12px;
  font-family: var(--d-en);
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.18);
  transform: translateY(-50%);
  pointer-events: none;
}

/* 開閉の矢印（SWELLのアイコンは使わない） */
#body_wrap .post_content .swell-block-accordion__icon {
  display: none;
}

#body_wrap .post_content .swell-block-accordion__title::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 28px;
  width: 12px;
  height: 12px;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: translateY(-75%) rotate(45deg);
  transition: transform 0.25s;
}

#body_wrap .post_content .swell-block-accordion__item[open] > .swell-block-accordion__title::after {
  transform: translateY(-25%) rotate(-135deg);
}

#body_wrap .post_content .swell-block-accordion__title::-webkit-details-marker {
  display: none;
}

#body_wrap .post_content .swell-block-accordion__body {
  padding: 20px 24px 24px 76px;
  border: 1px solid #E3DED3;
  border-top: 0;
  background: #fff;
}

#body_wrap .post_content .swell-block-accordion__body > :last-child {
  margin-bottom: 0;
}

@media (max-width: 599px) {
  #body_wrap .post_content .swell-block-accordion__title {
    min-height: 64px;
    padding: 16px 48px 16px 56px;
    font-size: 15px;
    letter-spacing: 0.06em;
  }

  #body_wrap .post_content .swell-block-accordion__title::before {
    left: 8px;
    font-size: 56px;
  }

  #body_wrap .post_content .swell-block-accordion__title::after {
    right: 20px;
  }

  #body_wrap .post_content .swell-block-accordion__body {
    padding: 16px 18px 20px;
  }
}

/* =========================================================
 * 37. 業務内容「お家の劣化状況をチェック」（文章左・写真右）
 *
 *    本文の「カスタムHTML」ブロックに <div class="sp-check"> を項目ごとに置いている。
 *    PCは文章が左、写真が右（小倉建築計画工房様の並び）。写真はすべて同じ4:3の大きさ。
 *    スマホは文章の下に写真。
 * =======================================================*/

#body_wrap .post_content .sp-check {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0 0 clamp(40px, 6vw, 64px);
}

#body_wrap .post_content .sp-check__title {
  margin-top: 0;
}

#body_wrap .post_content .sp-check__body p {
  margin: 0;
  line-height: 1.95;
}

#body_wrap .post_content .sp-check__img {
  margin: 0;
}

#body_wrap .post_content .sp-check__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 768px) {
  #body_wrap .post_content .sp-check {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
  }
}

/* =========================================================
 * 38. 「現地調査・お見積もりは無料です」の枠のボタン3つ
 *
 *    お問い合わせ・お電話・LINE相談を、白い線の丸いボタンで横に並べる（アオイエペイント様の形）。
 *    スマホは縦に3つ並べる。
 * =======================================================*/

#body_wrap .post_content .sp-cta-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 24px;
  margin: 28px 0 0;
}

#body_wrap .post_content a.sp-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 240px;
  box-sizing: border-box;
  padding: 17px 28px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s;
}

#body_wrap .post_content a.sp-cta-btn:hover,
#body_wrap .post_content a.sp-cta-btn:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

#body_wrap .post_content .sp-cta-btn svg {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}

@media (max-width: 599px) {
  #body_wrap .post_content .sp-cta-btns {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  #body_wrap .post_content a.sp-cta-btn {
    width: 100%;
    max-width: 320px;
    min-width: 0;
    padding: 15px 24px;
    font-size: 16px;
  }
}

/* 枠の見出し・説明文が1文字だけ次の行に落ちないよう、行の長さをそろえる（言葉の途中では改行しない） */
#body_wrap .post_content :has(> .sp-cta-btns) > p {
  text-wrap: balance;
  word-break: auto-phrase;
}

/* ==========================================================
 * 39. スマホ開閉メニューの電話・LINE・連絡先・SNS（築さん 10/9 依頼）
 *
 *    ウィジェット「スマホ開閉メニュー下」（custom_html-5）に置いたHTMLの見た目。
 *    電話番号・LINEのリンクを変えるときは、ウィジェットの中身を直す。
 * ========================================================== */
/* 下の余白は追従バー（スマホ下部、高さ約72px）の分を足し、SNSアイコンが隠れないようにする */
#sp_menu .p-spMenu__bottom {
  padding: 4px 16px calc(32px + 80px + env(safe-area-inset-bottom));
}
#sp_menu .sp-spmenu__btns {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
}
#sp_menu .sp-spmenu__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 16px;
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-decoration: none;
}
#sp_menu .sp-spmenu__btn--tel {
  background: var(--d-dark);
  font-size: 18px;
  letter-spacing: 0.08em;
}
#sp_menu .sp-spmenu__btn--line {
  background: #06C755;
}
#sp_menu .sp-spmenu__btn svg {
  flex: none;
  width: 22px;
  height: 22px;
}
#sp_menu .sp-spmenu__info {
  margin: 24px 0 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: #555;
}
#sp_menu .sp-spmenu__info a {
  color: inherit;
  text-decoration: none;
}
#sp_menu .sp-spmenu__sns {
  display: flex;
  gap: 16px;
  margin: 12px 0 0 -8px;
  padding: 0;
  list-style: none;
}
#sp_menu .sp-spmenu__sns li {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}
#sp_menu .sp-spmenu__sns li::before {
  content: none;
}
#sp_menu .sp-spmenu__sns a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  color: #555;
}
#sp_menu .sp-spmenu__sns a::before {
  content: none;
}
#sp_menu .sp-spmenu__sns svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* ==========================================================
 * 40. 施工事例の一覧（/works/）のタイトル帯の位置を固定ページにそろえる（築さん 10/9 依頼）
 *
 *    固定ページは「タイトル帯 → パンくず」の順だが、一覧はSWELLの帯が出ないため
 *    「パンくず → 帯（h1）」の順になり、帯がパンくず1行分（約32px）下がっていた。
 *    パンくずを流れから外して帯の下へずらし、帯をヘッダーの直下に上げる。
 * ========================================================== */
#body_wrap.post-type-archive-works > .p-breadcrumb {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  transform: translateY(160px);
}
/* パンくずの見た目も固定ページと同じにする（背景なし、高さも同じ） */
#body_wrap.post-type-archive-works > .p-breadcrumb {
  padding-top: 10px;
  padding-bottom: 10px;
  background: none;
}
/* 帯の中の文字の高さを固定ページとそろえる（固定ページより7pxほど下がっていた） */
#body_wrap.post-type-archive-works .l-mainContent__inner > .c-pageTitle {
  padding-bottom: 14px;
  margin-bottom: calc(clamp(40px, 6vw, 64px) + 24px);
}
@media (min-width: 600px) {
  #body_wrap.post-type-archive-works .l-mainContent__inner > .c-pageTitle {
    margin-bottom: calc(clamp(40px, 6vw, 64px) + 56px);
  }
}
@media (min-width: 960px) {
  #body_wrap.post-type-archive-works .l-mainContent__inner > .c-pageTitle {
    padding-bottom: 20px;
    margin-bottom: calc(clamp(40px, 6vw, 64px) + 38px);
  }
}
@media (min-width: 960px) {
  #body_wrap.post-type-archive-works > .p-breadcrumb {
    transform: translateY(360px);
  }
}

/* ==========================================================
 * 41. 会社概要の施工エリア（築さん 10/9 依頼。アオイエペイント様の「対応エリア」の形）
 *
 *    夕景の写真（company-area-bg.jpg）を背景に、PCは右側だけ暗く透かして文字を重ねる。
 *    スマホは写真全体を暗くして、その上に文字を置く。
 * ========================================================== */
#body_wrap .post_content .sp-area {
  position: relative;
  display: flex;
  justify-content: flex-end;
  width: 100vw;
  max-width: 100vw;
  min-height: 440px;
  margin: 0 calc(50% - 50vw) clamp(40px, 6vw, 64px);
  background: #2b2f2a url("/wp-content/uploads/2026/10/company-area-bg.jpg") 25% 50% / cover no-repeat;
  color: #fff;
  overflow: hidden;
}
#body_wrap .post_content .sp-area__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 48px 24px;
  background: rgba(18, 22, 18, 0.58);
}
#body_wrap .post_content .sp-area p {
  margin: 0;
  color: #fff;
}
#body_wrap .post_content h2.sp-area__title {
  display: grid;
  justify-items: start;
  margin: 0 0 28px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: #fff;
  text-align: left;
}
#body_wrap .post_content h2.sp-area__title::before,
#body_wrap .post_content h2.sp-area__title::after {
  content: none;
}
#body_wrap .post_content .sp-area__en {
  grid-area: 1 / 1;
  font-family: var(--d-en);
  font-size: clamp(56px, 9vw, 110px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.2);
  user-select: none;
}
#body_wrap .post_content .sp-area__ja {
  grid-area: 1 / 1;
  align-self: end;
  position: relative;
  margin-bottom: -0.15em;
  font-family: var(--d-serif);
  font-size: clamp(21px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
}
#body_wrap .post_content .sp-area .sp-area__lead {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  font-family: var(--d-serif);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: 0.1em;
}
#body_wrap .post_content .sp-area .sp-area__list {
  margin-bottom: 20px;
  font-size: 15px;
  letter-spacing: 0.06em;
  line-height: 2;
}
#body_wrap .post_content .sp-area__list i {
  margin: 0 0.35em;
  font-style: normal;
  opacity: 0.6;
}
/* 6地域を3つずつのまとまりにし、行頭に「｜」が来ないようにする（スマホは2行） */
#body_wrap .post_content .sp-area__grp {
  white-space: nowrap;
}
@media (max-width: 767px) {
  #body_wrap .post_content .sp-area__grp {
    display: block;
  }
  #body_wrap .post_content .sp-area__mid {
    display: none;
  }
}
#body_wrap .post_content .sp-area .sp-area__catch {
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
#body_wrap .post_content .sp-area .sp-area__note {
  font-size: 14px;
  letter-spacing: 0.04em;
  opacity: 0.9;
}
@media (min-width: 768px) {
  #body_wrap .post_content .sp-area {
    min-height: 480px;
    background-position: 30% 50%;
  }
  #body_wrap .post_content .sp-area__panel {
    width: 56%;
    padding: 64px clamp(32px, 6vw, 96px);
    background: rgba(18, 22, 18, 0.55);
  }
}

/* ==========================================================
 * 42. グローバルメニューを2段に（築さん 10/11 依頼。小倉建築計画工房様の形）
 *
 *    1段目：TOP／お知らせ／初めてのお客様へ／業務内容／施工事例
 *    2段目：技術と施工へのこだわり／会社概要／ブログ／お問い合わせ／プライバシーポリシー
 *    メニューの並びを変えたら、6番目の項目から2段目になる（nth-child(n+6)）。
 *    追従ヘッダーのメニューも同じ2段になる。
 * ========================================================== */
@media (min-width: 960px) {
  .c-gnav {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: center;
    row-gap: 2px;
  }
  .c-gnav > .menu-item {
    order: 0;
    height: auto; /* SWELLは項目の高さを100%にしているため、2段にすると縦にはみ出す */
  }
  .c-gnav > .menu-item:nth-child(n+6) {
    order: 2;
  }
  /* 5番目と6番目の間で改行する */
  .c-gnav::after {
    content: "";
    flex-basis: 100%;
    height: 0;
    order: 1;
  }
  .c-gnav > .menu-item > a {
    height: auto;
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

/* ==========================================================
 * 43. PCのヘッダーを写真の上に透かして重ねる（築さん 10/11 依頼。小倉建築計画工房様の形）
 *
 *    写真で始まるページ（トップ、タイトル帯のあるページ、施工事例の一覧）だけ、
 *    PC（960px以上）でヘッダーを白の半透明にして写真の上に重ねる。
 *    写真が上に回り込む分、タイトル帯はヘッダーの高さ（--sp-hh）だけ高くし、文字の位置は保つ。
 *    スマホ、追従ヘッダー、帯の無いページ（投稿の個別ページなど）は今までどおり。
 * ========================================================== */
@media (min-width: 960px) {
  #body_wrap {
    --sp-hh: 126px;
    position: relative;
  }
  #body_wrap.home > .l-header,
  #body_wrap.post-type-archive-works > .l-header,
  #body_wrap:has(.l-topTitleArea) > .l-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    height: var(--sp-hh);
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: none;
  }
  /* トップの写真：ヘッダーの分だけ高くし、写真と文字の見え方は今までと同じにする（SWELLの設定は35vw） */
  #body_wrap.home .p-mainVisual.-height-set .p-mainVisual__inner {
    height: calc(35vw + var(--sp-hh));
  }
  #body_wrap.home .p-mainVisual__textLayer {
    padding-top: var(--sp-hh);
  }
  /* 固定ページ・カテゴリー一覧のタイトル帯 */
  #body_wrap:has(.l-topTitleArea) .l-topTitleArea {
    height: calc(360px + var(--sp-hh));
    padding-top: var(--sp-hh);
  }
  /* 施工事例の一覧の帯（h1） */
  #body_wrap.post-type-archive-works .l-mainContent__inner > .c-pageTitle {
    height: calc(360px + var(--sp-hh));
    padding-top: var(--sp-hh);
  }
  #body_wrap.post-type-archive-works > .p-breadcrumb {
    transform: translateY(calc(360px + var(--sp-hh)));
  }
}

/* ==========================================================
 * 44. お知らせとブログを分けた一覧（築さん 10/11 依頼）
 *
 *    投稿はカテゴリー「お知らせ」（news、ID 1）と「ブログ」（blog、ID 5）に分ける。
 *    メニューは /category/news/ と /category/blog/ へ。
 *    トップのお知らせ欄は、ウィジェット「トップページ上部」の最新の投稿ブロック（block-5、お知らせのみ）。
 * ========================================================== */
#body_wrap.category-news .l-topTitleArea .c-pageTitle::before { content: "NEWS"; }
#body_wrap.category-blog .l-topTitleArea .c-pageTitle::before { content: "BLOG"; }

/* トップのお知らせ欄の日付（32番の見た目に合わせる） */
.home .sp-news .wp-block-latest-posts__list {
  margin: 0;
  padding: 0;
  border: 0;
}
.home .sp-news .wp-block-latest-posts__post-date {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: #999;
}

/* ==========================================================
 * 45. トップの「施工の流れ」「よくあるご質問」の抜粋（築さん 10/11 依頼。小倉建築計画工房様の形）
 *
 *    トップの緑の帯の手前に置いた2つ。中身は業務内容・初めてのお客様へからの写し。
 *    「詳しくはこちら」は /service/#flow と /first/#faq へ。
 * ========================================================== */
@media (min-width: 768px) {
  #body_wrap .post_content .sp-flow--excerpt .sp-flow__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
  }
}
#body_wrap .post_content .sp-more {
  margin: 2.4em 0 0;
  text-align: center;
}
#body_wrap .post_content .sp-more a {
  display: inline-block;
  min-width: 200px;
  padding: 0 1em 0.5em;
  border-bottom: 1px solid #999;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  color: #555;
  text-decoration: none;
}
#body_wrap .post_content .sp-more a::after {
  content: " →";
}
#body_wrap .post_content .sp-faq-excerpt {
  margin-top: clamp(56px, 8vw, 96px);
  margin-bottom: clamp(56px, 8vw, 96px);
}
/* ページ内リンクで飛んだとき、見出しがヘッダーに隠れないようにする */
#flow,
#faq {
  scroll-margin-top: 120px;
}

/* ==========================================================
 * 46. 「現地調査・お見積もりは無料です」の枠を全ページでトップと同じに（築さん 10/13 依頼）
 *
 *    下層ページ（46・48・50・52）の枠も、トップと同じ全幅の帯（.sp-cta）に差し替えた。
 *    8番の .home 限定の指定を、全ページに広げる。文言を変えるときは5ページすべてを直す。
 * ========================================================== */
#body_wrap .post_content .sp-cta {
  background: var(--d-dark);
  padding: clamp(48px, 7vw, 84px) clamp(20px, 5vw, 48px);
  text-align: center;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
#body_wrap .post_content .sp-cta p {
  color: rgba(255, 255, 255, 0.9);
}
#body_wrap .post_content .sp-cta__lead {
  font-family: var(--d-serif);
  font-size: clamp(1.2rem, 3.2vw, 1.6rem);
  line-height: 1.8;
  letter-spacing: 0.08em;
  color: #FFFFFF;
  margin-bottom: 0.8em;
}
/* 下層ページでは、帯の下にすぐフッターが来ないよう少し空ける */
#body_wrap:not(.home) .post_content > .sp-cta:last-child {
  margin-bottom: clamp(48px, 7vw, 80px);
}

/* ==========================================================
 * 47. スマホのヘッダーを半透明に（築さん 10/13 依頼。小倉建築計画工房様のスマホの形）
 *
 *    スマホ・タブレット（959px以下）のヘッダーは、SWELLの設定でスクロールしても上についてくる（sticky）。
 *    その背景を白の半透明＋ぼかしにして、下の写真や文字が透けて見えるようにする。
 * ========================================================== */
@media (max-width: 959px) {
  #body_wrap > .l-header {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: none;
  }
}

/* ==========================================================
 * 48. 全ページの背景をトップと同じ生成りに（築さん 10/13 依頼）
 *
 *    これまで生成りはトップだけ（2番・18番）。下層ページ・一覧・投稿も同じ色にする。
 *    ヘッダーとフッターは今までどおり（白）。
 * ========================================================== */
#body_wrap {
  background-color: #F7F4EC;
}

/* ==========================================================
 * 49. SWELLのメインカラー（紺）を深緑にそろえる
 *
 *    SWELLの設定のメインカラー（#04384c）が、スマホ開閉メニューの「MENU」の帯、
 *    下層ページの帯付きの見出し、表の見出しセル、ページ送り、カテゴリーのラベル等に残っていた。
 *    変数を body で上書きし、配色の --d-dark（#364238）にそろえる。
 *    SWELLの設定（カスタマイザー）は変えていないので、外せば元の紺に戻る。
 * ========================================================== */
body {
  --color_main: #364238;
  --color_main_thin: rgba(68, 82, 70, 0.05);
  --color_main_dark: rgba(41, 50, 42, 1);
  --color_htag: #364238;
  --color_list_check: #364238;
  --color_list_num: #364238;
}

/* 一覧のサムネイルに載るカテゴリーのラベルは、SWELLが色を直接書いているため個別に指定 */
body .c-postThumb__cat {
  background-color: #364238;
}

/* ==========================================================
 * 50. スマホのヘッダーをロゴ左・メニュー右に（築さん 10/14 依頼）
 *
 *    SWELLの設定で、スマホのヘッダーを「ロゴ：左 / メニュー：右」、検索ボタンを「表示しない」に変更した。
 *    ロゴが画面の左端に寄りすぎるため、右のメニューボタンとつり合う余白を左に取る。
 *    検索ボタンの空の枠も消す。新しいロゴが届いたら差し替える。
 * ========================================================== */
@media (max-width: 959px) {
  #header .l-header__logo {
    padding-left: 16px;
  }
  #header .l-header__customBtn:not(:has(*)) {
    display: none;
  }
}

/* ==========================================================
 * 51. 技術と施工へのこだわりの各項目（築さん 10/16 依頼）
 *
 *    業務内容の「お家の劣化状況をチェック」（37番）と同じ sp-check の並びにした。PCは文章が左、写真が右。
 *    項目ごとに段落が複数あり、箇条書きを含むものもあるため、段落と箇条書きの間隔だけ足す。
 * ========================================================== */
#body_wrap .post_content .sp-check--quality .sp-check__body p + p,
#body_wrap .post_content .sp-check--quality .sp-check__body ul + p {
  margin-top: 1em;
}

#body_wrap .post_content .sp-check--quality .sp-check__body ul {
  margin: 1em 0;
}

/* ==========================================================
 * 52. PCの追従ヘッダーも白の半透明に（築さん 10/19 依頼）
 *
 *    下にスクロールすると出る追従ヘッダー（#fix_header）は、SWELLの既定で白（#fdfdfd）の不透明。
 *    写真の上のヘッダー（43番）と同じ、白72%＋ぼかしにそろえる。スマホは47番のまま。
 * ========================================================== */
@media (min-width: 960px) {
  #fix_header::before {
    background-color: #fff;
    opacity: 0.72;
  }
  #fix_header {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}