@charset "utf-8";
/* CSS Document */

/***** PHOTO-CONTENTS ***********************************************/
.photo-contents{
	display: block;
	width; 99%;
	margin: 0 auto;
}

.photo-contents h1{
	color :#7c0451;
	margin: 15px auto;
	text-align: center;
	font-size: 1.5rem;
}

		/** デスクトップ 900px OVER *************************/
			@media only screen and (min-width: 900px) {
				.photo-contents{
					width: 100%
				}
			}

.photo-album{
	overflow: hidden;
	width: 99%;
	margin: 0 auto;
	border: 1px solid #7c0451;
	background: #fff;
}

.album-list {
	display: grid;
	gap: 6px;
	grid-template-columns: repeat(auto-fit,minmax(100px, 1fr));
	padding: 6px;
}

.photobox {
	overflow: hidden;
	border: 1px solid #7c0451;
	width: 99%;
	margin: 0 auto 10px;
}

.photobox p{
	padding: 0.5em;
}

.photolist{
	display :flex;
	display: -webkit-flex;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
}

.photolist-grid{
	display: grid;
	gap: 6px;
	grid-template-columns: repeat(auto-fit,minmax(100px, 1fr));
	padding: 6px;
}

.photolist li {
	width: 23.98%;
	margin-left: 0.85%;
	margin-top: 1%;
}

.photolist li:last-child{
	margin-bottom: 1%;
}

.photolist a:hover, .album-list a:hover{
	Opacity: 0.7;
}

		/** デスクトップ 900px OVER *************************/
			@media only screen and (min-width: 900px) {
				.photobox{
					width: 100%;
				}
			}


		/** デスクトップ 1280px OVER *************************/
			@media only screen and (min-width: 1280px) {
				.photo-album{
					width: 100%;
				}
			}
			
.rotate {
  transform:rotate(90deg);    /* 中心を基準点に回転する */
}


/** Responsiv 600px OVER **********************/
	@media only screen and (min-width: 600px) {
		.rotate {
			transform:rotate(0);    /* 中心を基準点に回転しない */
		}
	}