/*
 * base css 
 * pc width 1000px fixed
 */

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

@media (min-width: 768px) {
}


/* ---------------------------------------- common */

:root {
	--color-0191d8: #0191d8;
	--color-c7c7c7: #c7c7c7;

	--color-057cb2: #057cb2;
	--color-e7f3fa: #e7f3fa;
	--color-b65555: #b65555;
	--color-feeded: #feeded;
	--color-2e8d22: #2e8d22;
	--color-e0f9dd: #e0f9dd;
	
	--color-0b83c6: #0b83c6;
}

@media (max-width: 767px) {
	main {
		font-size: clamp(0.75rem, 0.571rem + 0.89vw, 1rem); /* 320-767 12-16 */
		padding: 4em 0 2em;
	}
	main .inner {
		padding: 0 1em;
	}
	main article {
		margin: 0 0 3em;
	}
}

@media (min-width: 768px) {
	main {
		font-size: clamp(0.813rem, 0.1rem + 1.49vw, 1rem); /* 768-970 13-16 */
		padding: 6em 1em 2em;
	}
	main .inner {
		max-width: 970px;
		margin: 0 auto;
	}
	main article {
		margin: 0 0 5em;
	}
}

/* title */

article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
	font-family: 'BIZ UDGothic', sans-serif;
	font-style: normal;
	font-weight: 700;
	line-height: 1.4;
}

article h1 { 
	border-bottom: 2px var( --color-0191d8 ) solid;
	padding: 0 0 .25em;
	margin: 0 0 1em; 
}
article h1 + table.description {
	line-height: 1.6;
	margin: 0 0 2em;
}
article h1 + table.description th { font-weight: 700; }

section ul li h2 {
	margin: 0 0 .75em;
}
section ul li .inside > p { line-height: 1.6; }
section ul li .inside > p a { color: var( --color-0b83c6 ); }
section ul li .inside > p a:hover { opacity: .5; }

@media (max-width: 767px) {

	article h1 { font-size: clamp(1.25rem, 1.026rem + 1.12vw, 1.563rem); }
	article h1 + table.description th,
	article h1 + table.description td {
		display: block;
	}
	article h1 + table.description th::after {
		content: "："; 
	}
	article h1 + table.description td.separator {
		display: none;
	}
	section ul li h2 { font-size: clamp(1rem, 0.821rem + 0.89vw, 1.25rem); }

}

@media (min-width: 500px) {

	article h1 { font-size: clamp(1.563rem, -0.101rem + 3.47vw, 2rem); }
	section ul li h2 { font-size: clamp(1rem, 0.05rem + 1.98vw, 1.25rem); }

	section ul li .cate span { font-size: clamp(0.688rem, -0.025rem + 1.49vw, 0.875rem); }
}

/* list */

section ul li {
	border: 1px var( --color-c7c7c7 ) solid;
	padding: 1.25em;
}
section ul li > figure img {
	width: 100%;
	aspect-ratio: 1 / 0.695;
	object-fit: cover;
	object-position: center;
}
section ul li:not(:last-child){ margin: 0 0 2em; }

section ul li > .inside .catday .cate a { 
	display: inline-block;
	margin: 0 .5em .5em 0; 
}

section ul li > .inside .catday span {
	display: inline-block;
	padding: .4em;
	border-radius: 4px;
	margin: 0 .25em 0 0;
}
section ul li > .inside .catday span.cate01 {
	color: var( --color-057cb2 );
	background: var( --color-e7f3fa );
}
section ul li > .inside .catday span.cate02 {
	color: var( --color-b65555 );
	background: var( --color-feeded );
}
section ul li > .inside .catday span.cate03 {
	color: var( --color-2e8d22 );
	background: var( --color-e0f9dd );
}

@media (max-width: 767px) {

	section ul li > .inside h2 { margin: 0; }
	section ul li > .inside h2 + p { display: none; }
}

@media (max-width: 499px) {

	section ul li > figure { margin: 0 0 1em; }
	section ul li > .inside .catday .date { margin: 0 0 .5em; }

}

