@charset "UTF-8";
/* CSS Document */
.ta_center {
	text-align:center;
}
.ta_left {
	text-align:left;
}
.ta_right {
	text-align:right;
}
#top #topic-path li,
#pile_foundation_index #topic-path li {
	font-size: 24px !important;
	margin-right:5px;
}
#top #topic-path li a,
#pile_foundation_index #topic-path li a {
	font-size: inherit !important;
}
#mv_box {
	text-align:center;
}
#mv_box h1 {
	margin:150px 0 0 50px;
	width:100%;
}
#mv_box_inner {
  height: 216px;
	margin:0 auto;
 	font-size: 30px !important;
	text-align:left;
    width: 700px;

}
.video{
  width: 700px;
  height: 393px;
  position: absolute;
  top: 165px;
  left: 0;
  overflow: hidden;
  z-index: -1;
}

.video::after{
  content: '';
  width: 700px;
  height: 393px;
  background-color: #6ea8c1;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .3;
}

.video video{
  width: 700px;
  min-height: 393px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

#main_box {
	text-align:center;
	margin-top:400px;
	border-top:1px solid #ccc;
}

#main_box_inner {
	width:94%;
	margin:50px auto;
 	font-size: 30px !important;
	text-align:left;
}
#h2_ttl {
	text-align:center;
}
#search_box {
	padding-left:10px;
	text-align:left;
	margin-top:50px;
}
#search_box #srchBox #srchInput {
	width:90% !important;
}
#search_box #srchBox #yjInsite {
	width:50px !important;
}
#search_box .h3_ttl {
	color: #005E76;
	font-size: 30px !important;
	font-weight:bold;
}
#search_box  li {
	float:left;
	width:48%;
}
#search_box  li:first-child {
	margin-right:2%;
}
#search_box .select a {
	margin-top:-20px;
	display: block;
	padding:25px 20px;
	border:1px solid #fff;
	font-size: 24px !important;
	font-weight: normal !important;
	color:#fff;
	background-color: #0087a5 !important;
	text-align:center;
	background: url(/products/construction/img/top/icon_arrow_white.png) 95% 50% no-repeat;
	background-size: 14px 20px;
	padding-right: 15px;
}

/* フィルタリング  */
[value="All"]:checked ~ .filters [for="All"],
[value="douro"]:checked ~ .filters [for="douro"],
[value="kasen"]:checked ~ .filters [for="kasen"], 
[value="kiso"]:checked ~ .filters [for="kiso"], 
[value="chiyama"]:checked ~ .filters [for="chiyama"], 
[value="kyoryo"]:checked ~ .filters [for="kyoryo"] {
  background: #005b98;
  color: #fff;

}
[value="All"]:checked ~ .targets [data-category] {
  display: block;
}
[value="douro"]:checked ~ .targets .target:not([data-category~="douro"]), 
[value="kasen"]:checked ~ .targets .target:not([data-category~="kasen"]), 
[value="kiso"]:checked ~ .targets .target:not([data-category~="kiso"]),
[value="chiyama"]:checked ~ .targets .target:not([data-category~="chiyama"]), 
[value="kyoryo"]:checked ~ .targets .target:not([data-category~="kyoryo"]) {
  display: none;
}
input[type="radio"] {
  position: absolute;
  left: -9999px;
}
.filters {
  text-align: center;
  margin-bottom: 2rem;
}
.filters * {
  display: inline-block;
}
.filters label {
  text-align: center;
  padding: 10px 0;
  margin-left:3px;
  width: 212px !important;
  line-height: normal;
  cursor: pointer;
  transition: all 0.2s;
  color: #005b98;
  border:2px solid #005b98;
  font-size:24px !important;
  font-weight:normal !important;
}
.filters label.start {
  margin-left:5px !important;
}
.filters label:hover {
  background: #005b98;
  color: #fff;
}
#product_box {
	margin-top:30px;
}


.product_title {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	margin-top: -5px;
}



.product_category{
	display: flex;
	justify-content: flex-end;
}

