@charset "utf-8";

body {
	background: #eee;
	margin: 0;
}

#container {
	background-image:	url("../images/bgphoto.jpg") ;
	background-attachment:	fixed ;
	background-size:		100% ;
	border-radius: 1em;
	max-width: 1200px;		/*最大幅の制限。これ以上広がらない。ここはpxでの指定*/
	margin: 0 auto 0;		/*最大幅超えたときに、水平位置中央に*/
	padding: 0 1em;
	color: #008000;
}

header,
footer,
main {		/*特に何も設定しない*/
}

/*h2*/
h2 {
	clear: both;
	margin-bottom: 15px;
	color: #fff;
	background: url(../images/woopin.jpg) no-repeat 20px center, linear-gradient(#6bf, #aaf);
	border-radius: 30px;
}


/*h3タグ*/
h3 {
	clear: both;
	margin-bottom: 15px;
	color: #333;
	background: linear-gradient(#fff, #ddd);
	border-radius: 30px;
	border: 1px solid #ccc;
	padding: 5px 20px;
}

/* table 枠・セル境界づけ */
table,
th,
td {
	border: 2px solid;
}

/***********アコーディオン**************/
.toggle {
	display: none;
}

.topic {		/*タイトル*/
	padding: 0.4em 1em;
	display: block;
	color: #fff;
	background: linear-gradient(#6bf, #aaf);
	border-radius: 30px;
}

.topic::before{		/*タイトル横の矢印をつける（上、右の境界線を白色で描き、４５度回転*/
	content:"";
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	position: absolute;
	top:calc( 50% - 3px );
	right: 2em;
	transform: rotate(135deg);
}

.topic,
.detail {
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.5s;
}

.detail {		/*本文*/
	height: 0;
	margin-bottom: 5px;
	padding:0 20px;
	overflow: hidden;
}

.toggle:checked + .topic + .detail {	/*開閉時*/
	height: auto;
	padding: 0;
	transition: all 0.5s;
}

.toggle:checked + .topic::before {
	transform: rotate(-45deg);
}



/*スマホの小さい画面ではフォントを小さくする*/
@media screen and (max-width:800px) {

body {
	font-size: 12px;
}

} /*media*/