@charset "utf-8";
/*********************
共通項目一括指定
サイト別設定はbaseにて
*********************/
/* @group reset */
*{ margin:0; padding:0;}
/* 文字サイズ800px時に10px */
*{ text-decoration:none; font-weight:normal; font-size:calc(100vw /80); line-height:160%;
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}
*{ list-style:none; border:none;}

/* tag parameter */
html { scroll-behavior: smooth;
	background-size: cover;
	background-position: bottom;
}

body{
	width:100%;
	background: url(../img/tmpl/main_bg.jpg);
	background-size: cover;
	background-position: bottom;
}
section{margin: 1rem auto 0; padding: 0 0 1rem;}
article{padding: 0 0 1rem;}

h1,h2,h3,h4,h5{
	font-weight:bold; line-height:200%; text-align: left; margin:1rem 0px 1.5rem; text-indent: 2rem;
}
h1{ font-size:2rem;}
h2{ width: 95%; margin: 1rem auto;
	font-size:1.8rem;
	letter-spacing: 0.05em;
	transform: skew(-20deg);}
h3{ font-size:1.6rem;
	letter-spacing: 0.05em;
	transform: skew(-20deg);}
h4{ font-size:1.4rem;
	letter-spacing: 0.05em;
	transform: skew(-20deg);}
h5{ font-size:1.2rem; padding:0.5em 0px;
	background-repeat:no-repeat;
}

img{ vertical-align : top;}
img{ max-width:100%;width:auto;}

dl dt{ font-weight:bold; font-size:1.2rem; margin:10px 0px 4px;}
dl dd{ margin-left:1em;}
dl dd dt{ font-weight:normal;}


ol{ text-align: left; width: fit-content; margin: auto;}
ol li{ list-style-type:decimal; margin-left: 2em;}

nav li{ display:inline-block;}
nav li a{ display:block; width:100%; font-weight:bold;}

main{ display: block;}
main section{ display: block; width: 95%;}

table{ border-collapse:collapse; margin: auto; width: 80%;}
table th,table td{ padding:5px; vertical-align:top;}
table th{ vertical-align:top; text-align:center; font-weight:bold;}
table td{ text-align:left; }
table td ul,table td ol{ margin: 0px;}

/* class parameter */
.f_l{ float:left; text-align:left;}
.f_r{ float:right; text-align:right;}
.f_box:after{display:block;clear:both;height:0px;visibility:hidden;content:".";}
.f_box{ width:100%; min-height: 1px; /*IE6、7対策*/}
.right_box{ float:right;}
.left_box{ float:left;}

.f_cl{ clear:both;}
.f_cl_l{ clear:left;}
.f_cl_r{ clear:right;}
.f_cl_old{ display:none; clear:both;}

.p_l{ text-align:left;}
.p_c{ text-align:center;}
.p_r{ text-align:right;}

