@charset "utf-8";

.bg-green {
	background: #f1f6ea;
}


 #main.tech_body .tech_title h1 {
	font-size: 40px;
	font-size: 2.5rem;
	margin: 0 0 10px 0;
}
#main.tech_body .tech_title h1:after {
	content: none;
}
.lead{
	text-align: center;
	font-size: 18px;
	font-size: 1.125rem;
	font-weight: bold;
	color: #6a6a6a;
	/* color: #619318; */
	line-height: 2;
	margin-bottom: 40px;
}

#main.tech_body .section h2 {
	font-size: 36px;
	font-size: 2.25rem;
	line-height: 1;
	text-align: center;
	font-weight: bold;
	margin: 0 0 25px 0;
}

#main.tech_body .section h2#anc_tech,
#main.tech_body .section h2#anc_tech_menu {
	margin-top: -70px;
	padding-top: 70px;
}


/* 3¤Ä¤Î¥Ý¥¤¥ó¥È */
#body #main.tech_body .section.point{
	width: 1010px;
	margin: 40px auto;
	display: flex;
	justify-content: space-between;
	padding: 40px 0;
}
.point div{
	background: #fff;
	width: calc((100% - 110px) / 3);
	padding: 20px 25px 20px 25px;
	box-sizing: border-box;
	box-shadow: 10px 10px 0px 0 rgb(147, 178, 103);
}

.point .num{
	color: #619318;
	font-size: 20px;
	font-size: 1.25rem;
	line-height: 0.9;
	font-family: Helvetica;
	text-align: center;
}
.point .num span{
	font-size: 60px;
	font-size: 3.75rem;
	display: block;
}

#main.tech_body .point h3{
	padding: 0;
	margin: 8px 0 8px 0;
	text-align: center;
	font-size: 24px;
	font-size: 1.5rem;
	line-height: 1.33;
	letter-spacing: 0.05em;
}
/* 3¤Ä¤Î¥Ý¥¤¥ó¥È ¤³¤³¤Þ¤Ç */



/* ·ÅÉäÐÔŽü—‰Îï¤Î„I·Ö·½·¨
-----------------------*/
#body #main.tech_body .section.tech_area{
	background: #f3efe8;
	padding: 60px 100px 40px;
	margin: 50px auto;
}
.tech_area .lead{
	text-align: center;
	margin: 0 0 30px;
	font-size: 16px;
	font-size: 1rem;
	font-weight: normal;
	color: #363434;
}
.tech_area img{
	width: 100%;
	height: auto;
}

.tech_area .fig_tech {
	position: relative;
	margin-bottom: 15px;
}
.tech_area .fig_tech .main {
	width: 960px;
	height: 575px;
}
.tech_area .sub01,
.tech_area .sub02,
.tech_area .sub03,
.tech_area .sub04 {
	position: absolute;
	width: 88px;
	height: 88px;
	background: rgba(255,255,255,0.4);
	border-radius: 44px;
	animation: zoomIn 3s infinite;
}
@keyframes zoomIn {
	0% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		transform: scale(0.8);
		opacity: 0;
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.tech_area .sub01 {	top: 185px; left: 122px;}
.tech_area .sub02 {	top: 196px; left: 318px;}
.tech_area .sub03 {	top: 278px; left: 526px;}
.tech_area .sub04 {	top: 408px; left: 780px;}

.tech_area .sub01_pic,
.tech_area .sub02_pic,
.tech_area .sub03_pic,
.tech_area .sub04_pic {
	position: absolute;
	width: 80px;
	height: 80px;
}
.tech_area .sub01_pic {	top: 189px; left: 126px;}
.tech_area .sub02_pic {	top: 200px; left: 322px;}
.tech_area .sub03_pic {	top: 282px; left: 530px;}
.tech_area .sub04_pic {	top: 412px; left: 784px;}

.tech_area ul.tech_list{
	display: flex;
	flex-wrap: wrap;
}
.tech_area ul.tech_list > li{
    width: 48%;
	display: flex;
	margin-top: 20px;
    padding: 10px 12px 10px 10px;
    box-sizing: border-box;
}
.tech_area ul.tech_list > li:nth-child(2n){
	margin-left: 4%;
}

.tech_area ul.tech_list > li .icon{
    width: 110px;
	height: auto;
	margin-right: 15px;
}
.tech_area ul.tech_list > li .icon img{
    width: 110px;
	height: auto;
}

#main.tech_body .tech_area ul.tech_list > li h3{
	padding: 0;
	margin: 20px 0 0 0;
	font-size: 16px;
	font-size: 1rem;
	letter-spacing: 0.01em;
}
#main.tech_body .tech_area ul.tech_list > li .txt{
	line-height: 1.6;
}

#main.tech_body .tech_area ul.tech_list > li.current{
	background: rgba(162, 133, 99, 0.18);
	border-radius: 5px;
}
#main.tech_body .tech_area ul.tech_list > li.current h3{
	margin: 17px 0 0 0;
	font-size: 18px;
	font-size: 1.125rem;
}