.product_name-min{
	font-size: 1.3rem;
}

.product_category-doboku {
	background-color: #0082c3;
	color: #fff !important;
	font-weight: 700;
	padding: 5px 10px;
	margin-left: 5px;
}

.product_category-kenchiku{
	background-color: #5391c7;
	color: #fff !important;
	font-weight: 700;
	padding: 5px 10px;
	margin-left: 5px;
}

.product_category-none{
	padding-bottom: 5px;
}


#product_box .anchor_box {
  background: #96c6e6;
  padding:20px 30px 10px 30px;
  margin-bottom:30px;
}
#product_box .anchor_box ul li {
	float:left;
	margin:0 35px 10px 0;
}
#product_box .anchor_box ul li a {
  color: #005b98;
   font-size:24px !important;
}
#product_box h3 {
  background: #005b98;
  color: #fff;
  padding:15px 20px 20px 20px;
  font-size: 28px !important;
	position: relative;
}
#product_box h3 .pdf_doboku {
	position: absolute;
	top:10px;
	right:270px;
}
#product_box h3 .pdf_kenchiku {
	position: absolute;
	top:10px;
	right:20px;
}
#product_box h3 a {
	display: block;
	padding:10px 15px;
	border:1px solid #fff;
  font-size: 20px !important;
  font-weight: normal !important;
  color:#fff;
}
#product_box h3 .pdf_doboku a {
  background: #0082c3;
  text-decoration:none;
}
#product_box h3 .pdf_kenchiku a {
  background: #5391c7;
  text-decoration:none;
}
#product_box h4 {
  padding-left: 0 !important;
  color: #00559d !important;
  font-size: 24px !important;
  height: 40px !important;
  background: none !important;
  text-align:center;
}

#product_box ol.targets {
	display: grid;
	grid-template-columns: repeat(2, 2fr);
	grid-template-rows: 1fr;
	gap: 16px 30px;
}
#product_box ol.targets .list_accordion_button {
	position: relative;
	padding: 0;
	border: none;
	outline: none;
	margin: 5px 0 10px 0;
	font: inherit;
	color: inherit;
	background: none
}
#product_box ol.targets .accordion_img_toggle {
	position: absolute;
	bottom: 3px;
	right: 3px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px !important;
    height: 40px !important;
	padding: 5px;
    background: #fff;
}
#product_box ol.targets .accordion_img_toggle::before,#product_box ol.targets .accordion_img_toggle::after  {
    content: '';
    display: inline-block;
    position: absolute;
    width: 2px;
    height: 18px;
    background-color: #005b98;
	opacity: 1;
	transition: all 0.3s;
	transform: rotate(90deg);
}
/* #product_box ol.targets .accordion_img_toggle::after {
    transform: rotate(90deg);
} */
#product_box ol.targets .accordion_img_toggle.is-active::before {
    transform: rotate(0);
}
/* #product_box ol.targets .accordion_img_toggle.is-active::after {
    opacity: 0;
} */

#product_box ol.targets li {
	width:310px;
	height: auto !important;
}
/* 
#product_box ol.targets li {
	width:310px;
	float:left;
	margin:0 8px 30px 8px;
} */
#product_box ol.targets ul {
    display: block;
}
#product_box ol.targets ul.is-active {
    display: none;
}
#product_box ol.targets li {
	list-style-type: none !important;
}
#product_box ol.targets li img {
	width:310px !important;
}
#product_box ol.targets li span {
 	font-size: 24px !important;
 	line-height: 36px !important;
	display:block;
	width:310px !important;
 	background: url(/products/construction/img/top/icon_arrow.png) right 50% no-repeat; 
 	background-size:15px 20px;
 	padding-right:15px;
}
/* ==========================
  バナーエリア
========================== */
#bnr_box {
	text-align: center;
	margin-top: 50px;
	padding: 30px 0 20px 0;
	background-color: #005b98;
}

#bnr_box_inner {
	width: 100%;
	margin: 0 auto;
	text-align: left;
}

