.p-authorBox {
border: 1px solid #e1e1e1;
border-radius: var(--swl-radius--8, 0);
margin: 1vw;
padding: 18px;
}
.p-authorBox__l {
margin: 0 0 1em;
text-align: center;
}
.p-authorBox__name {
color: inherit;
display: block;
font-weight: 700;
line-height: 1.2;
margin-top: 8px;
text-decoration: none;
}
.p-authorBox__position {
display: block;
font-style: italic;
line-height: 1.2;
margin-top: 4px;
}
.p-authorBox__r {
width: 100%;
align-self: center;
}
.p-authorBox__r {
border-left: 1px solid #e1e1e1;
display: flex;
flex-direction: column;
padding-left: 1.5em;
width: calc(100% - 160px - 1.5em);
} .p-postList--2col {
display: grid;
grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none;
padding: 0;
margin: 70px 20px 20px;
}
.p-postList {
display: grid;
grid-template-columns: repeat(3, 1fr); gap: 20px;
padding: 16px;
list-style: none;
margin: 0;
} .p-postList__item { }
.p-postList__item:hover { } .c-postThumb__figure img {
width: 100%;
height: 250px;
object-fit: contain;
} .p-postList__meta {
margin-top: 10px;
}
.p-postList__title {
font-size: 14px;
font-weight: bold;
margin: 6px;
}
.p-postList__times {
font-size: 14px;
color: #777;
margin: 6px;
}
.pagination {
display: flex; justify-content: center; list-style: none; padding: 0; margin: 20px 0; }
.pagination .page-numbers {
display: inline-block; margin: 0 5px; padding: 10px 15px; border: 1px solid #ddd; background-color: #f9f9f9; text-decoration: none; color: #333; font-size: 14px; transition: all 0.3s ease; }
.pagination .page-numbers:hover {
background-color: #df0a27; color: #fff; border-color: #df0a27; }
.pagination .page-numbers.current {
background-color: #df0a27; color: #fff; border-color: #df0a27; font-weight: bold; }
.main {
width: 100%;
padding: 0 10%;
}
.author-bio {
margin: 45px 17px;
}
.c-pageTitle__subTitle {
font-style: italic;
margin-left: 1em;
opacity: 0.8;
letter-spacing: 1px;
font-size: 14px;
font-family: "游ゴシック体", "Yu Gothic", YuGothic,
"Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
.author-bio .c-pageTitle {
position: relative; display: inline-block; width: 100%; margin: 0 auto; } .author-bio .c-pageTitle::after {
content: ""; position: absolute;
left: 0;
bottom: -5px; width: 100%; height: 1px; background: linear-gradient(
to right,
red,
#e2e2e2 50%
); } .c-pageTitle__inner {
display: inline-block; position: relative; z-index: 1; }
img.avatar {
border-radius: 50px;
border: 2px solid #e2e2e2;
}
.p-postList__item {
margin-bottom: 40px;
}
.c-postThumb {
position: relative; }
.c-postThumb__cat {
position: absolute;
top: 6px;
right: 1px;
background-color: #de1122;
padding: 5px 10px;
font-size: 10px;
z-index: 10;
color: white;
}
.icon-folder:before {
font-family: "Font Awesome 6 Free";
content: "\f07b";
font-weight: 900;
font-size: 11px;
color: white;
padding-right: 3px;
} @media (max-width: 767px) {
.main {
width: 100%;
padding: 0 4%;
}
.p-postList {
grid-template-columns: 1fr; }
img {
width: auto;
object-fit: contain;
}
.p-authorBox__r {
border-left: transparent;
display: flex;
flex-direction: column;
padding: 0 0.5em;
width: auto;
}
.c-tabBody.p-postListTabBody {
margin-top: 53px;
}
.p-postList--2col {
margin: 0;
}
.p-authorBox {
margin: 0;
}
.p-postList--2col {
gap: 50px;
}
.p-postList__meta {
margin: 6px;
}
}
@media (min-width: 600px) {
.p-authorBox {
align-content: stretch;
display: flex;
justify-content: space-between; }
.p-authorBox__l {
margin-bottom: 0;
width: 160px;
}
.c-pageTitle {
font-size: 1.5em;
}
}
@media (min-width: 960px) {
}