@charset "utf-8";
/* [v6] .why-num 用の丸みのある幾何学サンセリフ（Jost） */
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@700&display=swap");
/* ==========================================================
   housing.css ／ 家づくりページ専用（v5）
   - H1: .pillar-grid をSP時カルーセル化
   - H2: （廃止）→ H6 コンパクト版に統合
   - H3: オペ防波堤・補助金セクションは HTML側で hidden 属性で非表示
========================================================== */
/*------------------------------------
H1: pillar-grid のSPカルーセル化（共通ルール準拠）
------------------------------------*/
@media (max-width:767px){
  .pillar-grid{
    display:flex;
    flex-direction:row;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:14px;
    padding:0 var(--gutter) 18px;
    margin:0 calc(-1 * var(--gutter));
    scroll-padding:0 var(--gutter);
    scrollbar-width:thin;
    scrollbar-color:rgba(232,154,46,.4) transparent;
  }

  .pillar-grid::-webkit-scrollbar{
    display:block;
    height:4px;
  }
  .pillar-grid::-webkit-scrollbar-track{
    background:rgba(0,0,0,.04);
  }
  .pillar-grid::-webkit-scrollbar-thumb{
    background:rgba(232,154,46,.45);
    border-radius:2px;
  }
  .pillar-grid .pillar{
    flex:0 0 80%;
    max-width:80%;
    scroll-snap-align:start;
  }
}

/*------------------------------------
H1-2: 3つのサービス（#services）の .pillar 上揃え
  共通ルール（common.css）では .pillar-meta { margin-top:auto } で
  メタを下端に吸着させているが、本ページはリンク有無がカードごとに
  異なる（01・03はリンク外し）ため、下揃えだとメタ位置がずれて見える。
  → #services 内のみ margin-top を解除し、説明文直後に上から積む。
------------------------------------*/
#services .pillar .pillar-meta{
  margin-top: 0;
}

/*------------------------------------
H1-3: カード全体リンク化（02 リフォーム）
  画像クリックでの離脱防止のため、カード自体を <a class="pillar"> に変更。
  内側の .pillar-link は a入れ子回避のため <span> に変更（見た目は共通ルールを継承）。
  01・03 は遷移先ページ非公開のため <article> のまま（公開時は同様に a へ差し替え）。
------------------------------------*/
#services a.pillar{
  color: inherit;
  text-decoration: none;
}
#services a.pillar:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0,0,0,.10);
}
#services a.pillar:hover .pillar-link{
  gap: 12px;
}

/*------------------------------------
H1-4: .pillar-img の白スキマ解消（詰める）
  common.css の .pillar padding（PC 36px 30px／SP 28px 22px）に対し、
  .pillar-img のネガティブマージン（PC -28px -26px／SP -22px -22px）が
  一致しておらず、画像の上8px・左右4px（SP 上6px）に白い縁が出ていた。
  → padding と同値のネガティブマージンでカード縁までフルブリードに統一。
  ※ブレークポイントは common.css の .pillar padding 側（768px）に合わせる。
------------------------------------*/
#services .pillar .pillar-img{
  margin: -36px -30px 22px;
}
@media (max-width:768px){
  #services .pillar .pillar-img{
    margin: -28px -22px 18px;
  }
}

/*------------------------------------
[v5 Take氏FB 2026-06-25／v6 2026-07-31 装飾強化]
H4: oldwood-blocks — 古材を活かす家づくり
       小見出し + 1画像 形式（3ブロック）
   v6装飾：
   ・写真に敷き紙（--o-tint ズラし）＋カギ括弧の飾り罫（額装風）
   ・h3を24pxへ拡大＋見出し下に2色アクセントライン
------------------------------------*/
.oldwood-blocks{
  display:grid;
  grid-template-columns:1fr;
  gap:72px;
  max-width:960px;
  margin:32px auto 0;
}

.oldwood-block{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:44px;
  align-items:center;
}

.oldwood-block:nth-child(even){
  grid-template-columns:1.2fr 1fr;
}

.oldwood-block:nth-child(even) .oldwood-img{
  order:2;
}
.oldwood-block:nth-child(even) .oldwood-body{
  order:1;
}

/* 写真：敷き紙＋カギ括弧（overflow:hidden は疑似要素が切れるため使用しない） */
.oldwood-img{
  margin:0;
  aspect-ratio:4 / 3;
  border-radius:2px;
  position:relative;
  background:transparent;
}

