/* Shared Content Vault テンプレート用CSS
   使用中テーマの style-after.css などへ追記してください。 */

.vip-page-header{
margin:0 0 2em;
}

.vip-page-header h1,
.vip-single-header h1{
margin:0;
}

.vip-page-description{
margin-top:1em;
}

.vip-genre-nav{
margin:0 0 2.5em;
}

.vip-genre-nav ul{
display:flex;
flex-wrap:wrap;
gap:.7em;
margin:0;
padding:0;
list-style:none;
}

.vip-genre-nav a{
display:inline-flex;
align-items:center;
gap:.5em;
padding:.65em 1em;
border:1px solid currentColor;
border-radius:999px;
text-decoration:none;
}

.vip-genre-nav a span{
font-size:.85em;
opacity:.7;
}

.vip-post-list{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:1.6em;
}

.vip-post-card{
margin:0;
border:1px solid rgba(0,0,0,.12);
background:#fff;
}

.vip-post-card-link{
display:block;
height:100%;
color:inherit;
text-decoration:none;
transition:transform .25s ease,box-shadow .25s ease;
}

.vip-post-card-link:hover{
transform:translateY(-3px);
box-shadow:0 10px 24px rgba(0,0,0,.1);
}

.vip-post-thumb img{
display:block;
width:100%;
height:240px;
object-fit:cover;
}

.vip-post-body{
padding:1.2em;
}

.vip-post-body h2{
margin:.35em 0 0;
font-size:1.15em;
line-height:1.6;
}

.vip-post-excerpt{
margin-top:.8em;
line-height:1.8;
}

.vip-post-genres{
display:flex;
flex-wrap:wrap;
gap:.5em;
font-size:.85em;
}

.vip-post-genres span,
.vip-post-genres a{
display:inline-block;
padding:.25em .7em;
border-radius:999px;
background:rgba(0,0,0,.06);
text-decoration:none;
}

.vip-back-link{
margin:0 0 .8em;
}

.vip-single-header{
margin-bottom:1.8em;
}

.vip-single-header h1{
margin-top:.5em;
}

.vip-single-thumbnail{
margin-bottom:2em;
}

.vip-single-thumbnail img{
display:block;
width:100%;
height:auto;
}

.vip-single-content{
line-height:1.9;
}

.vip-pagination{
margin-top:2.5em;
}

.vip-post-navigation{
display:grid;
grid-template-columns:1fr 1fr;
gap:1em;
margin-top:2.5em;
}

.vip-post-next{
text-align:right;
}

.vip-no-posts{
padding:2em;
background:rgba(0,0,0,.04);
text-align:center;
}

@media only screen and (max-width:834px){
.vip-post-list{
grid-template-columns:1fr;
}

.vip-post-thumb img{
height:auto;
}

.vip-post-navigation{
grid-template-columns:1fr;
}

.vip-post-next{
text-align:left;
}
}