@charset "UTF-8";
/* CSS Document */

/* 共通 */
html{font-size: 62.5%;}
body{
	font-size:1.6rem;/* 16px*/
	color: #111;
	font-family: 'Noto Sans JP', sans-serif;
}
a{transition: 0.3s;}

header{
	margin:0 40px 24px;
	display: flex;
	justify-content: space-between;
}
.corp_logo{margin-top:24px;}
.menu_top, .menu_bottom{display: flex; font-size: 1.4rem;}
.menu_top{justify-content: flex-end;}
.menu_top_recruit a,.menu_top_contact a{display: block; width:120px; text-align: center; color: #fff; padding:8px 0; border-radius: 0 0 6px 6px;}
.menu_top_recruit a{background: #0D6599; margin-right:8px;}
.menu_top_contact a{background: #ED7B18;}
.menu_top_recruit a:hover,.menu_top_contact a:hover{opacity: 0.8;}
.menu_bottom{width:600px; justify-content: space-between; margin-top:16px; font-weight: bold;}
.menu_bottom a{padding-bottom:28px;}
.menu_bottom a:hover{border-bottom:5px solid #0D6599; color:#0D6599;}
.menu_bottom .current{border-bottom:5px solid #0D6599; color:#0D6599; padding-bottom:28px; margin-bottom:-28px;}

.inner_1060{max-width:1060px; width:90%; margin:0 auto;}
.title_underbar{font-size: 3.2rem; text-align: center; font-weight: bold;}
.title_underbar::after{
	content:"";
	display:block;
	width:60px;
	height:6px;
	background: #0D6599;
	border-radius: 100px;
	margin:40px auto;
}
footer{
	background: #0D6599;
	text-align: center;
	color: #fff;
	padding:40px 0;
}
footer svg{margin-bottom:16px;}
footer p{line-height:1.8em;}
footer a{margin:16px auto; font-size: 1.4rem; display: block; width:180px; text-decoration: underline;}
footer a:hover{text-decoration: none; opacity: 0.8;}
footer small{font-size:1.2rem;}



/* トップページ */
.hero_img{
height:55vh;
position: relative; 
background-size: cover;	
}
.top_read{
	position: absolute;
	top: 50%;
    right: 10%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	color: #fff;
}
.top_read h2{font-size: 4.8rem; font-weight: bold;}
.top_read p{font-size:2rem; margin-top:24px; line-height: 1.8em;}

.top_section_01{margin-top:120px; position: relative;}
.top_section_01_bg{background: #f3f3f3; position: absolute; top:0; right:0; height:90%; width:84%; z-index: -2;}
.top_section_01_img{background: url("../images/top_section_01.png"); background-size: cover; position: absolute; bottom:64px; right:0; ; width:630px; height:486px; z-index: -1;}
.top_section_01 h2{text-align: center; padding-top:80px; font-size: 4.8rem; font-weight: bold; margin-bottom:64px;}
.top_section_01 h2::before, .top_section_01 h2::after{
	content:url(../images/inyouhu.png);
	display: inline-block;
	position: absolute;
	margin-top:-24px;
}
.top_section_01 h2::before{margin-left:-40px;}
.top_section_01 h2::after{margin-right:-40px;}
.top_section_01 ul li{display: inline-block; padding:20px 32px; background: #fff; border:4px solid #ddd; margin-bottom:8px;}
.top_section_01 ul li:nth-child(even){margin-left:16px;}
.top_section_01 ul li:last-child{margin-bottom:40px;}
.top_section_01_end{position: relative; text-align: center; color: #fff; font-size: 2rem; line-height: 1.8em; padding:24px 0;}
.top_section_01_end_bg{background: url("../images/top_section_01_end_bg.png"); background-size: cover; background-position: right; position: absolute; top:0; left:0; width:96%; height:100%; z-index: -1;}

.top_section_02{background: #F3F3F3; padding:80px 0; margin-top:120px;}
.top_section_02 p{text-align: center; line-height: 1.8em;}
.construction_menu ul{display:flex; flex-wrap: wrap; justify-content: center; margin-top:40px;}
.construction_menu ul li{ margin:0; padding:0; border-left:1px solid #ddd; border-bottom:1px solid #ddd; line-height: 0; width:265px;}
.construction_menu ul li div{height:200px; overflow: hidden; background: #000; width:100%;}
.construction_menu ul li .construction_title{background: #fff url("../images/arrow.png") no-repeat right; height:60px; line-height: 58px; padding-left:1em;}
.construction_menu ul li:nth-child(1),.construction_menu ul li:nth-child(2),.construction_menu ul li:nth-child(3),.construction_menu ul li:nth-child(4){border-top:1px solid #ddd;}
.construction_menu ul li:nth-child(4), .construction_menu ul li:nth-child(8){border-right:1px solid #ddd;}
.construction_menu ul li a img{transition: 0.3s; width:100%;}
.construction_menu ul li a:hover img{transform: scale(1.1); opacity: 0.8;}

.top_section_03{background: url("../images/top_faq.png") no-repeat bottom -1px left 8px #0D6599; position:relative; padding-bottom:80px;}
.top_section_03 h3{height:180px; width:30%; min-width:330px; color:#fff; background: #222222; line-height: 178px; font-size: 3.2rem; text-align: center; font-weight: bold; position: absolute; top:0; left:0;}
.top_section_03 ul{padding-top:52px; margin-left:320px;}
.top_section_03 ul li a{background: #fff url("../images/arrow-gray.png") right 24px  center no-repeat; margin-bottom:16px; display: block; height:90px; line-height: 88px; padding-left:2em;}
.top_section_03 ul li a:hover{margin-left:8px;}
.top_section_03_btn{background: #fff; color:#0D6599; border-radius: 100px; width:300px; height:60px; line-height: 58px; display: block; text-align: center; margin:40px auto 0;}
.top_section_03_btn:hover{opacity:0.8; margin:44px auto -4px;}

.top_section_04{padding:80px 0;}
.top_section_04 .inner_1060{display: flex; justify-content: space-between;}
.top_section_04 h3{font-size:2.4rem; font-weight: bold;}
.top_section_04 .news_btn{background: #0D6599; color: #fff; width:200px; height:48px; line-height: 46px; display: block; text-align: center; border-radius: 100px; margin-top:40px;}
.top_section_04 .news_btn:hover{margin-top:44px; opacity: 0.8;}
.top_section_04 .left{width:290px;}
.top_section_04 .right{width:770px;}
.top_section_04 .right ul li {border-bottom:1px solid #ccc; }
.top_section_04 .right ul li:last-child{border:none;}
.top_section_04 .right ul li a{padding:16px 0; display:flex;　display: -webkit-flex;
 -webkit-align-items: center; align-items: center; background: url("../images/arrow-gray.png") no-repeat right 16px center;}
.top_section_04 .right ul li a img{margin-right:32px;}
.top_section_04 .right ul li a:hover{margin-left:8px;}

.top_section_05{display: flex;}
.top_section_05 .top_corp_link, .top_section_05 .top_recruit_link{width:50%; position: relative;}
.top_section_05 .top_corp_link a{width:100%; height:220px; background:url("../images/top_corp.png") right bottom no-repeat; display: block;}
.top_section_05 .top_recruit_link a{width:100%; height:220px; background:url("../images/top_recruit.png") right bottom no-repeat; display: block;}
.top_section_05 h3{position: absolute; left:0; top:20px; background: #0D6599; width:200px; height:80px; color: #fff; font-size:2.4rem; line-height: 78px; text-align: center;}
.top_corp_link .top_section_05_bg{position: absolute; left:0; top:20px; background: #f7f7f7; width:100%; height:202px; z-index: -2; transition: 0.3s;}
.top_recruit_link .top_section_05_bg{position: absolute; left:0; top:20px; background: #eee; width:100%; height:202px; z-index: -2; transition: 0.3s; transition: 0.3s;}
.top_section_05_arrow{position: absolute; right:0; bottom:-1px; background: url("../images/arrow.png") no-repeat; height:60px; width:60px;}
.top_corp_link a:hover .top_section_05_bg, .top_recruit_link a:hover .top_section_05_bg{background: #d7d7d7;}

.contact_link{
	display: block;
	max-width:880px;
	width:90%;
	height:270px;
	margin:40px auto;
	border:10px #eee solid;
	padding:32px 0 0 56px;
	background: url("../images/contact_link_bg.png") no-repeat bottom -5px right 40px;
}
.contact_link:hover{margin:44px auto 36px; opacity: 0.8; border:10px #0D6599 solid;}
.contact_link h3{font-size: 2.4rem; font-weight: bold;}
.contact_link .phone_number{font-size:3.8rem; color: #0D6599; font-weight: bold;}
.contact_link .phone_number span{font-size:1.4rem; padding-right:8px;}
.contact_link .contact_time{}
.contact_link .contact_btn{width:280px; height:60px; background: #ED7B18; line-height: 58px; text-align: center; border-radius: 100px;  color: #fff; margin-top:24px;}



/* サービストップ*/
.breadCrumb{
	background: #eee;
	height:48px;
	line-height: 46px;
}
.breadCrumb ul{display: flex; width:90%; max-width:1060px; margin:0 auto; font-size: 1.4rem;}
.breadCrumb ul li a{color: #999;}
.breadCrumb ul li a::after{
	content: "/";
	padding:0 1em; 
}
.breadCrumb ul li a:hover{color:#0D6599;}
.breadCrumb ul li:last-child{font-weight: bold;}
.layer02_01{height:280px; position: relative; margin-bottom:80px;}
.layer02_01 h1{font-size:3.2rem; font-weight:bold; margin-bottom:40px; padding-top:80px; max-width:48%;}
.layer02_01 p{max-width:48%;}
.layer02_01 p, .layer02_02 p{line-height: 1.8em;}
.layer02_01 .page_img{position: absolute; top:0; right:0; width:50%; height:280px;}

.title_underLongbar{font-size: 2.4rem; color:#0D6599; border-bottom:2px solid #0D6599; font-weight: bold; padding-bottom:16px; margin-bottom:16px;}
.layer02_02{padding-bottom:80px; border-bottom:1px solid #ddd;;}

/* サービス下層*/
.layer03_01{margin-top:80px; text-align: center; margin-bottom:80px;}
.layer03_01 p, .layer03_02 p{line-height: 1.8em;}
.layer03_02 .service_box{border-bottom:1px solid #ddd;}
.layer03_02 .contents_big{padding:32px 0; display: flex; justify-content: space-between;}
.layer03_02 .contents_big .left{width:49%;}
.layer03_02 .contents_big h3{color:#0D6599; font-size: 2rem; padding-top:8px; margin-bottom:16px; font-weight: bold;}
.layer03_02 .contents_big figure{width:49%;}
.layer03_02 .contents_big figure img{width:100%;}
.layer03_02 .contents_small{display: flex; justify-content: space-between; padding-bottom:32px;}
.layer03_02 .contents_small .contents_small_box{width:31%;}
.layer03_02 .contents_small::after{
  content:"";
  display: block;
  width:31%;
}
.layer03_02 .contents_small .contents_small_box figure,
.layer03_02 .contents_small .contents_small_box figure img{width:100%;}
.layer03_02 .contents_small .contents_small_box h4{font-weight: bold; margin-top:8px;}
.layer03_02 .contents_small .contents_small_box p{margin-top:8px;}

.layer03_02 .workman{
	position: relative;
	background: #eee;
	margin:120px 0 80px;
	padding:32px 32px 32px 240px;
}
.layer03_02 .workman .workmanImg{
	position: absolute;
	background: url("../images/workman.png");
	height:231px;
	width:288px;
	bottom:0;
	left:-10px;
		
}

/* 実例トップ*/
.example_area{display: flex; justify-content: space-between; flex-wrap: wrap;}
.example_area .example_box{width:31%; margin-bottom:40px;}
.example_area::after{
  content:"";
  display: block;
  width:31%;
}
.example_area .example_box h3{font-weight: bold; margin-top:8px;}
.example_area .example_box figure,.example_area .example_box figure img{width:100%;}
.example_area .example_box figure{overflow: hidden;}
.example_area .example_box figure img{transition: 0.3s;}
.example_area .example_box a:hover figure img{transform: scale(1.1); opacity: 0.8;}
.example_area .example_box ul{display: flex; margin-top:8px;}
.example_area .example_box ul li{background: #eee; border-radius: 100px; display: inline-block; margin-right:4px; font-size: 1.4rem; padding:4px 12px;}
.example_area .example_box .example_detail_btn{display: block; background:#0D6599; width:240px; height:48px; line-height: 46px;
margin:24px auto 0; text-align: center; color:#fff; border-radius: 100px; transition: 0.3s;}
.example_area .example_box a:hover .example_detail_btn{opacity: 0.8;}

/* 実例詳細*/
.example_detail_area{text-align: left;}
.example_detail_area figure, .example_detail_area figure img{width:100%;}
.example_detail_area dl{display: flex; flex-wrap: wrap; margin-bottom:32px;}
.example_detail_area dl dt{width:15%; padding:16px; background: #eee; margin-bottom:1px;}
.example_detail_area dl dd{width:85%; padding:16px; margin-bottom:1px;}
.example_detail_area .example_detail_comment{border:5px solid #ccc; padding:24px; background: url("../images/example_workman.png") bottom -1px right -32px no-repeat; min-height:250px;}
.example_detail_area .example_detail_comment h2{font-size:2rem; font-weight:bold; margin-bottom:16px;}
.example_detail_area .example_detail_comment p{width:78%;}

.before_after{display: flex; justify-content: space-between; margin-bottom:16px;}
.before, .after{width:46%;}
.before figure, .after figure, .before figure img, .after figure img{width:100%;}

.before_after p{font-size:2rem; font-weight: bold; margin-bottom:8px;}
.example_img{margin-bottom:80px; }
.before_after_arrow{text-align: center; padding-top:148px;}
.example_totop{display: block;  width:240px; margin:0 auto; height:48px; line-height: 46px; color: #fff; background:#0D6599; text-align: center; border-radius: 100px;}
.example_totop:hover{opacity: 0.8;}

/* 会社概要 */
.message{margin-bottom:80px; display: flex; justify-content: space-between; width:100%;}
.message .left{width:60%; padding-right:16px;}
.message .left h3{font-size: 2rem; padding-top:8px; margin-bottom:16px; font-weight: bold;}
.message .left p{margin-bottom:12px;}
.message figure{width:40%;}
.message figure img{width:100%;}
.basic_list{display: flex; flex-wrap: wrap; line-height: 1.8em;}
.basic_list dt{width:15%; font-weight:bold; border-bottom:1px solid #ccc; padding:24px 0 24px 12px;}
.basic_list dd{width:85%; border-bottom:1px solid #ccc; padding:24px 0;}
.map{margin-top:56px; margin-bottom:80px;}

.recruit_link, .corp_link{background:#eee;}
.corp_link{margin-top:80px;}
.recruit_link a, .corp_link a{display: block; position: relative; transition: 0.3s;}
.recruit_link a:hover, .corp_link a:hover{opacity: 0.8;}
.recruit_link a .left, .corp_link a .left{background:#0D6599; color: #fff; width:60%; padding:24px 40px;}
.recruit_link a .left h2, .corp_link a .left h2{font-size: 2rem; font-weight: bold; margin-bottom:16px;}
.recruit_link a .recruit_btn, .corp_link a .corp_btn{margin-top:24px; width:200px; padding:7px 0 10px; display: block; background: #fff; text-align: center; color:#0D6599; border-radius: 100px; transition: 0.3s;}
.recruit_link a .right{background: url("../images/top_recruit.png") no-repeat center; width:440px; height:222px; position: absolute; bottom:0; right:0;}
.corp_link a .right{background: url("../images/top_corp.png") no-repeat center; width:660px; height:222px; position: absolute; bottom:0; right:0;}

/* 採用情報 */
.recruit_link a .arrow, .corp_link a .arrow{width:60px; height:60px; background:url("../images/arrow.png") bottom right no-repeat; position: absolute; bottom:0; right:0;}

/* よくあるご質問 */
.faq_area{line-height: 1.8em;}
.faq_area dt{background: #f7f7f7; color:#0D6599; padding:24px; font-weight: bold;}
.faq_area dd{padding:16px 0 56px 0;}
.faq_area dd:last-child{padding-bottom:0;}

/* お知らせ */
.news_area{width:100%; max-width:840px; margin:0 auto;}
.news_area li{border-bottom:1px solid #ccc; padding-bottom:24px; margin-bottom:24px;}
.news_area li a{display: flex; flex-wrap: wrap; background: url("../images/arrow-gray.png") right 16px center no-repeat; transition: 0.3s;}
.news_area li a:hover{background: url("../images/arrow-gray.png") right 8px center no-repeat; opacity: 0.8;}
.news_area li a figure{width:160px;}
.news_area li a figure img{
transition: 0.3s;
  width: 160px;
  height: 110px;
  object-fit: cover;
}
.news_area li a div{width:600px; margin-left:24px;}
.news_area li a div time{font-size: 1.4rem; margin:8px 0; color:#0D6599; display: block; font-weight: bold;}
.pagenation{display:flex; justify-content: center; padding:40px 0 0;}
.pagenation li{margin-right:8px;}
.pagenation li:last-child{margin-right:0;}
.pagenation li a, .pagenation .current{display: block; padding:6px 12px;}
.pagenation li a{background: #eee; transition: 0.3s;}
.pagenation .current{background: #0D6599; color:#fff;}
.pagenation li a:hover{background: #0D6599; color:#fff;}
#news_detail time{color: #0D6599; font-weight: bold;}
.news_detail_area{width:100%; max-width:840px; margin:0 auto; padding-bottom:40px;}
.news_detail_area h2{font-size: 2.2rem; color: #0D6599; font-weight: bold; margin-bottom:24px; padding-top:16px;}
.news_detail_area h3{font-size: 1.8rem; font-weight: bold; margin-bottom:24px; padding-top:8px;}

.news_detail_area p{line-height: 1.8em; margin-bottom:32px;}
.news_detail_area p img{max-width:80%;}
.news_link{ background: #f7f7f7; display: flex; justify-content: space-between; padding:12px 24px; max-width:840px; width:100%; margin:0 auto;}
.news_link li a{color: #999; font-size: 1.4rem; transition: 0.3s;}
.news_link li a:hover{color: #0D6599;}
.news_link li:first-child a:before{content: "<"; margin-right:8px;}
.news_link li:last-child a:after{content: ">"; margin-left:8px;}

/* お問い合わせ */
.contact_list{display: flex; flex-wrap: wrap; line-height: 1.8em; width:860px; margin:0 auto; border-top:1px solid #ccc;}
.contact_list dt{width:30%; font-weight:bold; border-bottom:1px solid #ccc; padding:24px 0 24px 12px;}
.contact_list dt span{background: #ED7B18; padding:4px 12px; color: #fff; font-size: 1.2rem; font-weight: normal; margin-left:8px;}
.contact_list dd{width:70%; border-bottom:1px solid #ccc; padding:24px 0;}
.contact_list dd .contact_text{background: #f7f7f7; height:40px; line-height: 38px; border:1px solid #eee; width:96%;}
.contact_list dd textarea{background: #f7f7f7; border:1px solid #eee; width:96%;}
.contact_area p{text-align: center; margin-top:32px; font-size: 1.4rem;}
.contact_area p a{color:#0D6599; text-decoration: underline; transition: 0.3s;}
.contact_area p a:hover{opacity: 0.8;}
.contact_area .contact_btn{margin:40px auto 0; display: block; width:300px; height:60px; line-height: 58px; text-align: center; color: #fff; background: #ED7B18; border-radius: 100px; transition: 0.3s;}
.contact_area .contact_btn:hover{opacity: 0.8;}
.back_btn {margin:120px 0;}