@charset "utf-8";

/* ヘッダー
-------------------------------------*/
header {
	width: 100%;
	background-color: transparent;
	position: fixed;
	top: 0;
    left: 0;
	z-index: 10;
	transition: background-color .3s ease;
}
header.scrolled {background-color: var(--white);}

header .head-area {
	max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: clamp(1rem,2vw,2rem) 1.5rem;
}

.head-logo {width: clamp(240px,58vw,562px);}
.head-logo > a {width: 100%;}
.head-logo .logoB,
header.scrolled .head-logo .logoW
{display: none;}
header.scrolled .head-logo .logoB {display: block;}


header .head-nav {
	display: flex;
	justify-content: center;
	align-items: center;
}

.nav-area {padding: 0 1rem;}

.nav-area ul {
	display: flex;justify-content: center;
	color: var(--white);font-size: clamp(18px,1.75vw,24px);
	transition: color .3s ease;
}
header.scrolled .nav-area ul {color: var(--black);}

.nav-area ul li {
	padding: 1rem;
	white-space: nowrap;
}

.nav-area ul li.has-child {position: relative;cursor: pointer;}
.nav-area ul li.has-child ul {
	position: absolute;left: 0;top: 100%;
	display: block;
	font-size: .75em;
	padding: 1rem;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s;
}
header.scrolled li.has-child ul {
	background-color: var(--blue);
	color: var(--white);
}
.nav-area ul li.has-child > a {display: inline-flex;align-items: center;}
.nav-area ul li.has-child > a::after {
	content: "";
	display: inline-block;
    width: 12px;
    height: 12px;
    border-top: 1px solid var(--white);
    border-right: 1px solid var(--white);
    transform: rotate(135deg);
    margin-left: 0.5rem;
}
header.scrolled .nav-area ul li.has-child > a::after {
	border-color: var(--black);
}
.nav-area ul li.has-child:hover ul {opacity: 1;visibility: visible;}
.nav-area ul li.has-child ul li {padding: .3rem 1rem;}

/* ハンバーガーボタン */
.hamburger {display: none;}
#mobile-nav {display: none;}

/* オーバーレイ */
.overlay {display: none;}

@media screen and (max-width: 960px) {
	
	header h1 {margin-bottom: 0;}
	
	header .head-nav {padding-bottom: 1rem;}
	
	#mobile-nav {display: block;}
	
	.nav-area {
		display: block;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		padding: 0;
		transform: translateX(-200%);
		transition: transform 0.3s ease;
		overflow-y: scroll;
        scrollbar-width: none;
        -ms-overflow-style: none;
	}
	.nav-area.is-open {
		transform: translateX(0);
	}
	
	.head-contact-btn {display: none;}
	
	.nav-area > ul {
		display: flex;justify-content: flex-start;align-items: center;flex-direction: column;
		background: var(--gr-blue2);
		height: 100%;
		padding-top: 2rem;
	}
	.nav-area ul li {
		text-align: center;
		padding: 1rem;
		width: 100%;
	}
	.nav-area ul li a {color: var(--white);}
	/*.nav-area ul li:not(.has-child) a {width: 100%;}
	
	.nav-area ul li.has-child {cursor: pointer;}*/
	.nav-area ul li a {width: 100%;}
	.nav-area ul li.has-child > a {justify-content: center;align-items: center;}
	header.scrolled .nav-area ul li.has-child > a::after {
		border-color: var(--white);
	}
	.nav-area ul li.has-child ul {
		display: none;
		position: initial;visibility: visible;opacity: 1;
		background-color: var(--white);
        margin-top: 1rem;padding: 1rem;
	}
	.nav-area ul li.has-child ul li {padding: .5rem 1rem;}
	.nav-area ul li.has-child ul li a {color: var(--black);transition: color .3s;}
	.nav-area ul li.has-child ul li a:hover {color: var(--blue);}
	
	/* ハンバーガーボタン */
	.hamburger {
		display: block;
		position: absolute;
		right: 2%;
		top: 50%;
		transform: translateY(-50%);
		cursor: pointer;
		width: 50px;
		height: 50px;
	}
	
	.hamburger span {
		display: inline-block;
		transition: all .4s;
		position: absolute;
		height: 3px;
		background-color: var(--white);
		width: 62%;
		left: 10px;
	}	
	.hamburger span:nth-of-type(1) {
		top:13px;	
	}

	.hamburger span:nth-of-type(2) {
		top:24px;
	}

	.hamburger span:nth-of-type(3) {
		top:36px;
	}

	/*activeクラスが付与されると線が回転して×になり、Menu表記をしている2つ目の要素が透過して消える*/
	.hamburger.active span,
	header.scrolled .hamburger span
	{background-color: var(--black);}
	.hamburger.active span:nth-of-type(1) {
		top: 18px;
		left: 18px;
		transform: translateY(6px) rotate(-45deg);
		width: 30%;
	}
	.hamburger.active span:nth-of-type(2) {
		opacity: 0;
	}
	.hamburger.active span:nth-of-type(3){
		top: 30px;
		left: 18px;
		transform: translateY(-6px) rotate(45deg);
		width: 30%;
	}
	
	body.menu-open {overflow: hidden;}
}

