@charset "utf-8";
/* [v6] 番号バッジ用フォント（housing.css の process-steps--flow と統一） */
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@700&display=swap");
/* ==========================================================
   akiya-project.css ／ 空き家再生プロジェクトページ専用（v8）
   - A1: .pillar-grid SPカルーセル化（common.css の汎用ルールで対応）
   - A2: 補助金完全ガイドセクションは HTML側で hidden 属性で非表示
   - A3: （v6で削除）タブUI廃止に伴いデッドコード整理済み
   - A4: 技能実習生セクションの .pillar-grid もカルーセル化（共通ルール適用）
   - A14: [v7] flow-dual-lead のセリフにマーカー風アンダーライン
   - A15: [v8] A12（#media カード）を common.css v6 へ昇格し削除（about B10 と統合。紙面サムネイルは common 側）
========================================================== */
/*------------------------------------
[v6 2026-08-04 整理]
A3（タブUI .tabs / .tab-btn / .tab-pane と .tab-pane 配下の
process-steps スタイル）は、v5 の A5 flow-dual 化でタブUIを
廃止しテンプレート側にマークアップが存在しないため削除。
------------------------------------*/

/*------------------------------------
[v5 Take氏FB 2026-06-25]
A5: flow-dual — タブUIを廃止し、2フローを並列表示
------------------------------------*/
.flow-dual{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  margin-top:24px;
}

