@charset "UTF-8";


/* ================================================================================
kv
================================================================================ */
@media print, screen
{

#kv .jp
{
	margin-bottom: calc(15 * var(--v));

	color: white;
	font-size: 2rem;
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.05em;
}
#kv .en
{
	color: white;
	text-align: center;
	letter-spacing: 0.1em;
}

}


/* ================================================================================
archive
================================================================================ */
/*
@media print, screen
{

.postList
{
	display: flex;	flex-wrap: wrap;	align-items: stretch;
	gap: calc(20 * var(--u));
}

.postList > li.noItem,
.postList > li.noMoreItem,
.postList > li.loadMoreItem
{
	display: flex;	justify-content: center;	align-items: center;
	display: none;
	padding: calc(10 * var(--v));
	color: var(--Cgray2);
}
.postList > li
{
	width: calc((100% - 2 * 20 * var(--u))/3);
	display: flex;	align-items: stretch;
}
.postList > li a
{
	padding: calc(25 * var(--v)) calc(20 * var(--v));
	border: 1px solid rgb(220,220,220);
	text-decoration: none;
}
.postList > li .dates
{
	display: flex;
	gap: calc(15 * var(--v));
	margin: 0 0 calc(15 * var(--v));
}
.postList > li .date
{
	font-size: var(--fzv16);
	font-weight: 700;
}
.postList > li .cstegories
{
	display: flex;	flex-wrap: wrap;
	gap: calc(10 * var(--v));
}
.postList > li .cstegories li
{
	background: var(--Ctheme1);
	padding: 0.2em 1em 0.3em;

	color: white;
	font-size: var(--fzv12);
	text-align: center;
}
.postList > li picture
{
	width: 100%;	aspect-ratio: 16/9;
	margin: 0 0 calc(15 * var(--v));
}
.postList > li .title
{
	font-size: var(--fzv16);
	line-height: 1.7;
}

}
@media screen and (max-width: 767px)
{

.postList > li{	width: calc((100% - 1 * 20 * var(--u))/2);	}
	
}
*/


/* ================================================================================
archive
================================================================================ */
@media print, screen
{

#latest .postList
{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
#latest .postList > li
{
	flex: 1 1 calc(33.333% - 20px);
	max-width:calc(33.333% - 20px);
	border: 1px solid #ddd;
	padding: 20px;
	box-sizing: border-box;
}
#latest .postList > li .dates
{
	display: flex;
	/* gap: calc(15 * var(--v)); */
	/* margin: 0 0 calc(15 * var(--v)); */
}
#latest .postList > li .date
{
	font-size: 0.9rem;
	line-height: 1.7;
}
#latest .postList > li .cstegories
{
	/* display: flex;	flex-wrap: wrap; */
	/* gap: calc(10 * var(--v)); */
}
#latest .postList > li .cstegories li
{
	display: inline-block;
	background: #7295a4;
	min-width: 8em;
	padding: 1px 8px;
	margin: 0 0 0 10px;
	font-size: 12px;
}
#latest .postList > li .cstegories li p
{
	color: #fff;
	font-size: 12px;
	line-height: 1.7;
	text-align: center;
}
#latest .postList > li picture
{
	width: 100%;
	display: block;
	margin: 10px auto 0;
}
#latest .postList > li .title
{
	font-size: 0.9rem;
	font-weight: 400;
	color: #000;
	margin: 10px 0;
	line-height: 1.7;
}

}
@media screen and (max-width: 767px)
{
	
#latest .postList{	flex-direction: column;	}
#latest .postList > li
{
	flex: unset;
	max-width: unset;
	width: 100%;
}

	
}

/* ================================================================================
categories
================================================================================ */
@media print, screen
{

#categories .postList,
#category .postList
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 20px;
}
#categories .postList > li,
#category .postList > li
{
	border: 1px solid #ddd;
	padding: 20px;
	box-sizing: border-box;
}
#categories .postList > li .dates,
#category .postList > li .dates
{
	display: flex;
	/* gap: calc(15 * var(--v)); */
	/* margin: 0 0 calc(15 * var(--v)); */
}
#categories .postList > li .date,
#category .postList > li .date
{
	font-size: 0.9rem;
	display: block;
	margin-bottom: 10px;
}

#categories .postList > li picture,
#category .postList > li picture
{
	width: 100%;
	display: block;
	margin: 0 auto 10px;
	aspect-ratio: 16/9;
}
#categories .postList > li .title,
#category .postList > li .title
{
	font-size: 0.85rem;
	line-height: 1.7;
}


#categories .button {
	text-align: center;
	margin-top: 40px;
}
#categories .button a {
	display: inline-block;
	background: #000;
	padding: 10px 19px 11px 22px;
	transition: background 0.3s;
	min-width: 260px;
	border-radius: 5px;
}
#categories .button a p
{
	color: #fff;
	text-decoration: none;
	line-height: 1.7;
}

#categories .button a:hover {
	background: #7295a4;
}


}


/* ================================================================================
categories
================================================================================ */
@media print, screen
{

#categories h3
{
	padding-bottom: 0.5em;
	border-bottom: 1px solid black;
	font-size: var(--fzv20);
	font-weight: 500;
}
/* 
#categories .postList > li,
#category .postList > li
{	width: calc((100% - 3 * 20 * var(--u))/4);	}
 
#categories .button{	width: fit-content;	margin: 0 auto;	}
#categories .button a
{
	display: flex;	justify-content: center;	align-items: center;
	width: calc(260 * var(--v));	aspect-ratio: 260/50;
	background: black;
	border: 1px solid black;
	border-radius: calc(6 * var(--v));
}
#categories .button a p
{
	color: white;
	font-size: var(--fzv15);

}
*/
}
@media screen and (min-width: 768px) and (max-width: 1240px)
{
/* 
#categories .postList > li,
#category .postList > li
{	width: calc((100% - 2 * 20 * var(--u))/3);	}
 */
	
}
@media screen and (min-width: 768px)
{
/*
#categories .button a,
#categories .button a p
{	transition: var(--T02);	}

#categories .button a:hover{	background: white;	}
#categories .button a:hover p{	color: black;	}
*/
}
@media screen and (max-width: 767px)
{
/* 
#categories .postList > li,
#category .postList > li
{	width: calc((100% - 1 * 20 * var(--u))/2);	}
 */
}


/* ======================================== end ======================================== */