/* =========================
ブログページ 完全版
========================= */

.blog-page{
  background:#f8f7f5;
  color:#333;
}

.blog-page .container{
  width:90%;
  max-width:1200px;
  margin:0 auto;
}

/* =========================
ヘッダー固定対策
========================= */

#site-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:9999;
}

/* =========================
ブログメインビジュアル
========================= */

.blog-hero{
  position:relative;
  width:100%;
  height:520px;
  overflow:hidden;
  margin-top:0;
}

.blog-hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.blog-hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0.9) 0%,
    rgba(255,255,255,0.75) 38%,
    rgba(255,255,255,0.08) 100%
  );
}

.blog-hero-content{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:90%;
  max-width:1200px;
  z-index:2;
}

.blog-hero-sub{
  font-size:88px;
  line-height:1;
  font-weight:700;
  color:#5b3418;
  letter-spacing:0.06em;
  margin-bottom:18px;
}

.blog-hero-content h1{
  font-size:38px;
  line-height:1.5;
  font-weight:700;
  color:#333;
  margin-bottom:18px;
}

.blog-hero-content p:not(.blog-hero-sub){
  font-size:16px;
  line-height:2;
  color:#555;
  max-width:620px;
}

/* =========================
パンくず
========================= */

.breadcrumb{
  padding:28px 0;
  background:#fff;
}

.breadcrumb ol{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-size:13px;
  color:#777;
}

.breadcrumb li{
  display:flex;
  align-items:center;
}

.breadcrumb li:not(:last-child)::after{
  content:"/";
  margin-left:10px;
  color:#aaa;
}

.breadcrumb a{
  color:#7b4f2a;
  text-decoration:none;
  font-weight:600;
}

/* =========================
ブログ本体
========================= */

.blog-section{
  padding:10px 0 100px;
}

.blog-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 330px;
  gap:48px;
  align-items:start;
}

.blog-main{
  min-width:0;
}

/* =========================
検索・カテゴリ
========================= */

.blog-control{
  margin-bottom:32px;
}

.blog-search{
  display:flex;
  gap:12px;
  margin-bottom:20px;
}

.blog-search input{
  flex:1;
  width:100%;
  height:52px;
  border:1px solid #eadfd5;
  background:#fff;
  border-radius:999px;
  padding:0 22px;
  font-size:15px;
  box-shadow:0 6px 18px rgba(0,0,0,0.05);
}

.blog-search input:focus{
  outline:none;
  border-color:#7b4f2a;
  box-shadow:0 0 0 3px rgba(123,79,42,0.13);
}

.blog-search button{
  height:52px;
  padding:0 28px;
  border:none;
  border-radius:999px;
  background:#7b4f2a;
  color:#fff;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:0.3s;
  white-space:nowrap;
}

.blog-search button:hover{
  background:#5b3418;
  transform:translateY(-2px);
}

.blog-filter{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.filter-btn{
  border:1px solid #eadfd5;
  background:#fff;
  color:#333;
  padding:10px 17px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:0.3s;
  box-shadow:0 4px 12px rgba(0,0,0,0.04);
}

.filter-btn:hover{
  color:#7b4f2a;
  border-color:#7b4f2a;
  transform:translateY(-2px);
}

.filter-btn.active{
  background:#7b4f2a;
  border-color:#7b4f2a;
  color:#fff;
}

.blog-result-text{
  margin-bottom:22px;
  font-size:14px;
  color:#666;
}

.no-blog-result{
  display:none;
  margin-top:35px;
  background:#fff;
  border-radius:16px;
  padding:40px 20px;
  text-align:center;
  color:#777;
  box-shadow:0 8px 24px rgba(0,0,0,0.06);
}

/* =========================
記事カード
========================= */

.blog-card-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:34px;
}

.blog-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 8px 25px rgba(0,0,0,0.07);
  transition:0.35s;
}

.blog-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 45px rgba(0,0,0,0.13);
}

