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

.top-slogan {
	max-width:900px;
	margin:50px auto 0;
}

.top-slogan h2,.top-slogan h3 {
	color:#00699f;
}

.top-slogan h2 {
	margin:26px auto 50px;
	text-align:center;
	font-size:30px;
	letter-spacing:5px;
	line-height:1.6;
}

.top-slogan h2 span {
	font-size:22px;
	display:block;
	letter-spacing:4px;
}

.top-slogan h3 {
	text-align:center;
	font-size:23px;
	letter-spacing:2px;
	position:relative;
}

.top-slogan h3::after {
	content:"";
	position:absolute;
	width:10.8em;
	height:3px;
	margin:0;
	background-color:#00699f;
	bottom: -5px;
    left:calc( 50% - 0.1em);
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.top-slogan p {
	color: #203744;
	font-weight:500;
	font-size:16px;
	margin-bottom:10px;
}

@media only screen and (max-width:1500px){
.top-slogan {
	width:85%;}	
}

@media only screen and (max-width:600px){
.top-slogan h2 span {
	font-size:18px;
	letter-spacing:1.5px;
}
.top-slogan h2 {
	margin:26px auto 50px;
	font-size:25px;
	letter-spacing:1.5px;}
}

h4.top-midashi {
	font-size: 32px;
	letter-spacing:5px;
	position:relative;
	color:#00699f;
	margin: 100px 0 0 15%;
	z-index:2;
}

h4.top-midashi::after {
	content:"";
	position:absolute;
	width:80px;
	height:1.2px;
	margin:0;
	background-color:#00699f;
    top: 50%;
    left:-90px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
@media only screen and (max-width:600px){
h4.top-midashi {
	font-size:28px;
	letter-spacing:5px;
	margin: 100px 0 20px 15%;}
}


/*　TOP機能性と耐久性
------------------------------------------------------------*/
section.top-kitai {
	/*overflow: hidden;*/
	margin:80px auto 0;
}
section.top-kitai ul {
	width:80%;
	margin:auto;
	font-weight:500;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	gap: 0 50px;
}
.top-kitai ul li.img-box {
	width:calc(55% - 25px);
	padding: 100px 0 0;
	z-index:1;
}
.top-kitai ul li.txt-box {
	width: calc(45% - 25px);
	font-size:16px;
	position:relative;
	letter-spacing:1px;
}

.top-kitai ul li.txt-box::before {
	content:"";
	position:absolute;
	z-index: -9;
	top:-150px;
	left:-150px;
	width:38vw;
	height:350px;
	margin:0;
	background-color:#f1f6f9;
}

@media only screen and (max-width:1630px){
.top-kitai ul li.txt-box { 
	font-size:15px;
}	
}

@media only screen and (max-width:1560px){
section.top-kitai ul {
	width:90%;
	gap: 0 30px;
}
.top-kitai ul li.txt-box::before { 
	width:39.5vw;
}
}

@media only screen and (max-width:1450px){
section.top-kitai ul {
	gap: 0 35px;
}
.top-kitai ul li.txt-box br { 
	display:none;}
}

@media only screen and (max-width:1350px){
.top-kitai ul li.txt-box::before { 
	width:40vw;}	
}

@media only screen and (max-width:1280px){
.top-kitai ul li.txt-box::before { 
	width:42vw;}	
}

@media only screen and (max-width:600px){
.top-kitai ul li.img-box {
	width:90%;
	padding:20px 0 0;
	margin:auto;
}
.top-kitai ul li.txt-box {
	width:90%;
	font-size:16px;
	margin:20px auto;
	letter-spacing:1px;
}
section.top-kitai {
	margin:80px auto 80px;
}
.top-kitai ul li.txt-box::before {
	top:-180px;
	left:50px;
	width:500px;
	height:330px;
}
}


/* トップ　会社概要、事業案内、求人
------------------------------------------------------------*/
.top-link-buttons ul.company-business {
	margin:80px auto 35px;
}

.top-link-buttons ul.company-business li a {
	max-width:1100px;
	margin:0 auto 50px;
	padding:0;
	font-weight:500;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap:wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	gap:0;
}

.top-link-buttons ul.company-business li a div {
	overflow: hidden;
	width:50%;
	margin:0;
	padding:0;
	background-color:#00699f;
	position:relative;
}

.top-link-buttons ul.company-business li a div h2 {
    color:#fff;
    font-size: 24px;
    font-weight:500;
    letter-spacing:6px;
    padding:0 0 0 20px;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.top-link-buttons ul.company-business li a div h2::before {
    content:"";
    background:url('../images/global.svg');
    background-repeat:no-repeat;
    width: 28px;
    height: 28px;
    background-size:contain;
    position: absolute;
    top: 50%;
    left: -19px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.top-link-buttons ul.company-business li a div img {
	display: block;
	width: 100%;
	height: auto;
	z-index:-1;
	transform: scale(1);
	transition: .5s ease-in-out;
}

.top-link-buttons ul.company-business li a:hover div img {
  transform: scale(1.05);
  opacity:0.8;
 mix-blend-mode:normal;
}

.top-link-buttons ul.company-business li a {
	transform: scale(1);
	transition: .5s ease-in-out;
	opacity:1.0;
}

.top-link-buttons ul.company-business li a:hover {
	opacity:0.7;
}

@media only screen and (max-width:1600px) {
.top-link-buttons ul.company-business li a {
	width:90%;}	
}

@media only screen and (max-width:1300px) {
.top-link-buttons ul.company-business li a div h2 {
    font-size:22px;
}
.top-link-buttons ul.company-business li a div h2::before {
    width: 26px;
    height: 26px;}
}

@media only screen and (max-width:820px) {
.top-link-buttons ul.company-business {
	margin:10px auto 20px;
}
.top-link-buttons ul.company-business li a {
	margin:0 auto 30px;}
}

@media only screen and (max-width:600px){
.top-link-buttons ul.company-business li a {
	overflow: hidden;
	height:90px;
}
.top-link-buttons ul.company-business li a div.txt-box {
	width:100%;
	height:90px;
	position:relative;
}	
.top-link-buttons ul.company-business li.company a div.img-box {
	opacity:0.2;
	width:100%;
	top:-110px;
	height:150px;
	overflow:hidden;
	position:relative;
}
.top-link-buttons ul.company-business li.business a div.txt-box {
	width:100%;
	height:90px;
	top:-110px;
	position:relative;
}	
.top-link-buttons ul.company-business li.business a div.img-box {
	opacity:0.2;
	width:100%;
	height:110px;
	overflow:hidden;
	position:relative;
	z-index:9;
}
.top-link-buttons ul.company-business li a div h2 {
	z-index:9;}
.top-link-buttons ul.company-business li a div h2 {
    font-size:20px;
}
.top-link-buttons ul.company-business li a div h2::before {
    width: 24px;
    height: 24px;}
}


/* 施工事例、求人情報
------------------------------------------------------------*/
.example-recruit { 
	max-width:1100px;
	margin:0 auto;
	padding:0;
	font-weight:500;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap:wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	gap:0;
}

.example-recruit li {
	margin:0 auto 50px;
}

@media only screen and (max-width:1600px){
.example-recruit {
	width:90%;}	
}

@media only screen and (max-width:820px){
.example-recruit li {
	margin:0 auto 30px;}
}


.example-recruit li.example {
	width:100%;
	position:relative;
	overflow:hidden;
}

.example-recruit li.recruit {
	width:100%;
	position:relative;
}
.example-recruit li.recruit a {
	width:100%;
	display:block;
	background-color:#f1f6f9;
	height:190px;
	transition: .5s ease-in-out;
}
.example-recruit li.recruit a:hover {
	width:100%;
	display:block;
	background-color:rgba(0,105,159,0.12);
}
.top-link-buttons ul.example-recruit li a h2 {
    color:#fff;
    font-size: 24px;
    font-weight:500;
    letter-spacing:6px;
    padding:0 0 0 20px;
    position: absolute;
    z-index:99;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.top-link-buttons ul.example-recruit li.recruit a h2 {
	color:#00699f;
	font-weight:600;
}
.top-link-buttons ul.example-recruit li a h2::before {
    content:"";
    background:url('../images/global.svg');
    background-repeat:no-repeat;
    width: 28px;
    height: 28px;
    background-size:contain;
    position: absolute;
    top: 50%;
    left:-18px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
.top-link-buttons ul.example-recruit li.recruit a h2::before {
	background:url('../images/global_b.svg');
}
.example-recruit li.example { 
	background:rgba(0,105,159,0.6);
}
.example-recruit li.example:hover { 
	background:rgba(0,105,159,0.5);
}
.example-recruit li.example img {
	display: block;
	width: 100%;
	height: auto;
	z-index:-1;
	transform: scale(1);
	transition: .5s ease-in-out;
	opacity:1.0;
	mix-blend-mode: multiply;
}
.example-recruit li.example:hover img {
  transform: scale(1.02);
  opacity:0.7;
}

@media only screen and (max-width:1600px){
.example-recruit li.recruit a {
	height:150px;}
}

@media only screen and (max-width:1300px) {
.top-link-buttons ul.example-recruit li a h2 {
    font-size: 22px;}
.top-link-buttons ul.example-recruit li a h2::before {
    width: 26px;
    height: 26px;}
}

@media only screen and (max-width:1100px){
.example-recruit li.recruit a {
	height:11.5vh;}
}

@media only screen and (max-width:600px){
.top-link-buttons ul.example-recruit li a h2 {
    font-size: 20px;}
.top-link-buttons ul.example-recruit li a h2::before {
    width: 24px;
    height: 24px;}
.example-recruit li.example img {
	height:90px;}
.example-recruit li.recruit a {
	height:90px;}
}


/* 新着情報
----------------------------------------------*/
#news-top-box {
	max-width:1100px;
	margin:100px auto 100px;
}
.news-top-box {
	width: 100%;
	font-weight:500;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}


@media only screen and (max-width:1600px){
#news-top-box { width:90%;}	
}

@media only screen and (max-width: 1100px){
#news-top-box {
	margin:60px auto 100px;
}
}

@media only screen and (max-width: 1060px){
#news-top-box {
	width:90%;
}
}

@media only screen and (max-width:839px){
#news-top-box {
	width:90%;
	margin:60px auto 100px;}
}

h3.news-title {
    color:#00699f;
    font-size: 26px;
    font-weight:600;
    letter-spacing:6px;
    padding:0 0 0 45px;
    position:relative;
    margin-bottom:30px;
}

h3.news-title::before {
    content:"";
    background:url('../images/global_b.svg');
    background-repeat:no-repeat;
    width: 31px;
    height: 31px;
    background-size:contain;
    position:absolute;
    top: 50.8%;
    left:0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

@media only screen and (max-width:1100px){
h3.news-title {
  position:relative;
  padding:0 0 0 50px;
}
h3.news-title:before {
	left:0px;}
}
@media only screen and (max-width:1060px){
h3.news-title {
    font-size:24px;
    margin-bottom:20px;
}
}

#newsWrap {
	width:100%;
	margin:0 auto;}

ul#newsList{
	margin:0 auto 15px;
	padding:0;
	border-top:1px solid #ccc;
}
ul#newsList li {
	font-size:14px;
	font-weight: 500;
	margin:0;	
	border-bottom:1px solid #ccc;
	line-height: 2.2;
	list-style-type:none;
}

