@charset "utf-8";

@media screen and (min-width : 960px){

	/* -------------------------------------------------------------------------------------------
	*
	* ギャラリー
	*
	* ----------------------------------------------------------------------------------------- */

	#gallery{
	}

	#gallery h3{
		position: relative;
		height: 2.4rem;
		margin: 0 0 6rem 0;
		font-size: 2rem;
		}
		#gallery h3::after{
			content: '';
			display: block;
			width: 100%;
			height: 2px;
			background-color: #222222;
			position: absolute;
			margin: auto;
			top: 0; bottom: 0; left: 0; right: 0;
			z-index: 0;
		}
	#gallery h3 p{
		position: absolute;
		top: 0; left: 0;
		z-index: 1;
		background-color: #ffffff;
		font-size: 2rem;
		letter-spacing: 0.15rem;
		padding: 0 2rem 0 0;
	}

	#gallery>div.inner>ul{
		display: flex;
		flex-wrap: wrap;
	}
	#gallery>div.inner>ul>li{
		/*display: inline-block;*/
		/*vertical-align: top;*/
		box-sizing: border-box;
		width: 43.5%;
		/*height: 41vw;*/
		/*min-height: 450px;*/
		/*max-height: 540px;*/
		border-style: solid;
		border-color: #222222;
		border-width: 0 0 2px 0;
		position: relative;
		-webkit-transition: 0.5s;
		transition: 0.5s;
		}
		#gallery>div.inner>ul>li:nth-of-type(n+2){
			margin: 0 0 0 12%;
		}
		#gallery>div.inner>ul>li:nth-of-type(n+3){
			margin-top: 5rem;
		}
		#gallery>div.inner>ul>li:nth-of-type(2n+1){
			margin-left: 0;
		}
		#gallery>div.inner>ul>li:nth-of-type(even) a{
			-webkit-transition-delay: 0.3s;transition-delay: 0.3s;
		}

	#gallery>div.inner>ul>li>a{
		display: inline-block;
		vertical-align: top;
	}

	#gallery>div.inner>ul>li>a>p.photo{
		overflow: hidden;
		border-radius: 2%;
		}
		#gallery>div.inner>ul>li>a>p.photo.border{
			border: 1px solid #cccccc;
			box-sizing: border-box;
		}

	#gallery>div.inner>ul>li>a>p.photo img{
		-webkit-transform: scale(1,1);
		transform: scale(1,1);
		-webkit-transition-duration: 0.5s;
		transition-duration: 0.5s;
	}
	#gallery>div.inner>ul>li:hover>a>p.photo img{
		-webkit-transform: scale(1.03,1.03);
		transform: scale(1.03,1.03);
	}

	#gallery>div.inner>ul>li>a>p.project{
		position: absolute;
		top: 8rem; left: 66%;
		width: 17rem;
		font-size: 0.9rem;
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
		letter-spacing: 0.02rem;
	}

	#gallery>div.inner>ul>li>a>div.text{
		margin: 1.8rem 0 0 0;
		line-height: 1;
	}

	#gallery>div.inner>ul>li>a>div.text>p.date{
		font-size: 0.9rem;
		margin: 0 0 0.5rem 0;
		letter-spacing: 0.03rem;
	}
	#gallery>div.inner>ul>li>a>div.text>p.effort{
		font-size: 1.2rem;
		margin: 0 0 0.3rem 0;
		letter-spacing: 0.04rem;
		line-height: 1.3;
		}
		#gallery>div.inner>ul>li.special>a>div.text>p.effort{
			/*font-size: 1.0rem;*/
		}
	#gallery>div.inner>ul>li>a>div.text>p.name{
		font-size: 1.2rem;
		letter-spacing: 0.04rem;
		line-height: 1.3;
		}
		#gallery>div.inner>ul>li.special>a>div.text>p.name{
			font-size: 1.0rem;
		}
	#gallery>div.inner>ul>li>a>div.text>ul.type{
		font-size: 0.9rem;
		margin: 0.5rem 0 2.5rem 0;
		letter-spacing: 0.02rem;
	}
	#gallery>div.inner>ul>li>a>div.text>ul.type li{
		display: inline-block;
		vertical-align: top;
		}
		#gallery>div.inner>ul>li>a>div.text>ul.type li:nth-of-type(n+2){
			margin: 0 0 0 1rem;
		}


}@media screen and (max-width : 959px){

	/* -------------------------------------------------------------------------------------------
	*
	* ギャラリー
	*
	* ----------------------------------------------------------------------------------------- */

	#gallery{
		width: 74vw;
		margin: 0 auto;
	}

	#gallery h3{
		position: relative;
		height: 6vw;
		margin: 0 0 12vw 0;
		font-size: 7vw;
		}
		#gallery h3::after{
			content: '';
			display: block;
			width: 100%;
			height: 2px;
			background-color: #222222;
			position: absolute;
			margin: auto;
			top: 0; bottom: 0; left: 0; right: 0;
			z-index: 0;
		}
	#gallery h3 p{
		position: absolute;
		top: 0; left: 0;
		z-index: 1;
		background-color: #ffffff;
		font-size: 6vw;
		letter-spacing: 0.3vw;
		padding: 0 2vw 0 0;
		line-height: 1;
	}

	#gallery>div.inner>ul{
	}
	#gallery>div.inner>ul>li{
		display: inline-block;
		vertical-align: top;
		box-sizing: border-box;
		border-style: solid;
		border-color: #222222;
		border-width: 0 0 2px 0;
		position: relative;
		-webkit-transition: 0.5s;
		transition: 0.5s;
		}
		#gallery>div.inner>ul>li:nth-of-type(n+2){
			margin-top: 16vw;
		}
		#gallery>div.inner>ul>li a{
			display: inline-block;
			vertical-align: top;
			-webkit-transition-delay: 0.3s;transition-delay: 0.3s;
		}

	#gallery>div.inner>ul>li>a>p.photo{
		overflow: hidden;
		border-radius: 2vw;
		}
		#gallery>div.inner>ul>li>a>p.photo.border{
			border: 1px solid #cccccc;
			box-sizing: border-box;
		}

	#gallery>div.inner>ul>li>a>p.project{
		position: absolute;
		top: 35vw; left: 42vw;
		width: 100%;
		font-size: 3.5vw;
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
		letter-spacing: 0.2vw;
	}

	#gallery>div.inner>ul>li>a>div.text{
		margin: 6vw 0 7vw 0;
		line-height: 1;
	}
	#gallery>div.inner>ul>li>a>div.text>p.date{
		font-size: 3.2vw;
		margin: 0 0 2vw 0;
		letter-spacing: 0.2vw;
		}
		body.iPhone #gallery>div.inner>ul>li>a>div.text>p.date{
			letter-spacing: 0.03vw;
		}
	#gallery>div.inner>ul>li>a>div.text>p.effort{
		font-size: 4.2vw;
		margin: 0 0 1vw 0;
		letter-spacing: 0.2vw;
		line-height: 1.3;
		}
		#gallery>div.inner>ul>li.special>a>div.text>p.effort{
			/*font-size: 3.8vw;*/
		}
		body.iPhone #gallery>div.inner>ul>li>a>div.text>p.effort{
			letter-spacing: 0.03vw;
		}
	#gallery>div.inner>ul>li>a>div.text>p.name{
		font-size: 4.2vw;
		letter-spacing: 0.1vw;
		line-height: 1.3;
		margin: 0 0 2vw 0;
		}
		#gallery>div.inner>ul>li.special>a>div.text>p.name{
			font-size: 3.8vw;
		}
		body.iPhone #gallery>div.inner>ul>li>a>div.text>p.name{
			letter-spacing: 0.03vw;
		}
	#gallery>div.inner>ul>li>a>div.text>ul.type{
		font-size: 3.2vw;
		letter-spacing: 0.2vw;
		}
		body.iPhone #gallery>div.inner>ul>li>a>div.text>ul.type{
			letter-spacing: 0.03vw;
		}

	#gallery>div.inner>ul>li>a>div.text>ul.type li{
		display: inline-block;
		vertical-align: top;
		}
		#gallery>div.inner>ul>li>a>div.text>ul.type li:nth-of-type(n+2){
			margin: 0 0 0 2vw;
		}


}

/* 個別調整部分 */

/* -------------------------------------------------------------------------------------------
*
* ギャラリー
*
* ----------------------------------------------------------------------------------------- */
@media screen and (min-width: 1100px) and (max-width: 1200px){
	#gallery>div.inner>ul>li>a>p.project{
		left: 60%;
	}
}
@media screen and (min-width: 960px) and (max-width: 1099px){
	#gallery>div.inner>ul>li>a>p.project{
		left: 56%;
	}
}