body {-webkit-text-size-adjust: 100%; margin: 0; color:#444; font-size: 16px; font-family: 'meiryo', "Hiragino Kaku Gothic Pro W3", sans-serif; background: #fff;}
img { vertical-align: bottom;}

header { position: relative;width: 98%; padding: 3px 1%; background-image: linear-gradient(180deg, #eee 0%, #f5f5f5 38%, #fff 100%); font-size: 18px; color: #888; font-weight: bold; height: 70px;background: #fff;}
header div {display:inline-block; color: #756132; font-size: 14px; padding: 0 5px 0 0; font-weight: normal;}
header h1 { display: inline-block; padding: 0;  margin: 5px 0 0 4px; position: relative;}
header img.logo { display: block; width: 170px; position: absolute; top: 29px; left: 0;}
header img.group { display: block; width: 230px; margin: 0;}
header a.map { display: none; position: absolute; right: 100px; top: 5px; color:#3268D0;}
header a.house { display: none; position: absolute; right: 70px; top: 5px; color:#3268D0;}

#open-menu,#close-menu { position: absolute; top:9px; right: 13px; z-index: 101; border: none;}
#close-menu { display: none;}
#open-menu i,#close-menu i { color: #476FF8; font-size: 23px; padding: 3px 0 3px 0;}
.close {border: 1px solid none; margin: 0 0 0 50px;}

nav.page-link {display:none; position: absolute; top: 70px; left: 0;  width: 100%; height: 100%; z-index: 100;}
.page-link button { position: absolute; top: 0; left: 0; width:100%; height: 100%; z-index: 1; background: none; border: none;}
.page-link ul {display: block; position: relative; width: 180px; list-style: none;line-height: 22px; margin: 0; padding: 0; background: rgba(255,255,255,0.92); z-index: 102;}
.page-link li {display: block; padding: 4px 15px; color: #FF5B6E; font-size: 15px; font-weight: bold;}
.page-link a { display: block; color:#3D5371; text-decoration: none; font-size: 15.5px; font-weight: normal;letter-spacing: 2px;}
.page-link a span {display: block; color: #729DFC; font-size: 14px;  line-height: 20px; margin: 0 0 1px 0; letter-spacing: 0;}
.page-link a span aside { display: inline-block; color: #FF61AE; margin: 0 1px 0 0;}
.page-link a span.space-s {letter-spacing:-1px;}
.page-link a:hover { color: #FF6699;}

main { display: block; position: relative; overflow: hidden;}
main img { width: 840px; margin: 0 30px 0 0;}
section {margin: 0 12px 15px 12px; padding: 0;}

footer { margin: 0 12px 40px 12px;}
footer span { display: block; color: #777;}
footer span span { display: inline-block;}
footer span span.pc { display: none;}
footer span span.mobile a { color:#777;}
footer span.company { padding: 5px 0; font-size: 18px;}
footer span.address { padding: 0 0 5px 0; font-size: 16px;}
footer span.register { padding: 0 0 5px 0; font-size: 15px;}
footer span.tel { padding: 0 0 10px 0; font-size: 16px;}
footer span.credit { padding: 0 0 10px 0; font-size: 15px;}

/*-------------*/
article { margin: 0 auto; width: 100%; line-height: 22px; position: relative; height: 185px;}
article img {}
.thummap {display: block; width: 130px;opacity: 0.85; position: absolute; top: 18px; right:70px; border: 2px solid #fff; box-shadow:5px 4px 15px 3px rgba(0,50,100,0.3); z-index:100;}
.thummap img { width: 100%;}
.thummap:hover {opacity:1; border: 2px solid #FFCDBA; box-shadow: none;}

div#p01, div#p02,div#p03,div#p04 { position: absolute; top: 0; left:0 ; z-index:99;}


div#p01 { animation: fadeIn1 25s ease 0s infinite normal; background-image: url('image/top1.jpg');background-position: center top; background-size:cover; width:100%; height:185px;  }
@keyframes fadeIn1 {
    0%,8% { opacity:1;}
    24%,85% { opacity:0;}
    100%,100% { opacity:1;}
}

div#p02 { animation: fadeIn2 25s ease 0s infinite normal; background-image: url('image/top2.jpg'); background-position: center top; background-size:cover; width:100%; height:185px;}
@keyframes fadeIn2 {
    0%,8% { opacity:0;}
    24%,30% { opacity:1;} 
    45%,100% { opacity:0;}
}

div#p03 {animation: fadeIn3 25s ease 0s infinite normal; background-image: url('image/top3-sample-12-1.jpg'); background-position: right top; background-size:cover; width:100%; height:185px;}
@keyframes fadeIn3 {
    0%,30% { opacity:0;}
    45%,55% { opacity:1;}
    70%,100% { opacity:0;}
}

div#p04 {animation: fadeIn4 25s ease 0s infinite normal; background-image: url('image/top9.jpg'); background-position: left top; background-size:cover; width:100%; height:185px;}
@keyframes fadeIn4 {
    0%,55% { opacity:0;}
    70%,100% { opacity:1;}
    100%,100% { opacity:1;}
}

article span {font-size: 28px; font-weight: bold; line-height: 40px; text-shadow: 1px 1px 10px rgba(255,255,255,0.95);}
article span img { width: 350px;}
div#p01 span { color: #8F6B5D; color: #F6F6F6;  position: absolute; top: 32px; left: 3.5%; letter-spacing:2px;text-shadow: 1px 1px 9px rgba(20,50,140,0.99);}
div#p02 span { color:#5B4708; position: absolute; top: 32px; left: 3.5%; letter-spacing:2px;}
div#p03 span { color: #558BCA; color:#8F6B5D; position: absolute; top: 32px; left: 3.5%; letter-spacing:2px;}

/*----*/
section { margin: 0; padding: 0; border-bottom: 1px solid #DADEE6; position: relative;}
section.top{ margin: 0; padding: 0; border-bottom: 1px solid #DADEE6; position: relative;background: #fff;}


section ul { display: block; width: 94%; margin: 0; padding: 10px 3% 10px 3%;background-image: linear-gradient(-225deg, #fff 0%, #eee 100%); }
section ul li { display: block; padding:0; vertical-align: top;}
section ul li.photo { padding-top: 35px; width: 100%;}
section ul li.text { padding: 0;}
section ul li.photo img { width: 100%; max-width: 200px;}
section ul li h3 { position: absolute; top: 10px; left:3,5%; margin: 0; padding: 0; font-size: 19px; font-weight: normal; color: #999; letter-spacing: 2px;}
section ul li.text p {}
section ul li.text p b { display: block; margin: 0 0 10px 0; font-size: 18px; color: #888;}
section ul li.text p img { width: 40%; margin: 8px 2% 0 0;}
section ul li.text a {}


section ul li.policy span {display: block;margin: 0; color: #444; line-height: 23px;}
section ul li.policy span b { display: block; color: #888;font-size: 18px; margin: 10px 0 3px 0;}
section ul li.policy span span { display: inline-block; font-size: 20px; margin: 3px 0;}
section ul li.policy span a { display: inline-block; margin: 7px 0; padding: 3px 10px; color: #fff; background-image: linear-gradient(180deg, #48c6ef 0%, #9AB3EF 49%, #94AFE7 50%, #6289D7 100%); text-decoration: none;}


section.business {background-image: linear-gradient(180deg, #5D9FFF 0%, #B8DCFF 48%, #3D7FFF 100%);background:#AAD5EF; background:#d9e9f8; }
section.business ul.upper { display: block; padding-top: 5px; padding-bottom: 10px; margin: 0; border-bottom: 1px solid #fff; background: transparent;}
section.business ul.upper li { display: block; position: relative;}
section.business ul.upper li.leftside { padding: 0; color: #fff;color:#444;  font-size: 16px;}
section.business ul.upper li.leftside h3 { position: relative; margin: 0 0 15px 0; padding: 0; font-size: 20px; font-weight: normal; color: #fff; color:#444; line-height: 20px;}
section.business ul.upper li.leftside b { display: block; padding: 10px 0; font-size: 17px; color: #fff;color:#444; }
section.business ul.upper li.rightside span { display: inline-block; width:30%; margin: 2px 1% 0 0; color: #fff; color:#444;  font-size: 18px;}
section.business ul.upper li.rightside span img { width: 100%; margin: 3px 0 0 0;}
section.business ul.lower { padding-top: 10px; padding-bottom: 12px; margin: 0; background: transparent;}
section.business ul.lower li { display: block; position: relative; padding: 0 0 14px 0;color: #fff;color:#444; }
section.business ul.lower li.photo img { width: 200px; padding: 0; color: #fff;color:#444; }
section.business ul.lower li.photo span { display: block; margin: 5px 0 0 0; padding: 0; color: #fff;color:#444;  font-size: 18px;}

section ul.recruit li { padding: 0;}
section ul.recruit li h3 { position: relative;}
section ul.recruit li.photo img { width: 200px;}
section ul.recruit li.text a { display: inline-block; width: 140px; margin: 10px 0 0 0; padding: 3px 0 2px 0; background-image: linear-gradient(180deg,#F4604C 0%, #FFA99F 48%, #FF719A 100%); text-align: center; text-decoration: none; color: #fff; font-size: 17px; border-radius:10px; text-shadow:0 1px 5px #731B1A;}

/*----*/
main article.page-head img { height: 150px;}
main article.page-head img.pc { display:none;}

section.page-main {padding: 0 8px;}
section.page-main div {padding: 10px 20px; font-size: 27px; color: #bbb;}
section.page-main ul { display: block; width: 98%; padding: 0 1% 20px 1%; margin: 0;}
section.page-main ul li { display: block;}
section.page-main ul li.top {}
section.page-main ul li.top span {display: block; padding: 10px 0 8px; font-size: 16px; color:#777;}
section.page-main ul li.top span.nomobile {display: none;}

section.page-main ul li.top-company {}
section.page-main ul li.top-company span {display: block; padding: 10px 0 8px; font-size: 16px; color:#777;}
section.page-main ul li.top-company span.nomobile {display: none;}

section.page-main ul li img { width: 70%; max-width: 270px; margin: 0 0 8px 0;}
section.page-main ul li img.tate { display: block;}
section.page-main ul li img.large { width:100%; max-width:400px; display: block;margin: 0 0 25px 0;}

section.page-main ul li img.policy-new { width:100%; max-width:400px; display: block;margin: 0 0 5px 0;}
section.page-main ul li span.policy-new { display:block; padding: 15px 10px; font-size:18px; line-height: 30px;}
section.page-main ul li span.policy-new h3 { position: relative;display: block; font-size: 30px; margin: 15px 0 35px 0; padding: 0 5px;}
section.page-main ul li span.policy-new b {display: block; font-size: 20px; margin: 0 0 10px 0; padding: 0 5px;}
section.page-main ul li span.policy-new span {display: block;font-size:24px; line-height: 40px;}

section.page-main ul li div.wrap1 { margin: 0; padding: 0; border-left: 1px solid #C8DAF3; border-right: 1px solid #C8DAF3;}
section.page-main ul li div.wrap1 div { margin: 0; padding: 10px 15px; color:#444; font-size: 17px; border-bottom: 1px solid #C8DAF3;}
section.page-main ul li div.wrap1 div.a { color: #fff; padding: 7px 15px; background: #7BA0E7;}

section.page-main ul li.qanda { padding: 0 5px;}
section.page-main ul li.qanda span { display: block;padding: 12px 7px 9px 7px; color: #fff; font-weight: bold; background: #68A6FF; margin: 0 -7px 17px -7px; border-radius:4px;}
section.page-main ul li a { display: inline-block; margin: 20px 0; padding: 4px 10px; color: #fff; background-image: linear-gradient(180deg, #48c6ef 0%, #48c6ef 49%, #8fa6f6 50%, #6f86d6 100%); text-decoration: none;}

section.page-main div.company { width: 90%; margin: 0 5%; padding: 0;}
section.page-main div.company img { width: 46%; margin: 7px 5px; padding: 0; border: 1px solid #bbb;}
section.page-main div.company img.tate { width: 35%;}

.googlemap { width: 100%; height: 300px; margin: 0 0 30px 0; padding: 0; border: 0;}

/*----*/

ul li span.caption { display: block;padding: 0 0 12px 0; color:#888; font-size: 19px; font-weight: bold; border-bottom: 1px solid grey;}
ul li span.comment { display: block;padding: 15px 0 20px 0; color:#666; font-size: 17px; font-weight: normal;}
ul li span.comment-s { display: block;padding: 15px 0 20px 0; color:#666; font-size: 16px; font-weight: normal;}

/*------general-------*/

.general div.wrap2 { padding: 0; margin: 0 5px;}
.general div.wrap2 div { color: #444; font-size: 17px; padding: 0 0 2px 0; border-bottom: 1px solid #bbb;}
.general div.wrap2 div.left-w { font-weight: bold; color:#4B9AF8; padding: 2px 0 0 0; border: none;}
.general span { display: block; color: #5171CA; font-size: 20px; font-weight: bold; padding: 0 0 10px 0; margin: 0 0 15px 0; border-bottom: 1px solid #999;}

/*------engineerring-------*/

section ul li form.biz { display: inline-block; width:45%; max-width: 200px;}
section ul li form.site { display: inline-block; width:45%; max-width: 200px;}

section ul li button.ue {display:inline-block; font-size: 15px; color: #444; border: 1px solid grey; padding: 3px; margin: 4px 0; text-align: center; background: #eee; cursor: pointer;}
section ul li button.ue img { display: block; width: 100%; margin: 4px 0 0 0;}

/*---reference---*/
ul.reference {display: block; padding:0 0 25px 0; width:98%; margin: 10px 1%; border-bottom: 1px solid #999;}
ul.reference li {display: block; padding: 0;}

ul.reference li span.list1 { display: block; padding: 0 0 15px 12px; font-size: 18px; font-weight: bold;}
ul.reference li span.list2 { display: block; padding: 0 0 15px 15px; font-size: 15px;}
ul.reference li span.list3 { display: block; padding: 0 0 15px 15px; margin: 0 0 25px 0; color:#336666; font-size: 14px; border-bottom: 1px solid grey; display:none;}

ul.reference li span.list { display: block; padding:0 10px; margin: 0; vertical-align: top; color:#555; font-size:17px; position:relative; border: none;}
ul.reference li span.list img {width: 100%; max-width:400px; border: 1px solid #ccc; display:block; margin: 0;}
ul.reference li span.list input { padding: 10px 0 8px 0; margin: 0 0 30px 0; width: 100%; max-width:400px; text-align: center; color: #fff; border: 1px solid #EF3224; background:#EF6A32; cursor: pointer; font-size: 15px;}

ul.reference li span.list-test { display: inline-block; width:47%; max-width:200px; padding:0 0 22px 0; margin: 0; vertical-align: top; text-align:left; color:#555; font-size:21px; position:relative; border: none; overflow:hidden;}
ul.reference li span.list-test span { display: block; height: 60px; font-size: 14px; padding:5px;}
ul.reference li span.list-test img {width: 100%; border: 1px solid #ccc; margin: 0;}
ul.reference li span.list-test input { color: #fff; border: 1px solid #61A688; background: #2E804B; cursor: pointer; margin: 25px 0 0 0;}

ul.reference li span.detail { display: block;font-size:18px; padding:12px 0; font-weight: bold;}
ul.reference li span.detail1 { display: block;font-size:16px; padding:0 0 2px 0;}

ul.reference li div.photo { display: block;}
ul.reference li div.photo div { padding: 8px;}
ul.reference li div.photo div img.detail { display: block; width: 100%; max-width:400px; margin:8px 0 3px 0;}

ul.reference li.right-end { display: block; position:relative; padding:0;}

ul.reference li.right-end button { width: 160px; margin: 20px 0 0 40px; padding: 10px 15px; position: absolute; bottom: 4px; right: 15px; font-size:15px;}

img.group {width:100%; display: block;margin: 0 0 50px 0;}

.iso {width:100%; max-width:500px;padding:20px;}

/*---Mail---*/
section.page-main div.email-new { font-size: 15px; padding: 5px; color:#666; width:98%; max-width: 420px;}
section.page-main div.email-new p.title-f {}
section.page-main div.email-new ul { display: block; list-style: none; margin:0 0 30px 0; padding:0; border-top: 1px solid grey;}
section.page-main div.email-new ul li { display: block; border-width: 0 1px 1px 1px; border-style: solid; border-color: grey; padding: 12px 10px;}
section.page-main div.email-new ul li span { display: block;}
section.page-main div.email-new textarea { font-size: 15px;width: 280px; height: 150px;}

/*--SCROLLTOP--*/
.top-arrow { display: inline-block; position:fixed; bottom:40px; right:10px; color: #777; font-size: 17px; text-align: center; border:1px solid grey; width:30px;height: 23px; border-radius:15px; background: rgba(255,255,255,0.7); line-height: 18px; padding: 7px 0 0 0;}
.scroll-to-top-not-display { display: none;}

/*--- NEWS top ---*/
div.news div.wrap4 { padding: 0; margin: 0;}
div.news div.wrap4 div { padding: 0;}
div.news div.wrap4 div img { width: 200px;}
div.news div.wrap4 div img.shinbun { width: 300px;}

@media screen and (min-width: 700px) {
.wrap div.d-mobile { display: none;}
.wrap div img.p-mobile { display: none;}
.wrap div img.p-pc { display: block;}
}
@media screen and (max-width: 350px) {

}