/* フッター
-------------------------------------*/
footer {
	background: url("../img/common/foot-bg.jpg") no-repeat center / cover;
	color: var(--white);
	font-size: clamp(16px,2vw,18px);
}

.foot-logo {max-width: clamp(290px,56vw,448px);}
.foot-img {max-width: clamp(170px,30vw,200px);}
.foot-email {display: inline-block;width: auto;vertical-align: middle;}

.foot-nav {
	font-size: clamp(18px,2vw,20px);
}
.foot-nav ul {padding: 0 clamp(1rem, 2vw, 1.5rem);}
.foot-nav > div > ul > li > a {margin: 1rem 0 .5rem;}
.foot-nav > div > ul li a {display: inline-flex;}
.foot-nav > div > ul li.has-child__foot > a {margin-bottom: .75rem;}
.foot-nav > div > ul li.has-child__foot a::before {
	content: "";
	display: inline-block;
    width: 12px;
    height: 12px;
    border-top: 1px solid var(--white);
    border-right: 1px solid var(--white);
    transform: rotate(135deg);
    margin-right: 0.5rem;
}
.foot-nav ul li.has-child__foot ul {font-size: .75em;margin-bottom: .75rem;}
.foot-nav ul li.has-child__foot ul li {margin-bottom: .5rem;}
.foot-nav ul li.has-child__foot ul li a::before {/*width: 8px;height: 8px;*/display: none;}


.copyright {font-size: 14px;text-align: center;margin: 0;background-color: var(--white);padding: 1rem;color: var(--black);}

@media screen and (max-width: 560px) {
	.foot-logo {margin-left: auto;margin-right: auto;}
}


/* トップページ
-------------------------------------*/
/* FV */
.fv::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 113 188 / .28);
}
.fv h1 {
	color: var(--white);font-size: clamp(18px,4.5vw,42px);filter: drop-shadow(0 0 6px var(--black));
	width: 100%;
	position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
}
.fv video {width: 100%;object-fit: cover;}

/* INFO(TOP) */
.top__news {
	background: url("../img/top/fv.jpg") no-repeat center / cover;
}
.top__news::before,.top__news::after {
	content: "";
	position: absolute;top: 0;left: 0;
	width: 100%;height: 100%;
}
.top__news::before {background-color: rgb(255 255 255 / .9);}
.top__news::after {
	background: linear-gradient(0deg, transparent calc(100% - 1px), var(--light-gray) calc(100% - 1px)), linear-gradient(90deg, transparent calc(100% - 1px), var(--light-gray) calc(100% - 1px)) center repeat;
    background-size: 14px 14px;
}

.top__news > div.relative {z-index: 1;}

ul.list-news li {
	padding: 1rem;
	border-bottom: 1px solid var(--black);
}
ul.list-news li:last-of-type {border-bottom: none;}
ul.list-news li a {width: 100%;}
ul.list-news li time {display: block;margin-bottom: .5rem;}
ul.list-news li p {display: inline-block;margin: .5rem 0 0;}
.news__category {padding: .1rem .5rem;color: var(--white);font-size: .8em;}
.news__category.cat-blue {background-color: var(--light-blue);}
.news__category.cat-green {background-color: var(--green);}

/* Company(TOP) */
.com-img__inner {
	width: 100%;max-width: 1920px;
	background: url("../img/top/top-content-bg01.png") no-repeat right top / cover;
	position: absolute;
	top: 0;left: 50%;transform: translateX(-50%);
	z-index: -1;
}
.com-img__img {
    width: clamp(300px,72vw,1300px);
}
.com-txt {
	max-width: 340px;
	margin-left: auto;
}

/* Works(TOP) */
.top__works > div {
	border: 1px solid var(--deep-dark-gray);
	padding: 2rem 1rem;
 }

/* CSR(TOP) */
ul.list-news.list-csr li:first-of-type {
	border-top: 1px solid var(--black);
}
ul.list-news.list-csr li:last-of-type {
	border-bottom: 1px solid var(--black);
}


@media screen and (max-width: 960px) {
	/* Company(TOP) */
	.com-img__inner {
		position: initial;transform: none;
	}
	.com-txt {margin-right: auto;}
}

