@charset "utf-8";

/* grand top
============================================================================================================================================================================================================================================== */
#siteID small{vertical-align:middle; padding:20px 0 0 20px; display:inline-block;}
#siteID img{vertical-align:middle;}
/* hero slider */
#heroSlider .slide{height:750px; background-repeat:no-repeat; background-position:center; background-size:cover; overflow:hidden;}
#heroSlider .slide.s01{background-image:url(../images/top/mv01.jpg);}
#heroSlider .slide.s02{background-image:url(../images/top/mv02.jpg);}
#heroSlider .slide.s03{background-image:url(../images/top/mv03.jpg);}
#heroSlider .slide.s04{background-image:url(../images/top/mv04.jpg);}
.heroHeader{position:relative; height:750px;}
.headCopy{position:absolute; left:0; top:0; width:100%; height:100%; text-align:center; color:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center; align-content:center;}
.headCopy h1{font-size:60px; font-family: 'Noto Serif JP', serif; font-weight:600; margin-bottom:40px; text-shadow:0 0 5px rgba(0,0,0,.5); line-height:1.25;}
.headCopy p{line-height:1.5;}
/* section */
#topPage section{width:1168px; margin:0 auto 50px; padding:100px 0 0 0;}
#topPage section h1{font-size:40px; margin-bottom:50px; font-weight:700;}
#topPage section h1 small{font-size:16px; color:#143c8c; font-family: 'PT Sans Narrow', sans-serif; display:block;}
/*  business introduction */
#topPage .bizIntro{display:flex; flex-wrap:wrap;}
#topPage .bizIntro .menu{width:33.33%; /* height:392px; */}
#topPage .bizIntro .menu a{background-position:center;background-size:100%;background-repeat:no-repeat;width:100%;height:100%;color:#fff;text-decoration:none;display:block;padding: 403px 48px 60px;transition:all .2s ease-out;position:relative;}
#topPage .bizIntro .menu a::before{width:100px;height:100px;text-align:center;line-height:100px;display:block;position:absolute;content:'';top: 270px;left: 60px;margin-left: 0;font-size:100px;}
#topPage .bizIntro .menu.steel a{background-image: url(../images/top/bizImgSteel2.jpg);}
#topPage .bizIntro .menu.space a{background-image:url(../images/top/bizImgSpace.jpg);}
#topPage .bizIntro .menu.absorb a{background-image: url(../images/top/bizImgAbsorb2.jpg);}
#topPage .bizIntro .menu.bridge a{background-image: url('/steelstructures/wp/wp-content/uploads/2024/10/bizImgBridge2.jpg');}
#topPage .bizIntro .menu.steel a::before{content:'\e914';}
#topPage .bizIntro .menu.space a::before{content:'\e913';}
#topPage .bizIntro .menu.absorb a::before{content:'\e900';}
#topPage .bizIntro .menu.bridge a::before{content:'\e906';}
#topPage .bizIntro .menu a:hover{background-size:105%; opacity:.7;}
#topPage .bizIntro .menu h2{font-size:40px; font-weight:900; margin-bottom:10px;}
#topPage .bizIntro .menu p{font-weight:700;}
/* products */
#topPage .products{position:relative;}
#topPage .products::before{content:''; width:50%; display:block; height:94%; position:absolute; right:0; top:0; background:url(../images/common/bgDiag.png); z-index:0;}
#topPage .products section{margin-bottom:100px;}
#topPage .productIntro{position:relative; z-index:1;}
#topPage .productIntro ul{display:flex; flex-wrap:wrap; justify-content:space-between; margin-bottom:18px;}
#topPage .productIntro ul li{width:368px; height:368px; margin-bottom:32px;}
#topPage .productIntro ul li a{display:block; width:100%; height:100%; box-shadow:5px 5px 25px rgba(0,0,0,.4); padding:0 40px; font-size:28px; font-weight:700; color:#fff; text-decoration:none; line-height:1.4; transition:all .2s ease-out; position:relative; left:0; top:0;}
#topPage .productIntro ul li a small{display:inline-block; border:1px #fff solid; border-radius:12px; height:24px; font-size:11px; line-height:22px; width:auto; padding:0 20px 1px; font-weight:400;}
#topPage .productIntro ul li a:hover{box-shadow:none; opacity:.7; left:5px; top:5px;}
#topPage .productIntro ul li a span{position:absolute; left:40px; bottom:40px; display:block;}
#topPage .productIntro .showList{width:695px; height:144px; margin:0 auto;}
#topPage .productIntro .showList a{background:#000; display:flex; height:100%; box-shadow:5px 5px 25px rgba(0,0,0,.4); font-size:28px; color:#fff; text-decoration:none; align-items:center; padding:0 40px; position:relative; left:0; top:0; transition:all .2s ease-out; text-align:center; justify-content:center;}
#topPage .productIntro .showList a::before{content:'\e917'; padding-right:10px; font-size:24px; vertical-align:middle; position:relative; top:2px;}
#topPage .productIntro .showList a:hover{box-shadow:none; opacity:.7; left:5px; top:5px;}
.productModalBase{background:rgba(7,22,51,.95); width:100%; height:100%; position:fixed; left:0; top:0; z-index:10000; display:none;}
.productModalStage{width:100%; height:100%; position:fixed; left:0; top:0; z-index:10001; display:flex; align-items:center; display:none; transition:all .3s ease-out; opacity:0;}
.productModalStage nav{width:1168px; margin:0 auto; color:#fff;}
.productModalStage nav h1{font-size:50px; font-weight:900; color:#fff; width:1168px; margin:0 auto; margin-bottom:70px;}
.productModalStage nav h1 small{font-size:16px; color:#777; font-family: 'PT Sans Narrow', sans-serif; display:block;}
.productModalStage nav div{display:flex; justify-content:space-between; margin-bottom:30px;} 
.productModalStage nav div dl{width:268px;}
.productModalStage nav div dt{padding-top:140px; background-position:center top; background-repeat:no-repeat; font-size:16px; font-weight:700; margin-bottom:10px;}
.productModalStage nav div dt.specialSteel{background-image:url(../images/common/navSteel.jpg);}
.productModalStage nav div dt.spaceStructure{background-image:url(../images/common/navSpace.jpg);}
.productModalStage nav div dt.absorber{background-image:url(../images/common/navAbsorb.jpg);}
.productModalStage nav div dt.bridgeMaterials{background-image:url(../images/common/navBridge.jpg);}
.productModalStage nav div dt a::before{content:'\e903'; padding-right:5px; vertical-align:middle; position:relative; top:-2px;}
.productModalStage nav div dd{font-weight:400; margin-bottom:10px; font-size:13px;}
.productModalStage nav div a{transition:opacity .3s ease-out; color:#fff; text-decoration:none;}
.productModalStage nav div a:hover{opacity:.7;}
.productModalStage a.modalClose{border:1px #fff solid; width:280px; line-height:60px; font-weight:700; margin:0 auto; display:block; text-align:center; color:#fff; text-decoration:none;}
.productModalStage a.modalClose:hover{background:rgba(255,255,255,.3);}
/* search */
#topPage .search{position:relative; overflow-x:hidden;}
#topPage .search::before{height:400px; width:100%; position:absolute; right:0; top:0; background:url(../images/top/prdBgSearch.jpg) no-repeat right center #143c8c; content:''; background-size:50% auto; z-index:0; min-width:1500px;}
#topPage .search section{position:relative; z-index:1;}
#topPage .search section h1,
#topPage .search section h1 small{color:#fff;}
#topPage .search .form{background:#f2f2f2; padding:80px 180px 60px; box-shadow:5px 5px 25px rgba(0,0,0,.4); margin-bottom:80px;}
#topPage .search .form div{position:relative; height:60px; margin-bottom:10px;}
#topPage .search .form input[type=text]{background:#fff; border:1px #ddd solid; border-radius:4px; height:60px; display:block; width:100%; padding:10px;}
#topPage .search .form button{position:absolute; right:0; top:0; border:none; background:none; width:60px; height:60px; display:block; text-indent:-9999px;}
#topPage .search .form button::before{content:'\e912'; position:absolute; left:0; top:0; text-indent:0; font-size:20px; width:60px; height:60px; text-align:center; line-height:60px; transition:color .3s ease;}
#topPage .search .form button:hover{color:#ccc;}
#topPage .search dt,
#topPage .search dd{display:inline-block; padding-right:10px;}
#topPage .search dd.indexLink{display:none;}
#topPage .search dt{color:#999;}
#topPage .search dd a{text-decoration:underline; padding-right:10px;}
#topPage .search dd a:hover{text-decoration:none;}
#topPage .search .list{display:flex; justify-content:space-between;}
#topPage .search .type{width:568px; border:1px #ddd solid; padding:40px 30px 30px;}
#topPage .search .type h2{font-size:20px; font-weight:700; position:relative; border-bottom:2px #ddd solid; padding-bottom:15px; margin-bottom:25px;}
#topPage .search .type h2::after{content:''; display:block; width:80px; height:2px; background:#143c8c; position:absolute; left:0; bottom:-2px;}
#topPage .search .type h2 b{font-size:28px;}
#topPage .search .type ul{display:flex; margin-bottom:15px; flex-wrap:wrap;}
#topPage .search .type ul li{list-style:none; width:50%; margin-bottom:10px;}
#topPage .search .type ul li a{text-decoration:none;}
#topPage .search .type ul li a::before{content:'\e904'; color:#999; font-size:10px; padding-right:5px; position:relative; top:-2px;}
#topPage .search .type ul li a:hover{text-decoration:underline;}
#topPage .search .type ul + a{padding:14px; width:254px; display:block; line-height:1; font-size:13px; float:right;}
/* topics */
#topPage .topics{background:#f2f2f2;}
#topPage .topics section{display:flex; flex-wrap:wrap; margin-bottom:0;}
#topPage .topics section h1{width:300px;}
#topPage .topics section p{width:100%; margin-bottom:50px; text-align:right;}
#topPage .topics section p a{padding:20px; width:254px; display:inline-block; line-height:1; font-size:16px;}
#topPage .topics section dl.newsList{padding:20px 15px 0;}
/* conversion */
#topPage div.conversion{position:relative;}
#topPage div.conversion::before{position:absolute; left:0; top:0; width:100%; height:400px; background:url(../images/top/conversionBg.jpg) no-repeat center; background-size:cover; content:''; display:block; z-index:0;}
#topPage div.conversion section{position:relative; z-index:1; width:1168px; margin:0 auto; padding:240px 0 40px;}
#topPage div.conversion ul.btn{display:flex; justify-content:center; margin-bottom:80px; flex-wrap:wrap}
#topPage div.conversion ul.btn li{width:268px; margin:0 32px 0 0; list-style:none;}
#topPage div.conversion ul.btn li:nth-child(3n){margin-right:0;}
#topPage div.conversion ul.btn li a{display:block; padding:12px;}



/* smartphone ========================================== */
@media screen and (max-width:767px){
#siteID small{display:block; background:/*#ededed*/ #fff; padding:14px; position:fixed; width:100vw; top:65px; left:0; font-size:11px;}
/* hero slider */
#heroSlider .slide{height:calc(100vh - 68px);}
.heroHeader{height:calc(100vh - 68px);}
.headCopy{padding:15px;}
.headCopy h1{font-size:8.5vw;}
.headCopy p{font-size:13px;}
/* article offset */
#topPage{margin-top:-15px;}
/* section */
#topPage section{width:auto; margin:0; padding:35px 0 0 0;}
#topPage section h1{font-size:30px; margin-bottom:35px; padding:0 15px;}
#topPage section h1 small{font-size:11px;}
/*  business introduction */
#topPage .bizIntro{display:block;}
#topPage .bizIntro .menu{width:100%; height:250px;}
#topPage .bizIntro .menu a{background-size:cover; padding:130px 20px 20px;}
#topPage .bizIntro .menu a::before{width:70px; height:70px; line-height:70px; top:35px; left:50%; margin-left:-40px; font-size:70px;}
#topPage .bizIntro .menu h2{font-size:25px; margin-bottom:10px;}

/* products */
#topPage .products::before{content:'none'; display:none;}
#topPage .products section{margin-bottom:0; padding:35px 15px 40px;}
#topPage .products section h1{padding:0;}
#topPage .productIntro{position:relative; z-index:1;}
#topPage .productIntro ul{margin-bottom:30px;}
#topPage .productIntro ul li{width:calc(50% - 11.25px); height:calc(50vw - 22.5px); margin-bottom:15px;}
#topPage .productIntro ul li a{box-shadow:3px 3px 10px rgba(0,0,0,.4); padding:15px; font-size:15px; background-size:cover;}
#topPage .productIntro ul li a small{border-radius:10px; height:20px; font-size:10px; line-height:18px; padding:0 10px 1px;}
#topPage .productIntro ul li a span{position:absolute; left:15px; bottom:15px;}
#topPage .productIntro .showList{width:100%; height:72px;}
#topPage .productIntro .showList a{background-size:cover; box-shadow:3px 3px 10px rgba(0,0,0,.4); font-size:15px; padding:0 15px;}
#topPage .productIntro .showList a::before{padding-right:5px; font-size:14px; top:0;}
.productModalBase{}
.productModalStage{padding:40px 15px; overflow:auto;}
.productModalStage nav{width:100%;}
.productModalStage nav h1{font-size:30px; margin-bottom:30px; width:auto;}
.productModalStage nav h1 small{font-size:12px;}
.productModalStage nav div{display:block;} 
.productModalStage nav div dl{width:auto; border-top:1px #fff solid; margin-bottom:30px; display:flex; flex-wrap:wrap; justify-content:space-between;}
.productModalStage nav div dt{padding-top:20px; background:none !important; font-size:20px; margin-bottom:0; padding-bottom:20px; width:100%;}
.productModalStage nav div dt a::before{font-size:14px;}
.productModalStage nav div dd{font-weight:400; margin-bottom:0; width:calc(50% - 8px); padding:11px 0 11px 8px; position:relative; border-bottom:1px #fff solid; font-size:12px; display:flex; align-items:center;} 
.productModalStage nav div dd:nth-of-type(1),
.productModalStage nav div dd:nth-of-type(2){border-top:1px #fff solid;}
.productModalStage nav div dd a{padding-left:12px; position:relative; display:block;}
.productModalStage nav div dd a::before{content:'\e904'; font-size:8px; position:absolute; left:-4px; top:50%; margin-top:-5px;}
.productModalStage a.modalClose{width:auto; line-height:50px;}
/* search */
#topPage .search::before{height:200px; right:auto; left:0; top:0; background:url(../images/top/prdBgSearch.jpg) no-repeat 75.5vw center #143c8c; background-size:auto 200px; min-width:0;}
#topPage .search .form{padding:35px 15px 15px; box-shadow:3px 3px 10px rgba(0,0,0,.4); margin:0 15px 40px;}
#topPage .search .form div{position:relative; height:40px; margin-bottom:5px;}
#topPage .search .form input[type=text]{height:40px; padding:6px; font-size:16px;}
#topPage .search .form button{width:40px; height:40px;}
#topPage .search .form button::before{font-size:18px; width:40px; height:40px; line-height:40px;}
#topPage .search dt,
#topPage .search dd{font-size:10px; padding-right:0;}
#topPage .search dd.indexLink{display:none;}
#topPage .search dd a{padding-right:3px;}
#topPage .search .list{display:block; padding:0 15px;}
#topPage .search .type{width:auto; padding:20px 15px 15px; margin-bottom:15px;}
#topPage .search .type h2{font-size:14px; padding-bottom:10px; margin-bottom:15px;}
#topPage .search .type h2::after{width:60px;}
#topPage .search .type h2 b{font-size:20px;}
#topPage .search .type ul{display:flex; margin-bottom:10px; flex-wrap:wrap;}
#topPage .search .type ul li a::before{font-size:8px; top:-1px;}
#topPage .search .type ul li a:hover{text-decoration:underline;}
#topPage .search .type ul + a{padding:10px; width:100%; font-size:12px; float:none; clear:both;}

/* topics */
#topPage .topics{margin-bottom:30px;}
#topPage .topics section{display:block;}
#topPage .topics section h1{width:auto;}
#topPage .topics section p{width:100%; margin-bottom:0; text-align:center; padding:0 15px 15px;}
#topPage .topics section p a{padding:15px; width:100%; display:block; font-size:14px;}

/* conversion */
#topPage div.conversion::before{height:350px;}
#topPage div.conversion section{padding:80px 15px 0px; width:auto;}
#topPage div.conversion section ul.conversion{margin-bottom:40px; flex-wrap:wrap; width:auto; display:flex;}
#topPage div.conversion section ul.conversion li{width:calc(50% - 12px); height:calc(50vw - 23px); margin-bottom:15px; margin-right:15px;}
#topPage div.conversion section ul.conversion li:nth-child(3n){margin-right:15px;}
#topPage div.conversion section ul.conversion li:nth-child(2n){margin-right:0;}
#topPage div.conversion section ul.conversion li a{height:100%; font-size:3.86vw; box-shadow:3px 3px 10px rgba(0,0,0,.4); padding:10px;}
#topPage div.conversion section ul.conversion li small{font-size:8px; bottom:10px;}
#topPage div.conversion section ul.conversion li a:hover{box-shadow:none; left:5px; top:5px;}
#topPage div.conversion section ul.conversion li a span::before{height:auto; font-size:12vw; line-height:1; margin-bottom:5px;}
#topPage div.conversion section ul.btn{display:block; margin-bottom:40px;}
#topPage div.conversion section ul.btn li{width:100%; margin:0 0 10px;}
#topPage div.conversion section ul.btn li a{display:block; padding:10px; font-size:12px;}
aside.banners h1{font-size:24px; margin-bottom:30px; text-align:left;}
aside.banners{padding:30px 20px;}
aside.banners ul{display:block; width:auto;}
aside.banners li{margin-bottom:10px;}
}

/* topics
============================================================================================================================================================================================================================================== */
.newsListHeader{padding:0 0 50px;}
.newsEntryHeader{margin-bottom:30px;}
.entryMeta{}
.entryMeta li{display:inline-block; list-style:none; color:#777;}
.entryMeta li.category{font-size:14px; ine-height:1; padding:0px 20px; border:1px #cccaca solid; border-radius:12px; vertical-align:middle; margin-left:15px; position:relative; top:-2px;}
.entryMeta li.author{float:right; text-align:right;}
#pageBody article.newsEntry figure{text-align:center;}
#pageBody article.newsEntry footer.contact{border:3px #ddd solid; padding:20px; margin:40px 0;}
#pageBody article.newsEntry footer.contact p:last-child{margin-bottom:0;}
#pageBody article.newsEntry .return{text-align:center;}
#pageBody article.newsEntry .return a{padding:10px 50px;}
#pageBody article.newsEntry .return a::before{content:'\e902'; font-size:12px; margin-right:5px;}
@media screen and (max-width:767px){
	.newsListHeader{padding:0 0 30px;}
	.newsEntryHeader{margin-bottom:15px;}
	.entryMeta li.author{float:none; text-align:left; margin-top:5px;}
	#pageBody article.newsEntry footer.contact{border:2px #ddd solid; padding:10px; margin:30px 0;}
}


/* glossary
============================================================================================================================================================================================================================================== */
ul.glossaryAnchor{margin-bottom:50px; display:flex; justify-content:flex-start;}
ul.glossaryAnchor li{margin-right:8px; list-style:none;}
ul.glossaryAnchor li a{padding:8px 16px; display:block; border:1px #143c8c solid; font-size:14px; text-align:center; transition:background .3s ease;}
ul.glossaryAnchor li a.disabled{color:#999; border-color:#999; pointer-events:none;}
ul.glossaryAnchor li a:hover{background:#143c8c; color:#fff;}
article.glossary dl{}
article.glossary dl dt{font-size:20px; color:#143c8c; font-weight:700; margin-bottom:10px;}
article.glossary dl dd{padding:0 0 30px 0; border-bottom:2px #ddd solid; margin-bottom:30px;}
article.glossary dl dd div{background:#f2f2f2; padding:20px; margin-top:30px;}
#pageBody article.glossary dl dd div h3{font-size:14px; font-weight:700; line-height:1; border-left:4px #143c8c solid; padding:1px 0 2px 5px; margin-bottom:10px;}
article.glossary dl dd div ul{display:flex; justify-content:flex-start; flex-wrap:wrap;}
article.glossary dl dd div ul li{margin-right:30px; white-space:nowrap; font-size:13px; list-style:none;}
article.glossary dl dd div ul li a::before{content:'\e904  '; font-size:10px; color:#777;}
article.glossary dl dd div ul li a:hover{text-decoration:underline;}
article.glossary dl dd div ul + h3{margin-top:25px;}
@media screen and (max-width:767px){
ul.glossaryAnchor{margin-bottom:30px; justify-content:space-between; flex-wrap:wrap;}
ul.glossaryAnchor li{margin-right:0; width:calc(20% - 4px); margin-bottom:8px;}
ul.glossaryAnchor li a{padding:8px 0; font-size:12px;}
article.glossary dl dt{font-size:16px; margin-bottom:6px;}
article.glossary dl dd{padding:0 0 20px 0; border-bottom:1px #ddd solid; margin-bottom:20px;}
#pageBody article.glossary dl dd p{font-size:14px;}
article.glossary dl dd div{padding:15px; margin-top:20px;}
article.glossary dl dd div h3{font-size:12px; border-left:2px #143c8c solid; padding:0px 0 1px 5px; margin-bottom:7px;}
article.glossary dl dd div ul li{margin-right:15px; font-size:12px;}
article.glossary dl dd div ul li a::before{font-size:8px;}
article.glossary dl dd div ul + h3{margin-top:15px;}
}


/* faq
============================================================================================================================================================================================================================================== */
.faqIndex ul{display:flex; flex-wrap:wrap; justify-content:space-between;}
.faqIndex ul li{width:265px; height:265px; margin-bottom:32px; text-align:center; font-size:20px; font-weight:700;}
.faqIndex ul li a{display:flex; height:100%; background:#143c7c; color:#fff; position:relative; text-align:center; align-content:center; align-items:center; justify-content:center; transition:opacity .3s ease;}
.faqIndex ul li a span{display:block;}
.faqIndex ul li a span::before{width:100%; display:block; text-align:center; font-size:87.5px; color:#fff; margin-bottom:10px;}
.faqIndex ul li.steel a span::before{content:'\e914';}
.faqIndex ul li.space a span::before{content:'\e913';}
.faqIndex ul li.absorber a span::before{content:'\e900';}
.faqIndex ul li.bridge a span::before{content:'\e906';}
.faqIndex ul li a.disabled{background:#999; pointer-events:none;}
.faqIndex ul li a:hover{opacity:.7;}
article.faq dl{margin-top:-20px; border-bottom:1px #ddd solid;}
article.faq dl dt{font-size:20px; color:#143c8c; font-weight:700; padding:20px 0; border-top:1px #ddd solid; padding-right:80px; position:relative; cursor:pointer; transition:opacity .3s ease;}
article.faq dl dt:first-of-type{border-top:0;}
article.faq dl dt::after{content:'\e90f'; position:absolute; right:0; top:50%; margin-top:-8px; height:16px; width:80px; line-height:16px; text-align:center; font-size:16px;}
article.faq dl dt:hover{opacity:.7;}
article.faq dl dt.open::after{content:'\e90e';}
article.faq dl dd{padding:0 0 20px 0; margin-top:-10px; padding-right:80px; display:none;}

@media screen and (max-width:767px){
.faqIndex ul li{width:calc(50vw - 23px); height:calc(50vw - 30px); margin-bottom:15px; text-align:center; font-size:3.6vw;}
.faqIndex ul li a{}
.faqIndex ul li a span::before{font-size:14vw;}
article.faq dl{margin-top:-21px;}
article.faq dl dt{font-size:16px; padding:18px 40px 18px 0;}
article.faq dl dt:first-of-type{border-top:0;}
article.faq dl dt::after{margin-top:-5px; height:10px; width:40px; line-height:14px; font-size:14px;}
article.faq dl dd{font-size:14px; font-weight:400; padding-right:0;}
}

/* about
============================================================================================================================================================================================================================================== */
.presentation{margin-bottom:50px;}
.presentation img + img{display:none;}
.presentation h2{margin:0 !important; padding:0 !important; border:0 !important;}
.presentation h2::after{display:none; content:none;}
ul.bizIntro{display:flex; flex-wrap:wrap; justify-content:space-between; margin:30px auto 30px;}
ul.bizIntro li{width:418px; margin-bottom:34px; text-align:center; font-size:20px; font-weight:700; list-style:none;}
ul.bizIntro li a{border:1px #143c7c solid; color:#143c7c; height:270px; transition:opacity .3s ease; display:flex; align-items:center; align-content:center; justify-content:center;}
ul.bizIntro li a span{display:block;}
ul.bizIntro li a span::before{width:100%; display:block; text-align:center; font-size:94px; color:#143c7c;}
ul.bizIntro li.steel a span::before{content:'\e914';}
ul.bizIntro li.space a span::before{content:'\e913';}
ul.bizIntro li.absorber a span::before{content:'\e900';}
ul.bizIntro li.bridge a span::before{content:'\e906';}
ul.bizIntro li a:hover{opacity:.7;}
.officialBnr{height:150px; position:relative; text-align:center;}
.officialBnr a{display:flex; align-items:center; align-content:center; justify-content:center; height:150px; text-align:center; font-size:40px; font-family:'Noto Serif JP', serif; color:#fff; background:url(../images/about/bgOfficialSiteBanner.jpg) no-repeat center center; background-size:100%; font-weight:700;}
.officialBnr a small{font-size:13px; font-family:'Noto Sans JP', sans-serif; display:block;}
.aboutIntro{text-align:center; font-family:'Noto Serif JP', serif;}
#pageBody article .aboutIntro p{font-size:18px;}
#pageBody article .aboutIntro p.catch{font-size:30px;}

@media screen and (max-width:767px){
.presentation{margin-bottom:20px;}
.presentation img{display:none;}
.presentation img + img{display:block;}
ul.bizIntro{margin:20px auto 10px;}
ul.bizIntro li{width:calc(50vw - 22px); height:calc(50vw - 22px); margin-bottom:12px; font-size:3vw;}
ul.bizIntro li a{height:100%;}
ul.bizIntro li a span::before{font-size:12vw; margin-bottom:2vw;}
.officialBnr{height:0; width:100%; padding-top:43.731%; background:url(../images/about/bgOfficialSiteBannerSp.jpg) no-repeat center center; background-size:cover; font-weight:700;}
.officialBnr a{position:absolute; left:0; top:0; width:100%; height:100%; background:none; font-size:7.75vw;}
.officialBnr a small{font-size:12px; font-family:'Noto Sans JP', sans-serif; display:block;}
#pageBody article .aboutIntro{text-align:left;}
#pageBody article .aboutIntro p{font-size:16px;}
#pageBody article .aboutIntro p.catch{font-size:24px;}
}

/* member
============================================================================================================================================================================================================================================== */
.loginForm{background:#f2f2f2; padding:40px 40px 30px; margin:30px 0 10px 0;}
.loginForm dl{width:600px; margin:0 auto; display:flex; flex-wrap:wrap;}
.loginForm dt{width:180px; text-align:right; font-size:14px; line-height:40px; padding-right:30px;}
.loginForm dd{width:420px; margin-bottom:20px;}
.loginForm input{background:#fff; border:1px #ddd solid; border-radius:4px; height:40px; padding:5px; width:415px;}
.loginForm input[type=password]{width:266px;}
.loginForm .btnSpace{padding-left:275px; margin-bottom:10px; text-align:left;}
#pageBody article .loginForm p{padding-left:275px; font-size:12px;}
.loginForm p a::before{content:'\e904  '; font-size:10px; color:#777;}
.loginForm .btnSpace button{width:264px; height:60px;}
div.regist{display:flex; justify-content:space-between; margin:30px 0 50px; flex-wrap:wrap;}
div.regist dl{width:418px; border:2px #000 solid; padding:35px; text-align:center; margin-bottom:10px;}
div.regist dt{font-size:20px; font-weight:700; margin-bottom:15px;}
div.regist dt::before{content:'e'; font-size:60px; display:block; margin-bottom:15px;} 
div.regist dd a{display:block; padding:10px; background:#000; color:#fff; font-weight:700; transition:opacity .3s ease; margin:0 auto 10px; width:270px;}
div.regist dd a:hover{opacity:.7;}
#pageBody article div.regist p{flex-grow:2; width:100%; }
#pageBody article div.regist dd p{font-size:13px;}
#pageBody article div.regist dd p small{color:#000; display:block;}
div.regist .office{border-color:#0191d9; color:#0191d9;}
div.regist .office a{background:#0191d9;}
div.regist .office dt::before{content:'\e911';}
div.regist .fields{border-color:#143c8c; color:#143c8c;}
div.regist .fields a{background:#143c8c;}
div.regist .fields dt::before{content:'\e910';}
div.notice{background:#f2f2f2; padding:20px;}
#pageBody article div.notice h3{font-size:14px; font-weight:700; line-height:1; border-left:4px #143c8c solid; padding:1px 0 2px 5px; margin-bottom:10px;}
#pageBody article div.notice p{font-size:14px;}
#pageBody article div.notice ul{display:flex; margin-left:1.5em;}
#pageBody article div.notice ul li{width:270px; margin-right:25px; list-style:none; font-size:14px;}
#pageBody article div.notice ul li a{display:block; margin:10px 0 0;}
#pageBody article div.notice ul li a.btn{padding:7px; font-size:14px;}
#pageBody article div.notice ul li a.phone{padding:7px; font-size:14px; border:1px #000 solid; text-align:center; pointer-events:none; color:#000; font-weight:700;}

@media screen and (max-width:767px){
.loginForm{padding:20px; margin:20px 0 0 0;}
.loginForm dl{width:auto; display:block;}
.loginForm dt{width:auto; text-align:left; font-size:11px; line-height:1.5; padding:0 0 5px;}
.loginForm dd{width:auto; margin-bottom:15px;}
.loginForm input{width:100%; height:35px;}
.loginForm input[type=password]{width:100%;}
.loginForm .btnSpace{padding-left:0; margin:20px 0 10px;}
#pageBody article .loginForm p{padding-left:0; font-size:10px;}
.loginForm p a::before{font-size:8px;}
.loginForm .btnSpace button{width:100%; height:50px;}

div.regist{display:block; margin:30px 0 30px;}
div.regist dl{width:auto; border:1px #000 solid; padding:20px 15px; margin-bottom:15px;}
div.regist dt{font-size:16px; font-weight:700; margin-bottom:15px;}
div.regist dt::before{content:'e'; font-size:60px; display:block; margin-bottom:15px;} 
div.regist dd a{display:block; padding:10px; background:#000; color:#fff; font-weight:700; transition:opacity .3s ease;}
div.regist dd a:hover{opacity:.7;}
#pageBody article div.regist dd p{font-size:12px;}
div.regist .office{border-color:#0191d9; color:#0191d9;}
div.regist .office a{background:#0191d9;}
div.regist .office dt::before{content:'\e911';}
div.regist .fields{border-color:#143c8c; color:#143c8c;}
div.regist .fields a{background:#143c8c;}
div.regist .fields dt::before{content:'\e910';}
#pageBody article div.notice h3{font-size:12px;}
#pageBody article div.notice p{font-size:11px;}
#pageBody article div.notice ul{display:block; margin-left:0;}
#pageBody article div.notice ul li{width:auto; margin-right:0; font-size:12px; margin-top:15px;}
#pageBody article div.notice ul li a{display:block; margin:10px 0 0;}
#pageBody article div.notice ul li a.btn{font-size:12px;}
#pageBody article div.notice ul li a.phone{font-size:12px; background:#000; color:#fff; font-weight:700; pointer-events:auto;}
}


/* search by
============================================================================================================================================================================================================================================== */
.searchBy section ul{display:flex; flex-wrap:wrap;}
.searchBy section ul li{width:33.333%; margin-bottom:.75em; list-style:none;}
.searchBy section ul li a{padding-left:15px; position:relative;}
.searchBy section ul li a::before{content:'\e904'; width:10px; height:10px; line-height:10px; position:absolute; left:0; top:.75em; display:block; font-size:10px; color:#777;}
.searchBy section ul li a:hover{text-decoration:underline;}

@media screen and (max-width:767px){
.searchBy section ul li{width:50%; margin-bottom:.75em; padding-right:15px;}
.searchBy section ul li a{padding-left:15px; position:relative; display:block;}
.searchBy section ul li a::before{width:8px; height:8px; line-height:8px; top:.75em; font-size:8px;}
.searchBy section ul li a:hover{text-decoration:underline;}
}


/* download
============================================================================================================================================================================================================================================== */
ul.download{display:flex; flex-wrap:wrap; justify-content:flex-start;}
ul.download li{width:270px; list-style:none; margin:0 29px 29px 0;}
ul.download li:nth-child(3n){margin-right:0;}
ul.download li .img{border:1px #ddd solid; display:flex; justify-content:center; align-content:center; align-items:center; width:270px; height:270px; margin-bottom:10px; transition:background .3s ease; position:relative;}
ul.download li .img img{max-width:100%; max-height:100%; width:auto; height:auto;}
ul.download li div{font-size:12px; font-weight:700;}
ul.download li a{display:block;}
ul.download li a:hover .img{background:#f5f5f5;}
#pageBody article ul.download li a[target=_blank]::after{content:'';}
ul.download li.enlarge .img::after{content:''; background:url("../images/download/icnMagni.png") no-repeat center; width:30px; height:30px; position:absolute; right:0; bottom:0; background-size:30px;}
ul.download li.enlarge a::after{display:none;}

/* 20220131 da */
article.downloadPage ul.download{}
#pageBody article ul.download li .img a,#pageBody article ul.download li .img a.imgLink{align-items: center;display: flex;height: 100%;justify-content: center;text-align: center;width: 100%;}
article.downloadPage ul.download li > *:not(.img)::after{content:'';display: block;height: 12px;padding-left: 5px;font-size: 12px;line-height: 2;}
#pageBody article ul.download li a:hover {opacity: 1;}
ul.download li .img:hover{background:#f5f5f5;}

@media screen and (max-width:767px){
ul.download{display:block; margin-bottom:30px;}
ul.download li{/* display: flex; */width:auto;margin:0 0 10px 0;border:1px #ddd solid;position:relative;}
ul.download li a{display:flex; justify-content:flex-start; align-items:center; align-content:center;}
ul.download li .img{border:none; display:flex; justify-content:center; align-content:center; align-items:center; width:80px; height:80px; margin-bottom:0; padding:10px;}
ul.download li.enlarge .img::after{content:none; background:none; display:none;}
ul.download li.enlarge::after{content:''; background:url("../images/download/icnMagni.png") no-repeat center; width:30px; height:30px; position:absolute; right:0; bottom:0; background-size:30px;}
ul.download li .img + div{width:calc(100% - 80px);}

/* 20220131 da */
article.downloadPage ul.download li > *:not(.img)::after{display: none;}
}


/* form
============================================================================================================================================================================================================================================== */
ul.progress{display:flex; margin-bottom:60px; height:42px; overflow:hidden;}
ul.progress li{background:#f1f5ff; text-align:center; color:#133c8c; flex:1; list-style:none; font-size:14px; font-weight:700; height:42px; line-height:42px; position:relative;}
ul.progress li.current{background:#133c8c; color:#fff;}
ul.progress li::before{content:''; display:block; width:0; height:0; border-style:solid; border-width:42px 0 42px 32px; border-color: transparent transparent transparent #f1f5ff; position:absolute; right:-16px; top:-21px; z-index:2;}
ul.progress li.current::before{border-color: transparent transparent transparent #133c8c;}
ul.progress li::after{content:''; display:block; width:0; height:0; border-style:solid; border-width:42px 0 42px 32px; border-color: transparent transparent transparent #fff; position:absolute; right:-26px; top:-21px; z-index:1;}
ul.progress li:nth-child(1){z-index:3;}
ul.progress li:nth-child(2){z-index:2;}
ul.progress li:nth-child(3){z-index:1;}
ul.progress li:nth-child(3)::before,
ul.progress li:nth-child(3)::after{content:none; display:none;}
ul.formArray{display:flex; flex-wrap:wrap; margin-bottom:40px;}
ul.formArray li{width:calc(100% / 3); margin:0 0 15px; padding:0 15px 0 0; list-style:none; font-size:14px;}
ul.formArray li input[type=checkbox]{width:20px; height:20px; border:0 none; background:none #ccc; appearance:none; vertical-align:middle; -webkit-appearance:none; position:relative; top:-2px; margin-right:3px;}
ul.formArray li input[type=checkbox]:checked{background:url("../images/contact/checkMark.png") no-repeat center #eee;}
section.form h2 em,
section.form th em{font-size:12px; color:#f00;}
section.form input[type=text],
section.form input[type=email],
section.form input[type=password],
section.form input[type=url],
section.form select,
section.form textarea{border:1px #ddd solid; border-radius:5px; color:#777; padding:8px;}
section.form input[type=text]:focus,
section.form input[type=email]:focus,
section.form input[type=password]:focus,
section.form input[type=url]:focus,
section.form select:focus,
section.form textarea:focus{border-color:#777;}
input::placeholder,
textarea::placeholder{color:#ccc;}
textarea.full{width:100%; height:6em;}
section.form table{width:100%;}
section.form th,
section.form td{border-bottom:1px #ddd solid; padding:30px 0;}
section.form th{font-size:16px; font-weight:700; width:300px; width:280px;}
section.form td input{width:270px;}
section.form td input[type=text] + input[type=text]{margin-left:25px;}
section.form td .full{width:100%;}
section.form td .short{width:80px;}
section.form td.addr label{display:block; margin-bottom:15px; font-size:12px;}
section.form .errMsg{color:#f00; font-size:12px; display:none;}
section.form td.err .errMsg{display:block;}
section.form td.err input[type=text]{border-color:#f00;}
.btnSpace{text-align:center;}
.btnSpace .btn{padding:10px 40px;}

section ul.products{border:1px #ccc solid; border-width:1px 0; padding:40px 15px 20px 30px; display:flex; flex-wrap:wrap; margin:30px 0; justify-content:flex-start;}
section ul.products li{width:calc(25% - 20px); margin-bottom:24px; font-size:13px; margin-right:25px;}
section ul.products li:nth-child(4n){margin-right:0;}
#pageBody section p.mailLink{text-align:center; line-height:2.5;}
.mailLink a{text-decoration:underline;}

@media screen and (max-width:767px){
ul.progress{margin-bottom:30px;}
ul.progress li{flex:auto;}
ul.progress li:nth-child(1){width:30%;}
ul.progress li:nth-child(2){width:35%; padding-left:15px;}
ul.progress li:nth-child(3){width:35%; padding-left:15px;}
ul.formArray{display:block; margin-bottom:40px;}
ul.formArray li{width:auto; margin:0 0 15px; padding:0;}
section.form input[type=text],
section.form input[type=email],
section.form input[type=password],
section.form input[type=url],
section.form select,
section.form textarea{padding:5px;}
textarea.full{width:calc(100% - 16px);}
section.form th{display:block; border-bottom:none; padding:10px 0 0 0;}
section.form td{display:block; padding:5px 0 10px 0;}
section.form th{font-size:16px; font-weight:700; width:300px;}
section.form td input{width:48%;}
section.form td input[type=text] + input[type=text]{margin-left:4%;}
section.form td.addr label{margin-bottom:10px;}
.btnSpace .btn{padding:10px; display:block; width:100%;}
section ul.products{padding:30px 15px; margin:15px 0;}
section ul.products li{width:calc(50% - 25px); margin:0 15px 15px 10px; font-size:12px;}

}


/* sitemap
============================================================================================================================================================================================================================================== */
nav.sitemap{display:flex;}
nav.sitemap ul,
nav.sitemap dl{flex:1;}
nav.sitemap > :last-child{flex:1.1;}
nav.sitemap ul li,
nav.sitemap dl dt{font-size:16px; font-weight:700;}
nav.sitemap ul li{margin-bottom:20px;}
nav.sitemap dl dt{margin-bottom:10px;}
nav.sitemap dl dd{margin-bottom:15px; font-size:13px;}
nav.sitemap dl dd + dt{margin-top:30px;}
nav.sitemap a{position:relative; padding-left:15px;/* white-space: nowrap; */}
nav.sitemap a::before{content:'\e904'; width:15px; height:10px; line-height:10px; position:absolute; left:0; top:50%; margin-top:-3px;}
nav.sitemap ul li a:before,
nav.sitemap dl dt a::before{font-size:12px;}
nav.sitemap dl dd a::before{font-size:10px; margin-top:-4px;}
nav.sitemap a:hover{text-decoration:underline;}

@media screen and (max-width:767px){
nav.sitemap{display:block;}
nav.sitemap ul,
nav.sitemap dl{border-bottom:1px #ddd solid; padding-bottom:20px; margin-bottom:20px;}
nav.sitemap > :last-child{flex:1;}
nav.sitemap ul li{margin-bottom:15px;}
nav.sitemap dl{display:flex; flex-wrap:wrap; justify-content:space-between;}
nav.sitemap dl dt{margin-bottom:10px; width:100%;}
nav.sitemap dl dd{margin-bottom:10px; width:calc(50% - 10px);}
nav.sitemap dl dd + dt{margin-top:20px; padding-top:20px; border-top:1px #ddd solid;}
nav.sitemap a{position:relative; padding-left:15px; display:block;}
nav.sitemap a::before{content:'\e904'; width:15px; height:10px; line-height:10px; position:absolute; left:0; top:50%; margin-top:-3px;}
nav.sitemap ul li a:before,
nav.sitemap dl dt a::before{font-size:10px;}
nav.sitemap dl dd a::before{font-size:8px; margin-top:-5px;}
nav.sitemap a:hover{text-decoration:underline;}
nav.sitemap dl:last-child{margin-bottom:0; padding-bottom:0; border-bottom:0;}
}


/* products 
=============================================================================================================================== */
body.steel .visualHeader{background-image:url("../images/product/steel/indexMainVisual.jpg");}
body.steel .visualHeader h1::before{content:"\e914";}
body.absorber .visualHeader h1::before{content:"\e900";}
#body.bridge .visualHeader{background-image:url("../images/product/bridge/indexMainVisual.jpg");}
body.bridge .visualHeader{
	background-image:url('/steelstructures/wp/wp-content/uploads/2024/10/indexMainVisual.jpg');
	text-shadow:1px 1px 1px #333333, -1px 1px 1px #333333, -1px -1px 1px #333333, 1px -1px 1px #333333;
}
body.bridge .visualHeader h1::before{content:"\e906";}
body.space .visualHeader{background-image:url("../images/product/spatial_structure/indexMainVisual.jpg");}
body.space .visualHeader h1::before{content:"\e913";}
.indexBlock{position:relative; padding:30px 0 30px 450px; border-bottom:1px #ddd solid; min-height:340px;}
.indexBlock figure{position:absolute; left:0; top:30px;}
.indexBlock p.btn{margin-top:30px;}
.indexBlock p.btn a{display:block; font-size:13px; padding:10px;}
.indexBlock + h3{margin-top:40px;}
body.bridge .indexBlock p.btn + p.btn{margin-top:15px;}
body.bridge .indexBlock p.btn + p.btn a{background:#143c8c; margin-top:15px;}
body.bridge .indexBlock p.btn + p.btn a:hover{background:#000;}

.absBlock{margin-bottom:30px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start;}
.absBlock h3{width:100%;}
.absBlock figure.main{border:1px #ddd solid; width:268px; text-align:center; padding:20px;}
.absBlock .content{width:566px;}
.absBlock .content table tr th:nth-child(1){width:20%;}
.absBlock .content table tr th:nth-child(2){width:40%;}
.absBlock .content table tr td:nth-child(3){width:auto;}
.absBlock .content table td{text-align:center;}

#pageBody article figure.absImgs{display:flex; flex-wrap:wrap; justify-content:space-between;}
#pageBody article figure.absImgs dl{width:calc(50% - 15px); margin-bottom:30px; text-align:left;}
#pageBody article figure.absImgs dl dt{font-size:18px;font-weight:700;padding:5px 0;}

.conv02,
body.bridge .conv01{display:none;}
body.bridge .conv02{display:block;}

/*da 20220327*/
body.absorber .visualHeader{background-image:url("../images/product/base_isolation/indexMainVisual2.jpg");}
#pageBody article.products .ifPc{display: block;}
#pageBody article.products .ifSp{display: none;}
#pageBody article .indexBlock h3{margin-bottom:10px;}
#pageBody article h3 + .indexBlock{margin-top:-30px;}
#pageBody article figure.absorbers{margin: 40px 0 70px;display:flex;flex-wrap:wrap;justify-content:space-between;}
#pageBody article figure.absorbers figcaption{font-size:20px; font-weight:700; color:#143c8c; width:100%; text-align:left; margin-bottom:15px;}
#pageBody article figure.absorbers div{width:calc(100% / 3 - 15px); border:1px #143c8c solid; color:#143c8c; font-size:14px; text-align:center; font-weight:700;}
#pageBody article figure.absorbers div a{padding-bottom:15px; display:block; transition:all .3s ease;}
#pageBody article figure.absorbers div a:hover{opacity:.7;}
#pageBody article figure.absorbers div img{display:block; margin:0 auto;}
#pageBody article figure.absorbers table tr:nth-child(1) > *:nth-child(1){width:10.6%;}
#pageBody article figure.absorbers table tr:nth-child(1) > *:nth-child(2){width:23.6%;}
#pageBody article figure.absorbers table tr:nth-child(1) > *:nth-child(3){width:21.9%; text-align: center;}
#pageBody article figure.absorbers table tr:nth-child(1) > *:nth-child(4){width:21.9%; text-align: center;}
#pageBody article figure.absorbers table tr:nth-child(1) > *:nth-child(5){width:21.9%; text-align: center;}
#pageBody article figure.absorbers table td{text-align: center;}
#pageBody article figure.absorbers .btn{display:flex;justify-content: center;list-style:none;width: 100%;}
#pageBody article figure.absorbers .btn a{background: #fff;border: 1px solid #143c8c;color: #143c8c;transition: all .3s ease;min-width: 190px;}
#pageBody article figure.absorbers .btn a:hover{opacity: .7;}
#pageBody article figure.absorbers .btn li:nth-child(odd){margin: 0 30px}
#pageBody article.products .absBlock2{margin-bottom: 60px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;}
#pageBody article.products .absBlock2 + .absBlock2{margin-bottom: 60px;}
#pageBody article.products .absBlock2 h3{border-top: 4px solid #dddddd;width:100%;text-align: center;color: #143c8c;margin-bottom: 55px;padding-top: 50px;font-size: 40px;}
#pageBody article.products .absBlock2 figure.main{/* border: 1px #ddd solid; */border: none;width:268px;text-align:center;padding: 0;margin-bottom: 0;width: 50%;}
#pageBody article.products .absBlock2 .content{width:566px;width: 50%;}
#pageBody article.products .absBlock2 .content table tr th:nth-child(1){width:20%;}
#pageBody article.products .absBlock2 .content table tr th:nth-child(2){width:40%;}
#pageBody article.products .absBlock2 .content table tr td:nth-child(3){width:auto;}
#pageBody article.products .absBlock2 .content table td{text-align:center;}
#pageBody article.products .absBlock2 img {vertical-align: bottom;}
#pageBody article.products h4.absTitle {display: block;font-size: 28px;line-height: calc(40 /28);padding-bottom: 15px;/* padding-bottom: 15px; */border-bottom:2px #000 solid;margin: 0 0 40px;width: 100%;}
#pageBody article.products .absBlock2 figure.absImgs{display:flex;flex-wrap:wrap;justify-content:space-between;margin-top: -40px;}
#pageBody article.products .absBlock2 figure.absImgs dl dt{margin: 40px 0 0;padding: 0;}
#pageBody article.products .absBlock2 figure.absImgs dl dd{font-size:18px;font-weight:700;line-height: calc(30 / 18);margin: 15px 0 0;padding: 0;}
#pageBody article.products .absBlock2 figure.absImgs dl{width:calc(50% - 15px);margin-bottom: 0;/* margin-top: -40px; */text-align:left;}
#pageBody article.products .absBlock2 figure.absImgs2 + figure.absImgs2 {margin-top: 20px;}
#pageBody article.products .indexBlock2{background: #f2f2f2;position:relative;padding: 30px 30px 30px 450px;margin-bottom: 20px;min-height:340px;}
#pageBody article.products .indexBlock2 figure{position:absolute;left:0;top: 0;}
#pageBody article.products .indexBlock2 strong.red{color: red;}
#pageBody article.products .indexBlock2 p.btn{margin-top:30px;}
#pageBody article.products .indexBlock2 p.btn a{display:block; font-size:13px; padding:10px;}
#pageBody article.products .indexBlock2 + h3{margin-top:40px;}
#pageBody article.products .indexBlock2 + .indexBlock2{/* margin-bottom: 0; */}
#pageBody article.products .defList{align-items: baseline;display: flex;/* justify-content: space-evenly; */margin: 0 0 5px;width: 100%;}
#pageBody article.products .defList:last-child{margin-bottom: 0;}
#pageBody article.products .defList > *:nth-child(1){background: #143c8c;border-radius: 50px;color: #fff;flex-shrink: 0;font-size: 13px;letter-spacing: -.04rem;line-height: 1;margin: 0 5px 0 0;padding: 6px 0;text-align: center;width: 154px;}
#pageBody article.products .defList > *:nth-child(2){font-size: 15px;font-weight: 700;letter-spacing: -.04rem;width: 100%;}
#pageBody article.products .btnContact{display: block;width: 100%;}
#pageBody article.products .btnContact a{font-size: 25px;font-weight: 700;line-height: calc(30 / 25);color: #fff;background: #143c8c;min-height: 80px;width: 100%;display: flex;justify-content: center;vertical-align: bottom;transition: all 1.2s cubic-bezier(0.2, 1, 0.2, 1);align-items: center;}
#pageBody article.products .btnContact a:hover{background: #000;}
#pageBody article.products .btnContact a:before{content: '\e907';font-size: 38px;margin: 0 20px 0 0;}
#pageBody article.products .imgDesc{display: block;}
#pageBody article.products .imgDesc > :nth-child(1){margin: 0 0 15px;}
#pageBody article.products .imgDesc > :nth-child(2){}
/*/da*/


@media screen and (max-width:767px){
h2 + .indexBlock{padding-top:0;}
#pageBody article .indexBlock{padding:30px 0 30px 0; min-height:0;}
#pageBody article .indexBlock figure{position:relative; left:auto; top:auto; margin-bottom:10px;}
#pageBody article .indexBlock p.btn{margin-top:20px;}
#pageBody article figure.absorbers{margin: 20px 0 35px;}
#pageBody article figure.absorbers figcaption{font-size:16px; margin-bottom:10px;}
#pageBody article figure.absorbers div{width:calc(100% / 3 - 5px); padding-bottom:5px;}
#pageBody article figure.absorbers div img{margin-bottom:-10px;}
#pageBody article figure.absorbers .btn{margin-left: -10px;}
#pageBody article figure.absorbers .btn a{padding: 16px 10px;}
#pageBody article figure.absorbers .btn li:nth-child(odd){margin: 0 10px;}
.absBlock{display:block;}
.absBlock figure.main{width:100%; padding:10px;}
.absBlock .content{width:auto;}
.absBlock .content table tr th:nth-child(1){width:25%;}
.absBlock .content table tr th:nth-child(2){width:50%;}
#pageBody article figure.absImgs dl{width:calc(50% - 8px); margin-bottom:16px;}
#pageBody article figure.absImgs dl dt{font-size:15px; padding:5px 0;}
body.bridge #pageBody article.products section .indexBlock p.btn + p.btn{margin-top:15px;}

/*da 20220327*/
#pageBody article.products .ifPc{display: none;}
#pageBody article.products .ifSp{display: block;}
#pageBody article figure.absorbers table{margin-bottom: 25px;}
#pageBody article.products .absBlock2{margin-bottom: 30px;}
#pageBody article.products .absBlock2 p:last-child{margin-bottom: 0;}
#pageBody article.products .absBlock2 + .absBlock2{margin-bottom: 30px;}
#pageBody article.products .absBlock2 h3{border-width: 2px;margin-bottom: 20px;padding-top: 15px;font-size: 25px;}
#pageBody article.products .absBlock2 figure.main{width: 100%;margin-bottom: 20px;}
#pageBody article.products .absBlock2 .content{width:566px;}
#pageBody article.products .absBlock2 .content table tr th:nth-child(1){width:20%;}
#pageBody article.products .absBlock2 .content table tr th:nth-child(2){width:40%;}
#pageBody article.products .absBlock2 .content table tr td:nth-child(3){width:auto;}
#pageBody article.products .absBlock2 .content table td{text-align:center;}
#pageBody article.products .absBlock2 img {vertical-align: bottom;}
#pageBody article.products h4.absTitle {font-size: 20px;line-height: calc(30 /20);padding-bottom: 15px;padding-bottom: 10px;border-bottom:2px #000 solid;margin: 0 0 25px;width: 100%;}
#pageBody article.products .absBlock2 figure.absImgs{margin-bottom: 0;margin-top: -35px;}
#pageBody article.products .absBlock2 figure.absImgs dl dt{display: block;order: 2;font-size: 14px;line-height: calc(21 / 14);margin: 25px 0 0;width: 100%;}
#pageBody article.products .absBlock2 figure.absImgs dl dd{order: 2;font-size: 14px;line-height: calc(21 / 14);margin: 0;padding: 0;}
#pageBody article.products .absBlock2 figure.absImgs dl{display: flex;flex-flow: row wrap;width: 100%;margin-bottom: 0;text-align:left;}
#pageBody article.products .absBlock2 figure.absImgs2 + figure.absImgs2 {margin-top: 20px;}
#pageBody article.products .indexBlock2{background: #f2f2f2;display: flex;flex-flow: row wrap;position:relative;padding: 15px 15px 25px;margin-bottom: 20px;min-height: auto;width: 100%;}
#pageBody article.products .indexBlock2 h4{order: 2;}
#pageBody article.products .indexBlock2 figure{order: 1;position: static;text-align: center;}
#pageBody article.products .indexBlock2 figure + p{order: 3;}
#pageBody article.products .indexBlock2 p.btn{order: 4;margin-top:30px;width: 100%;}
#pageBody article.products .indexBlock2 p.btn a{display:block; font-size:13px; padding:10px;}
#pageBody article.products .indexBlock2 + h3{margin-top:40px;}
#pageBody article.products .indexBlock2 + .indexBlock2{margin-bottom: 20px;}
#pageBody article.products .defList > *:nth-child(1){background: #143c8c;font-size: 10px;width: 114px;}
#pageBody article.products .defList > *:nth-child(2){font-size: 13px;line-height: calc(16 / 13);}
#pageBody article.products .btnContact a{font-size: 16px;font-weight: 700;line-height: calc(30 / 25);color: #fff;background: #143c8c;min-height: 50px;width: 100%;display: flex;justify-content: center;vertical-align: bottom;align-items: center;}
#pageBody article.products .btnContact a:before{font-size: 22px;margin: 0 12px 0 0;}
#pageBody article.products .imgDesc{display: block;/* justify-content: space-between; *//* justify-content: flex-start; */}
#pageBody article.products .imgDesc > :nth-child(1){margin-bottom: 10px;margin-right: 0;}
#pageBody article.products .imgDesc > :nth-child(2){}
/*/da*/
}

/* products special hand markuped pages */
#pageBody article.products .topSection{margin-bottom:50px; border-bottom:4px #ddd solid;}
#pageBody article.products .topSection > img{display:block; position:relative; z-index:0;}
#pageBody article.products .topSection div{margin:0 0 50px; background:#143c8c; text-align:center; color:#fff; padding:30px 80px 40px; z-index:1; position:relative;}
#pageBody article.products .topSection div:nth-of-type(2){color: #000;font-weight: bold;margin:0 0 50px;background:transparent;text-align: left;padding:0;}
#pageBody article.products .topSection div:nth-of-type(2) span{display: block;margin-top: 10px;}
#pageBody article.products .topSection h1{font-size:30px; font-weight:700; margin-bottom:25px; letter-spacing:-0.025em; padding-bottom:25px; border-bottom:2px #fff solid;}
#pageBody article.products section.spc{margin-bottom:50px; padding-bottom:50px; border-bottom:4px #ddd solid;}
#pageBody article.products section.spc.single{border-bottom:none; margin-bottom:0; padding-bottom:0;}
#pageBody article.products section.spc header{margin-bottom:40px; text-align:center;}
#pageBody article.products section.spc.single header{margin-bottom:0;}
#pageBody article.products section.spc header p{margin-bottom:0;}
#pageBody article.products section.spc header p.catch{color:#000;}
#pageBody article.products section.spc header h1{color:#143c8c; font-size:40px; font-weight:700; margin-bottom:30px;} 
#pageBody article .absMaterials{display:flex; justify-content:space-between;}
#pageBody article .absMaterials div.past,
#pageBody article .absMaterials div.future{width:402px;}
#pageBody article .innerTitle{font-size:20px; border-bottom:0; padding:0; position:relative; padding-left:15px; line-height:1.2; margin:0 0 20px;}
#pageBody article .innerTitle::before{width:5px; height:90%; display:block; content:''; position:absolute; left:0; top:8%; background:#000;}
#pageBody article .absMaterials div.future .innerTitle::before{background:#fff;}
#pageBody article .absMaterials div.past + p{width:0; height:0; text-indent:-9999px; border-style:solid; border-width:20px 0 20px 20px; border-color: transparent transparent transparent #143c8c; margin-top:300px;}
#pageBody article .absMaterials div.past .inner{background:#f2f2f2; padding:20px 30px;}
#pageBody article .absMaterials div.future .inner{background:#143c8c; color:#fff; padding:20px 30px;}
#pageBody article .absMaterials h3{margin-bottom:10px;}
#pageBody article .absMaterials table{border:0 none; border-top:1px #ddd solid;}
#pageBody article .absMaterials table th,
#pageBody article .absMaterials table td{border:0 none; border-bottom:1px #ddd solid; padding:12px 0;}
#pageBody article .absMaterials table th{font-size:12px; color:#777; background:transparent;}
#pageBody article .absMaterials table td{font-size:16px; font-weight:700; text-align:center; white-space:nowrap;}
#pageBody article .absMaterials table tr:last-child td{height:4.5em;}
#pageBody article h2.point{border-bottom:0; color:#143c8c; margin-bottom:15px; display:flex; justify-content:flex-start; align-items:center; align-content:center; padding-bottom:0; margin-top:60px;}
#pageBody article h2.point span{width:90px; height:90px; background:#143c8c; color:#fff; text-align:center; font-size:11px; line-height:1; display:flex; align-content:center; flex-wrap:wrap; justify-content:center; font-weight:400;}
#pageBody article h2.point span b{font-size:40px; display:block; width:100%;}
#pageBody article h2.point span + b{display:flex; padding-left:30px; align-content:center; flex-wrap:wrap;}
#pageBody article h2.point span + b small{color:#000; font-size:16px; display:block; width:100%;}
#pageBody article p.btn.details{text-align:center; margin:30px 0;}
#pageBody article p.btn.details a{display:block; margin:0 auto; width:268px; font-size:13px;}
#pageBody article .gamma{background:#f0f5ff; padding:30px;}
#pageBody article.products section .block ol.stepList{list-style:none; color:#143c8c; margin:0;}
#pageBody article.products section .block ol.stepList li{background:#fff; border:2px #143c8c solid; color:#143c8c; font-size:18px; border-radius:6px; font-weight:700; padding:10px; line-height:1.2; position:relative; margin-bottom:40px;}
#pageBody article.products section .block ol.stepList li::after{display:block; content:''; width:0; height:0; border-style:solid; border-width:20px 20px 0 20px; border-color: #143c8c transparent transparent transparent; position:absolute; left:50%; margin-left:-20px; bottom:-35px;}
#pageBody article.products section .block ol.stepList li:last-child{margin-bottom:0}
#pageBody article.products section .block ol.stepList li:last-child::after{display:none; content:none;}
#pageBody article .seismic-isolation-merit{margin-bottom:15px;}
#pageBody article .seismic-isolation-merit div{background:#143c8c; color:#fff; padding:20px 30px; width:calc(50% - 16px); border-radius:6px;}
#pageBody article .seismic-isolation-merit div b{background:#fff; color:#143c8c;; font-size:11px; line-height:20px; height:20px; border-radius:10px; padding:0 15px; font-weight:400;}
#pageBody article .seismic-isolation-merit div p{font-size:28px; font-weight:700; line-height:1.3; padding:10px 0 0;}
#pageBody article .seismic-isolation-merit div p small{font-size:20px;}
#pageBody article .testing .col{background:#f2f2f2; padding:30px;}
#pageBody article.products section .col.designFormula p{font-size:14px;}
#pageBody article.products section .col.designFormula p img{display:inline-block; vertical-align:middle;}
#pageBody article figure.one3rd{margin-bottom:30px; display:flex; flex-wrap:wrap; justify-content:flex-start;}
#pageBody article figure.one3rd div{width:calc(100% / 3 - 24px); margin-bottom:10px; margin-right:32px;}
#pageBody article figure.one3rd div:nth-child(3n){margin-right:0;}
#pageBody article figure.one3rd div img{display:block; margin:0; padding:0;}
#pageBody article figure.one3rd figcaption{width:100%;}
#pageBody article .movieIntro{margin:30px auto 50px;}
#pageBody article .movieIntro video{max-width:100%; height:auto; margin:0 auto; display:block;}
#pageBody article .movieIntro .description{width:calc(100% - 569px - 32px);}
td.colorTypeAlpha{background:#BEBFC1; vertical-align:top;}
td.colorTypeBeta{background:#62AB6E; color:#fff; vertical-align:top;}
td.colorTypeGamma{background:#A89938; color:#fff; vertical-align:top;}
td.colorTypeBeta a,
td.colorTypeGamma a{color:#fff; text-decoration:underline;}
#pageBody article h2.weak{font-size:20px; margin:40px 0 20px; border:0 none; padding-bottom:0;}
#pageBody article .col figure{margin-bottom:15px;}
#pageBody article figure.ctrImg{border:1px #ccc solid; clear:both;}
#pageBody article figure.ctrImg img{display:block; margin:0 auto;}
#pageBody article.products section .block  ul, 
#pageBody article.products section .block  ol:last-child{margin-bottom:0 !important;}

@media screen and (max-width:767px){
#pageBody article.products .topSection{margin-bottom:30px; border-bottom:3px #143c8c solid;}
#pageBody article.products .topSection div{margin:0 0 30px; text-align:left; padding:20px;}
#pageBody article.products .topSection div:nth-of-type(2){margin-bottom:30px;}
#pageBody article.products .topSection h1{font-size:25px; margin-bottom:20px;}
#pageBody article.products section.spc{margin-bottom:30px; padding-bottom:30px; border-bottom:3px #143c8c solid;}
#pageBody article.products section.spc.single{border-bottom:none; margin-bottom:0; padding-bottom:0;}
#pageBody article.products section.spc header{margin-bottom:25px; padding-bottom:15px; text-align:center; border-bottom:1px #ddd solid;}
#pageBody article.products section.spc.single header{margin-bottom:0;}
#pageBody article.products section.spc header p{margin-bottom:0;}
#pageBody article.products section.spc header p.catch{text-align:left;}
#pageBody article.products section.spc header h1{font-size:25px; margin-bottom:20px;} 
#pageBody article .absMaterials{display:block;}
#pageBody article .absMaterials div.past,
#pageBody article .absMaterials div.future{width:auto;}
#pageBody article .innerTitle{font-size:16px; padding-left:10px; margin:0 0 15px;}
#pageBody article .innerTitle::before{width:3px; top:8%;}
#pageBody article .absMaterials div.future .innerTitle::before{background:#fff;}
#pageBody article .absMaterials div.past + p{margin:0 0 30px; border:0 none; width:100%; height:4px; position:relative;}
#pageBody article .absMaterials div.past + p::after{display:block; content:''; width:0; height:0; border-style:solid; border-width:20px 20px 0 20px; border-color: #143c8c transparent transparent transparent; position:absolute; left:50%; margin-left:-20px; bottom:-10px;}
#pageBody article .absMaterials div.past .inner{padding:20px 24px;}
#pageBody article .absMaterials div.future .inner{padding:20px 24px;}

#pageBody article .absMaterials h3{margin-bottom:10px;}
#pageBody article .absMaterials table th,
#pageBody article .absMaterials table td{padding:11px 0;}
#pageBody article .absMaterials table th{font-size:10px; width:20%; white-space:nowrap;}
#pageBody article .absMaterials table td{font-size:14px;}
#pageBody article .absMaterials table tr:last-child td{height:auto;}
#pageBody article header + h2.point{margin-top:0;}
#pageBody article h2.point{border-bottom:0; color:#143c8c; margin-bottom:15px; display:flex; justify-content:flex-start; align-items:center; align-content:center; padding-bottom:0; margin-top:40px; border-top:1px #ddd solid; padding-top:20px;}
#pageBody article h2.point span{width:75px; height:75px; font-size:12px;}
#pageBody article h2.point span b{font-size:28px; display:block; width:100%;}
#pageBody article h2.point span + b{padding-left:15px; align-content:center; width:calc(100% - 90px); line-height:1.2;}
#pageBody article p.btn.details a{width:100%; padding:10px;}
#pageBody article .gamma{padding:20px;}
#pageBody article.products section .block ol.stepList li{font-size:16px; margin-bottom:35px;}
#pageBody article.products section .block ol.stepList li::after{bottom:-30px;}
#pageBody article .seismic-isolation-merit{margin-bottom:10px;}
#pageBody article .seismic-isolation-merit div{padding:20px; width:100%; margin-bottom:20px; text-align:center;}
#pageBody article .seismic-isolation-merit div + div{margin-bottom:0;}
#pageBody article .seismic-isolation-merit div b{font-size:12px; line-height:1; height:auto; border-radius:0; padding:3px 25px;}
#pageBody article .seismic-isolation-merit div p{font-size:20px; padding:15px 0 0; margin-bottom:0 !important;}
#pageBody article .seismic-isolation-merit div p small{font-size:13px;}
#pageBody article.products h2.reverse{border-top:3px #000 solid; border-bottom:1px #ddd solid; padding:20px 5px;}
#pageBody article .testing .col{padding:20px;}

#pageBody article.products section .col.designFormula p{font-size:14px;}
#pageBody article.products section .col.designFormula p img{display:inline-block; vertical-align:middle;}
#pageBody article figure.one3rd{margin-bottom:20px;}
#pageBody article figure.one3rd div{width:calc(50% - 5px); margin-bottom:10px; margin-right:10px;}
#pageBody article figure.one3rd div:nth-child(2n){margin-right:0;}
#pageBody article figure.one3rd div img{display:block; margin:0; padding:0;}
#pageBody article figure.one3rd figcaption{width:100%;}
#pageBody article .movieIntro{margin:0 auto 30px;}
#pageBody article .movieIntro .description{width:auto;}
img.strech{width:100%; height:auto;}

}

/* search result */
.pageHeader .searchForm{border-top:1px #000 solid; padding:20px 40px; margin:60px 0 -60px;}
.pageHeader .searchForm form div{position:relative;}
.pageHeader .searchForm form div input{width:100%; height:50px; background:none #fff; border-radius:6px; padding:15px; border:1px #ddd solid; display:block;}
.pageHeader .searchForm form div button{position:absolute; right:0; top:0; border:none; background:none; width:50px; height:50px; display:block; text-indent:-9999px;}
.pageHeader .searchForm form div button::before{content:'\e912'; position:absolute; left:0; top:0; text-indent:0; font-size:16px; width:50px; height:50px; text-align:center; line-height:50px; transition:color .3s ease;}
.pageHeader .searchForm form div button:hover{color:#ccc;}
#pageBody article h2 span.searchMeta{font-size:18px; font-weight:400;}
.notFound{text-align:center; font-size:20px; padding:50px;}
dl.searchResult{}
dl.searchResult dt{margin-bottom:5px; font-weight:700;}
dl.searchResult dt a::before{content:'\e904 '; font-size:10px; position:relative; top:-2px; padding-right:5px;}
dl.searchResult dt a:hover{text-decoration:underline;}
dl.searchResult dt span{color:#999; font-size:10px; border:1px #999 solid; border-radius:10px; padding:2px 15px; margin-left:15px; display:inline-block; position:relative; top:-3px; vertical-align:middle;}
dl.searchResult dd{margin-bottom:25px; padding-bottom:25px; border-bottom:1px #ddd solid;}
dl.searchResult dd ul{color:#999; list-style:none; display:flex; flex-wrap:wrap; justify-content:flex-start;}
dl.searchResult dd ul li::after{content:' ＞ ';}
dl.searchResult dd ul li:last-child::after{content:'';}
dl.searchResult dd strong{background:#ffd4d5; font-weight:normal;}
ul.pager{margin:0; list-style:none; display:flex; justify-content:center;}
ul.pager li{margin:0 5px;}
ul.pager li a{display:block; padding:4px 8px; border:1px #143c8c solid;}
ul.pager li em{display:block; padding:5px 9px; background:#143c8c; color:#fff;}
ul.pager li:first-child{margin-right:20px;}
ul.pager li:last-child{margin-left:20px;}
ul.pager li:first-child a,
ul.pager li:last-child a{border:none; text-decoration:underline;}
ul.pager li:first-child a::before{content:'＜'}
ul.pager li:last-child a::after{content:'＞'}
ul.pager li a:hover{background:#143c8c; color:#fff;}
ul.pager li:first-child a:hover,
ul.pager li:last-child a:hover{text-decoration:none; background:transparent; color:#143c8c;}

@media screen and (max-width:767px){
.pageHeader .searchForm{padding:15px; margin:30px 0 -30px;}
.pageHeader .searchForm form div input{height:40px;}
.pageHeader .searchForm form div button{width:40px; height:40px;}
.pageHeader .searchForm form div button::before{width:40px; height:40px; line-height:40px;}
#pageBody article h2 span.searchMeta{display:none;}
.notFound{padding:50px 0;}
dl.searchResult dt{margin-bottom:5px;}
dl.searchResult dt span{float:right;}
dl.searchResult dd{margin-bottom:15px; padding-bottom:15px;}
}



/* nav show hide */
nav.regular dl.steel,
nav.regular dl.steel2,
nav.regular dl.space,
nav.regular dl.absorber,
nav.regular dl.bridge{display:none;}
nav.regular dl.search,
nav.regular dl.keywd,
nav.regular ul.utils{display:block;}
body.products.steel nav.regular dl.steel,
body.products.space nav.regular dl.space,
body.products.absorber nav.regular dl.absorber,
body.products.bridge nav.regular dl.bridge{display:block;}

@media screen and (max-width:767px){
nav.regular.head dl.search,
nav.regular.head dl.keywd,
nav.regular.head ul.utils{display:none;}
#pageAside nav.regular dl.search,
#pageAside nav.regular dl.keywd,
#pageAside nav.regular ul.utils{display:block;}

body.products.steel nav.regular dl.steel dd ul ul{/* display:block; */}

}







/* ==========================================================================================
Properties for WORKS contents 2021/12
============================================================================================*/
body.worksArchive #pageAside nav.local{display:none;}
body.worksArchive #pageAside nav.worksNav{display:block;}
.worksNavSp{display:none;}
.worksMenu{margin-top:-30px; font-size:14px; font-weight:bold; border-top:2px #000 solid;}
.worksMenu input{position:relative; top:-2px;}
.worksMenu .menuHead{background:#f2f2f2; padding:13px 15px; position:relative; cursor:pointer;}
.worksMenu .menuHead::after{content:'\e904'; color:#999; font-size:10px; position:absolute; top:calc(50% - 4px); transform: scale(.8) rotate(-90deg); right:15px; transition:transform .8s ease;}
.worksMenu .menuHead.open::after{transform:scale(.8) rotate(90deg);}
.worksMenu .menuPrimary{padding:15px;}
.worksMenu .menuPrimary label{display:inline-block; padding:10px 15px 10px 0;}
#pageAside nav.local .worksMenu dl{margin-bottom:20px;}
#pageAside nav.local .worksMenu dl dt{border:0 none; background:#f2f2f2; padding:6px 15px; position:relative; cursor:pointer; margin-bottom:1px;}
#pageAside nav.local .worksMenu dl dt::after{content:'\e904'; color:#999; font-size:10px; position:absolute; top:calc(50% - 4px); transform: scale(.8) rotate(-90deg); right:15px; transition:transform .8s ease;}
#pageAside nav.local .worksMenu dl dt.open::after{transform:scale(.8) rotate(90deg);}
#pageAside nav.local .worksMenu dl dd{padding:10px; margin-bottom:10px;}
#pageAside nav.local .worksMenu dl dd ul li{border:0 none;}
#pageAside nav.local .worksMenu dl dd ul li label{padding:3px 5px 3px 15px; display:block; text-indent:-15px;}
#pageAside nav.local .worksMenu dl dd ul.pref{display:flex; flex-wrap:wrap; justify-content:space-between;}
#pageAside nav.local .worksMenu dl dd ul.pref li{width:33.3333%;}
.worksMenu button.clear{background:none #edf3ff; border:0 none; display:block; color:#134196; padding:10px; width:100%; font-weight:bold;}
.worksMenu .freeWd{position:relative; margin:5px 0 0; height:40px; border:1px #d8d8d8 solid; display:none;}
.worksMenu .freeWd input{width:100%;padding:0 10px; height:40px; font-weight:normal; outline:none; display:block; border:0 none; background:transparent;}
.worksMenu .freeWd button{width:38px; height:38px; position:absolute; right:0; top:0; text-indent:-9999px; background:none; border:0 none; display:block; margin:0; padding:0; }
.worksMenu .freeWd button::before{content:'\e912'; position:absolute; left:50%; top:50%; margin: -8px 0 0 -8px; text-indent:0; font-size:14px; width:16px; height:16px; font-weight:normal;}
article.works .worksList{display:flex; flex-wrap:wrap; justify-content:flex-start; margin:0 -15px 40px;}
article.works .worksList li{width:268px; margin:0 15px 25px; list-style:none; font-size:16px;}
article.works .worksList li a{display:block; transition:opacity .3s ease;}
article.works .worksList li a:hover{opacity:.6;}
article.works .worksList li img{display:block; margin-bottom:6px; width:100%; height:auto;}
article.works .mapArea{position:relative; margin-bottom:80px;}
article.works .mapArea .mapTip{width:200px; height:auto; background:#fff; border-radius:10px; box-shadow:0 0 10px rgba(0,0,0,.3); padding:10px;}
article.works .mapArea .mapTip::after{content:''; display:block; width:16px; height:16px; background:#fff; position:absolute; left:calc(50% - 6px); bottom:-8px; transform:rotate(45deg);}
article.works .mapArea .mapTip img{display:block; width:100%; height:auto; margin-bottom:5px;}
article.works .mapArea .mapTip img:first-child{position:absolute; right:15px; top:11px; width:10px; height:10px; font-size:10px; color:#aaa; line-height:1; display:block;}
article.works .mapArea .mapTip b{display:block; font-size:12px; margin-bottom:5px;}
article.works .mapArea .mapTip a:last-child{font-size:14px; font-weight:bold; display:block; text-align:right;}
article.works .mapArea .mapTip a:last-child::after{content:'\e904'; color:#143c8c; font-size:10px; padding-left:4px; vertical-align:middle; position: relative; top:0px;}
article.works .mapArea .mapTip a:last-child:hover{color:#666;}
.worksByList #pageAside nav.local .worksMenu dl dt.mp,
.worksByList #pageAside nav.local .worksMenu dl dd.mp{display:none;}
.worksByList #pageAside nav.local .worksMenu dl dt.mp.cd,
.worksByList #pageAside nav.local .worksMenu dl dd.mp.cd{display:block;}
.worksByMap #pageAside nav.local .worksMenu dl dt.cd,
.worksByMap #pageAside nav.local .worksMenu dl dd.cd{display:none;}
.worksByMap #pageAside nav.local .worksMenu dl dt.mp.cd,
.worksByMap #pageAside nav.local .worksMenu dl dd.mp.cd{display:block;}
.worksByWord #pageAside nav.local .worksMenu dl,
.worksByWord #pageAside nav.local .worksMenu .clear{display:none;}
.worksByWord .worksMenu .freeWd{display:block;}
.worksDetail .worksImage{display:flex; justify-content:space-between; flex-wrap:wrap; margin-bottom:40px;}
.worksDetail .worksImage > div{margin-bottom:36px; border:1px #eee solid; width:calc(50% - 20px); display:flex; justify-content:center; align-items:center;}
.worksDetail .worksImage > div img{display:block; margin:0 auto; max-width:100%; max-height:100%; width:auto; height:auto;}
.worksDetail h3{border-bottom:2px #dddddd solid; padding-bottom:10px;}
#pageBody article section.worksDetail table{margin-bottom:60px; width:100%;}
#pageBody article section.worksDetail table th,
#pageBody article section.worksDetail table td{padding:10px 15px; font-size:14px; line-height:1.5; border:1px #ddd solid;}
#pageBody article section.worksDetail table td span::after{content:' / ';}
#pageBody article section.worksDetail table td span:last-child::after{content:none;}

#pageBody article section.worksDetail table th{font-weight:bold; background:#f2f2f2; width:15%; color:#000;}
.worksDetail .worksMap{height:536px; border:1px #ddd solid; margin-bottom:60px;}
.worksDetail .worksMap iframe{width:100%; height:100%;}
.worksDetail .return a{display:block; width:60%; padding:20px; background:#134196; color:#fff; font-weight:bold; font-size:16px; text-align:center; margin:0 auto 80px; transition:background .3s ease;}
.worksDetail .return a:hover{background:#000;}

@media screen and (max-width:767px){
	body.worksArchive #pageAside nav.local{display:block;}
	body.worksArchive #pageAside nav.local.worksNav.worksNavPc,
	body.worksArchive .pgUp{display:none !important;}
	.worksMenu.pcMenu{display:none;}
	.worksNavSp{display:block; position:relative; z-index:10001;}
	.worksNavSp .panel{display:none;}
	.worksNav.worksNavSp ul.switch{position:fixed; left:0; bottom:0; background:rgba(0,0,0,.8); padding:10px 5px; width:100%; display:flex; justify-content:space-between;}
	.worksNav.worksNavSp ul.switch li{margin:0 5px; width:calc(50% - 10px); font-size:12px; font-weight:bold;}
	.worksNav.worksNavSp ul.switch li a{display:flex; justify-content:center; align-items:center; color:#fff; background:#134196; text-align:center; padding:8px; line-height:1.2;}
	.worksNav.worksNavSp .setConditions{width:65px; height:65px; position:fixed; right:10px; bottom:70px; background:#113b8e; color:#fff; text-align:center; display:flex; justify-content:center; align-items:center; font-weight:bold; font-size:12px; display:none;}
	.worksNav.worksNavSp .setConditions.stop{position:relative; right:auto; bottom:auto; margin:0 0 10px calc(100vw - 75px);}
	.worksNav.worksNavSp ul.switch.stop{position:relative; left:auto; bottom:auto;}
	.worksByList .worksNav.worksNavSp ul.switch li a.conditions,
	.worksByMap .worksNav.worksNavSp ul.switch li a.map{background:#002163;}
	
	.worksByMap .worksNav.worksNavSp .setConditions{display:flex;}
	
	.worksNavSp .panel{width:100%; height:100vh; position:fixed; left:0; top:0; background:rgba(0,0,0,.8); z-index:99999; overflow:auto;}
	.worksNavSp .panel .head{position:relative; padding:20px; color:#fff; font-weight:bold; background:#031538;}
	.worksNavSp .panel .head a.close{width:50px; height:100%; position:absolute; right:0; top:0; color:#fff; text-align:center; font-size:16px; display:flex; justify-content:center; align-items:center;}
	.worksNavSp .panel dl{background:#113b8e;}
	.worksNavSp .panel dl dt{background:#0d234d; color:#fff; padding:12px 40px; position:relative; margin-bottom:1px;}
	.worksNavSp .panel dl dt::before{content:'\e904'; color:#fff; font-size:10px; position:absolute; top:calc(50% - 4px); transform: scale(.8) rotate(90deg); left:20px; transition:transform .8s ease;}
	.worksNavSp .panel dl dt.open::before{transform:scale(.8) rotate(-90deg);}
	.worksNavSp .panel dl dd{padding:20px 48px; color:#aabfeb; display:none;}
	.worksNavSp .panel ul.selector li{margin:.5em 0;}
	.worksNavSp .panel ul.selector li input{margin-right:.5em; position:absolute; top:.34em; left:0;}
	.worksNavSp .panel ul.selector li label{display:block; padding-left:24px; position:relative;}
	.worksNavSp .panel ul.selector.pref{display:flex; justify-content:space-between; flex-wrap:wrap;}
	.worksNavSp .panel ul.selector.pref li{width:33.333%;}
	.worksNavSp .panel .btn{padding:20px 60px; background:#031538;}
	.worksNavSp .panel .btn button{background:#113b8e; color:#fff; padding:10px; border:none; display:block; width:100%; font-family:'Noto Sans Jp', sans-serif;}
	.worksNavSp .panel .freeWd{background:#0d234d; padding:20px 15px; border-top:1px #1d376b solid;}
	.worksNavSp .panel .freeWd div{position:relative;}
	.worksNavSp .panel .freeWd div input{background:none #fff; border:1px #ddd solid; border-radius:4px; width:100%; display:block; padding:4px 10px; outline:none;}
	.worksNavSp .panel .freeWd div button{width:38px; height:38px; position:absolute; right:0; top:0; text-indent:-9999px; background:none; border:0 none; display:block; margin:0; padding:0; }
	.worksNavSp .panel .freeWd div button::before{content:'\e912'; position:absolute; left:50%; top:50%; margin: -8px 0 0 -8px; text-indent:0; font-size:14px; width:16px; height:16px; font-weight:normal;}
	
	article.works .worksList{margin:0 auto 40px; justify-content:space-between;}
	article.works .worksList li{width:calc(50% - 8px); margin:0 0 20px 0; font-size:14px; font-weight:bold;}
	article.works .worksList li:nth-child(3n){margin-right:0;}
	article.works .worksList li:nth-child(2n){margin-right:0;}
	article.works .mapArea{height:460px; margin-bottom:40px; z-index:0;}
	article.works .dummyMap{background:url("../images/works/steel/dummyMapSp.jpg") no-repeat center; background-size:cover;}
	article.works .mapArea .mapTip{width:140px; padding:14px 6px 6px;right: 18px;}
	article.works .mapArea .mapTip::after{width:10px; height:10px; left:calc(50% - 4px); bottom:-5px;}
	article.works .mapArea .mapTip b{font-size:10px; margin-bottom:5px;}
	article.works .mapArea .mapTip a:last-child{font-size:12px;}
	#pageBody article section.worksDetail .worksImage{display:block; margin-bottom:20px;}
	#pageBody article section.worksDetail .worksImage > div{margin-bottom:20px; display:block; width:100%; border:0 none;}
	#pageBody article section.worksDetail .worksImage > div img{}
	#pageBody article section.worksDetail h3{border-bottom:1px #dddddd solid;}
	#pageBody article section.worksDetail table{margin-bottom:30px;}
	#pageBody article section.worksDetail table th{width:30%;}
	.worksDetail .worksMap{height:480px; margin-bottom:30px;}
	.worksDetail .return a{width:100%; padding:15px;}
}