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 {width: 90%; padding: 0 5% 5px 5%; background: #fff; font-size: 18px; font-weight: bold; color:#bbb; background-image: linear-gradient(180deg, #fff 0%, #fff 38%, #fff 100%);position: relative; height: 88px;}
header a.map { position: absolute; left:29%; top: 15px; color:#3268D0; display:none;}
header a.house { position: absolute; left:31%; top: 15px; color:#3268D0; display:none;}

header h1 { display: inline-block; padding: 0; margin: 0; position: absolute; top:8px; left: 5%;}
header img.logo { display: block; width: 215px; margin: 0 0 4px 0; position: absolute; top: 39px; left: 0;}
header img.group { display: block; width: 320px; margin: 0;}
h1 {display:inline-block; margin: 0; padding: 0 0 0 40px; color:#FBB37E; font-size: 15px;}

/*----*/
#open-menu,#close-menu,.close {display: none;}

nav.page-link {display: block; width: 58%; position: relative; margin: 0 8% 0 37%; padding: 40px 0 0 0; z-index: 100;}
nav.page-link button { display: none;}
.page-link ul {display:table; width: 100%; margin: 0; padding: 0; line-height: 22px;}
.page-link li {display: table-cell; width: 14%; padding: 0; color: #FF5B6E; font-size: 15px;}
.page-link a { display: block; color:#3D5371; text-decoration: none; text-align: center; font-weight: normal;letter-spacing: 3px; font-size:18px; letter-spacing:1px; font-weight: bold; color:#8f8f8f;}
.page-link a span {display: block; color: #729DFC; font-size: 15px;  line-height: 20px; margin: 0 0 2px 0; letter-spacing: 0; font-weight:normal;}
.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;}

/*-------------*/
article { margin: 0 auto; width: 100%; line-height: 22px; position: relative;}
article img { width: 100%;}
.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 { position: absolute; top: 0; left:0 ; z-index:99; width: 100%;}
div#p04 { position: relative;}

div#p01 { animation: fadeIn1 25s ease 0s infinite normal; background-image: url('image/top1.jpg'); background-size: contain;}
@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-size: contain;}
@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-size: contain;}
@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/top6.jpg'); background-size: contain;}
@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;}

/*----*/
main { display: block; position: relative; background: #eee;}
main img { width: 100%; margin-bottom: 0; z-index: 999;}

/*----*/
section { margin: 0; padding: 0;background-image: linear-gradient(180deg, #E2E2E2 0%, #fff 38%, #E2E2E2 100%); }
section.top{ margin: 0; padding: 0;background-image: linear-gradient(180deg, #E2E2E2 0%, #fff 38%, #E2E2E2 100%);background: #fff; }

section ul { display: table; width:90%; padding: 28px 5%; margin: 0;}
section ul li { display: table-cell; padding:0; vertical-align: top;}

section ul li.photo { width: 32%;}
section ul li.text {}

section ul li.photo img { width: 95%;}
section ul li.text h3 { margin: 8px 0 0 5.8%; padding: 0; font-size: 25px; font-weight: normal; letter-spacing: 2px; color:#7a7a7a; text-shadow:0 1px 5px #ccc;}
section ul li.text p { margin: 18px 0 0 5%; color: #444; line-height: 28px;}
section ul li.text p b { display: block; margin: 0 0 10px 0; font-size: 18px; color: #888;}
section ul li.text a {}
section ul li.text img { width: 25%; margin: 10px 10px 10px 0;}

section ul li.policy span {display: block;margin: 18px 0 0 5%; color: #444; line-height: 28px;}
section ul li.policy span b { display: block; color: #888;font-size: 21px; margin: 0 0 10px 0;}
section ul li.policy span span { display: block; font-size: 27px; margin: 8px 0;}
section ul li.policy span a { display: inline-block; margin: 10px 0; padding: 4px 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%,#5D9FFF 30%, #B8DCFF 58%, #3D7FFF 100%); background:#d9e9f8;}
section.business ul.upper { padding-top: 24px; padding-bottom: 22px; margin: 0; border-bottom: 1px solid #fff; }
section.business ul.upper li.leftside { width: 30%; padding: 0 3% 0 0; color: #444; color:#444; font-size: 18px;}
section.business ul.upper li.leftside h3 { margin: 0 0 15px 0; padding: 0; font-size: 25px; font-weight: normal; letter-spacing: 2px;}
section.business ul.upper li.leftside b { display: block; padding: 0 0 10px; font-size: 19px;}
section.business ul.upper li.rightside span { display: inline-block; width: 30%; margin: 2px 1% 0 0; color: #fff; color:#444; font-size: 19px;}
section.business ul.upper li.rightside span img { width: 100%; display: block; margin: 5px 0 0 0;}

section.business ul.lower { padding-top: 27px; padding-bottom: 17px; margin: 0;}
section.business ul.lower li.photo { width: 23%; padding: 0 1%; color: #444; color:#444;}
section.business ul.lower li.photo img { width: 100%;}
section.business ul.lower li.photo span { display: block; margin: 15px 0 2px 0; padding: 0; color: #fff; color:#444; font-size: 20px;}

section ul.recruit { margin: 0; background: #F0EFE2;}
section ul.recruit li.photo { width: 20%; padding: 17px 0 0 0;}
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;}


/*----*/
footer { width: 90%; margin: 40px 5% 40px 5%;}
footer span { display: block; color: #777;}
footer span span { display: inline-block;}
footer span span.pc {}
footer span span.mobile { display: none}

footer span.company { padding: 5px 0; font-size: 20px;}
footer span.address { padding: 0; font-size: 16px;}
footer span.register { padding: 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;}

/*----*/
main article.page-head { width: 100%; }
main article.page-head img.mobile { display: none;}

section.page-main div {padding: 30px 0 10px 5%; font-size: 40px; color: #bbb;}
section.page-main ul { display: table; width: 90%; padding: 40px 5%; margin: 0;}
section.page-main ul li { display: table-cell;}
section.page-main ul li.top { width: 25%; padding: 0 4% 0 0; display: none;}
section.page-main ul li.top img { width: 100%; margin: 10px 0 0 0;}
section.page-main ul li.top span.nomobile { width: 100%; max-width:280px;}
section.page-main ul li.top span {display: block; width: 100%; padding: 3px 0 0 0; font-size: 16px; color:#777;}
section.page-main ul li.top span b { display: inline-block; margin: 0 0 15px 0;}

section.page-main ul li.top-company { width: 25%; padding: 0 4% 0 0;}
section.page-main ul li.top-company img { width: 100%; margin: 10px 0 0 0;}
section.page-main ul li.top-company span.nomobile { width: 100%; max-width:280px;}
section.page-main ul li.top-company span {display: block; width: 100%; padding: 3px 0 0 0; font-size: 16px; color:#777;}
section.page-main ul li.top-company span b { display: inline-block; margin: 0 0 15px 0;}


section.page-main ul li img { width: 24%;}
section.page-main ul li img.tate { width: 16%;}
section.page-main ul li img.large { width:100%; max-width:800px; display: block;margin: 0 0 50px 0;}

section.page-main ul li img.policy-new { width: 500px; float: left;}
section.page-main ul li span.policy-new { display:block; padding: 0 0 0 540px; font-size:20px; line-height: 35px;}
section.page-main ul li span.policy-new h3 {display: block; font-size: 30px; margin: 25px 0 35px 0; padding: 0 5px;}
section.page-main ul li span.policy-new b {display: block; font-size: 22px; margin: 0 0 30px 0; padding: 0 5px;}
section.page-main ul li span.policy-new span {display: block;font-size:24px;}

section.page-main ul li div.wrap1 { display: grid; grid-template-columns:1fr 4fr; margin: 0; padding: 0; border-top: 1px solid #C8DAF3; border-right: 1px solid #C8DAF3;}
section.page-main ul li div.wrap1 div { margin: 0; padding: 10px 20px; color:#444; font-size: 17px; border-bottom: 1px solid #C8DAF3;}
section.page-main ul li div.wrap1 div.a { color: #fff; background: #7BA0E7;}

section.page-main ul li.qanda { padding: 0 12px;}
section.page-main ul li.qanda span { display: block;padding: 12px 12px 9px 12px; color: #fff; font-weight: bold; background: #68A6FF; margin: 0 -12px 18px -12px; border-radius:8px;}
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: 95%; margin: 0 5%; padding: 0; font-size:0px:}
section.page-main div.company img { width: 22%; margin: 6px 4px; padding: 4px; border: 1px solid #bbb; display:inline-block;}
section.page-main div.company img.tate { width: 17%;}

/*----*/
.googlemap { width: 100%; height: 300px; margin:0 0 40px 0; padding: 0; border: 0;}

/*------------------------*/

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

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

.general div.wrap2 { display: grid; grid-template-columns: 1fr 4fr; padding: 0; margin: 0;}
.general div.wrap2 div { color: #444; font-size: 18px; padding: 3px 0;}
.general span { display: block; color: #5171CA; font-size: 21px; font-weight: bold; padding: 0 0 10px 0; margin: 0 0 15px 0; border-bottom: 1px solid #999;}
.general span { display: block; color: #5171CA; font-size: 21px; 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:25%;}
section ul li form.site { display: inline-block; width:19%;}
section ul li button.ue {display:inline-block; font-size: 18px; color:#444; border: 1px solid grey; padding: 10px; margin: 20px 0; text-align: center; background: #eee; cursor: pointer;}
section ul li button.ue img { display: block; width: 100%; margin: 10px 0 0 0;}

/*---reference---*/
ul.reference {display: table; padding:0 0 25px 0; width:90%; margin: 20px 5%; border-bottom: 1px solid #999;}
ul.reference li {display: table-cell; padding: 0;}
ul.reference li.right-end { display: table-cell; position:relative; padding:0;}

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

ul.reference li span.list { display: block; padding:40px 0 0 380px; margin: 0; vertical-align: top; text-align:left; color:#555; font-size:21px; position:relative; border: none;}
ul.reference li span.list img {width: 300px; position:absolute;left:0; top:20px; border: 1px solid #ccc;}
ul.reference li span.list input { color: #fff; border: 1px solid #61A688; background: #2E804B; cursor: pointer; margin: 25px 0 0 0;}

ul.reference li span.list-test { display: inline-block; width:24%; padding:0 0 25px 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: 15px; 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:21px; padding:30px 0;}
ul.reference li span.detail1 { display: block;font-size:18px; padding:0 0 5px 0;}

ul.reference li div.photo { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 1000px;}
ul.reference li div.photo div { padding: 10px;}
ul.reference li div.photo div img.detail { width: 100%; margin:10px 0 3px 0;}
ul.reference li.right-end { position: relative; width: 160px;}
ul.reference li.right-end button {width: 150px;margin: 0 0 0 40px; padding: 10px 15px; position: absolute; bottom: 20px; right: 0; font-size:16px;}


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

img.iso { display:block; width:400px; padding:30px;}

/*---Mail---*/
section.page-main div.email-new { font-size: 15px; color: #666; margin: 0; padding: 0 15px;}
section.page-main div.email-new p.title-f { color: #666;font-size: 15px; margin: 0; padding: 15px 0 ;}
section.page-main div.email-new ul { display: block; list-style: none; margin:0 0 30px 0; padding:0; width:90%; max-width: 700px; border-top: 1px solid #666;}
section.page-main div.email-new ul li { font-size: 17px; display: block; border-width: 0 1px 1px 1px; border-style: solid; border-color: #666; padding: 17px 20px;}
section.page-main div.email-new ul li span { font-size: 16px; color: #666; display: inline-block; width: 200px;}
section.page-main div.email-new ul li span.cnf-area { display: inline-block; width: 400px;}
section.page-main div.email-new textarea { font-size: 14px; width: 490px; height: 150px;}


div.news div.wrap4 { display:grid; grid-template-columns:1fr 1.6fr 2.85fr;}
div.news div.wrap4 div { padding: 0;}
div.news div.wrap4 div img {width: 100%;}
div.news div.wrap4 div img.small {}



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

@media screen and (max-width: 1500px) {

}

@media screen and (max-width: 1300px) {

nav.page-link {display: block; width: 74%; position: relative; margin: 0 1% 0 24%; padding: 40px 0 0 0; z-index: 100;}
nav.page-link li { padding: 0;}
.page-link a { font-size: 15px; padding: 0;}
.page-link a span {display: block; color: #729DFC; font-size: 13px; 
}