.flow-dual-col{
}
.flow-dual-h{
  font-family:var(--serif);
  font-size:18px;
  font-weight:700;
  color:var(--ink);
  line-height:1.5;
  letter-spacing:.04em;
  padding:10px 14px;
  background:var(--o,#E89A2E);
  color:#fff;
  border-radius:2px;
  margin:0 0 14px;
  text-align:center;
}

.flow-dual-lead{
  font-size:13.5px;
  line-height:1.9;
  color:var(--ink-soft);
  margin:0 0 20px;
}

.flow-dual-lead strong{
  font-weight:700;
  color:var(--ink);
}

@media (max-width:900px){
  .flow-dual{
    grid-template-columns:1fr;
    gap:48px;
  }

  .flow-dual-h{
    font-size:16px;
  }
}

/*------------------------------------
[v7 2026-08-05] A14: lead-marker — flow-dual-lead 冒頭の
   セリフ（「実家が空き家で困っている」等）にマーカー風アンダーライン。
   読者の声＝共感フックとして、後続の本文（当社からの応答）より
   一段目立たせる。太字・墨色は .flow-dual-lead strong を継承。
   ※ 色は common.css の --brand-line（rgba(232,154,46,.22)）を
     一段濃くした .28（プレビュー承認値）。淡くする場合は
     var(--brand-line) に差し替え可。
------------------------------------*/
.flow-dual-lead .lead-marker{
  background:linear-gradient(transparent 62%, rgba(232,154,46,.28) 62%);
  padding:0 1px;
}

/*------------------------------------
A6: process-steps--flow（共通） — PCも縦フロー、各カードに番号バッジ＋下矢印
   コンパクトな縦並びフローでタブ廃止後の見やすさを優先
   [v5 Take氏FB 2026-06-26] common.css の .process-step{display:grid;
   grid-template-columns:80px 1fr} を打ち消し、.step-num display:none 時に
   .step-body が 80px カラムに落ち込み縦書き状になる崩れを是正
------------------------------------*/
.process-steps--flow{
  display:flex !important;
  flex-direction:column;
  gap:0;
  counter-reset:akiyaflow;
  padding:0;
  margin:0;
  list-style:none;
  /* [v8.1 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--flow .process-step{
  /* common.css の grid を打ち消す */
  display:block;
  grid-template-columns:none;
  background:#fff;
  border:1px solid var(--line,#e6e2d8);
  padding:14px 16px 14px 52px;
  border-radius:4px;
  position:relative;
  margin-bottom:22px;
  counter-increment:akiyaflow;
  list-style:none;
}

.process-steps--flow .process-step .step-body{
  display:block;
  width:100%;
}

.process-steps--flow .process-step .step-body h4,
.process-steps--flow .process-step .step-body p{
  white-space:normal;
  word-break:normal;
}

/* [v6] バッジ・矢印のデザインを housing.css の .process-steps--flow に統一
   （バッジ：28px・Jost・シャドウなし／矢印：▼テキスト → 山括弧チェブロンを
   カード下・左右中央に配置。3カラム化は行わず縦フローのまま） */
.process-steps--flow .process-step::before{
  content:counter(akiyaflow,decimal-leading-zero);
  position:absolute;
  left:12px;
  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:10.5px;
  font-weight:700;
  letter-spacing:.03em;
  box-shadow:none;
}

.process-steps--flow .process-step:not(:last-child)::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-16px;
  width:10px;
  height:10px;
  background:none;
  /* [v8.1 2026-08-10] common.css v8 のシェブロン（border-right＋border-bottom・
     rotate(45deg)）が混入し3辺ボーダーの崩れた矢印になるため、
     一旦全辺リセットしてから上・右の2辺のみ引き直す */
  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 .step-num{
  display:none;
}

.process-steps--flow .process-step .step-body h4{
  font-family:var(--serif);
  font-size:14.5px;
  color:var(--ink);
  font-weight:700;
  line-height:1.5;
  margin:0 0 6px;
}

.process-steps--flow .process-step .step-body p{
  font-size:12.5px;
  line-height:1.85;
  color:var(--ink-soft);
  margin:0;
}

/*------------------------------------
A7: brand-logo — 継ぐ家（TSUGU-IE）ロゴ（whyセクション内）
   縦長ロゴのため表示幅を抑え、中央配置のブランドマークとして扱う
------------------------------------*/
.brand-logo{
  margin:8px 0 44px;
  text-align:center;
}

.brand-logo img{
  display:inline-block;
  width:auto;
  max-width:200px;
  height:auto;
}

@media (max-width:767px){
  .brand-logo{
    margin:4px 0 36px;
  }
  .brand-logo img{
    max-width:160px;
  }
}

/*------------------------------------
[v6 2026-08-04] A8: btn-story はボタン自体を削除したため撤去
------------------------------------*/

/*------------------------------------
A9: pillar--link — .pillar カード全体をリンク化（画像のリンク誤認防止）
   article→a に変更したため、リンク既定スタイルの打ち消しとホバー演出を付与
   （末尾の .pillar-link は a→span に変更済み。見た目は common.css を継承）
------------------------------------*/
a.pillar--link{
  display:block;
  color:inherit;
  text-decoration:none;
  transition:box-shadow .25s ease,transform .25s ease;
}

a.pillar--link:hover{
  box-shadow:0 10px 28px rgba(0,0,0,.10);
  transform:translateY(-3px);
}

/* [v6] common.css 側の .pillar-link に既に下線があり、hover時に
   text-decoration:underline を重ねると二重下線になるため色変化のみに修正 */
a.pillar--link:hover .pillar-link{
  color:var(--o-deep,#c67f1c);
}

/*------------------------------------
A10: prop-card — 第1号物件「物件概要カード」
   写真とスペック表の単純な縦積みをやめ、
   PC：左 写真（メイン＋サブ2枚）／右 物件概要 の2カラムカードに統合。
   spec-list 右側の余白（値カラムが広すぎる問題）も同時に解消。
------------------------------------*/
.prop-card{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  background:#fff;
  border:1px solid var(--line,#e6e2d8);
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(42,38,32,.07);
  margin-top:8px;
}

.prop-media{
  display:flex;
  flex-direction:column;
  min-height:100%;
}

.prop-media .img-area{
  border-radius:0;
}

/* [v6] メイン写真の画角をサブ2枚と同じ 4:3 に統一 */
.prop-media-main{
  aspect-ratio:4 / 3;
}

.prop-media-sub{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  margin-top:2px;
}

.prop-media-sub .img-area{
  aspect-ratio:4 / 3;
}

.prop-spec{
  padding:28px 32px 30px;
  border-left:1px solid var(--line,#e6e2d8);
}

.prop-spec-ttl{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-family:var(--serif);
  font-size:17px;
  font-weight:700;
  color:var(--ink);
  letter-spacing:.04em;
  margin:0 0 16px;
  padding-bottom:12px;
  border-bottom:2px solid var(--o,#E89A2E);
}

.prop-spec-ttl .en{
  font-family:var(--en);
  font-size:10px;
  letter-spacing:.24em;
  color:var(--o,#E89A2E);
  text-transform:uppercase;
  font-weight:500;
}

/* カード内では spec-list の外枠線を軽くし、値カラムの間延びを解消 */
.prop-spec .spec-list{
  border-top:none;
}
.prop-spec .spec-list dt{
  background:transparent;
  padding-left:0;
}
.prop-spec .spec-list dd{
  padding-right:0;
}
.prop-spec .spec-list dt,
.prop-spec .spec-list dd{
  border-bottom:1px dotted var(--line,#e6e2d8);
  padding-top:12px;
  padding-bottom:12px;
}
.prop-spec .spec-list dt:last-of-type,
.prop-spec .spec-list dd:last-of-type{
  border-bottom:none;
}

@media (max-width:900px){
  .prop-card{
    grid-template-columns:1fr;
  }
  .prop-media-main{
    aspect-ratio:4 / 3;
  }
  .prop-spec{
    border-left:none;
    border-top:1px solid var(--line,#e6e2d8);
    padding:22px 20px 24px;
  }
}

/*------------------------------------
A11: lightbox — 画像クリックで拡大表示（prop-card 写真）
   起動側は .js-lightbox（button化した .img-area）。
   スクリプトは page-akiya-project.php 末尾（全ページで使う場合は
   common.js / common.css へ移設）。
------------------------------------*/
/* button化した .img-area のリセット＋クリック可能の視覚ヒント */
button.img-area{
  border:0;
  padding:0;
  margin:0;
  cursor:zoom-in;
  appearance:none;
  -webkit-appearance:none;
  text-align:inherit;
  font:inherit;
}

button.img-area img{
  transition:transform .35s ease;
}

button.img-area:hover img{
  transform:scale(1.03);
}

/* [v6] content:"+" はフォント由来のベースラインずれで中心から外れて見えるため、
   linear-gradient で縦横2本のバーを描画して円の中心に正確に配置する方式へ変更 */
button.img-area::after{
  content:"";
  position:absolute;
  right:10px;
  bottom:10px;
  width:28px;
  height:28px;
  border-radius:50%;
  background:
    linear-gradient(#fff,#fff) center / 12px 2px no-repeat,
    linear-gradient(#fff,#fff) center / 2px 12px no-repeat,
    rgba(0,0,0,.45);
  pointer-events:none;
  transition:background-color .2s ease;
}

button.img-area:hover::after{
  background:
    linear-gradient(#fff,#fff) center / 12px 2px no-repeat,
    linear-gradient(#fff,#fff) center / 2px 12px no-repeat,
    var(--o,#E89A2E);
}

button.img-area:focus-visible{
  outline:2px solid var(--o-deep,#c67f1c);
  outline-offset:2px;
}

/* オーバーレイ本体 */
.lightbox{
  position:fixed;
  inset:0;
  z-index:2000;
  background:rgba(20,17,14,.86);
  display:grid;
  place-items:center;
  padding:24px;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease,visibility .25s ease;
}

.lightbox.is-open{
  opacity:1;
  visibility:visible;
}

.lightbox-figure{
  margin:0;
  max-width:min(1080px,92vw);
  max-height:86vh;
}

.lightbox-figure img{
  display:block;
  max-width:100%;
  max-height:86vh;
  width:auto;
  height:auto;
  border-radius:4px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}

.lightbox-close{
  position:absolute;
  top:18px;
  right:18px;
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background .2s ease;
}

.lightbox-close:hover{
  background:var(--o,#E89A2E);
}

@media (max-width:767px){
  .lightbox{
    padding:14px;
  }
  .lightbox-close{
    top:12px;
    right:12px;
    width:40px;
    height:40px;
  }
  button.img-area::after{
    width:24px;
    height:24px;
    right:8px;
    bottom:8px;
    background:
      linear-gradient(#fff,#fff) center / 10px 2px no-repeat,
      linear-gradient(#fff,#fff) center / 2px 10px no-repeat,
      rgba(0,0,0,.45);
  }
  button.img-area:hover::after{
    background:
      linear-gradient(#fff,#fff) center / 10px 2px no-repeat,
      linear-gradient(#fff,#fff) center / 2px 10px no-repeat,
      var(--o,#E89A2E);
  }
}

/*------------------------------------
[v8 2026-08-06] A12 撤去: #media のカードデザインは about と共通化のため
   common.css（v6）へ昇格（紙面サムネイル .media-thumb も common 側に定義）。
   A12 の申し送りどおり、about.css B10 とあわせて削除。
------------------------------------*/

/*------------------------------------
A13: voice blockquote 引用符のセーフガード
   最新の common.css（v6）では .voice-body blockquote の
   ::before/::after を削除済みだが、本番で content:"“"（ダブル
   クォート）の blockquote:before が残存表示されているため、
   どのCSS由来でも確実に無効化する保険ルール。
   ※ サーバー側 common.css の差し替え＋キャッシュクリア後、
     出所の解消を確認できたら削除してよい。
------------------------------------*/
.voice-body blockquote::before,
.voice-body blockquote::after{
  content:none !important;
}