/* 敷き紙（奇数：右下へ／偶数：左下へずらす） */
.oldwood-img::before{
  content:"";
  position:absolute;
  inset:14px -14px -14px 14px;
  background:var(--o-tint,#FBEBD3);
  border-radius:2px;
  z-index:0;
}
.oldwood-block:nth-child(even) .oldwood-img::before{
  inset:14px 14px -14px -14px;
}

.oldwood-img img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:2px;
  box-shadow:0 10px 28px rgba(42,38,32,.10);
}

/* 角の飾り罫（奇数：左上／偶数：右上） */
.oldwood-img::after{
  content:"";
  position:absolute;
  top:-10px;
  left:-10px;
  width:34px;
  height:34px;
  border-top:2px solid var(--o,#E89A2E);
  border-left:2px solid var(--o,#E89A2E);
  z-index:2;
}
.oldwood-block:nth-child(even) .oldwood-img::after{
  left:auto;
  right:-10px;
  border-left:none;
  border-right:2px solid var(--o,#E89A2E);
}

.oldwood-body h3{
  font-family:var(--serif);
  font-size:24px;
  font-weight:700;
  color:var(--ink);
  margin:0 0 16px;
  line-height:1.5;
  letter-spacing:.04em;
  position:relative;
  padding-bottom:14px;
}

/* 見出し下の2色アクセントライン */
.oldwood-body h3::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:44px;
  height:2px;
  background:linear-gradient(90deg, var(--o,#E89A2E) 0 60%, var(--o-soft,#F3CE9A) 60% 100%);
}

.oldwood-body p{
  font-size:14.5px;
  line-height:1.95;
  color:var(--ink-soft);
  margin:0;
}

@media (max-width:767px){
  .oldwood-blocks{
    gap:56px;
  }
  .oldwood-block,
  .oldwood-block:nth-child(even){
    grid-template-columns:1fr;
    gap:26px;
  }

  .oldwood-block:nth-child(even) .oldwood-img{
    order:0;
  }
  .oldwood-block:nth-child(even) .oldwood-body{
    order:0;
  }

  /* SPは敷き紙・カギ括弧とも左右交互をやめて統一 */
  .oldwood-img::before,
  .oldwood-block:nth-child(even) .oldwood-img::before{
    inset:10px -10px -10px 10px;
  }
  .oldwood-img::after,
  .oldwood-block:nth-child(even) .oldwood-img::after{
    top:-8px;
    left:-8px;
    right:auto;
    width:26px;
    height:26px;
    border-top:2px solid var(--o,#E89A2E);
    border-left:2px solid var(--o,#E89A2E);
    border-right:none;
  }

  .oldwood-body h3{
    font-size:19px;
    margin-bottom:12px;
    padding-bottom:12px;
  }
  .oldwood-body p{
    font-size:14px;
    line-height:1.9;
  }
}

/*------------------------------------
H5: faq-accordion — FAQ抜粋
[v8 2026-08-06] page-faq と共用になったため common.css へ移設（§6-4）。
Qバッジ（旧faq.css .q-mark）を統合した共通コンポーネント版を参照。
------------------------------------*/

/*------------------------------------
[v7 2026-07-31]
H6: process-steps--flow — コンパクト版
   ・PC：3カラム×2段＋横方向の山括弧矢印（縦幅を圧縮）
   ・SP：縮小フロー（バッジ・文字を小さく）＋
         PCと同デザインの下向き矢印を左右中央に配置
   ・common.css 由来の border-top／grid（80px 1fr）等は
     本ブロックで明示的に打ち消す（旧H2ブロックは廃止済み）
------------------------------------*/
.process-steps--flow{
  /* common.css 由来の指定をまとめて打ち消す */
  border:none !important;
  border-top:none !important;
  padding:0 !important;
  margin:32px 0 0;
  counter-reset:housingflow;
  list-style:none;
}

.process-steps--flow .process-step{
  border:1px solid var(--line,#e6e2d8);  /* border-top含め四辺を明示指定で上書き */
  background:#fff;
  border-radius:4px;
  position:relative;
  counter-increment:housingflow;
  list-style:none;
}

/* common.css / 旧スタイル由来の疑似要素・レイアウトを無効化 */
.process-steps--flow .process-step .step-num{
  display:none;
}
.process-steps--flow .process-step .step-body{
  display:block;
  width:100%;
  position:static;
}
.process-steps--flow .process-step .step-body::after{
  content:none !important;
}

/* ---------- PC：3カラム×2段 ---------- */
@media (min-width:768px){
  .process-steps--flow{
    display:grid !important;
    grid-template-columns:repeat(3, 1fr);
    gap:22px 28px;
    max-width:none;
  }

  .process-steps--flow .process-step{
    display:block;
    grid-template-columns:none;
    padding:16px 18px 14px;
    margin:0;
  }

  /* 旧・カード左上の丸バッジは使わない（見出し行頭に移設） */
  .process-steps--flow .process-step::before{
    content:none;
  }

  /* 番号バッジ＋見出しを1行に（縦幅圧縮） */
  .process-steps--flow .process-step .step-body h4{
    font-family:var(--serif);
    font-size:15px;
    color:var(--ink);
    font-weight:700;
    line-height:1.5;
    margin:0 0 6px;
    padding-left:38px;
    position:relative;
    min-height:28px;
    display:flex;
    align-items:center;
    white-space:normal;
    word-break:normal;
  }
  .process-steps--flow .process-step .step-body h4::before{
    content:counter(housingflow,decimal-leading-zero);
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:28px;
    height:28px;
    background:var(--o,#E89A2E);
    color:#fff;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-family:"Jost", var(--en), sans-serif;
    font-size:11px;
    font-weight:700;
    letter-spacing:.03em;
  }

  .process-steps--flow .process-step .step-body p{
    font-size:12px;
    color:var(--ink-soft);
    line-height:1.7;
    margin:0;
    white-space:normal;
    word-break:normal;
  }

  /* 横方向の山括弧矢印（各段の1→2、2→3のみ） */
  .process-steps--flow .process-step:nth-child(3n+1)::after,
  .process-steps--flow .process-step:nth-child(3n+2)::after{
    content:"";
    position:absolute;
    top:50%;
    right:-19px;
    bottom:auto;
    left:auto;
    width:10px;
    height:10px;
    background:none;
    border:none;
    border-top:2px solid var(--o,#E89A2E);
    border-right:2px solid var(--o,#E89A2E);
    transform:translateY(-50%) rotate(45deg);
    z-index:2;
  }
  .process-steps--flow .process-step:nth-child(3n)::after{
    content:none;
  }
}

/* ---------- SP：縮小フロー（縦） ---------- */
@media (max-width:767px){
  .process-steps--flow{
    display:flex !important;
    flex-direction:column;
    gap:0;
    margin-top:24px;
  }

  .process-steps--flow .process-step{
    display:block;
    grid-template-columns:none;
    padding:12px 14px 12px 50px;
    margin-bottom:20px;
  }

  .process-steps--flow .process-step::before{
    content:counter(housingflow,decimal-leading-zero);
    position:absolute;
    left:12px;
    top:12px;
    width:28px;
    height:28px;
    background:var(--o,#E89A2E);
    color:#fff;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-family:"Jost", var(--en), sans-serif;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.03em;
    box-shadow:none;
  }

  /* PCと同じ山括弧矢印を、下向き・左右中央に配置 */
  .process-steps--flow .process-step:not(:last-child)::after{
    content:"";
    position:absolute;
    left:50%;
    right:auto;
    bottom:-16px;
    top:auto;
    width:10px;
    height:10px;
    background:none;
    border:none;
    border-top:2px solid var(--o,#E89A2E);
    border-right:2px solid var(--o,#E89A2E);
    transform:translateX(-50%) rotate(135deg);
    z-index:2;
  }
  .process-steps--flow .process-step:last-child::after{
    content:none;
  }

  .process-steps--flow .process-step .step-body h4{
    font-family:var(--serif);
    font-size:13.5px;
    color:var(--ink);
    font-weight:700;
    line-height:1.5;
    margin:0 0 3px;
    white-space:normal;
    word-break:normal;
  }
  .process-steps--flow .process-step .step-body p{
    font-size:11.5px;
    color:var(--ink-soft);
    line-height:1.7;
    margin:0;
    white-space:normal;
    word-break:normal;
  }
}

/*------------------------------------
[v6 2026-07-31]
H7: why-grid — 「選ばれる4つの理由」新デザイン
   ・2×2グリッド化（4項目の孤立問題を解消）
   ・「3つのサービス」（写真カード）と差別化した
     タイポグラフィ主体カード＋裏付けチップ
   ・SPは1カラム縦積み（カルーセル不使用）
------------------------------------*/
.why-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:28px;
}

.why-card{
  position:relative;
  background:#fff;
  border:1px solid var(--line,#e6e2d8);
  border-radius:2px;
  padding:36px 32px 30px;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(42,38,32,.08);
}

/* 上辺のアクセントライン */
.why-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:56px;
  height:3px;
  background:var(--o,#E89A2E);
}

/* 大きな透かし番号 */
.why-num{
  position:absolute;
  top:6px;
  right:18px;
  font-family:"Jost", var(--en), sans-serif;
  font-weight:700;
  font-size:88px;
  line-height:1;
  color:var(--o-tint,#FBEBD3);
  letter-spacing:.02em;
  user-select:none;
  pointer-events:none;
}

.why-sub{
  position:relative;
  font-family:var(--en);
  font-size:11px;
  font-weight:500;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--o-deep,#C9821A);
  margin:0 0 10px;
}

.why-ttl{
  position:relative;
  font-family:var(--serif);
  font-size:21px;
  font-weight:700;
  line-height:1.55;
  color:var(--ink);
  letter-spacing:.04em;
  margin:0 0 14px;
}

.why-desc{
  position:relative;
  font-size:14px;
  line-height:1.95;
  color:var(--ink-soft);
  margin:0 0 18px;
}

/* 裏付けチップ（旧 pillar-meta 相当） */
.why-creds{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  gap:6px 8px;
  margin:0;
  padding:14px 0 0;
  border-top:1px dotted var(--line,#e6e2d8);
  list-style:none;
}
.why-creds li{
  font-size:11.5px;
  line-height:1.5;
  letter-spacing:.04em;
  color:var(--ink-soft);
  background:#F6F2E9;
  border:1px solid var(--line,#e6e2d8);
  border-radius:999px;
  padding:5px 12px;
}

/* SP：1カラム縦積み */
@media (max-width:767px){
  .why-grid{
    grid-template-columns:1fr;
    gap:16px;
  }
  .why-card{
    padding:28px 22px 24px;
  }
  .why-num{
    font-size:68px;
    top:8px;
    right:14px;
  }
  .why-ttl{
    font-size:18px;
  }
  .why-desc{
    font-size:13.5px;
  }
}

/*------------------------------------
[v6 2026-08-04 整理] common.css から移設：
同ページ内CTA（in-page-cta）＋ faq-more
使用ページが housing のみのため page別CSS へ（§6-4）
------------------------------------*/
.in-page-cta{
  background: var(--bg);
  padding: 56px 48px;
  text-align: center;
  border-top: 1px solid rgba(0,0,0,.08);
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.in-page-cta h3{
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 16px;
  letter-spacing: .02em;
}

.in-page-cta p{
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.95;
  color: rgba(0,0,0,.72);
  max-width: 560px;
  margin: 0 auto 28px;
}

/* FAQ抜粋など：セクション下部の中央寄せボタン */
.faq-more{
  margin-top:32px;
  text-align:center;
}

.in-page-cta .btns{
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* [v8 2026-08-06] .btn-primary（オレンジピル）は廃止。
   PC時に .project-link（角箱）との混在でバランスが崩れるため、
   in-page-cta のボタンは2本とも .project-link に統一
   （無料相談＝ .project-link--orange ／ 空き家再生＝デフォルトkoke） */
.in-page-cta .btns .project-link{
  margin-top:0;                  /* .in-page-cta p の下余白（28px）があるため */
}
/* [v8 2026-08-06] .btn-secondary（ピル型）は廃止。
   in-page-cta / faq-more の一覧ボタンは common.css の .project-link へ統一 */
/* in-page-cta（空き家再生への導線）は .project-link デフォルトの koke 緑のまま。
   FAQ一覧への導線はオレンジに（--pl-main/--pl-deep は common.css 参照） */
.faq-more .project-link{
  --pl-main: var(--o);
  --pl-deep: var(--o-deep);
  margin-top:0;                  /* .faq-more 側の margin-top:32px と重複するため */
}


@media (max-width: 768px){
  .in-page-cta{
    padding: 40px 24px;
  }
}