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





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

img { 
    max-width: 100%; 
    height:auto;
}



.w-color {
	background-color: #fff;
}


#cate-menu {
	text-align: center;
	margin: 0 auto;
	overflow: hidden;
	width: 90%;
	padding-bottom: 10px;
}

.w-cate-s {
    color: #000;
	width: 95%;
    background-color: #f1f1f1;
	padding: 7px 0;
	margin: 0 auto 7px auto;
    font-size: 14px;
	letter-spacing: 1px;
    text-align: center;
	display: block;
	text-decoration: none !important;
	border: solid 1px #000;
}

.w-cate {
    color: #000;
	width: 95%;
	padding: 7px 0;
	margin: 0 auto 7px auto;
    font-size: 14px;
	letter-spacing: 1px;
    text-align: center;
	display: block;
	text-decoration: none !important;
	border: solid 1px #000;
}

.w-cate a{
    color: #fff;
	text-decoration: none !important;
}

.w-cate:hover {
    color: #fff;
    background-color: #f1f1f1;
	-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	-o-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;
	text-decoration: none !important;
}

.w-ss {
	font-size: 10px;
}




.works {
	overflow: hidden;
	clear: both;
	width: 90%;
	margin: 20px auto 100px auto;
	display: flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content: space-between;

}


.works-box2 {
	width:45%;
	text-align:center;
	margin:5px auto;
}

.works-box2 a{
	border:none !important;
}




.sa {
  opacity: 0;
  transition: all .5s ease;
}

.sa--up {
  transform: translate(0, 100px);
}





section figure {
    width: 92%;
    margin: 0 auto ;
	padding: 0 !important;
    position: relative;
    overflow: hidden;
    background: #fff;
}



.w-title {
	display: block;
	font-size: 13px;
	width: 90%;
	margin:5px auto 10px auto;
	line-height: 1.5em;
	color: #000;
}
.w-text {
	padding-top: 5px;
	font-size: 10px;
	color: #999;
}







.eff {
    color: #000;
}
.eff figure:after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    transform: scale(1.0, 1.0);
    transition: all .3s ease-out;
}
.eff figure:hover:after {
    opacity: 1;
    transform: scale(0.92, 0.88);
	cursor: pointer;
}




.eff figcaption {
    position: absolute;
	text-align: left;
	bottom: 0;
	padding: 20px;
    font-size: 12px;
    opacity: 0;
    transition: all .3s ease-out .2s;
	box-sizing: border-box;
	
}
.eff figure:hover figcaption {
	position: absolute;
    opacity: 1;
}
.eff figure img {
    transition: all .5s ease-out;
}
.eff figure:hover img {
    opacity: .5;

}



.modal_trigger {
  position: absolute;
  width: 100%;
  height: 100%;
}



.popup {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 90% !important;
	z-index: 300;
	background-color: #fff;
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, .4);
	overflow: scroll;
	box-sizing: border-box;
}



/* ポップアップの内容 */
.popup-content{
	width: 90% !important;
	z-index: 100;
	box-sizing:border-box;
}

.pop-img {
	margin: 20px;
	padding: 0;
	display: block;
	width: 100%;
}

.m5 {
	margin-bottom:5px;
}

.pop-te {
	width: 100%;
	margin: 20px;
	display: block;
	text-align: left;
	font-weight: normal;
}

.pop-m {
	font-weight: bold;
	font-size: 14px;

}



.pop-ct {
	display: inline-block;
	padding: 1px 8px;
	text-align: center;
	margin: 20px 10px 25px 0;
	font-size: 10px;
	font-weight: bold;
	color: #fff;
	background-color: #000;
}