.blog-card a{
  display:block;
  height:100%;
  color:inherit;
  text-decoration:none;
}

.blog-card-img{
  position:relative;
  width:100%;
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:#eee;
}

.blog-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:0.5s;
}

.blog-card:hover .blog-card-img img{
  transform:scale(1.06);
}

.blog-category{
  position:absolute;
  top:14px;
  left:14px;
  padding:7px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  color:#fff;
  z-index:2;
}

.blog-category.new{ background:#7b4f2a; }
.blog-category.reform{ background:#01823b; }
.blog-category.insulation{ background:#0066cc; }
.blog-category.pellet{ background:#e67e22; }
.blog-category.subsidy{ background:#8e44ad; }

.blog-card-body{
  padding:25px 24px 28px;
}

.blog-date{
  font-size:13px;
  color:#999;
  margin-bottom:10px;
}

.blog-card-body h2{
  font-size:20px;
  line-height:1.65;
  font-weight:700;
  color:#222;
  margin-bottom:14px;
}

.blog-card-body p{
  font-size:14px;
  line-height:1.9;
  color:#666;
}

/* =========================
サイドバー
========================= */

.blog-sidebar{
  position:sticky;
  top:120px;
}

.sidebar-box{
  background:#fff;
  border-radius:18px;
  padding:28px;
  margin-bottom:28px;
  box-shadow:0 8px 25px rgba(0,0,0,0.07);
}

.sidebar-box h3{
  font-size:20px;
  font-weight:700;
  color:#222;
  margin-bottom:22px;
  padding-bottom:12px;
  border-bottom:2px solid #eadfd5;
}

.sidebar-category li{
  border-bottom:1px solid #eee;
}

.sidebar-category a{
  display:flex;
  justify-content:space-between;
  padding:14px 0;
  color:#444;
  text-decoration:none;
  font-size:15px;
  font-weight:600;
}

.sidebar-category a::after{
  content:"›";
  color:#aaa;
  font-size:22px;
}

.sidebar-category a:hover{
  color:#7b4f2a;
}

.popular-post{
  margin-bottom:20px;
}

.popular-post a{
  display:flex;
  gap:14px;
  align-items:center;
  color:#222;
  text-decoration:none;
}

.popular-post img{
  width:92px;
  height:70px;
  object-fit:cover;
  border-radius:10px;
  background:#eee;
}

.popular-post p{
  font-size:14px;
  line-height:1.65;
  font-weight:600;
}

.sidebar-cta{
  background:linear-gradient(135deg,#7b4f2a,#5b3418);
  color:#fff;
  border-radius:22px;
  padding:34px 28px;
  box-shadow:0 16px 35px rgba(91,52,24,0.25);
}

.sidebar-cta-label{
  font-size:13px;
  font-weight:700;
  letter-spacing:0.08em;
  margin-bottom:14px;
}

.sidebar-cta h3{
  font-size:23px;
  line-height:1.55;
  font-weight:700;
  margin-bottom:16px;
}

.sidebar-cta p{
  font-size:14px;
  line-height:1.9;
  margin-bottom:24px;
}

.sidebar-cta a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 24px;
  background:#fff;
  color:#7b4f2a;
  border-radius:999px;
  text-decoration:none;
  font-size:14px;
  font-weight:700;
}

/* =========================
CTA共通デザイン
========================= */

.blog-bottom-cta{
  padding:100px 20px;
  background:#f8f7f5;
}

.bottom-cta-inner{
  background:#fff;
  border-radius:36px;
  padding:70px 45px;
  box-shadow:0 15px 40px rgba(0,0,0,0.06);
  text-align:center;
}

.bottom-cta-sub{
  color:#9b6a3b;
  font-size:14px;
  font-weight:700;
  letter-spacing:0.2em;
  margin-bottom:18px;
}

.bottom-cta-inner h2{
  font-size:42px;
  line-height:1.5;
  font-weight:700;
  color:#333;
  margin-bottom:24px;
}

.bottom-cta-text{
  font-size:16px;
  line-height:2.1;
  color:#666;
  margin-bottom:48px;
}

.blog-cta-buttons{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:18px;
}

.blog-cta-buttons a{
  display:flex;
  align-items:center;
  gap:12px;
  border-radius:20px;
  padding:16px;
  min-height:96px;
  color:#fff;
  text-decoration:none;
  transition:0.35s;
  box-shadow:0 12px 30px rgba(0,0,0,0.08);
  min-width:0;
  overflow:hidden;
}

.blog-cta-buttons a:nth-child(1),
.blog-cta-buttons a:nth-child(2),
.blog-cta-buttons a:nth-child(3){
  grid-column:span 2;
}

.blog-cta-buttons a:nth-child(4),
.blog-cta-buttons a:nth-child(5){
  grid-column:span 3;
}

.blog-cta-buttons a:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 35px rgba(0,0,0,0.14);
}

.cta-icon{
  width:50px;
  height:50px;
  border-radius:50%;
  background:rgba(255,255,255,0.96);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.4);
}

.cta-icon img{
  width:34px;
  height:34px;
  object-fit:contain;
  display:block;
}

.cta-content{
  flex:1;
  min-width:0;
  text-align:left;
}

.cta-content span{
  display:block;
  font-size:15px;
  line-height:1.35;
  font-weight:700;
  margin-bottom:4px;
  word-break:keep-all;
}

.cta-content small{
  display:block;
  font-size:10px;
  line-height:1.45;
  opacity:0.95;
  word-break:break-word;
}

.cta-phone{
  background:linear-gradient(135deg,#9b6a3b,#6d421d);
}

.cta-mail{
  background:linear-gradient(135deg,#1976d2,#0d47a1);
}

.cta-form{
  background:linear-gradient(135deg,#e53935,#b71c1c);
}

.cta-line{
  background:linear-gradient(135deg,#06C755,#009944);
}

.cta-instagram{
  background:linear-gradient(
    135deg,
    #f58529 0%,
    #feda77 18%,
    #dd2a7b 45%,
    #8134af 72%,
    #515bd4 100%
  );
}

/* 記事ページ内CTAをblog.htmlと同じ白背景に統一 */

.post-bottom-cta{
  padding:70px 0 20px;
  background:transparent;
}

.post-bottom-cta .bottom-cta-inner{
  box-shadow:0 15px 40px rgba(0,0,0,0.06);
}

.post-content .blog-bottom-cta{
  margin-top:60px;
}

.post-content .blog-bottom-cta h2::before{
  display:none;
}

/* =========================
記事ページ専用デザイン
========================= */

.post-page{
  padding:160px 0 100px;
  background:linear-gradient(180deg,#f8f7f5 0%,#fff 45%,#f8f7f5 100%);
}

.post-container{
  max-width:1100px;
}

.post-breadcrumb{
  margin-bottom:30px;
}

.post-breadcrumb ol{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-size:13px;
  color:#777;
}

.post-breadcrumb li:not(:last-child)::after{
  content:"/";
  margin-left:10px;
  color:#aaa;
}

.post-breadcrumb a{
  color:#7b4f2a;
  font-weight:700;
  text-decoration:none;
}

.post-header{
  position:relative;
  z-index:1;
  background:#fff;
  border-radius:28px;
  padding:70px 55px 55px;
  text-align:center;
  box-shadow:0 15px 40px rgba(0,0,0,0.06);
  margin-bottom:45px;
}

.post-meta{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  margin-bottom:24px;
}

.post-meta span{
  background:#0066cc;
  color:#fff;
  padding:8px 18px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
}

.post-meta time{
  color:#888;
  font-size:14px;
}

.post-header h1{
  font-size:38px;
  line-height:1.55;
  color:#2b2b2b;
  font-weight:700;
  margin-bottom:24px;
}

.post-header p{
  max-width:760px;
  margin:0 auto;
  font-size:16px;
  line-height:2;
  color:#666;
}

.post-eyecatch{
  margin-bottom:45px;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(0,0,0,0.10);
}

.post-eyecatch img{
  width:100%;
  height:480px;
  object-fit:cover;
  display:block;
}

.post-layout{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:45px;
  align-items:start;
}

.post-toc{
  position:sticky;
  top:120px;
  background:#fff;
  border-radius:22px;
  padding:28px;
  box-shadow:0 10px 30px rgba(0,0,0,0.06);
}

.post-toc p{
  font-size:18px;
  font-weight:700;
  color:#7b4f2a;
  margin-bottom:18px;
  padding-bottom:12px;
  border-bottom:2px solid #eadfd5;
}

.post-toc ol{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.post-toc a{
  color:#444;
  font-size:14px;
  line-height:1.7;
  text-decoration:none;
  transition:0.3s;
}

.post-toc a:hover{
  color:#7b4f2a;
}

.post-content{
  background:#fff;
  border-radius:28px;
  padding:55px;
  box-shadow:0 15px 40px rgba(0,0,0,0.06);
}

.post-content p{
  font-size:16px;
  line-height:2.15;
  color:#444;
  margin-bottom:26px;
}

.post-content h2{
  position:relative;
  font-size:28px;
  line-height:1.6;
  color:#2b2b2b;
  font-weight:700;
  margin:60px 0 24px;
  padding-left:20px;
}

.post-content h2::before{
  content:"";
  position:absolute;
  left:0;
  top:0.28em;
  width:6px;
  height:1.5em;
  background:#7b4f2a;
  border-radius:999px;
}

.post-content h3{
  font-size:22px;
  color:#5b3418;
  font-weight:700;
  margin:38px 0 16px;
}

.post-content ul{
  background:#f8f7f5;
  border-radius:18px;
  padding:26px 30px;
  margin:24px 0 36px;
}

.post-content li{
  position:relative;
  padding-left:22px;
  font-size:15px;
  line-height:2;
  color:#444;
}

.post-content li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.85em;
  width:8px;
  height:8px;
  background:#7b4f2a;
  border-radius:50%;
}

.post-point-box{
  background:linear-gradient(135deg,#fff7ef,#ffffff);
  border:1px solid #eadfd5;
  border-radius:24px;
  padding:35px;
  margin:38px 0;
}

.post-point-box h3{
  margin-top:0;
  color:#7b4f2a;
}

.related-posts{
  margin-top:70px;
}

.related-posts > h2{
  text-align:center;
  font-size:30px;
  font-weight:700;
  color:#333;
  margin-bottom:35px;
}

.related-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
}

.related-card{
  background:#fff;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.07);
  transition:0.3s;
}

.related-card:hover{
  transform:translateY(-6px);
}

.related-card a{
  display:grid;
  grid-template-columns:180px 1fr;
  color:inherit;
  text-decoration:none;
}

.related-card img{
  width:100%;
  height:100%;
  min-height:150px;
  object-fit:cover;
}

.related-card div{
  padding:24px;
}

.related-card span{
  display:inline-block;
  color:#7b4f2a;
  font-size:13px;
  font-weight:700;
  margin-bottom:10px;
}

.related-card h3{
  font-size:17px;
  line-height:1.7;
  font-weight:700;
  color:#222;
}

/* =========================
レスポンシブ
========================= */

@media screen and (max-width:1100px){

  .blog-layout,
  .post-layout{
    grid-template-columns:1fr;
  }

  .blog-sidebar,
  .post-toc{
    position:static;
  }

  .blog-cta-buttons{
    grid-template-columns:1fr 1fr;
  }

  .blog-cta-buttons a{
    grid-column:auto !important;
  }
}

@media screen and (max-width:768px){

  .blog-hero{
    height:420px;
  }

  .blog-hero-sub{
    font-size:56px;
  }

  .blog-hero-content h1{
    font-size:28px;
  }

  .blog-section{
    padding:45px 0 75px;
  }

  .blog-search{
    flex-direction:column;
  }

  .blog-search button{
    width:100%;
  }

  .blog-card-grid{
    grid-template-columns:1fr;
  }

  .blog-bottom-cta{
    padding:70px 20px;
  }

  .bottom-cta-inner{
    padding:45px 22px;
    border-radius:26px;
  }

  .bottom-cta-inner h2{
    font-size:30px;
  }

  .bottom-cta-text{
    font-size:15px;
    line-height:2;
  }

  .blog-cta-buttons{
    grid-template-columns:1fr;
  }

  .blog-cta-buttons a{
    padding:18px;
  }

  .cta-icon{
    width:52px;
    height:52px;
  }

  .cta-icon img{
    width:38px;
    height:38px;
  }

  .cta-content span{
    font-size:16px;
  }

  .cta-content small{
    font-size:10px;
  }

  .post-page{
    padding:120px 0 70px;
  }

  .post-header{
    padding:42px 25px 35px;
  }

  .post-header h1{
    font-size:28px;
  }

  .post-eyecatch img{
    height:320px;
  }

  .post-content{
    padding:38px 25px;
  }

  .post-content h2{
    font-size:24px;
  }

  .related-grid{
    grid-template-columns:1fr;
  }

  .related-card a{
    grid-template-columns:1fr;
  }

  .related-card img{
    height:220px;
  }
}

@media screen and (max-width:480px){

  .blog-hero{
    height:360px;
  }

  .blog-hero-sub{
    font-size:46px;
  }

  .blog-hero-content h1{
    font-size:24px;
  }

  .filter-btn{
    font-size:13px;
    padding:9px 14px;
  }

  .post-header h1{
    font-size:24px;
  }

  .post-eyecatch img{
    height:240px;
  }

  .post-content{
    padding:32px 20px;
  }

  .post-content p{
    font-size:15px;
  }
}

/* =========================
補助金記事用
========================= */

.subsidy-official-image{
  margin:34px 0 34px;
  background:#f8f7f5;
  border:1px solid #eadfd5;
  border-radius:24px;
  padding:18px;
}

.subsidy-official-image img{
  width:100%;
  max-height:420px;
  object-fit:contain;
  display:block;
  background:#fff;
  border-radius:18px;
  box-shadow:0 8px 24px rgba(0,0,0,0.06);
}

.subsidy-official-image figcaption{
  margin-top:12px;
  font-size:13px;
  line-height:1.8;
  color:#777;
  text-align:center;
}

.subsidy-official-image figcaption a{
  color:#7b4f2a;
  font-weight:700;
  text-decoration:underline;
}

.subsidy-note{
  font-size:13px;
  line-height:1.9;
  color:#777;
  background:#fff8ef;
  border-left:4px solid #9b6a3b;
  border-radius:12px;
  padding:16px 18px;
  margin:24px 0 34px;
}

/* =========================
補助金記事アイキャッチ専用
========================= */

.subsidy-eyecatch{
  background:#f5f5f5;
  padding:20px;
}

.subsidy-eyecatch img{
  width:100%;
  height:auto !important;
  max-height:700px;
  object-fit:contain !important;
  display:block;
  border-radius:20px;
}

.subsidy-label{
  background:#8e44ad !important;
}

/* =========================
スマホ時CTAボタン調整
========================= */
@media (max-width: 768px) {

.blog-cta-buttons{
display:grid;
grid-template-columns:1fr;
gap:12px;
}

.blog-cta-buttons a{
padding:12px 14px;
min-height:72px;
}

.cta-icon{
width:42px;
height:42px;
flex-shrink:0;
}

.cta-icon img{
width:22px;
height:22px;
object-fit:contain;
}

.cta-content span{
font-size:14px;
line-height:1.4;
}

.cta-content small{
font-size:11px;
line-height:1.3;
word-break:break-all;
}

}