.bg_none{ background: none;}
.bg_white{
	background: #ffffff;
	
	& *{scroll-margin-top: 5rem; /* ここでオフセットのピクセル数を指定します */}
}
.bg_black{ background: #000000;}
.bg_pattern {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #ffe9a7;
	opacity: 0.4;
	z-index: -1;
  }
  .Boxes {
	background-image:  linear-gradient(#0000cc 2px, transparent 2px), linear-gradient(to right, #0000cc 2px, #ffe9a7 2px);
	background-size: 40px 40px;
  }

.txt_box{ width: fit-content; max-width: 85%; text-align: left; margin: auto;}

.c_red{ color:#cc0000;}

.pc_mode{ display:block;}
.sp_mode{ display:none;}

.gnavi_lists { display: flex;}
.gnavi_lists .dropdown_lists{ display: none; }

.hamburger{
	display: none;
	clear: both;
}

a.button{ display: block; width: fit-content; margin: 0.5em auto; padding: 0.5em 1em;
    font-size: 1.2em; font-weight: bold;
}
.close_button{ display: none;}

.sns_x{ display: block;}

.flex{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: space-around;
}

.tb_dl {background-color: #ffffff;}
.tb_dl dt,.tb_dl dd{ margin: 1rem 0px 0px ; padding: 0.5em; border-bottom: 2px solid #000000;}
.tb_dl dt{ width: 20%; border-right: 1px solid #000000;}
.tb_dl dd{ width: 76%; text-align: left;}
.tb_dl dd *{ text-align: left;}
.tb_dl dd ol, .tb_dl dd ul{ padding: 0px; margin: 0px;}

/* id parameter*/

/*header*/
/*メニュー上部固定*/
header{
	z-index: 99;
	position: fixed;
	top:0;
	left:0;
	width: fit-content;
	height: 7rem;

	& section{ margin:auto;}
	& section:after{display:block;clear:both;height:0px;visibility:hidden;content:".";}

	& a{ font-size:1.1rem; padding:5px 0px; text-align: center; }

	/*logo*/
	& #logo{
		& ul{ width:97%; margin:auto;}
		& .flex{
			flex-flow: row wrap;
			justify-content: space-between;
			align-items: center;

			& li{
				align-content: stretch;
				background-color: #ffffff;
			}
			/* 建設ロゴ */
			& li.logo_ksc{ 
				flex-basis: 20%;
			}

			/* SNSエリア */
			& li.logo_sns{ 
				flex-basis: 75%;

				& .flex{
					justify-content: flex-end;
				}
				& li{flex-basis: 4%; margin: 0px 0.3em;}
				& li.grouplogo{flex-basis: 10%;} /*　グループロゴだけ横に長いので大きく */
				& .yt a{
					display: flex;
					justify-content:center;
					align-items:center;
					background-color: #ff0000; color:#ffffff; font-weight: bold;
					aspect-ratio: 5 / 2;} /*　youtube仮置き */
			}
			
			/* グローバルメニュー */
			& li.logo_menu{
				flex-basis: 100%; justify-content: flex-end;

				& ul.gnavi_lists{
					justify-content: flex-end;

					& a{ display: block; width: fit-content; padding: 0px 0.2em;
						font-weight: bold;
						letter-spacing: 0.05em; transform: skew(-20deg);
					}

					/*	メニュー表示切り替え */
					& .lst_sns{ display: none;}
					& .partner{ display: none;}
				}
			}
		}
	}
} 

/*main*/

main{
	/*上部余白確保*/
	margin-top: 7rem;
	& *{scroll-margin-top: 7rem; /* ここでオフセットのピクセル数を指定します */}

	/* ページ見出し */
	& #title{
		display: block; width: 100%; height: fit-content;
		margin-top: 0px;
		padding: 0;
		background-position: right;
		background-size: 50%;
		background-repeat: no-repeat;
		text-align: left;
		/* ナビゲーション*/
		& .gnavi_lists{
			display: block; width: 100%; height: fit-content; padding: 15px 0px; text-indent: 1em;

			& li{
				display: none;
			
				& a{ display: inline; font-size: 1.4rem; font-weight: bold;}
				& .dropdown_lists *{ padding: 3px 2em; font-size: 1rem; text-indent: 1em;}

			}
		}
	}
}

main#achieve #title{
	background-image: url(../img/title/achieve.jpg);
}
main#achieve #title li.lst_achieve{ display: block;}
main#achieve #title li.lst_achieve *{ display: block;}
main#achieve #title li.lst_achieve a{ display: inline;}

main#attempt #title{
	background-image: url(../img/title/attempt.jpg);
}
main#attempt #title li.lst_attempt { display: block;}
main#attempt #title li.lst_attempt *{ display: block;}
main#attempt #title li.lst_attempt a{ display: inline;}

main#company #title{
	background-image: url(../img/title/company.jpg);
}
main#company #title li.lst_company { display: block;}
main#company #title li.lst_company *{ display: block;}
main#company #title li.lst_company a{ display: inline;}

main#inquiry #title{
	background-image: url(../img/title/inquiry.jpg);
}
main#inquiry #title li.lst_inquiry { display: block;}
main#inquiry #title li.lst_inquiry *{ display: block;}
main#inquiry #title li.lst_inquiry a{ display: inline;}

main#recruit #title{
	background-image: url(../img/title/recruit.jpg);
}
main#recruit #title li.lst_recruit { display: block;}
main#recruit #title li.lst_recruit *{ display: block;}
main#recruit #title li.lst_recruit a{ display: inline;}

