@charset "UTF-8";

.sketch-gallery__col-header i,
.popup-sketch-item h2,
.gw50th-history-header p{
	 font-family: "リュウミン M-KL", sans-serif;
}
.sketch-gallery__col-header h2 span,
.sketch-gallery__col-header h2 strong{
	font-family: "VibeMO Compressed Pro Light", sans-serif;
}
.sketch-gallery__col-header h2 strong{
	color: #CEAF68;
}
.sketch-gallery__col-header i{
	display: block;
	visibility: hidden;
	height: 0;
	opacity: 0;
	overflow: hidden;
}

.popup-sketch{
	opacity: 0;
	visibility: hidden;
}
.popup-sketch{
	transition: opacity 800ms ease, visibility 800ms ease;
}
.is_popup .popup-sketch{
	opacity: 1;
	visibility: visible;
}
.popup-sketch-item{
	opacity: 0;
	transition: opacity 800ms ease;
}
.popup-sketch-item.is-show-item{
	opacity: 1;
}
.sketch-gallery__grid figure{
	position: relative;
}
.sketch-gallery__grid-item a{
	display: block;
}

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

	.sketch-gallery__contents{
		margin: auto;
		max-width: 1100px;
	}
	.sketch-gallery__list{
		height: auto !important;
	}

	.sketch-gallery__col + .sketch-gallery__col{
		margin-top: 50px;
	}

	.sketch-gallery__col-header{
		position: relative;
		padding: 0 0 10px;
		margin: 0 0 35px;
	}
	.sketch-gallery__col-header:before{
		content: "";
		position: absolute;
		bottom: 0;
		display: block;
		width: 100vw;
		height: 1px;
		background: #CEAF68;
	}

	.sketch-gallery__col:nth-child(odd) .sketch-gallery__col-header{
		text-align: left;
	}
	.sketch-gallery__col:nth-child(even) .sketch-gallery__col-header{
		text-align: right;
	}
	.sketch-gallery__col:nth-child(odd) .sketch-gallery__col-header:before{
		left: 0;
	}
	.sketch-gallery__col:nth-child(even) .sketch-gallery__col-header:before{
		right: 0;
	}

	.sketch-gallery__col-header h2 strong{
		font-size: 120px;
	}
	.sketch-gallery__col-header h2 span{
		position: relative;
		font-size: 56px;
		padding: 0 0 0 20px;
		margin: 0 0 0 20px;
	}
	.sketch-gallery__col-header h2 span:before{
		content: "";
		position: absolute;
		margin: auto;
		left: 0;
		bottom: 10px;
		display: block;
		width: 1px;
		height: 46px;
		background: #AEAEB2;
	}


	.sketch-gallery__grid figure{
		overflow: hidden;
	}	
	.sketch-gallery__grid img{
		width: 100%;
		transition: transform 800ms ease;
	}
	.sketch-gallery__col:nth-child(odd) .sketch-gallery__grid:nth-child(odd){
		display: flex;
		justify-content: flex-start;
	}
	.sketch-gallery__col:nth-child(odd) .sketch-gallery__grid:nth-child(even){
		display: flex;
		flex-direction: row-reverse;
		justify-content: flex-end;
	}
	
	.sketch-gallery__col:nth-child(even) .sketch-gallery__grid:nth-child(odd){
		display: flex;
		flex-direction: row-reverse;
		justify-content: flex-end;
	}
	.sketch-gallery__col:nth-child(even) .sketch-gallery__grid:nth-child(even){
		display: flex;
		justify-content: flex-start;
	}


	.sketch-gallery__col:nth-child(odd) .sketch-gallery__grid:nth-child(odd) .sketch-gallery__flex2{
		margin: 0 0 0 30px;
	}
	.sketch-gallery__col:nth-child(odd) .sketch-gallery__grid:nth-child(even) .sketch-gallery__flex2{
		margin: 0 30px 0 0;
	}
	.sketch-gallery__col:nth-child(even) .sketch-gallery__grid:nth-child(odd) .sketch-gallery__flex2{
		margin: 0 30px 0 0;
	}
	.sketch-gallery__col:nth-child(even) .sketch-gallery__grid:nth-child(even) .sketch-gallery__flex2{
		margin: 0 0 0 30px;
	}


	.sketch-gallery__grid + .sketch-gallery__grid{
		margin-top: 30px;
	}
	.sketch-gallery__grid .sketch-gallery__flex1{
		max-width: 728px;
	}
	.sketch-gallery__grid .sketch-gallery__flex2{
		max-width: 340px;
	}


	.sketch-gallery__flex2 .sketch-gallery__grid-item + .sketch-gallery__grid-item{
		margin: 28px 0 0;
	}
	.sketch-gallery__grid-item figcaption{
		margin: 5px 0 0;
		font-size: 14px;
		line-height: 1.5;
	}
	.sketch-gallery__grid-item a:hover img{
		transform: scale(1.05);
	}



	/* popup
	=========================================================*/

	.popup-sketch{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 0 min(12.8%,190px);
		z-index: 999999;
		background: rgba(29,29,29,0.95);
		overflow: auto;
	}



	.popup-sketch-inner{
		position: relative;
		margin: auto;
		max-width: 1100px;
		width: 100%;
		height: 100%;
	}
	.popup-sketch-contents{
		position: relative;
		margin: auto;
		width: 100%;
		height: 100%;
	}
	.popup-sketch-slide{
		position: absolute;
		top: 0;
		width: 100%;
	}
	.popup-sketch-item{
		width: 100%;
		padding: 0 0 60px;
	}
	.popup-sketch-item h2{
		font-size: 32px;
		line-height: 1;
		padding: 0 0 25px;
	}
	.popup-sketch-item__caption{
		padding: 25px 0 0;
		font-size: 16px;
		line-height: 2;
	}
	.popup-sketch-item__figwrap figure + figure{
		margin-top: 20px;
	}

	.popup-sketch-item figure img{
		width: 100%;
	}

	.popup-sketch-slide-next,
	.popup-sketch-slide-prev{
		position: fixed;
		z-index: 50;
		width: min(12.8%,190px);
		height: 190px;
	}

	.popup-sketch-slide-next a,
	.popup-sketch-slide-prev a{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		text-indent: -9999px;
	}
	.popup-sketch-slide-next a:after,
	.popup-sketch-slide-prev a:after{
		content: "";
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 13px;
		height: 22px;
	}
	.popup-sketch-slide-next a:after{
		background: url(../../../../shared/img/arrow_wh_r.svg) 0 0 no-repeat;
		background-size: 100% 100%;
	}
	.popup-sketch-slide-prev a:after{
		background: url(../../../../shared/img/arrow_wh_l.svg) 0 0 no-repeat;
		background-size: 100% 100%;
	}
	.popup-sketch-slide-next{
		top: 50%;
		left: 50%;
		transform: translate(0,-50%);
	}
	.popup-sketch-slide-prev{ 
		top: 50%;
		left: 50%;
		transform: translate(-100%,-50%);
	}

	.popup-sketch-slide-close{
		position: fixed;
		z-index: 50;
		width: min(12.8%,190px);
		height: 160px;
	}
	.popup-sketch-slide-close a{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		text-indent: -9999px;
	}
	.popup-sketch-slide-close a:before,
	.popup-sketch-slide-close a:after{
		content: "";
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 3px;
		height: 30px;
		background: #fff;
	}
	.popup-sketch-slide-close a:before{
		transform: rotate(45deg);
	}
	.popup-sketch-slide-close a:after{
		transform: rotate(-45deg);
	}

	.btn-more-sketch{
		display: none;
	}


}



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

	.sketch-gallery__contents{
		margin: auto;
		max-width: 1100px;
	}
	.sketch-gallery__col + .sketch-gallery__col{
		margin-top: 50px;
	}
	.sketch-gallery__list{
		overflow: hidden;
		transition: height 600ms ease;
	}

	.sketch-gallery__col-header{
		position: relative;
		padding: 0 0 10px;
		margin: 0 0 16px;
	}
	.sketch-gallery__col-header:before{
		content: "";
		position: absolute;
		bottom: 0;
		display: block;
		width: 100vw;
		height: 1px;
		background: #CEAF68;
	}

	.sketch-gallery__col:nth-child(odd) .sketch-gallery__col-header{
		text-align: left;
	}
	.sketch-gallery__col:nth-child(even) .sketch-gallery__col-header{
		text-align: right;
	}
	.sketch-gallery__col:nth-child(odd) .sketch-gallery__col-header:before{
		left: 0;
	}
	.sketch-gallery__col:nth-child(even) .sketch-gallery__col-header:before{
		right: 0;
	}

	.sketch-gallery__col-header h2 strong{
		font-size: 54px;
	}
	.sketch-gallery__col-header h2 span{
		position: relative;
		font-size: 28px;
		padding: 0 0 0 20px;
		margin: 0 0 0 20px;
	}
	.sketch-gallery__col-header h2 span:before{
		content: "";
		position: absolute;
		margin: auto;
		left: 0;
		bottom: 5px;
		display: block;
		width: 1px;
		height: 23px;
		background: #AEAEB2;
	}
	.sketch-gallery__grid img{
		width: 100%;
	}

	.sketch-gallery__grid{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.sketch-gallery__grid + .sketch-gallery__grid{
		margin-top: 16px;
	}
	.sketch-gallery__grid .sketch-gallery__flex2{
		padding: 0 0 16px;
		margin: 16px 0 0;
		display: flex;
		justify-content: space-between;
		width: 100%;
	}
	.sketch-gallery__grid .sketch-gallery__flex2 .sketch-gallery__grid-item{
		width: calc(50% - 8px);
	}
	.sketch-gallery__grid-item figcaption{
		margin: 10px 0 0;
		font-size: 14px;
		line-height: 1.5;
	}



	/* popup
	=========================================================*/

	.popup-sketch{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 0 15px;
		z-index: 999999;
		background: rgba(29,29,29,0.95);
		overflow: auto;
	}
	.popup-sketch-inner{
		position: relative;
		margin: auto;
		max-width: 1100px;
		width: 100%;
		height: 100%;
	}
	.popup-sketch-contents{
		position: relative;
		margin: auto;
		width: 100%;
		height: 100%;
	}
	.popup-sketch-slide{
		position: absolute;
		top: 0;
		width: 100%;
	}
	.popup-sketch-item{
		width: 100%;
		padding: 0 0 80px;
	}
	.popup-sketch-item h2{
		font-size: 18px;
		line-height: 1;
		padding: 0 0 18px;
	}
	.popup-sketch-item__caption{
		padding: 25px 0 0;
		font-size: 14px;
		line-height: 2;
	}
	.popup-sketch-item__figwrap figure + figure{
		margin-top: 15px;
	}
	.popup-sketch-item figure img{
		width: 100%;
	}

	.popup-sketch-slide-next,
	.popup-sketch-slide-prev{
		position: fixed;
		z-index: 50;
		width: 60px;
		height: 60px;
		background: #1D1D1D;
	}

	.popup-sketch-slide-next a,
	.popup-sketch-slide-prev a{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		text-indent: -9999px;
	}
	.popup-sketch-slide-next a:after,
	.popup-sketch-slide-prev a:after{
		content: "";
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 9px;
		height: 16px;
	}
	.popup-sketch-slide-next a:after{
		background: url(../../../../shared/img/arrow_wh_r.svg) 0 0 no-repeat;
		background-size: 100% 100%;
	}
	.popup-sketch-slide-prev a:after{
		background: url(../../../../shared/img/arrow_wh_l.svg) 0 0 no-repeat;
		background-size: 100% 100%;
	}
	.popup-sketch-slide-next{
		bottom: 0;
		right: 0 !important;
		left: auto !important;
	}
	.popup-sketch-slide-prev{
		bottom: 0;
		left: 0 !important;
	}
	.popup-sketch-slide-close{
		position: fixed;
		top: 0;
		right: 0 !important;
		left: auto !important;
		z-index: 50;
		width: 60px;
		height: 60px;
		background: #1D1D1D;
	}
	.popup-sketch-slide-close a{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		text-indent: -9999px;
	}
	.popup-sketch-slide-close a:before,
	.popup-sketch-slide-close a:after{
		content: "";
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 2px;
		height: 25px;
		background: #fff;
	}
	.popup-sketch-slide-close a:before{
		transform: rotate(45deg);
	}
	.popup-sketch-slide-close a:after{
		transform: rotate(-45deg);
	}

	.btn-more-sketch{
		position: relative;
		padding: 0 16px;
	}
	.btn-more-sketch:before{
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 120px;
		background: linear-gradient(to bottom,transparent 0% ,#1D1D1D 45%);
		opacity: 0.9;
	}
	.btn-more-sketch i:nth-child(2){
		display: none;
	}
	.btn-more-sketch a{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 30px;
		font-size: 12px;
		border: 1px solid #fff;
	}
	.btn-more-sketch a span{
		position: absolute;
		margin: auto;
		top: 0;
		right: 10px;
		bottom: 0;
		width: 10px;
		height: 10px;
	}
	.btn-more-sketch a span:before,
	.btn-more-sketch a span:after{
		content: "";
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 10px;
		height: 1px;
		background: #fff;
	}
	.btn-more-sketch a span:after{
		transform: rotate(90deg);
		transition: transform 500ms ease;
	}


	.btn-more-sketch.is-click:before{
		display: none;
	}
	.btn-more-sketch.is-click i:nth-child(1){
		display: none;
	}
	.btn-more-sketch.is-click i:nth-child(2){
		display: inline;
	}
	.btn-more-sketch.is-click a span:after{
		transform: rotate(0);
	}

}



.sketch-gallery__col-header span{
	color: #fff;
}
figcaption{
	color: #fff;
}
.popup-sketch-item__caption{
	color: #fff;
}
.btn-more-sketch{
	color: #fff;
}