@charset "UTF-8";

/*==========PC==========*/
@media screen and (min-width:767px) {

/*----------メインイメージ----------*/
	#page-title {
		position: relative;
		background-color: #f3ecd5;
		background-position: right top;
		background-size: cover;
		width: 100%;
		padding: 90px 20px;
		margin: 0 0 20px 0;
		z-index: 10;
	}
		
	#page-title section {
		position: relative;
		height: 480px;
	}
		
	#page-title section h1 {
		position: relative;
		font-size: 44px;
		font-weight: bold;
		line-height: 1;
		color:#28180e;
		text-align: left;
		-webkit-text-stroke: 1px #eae3cc;
	}
		

	#page-title.gallery {
		background-color:#f3ecd5;
		background-image: url(https://www.dvergr.jp/img/gallery-main-img00.jpg);
		background-position: center top;
		background-repeat: no-repeat;
		background-size: cover;
		height: 480px;
	}

	#page-title.gallery section {
			height: 480px;
	}

	#page-title.gallery section p {
		position: absolute;
		top: 240px;
		left: 20px;
		font-size: 24px;
		font-weight: normal;
		line-height: 1.4;
		letter-spacing: 0.04em;
		text-align: left;
	}

	#page-title.gallery section p span {
		color: #00b5f0;
	}


/*----------ギャラリー・リスト----------*/

	#gallery-list {
		width:100%;
		background-color: #fff;
	}
	#gallery-list section::after{
		content: "";
		display: block;
		clear: both;
		margin: 0 0 30px 0;
	}

	.gallery-category{
		position: relative;
		width: 100%;
		max-width: 1040px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 20px;
		padding-right: 20px;
	}
	.gallery-category h2{
		width: 100%;
		color:#67452f;
		font-size: 24px;
		font-weight: bold;
		line-height: 1.4;
		letter-spacing: 0.04em;
		text-align: left;
		margin: 0 0 10px 0;
		border-bottom:solid #67452f 2px;
	}
	.gallery-category-overview{
		font-size: 16px;
		margin: 0 0 24px 0;
	}


	.gallery-item{
		margin: 0 0 0 10px;
	}

	#gallery-list h3{
		width: 100%;
		color:#67452f;
		font-size: 18px;
		font-weight: bold;
		line-height: 1.4;
		letter-spacing: 0.04em;
		text-align: left;
		margin: 0 10px 20px 0;
		border-bottom:solid #a67c5f 1px;
		clear: both;
	}






	.gallery-item ul{
		padding: 0 0 30px 15px;
		display:-webkit-box;
		display:-moz-box;
		display:-ms-box;
		display:-webkit-flexbox;
		display:-moz-flexbox;
		display:-ms-flexbox;
		display:-webkit-flex;
		display:-moz-flex;
		display:-ms-flex;
		display:flex;
		-webkit-box-lines:multiple;
		-moz-box-lines:multiple;
		-webkit-flex-wrap:wrap;
		-moz-flex-wrap:wrap;
		-ms-flex-wrap:wrap;
		flex-wrap:wrap;
	}

	.gallery-item li{
		width: 225px;
		margin: 0 15px 15px 0;
		border: solid 1px #e8dcb6;
		background-color: #faf7ef;
		float: left;
	}
	.gallery-item li a{
		display: block;
		height: 100%;
	}
	.gallery-item li a{
		color:#67452f;
		background-color: #fefcf4;
	}
	.gallery-item li a:hover{
		color:#ff6e2d;
		background-color: #fff1e8;
	}
	.gallery-item li a h4{
		background-color: #f4eed4;
	}
	.gallery-item li a:hover h4{
		background-color: #ffe6d6;
	}
	.gallery-item li img{
		width: 100%;
	}
	.gallery-item li h4{
		width: 100%;
		text-align: center;
		font-size: 14px;
		font-weight: bold;
		line-height: 1.8;
		border-style: double;
		border-width: 3px 0 3px 0;
	}
	.gallery-item li p{
		display: block;
		height: auto;
		padding: 6px;
		margin: 0;
		font-size: 14px;
		line-height: 1.8;
		
	}


}



