@charset "utf-8";

p {
	padding: 10px;
	margin-top: 0;
	text-align: center;
}

nav#page-navi {
	max-width: 580px;
	width: 100%;
	margin: 0 auto;
	.index-box {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		padding-top: 10px;
		padding-bottom: 20px;
		div {
			/* 6個並び（隙間を除いて約1/6） */
			flex: 0 0 calc((100% - 4px * 5) / 6);
			height: 40px;
			background-color: #d0c9ce;
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 3;
			text-align: center;
			a {
				display: inline-block;
				max-width: 170px;
				width: 100%;
				padding: 3px;
				color: #3e3d42
			}
		}
	}
}

#page-navi a:hover {
	background-color: #f2e5e5;
}				


/* ここから写真 */
#content {
	height: auto;
}
article h3{
	max-width: 800px;
	width: 100%;
	line-height:30px;
	padding-top:30px;
	background-image: none;
	border-bottom: 1px solid #17166f;
	margin: 10px 0px 30px 35px;
}
/* 一年ごとのまとまり（article） */
.year{
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
	width: 800px;
	margin: 0;
	padding-left: 70px;
}

/* 1枚ずつの箱（div class="year"の中の無名の箱） */
.year div{
	flex-direction: row;
	width:330px;
	height: auto;
	/* border:1px #999 dotted; */
	padding:5px;
	margin-right:12px;
	text-align:center;
	font-size: 85%;
		p.p-caption {
			margin: 0 0 3px 0;
			padding-top: 0;
		}
		.s-left {
			margin-top: 0;
			padding-top: -20px;
		}
}
	
.a{
		padding-top:30px;
}


@media only screen and (max-width: 767px) {

  #header-wrap header #logo {
	height: auto;
  }

  p {
	text-align: left;
  }

	nav#page-navi .index-box > div {
    flex: 0 0 calc((100% - 4px * 2) / 3);
  }

  article h3 {
	width: 82%;
  }

  .year {
    display: block;
	padding-left: 30px;
  }

  .year div{
		p.s-left {
			margin: 0;
			padding: 0 0 30px 30px;
			white-space: pre-line;
		}

}

	/* .index-box {
		display: flex;
		flex-wrap: wrap;
	}

	.index-box > div {
		flex: 0 0 calc((100% - 4px * 2) / 3);
	}

	.year {
		display: block;
	} */

	
}