@charset "utf-8";
/* [2026-08-10] housing準拠の番号バッジ用フォント（Jost） */
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@700&display=swap");
/* ==========================================================
   works.css ／ 施工事例ページ専用（v5）
   - W1: FV下のタグアイコン表示は HTML側で hidden 属性で非表示
   - W2: ご相談の流れ（5ステップ）の SP時もフロー図的表現
========================================================== */

/*------------------------------------
W2: process-steps（5ステップ）— PCは横並び5列／SPはフロー図
------------------------------------*/
.process-steps{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
  margin-top:32px;
}

@media (min-width:768px){
  .process-step{
    background:#fff;
    border:1px solid var(--line);
    border-top:4px solid var(--o);
    padding:24px 20px;
    border-radius:2px;
    position:relative;
  }
  .process-step .step-num{
    font-family:var(--en);
    font-size:11px;
    letter-spacing:.18em;
    color:var(--o-deep);
    font-weight:700;
    margin:0 0 12px;
    text-transform:uppercase;
  }
  .process-step .step-body h4{
    font-family:var(--serif);
    font-size:17px;
    color:var(--ink);
    font-weight:700;
    line-height:1.5;
    margin:0 0 8px;
  }
  .process-step .step-body p{
    font-size:13px;
    color:var(--ink-soft);
    line-height:1.85;
    margin:0;
  }
  /* 矢印（次のステップへ） */
  .process-step:not(:last-child)::after{
    content:"›";
    position:absolute;
    top:50%;
    right:-14px;
    transform:translateY(-50%);
    color:var(--o);
    font-size:22px;
    line-height:1;
    z-index:2;
    font-weight:700;
  }
}

@media (max-width:1024px) and (min-width:768px){
  .process-steps{grid-template-columns:repeat(3,1fr);gap:24px}
  .process-step:not(:last-child)::after{display:none}
}

@media (max-width:767px){
  .process-steps{
    grid-template-columns:1fr;
    gap:0;
    counter-reset:worksflow;
  }
  .process-step{
    background:#fff;
    border:1px solid var(--line);
    padding:18px 18px 18px 64px;
    border-radius:6px;
    position:relative;
    margin-bottom:32px;
    counter-increment:worksflow;
  }
  .process-step::before{
    content:counter(worksflow,decimal-leading-zero);
    position:absolute;
    left:14px;
    top:18px;
    width:36px;
    height:36px;
    background:var(--o);
    color:#fff;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-family:var(--en);
    font-size:13px;
    font-weight:700;
    letter-spacing:.04em;
    box-shadow:0 4px 10px rgba(232,154,46,.3);
  }
  .process-step:not(:last-child)::after{
    content:"▼";
    position:absolute;
    left:24px;
    bottom:-26px;
    color:var(--o);
    font-size:12px;
    line-height:1;
    z-index:2;
  }
  .process-step .step-num{display:none}
  .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;
  }
  .process-step .step-body p{
    font-size:13px;
    color:var(--ink-soft);
    line-height:1.85;
    margin:0;
  }
}

/* ----------------------------------------------------------
   [v5 Take氏FB 2026-06-25 → 2026-06-26 補強 → 2026-08-10 改訂]
   process-steps--flow（works）— housing「家づくりの流れ」の
   コンパクト版デザイン（housing.css H6）に統一。
   ・3カラム化はせず、縦フローのまま（クライアント指示）
   ・カード：白地＋var(--line)細枠＋角丸4px（左のオレンジ帯は廃止）
   ・番号バッジ：40px→28px 丸・Jost・decimal-leading-zero
   ・矢印：「▼」文字 → housingと同じ山括弧（border回転）を左右中央に
   ・max-width（旧820px）は不要のため削除（クライアント指示）
   ・common.css の .process-step{display:grid; 80px 1fr} 打ち消しは維持
---------------------------------------------------------- */
.process-steps.process-steps--flow{
  display:flex !important;
  flex-direction:column;
  gap:0;
  counter-reset:worksflow2;
  margin:32px 0 0;
  padding:0;
  list-style:none;
  /* [2026-08-10] common.css v8 で .process-steps に追加された
     border-top:1px solid rgba(0,0,0,.1) を打ち消す（フロー上部の線対策） */
  border:none !important;
  border-top:none !important;
}
.process-steps.process-steps--flow .process-step{
  /* common.css の grid を打ち消す */
  display:block;
  grid-template-columns:none;
  background:#fff;
  border:1px solid var(--line);
  border-top:1px solid var(--line);
  border-radius:4px;
  padding:14px 18px 14px 54px;
  position:relative;
  margin-bottom:20px;
  counter-increment:worksflow2;
}
.process-steps.process-steps--flow .process-step .step-body{
  display:block;
  width:100%;
}
.process-steps.process-steps--flow .process-step::before{
  content:counter(worksflow2,decimal-leading-zero);
  position:absolute;
  left:14px;
  top:14px;
  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;
  box-shadow:none;
}
/* housingと同じ山括弧矢印（下向き・左右中央） */
.process-steps.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.process-steps--flow .process-step:last-child::after{
  content:none;
}
.process-steps.process-steps--flow .process-step .step-num{
  display:none;
}
.process-steps.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;
  white-space:normal;
  word-break:normal;
}
.process-steps.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;
}
/* SP：housing SP版と同じ縮小フロー */
@media (max-width:767px){
  .process-steps.process-steps--flow{
    margin-top:24px;
  }
  .process-steps.process-steps--flow .process-step{
    padding:12px 14px 12px 50px;
    margin-bottom:20px;
  }
  .process-steps.process-steps--flow .process-step::before{
    left:12px;
    top:12px;
    font-size:10.5px;
  }
  .process-steps.process-steps--flow .process-step .step-body h4{
    font-size:13.5px;
    margin:0 0 3px;
  }
  .process-steps.process-steps--flow .process-step .step-body p{
    font-size:11.5px;
  }
}

/*------------------------------------
[2026-08-10] W3: voice-list（#voices お客様の声）
   ・PC（1024px〜）：3つの .voice を3カラム表示
   ・カード構成：common.css の「写真左（220px）・テキスト右」2カラムを
     打ち消し、「写真上（丸・中央）→ テキスト下」の縦積みに変更
   ・旧マークアップのインラインstyle（display:grid;gap:24px）は
     本クラスに移設（archive.php 側を class="voice-list" に変更済み）
------------------------------------*/
.voice-list{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}
.voice-list .voice{
  /* common.css の grid-template-columns:220px 1fr を打ち消して縦積みに */
  grid-template-columns:1fr;
  gap:18px;
  margin:0;
  padding:28px 24px 30px;
  align-content:start;
}
.voice-list .voice-photo{
  width:150px;
  margin:0 auto;
}
@media (min-width:1024px){
  .voice-list{
    grid-template-columns:repeat(3,1fr);
    gap:24px;
  }
}

/* === ページ送り（ニュース／コラムと共通の .col-pg） === */
.col-pg{margin-top:50px;display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.col-pg a,.col-pg span{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(26,22,20,.14);border-radius:4px;color:var(--ink);text-decoration:none;font-family:var(--en);font-size:13px;background:#fff;transition:all .2s}
.col-pg a:hover{border-color:var(--o);color:var(--o)}
.col-pg .is-current{background:var(--o);color:#fff;border-color:var(--o)}
.col-pg .arrow{padding:0 16px;width:auto}