/*==========SP==========*/
@media screen and (max-width:767px) {

/*----------メインイメージ----------*/
	#page-title {
		position: relative;
		background-color: #f3ecd5;
		background-position: center top;
		background-size: cover;
		width: 100%;
		padding: 8vw 0 12vw 0;
		z-index: 10;
	}
		
	#page-title section {
		padding: 0 4vw;
	}
		
	#page-title section h1 {
		position: relative;
		font-size: 4.6vw;
		font-weight: bold;
		line-height: 1.2;
		color:#28180e;
		text-align: left;
		-webkit-text-stroke: 1px #eae3cc;
	}
		

	#page-title.gallery {
		background-color:#f3ecd5;
		background-image: url(https://www.dvergr.jp/img/gallery-main-img00.jpg);
		background-position: right top;
		background-repeat: no-repeat;
		background-size: cover;
	}
	#page-title.gallery section h1 {
		margin: 0 0 8vw 0;
	}
	#page-title.gallery section p {
		font-size: 2.73vw;
		font-weight: normal;
		line-height: 1.4;
		letter-spacing: 0.04em;
		text-align: left;
	}
	#page-title section p span {
		color: #00b5f0;
	}

/*----------ギャラリー・リスト----------*/
	#gallery-list {
		width:100%;
		background-color: #fff;
	}	
	#gallery-list section::after{
		content: "";
		display: block;
		clear: both;
		margin: 0 0 3vw 0;
	}


	.gallery-category{
		position: relative;
		padding-left: 0vw;
		padding-right: 0vw;
	}
	.gallery-category h2{
		width: 100%;
		color:#67452f;
		font-size: 3.6vw;
		font-weight: bold;
		line-height: 1.4;
		letter-spacing: 0.04em;
		text-align: left;
		margin: 0 0 1vw 0;
		border-bottom:solid #67452f 2px;
	}
	.gallery-category-overview{
		font-size: 2.8vw;
		margin: 0 0 3vw 0;
	}


	.gallery-item{
		margin: 0 0 0 1vw;
	}
	#gallery-list h3{
		display: block;
		width: 98%;
		color:#67452f;
		font-size: 3.2vw;
		font-weight: bold;
		line-height: 1.4;
		letter-spacing: 0.04em;
		text-align: left;
		margin: 0vw 2vw 3vw 0vw;
		border-bottom:solid #a67c5f 1px;
		clear: both;
	}





	.gallery-item ul{
		padding: 0vw 0vw 3vw 1vw;
		display:-webkit-box;
		display:-moz-box;
		display:-ms-box;
		display:-webkit-flexbox;
		display:-moz-flexbox;
		display:-ms-flexbox;
		display:-webkit-flex;
		display:-moz-flex;
		display:-ms-flex;
		display:flex;
		-webkit-box-lines:multiple;
		-moz-box-lines:multiple;
		-webkit-flex-wrap:wrap;
		-moz-flex-wrap:wrap;
		-ms-flex-wrap:wrap;
		flex-wrap:wrap;
	}

	.gallery-item li{
		width: 43vw;
		margin: 0 2vw 2vw 0;
		border: solid 1px #e8dcb6;
		background-color: #faf7ef;
		float: left;
	}
	.gallery-item li a{
		display: block;
		height: 100%;
	}
	.gallery-item li a{
		color:#67452f;
		background-color: #fefcf4;
	}
	.gallery-item li a:hover{
		color:#ff6e2d;
		background-color: #fff1e8;
	}
	.gallery-item li a h4{
		background-color: #f4eed4;
	}
	.gallery-item li a:hover h4{
		background-color: #ffe6d6;
	}
	.gallery-item li img{
		width: 100%;
	}
	.gallery-item li h4{
		width: 100%;
		text-align: center;
		font-size: 2.8vw;
		font-weight: bold;
		line-height: 1.8;
		border-style: double;
		border-width: 0.6vw 0 0.6vw 0;
	}
	.gallery-item li p{
		display: block;
		height: auto;
		padding: 1vw;
		margin: 0;
		font-size: 2.5vw;
		line-height: 1.8;
		
	}



}