@charset "UTF-8";

@media screen and (min-width: 641px), print {
	/* ------------------  pc   ------------------   */
	.page_header img {
		width: 363px;
	}
	
	.project-lead {
		width: 810px;
		margin: 0 auto 43px;
		font-size: 16px;
	}
	
	.project-list > li {
		display: block;
		width: 978px;
		height: 312px;
		margin: 0 auto 21px;
		box-shadow: 8px 8px #e4f1f5;
		position: relative;
		overflow: hidden;
	}
	
	.project-list li:after {
		content: "";
		display: block;
		clear: both;
	}
	
	.project-list li a {
		display: block;
		width: 100%;
		height: 100%;
		text-indent: -9999px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 100;
	}
	
	.project-list li:hover {
		opacity: 0.70;
		filter: alpha(opacity=70);
		-ms-filter: "alpha( opacity=70 )";
	}
	
	.project-list li .pc-title {
		width: 534px;
		position: absolute;
		top: 20px;
		left: 0;
		z-index: 10;
	}
	
	.project-list li .project-bg .pc-image {
		width: 978px;
		height: 312px;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.project-list li .sp-title,
	.project-list li .project-bg .sp-image {
		display: none !important;
	}

	.project.no-float #globalfooter {
		margin-bottom: 0;
	}
	
}
@media screen and (max-width: 640px){
	/* ------------------  sp   ------------------   */	
	.page_header img {
		width: 363px;
	}
		
	.project-lead {
		margin: 0 auto 17px;
		font-size: 14px;
	}

	.project-list > li {
		margin-bottom: 19px;
		border-style: solid;
		border-width: 5px 1px 1px;
		border-color: #008cd6;
		position: relative;
		box-sizing: border-box;
	}
	
	.project-list > li:after {
		content: "";
		display: block;
		clear: both;
	}
	
	.project-list > li a {
		display: block;
		width: 100%;
		height: 100%;
		text-indent: -9999px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 100;
	}
	
	.project-list > li .sp-title {
		padding: 10px 7px 11px;
	}
	
	.project-list > li .project-number,
	.project-list > li .project-title,
	.project-list > li .project-notes {
		padding: 0 6px;
	}
		
	.project-list > li .project-number {
		margin-bottom: 2px;
		font-size: 12px;
		font-weight: bold;
	}
	
	.project-list > li .project-title {
		padding-bottom: 3px;
		margin-bottom: 4px;
		font-size: 18px;
		font-weight: bold;
		color: #008cd6;
		border-bottom: 1px solid #e5e5e5;
	}
	
	.project-list > li .project-notes {
		color: #111;
	}
	
	.project-list > li .project-bg {
		line-height: 0;
		overflow: hidden;
	}
		
	.project-list > li .project-bg .sp-image img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
	
	.project-list > li .pc-title,
	.project-list > li .project-bg .pc-image {
		display: none !important;
	}
}

.project-bnr {
  margin: 0 auto;
}

.project-bnr p {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  margin-bottom: 2px;
}

.project-bnr p::before,
.project-bnr p::after {
  content: "";
  display: block;
  width: 1px;
  background-color: #000;
}

.project-bnr p::before {
  transform: rotate(-25deg);
}

.project-bnr p::after {
  transform: rotate(25deg);
}

@media screen and (min-width: 641px), print {
  .project-bnr {
    width: 965px;
    margin-top: 60px;
  }
  
  .project-bnr p::before,
  .project-bnr p::after {
    height: 40px;
  }
  
  .project-bnr p::before {
    margin-right: 15px;
  }

  .project-bnr p::after {
    margin-left: 15px;
  }
}
@media screen and (max-width: 640px) {
  .project-bnr {
    margin-top: 40px;
  }
  
  .project-bnr p::before,
  .project-bnr p::after {
    height: 30px;
  }
  
  .project-bnr p::before {
    margin-right: 8px;
  }

  .project-bnr p::after {
    margin-left: 8px;
  }
}