@charset "UTF-8";

/*   優良工事表彰（yuryokoji_hyosho.css）   */

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

Main

------------------------------------------------- */
#Main {
	width: 100%;
	margin: 80px 0 120px;
	position: relative;
}
@media screen and (max-width: 898px)  {
#Main {
	margin: 50px 0 100px;
}
}
@media screen and (max-width: 480px)  {
#Main {
	margin: 30px 0 80px;
}
}


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

Yuryokoji_Hyosho（一覧／詳細）

------------------------------------------------- */
/* Yuryokoji_Hyosho__Btn（トップ）
================================================== */
.Yuryokoji_Hyosho__Btn	{
	
}

/* ボタン（外観）
================================================== */
.YH_button {
	border: 2px solid #cccccc;
 background-color:#F4F4F4;
 border-radius: 14px;
 position: relative;
 display: flex;
 justify-content:space-between;
	align-items: center;
 padding: 10px 25px;
 color: #333333;
 transition: 0.3s ease-in-out;
 font-weight: 500;
	font-size: 2rem;
	margin-bottom: 30px;
}
.YH_button:hover {
	text-decoration: none;
	border: 2px solid #cccccc;
 transition: .3s;
	background-color:#ffffff;
}
@media screen and (max-width: 480px)  {
.YH_button {
	border-radius: 8px;
	padding: 10px 25px 10px 15px;
	font-size: 1.6rem;
	margin-bottom: 20px;
}
}

/* ボタンサイズ
================================================== */
.btn-100p_60px {
 width: 100%;
	height: 60px;
}

@media screen and (max-width: 480px)  {
.btn-100p_60px {
 width: 100%;
	height: 80px;
}
}

/* ボタン用矢印アイコン（右側にアニメーション矢印）
================================================== */
.arrow {
 line-height: 1;
 position: relative;
 background-color: #333333;
}
.arrow::before {
 content: "";
 width: 10px;
 height: 10px;
 border: 1px solid #333333;
 position: absolute;
 box-sizing: border-box;
}
.arrow.-right{
 width: 20px;
 height: 1px;
	right: -10px;
}
.arrow.-right::before {
 border-left: 0;
 border-bottom: 0;
 transform: rotate(45deg);
 transform-origin: top right;
 top: 50%;
 right: -1px;
}
.YH_button:hover .arrow.-right{
	right: -15px;
	transition: 0.3s ease-in-out;
}



/* Yuryokoji_Hyosho__Btn（一覧）
================================================== */
.Yuryokoji_Hyosho__wrp	{
	margin-bottom: 50px;
}
.Yuryokoji_Hyosho__wrp:last-of-type	{
	margin-bottom: 0px !important;
}
.Yuryokoji_Hyosho__wrp h3	{
 background-color:#EFEFEF;
 border-radius: 8px;
 position: relative;
 display: flex;
 justify-content:space-between;
	align-items: center;
 padding: 12px 25px;
 color: #333333;
 transition: 0.3s ease-in-out;
 font-weight: 500;
	font-size: 2.4rem;
	margin-top: -10px;
	margin-bottom: 30px;
}
@media screen and (max-width: 768px)  {
.Yuryokoji_Hyosho__wrp	{
	margin-bottom: 30px;
}
.Yuryokoji_Hyosho__wrp h3	{
 border-radius: 6px;
 padding: 12px 20px;
	font-size: 2rem;
	margin-top: 0px;
}
}
@media screen and (max-width: 480px)  {
.Yuryokoji_Hyosho__wrp h3	{
 padding: 12px;
	font-size: 1.8rem;
}
}


/* Yuryokoji_Hyosho__box（一覧）
================================================== */
.Yuryokoji_Hyosho__box	{
	margin: -15px 0 0;
}

.Yuryokoji_Hyosho__box  >	article a {
 display: flex;
	/*align-items: flex-start;*/
	align-items: stretch;
 padding:20px 10px;
 border-bottom: 1px solid #cccccc;
}
.Yuryokoji_Hyosho__box a {
	text-decoration: none;
}
.Yuryokoji_Hyosho__box a:hover {
 /*opacity: 0.7;
 filter: alpha(opacity=70);
 -moz-opacity: 0.7;*/
	color: #C50018;
}

@media screen and (max-width: 898px)  {
.Yuryokoji_Hyosho__box > article a {
	flex-flow: column wrap !important;
	padding:15px 10px;
}
}
@media screen and (max-width: 768px)  {
.Yuryokoji_Hyosho__box	{
	font-size: 1.4rem;
}
}
@media screen and (max-width: 480px)  {
.Yuryokoji_Hyosho__box > article:last-of-type {
	margin-bottom: 30px;
}
}

