/* =========================
ブログ詳細ページ
========================= */

.blog-detail-page{
  padding-bottom:80px;
}

.blog-detail{
  width:min(900px, calc(100% - 60px));
  margin:0 auto;
  padding:46px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:0 10px 30px rgba(93,61,27,.05);
}

.blog-detail__meta{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}

.blog-detail__meta time{
  color:var(--green);
  font-size:14px;
  font-weight:800;
}

.blog-detail__meta span{
  padding:5px 14px;
  border-radius:999px;
  background:var(--soft);
  color:var(--brown);
  font-size:12px;
  font-weight:800;
}

.blog-detail h2{
  margin:0 0 30px;
  font-size:30px;
  line-height:1.7;
  color:var(--brown);
}

.blog-detail__main-img{
  margin-bottom:36px;
  border-radius:24px;
  overflow:hidden;
}

.blog-detail__main-img img{
  width:100%;
  height:420px;
  object-fit:cover;
}

.blog-detail__content{
  font-size:15px;
  line-height:2.2;
}

.blog-detail__content p{
  margin:0 0 26px;
}

.blog-detail__content h3{
  margin:46px 0 18px;
  padding-left:18px;
  border-left:5px solid var(--green);
  font-size:23px;
  line-height:1.7;
  color:var(--green);
}

.blog-detail__photo-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin:34px 0;
}

.blog-detail__photo-grid img{
  width:100%;
  height:230px;
  object-fit:cover;
  border-radius:18px;
}

.blog-detail__pager{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:14px;
  margin-top:50px;
  padding-top:30px;
  border-top:1px solid var(--line);
}

.blog-detail__pager a{
  min-height:46px;
  padding:10px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fffdf8;
  font-size:14px;
  font-weight:800;
  transition:.25s ease;
}

.blog-detail__pager a:first-child{
  justify-content:flex-start;
}

.blog-detail__pager a:last-child{
  justify-content:flex-end;
}

.blog-detail__pager a:hover{
  background:var(--green);
  color:#fff;
  border-color:var(--green);
  transform:translateY(-3px);
}

/* スマホ */
@media (max-width:1000px){

  .blog-detail{
    width:calc(100% - 36px);
    padding:30px 20px;
  }

  .blog-detail__meta{
    flex-wrap:wrap;
  }

  .blog-detail h2{
    font-size:24px;
  }

  .blog-detail__main-img img{
    height:250px;
  }

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

  .blog-detail__photo-grid img{
    height:220px;
  }

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

  .blog-detail__pager a,
  .blog-detail__pager a:first-child,
  .blog-detail__pager a:last-child{
    justify-content:center;
  }
}