.block-contents-footer {
	margin: 0 !important;
	display: none !important;
}

#bnr_box ul li {
	width: 50%;
	float: left;
	padding:10px;
}
#bnr_box ul li img {
	width: 100% !important;
	height: 80px !important;
}
#bnr_box ul li:first-child {
	margin-right: 0 !important;
}

#bnr_box a.scare_bnr {
	text-align: center;
	color: #fff;
	font-weight: 700;
	display: inline-block;
	width: 114px;
	height: 112px;
	padding-top: 30px;
	background-color: #2b7496;
	border: 4px solid #dddddd;
	margin-right: 15px;
}

#bnr_box a.scare_bnr:hover {
	opacity: 0.8;
}


#topics_box {
	width:94%;
 	transform: translate(-50%,-50%);
	position: absolute;
	left:350px;
	top:770px;
}
#topics_box img {
	width:35%;
	float:left;
	margin-top:10px;
}

.dlbtn_box-bnr{
	width:100% !important;
	height: auto;
	margin: 0 !important;
	float: none !important;
}

#topics_box .topics_ttl {
	font-weight:bold;
 	font-size: 30px !important;
	color: #00559d !important;
}
#topics_box .topics_ttl.border {
	border-top:1px solid #999;
	padding-top:10px;
}
#topics_box .topics_txt {
	width:60%;
	float:right;
 }

 #topics_box .js-topics-wrap {
	height: 400px;
	width: 100%;
 }

 #topics_box .topics_txt .topics_txt_inner{
	margin-bottom: 20px;
 }

 #topics_box .topics_txt .topics_txt_inner p {
	line-height: 30px !important;
	font-size: 24px !important;
}

#topics_box a.btn_topics {
	width:350px;
	border:1px solid #fff;
	color:#fff;
	padding:10px 20px 12px 20px;
 	font-size: 20px !important;
	background-color: #0087a5;
	text-align:center;
	display:inline-block;
	margin: 0 0 0;
}
#topics_box a.btn_topics:hover {
	opacity:0.8;
}

#dlbtn_box{
	width: 50%;
	z-index: 9999;
	position: absolute;
	left: 330px;
	top: -235px;
}
#dlbtn_box .select a {
	display: block;
	padding: 15px 20px 15px 20px;
	border: 1px solid #fff;
	font-size: 20px !important;
	font-weight: normal !important;
	color: #fff;
	background-color: #3562ae !important;
	text-align: center;
	background: url(/products/building/img/top/icon_dl.png) 97% 50% no-repeat;
	background-size:20px 26px;
	padding-right: 15px;
}
#scrum_box {
	width: 240px;
	z-index: 9999;
	position: absolute;
	left: 15px;
	top: 455px;
}
#scrum_box img {
	width: 240px;
}

/* 基本のセレクトボックスのカスタマイズ */
.select {
  border-radius: 5px;
  position: relative;
  z-index: 1;
}

.select::after {
  position: absolute;
  content: '';
  width: 45px;
  height: 40px;
  right: -15px;
  top: -17px;
  /*transform: translateY(-50%) rotate(45deg);
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;*/
  z-index: 10;
}


#top #page2 {
	margin-top:30px;
	background:none !important;
}
#cv_btn_pc {
	display:none;
}

/* フィルタリング  */
.filters,
.filters_02 {
	text-align: center;
}
.filters.lower,
.filters.lower_02 {
	margin-bottom: 3rem !important;
}