/* 部門+会社名+工事名
================================================== */
.Yuryokoji_Hyosho__box .bumon {
 display: flex;
	flex-direction: column;
 min-width: 120px;
	margin-right: 15px;
	border-right: 1px solid #cccccc;
}
@media screen and (max-width: 898px)  {
.Yuryokoji_Hyosho__box .bumon {
	flex-direction:row;
	border-right: none;
}
}

.Yuryokoji_Hyosho__box .bumon .top {
	width: 110px;
}
.Yuryokoji_Hyosho__box .bumon .bottom {
	width: 110px;
	
}

@media screen and (max-width: 898px)  {
.Yuryokoji_Hyosho__box .bumon .top {
	width: auto;
	margin-right: 0px;
}
.Yuryokoji_Hyosho__box .bumon .bottom {
	width: auto;
	margin-right: 15px;
}
}

.Yuryokoji_Hyosho__box .company {
 display: flex;
	flex-direction: column;
 min-width: 170px;
	margin-right: 15px;
	border-right: 1px solid #cccccc;
}
.Yuryokoji_Hyosho__box .company .top {
	width: 160px;
}
.Yuryokoji_Hyosho__box .company .bottom {
	width: 160px;
}

@media screen and (max-width: 898px)  {
.Yuryokoji_Hyosho__box .company {
	flex-direction: row;
	border-right: none;
}
.Yuryokoji_Hyosho__box .company .top {
	width: auto;
	margin-right: 15px;
}
.Yuryokoji_Hyosho__box .company .bottom {
	width: auto;
	margin-right: 15px;
}
}



.Yuryokoji_Hyosho__box .title {
	width: auto;
	overflow: auto;
}
.Yuryokoji_Hyosho__box a:hover .title {
	text-decoration: underline;
}

@media screen and (max-width: 898px)  {
.Yuryokoji_Hyosho__box .title {
	width: 100% !important;
	margin-top: 10px;
}
}
@media screen and (max-width: 768px)  {
.Yuryokoji_Hyosho__box .date {
 min-width: 90px;
}
.Yuryokoji_Hyosho__box .category {
 /*min-width: 140px;*/
	min-width: 115px;
	/*margin-top: -5px;*/
}
}


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

Yuryokoji_Hyosho_Detail（詳細ページ）

------------------------------------------------- */
/* 見出し（h2）
================================================== */
.Heading__h2_YH	{
	font-weight:500;
	position:relative;
	margin: 0 0 50px;
	padding-left: 30px;
}
.Heading__h2_YH::before	{
	content: "";
	position: absolute;
	top:2px;
	left: 0;
	width: 20px;
	height: 20px;
	background-image: url("../images/icon__midashi.svg");
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 20px;
}
.Heading__h2_YH .hyosho_name01 {
	font-size:1.6rem;
	line-height: normal;
	margin-bottom: 10px;
}
.Heading__h2_YH .hyosho_name02 {
	font-size:2.8rem;
	line-height: normal;
}

@media screen and (max-width: 768px)  {
.Heading__h2_YH	{
	margin: 0 0 50px;
	padding-left: 22px;
}
.Heading__h2_YH::before	{
	top:3px;
	width: 14px;
	height: 14px;
	background-size: 14px;
}
.Heading__h2_YH .hyosho_name01 {
	font-size:1.4rem;
	margin-bottom: 6px;
}
.Heading__h2_YH .hyosho_name02 {
	font-size:2.2rem;
}
}
@media screen and (max-width: 480px)  {
.Heading__h2_YH	{
	margin: 0 0 30px;
	padding-left: 20px;
}
.Heading__h2_YH::before	{
	top:3px;
	width: 12px;
	height: 12px;
	background-size: 12px;
}

.Heading__h2_YH .hyosho_name01 {
	font-size:1.2rem;
}
.Heading__h2_YH .hyosho_name02 {
	font-size:1.8rem;
}
}


/* 詳細ページ　内側（本文枠）
================================================== */
.Yuryokoji_Hyosho_Detail__inner	{
	line-height: 2;
	margin-bottom: 50px;
}
@media screen and (max-width: 768px)  {
.Yuryokoji_Hyosho_Detail__inner	{
	margin-bottom: 30px;
}
}
@media screen and (max-width: 480px)  {
.Yuryokoji_Hyosho_Detail__inner	{
	font-size: 1.4rem;
	line-height: 1.7;
}
}