@media screen and (max-width: 560px) {
	/* FV */
	.fv img,.fv video {aspect-ratio: 375 / 436;}
	.fv h1 {
		text-align: center;
		top: 20%;transform: translateX(-50%);
	}
	
	/* INFO(TOP) */
	ul.list-news li time {display: inline-block;}
	
	/* Company(TOP) */
	.com-img__img {width: 100%;}
	
	/* Works(TOP) */
	.top__works > div {padding: .5rem .5rem 0;}
}


/* 下層ページ
-------------------------------------*/
/* Header(下層) */
body.sub-page header {
	position: -webkit-sticky;position: sticky;
	background-color: var(--white);
}
body.sub-page header .nav-area ul {color: var(--black);}
body.sub-page header .nav-area ul li.has-child > a::after {
	border-color: var(--black);
}
body.sub-page header li.has-child ul {
	background-color: var(--blue);color: var(--white);
}

/* FV(下層) */
body.sub-page .fv::before {background-color: rgb(0 35 82 / .29);}
body.sub-page .fv h1 {font-size: clamp(18px, 4.25vw, 40px);}
body.sub-page .fv h1 span {font-size: .75em;}

@media screen and (max-width: 960px) {
	/* Header(下層) */
	body.sub-page .hamburger span {background-color: var(--black);}
	body.sub-page .nav-area ul li.has-child ul {background-color: var(--white);}
	body.sub-page header .nav-area ul li.has-child > a::after {
		border-color: var(--white);
	}
	
	/* FV(下層) */
	body.sub-page .fv img {aspect-ratio: 3 / 1;}
	
}

@media screen and (max-width: 560px) {
	/* FV(下層) */
	body.sub-page .fv h1 {top: 50%;transform: translate(-50%,-50%);}
	
}

/* Company
-------------------------------------*/
.company-message {
	background: url("../img/company/message-bg.png") no-repeat center bottom / contain;
}
.message-img {
	max-width: clamp(100px, 28vw, 280px);
	margin: -50px 0 0 auto;padding-bottom: clamp(1rem,2vw,2rem);
}

/* CSR
-------------------------------------*/
@media screen and (max-width: 560px) {
	.csr-area .flex img {width: 50%;margin: 0 auto;}
}

/* Info
-------------------------------------*/
/* 一覧 */
.info-thumbnail {aspect-ratio: 8 / 5;overflow:hidden; }
.info-thumbnail img {object-fit: cover;}

.list-info li {margin-bottom: 1rem;}
.list-info h4 {
    font-size: clamp(18px, 2.5vw, 24px);
    margin: .5rem 0;
}
.list-info .txt{
	margin: 0 auto clamp(.5rem,2.2vw,2rem);line-height: 1.4em;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
}

.info-main {border-right: 1px solid var(--dark-gray);}

.info-side h3 {font-size: clamp(22px,2.75vw,26px);margin: 0 auto 1rem;}
.info-side p {margin: 0 auto .75rem;font-size: clamp(18px, 2vw, 20px);}

.pagination-box ul {
	font-size: clamp(18px, 2.5vw, 24px);
}
.pagination-box__single ul {display:inline-grid;grid-template-columns:1fr auto 1fr;align-items:center;}
.pagination-box__archive ul {display:inline-flex;align-items:center;justify-content: center;}
.pagination-box ul li {padding: 0 .5rem .2rem;}
.pagination-box ul li.current span {border-bottom: 1px solid var(--deep-dark-gray);}

.pagination-box__single li.prev{justify-self:start;}
.pagination-box__single li.index{justify-self:center;}
.pagination-box__single li.next{justify-self:end;}
.pagination-box__archive li.prev{margin-right:auto;}
.pagination-box__archive li.next{margin-left:auto;}
.pagination-box ul li.prev a::before {content: "←";}
.pagination-box ul li.next a::after {content: "→";}
.pagination-box ul li .placeholder{visibility:hidden;display:inline-block;}

@media screen and (max-width: 768px) {
	/* 一覧 */
	.info-main {border-right: none;}
}

@media screen and (max-width: 560px) {
	/* 一覧 */
	.list-info .txt {-webkit-line-clamp: 4;}
	.list-info .time,.info-main .time {text-align: right;}
}


/* 工事実績
-------------------------------------*/
/* 一覧 */
.record-list > a {
	flex-basis: calc(25% - 1rem);
	border-top: 1px solid var(--deep-dark-gray);
    border-bottom: 1px solid var(--deep-dark-gray);
    padding: clamp(.5rem,1.5vw,1.25rem) clamp(.25rem,1.1vw,1rem);margin: 0 .5rem 3rem;
	text-align: center;font-size: clamp(13.5px,1.8vw,20px);
	position: relative;
}
.record-list > a::after {
	content: "";
    display: inline-block;
    width: clamp(3px,.825vw,7px);
    height: clamp(3px,.825vw,7px);
    border-top: 1px solid var(--deep-dark-gray);
    border-right: 1px solid var(--deep-dark-gray);
	position: absolute;right: clamp(9px,1.8vw,16px);top: 50%;
    transform: rotate(45deg) translateY(calc(-50% - 3px));
}
.record-list > a.current {background-color: var(--light-blue);color: var(--white);}
.record-list > a.current::after {border-color: var(--white);}

