@charset "utf-8";

/*=============================================
	
	タイトル枠
	
==============================================*/
#top_title_wrap {
	text-align: center;
	background-color: #EDEAE9;
	position: relative;
	margin: 0 0 0;
	padding: 10em 0 5em;
}
#top_title_wrap .title {
	font-size: max(2.0em, 10px);
	line-height: 1.6;
}
#top_title_wrap .title span {
	font-size: 0.8em;
}
@media print, screen and (min-width: 769px) {
	#top_title_wrap {
		padding: 10em 0 5em;
	}
	#top_title_wrap .title_img {
		position: relative;
		bottom: 0;
		top: auto;
	}
	#top_title_wrap .title {
		font-size: max(4.0em, 10px);
	}
}

/*---------------------------------------------------------
	
	    一覧
	
---------------------------------------------------------*/
.photo_wrap {
	padding: 0 0;
	margin: 0 0 5em;
}
.photo_wrap .container {
	width: 100%;
	margin: 0;
	padding: 0;
}
.photo_wrap ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.photo_wrap ul li {
	position: relative;
	margin: 0;
	padding: 0;
}
.photo_wrap ul li.tate {
	width: 50%;
	height: auto;
}
.photo_wrap ul li.tate img{
	width: 100%;
    aspect-ratio: 900 / 1350;
    object-fit: cover;
}
.photo_wrap ul li.tate.full {
	width: 100%;
	height: auto;
}
.photo_wrap ul li.tate.full img{
	width: 100%;
    aspect-ratio: 900 / 1350;
    object-fit: cover;
}

.photo_wrap ul li.yoko {
	width: 100%;
	height: auto;
}
.photo_wrap ul li.yoko img {
	width: 100%;
    aspect-ratio: 900 / 600;
    object-fit: cover;
}

@media print, screen and (min-width: 769px) {
	.photo_wrap {
		padding: 0 0;
	}
	.photo_wrap .container {
		width: 100%;
		max-width: 100%;
		min-width: 100%;
	}
	.photo_wrap ul {
		justify-content: flex-start;
		align-items: flex-start;
	}
	/* JS(justified-gallery.js)がwidth/heightをインラインで直接指定するため
	   ここでは幅・高さ・aspect-ratioを一切固定しない */
	.photo_wrap ul li {
		flex-grow: 0;
		max-width: none;
	}
	.photo_wrap ul li img {
		object-fit: cover;
		width: 100%;
		height: 100%;
		display: block;
	}
	.photo_wrap ul li.tate,
	.photo_wrap ul li.tate.full,
	.photo_wrap ul li.yoko {
		width: auto;
		height: auto;
	}
}
/* 1280px以上・1441px以上のheight固定ルールはJSに一本化するため削除。
   基準の高さを変えたい場合は justified-gallery.js 側の
   CONFIG.targetRowHeight を画面幅ごとに出し分けてください（後述） */


/*=============================================
	
	ボタン
	
==============================================*/
main .btn_list {
	width: 74%;
	margin: 0 auto 5em;
	padding: 1.5rem 8%;
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;

}
main .btn_list div {
	text-align: center;
	margin: 0 0 1rem;
}
main .btn_list div:last-of-type {
	margin: 0 0 0;
}
main .btn_list div a {
	display: block;
	background-color: #887249;
	color: #FFF;
	padding: 0.5rem 0;
	font-size: 0.9em;
}
@media screen and (min-width: 768px) {
	main .btn_list {
		width: 80%;
		min-width: 720px;
		max-width: 960px;
		margin: 0 auto 90px;
		padding: 50px 0;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	main .btn_list div {
		margin: 0 5% 0;
		width: 40%;
	}
	main .btn_list div:last-of-type {
		margin: 0 5% 0;
	}
	main .btn_list div a {
		padding: 20px 0;
		font-size: 13px;
	}
}