#popup-on,#popup-on1,#popup-on2,#popup-on3,#popup-on4,#popup-on5,#popup-on6,
#popup-on7,#popup-on8,#popup-on9,#popup-on10,#popup-on11,#popup-on12,#popup-on13,
#popup-on14,#popup-on15,#popup-on16,#popup-on17,#popup-on18,#popup-on19,#popup-on20,
#popup-on21,#popup-on22,#popup-on23,#popup-on24,#popup-on25,#popup-on26,#popup-on27,
#popup-on28,#popup-on29,#popup-on30,#popup-on31,#popup-on32,#popup-on33,#popup-on34,
#popup-on35,#popup-on36,#popup-on37,#popup-on38,#popup-on39,#popup-on40,#popup-on41,
#popup-on42,#popup-on43,#popup-on44,#popup-on45,#popup-on46,#popup-on47,#popup-on48,
#popup-on49,#popup-on50,#popup-on51,#popup-on52,#popup-on53,#popup-on54,#popup-on55,
#popup-on56,#popup-on57,#popup-on58,#popup-on59,#popup-on60,#popup-on61,#popup-on62,
#popup-on63{
  display: none;
}
#popup-on:checked + .popup,#popup-on1:checked + .popup,#popup-on2:checked + .popup,
#popup-on3:checked + .popup,#popup-on4:checked + .popup,#popup-on5:checked + .popup,
#popup-on6:checked + .popup,#popup-on7:checked + .popup,#popup-on8:checked + .popup,
#popup-on9:checked + .popup,#popup-on10:checked + .popup,#popup-on11:checked + .popup,
#popup-on12:checked + .popup,#popup-on13:checked + .popup,#popup-on14:checked + .popup,
#popup-on15:checked + .popup,#popup-on16:checked + .popup,#popup-on17:checked + .popup,
#popup-on18:checked + .popup,#popup-on19:checked + .popup,#popup-on20:checked + .popup,
#popup-on21:checked + .popup,#popup-on22:checked + .popup,#popup-on23:checked + .popup,
#popup-on24:checked + .popup,#popup-on25:checked + .popup,#popup-on26:checked + .popup,
#popup-on27:checked + .popup,#popup-on28:checked + .popup,#popup-on29:checked + .popup,
#popup-on30:checked + .popup,#popup-on31:checked + .popup,#popup-on32:checked + .popup,
#popup-on33:checked + .popup,#popup-on34:checked + .popup,#popup-on35:checked + .popup,
#popup-on36:checked + .popup,#popup-on37:checked + .popup,#popup-on38:checked + .popup,
#popup-on39:checked + .popup,#popup-on40:checked + .popup,#popup-on41:checked + .popup,
#popup-on42:checked + .popup,#popup-on43:checked + .popup,#popup-on44:checked + .popup,
#popup-on45:checked + .popup,#popup-on46:checked + .popup,#popup-on47:checked + .popup,
#popup-on48:checked + .popup,#popup-on49:checked + .popup,#popup-on50:checked + .popup,
#popup-on51:checked + .popup,#popup-on52:checked + .popup,#popup-on53:checked + .popup,
#popup-on54:checked + .popup,#popup-on55:checked + .popup,#popup-on56:checked + .popup,
#popup-on57:checked + .popup,#popup-on58:checked + .popup,#popup-on59:checked + .popup,
#popup-on60:checked + .popup,#popup-on61:checked + .popup,#popup-on62:checked + .popup,
#popup-on63:checked + .popup{
  display: block;
}




/* 閉じるアイコン */
.icon-close{
	cursor: pointer;
	background: #000;
	color: #fff;
	font-size: 25px;
	padding: 0 10px ;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 101;

}



a.works-s {
	display: block;
	width: 120px;
	margin: 20px auto 0 auto;
padding:10px 30px;
text-align:center;
border:2px solid #000 !important;
background:#fff;
color:#000 !important;
line-height:10px;
font-weight:bold;
font-size:12px;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all  0.5s ease;
}

a.works-s:hover {
background:#000;
color:#fff !important;
}



.w_box970 {
	clear:both;
	margin:0 auto 50px auto;
	font-size:14px;
	line-height:30px;
	width:970px;
	overflow:hidden;
	text-align:left;
}

.s-date {
	font-size: 14px;
}
.s-title {
	font-size: 20px;
	font-weight: bold;
	line-height: 1.6;
	margin: 15px 0 30px 0;
}




.w-url {
	margin: 15px 0;
}

.w-url a {
	color: #000 !important;
}

.w-url a:hover {
	color: #999 !important;
	text-decoration:none;
}




.w-sn {
	border-top: solid 1px #000;
	font-size: 12px;
	margin: 30px 0 10px 0;
	padding-top: 15px;
}


.w-sn a {
	color: #000 !important;
}

.w-sn a:hover {
	color: #999 !important;
	text-decoration:none;
}




.w-tag {
	font-size: 12px;
	margin: 10px 0;
	color: #666;
	line-height: 1.5;
}



#works-l {
	display: flex;
	margin: 70px auto 0 auto;
	width: 300px;
	text-align: center;
}

#works-l li{
	margin: 10px;
}

#works-l a{
	text-decoration: none;
	border-bottom: none;
}


#works-l a:hover {
	text-decoration:none;
	border-bottom:0px;
	opacity: 0.5;
}


.w-img-wrap {
	margin-bottom: 30px;
}