@media (min-width: 500px) {

	section ul li {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	section ul li > figure { width: 21%; }
	section ul li > .inside { width: 75%; }
	
	section ul li > .inside .catday {
		display: flex;
		align-items: center;
	}
	section ul li > .inside .catday .date { margin: 0 2em 0 0; }

}

@media (min-width: 500px) and (max-width:767px) {

	section ul li > figure { width: 40%; }
	section ul li > .inside { width: 55%; }
	section ul li > .inside .catday { display: block; }
	section ul li > .inside .catday .date { margin: 0 0 .5em; }

}

/* breadcrumbs */
/*
main #breadcrumb-wrap .inner {
	max-width: 970px;
	padding: 0;
	margin: 0 auto 2em;
}
*/
#breadcrumb-wrap { line-height: 2; }
#breadcrumb-wrap i {
	color: var( --color-057cb2 );
	margin: 0 .5em 0 0;
}
#breadcrumb-wrap a:hover {
	color: var( --color-057cb2 );
}
@media (max-width: 767px) {
	#breadcrumb-wrap { 
		padding: 0 1em 2em; 
	}
}

@media (min-width: 768px) {
	#breadcrumb-wrap { 
		padding: 0 1em 2em; 
	}
	#breadcrumb-wrap .inner { 
		max-width: 1170px;
		margin: 0 auto;
	}
}

/* ---------------------------------------- catelist */

:root {
	--catelist-base-color: #0B83C6;
}

.catelist {
	max-width: 750px;
	border: 2px var( --catelist-base-color ) solid;
	border-radius: 1em;
	padding: 0 0 .5em;
	margin: 0 auto 1em;
	overflow: hidden;
}
.catelist h2 { 
	color: #fff;
	background: var( --catelist-base-color );
	border-radius: 0; 
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-style: normal;
	font-weight: 700;
	line-height: 1.4;
	padding: .4em 1em .5em;
	margin: 0;
}
.catelist ul {
	list-style: none;
	padding: .5em 1em;
	margin: 0 0 .5em;
}
.catelist ul li {
	border-bottom: 1px var( --catelist-base-color ) dashed;
	padding: 0;
}
.catelist ul li::before { content: none; }
.catelist ul li + li { margin: .5em 0 0; }
.catelist ul li a {
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.catelist ul li a:hover { color: var( --catelist-base-color ); }
.catelist ul li p { 
	line-height: 1.4; 
	margin: 0;
}

.catelist .pagelink { text-align: center; }
.catelist .pagelink a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 12em;
	min-width: 30%;
	color: #fff;
	background: var( --catelist-base-color );
	font-style: normal;
	font-weight: 700;
	padding: 1em;
	border-radius: 10px;
	margin: 0 auto;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.catelist .pagelink a:hover { opacity: .5; }
.catelist .pagelink a img {
	width: auto;
	height: 1em;
	margin: 0 0 0 2em;
}

@media (max-width: 767px) {
	.catelist h2 {
		font-size: clamp(0.938rem, 0.803rem + 0.67vw, 1.125rem);
	}
	.catelist ul li a {
		display: block;
		padding: .5em 0;
	}
	.pagelink a { font-size: clamp(0.688rem, 0.598rem + 0.45vw, 0.813rem); }
	.catelist ul li a p.date { margin: 0 0 .25em; }
}

@media (min-width: 768px) {
	.catelist h2 {
		font-size: clamp(1rem, 0.05rem + 1.98vw, 1.25rem);
	}
	.catelist ul li a {
		display: table;
		width: 100%;
		padding: .5em 0;
	}
	.catelist ul li a p {
		display: table-cell;
		vertical-align: top;
	}
	.catelist ul li a p.date { width: 6.5em; }
	.pagelink a { font-size: clamp(0.688rem, -0.025rem + 1.49vw, 0.875rem); }
}

/* ---------------------------------------- mainimg */

#mainimg img {
	width: 100%;
	vertical-align: text-top;
	line-height: 1;
}