/*footer*/
footer {
	clear:both; padding: 1em;
    display: flex;
	flex-flow: row wrap;
	justify-content:space-around;
    align-items: flex-start;

	& #ft_leftbox{ order:1; flex-basis: 30%;  text-align: center;}

	& #ft_rightbox{
		order:2;
		flex-basis: 68%;
		& #footer_menu {
			& ul.gnavi_lists{
				flex-direction: column;
				flex-basis: 100%;
			}
			& ul.gnavi_lists > li{
				flex-basis: 100% ;
			}
			& ul.gnavi_lists > .gnavi_list{
				& > a{ font-size: 1.2rem;}
				& ul.dropdown_lists{
					display: flex;
					margin-left: 1rem;
					flex-flow: row wrap;
					justify-content:flex-start;
					align-items: flex-start;
				}
				& .dropdown_lists > li{ flex-basis: 32% ;}
				& .dropdown_lists a{ font-size: 0.9rem;}
			}
		}
	}

	& address{ flex-basis: 100%;  order:3; line-height:140%; text-align:center; font-size:0.9rem;}
}



/*-------------------------------------------------------
cookiePolicy
-------------------------------------------------------*/
#cookiePolicy {
	position: fixed;
	z-index: 1000;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 15px 90px 15px 40px;
	background: rgba(70, 70, 70, 0.93);
	box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.22);
	box-sizing: border-box;
}
#cookiePolicy .cookiePolicy__flex {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	max-width: 1920px;
	width: 100%;
	margin: 0 auto;
}
#cookiePolicy .cookiePolicy__flex .detail {
	width: calc(100% - 250px);
}
@media screen and (max-width: 768px) {
	#cookiePolicy .cookiePolicy__flex .detail {
		width: 100%;
	}
}
#cookiePolicy .cookiePolicy__flex .detail p {
	text-align: justify;
/*	font-size: 1.1rem;	*/
	line-height: 1.88;
	letter-spacing: .08em;
}
@media screen and (max-width: 768px) {
	#cookiePolicy .cookiePolicy__flex .detail p {
/*		font-size: 1.1rem; */
		letter-spacing: .06em;
	}
}
#cookiePolicy .cookiePolicy__flex .detail p a {
/*	font-size:1.1rem;	*/
	color:#ffffff;
}
#cookiePolicy .cookiePolicy__flex .agreeBtn {
	width: 200px;
}
#cookiePolicy .cookiePolicy__flex .agreeBtn2 {
	width: 30px;
}
#cookiePolicy .cookiePolicy__flex .agreeBtn2 img {
	height: 24px;
	width: 24px;
}
@media screen and (max-width: 768px) {
	#cookiePolicy .cookiePolicy__flex .agreeBtn {
		padding-top: 10px;
	}
}
@media screen and (max-width: 414px) {
	#cookiePolicy .cookiePolicy__flex .agreeBtn {
		width: 66%;
	}
}
#cookiePolicy .cookiePolicy__flex .agreeBtn p {
	color: #ffffff;
	cursor: pointer;
	padding: 20px 4px;
	text-align: center;
	font-size: 1.1rem;
	box-sizing: border-box;
	transition: .36s;
}
@media screen and (max-width: 768px) {
	#cookiePolicy .cookiePolicy__flex .agreeBtn p {
		padding: 12px 4px;
		font-size: 1.1rem;
	}
}
#cookiePolicy .cookiePolicy__flex .agreeBtn p:hover {
	opacity: 0.7;
}
#cookiePolicy .cookiePolicy__flex .agreeBtn2 img:hover {
	opacity: 0.7;
}
#cookiePolicy .cookiePolicy__minimize {
	cursor: pointer;
	height: 24px;
	margin-top: 8px;
	width: 24px;
}
#cookiePolicy .cookiePolicy__minimize img:hover {
	opacity: 0.7;
}
.cookiePolicy__maximize {
	bottom: 15px;
	box-sizing: border-box;
	display: none;
	cursor: pointer;
	height: 24px;
	left: 40px;
	position: fixed;
	width: 24px;
	z-index: 1000;
}
.cookiePolicy__maximize img:hover {
	opacity: 0.7;
}

/* @end */