.record-list__cat img {
	object-fit: cover;
	aspect-ratio: 108 / 71;
	margin-bottom: 1rem;
}

/* 詳細 */
.record-gallery img {
	object-fit: cover;object-position: center center;height: 100%;
	/*position: relative;left: 0;right: 0;
    top: 50%;transform: translateY(-50%);*/
}
.gallery-main {
	position: relative;
	flex: 1 1 0%;min-width: 0;
	overflow: hidden;
}
.gallery-main li {aspect-ratio: 437 / 287;}
.gallery-thumbs {
	flex-basis: calc(100% / 3.2);min-width: 0;
	display: grid;grid-template-columns: repeat(2, 1fr);gap: clamp(.25rem,1.1vw,1rem);
}
.gallery-thumbs button {
	display: block;width: 100%;padding: 0;aspect-ratio: 85 / 56;
	border: 2px solid transparent;cursor: pointer;
    overflow: hidden;
}
.gallery-thumbs button.is-active {
	border-color: var(--light-blue);
	box-shadow: 0 0 0 2px rgb(0 160 233 / .35);
}
.slick-prev, .slick-next {
    position: absolute;top: 50%;transform: translateY(-50%);
    z-index: 2;
    width: clamp(18px,4vw,52px);
    /*height: 44px;*/
	aspect-ratio: 1 / 1;
    border: 0;border-radius: 50%;padding: 0;
    box-shadow: 0 1px 6px rgb(0 0 0 / .15);
	cursor: pointer;
}
.slick-prev {left: clamp(8px,2vw,16px);}
.slick-next {right: clamp(8px,2vw,16px);}
.slick-prev span {
	position: relative;pointer-events: none;
	display: inline-block;width: 100%;height: 100%;aspect-ratio: 1 / 1;
}
.slick-prev span::before, .slick-next span::before {
	content: "";
	width: 100%;height: 100%;
	position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);
	background-color: rgb(255 255 255 / .7);border-radius: 50%;
}
.slick-prev span::before {
	clip-path: polygon(0% 0%, 0% 100%, 65% 100%, 65% 75%, 25% 50%, 65% 25%, 65% 100%, 100% 100%, 100% 0%);
}
.slick-next span::before {
	clip-path: polygon(0% 0%, 0% 100%, 40% 100%, 40% 25%, 75% 50%, 40% 75%, 40% 100%, 100% 100%, 100% 0%);
}
.slick-prev::before, .slick-next::before { content: none; }


.record-box h3 {
	display: inline-block;
	background-color: var(--light-blue);
	font-size: clamp(18px, 2.5vw, 24px);color: var(--white);line-height: 1.3em;
	padding: 1rem 1.5rem;margin: 0;
}
.record-box > div:has(table) {background: var(--gr-light-blue);padding: 1rem;}
.record-box table {max-width: 1200px;margin-left: auto;margin-right: auto;}
.record-box table th {font-size: clamp(18px,2vw,22px);color: var(--light-blue);text-align: left;white-space: nowrap;}

.pagination-box .link-btn__simp-arrow.link-btn__prev::before {
	margin-right: 1rem;
}

@media screen and (max-width: 960px) {
	/* 一覧 */
	.record-list {justify-content: flex-start;}
	.record-list > a {
		flex-basis: calc(100% / 2);
		margin: -1px 0 0 0;
	}
	
	/* 詳細 */
	.gallery-main {width: 100%;max-width: 100%;}
	.gallery-thumbs {flex: none;width: auto;grid-template-columns: repeat(4, 1fr);}
}

@media screen and (max-width: 560px) {
	/* 一覧 */
	.record-list > a {/*flex: 1 1 auto;*/white-space: nowrap;}
}


/* その他
-------------------------------------*/
/* ページトップへ戻るボタン */
#page-top {
	position: fixed;
	right: 15px;
	bottom: -70px;
	z-index: 4;
	transition: bottom 0.3s ease-in-out;
}

#page-top.show {
    bottom: 20px; /* 表示時の位置 */
}

#page-top a {
	display: block;
	width: 50px;
	font-weight: bold;
	background-color: var(--deep-dark-gray);
	color: var(--white);
	text-align: center;
	padding: 15px 5px;
	transition: background-color 0.3s;
}