@charset "UTF-8";

/**********************************************************************

main_test.css
2024.07.04 更新

**********************************************************************/
/* ブラウザスタイルの初期化
------------------------------------------------------------ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
strike, strong, sub, sup, tt, var,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0 auto;
	padding: 0;
}

a:link { text-decoration: none;}
a:visited {color: #800080; text-decoration: none;}
a:hover {color: #CC0000; text-decoration: none;}
img {
	vertical-align: bottom;
	border: none;
}

/* =================================================================== */
html {
	height: 100%;
}

/* フォント設定 */
html {
	font-size: 62.5%;
}

.font-size-S {
	font-size: clamp(1rem, calc(0.9rem + 0.625vw), 1.6rem);
}

.font-size-M {
	font-size: clamp(1.2rem, calc(1rem + 0.625vw), 1.7rem);
}

.font-size-L {
	/* font-size: clamp(2.4rem, calc(2.2rem + 0.625vw), 2.9rem); */
	font-size: clamp(1rem, calc(1.2rem + 0.625vw), 2rem);
}


body {
	background: url("../common/back.gif") repeat-y 50%;
	background-attachment: fixed; 
}

.container {
	max-width: 900px;
	width: 100%;
	height: 100%;
	margin: 0 auto;
}


/* ------------------------------------------------------------------------------------
 header
------------------------------------------------------------------------------------ */
header img {
	width: 100%;
}

/* Menu */
#Menu {
	max-width: 900px;
	margin: 1rem;
}

#Menu ul {
	display: flex;
	justify-content: center;
}

#Menu li img {
	width: 100%;
	height: 100%;
}


/* ------------------------------------------------------------------------------------
 main
------------------------------------------------------------------------------------ */
main {
	min-height: calc(100vh - 140px - 72px);
}


/* ------------------------------------------------------------------------------------
 footer
------------------------------------------------------------------------------------ */
footer {
	padding-top: 1rem;
	line-height: 1.6;
}

footer> .container {
	position: relative;
}

footer #Copy {
	position: absolute;
	text-align: right;
	top: 0;
	right: 0;
}

footer .footer-bg {
	width: 100%;
}

footer .footer-bg img {
	width: 100%;
	height: 100%;
}


/* ------------------------------------------------------------------------------------
 kaihou_list
------------------------------------------------------------------------------------ */
.pdf-guide {
	margin: 1rem;
}

/* pc */
@media screen and (min-width: 768px) {

	#page-kaihou_list h1 {
		border-bottom: 3px solid #003366;
		margin: 1rem 3rem;
		color: #003366;
	}
	
	#kaihou_list {
		max-width: 770px;
		width: calc(100% - 2rem);
		margin: 1.5rem auto 0;
	}

	#kaihou_list ul:after {
		content: "";
		clear: both;
		display: block;
	}

	#kaihou_list ul li {
		position: relative;
		list-style-type: none;
		display: block;
		float: left;
		margin-bottom: 1rem;
		margin-right: 1rem;
		width: calc((100% - 2rem) / 3);
		height: 100%;
		line-height: 2;
		background: #ffffff;
		text-align: center;
		font-size: clamp(1.2rem, calc(1rem + 0.625vw), 1.7rem);
	}

	#kaihou_list li:nth-child(3n) {
		margin-right: 0;
	}

	#kaihou_list .image {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
		border: 1px solid #999999;
	}

	#kaihou_list .image img {
		width: 100%;
		height: 100%;
		/* object-fit: cover; */
		backface-visibility: hidden;
	}

	#kaihou_list .category a {
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 2;
		background: #000000;
		color: #ffffff;
		min-width: calc(100% / 3);
		text-align: center;
		box-sizing: border-box;
	}

	#kaihou_list .title_area {
		display: block;
		height: 100%;
		padding: 1rem;
		position: relative;
		box-sizing: border-box;
	}

	#kaihou_list .title_area .title {
		line-height: 1.6;
		text-align: left;
		color: #000000;
		max-height: 4.8rem;
		overflow: hidden;
		font-weight: bold;
		-webkit-transition-property: color;
		-webkit-transition-duration: 0.2s;
		-webkit-transition-timing-function: ease;
		transition-property: color;
		transition-duration: 0.2s;
		transition-timing-function: ease;
	}

	#kaihou_list .title_area .title span {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}

	#kaihou_list .title_area .date {
		font-size: 0.75rem;
		line-height: 1;
		color: #999999;
		position: absolute;
		bottom: 1rem;
		left: 1rem;
	}

}


/* sp */
@media screen and (max-width: 767px) {

	#page-kaihou_list h1 {
		border-bottom: 3px solid #003366;
		margin: 1rem 0.5rem;
		color: #003366;
	}

	#kaihou_list {
		width: calc(100% - 2rem);
		padding: 0;
	}

	#kaihou_list ul:after {
		content: "";
		clear: both;
		display: block;
	}

	#kaihou_list ul li {
		position: relative;
		list-style-type: none;
		display: block;
		float: left;
		margin-bottom: 1rem;
		margin-right: 1rem;
		width: calc((100% - 1rem) / 2);
		height: 100%;
		line-height: 2;
		background: #ffffff;
		text-align: center;
		font-size: clamp(1.2rem, calc(1rem + 0.625vw), 1.7rem);
	}

	#kaihou_list li:nth-child(2n) {
		margin-right: 0;
	}

	#kaihou_list .image {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
		border: 1px solid #999999;
	}

	#kaihou_list .image img {
		width: 100%;
		height: 100%;
		/* object-fit: cover; */
		backface-visibility: hidden;
	}

	#kaihou_list .category a {
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 2;
		background: #000000;
		color: #ffffff;
		min-width: calc(100% / 4);
		text-align: center;
		box-sizing: border-box;
	}

	#kaihou_list .title_area {
		display: block;
		height: 100%;
		padding: 0.5rem;
		position: relative;
		box-sizing: border-box;
	}

	#kaihou_list .title_area .title {
		line-height: 1.6;
		text-align: left;
		color: #000000;
		max-height: 4.8rem;
		overflow: hidden;
		font-weight: bold;
		-webkit-transition-property: color;
		-webkit-transition-duration: 0.2s;
		-webkit-transition-timing-function: ease;
		transition-property: color;
		transition-duration: 0.2s;
		transition-timing-function: ease;
	}

	#kaihou_list .title_area .title span {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}

	#kaihou_list .title_area .date {
		line-height: 1;
		color: #999999;
		position: absolute;
		bottom: 1rem;
		left: 1rem;
	}

}