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

						WORKS
 
---------------------------------------------- */ 

#main {padding-top: 3em;
background: #f6f7ed;}

.works {
	width: 100%;
	background: #f6f7ed;
	padding-top: 10em;
}

/* WORKS タイトル */
.works .heading-divider {
	border-bottom: none;
}

.works .heading-divider li {
	display: inline-block;
	vertical-align: middle;
	margin-right: 2%;
}

.works .heading-divider span {
	font-size: 14pt;
	font-size: 1.4rem;
	font-weight: 400;
	color: #C2C6A9;
}


@media screen and (max-width:768px){
.works .heading-divider li {
	display: block;
	margin-bottom: .3em;
}
}


.works .heading-divider span a {
	color: #C2C6A9;
}

.works__inner {
	width: 94%;
	max-width: 1024px;
	margin: 0 auto 30px;
	padding: 0 0 2em;
}

@media screen and (max-width:980px){
	.works  {
	height: inherit;
	padding-top: 10vh;
	}
}

@media screen and (max-width:980px){
	.works__article {
	width: 48%;
	}
}

@media screen and (max-width:768px){
	.works__inner {
	width: 90%;
	margin: 0 auto;
	}	
	.works__article {
	float: none;
	max-width: 400px;
	width: 100%;
	margin: 0 auto 2em;
	}
}

/*---------------------------------------*/

/*  画像  */
.works__photo {
	position: relative;
	overflow: hidden;
	width: 100%;
	min-height: 300px;
	max-height: 310px;
}

.works__photo > img {
	position: absolute;
  top: 50%;
  left: 50%;
	height: 100%;
	width: auto ;
 -webkit-transition:all 0s;
 -moz-transition:all 0s;
 -ms-transition:all 0s;
 -o-transition:all 0s;
 transition:all 0s;
  transition:  1s;
}

.works__photo img:hover {	
	height: 110%;
}

/*---------------------------------------*/

  /*戻るボタン*/
.works .button-back {
	clear: both;
	display: block;
	width: 80%;
	max-width: 140px;
	margin: 0 auto  ;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.8;
	text-align: center;
	border-radius: 13px;
	border: 1px solid #182420;
}

.button-back::before {
	display: inline-block;
	content: "";
	margin: 5px;
	width: 25px;
	height: 9px;
	vertical-align: text-bottom;
	background: url(../img/arrow_back.png) bottom center no-repeat;
	background-size: contain;
}
.button-back:hover::before {
	background: url(../img/arrow_back_A.png) bottom center no-repeat;
	background-size: contain;
	transition: 0.3s ;
}





/* --------------------------------------------

						DETAIL

---------------------------------------------- */ 

/*  全体幅  */
.works--detail .works__article {
	display: block;
	max-width: 1024px;
	width: 100%;
	margin:  0 auto 50px;
	background: #F6F7ED;
}

/*  黒帯タイトル  */
.works--detail.works--detail .works__meta-day {
	box-sizing: border-box;
	padding: .4em 2%; 
	margin-bottom: 4em;
	font-size: 18px ;
	font-size: 1.8rem ;
	color: #fff;
	background: #182420;
}

.works--detail .works__meta-day span {
	padding: 0 1%;
}

/*---------------------------------------*/

/* メイン画像  */
.detailPC {
	display: block;
}

.detailSP {
	display: none;
}

.works--detail .works__photo  {
	overflow: inherit;
	height: 675px;
	max-height: inherit;
	min-height: inherit;
	max-width: 1024px; width: 100%; 
	margin: 0 auto ;
	background: #fff;
	position: relative;
	}

.works--detail .works__photo li {
	position: relative;
	height: 675px;
 }
 
.works--detail .works__photo img {
	display:block;
	height: 100%;
	margin: 0 auto;
}

.works--detail .works__text {
	margin: 2em 0 0;
	width: 100%;
}

@media screen and (max-width:1024px){
	.works--detail .works__photo {
	height: 62vw;
	}
	.works--detail .works__photo li {
	height: 62vw;
 	}
	}

/*---------------------------------------*/

/* ギャラリー */

.works--detail .works__gallary { max-width: 1050px; overflow: hidden; margin: 2.5em 0 0; display: flex; justify-content: center;}
.works--detail .gallarylist { margin: 0 1.2%; max-width: 80px; width: 7vw; max-height: 80px; height: 7vw; overflow: hidden; background: #fff; }
.works--detail .gallarylist img { display: block; max-height: 7vw; width: 7vw; height: 100%; top: 50%; margin: 0 auto; }
.works--detail .gallarylist:first-child { margin-left: 0; }
.works--detail .gallarylist:last-child { margin-right: 0; }
.works--detail .gallarylist:hover { opacity: 0.6; filter: alpha(opacity=80); -ms-filter: "alpha(opacity=80)"; }

/*
.works--detail .works__gallary { max-width: 1050px; overflow: hidden; margin: 2.5em 0 0; display: flex; justify-content: center;}
.works--detail .gallarylist { margin: 0 1.2%; max-width: 80px; width: 100%; max-height: 80px; height: 7vw; overflow: hidden; background: #fff; }
.works--detail .gallarylist img { display: block; max-height: 7vw; width: auto; height: 100%; top: 50%; margin: 0 auto; }
.works--detail .gallarylist:first-child { margin-left: 0; }
.works--detail .gallarylist:last-child { margin-right: 0; }
.works--detail .gallarylist:hover { opacity: 0.6; filter: alpha(opacity=80); -ms-filter: "alpha(opacity=80)"; }
*/


/*---------------------------------------*/

/* 　スマホ　縦に画像並べる */

@media screen and (max-width:599px){
.works--detail.works--detail .works__meta-day {
	font-size: 14px ;
	font-size: 1.4rem ;
}

.detailPC {
	display: none;
	}
.detailSP {
	display: block;
	}
	
	.works--detail .works__gallary { display: block; }
	.works--detail .gallarylist__sp {
  display: inline-block;
	width: 100%; 
	height: 60vw;
	margin: 8vw 0 -20px;
	overflow: hidden;
	background: #fff;
	}
	.works--detail .gallarylist__sp:first-child{
	margin-top: 0; 
	}
	.works--detail .gallarylist__sp img {
	display: block;
	width: auto;
	height: 100%;
	top: 50%;
	margin: 0 auto;
	}
	.works__text {
	display: block;
	width: 100%;
	margin-bottom: 50px;
	}
}