@charset "utf-8";
/*--main-viewのスタイル設定--*/

.main-photo {
	display: block;
	width: 80%;
	margin: 20px auto;
}

.main-view2 {
	position: relative;/*-main-viewの要素を起点として相対位置-*/
}
.main-view2:before {/*-高さを出すための応急手段-*/
	content: "";
	display: block;
	padding-bottom: 36.7%;/*-画像の「高さの比率÷幅の比率×100」％（画像の縦横比を保つための指定）-*/
}

.main-view2 img {
	width: 50%;/*--body幅に収めるためにここに記載- */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;							/*--main-viewの起点からの絶対位置指定--*/
	left: 0;
	margin: auto;
	animation: top-show 30s ease-in 0s infinite normal;
	opacity: 0;
}
@keyframes top-show {/*---------アニメーションの指定--*/
	0% { opacity:0; }
	17% { opacity:1; }
	33% { opacity:1; }
	50% { opacity:0; } 
}
.main-view2 img:nth-of-type(1) {/*------各画像のアニメーションの開始時間をずらす指定*/
	animation-delay: 0s;
}
.main-view2 img:nth-of-type(2) {
	animation-delay: 10s;
}
.main-view2 img:nth-of-type(3) {
	animation-delay: 17s;
}
.main-view2 img:nth-of-type(4) {
	animation-delay: 24s;
}

/*--main-viewのスタイル設定--ここまで--*/

/* ポストのアコーディオン設定 */

.details {
	transition: .3s;
	overflow: hidden;
	margin-top: -10px;
	padding-bottom: 20px;
}

.syusei {
	width: 100%;
}

.details[open] {
	margin-top: 0;
	padding-bottom: 10px;
}

.details-summary {
	display: block;
	padding: 3px;
	transition: .3s;
	transform: translateY(10px);
	background-color: rgb(99, 245, 165);
	}

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

.details[open] .details-summary {
	transform: translateY(0);
}

.backnumber {
	width: 80%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: 0 auto;
	line-height: 1.5
	;
}

.backnumber-inner {
	width: 30%;
}

.backnumber p {
	padding: 10px 10px 10px 0;
}

.backnumber img {
	width: 100%;
}

/* ポストのアコーディオン設定ここまで */