/* 詳細ページ　内側（受賞者）
================================================== */
.YH_jyushosha	{
	display:flex;
	padding-bottom: 30px;
	border-bottom: 1px solid #dddddd;
}
.sekininsha	{
	width: 50%;
	display:flex;
	align-items: center;
	margin-right: 50px;
}
.sekininsha:last-child	{
	margin-right: 0px;
}
.manager_photo	{
	flex-basis: 200px;
	margin-right: 30px;
}
.manager_photo img	{
	border-radius: 7px;
}
.sekininsha_name	{
	flex-basis: calc(100% - 200px); 
}
.sekininsha_name .company_name	{
	font-size: 1.6rem;
	margin-bottom: 15px;
}
.sekininsha_name .manager_name_top	{
	font-size: 1.6rem;
	margin-bottom: 0px;
}
.sekininsha_name .manager_name_bottom	{
	font-size: 2.2rem;
}

@media screen and (max-width: 1250px)  {
.YH_jyushosha	{
	flex-direction: column;
}
.sekininsha	{
	width: 100%;
	margin-right: 0px;
	margin-bottom: 30px;
}
.sekininsha:last-child	{
	margin-bottom: 0px;
}
}
@media screen and (max-width: 568px)  {
.manager_photo	{
	flex-basis: 150px;
	margin-right: 30px;
}
.sekininsha_name	{
	flex-basis: calc(100% - 150px); 
}
.sekininsha_name .company_name	{
	font-size: 1.4rem;
	margin-bottom: 15px;
}
.sekininsha_name .manager_name_top	{
	font-size: 1.4rem;
	margin-bottom: 0px;
}
.sekininsha_name .manager_name_bottom	{
	font-size: 1.8rem;
}
}
@media screen and (max-width: 768px)  {
}




/* 詳細ページ　写真枠
================================================== */
/* 写真1枚 */
.Photo	{
	margin: 30px auto;
	display: flex;
	flex-direction: column;		/*  縦並び  */
	text-align: center;
	justify-content: center;
	align-items: center;
}
.Photo > div {
	margin: 0 auto 25px;
}
.Photo > div img {
	margin: 0 !important;
	border-radius: 10px;
}
@media screen and (max-width: 768px)  {
.Photo	{
	margin: 20px auto;
}
}


/* 写真複数枚 */
.Photo__column02,
.Photo__column03,
.Photo__column04	{
 width: 100%;
	margin: 10px auto;
	display: flex;
	flex-flow: row wrap;
	text-align: center;
	/*align-items: center;*/
	font-size: 1.4rem;
}
.Photo__column02 > div	img,
.Photo__column03 > div	img,
.Photo__column04 > div	img {
	margin: 0 !important;
	border-radius: 10px;
}
.Photo__column02 > div figure,
.Photo__column03 > div figure,
.Photo__column04 > div figure	{
 position: relative;
 overflow: hidden;
 /* padding-top: 56.25%;		16:9*/
 padding-top: 75%;    /* 4:3 */
	/* padding-top: 66.66%; 3:2 */
}
.Photo__column02 > div figure	img,
.Photo__column03 > div figure	img,
.Photo__column04 > div figure	img {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 width: 100%;
 height: 100%;
 object-fit: cover;
}
@media screen and (max-width: 768px)  {
.Photo__column02,
.Photo__column03,
.Photo__column04	{
	font-size: 1.3rem;
	line-height: 1.7 !important;
}
}

/* 横並び2列 */
.Photo__column02 > div	{
	width: calc(50% - 15px);
 margin:0 30px 30px 0;
	overflow: hidden;
}
.Photo__column02 > div:nth-child(2n) {
 margin-right: 0;
}
@media screen and (max-width: 640px)  {
.Photo__column02 > div	{
	width: calc(50% - 8px);
 margin:0 15px 15px 0;
}
}

/* 横並び3列 */
.Photo__column03 > div	{
	width: calc(33.3333% - 10px);
 margin:0 15px 15px 0;
}
.Photo__column03 > div:nth-child(3n) {
 margin-right: 0;
}

@media screen and (max-width: 640px)  {
.Photo__column03 > div	{
	width: calc(50% - 8px);
 margin:0 15px 15px 0;
}
.Photo__column03 > div:nth-child(2n) {
 margin-right: 0;
}
.Photo__column03 > div:nth-child(3) {
 margin-right: 15px;
}
}
@media screen and (max-width: 480px)  {
.Photo__column03 > div:nth-child(3) {
 margin-right: 0;
}
}


