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

@media (max-width: 599px) {
} /* end -599 */

@media (min-width: 600px) and (max-width:959px) {
} /* end 600-959 */

@media (min-width: 960px) {
} /* 960- */


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



/* ---------------------------------------- visual */

#visual {
	width: 100%;
	text-align: center;
	position:relative;
}
#visual .inside {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	background: #fff;
	padding: .5em;
	border-radius: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#visual .detail h2 {
	color: #2c7896;
	font-size: clamp(1.6rem, 2vw + 0.75rem, 2.8rem);
	line-height: 1.5;
	font-weight: bold;
}
#visual .detail h2 + p {
	color: #666;
	font-size: clamp(1.4rem, 1vw + 0.75rem, 1.8rem);
	margin: 5px 0 0;
}

@media (max-width: 500px) {
	#visual { height:170px; } /* 270px */
	#visual .inside { 
		min-width: 120px;
		height: 120px; 
	}
} 

@media (min-width: 501px) and (max-width:700px) {
	#visual { height:240px; } /* 300px */
	#visual .inside { 
		min-width: 150px;
		height: 150px; 
	}
} 

@media (min-width: 701px) and (max-width:1179px) {
	#visual { height:240px; } /* 380px */
	#visual .inside { 
		min-width: 200px;
		height: 200px; 
	}
} 

@media (min-width: 1180px) {
	#visual { height:240px; } /* 440px */
	#visual .inside { 
		min-width: 200px;
		height: 200px; 
	}
} 

/* ---------------------------------------- main */

main {
	font-size: 1.6rem;
	line-height: 2;
	padding: clamp(5rem, 5vw + 2.5rem, 9rem) 20px;
}
main .inner {
	max-width: 1180px;
	margin: 0 auto;
}

/* ---------------------------------------- table */

th, td {
	font-size: clamp(1.3rem, 2vw - 0.25rem, 1.4rem) !important;
	line-height: 2.4;
}

/* ---------------------------------------- post-addimg */

.post-addimg h3,
.post-addimg h4 { 
	color: var( --base-blue ); 
	margin: 0 0 .75em;
}
.post-addimg > figure { text-align: center; }
.post-addimg > figure img { vertical-align: text-top; border: 1px var( --gray-color ) solid; }
.post-addimg.img30 > div p { line-height: 1.8; }
.post-addimg .archivelink { width: 40%; }


@media (max-width: 767px) {
	.post-addimg > figure + div,
	.post-addimg > div + figure {
		margin: 1.5em 0 0;
	}
	.post-addimg h3,
	.post-addimg h4,
	.post-addimg .date { text-align: center; }
	.post-addimg > div .archivelinks { margin: 1em 0 0; }
	.post-addimg p.archivelinks .archivelink { width: 40%; }
} 

/* 718px幅はプリンター用 */ 
/* @media (min-width: 768px) */ 
@media (min-width: 718px) {
	.post-addimg {
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
	.post-addimg.reverse {
		-webkit-flex-direction: row-reverse;
		-ms-flex-direction: row-reverse;
		flex-direction:row-reverse;
	}
	.post-addimg.img40 > figure { width: 30%;}
	.post-addimg.img40 > div { width: 65%; }
	.post-addimg.img30 > figure { width: 30%; }
	.post-addimg.img30 > div { width: 65%; }
	.post-addimg > div .archivelinks { 
		text-align: right;
		margin: 1em 0 0;
	}
} 

/* ---------------------------------------- archivelink */

.archivelinks {
	text-align: center;
	margin: 3em 0 0;
}
.archivelink {
	display: inline-block;
	min-width: 30%;
	color: var( --blue-color );
	border: 1px var( --blue-color ) solid;
	background: url( ../images/common/icon-arrow-right.svg ) no-repeat center right .5em;
	background-size: .5em auto;
	text-align: center;
	padding: 1em 1em;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.archivelink.whitelink { background-color: #fff;}
.archivelink:hover {
	color: #fff;
	background: var( --blue-color ) url( ../images/common/icon-arrow-right-w.svg ) no-repeat center right .5em;
	background-size: .5em auto;
}
.archivelink.whitelink:hover { border: 1px #fff solid; }