#body #main.tech_body .caption{
	/* font-size: 13px;
	font-size: 0.8125rem; */
	font-size: 12.5px;
	font-size: 0.78125rem;
	text-align: right;
	margin-top: 15px;
}
#body #main.tech_body .caption a {
	text-decoration: none;
	color: #363434;
}
#body #main.tech_body .caption a:visited,
#body #main.tech_body .caption a:hover {
	color: #363434;
}
#body #main.tech_body .caption img.link_icon{
	width: 7px;
	height: auto;
	vertical-align: 2px;
	margin: 0 3px 0 2px;
}
/* ·ÅÉäÐÔŽü—‰Îï¤Î„I·Ö·½·¨ ¤³¤³¤Þ¤Ç */


/* ·ÅÉäÐÔŽü—‰Îï„I·Ö¼¼ÐgÒ»ÓE
-----------------------*/
#body #main.tech_body .section.tech_menu_area {
	width: 1160px;
	margin: 0 auto;
	padding: 60px 0 20px 0;
}
#main.tech_body .section.tech_menu_area h2.tech_menu{
	display: flex;
    justify-content: center;
	align-items: center;
	margin: 40px 0 15px 0;
	font-size: 26px;
	font-size: 1.625rem;
	font-weight: bold;
	color: #fff;
	background: linear-gradient(to left, #a1d65b, 40%, #76a32d);
	border-radius: 5px;
	line-height: 40px;
	padding-top: 4px;
	letter-spacing: 0.05em;
}
@media all and (-ms-high-contrast: none){
	#main.tech_body .section.tech_menu_area h2.tech_menu{
		background: #76a32d;
	}
}
.tech_menu_area p.lead {
	text-align: center;
	font-size: 16px;
	font-size: 1rem;
	font-weight: normal;
	color: #363434;
	letter-spacing: 0;
	margin-bottom: 0;
}

#main.tech_body .section.tech_menu_area h2.tech_menu.hrd{
	/* font-size: 22px;
	font-size: 1.375rem; */
	color: #363434;
	/* background: linear-gradient(to left, #cceda2, 40%, #b3d381); */
	background: linear-gradient(to left, #cceda2, 40%, #a6d35d);
	/* line-height: 40px; */
}
@media all and (-ms-high-contrast: none){
	#main.tech_body .section.tech_menu_area h2.tech_menu.hrd{
		background: #b3d381;
	}
}
/* .tech_menu_area p.lead.hrd {
	font-weight: normal;
	margin-bottom: 40px;
} */

.tech_menu_area .tech_menu{
	display: flex;
	justify-content: space-between;
	margin-bottom: 45px;
}
.tech_menu_area .tech_menu > .col {
	width: calc((100% - 30px) / 2);
}

.tech_menu_area .bg-box {
	padding: 10px 30px 15px;
	background: #fff;
	border-radius: 5px;
	box-sizing: border-box;
	margin-top: 15px;
}
#main.tech_body .section.tech_menu_area h3{
	margin: 0 0 10px;
	font-size: 22px;
	font-size: 1.375rem;
	/* font-size: 21px;
	font-size: 1.3125rem; */
	font-weight: bold;
	color: #363434;
	text-align: center;
	letter-spacing: 0.05em;
	padding: 0;
}

.tech_menu_area .tech_menu.hrd{
	display: block;
	margin-bottom: 30px;
}
.tech_menu_area .tech_menu.hrd .menu{
	display: flex;
	justify-content: space-between;
}
.tech_menu_area .tech_menu.hrd .menu > .col {
	width: calc((100% - 30px) / 2);
}
#main .tech_menu_area .tech_menu.hrd h4{
	position: relative;
	margin: 0 0 10px;
	padding: 0 0 0 17px;
	font-size: 17px;
	font-size: 1.0625rem;
	letter-spacing: 0.01em;
}
#main .tech_menu_area .tech_menu.hrd h4:before{
	content: "";
	position: absolute;
	background: #76a32d;
	top: 7px;
    left: 0;
    height: 12px;
    width: 12px;
	border-radius: 1px;
}
.tech_menu_area .tech_menu.hrd .menu > .col  > .menu_list{
	margin-left: 17px;
}
.tech_menu_area .tech_menu.hrd .menu > .col > .menu_list > li.num_indent a {
    display: inline-block;
    text-indent: -1.6em;   /* 1ÐÐÄ¿¤ò×ó¤Ë³ö¤·¤ÆÊý×Ö¤òÖä¯ */
    padding-left: 1.6em;   /* 2ÐÐÄ¿ÒÔ½µ¤Îé_ʼλÖäòÕ{Õû */
}

.tech_menu_area .bg-box a {
	text-decoration: none;
	color: #000;
}
.tech_menu_area .bg-box a:hover {
	text-decoration: underline;
	color: #fc0010;
}