.filters li,
.filters_02 li {
	float:left;
	margin-left: 5px;
	list-style-type:none;
}
.filters li.midashi,
.filters_02 li.midashi {
	margin-left: 0px !important;
	width: 68px !important;
	border: none;
	color: #005b98;
	font-weight: bold !important;
	padding-top:7px;
}
.filters li.start,
.filters_02 li.start {
	margin-left: 0px !important;
	width: 122px !important;
}
.filters label,
.filters_02 label {
	text-align: center;
	line-height: normal;
	cursor: pointer;
	transition: all 0.2s;
	/* padding: 7px 0; */
	color: #005b98;
	border: 2px solid #005b98;
	font-size: 20px !important;
	font-weight: normal !important;
	width: 190px;
}
.filters label,
.filters_02 label a {
	display: block;
	padding: 7px 0;
	color: inherit;
}
.filters label:hover,
.filters_02 label:hover,
:checked + label{
	background: #005b98 !important;
	color: #fff !important;
}
.filters_02 li:nth-child(5) {
	margin-left:67px;
}
.filters_02 li:nth-child(n+5) {
	margin-top:5px;
}
.targets ul li a {
	text-align: center;
	padding: 15px 0;
	color: #005b98;
	border: 2px solid #005b98;
	font-size: 20px !important;
	font-weight: normal !important;
	width: 100%;
	margin:0 0 5px 0 !important;
	display:block;
}
.targets ul li {
	margin:0 !important;
}
.targets ul li a:hover {
	background: #005b98;
	color: #fff !important;
}

/*MAP位置調整*/
#img_map {
	width:640px;
}
#page2 ul#balloon li.tunnel {
	top: 95px;
	left: 28px;
}
#page2 ul#balloon li.deterrence {
	top: 50px;
	left: 70px;
}
#page2 ul#balloon li.afforestation {
	top: 30px;
	left: 160px;
}
#page2 ul#balloon li.bridge {
	top: 112px;
	left: 375px;
}
#page2 ul#balloon li.improvement {
	top: 124px;
	left: 171px;
}
#page2 ul#balloon li.seawall {
	top: 175px;
	left: 542px;
}
#page2 ul#balloon li.seawall02 {
	top: 198px;
	left: 465px;	
}
#page2 ul#balloon li.pile_foundation_k {
	top: 207px;
	left: 160px;
}
#page2 ul#balloon li.sheet_pilec_sea {
	top: 263px;
	left: 472px;
}
#page2 ul#balloon li.fence {
	top: 265px;
	left: 370px;
}
#page2 ul#balloon li.fence_02 {
	top: 158px;
	left: 113px;
}
#page2 ul#balloon li.pile_joints {
	top: 295px;
	left: 293px;
}
#page2 ul#balloon li.s_pile_foundation {
	top: 183px;
	left: 282px;
}
#page2 ul#balloon li.pile_foundation {
	top: 328px;
	left: 298px;
}
#page2 ul#balloon li.pile_foundation_02 {
	top: 230px;
	left: 175px;
}
#page2 ul#balloon li.provisional_bridge {
	top: 308px;
	left: 145px;
}
#page2 ul#balloon li.ohter {
	top: 87px;
	left: 490px;
}
#page2 ul#balloon li.sheet_pilec_river {
	top: 285px;
	left: 180px;
}
#page2 ul#balloon li.temporary {
	top: 290px;
	left: 415px;
}
#page2 ul#balloon li.temporary_02 {
	top: 295px;
	left: 485px;
}

/* JFEスチールの工法 */
.construction-method {
	margin-top: 30px;
}
.construction-method__h2 {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 30px;
	padding: 20px;
	color: #fff;
    font-size: 32px !important;
	font-weight: 700;
	background-color: #4e9bd3;
}
.construction-method__item:not(:last-of-type) {
	margin-bottom: 30px;
}
.construction-method__item-link {
	display: block;
	padding: 10px;
	border: 2px solid #ccc;
	color: #000;
}
.construction-method__item-link figure {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
}
.construction-method__item-link figure::before {
	content: "";
	margin-right: 20px;
	margin-left: 15px;
	border-style:solid;
	border-width: 15px 0 15px 15px;
	border-color: transparent transparent transparent #000;
}
.construction-method__item-link figcaption {
	position: relative;
	margin-right: 30px;
	font-size: 24px !important;
	font-weight: 700;
	line-height: 1.5;
}
.construction-method__item-link img {
	width: 300px;
	height: auto;
	margin: 0 0 0 auto;
}