ul#newsList li a {
	color:#203744;
	display:block;
	padding:10px 10px 11px;
	text-decoration:none;
}

ul#newsList li a:hover {
	background:#fafafa;
}

.up_ymd { 
color:#00699f;
font-weight:600;
font-family: 'Roboto Condensed', sans-serif;
font-size:17px;
}

.catName {
	display:inline-block;
	font-size:11px;
	color:#00699f;
	border:1.5px solid #00699f;
	font-weight:500;
	padding:6px 12px;
	line-height:100%;
	margin:0 10px 0;
	letter-spacing:1px;
}
.cat-0 .catName{
	color:#fff;
	background:#00699f;
}
.cat-1 .catName {
	color:#00699f;
	border:1.5px solid #00699f;
	padding:6px 12px;
	background:#fff;
}
.cat-2 .catName {
	color:#00699f;
	border:1.5px solid #00699f;
	padding:6px 6px;
	background:#fff;
}

.newMark {
	display:inline-block;
	vertical-align:middle;
	padding-left:0.3em;
}
.comment {
	display:block;
	padding:3px 0;
	float:left;
	overflow:hidden;
	width:500px;
}


@media only screen and (max-width: 768px){
ul#newsList{
	margin:0 auto 30px;
}

ul#newsList li{
	padding: 15px 0;
	line-height:2;
}
.up_ymd { display:block;}
.catName { margin:0 10px 0 0;}
}