.menu_list > li {
	position: relative;
	font-size: 0.9375rem;
	padding-left: 1.2em;
	line-height: 1.55;
	box-sizing: border-box;
	margin-bottom: 7px;
}
.menu_list > li:before {
	position: absolute;
	content: url(/tech/civil_common/images/icon_arrow_s.svg);
	display: inline-block;
	top: -2px;
	left: 2px;
	width: 9px;
	height: 9px;
}
.menu_list > li.new:after {
	content: "NEW";
	position: relative;
	display: inline-block;
	line-height: 1;
	margin-left: 6px;
	padding: 3px 5px 1px;
	font-size: 0.6875rem;
	font-weight: bold;
	color: #fff;
	background: #cc0000;
	border-radius: 3px;
	top: -2px;
}
.menu_list > li a:after {
	position: relative;
	content: "";
	display: inline-block;
	line-height: 1;
	font-size: 0.6875rem;
	font-weight: bold;
	color: #fff;
	background: #18615e;
	border-radius: 3px;
	top: -2px;
}
.menu_list > li a.mov:after {
	content: "„Ó»­¤¢¤ê";
	background: #18615e;
	margin-left: 6px;
	padding: 3px 5px 1px;
}

.menu_list > li.no_link {
	/* color: #868b91; */
	color: #7b7b7b;
}
.menu_list > li.no_link:before {
	content: url(/tech/civil_common/images/icon_arrow_s_gray.svg);
}

.menu_list > li span {
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	color: #619318;
	text-indent: -0.35rem;
}
.menu_list > li.ctg span {
	display: inline-block;
	/* letter-spacing: -0.02em; */
}

img.link_icon {
	vertical-align: 3px;
}
.menu_list > li.icon_pace img.link_icon {
	margin-left: 0;
}

/* indentÕ{Õû */
.menu_list > li.ctg{
	text-indent: -107px;
	padding-left: 122px;
}
.menu_list > li.ctg:before,
.menu_list > li.ctg.new:after,
.menu_list > li.ctg a:after {
	text-indent: 0;
}
.menu_list > li.ctg.tunnel{
	text-indent: -107px;
	padding-left: 122px;
}

.banner_related{
	display: flex;
	margin-top: 25px;
	border-top: 1px dotted #619318;
}
#main .banner_related h4{
	font-size: 0.875rem;
	font-size: 14px;
	margin-top: 12px;
}
.banner_related ul {
	margin-top: 17px;
}
.banner_related li {
	width: 325px;
	height: 65px;
	margin-left: 34px;
	background-color: #fff;
	/* border: solid 1px #ccc; */
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.banner_related li a {
	display: flex;
	align-items: center;
}
.banner_related li a:hover {
}
.tech_menu_area .bg-box .banner_related li a:before {
	content: none;
}
.banner_related .img {
	position: relative;
	width: 34%;
	padding-top: 65px;
	background: #fff;
	overflow: hidden;
}
.banner_related .img img {
	position: absolute;
	top: -100%;
	left: -100%;
	bottom: -100%;
	right: -100%;
	margin: auto;
	width: auto;
	height: 100%;
	transition: all 0.3s ease;
}
.banner_related li a:hover .img img {
    transform: scale(1.1, 1.1);
    opacity: 0.5;
}
.banner_related .txt {
	width: 66%;
	line-height: 1.4;
	margin-left: 10px;
}
.banner_related .txt .sub {
	font-size: 0.75rem;
	font-size: 12px;
}
.banner_related .txt .link {
	position: relative;
	margin-left: 2px;
	font-size: 1rem;
	font-size: 16px;
	font-weight: bold;
}

/* ·ÅÉäÐÔŽü—‰Îï„I·Ö¼¼ÐgÒ»ÓE ¤³¤³¤Þ¤Ç */

/* .annot{
	border: solid 5px #f1f6ea;
	width: 810px;
	margin: 40px auto 40px;
	padding: 20px 25px;
	box-sizing: border-box;
} */


/* „Ó×÷évßB */
.fadeUpTrigger{
	opacity: 0;
}
.fadeUp{
	animation-name: fadeUpAnime;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeUpAnime{
	from {
	opacity: 0;
	transform: translateY(40px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
}
/* „Ó×÷évßB ¤³¤³¤Þ¤Ç */


/*----------------------------------------------------
    print
----------------------------------------------------*/
@media print {
	.tech_area .sub01,
	.tech_area .sub02,
	.tech_area .sub03,
	.tech_area .sub04,
	.tech_area .sub01_pic,
	.tech_area .sub02_pic,
	.tech_area .sub03_pic,
	.tech_area .sub04_pic{
		display: none;
	}
	#body #main.tech_body .section.tech_menu_area {
		width: 1120px;
	}
	#main.tech_body .section.tech_menu_area h2.tech_menu{
		background: #76a32d;
	}
	.tech_menu_area .bg-box {
		padding: 10px 15px 15px;
	}

	.fadeUp,
	.fadeUpTrigger{
		animation: none;
		opacity: 1;
	}
}