@charset "UTF-8";

@import "normalize.css";

/*------------ヘッダー------------*/

header h1 {
	background-image: url(../img/header/h-banner01.gif);
	background-repeat: no-repeat;
	margin: 0;
}

header h1 a {
	display: block;
	width: 320px;
	height: 90px;
	text-indent: -9999px;
	overflow: hidden;
}

header h2 {
	height: 0;
	text-indent: -9999px;
	margin: 0;
}

header h3 {
	height: 0;
	text-indent: -9999px;
	margin: 0;
}

/*------------フッター------------*/
footer nav p {
	float: right;
	margin-right: 30px;
}
footer p.copy {
	clear: both;
	background-color: #666;
	padding: 20px 0;
	text-align: center;
	margin: 0px;
	color: #CCC;
}

/*------------記事------------*/

article h1 {
	height: 5px;
	text-indent: -9999px;
	background-color: #9460a0;
	margin: 0 0 10px 0;
}

article h2.slider-h {
	height: 0;
	text-indent: -9999px;
	margin: 0;
}

.top-topics {
	background:#eee;
	padding-top: 10px;
}

.contents {
	width: 1024px;
	margin: 50px auto;
/*	overflow: hidden;*/
}

.contents h2 {
	position: relative;
	padding-left: 30px;
/*	clear: both;*/
}

.contents h2:before {
	position: absolute;
	content: "";
	bottom: -3px;
	left: 0;
	width: 0;
	height: 0;
	border: none;
	border-left: solid 20px transparent;
	border-bottom: solid 20px #9460a0;
}

.contents h2:after {
	position: absolute;
	content: "";
	bottom: -3px;
	left: 10px;
	width: 100%;
	border-bottom: solid 3px #9460a0;
}

.contents ul {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}


.contents ul li {	
	margin: 15px 15px 15px 15px;
  	position: relative;/*波紋の基点となる位置を定義*/
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}

.contents ul li::before {
	position: absolute;
	content:"";
	transform: scale(0);/*円の大きさ初期値は0*/
	opacity: 0;/*透過0*/
	width:100%;/*円のサイズ指定*/
	height:100%;/*円のサイズ指定*/
	border-radius:50%;/*円の角丸指定*/
	background: rgba(255,255,255,0.4);/*円の背景色*/
}

.contents ul li:hover::before {/*hoverした時の変化*/
	animation: circle 0.75s;/*アニメーションの名前と速度を定義*/
}

.contents ul li a {
	text-decoration: none;
}

.contents ul li figure {
	margin: 0;
}

.contents ul li figcaption {
	position: relative;
	padding: 30px 10px 30px 40px;
	border: solid 1px #999;
	/*border-right: solid 1px #999;
	border-bottom: solid 1px #999;
	border-left: solid 1px #999;*/
	display: block;
	font-size: 1.2em;
	color: #6247aa;
	font-weight: bold;
}

.contents ul li a figcaption::before {
	position: absolute;
	top: 29px;
	left: 12px;
	font-family: FontAwesome;
	content: "\f0a9";

	
}

@keyframes circle {
	0% {
		transform: scale(0);
		opacity: 1;/*透過なし*/
	}
	30% {
    	opacity: 1;
	}
	100% {
		transform: scale(2);/*アニメーションで大きくなった2倍の円の指定*/
	}
}

.contents details {
	border: solid 1px #c19ee0;
	margin: 50px;
}

.contents details:not(:last-child) {
	margin-bottom: 20px;
}

.contents details summary {
	list-style: none;
	cursor: pointer;
	padding: 20px;
	background: #dec9e9;
	color: #4d2b6e;
	font-size: 1.5rem;
	font-weight: bold;
}

.contents details summary::-webkit-details-marker {
	display: none;
	
}

.contents details[open] summary {
	background-color: #9460a0;
	color: #fff;

}

.contents details summary::before {
	font-family: FontAwesome;
	content: "\f067";
	margin-right: 20px;
}

.contents details[open] summary::before {
	content: "\f068";
	color: #fff;
}

.contents details p {
	padding: 10px 20px;
}

.contents details h3 {
	padding: 10px 20px;
}

.contents details table {
	width: 95%;
	margin: 20px;
}

.contents details table thead {
	background-color: #dec9e9;
}

.contents details table,.contents details td,.contents details th {
	padding: 10px 20px;
	border-collapse: collapse;
	border: solid 1px #c19ee0;
}

/*------------画面サイズ------------*/
@media only screen and (max-width:1100px) {

	.contents {
		width: auto;
		margin: 0;
		padding: 0 50px;
	}
	
	.contents h2 {
		margin-right: 20px;
	}

	.contents ul {
		width: 90%;
	}

	.contents ul li {
		width: 45%;
		margin-left: 0;
	}

	.contents img {
		width: 100%;
	}
	
}

@media only screen and (max-width:599px) {
		
	.contents {
		padding: 0;
	}
	
	.contents h2 {
		margin-right: 20px;
	}
	
	.contents ul {
		width: 96%;
		padding: 0 0 0 15px;
	}

	.contents ul li {
		width: 96%;
		margin: 10px 0;
	}

	.contents img {
		width: 100%;
	}
	
	.contents p {
		padding: 0 20px;
	}
	
	.contents details {
		margin: 15px;	
	}

	.contents details summary {
		font-size: 1rem;
	}
	
	.contents details table {
		width: 97%;
		margin: 5px;
	}
	
	.contents details table,.contents details td,.contents details th {
		padding: 5px;
	}

}