/* 横並び4列 */
.Photo__column04 > div	{
	width: calc(25% - 11.4px);
 margin:0 15px 15px 0;
}
.Photo__column04 > div:nth-child(4n) {
 margin-right: 0;
}
@media screen and (max-width: 1080px)  {
.Photo__column04 > div	{
	width: calc(33.3333% - 10px);
 margin:0 15px 15px 0;
}
.Photo__column04 > div:nth-child(3n) {
 margin-right: 0;
}
.Photo__column04 > div:nth-child(4) {
 margin-right: 15px;
}
}
@media screen and (max-width: 640px)  {
.Photo__column04 > div	{
	width: calc(50% - 8px);
 margin:0 15px 15px 0;
}
.Photo__column04 > div:nth-child(2n) {
 margin-right: 0;
}
.Photo__column04 > div:nth-child(3) {
 margin-right: 15px;
}
}
@media screen and (max-width: 480px)  {
.Photo__column04 > div:nth-child(3) {
 margin-right: 0;
}
}

/* ホバー
================================================== */
.Photo > div:hover,
.Photo__column02 > div:hover,
.Photo__column03 > div:hover,
.Photo__column04 > div:hover	{
 opacity: 0.7;
 filter: alpha(opacity=70);
 -moz-opacity: 0.7;
	transition: .3s;
	cursor: pointer;
}
@media screen and (max-width: 480px)  {
.Photo__column02,
.Photo__column03,
.Photo__column04	{
	flex-flow: column wrap;
}
.Photo__column02 > div,
.Photo__column03 > div,
.Photo__column04 > div	{
	width: 100%;
	margin:0 0 10px;
}	
}


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

pagination

------------------------------------------------- */
.pager {
	width: 100%;
	padding-top: 40px;
	border-top: 1px solid #dddddd;	
}
@media screen and (max-width: 768px) {
.pager {
	padding-top: 30px;
}
}
@media screen and (max-width: 640px) {
.pager {
	font-size: 1.4rem;
}	
}

/* 詳細ページ用
================================================== */
.pager .pagination {
	width: 100%;
	margin: 0 auto 50px;
	display: flex;
	/*justify-content: space-between;*/
	justify-content: center;
}
.pager .pagination li {
	font-weight: 500;
 margin: 0 2px;
 padding: 0;
 width: 240px;
 height: 50px;
 text-align: center;
 position: relative;
	border-radius: 3px;
}
.pager .pagination li.pre,
.pager .pagination li.next{
	border: 1px solid #cccccc;
 background-color:#ffffff;
 width: 180px;
 height: 50px;
 text-align: center;
}
.pager .pagination li a{
	border-radius: 3px;
 vertical-align: middle;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 text-align: center;
 display:table;
 color: #333333;
 text-decoration: none;
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 transition: all  0.3s ease;
}
.pager .pagination li a span {
 display:table-cell;
 vertical-align:middle;
}
.pager .pagination li a:hover{
 background-color: #eeeeee;
}
.pager .pagination li a:hover.active{
 color: #333333;
 background: #ffffff;
	border: 1px solid #cccccc;
}
.pager .pagination li a.active{
 color: #ffffff;
 background: #C50018;
	border: 1px solid #C50018;
}
.pager .sp_back{
 display: none;
}
@media screen and (max-width: 640px) {
.pager .pagination {
 margin: 0 auto 30px;
}
.pager .pagination li{
 display: none;
}
.pager .pagination li.pre,
.pager .pagination li.next{
 display: inline-block;
 width: 50%;
 height: 50px;
 text-align: center;
	font-size: 1.4rem;
}
.pager .pagination li.pre a,
.pager .pagination li.next a{
 width: 100%;
 text-align: center;
}
.pager .sp_back{
	display: block;
}
.pager .sp_back a{
	width: 99.5%;
 height: 50px;
	font-size: 1.4rem;
 display: flex;
	justify-content: center;
	align-items: center;
	color: #ffffff;
	border: 1px solid #C50018;
 background-color:#C50018;
 text-align: center;
 text-decoration: none;
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 transition: all  0.3s ease;
	border-radius: 5px;
 margin: 0 auto 15px;
	/*font-weight: 400;*/
	font-weight: 600;
}
.pager .sp_back a:hover{
	color: #333333;
 background: #ffffff;
	border: 1px solid #cccccc;
}
}