@media only screen and (max-width: 767px){
ul#newsList li {
	padding:13px 0 13px;
}
.up_ymd { display:inline-block;}
.catName{ margin:0 0 0 5px;}

.catName {
	padding:5px 16px 5px 17px;
}
.cat-2 .catName{
	padding:5px 17px 5px 15px;
}
}

.thumbNailWrap{
	display:block;
	width:110px;
	float:left;
	height:80px;
	overflow:hidden;
}

/* Pager style（外部化可） */
.pager {
	text-align:right;
	padding:10px;
	clear:both;
}
/*ページャーボタン*/
.pager a {
    border:1.5px solid #888;
    color: #888;
    font-size: 12px;
    padding: 2px 7px 4px;
    text-decoration: none;
	margin:0 1px;
	transition: .5s ease-in-out;
}

/*現在のページのボタン*/
.pager a.current{
    background: #888;
    color: #fff;
    text-decoration: none;
}

.pager a:hover{
	border: 2px solid #666;
    background:#666;
    color: #fff;
}

.overPagerPattern{
	padding:0 2px ;	
}


/*新着情報一覧へのボタン
---------------------------------------*/
.btn-list {
    margin: 30px 30px 0 0;
    float:right;
    font-weight: 600;
    color: #fff;
    font-size:15.5px;
    letter-spacing:2.5px;
    text-align: center;
    background: #00699f;
    padding:19px 10px 20px 0;
    width:220px;
    position: relative;
    transition: .3s ease-in-out;
}
.btn-list a {
text-decoration:none;
}

