/* =========================
blog 一覧（blog/・therapist/blog/）
カードの見た目は TOP・セラピスト詳細と共用なので common.css の .blog_ul
========================= */
.blog_list_sec{
padding:2.6rem 0 3rem;
}
/* 見出しの下の「全 ○ 件」 */
.blog_sub_come{
display:block;
text-align:center;
font-size:1.3rem;
letter-spacing:.08em;
color:#26332f;
line-height:1;
margin:1.6rem 0 0;
}
.blog_sub_come .int{
font-size:2rem;
color:#1d8a72;
margin:0 0.1rem;
}
.blog_list_sec .blog_ul{
margin-top:1.4rem;
}








/* =========================
セラピスト別ブログ
========================= */
.blog_staff_sec{
padding:2.6rem 0 3rem;
}
.blog_staff_ul{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px 8px;
margin-top:1.6rem;
}
.blog_staff_ul li{
background:#fff;
border:1px solid #d5e9e2;
border-radius:12px;
overflow:hidden;
}
.blog_staff_ul img{
width:100%;
aspect-ratio:3 / 4;
object-fit:cover;
object-position:center top;
display:block;
}
.blog_staff_name{
padding:0.6rem 0.5rem 0.6rem;
text-align:center;
}
.blog_staff_name h3{
font-size:1.1rem;
font-weight:bold;
letter-spacing:.02em;
line-height:1.3;
color:#26332f;
}
.blog_staff_name p{
display:inline-block;
margin-top:0.3rem;
font-size:0.9rem;
letter-spacing:.04em;
line-height:1;
color:#6c7d78;
}
.blog_staff_name .int{
font-size:1.1rem;
color:#1d8a72;
margin-right:0.1rem;
}








/* =========================
blog 詳細
========================= */
.blog_detail_sec{
padding:2.6rem 0 3rem;
}
.blog_article{
max-width:700px;
margin:1.6rem auto 0;
padding:1.4rem 1.4rem 1.8rem;
background:#fff;
border:1px solid #d5e9e2;
border-radius:14px;
box-shadow:0 4px 14px rgba(18,51,44,.06);
}

/* 書いた人 */
.blog_author{
display:flex;
align-items:center;
gap:0.9rem;
padding-bottom:1.1rem;
border-bottom:1px dashed #d5e9e2;
}
.blog_author img{
flex-shrink:0;
width:48px;
height:48px;
border-radius:50%;
object-fit:cover;
object-position:center top;
border:1px solid #d5e9e2;
}
.blog_author_text{
min-width:0;
}
.blog_author_name{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:0.3rem 0.6rem;
font-size:1.35rem;
font-weight:bold;
letter-spacing:.06em;
line-height:1.3;
color:#26332f;
}
.blog_author_today{
display:inline-block;
padding:0.2rem 0.7rem;
border-radius:20px;
background:#1d8a72;
color:#fff;
font-size:0.9rem;
font-weight:normal;
letter-spacing:.04em;
line-height:1.3;
}
.blog_author time{
display:block;
margin-top:0.35rem;
font-size:1.15rem;
letter-spacing:.06em;
line-height:1;
color:#03bc96;
}

/* タイトル・写真・本文 */
.blog_article_title{
margin-top:1.3rem;
font-size:1.7rem;
letter-spacing:.06em;
line-height:1.6;
color:#26332f;
word-break:break-word;
}
.blog_article_img{
margin-top:1.3rem;
text-align:center;
}
.blog_article_img img{
max-width:100%;
max-height:600px;
border-radius:12px;
display:inline-block;
}
.blog_article_body{
margin-top:1.4rem;
font-size:1.3rem;
line-height:1.9;
letter-spacing:.05em;
color:#26332f;
word-break:break-word;
}

/* 前後の記事（前＝古い・左／次＝新しい・右） */
.blog_nav{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
max-width:700px;
margin:1.6rem auto 0;
}
.blog_nav_item{
display:flex;
align-items:center;
gap:0.7rem;
min-width:0;
padding:0.6rem;
background:#fff;
border:1px solid #d5e9e2;
border-radius:12px;
}
.blog_nav_next{
flex-direction:row-reverse;
text-align:right;
}
.blog_nav_item img{
flex-shrink:0;
width:56px;
height:56px;
border-radius:8px;
object-fit:cover;
object-position:center top;
}
.blog_nav_text{
min-width:0;
flex:1;
}
.blog_nav_text em{
position:relative;
display:inline-block;
font-size:1.05rem;
font-weight:bold;
letter-spacing:.06em;
line-height:1;
color:#1d8a72;
}
/* 矢印（前は左・次は右） */
.blog_nav_prev .blog_nav_text em{
padding-left:0.9rem;
}
.blog_nav_next .blog_nav_text em{
padding-right:0.9rem;
}
.blog_nav_text em::after{
content:"";
position:absolute;
top:50%;
width:6px;
height:6px;
border-top:1px solid #1d8a72;
}
.blog_nav_prev .blog_nav_text em::after{
left:1px;
border-left:1px solid #1d8a72;
transform:translateY(-50%) rotate(-45deg);
}
.blog_nav_next .blog_nav_text em::after{
right:1px;
border-right:1px solid #1d8a72;
transform:translateY(-50%) rotate(45deg);
}
.blog_nav_text p{
margin-top:0.4rem;
font-size:1rem;
letter-spacing:.04em;
line-height:1;
color:#6c7d78;
}
.blog_nav_text span{
display:block;
margin-top:0.3rem;
font-size:1rem;
line-height:1.4;
color:#26332f;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
@media (hover:hover) and (pointer:fine){
.blog_nav_item{
transition:border-color .25s ease, background .25s ease;
}
.blog_nav_item:hover{
border-color:#1d8a72;
background:#f7fbf9;
}
}

/* ブログ一覧・プロフィール（common.css の .next_page を2つ） */
.blog_detail_links{
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
margin-top:2rem;
}
.blog_detail_links .next_page{
width:auto;
margin:0;
}
.blog_detail_links .next_page a{
min-width:260px;
}

/* 新着ブログ */
.blog_new_sec{
padding:2.6rem 0 3rem;
}








/* =========================
tablet〜pc
========================= */
@media (min-width:768px){

.blog_sub_come{
font-size:1.45rem;
}
.blog_sub_come .int{
font-size:2.3rem;
}

.blog_staff_ul{
grid-template-columns:repeat(6,1fr);
}
.blog_staff_name h3{
font-size:1.2rem;
}

.blog_article{
padding:2rem 2.6rem 2.4rem;
}
.blog_author img{
width:56px;
height:56px;
}
.blog_article_title{
font-size:1.9rem;
}
.blog_article_body{
font-size:1.35rem;
}

.blog_nav{
gap:14px;
}
.blog_nav_item{
padding:0.7rem 0.9rem;
gap:0.9rem;
}
.blog_nav_item img{
width:72px;
height:72px;
}
.blog_nav_text em{
font-size:1.15rem;
}
.blog_nav_text span{
font-size:1.1rem;
}

.blog_detail_links{
flex-direction:row;
justify-content:center;
gap:14px;
}

}