@charset "UTF-8";

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

	filename:	contents.css
	created:	17.10.26
	
/*--------------------------------------------------------------- */


/*----------------------------------------------------------------*/
/* WORKS */
/*----------------------------------------------------------------*/
#works ul {
	clear:both;
}

.works-thumbnail {
	font-size:0;
	margin:0 -2%;
}

.works-thumbnail li {
	display:inline-block;
	width:46%;
	margin:0 2% 15%;
}

#works .hide {
  display: none;
}

#header-works {
	position:relative;
	margin-bottom: 8vw;
}

#header-works ul {
	display: flex;
	justify-content: space-between;
}

#header-works li {
	width: calc((100% - 60px)/4);
	text-align: center;
	font-size: 4.2vw;
}

#header-works ul li a {
	position:relative;	
	text-decoration:none;
	display:inline-block;
    padding: 0.4em 0.8em;	
}

.web-title,
.icon,
.job {
	display: none;
}

#header-works ul li a:before,
#header-works ul li a:after {
  position: absolute;
  bottom:-0.3em;
  content: "";
  display: inline-block;
  width: 0;
  height: 2px; 
  background: #222;
  transition: .3s;
}

#header-works ul li a:before {
  left: 50%;
}

#header-works ul li a:after {
  right: 50%;
}

#header-works ul li a.stay:before,
#header-works ul li a.stay:after {
  width: 50%;	
}

#works .event {
	border-top:1px solid #ddd;
	padding:55px 0;
}

#works .inner .event:first-of-type {
	margin:34px 0 0;
}


#works .event h3 {
	margin:0 0 34px;
}

.event-logo > p:first-of-type {
	margin:0 0 55px;
	text-align:center;
}

.event-logo p img {
	width:70%;
}

.event-logo ul {
	margin:0 0 34px;
	clear:both;
}

.event-logo p {
	clear:both;	
}

.event-logo .fa {
	margin:0 5px 0 0;
}


#works .solution h4 {
	margin:0 0 13px;
	line-height:1;
}

#works .event-logo li {
	float:left;
	font-size:12px;
	font-size:1.2rem;
	margin:0 5px 5px 0;
	padding:5px;
	background:#eee;
	border-radius:2px;
	text-align:center;
}

#works .event-image {
	margin:0 -10%;
}

/*----------------------------------------------------------------*/
/*media Queries / min-width: 960px */
/*----------------------------------------------------------------*/
@media only screen and (min-width: 960px) {


/*----------------------------------------------------------------*/
/* WORKS */
/*----------------------------------------------------------------*/
.works-thumbnail {
}

.works-thumbnail li {
	width:29.3333%;
	margin:0 2% 8%;
	position:relative;
}

.works-thumbnail li {
	overflow:hidden;
}

.works-thumbnail a {
	display:block;
}
	
.works-thumbnail a.close {
	pointer-events: none;
}	
	

.works-thumbnail img {
	transition:all ease .3s;
}

.works-thumbnail a:hover img {
	transform: scale(1.1,1.1);
}

#header-works {
	position:relative;
	display: flex;
	justify-content: space-between;
	margin-bottom: 5vw;
}	
	
#header-works ul {
}	
	
#header-works ul li {
	font-size:18px;
	font-size:1.8rem;
	width: auto;
	padding: 0 1em;
}

#header-works ul li a:hover:before,
#header-works ul li a:hover:after {
  width: 50%;
}

.web-title {
	display:block;
	opacity:0;
	transition:all ease .3s;
	z-index:2;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	text-align:center;
	background: rgba(0,0,0,0.7);
	
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  /* 左右中央寄せ */
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;

  /* 上下中央寄せ */
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;	

}

.web-title h3 {
	color:#fff;
	font-size:14px;
	font-size:1.4rem;
	font-weight:600 !important;
	margin:0;
    font-family:'Noto Sans JP','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;   
}

.icon {
	opacity:0;
	display:block;
	position:absolute;
	right:8px;
	bottom:5px;
	z-index:3;
	transition:all ease .3s;	
}

.icon .fa {
	color:#fff;	
	font-size:22px;
	font-size:2.2rem;
	padding:5px;	
}

.icon .fa-mobile {
	font-size:26px;
	font-size:2.6rem;
}

.icon .none {
	color: rgba(120,120,120,0.7);	
}

.works-thumbnail a:hover .web-title,
.works-thumbnail a:hover .icon,
.works-thumbnail a:hover .job,	
.works-thumbnail .close:hover .web-title,
.works-thumbnail .close:hover .icon,
.works-thumbnail .close:hover .job	{
	opacity:1;
}

.job {
	display: flex;
	flex-wrap: wrap;
	opacity:0;
	position:absolute;
	left:10px;
	top:10px;
	z-index:3;
	transition:all ease .3s;	
}

.job li  {
	font-size:11px;
	font-size:1.1rem;
	font-weight: 500;
	padding:0.2em  0.5em;
	border:1px solid #eee;
	border-radius: 4px;
	margin:5px 5px 0 0;
	color: #fff;
	width: auto;
}	
	
.event {
	clear:both;
}

.event-logo {
	float:left;
	width:40%;
}

.event-logo > p:first-of-type {
	text-align:left;
}

.event-logo p img {
	width: auto;
}

.event-image {
	float:right;
	width:50%;
}

#works .event-logo li {
	font-size:14px;
	font-size:1.4rem;
}

#works .inner .event:first-of-type {
	margin:55px 0 0;
}

#works .event-image {
	margin:0;
}

}

/*----------------------------------------------------------------*/
/* form-2col */
/*----------------------------------------------------------------*/
table {
    border-collapse:collapse;
    border-spacing:0;		
}

table.form-2col {
	width: 100%;
	margin:0 0 21px;	
}

table.form-2col th,
table.form-2col td {
	padding: 1em 0;
}

table.form-2col th  {	
	width: 30%;
	text-align: left;
	font-size:15px;
	font-size:1.5rem;
    vertical-align:top;	
}
 
@media only screen and (max-width:768px){
table.form-2col th,
table.form-2col td {
    width:100%;
	font-size:14px;
	font-size:1.4rem;
    box-sizing:border-box;
    display: block;
    word-break: break-all;
}

table.form-2col th {
	padding: 1em 0 8px;
}

table.form-2col td {
	padding:0;
}

}

/*----------------------------------------------------------------*/
/*media Queries / min-width: 1280px */
/*----------------------------------------------------------------*/
@media only screen and (min-width: 1280px) {
/*----------------------------------------------------------------*/
/* 共通 */
/*----------------------------------------------------------------*/
#works .event {
	padding:89px 0;
}

.event-logo {
	width:400px;
}

.event-image {
	width: auto;
}
}

/* EOF */