.btn-list:hover {
 background:rgba(0,105,159,0.8);
 text-decoration:none;
 color:#fff;
}

.btn-list::before,
.btn-list::after {
  position: absolute;
  content: '';
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.btn-list span {
position:relative;
}
.btn-list::after {
width:30px;
height:30px;
border-radius:50%;
border:#fff 1.2px solid;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
right:14px;
top: 50%;
}

.btn-list::before {
position: absolute;
display: block;
content:url('../images/arrow_white.svg');
width:32px;
height:32px;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
right:14px;
top:50%;
}

.btn-list:hover::before {
right:11px;	
}

.news-detail-page {
 min-height:800px;
 padding-top:50px; }

@media only screen and (max-width: 768px){
.news-detail-page {
 min-height:800px;
 padding-top:100px; }
}


h2.news-detail-title {
	font-size: 20px;
	color:#00699f;
	margin:10px 0px 10px;
	font-weight: 500;
	border-bottom:2.5px solid #00699f;
	border-top:2.5px solid #00699f;
	padding:5px 10px 5px 0;
}
#up_ymd {
	text-align:right;
	font-size:17px;
	margin: 5px 5px 40px 0;
	border-bottom: 1px solid #888;
	font-family: 'Roboto Condensed', sans-serif;
}

#up_ymd span {
	font-size:13px;
	margin:5px 5px 0 0;
}

.detailUpfile{
	margin:5px 0 35px;
	text-align:center;
}
.backORcloseBtn {
	text-align:center;
	line-height:100%;
	margin-top:200px!important;
	margin-bottom: 50px;
}
.backORcloseBtn a {
	display:inline-block;
	padding:15px 20px;
	background-color:#f1f6f9;
	text-decoration:none;
	font-size:12px;
}
.detailUpfile img{
	max-width:100%;
	height:auto;
}
.pNav{
	font-size: 10px;
	color: #000;
	padding:10px;
	margin-bottom:30px;
	background:#f1f6f9;
}
.pNav a { position:relative;
margin-right:2em;}

.pNav a::after {
	position: absolute;
	content: "";
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	width: 5px;
	height: 5px;
	-webkit-transform: rotate(45deg);transform: rotate(45deg);
	right: -1.2em;
	top: 5px;
}

#detail {
 width:80%;
 margin:15px auto;
}

@media only screen and (max-width: 767px){
#detail {
 width:90%;
 margin:15px auto;
}
}

/*　お知らせ一覧ページ
-----------------------------------------------------*/
section.news-list {
	width:90%;
	margin: 50px auto 100px;
}