@charset "utf-8";


/*　投稿・投稿一覧：共通　*/
.content a {
	color: #424242;
	text-decoration: none;
position: relative;
}

.content > a:hover img {
transform: scale(1.05);
transition: 1s;
}

.column.single {
	margin-inline: auto;
	padding: 20px 20px 100px 20px;
	background-color: rgba(255,255,255,0.8);
}





/*　サムネイルタイプ　*/
.content.thumbnail {
	padding: 0 8px 0 8px;
display: grid;
gap: 20px;
box-sizing: border-box;
}

.content.thumbnail a .top {
	line-height: 100%;
	padding: 0;
	overflow: hidden;
aspect-ratio: 4 / 3;
position: relative;
}

.content.thumbnail a img {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 100%;
	margin: 0;
object-fit: cover;
}

.content.thumbnail a .bottom {
	padding: 20px 20px 20px 20px;
}

/*　サムネイル：タイプ５　*/
.content.thumbnail.five {
grid-template-columns: repeat(5,1fr);
}

/*　サムネイル：タイプ４　*/
.content.thumbnail.four {
grid-template-columns: repeat(4,1fr);
}

/*　サムネイル：タイプ３　*/
.content.thumbnail.three {
grid-template-columns: repeat(3,1fr);
}

/*　サムネイル：タイプ２　*/
.content.thumbnail.two {
grid-template-columns: repeat(2,1fr);
}





/*　リストタイプ：共通　*/
.content.list a {
	margin-bottom: 10px;
	padding: 15px 20px 5px 20px;
display: grid;
grid-template-columns: 90px 1fr;
gap: 10px 0;
grid-auto-flow: row;
grid-template-areas:
	"date cat cat"
	"title title title"
	". . .";
}

.content.list a .date-time {
grid-area: date;
}

.content.list a .icon {
grid-area: cat;
}

.content.list a .title-content {
grid-area: title;
}

.content.list a:last-child {
	margin-bottom: auto;
}





/*　ラベル　*/
.content .icon {
display: flex;
align-items: self-start;
flex-wrap: wrap;
gap: 5px;
}

.label {
	display: inline-block;
	font-size: 0.7rem;
	line-height: 100%;
	padding: 5px 10px 7px 10px;
}

body.single main .icon.sticky {
position: relative;
}

body.single main .icon.sticky:before,
.sticky .icon:before {
	display: inline-block;
	content: "ピックアップ";
	font-size: 0.7rem;
	line-height: 100%;
	padding: 5px 10px 7px 10px;
position: absolute;
right: 0;
top: 0;
}

body.single main .icon.sticky:before,
.content.list .sticky .icon:before {
	position: relative;
}





/*　タイトル　*/
body.single main .post-title {
	padding-right: var(--spacing-outer);
	padding-left: var(--spacing-outer);
}

.content.thumbnail .title-content {
	margin-top: 10px;
display: grid;
}

.content.thumbnail .title-content span {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}





/*　日付　*/





/*　ボタン　*/
.button-postlist {
display: flex;
justify-content: center;
}

.button-postlist a {
	display: block;
	text-align: center;
	text-decoration: none;
	margin: 32px 8px 0 8px;
}





/*　投稿一覧　*/





/*　投稿　*/
body.single main .icon {
	line-height: 100%;
	padding: 10px;
	padding-right: var(--spacing-outer);
	padding-left: var(--spacing-outer);
display: flex;
gap: 5px;
flex-wrap: wrap;
}

body.single main .date-time {
	text-align: right;
	padding: 10px;
	padding-right: var(--spacing-outer);
	padding-left: var(--spacing-outer);
}

body.single main .date-time span {
	display: inline-block;
}





/*　検索結果　*/
body.search-results .type-page .icon,
body.search-results .type-page .date-time {
	display: none;
}

body.search-results .type-page .title-content {
	margin-top: auto;
}





/*　ページ送り　*/
.page-navigation {
	margin-right: 8px;
	margin-left: 8px;
display: grid;
flex-wrap: wrap;
}

.page-navigation.top {
	margin-bottom: 32px;
}

.page-navigation.bottom {
	margin-top: 32px;
	margin-bottom: 100px;
}

.page-navigation > div {
display: flex;
}

.page-navigation .right {
justify-content: flex-end;
}

.page-navigation a {
	display: block;
	max-width: initial;
	max-width: 350px;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0.5rem 1rem 0.5rem 1rem;
position: relative;
}

.page-navigation .prev-link {
	text-align: right;
	padding: 0.5rem 2rem 0.5rem 1rem;
}

.page-navigation .next-link {
	padding: 0.5rem 1rem 0.5rem 2rem;
}

.page-navigation .next-link::after {
	display: block;
	content: "";
	width: 11px;
	height: 11px;
position: absolute;
top: 15px;
left: 20px;
transform: rotate(-135deg);
}

.page-navigation .prev-link::after {
	display: block;
	content: "";
	width: 11px;
	height: 11px;
position: absolute;
right: 20px;
top: 15px;
transform: rotate(45deg);
}





/*　お知らせ（ホーム）　*/