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

	TOPページ 【公開前】

--------------------------------------------------------------------------*/
#wrap.top_pre { padding: 100px 10px; }
#wrap.top_pre #contents { margin: 0 auto; padding: 60px 30px; background: #eee; text-align: center; max-width: 800px; border-radius: 10px; }
#wrap.top_pre #contents .msg p.open { margin: 0 0 30px 0; font-size: 20px; }
#wrap.top_pre #contents .msg p.open span { color: #101f5e; font-size: 28px; font-weight: bold; }
#wrap.top_pre #contents .company { margin: 40px 0 0 0; padding: 40px 0 0 0; border-top: 2px solid #fff; }
#wrap.top_pre #contents .company h1 { margin: 0 0 20px 0; line-height: 44px; font-size: 24px; font-weight: bold; }
#wrap.top_pre #contents .company h1 span { padding: 0 0 0 64px; display: inline-block; background: url("../img/logo.png") no-repeat left top; background-size: 44px auto; }
#wrap.top_pre #contents address { font-style: normal; }
#wrap.top_pre #contents address p.add > span { margin: 0 10px; display: inline-block; }
#wrap.top_pre #contents address > ul li { margin: 0 10px; display: inline-block; font-size: 26px; font-family: 'Oswald', sans-serif; font-weight: 400; }
#wrap.top_pre #contents address > ul li span { font-size: 17px; }
#wrap.top_pre #copyright { margin: 20px 0 0 0; font-size: 12px; text-align: center; }

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

	TOPページ

--------------------------------------------------------------------------*/
#wrap.top #contents { padding: 76px 0 0 0; }

.cat_box { text-align: center; }
.cat_box p { font-size: 48px; font-weight: 100; letter-spacing: 0.12em; }
.cat_box .sbj { margin: 15px 0 60px 0; font-size: 28px; font-weight: 500; }

.more_btn { text-align: center; }
.more_btn a { display: inline-block; background: #000; border: 1px solid #000; padding: 10px; width: 100%; max-width: 160px; color: #FFF; line-height: 1; letter-spacing: 0.1em; font-size: 18px; font-family: 'Oswald','Noto Sans'; font-weight: 400; }
.more_btn a span { display: inline-block; }
.more_btn a:hover, .more_btn a:active { background: #4b8fc0; border: 1px solid #4b8fc0; }
.more_btn.bg_no a { background: none; border: 1px solid #FFF; }
.more_btn.bg_no a:hover, .more_btn.bg_no a:active { background: #FFF; color: #000; }

/*--------------------------------------------------------------------------
	TOPICS
--------------------------------------------------------------------------*/
#top_topics { margin: 100px 0 140px 0; }
#top_topics .cat_box .sbj { margin: 15px 0 30px 0; }
#top_topics .topics_area { margin: 0 auto 100px auto; max-width: 820px; }
#top_topics .topics_area a { display: block; width: 100%; color: #222; }
#top_topics .topics_area a:hover, #top_topics .topics_area a:active { color: #999; }
#top_topics .topics_area a:hover dt span.category, #top_topics .topics_area a:active dt span.category { opacity: 0.7; }
#top_topics .topics_area dl { padding: 10px 10px; display: flex; display: -webkit-flex; }
#top_topics .topics_area dl dt { width: 300px; }
#top_topics .topics_area dl dt span { display: inline-block; }
#top_topics .topics_area dl dt span.mpl { font-weight: 400; }
#top_topics .topics_area dl dt span.category { margin: 0 0 0 15px; padding: 0 5px; border: 1px solid #222; width: 150px; color: #222; background: #fff; font-size: 13px; text-align: center; border-radius: 5px; }
#top_topics .topics_area dl dd { flex: 1; -webkit-flex: 1; }
#top_topics .ph { background: #eee; }
#top_topics .ph > div { margin: 0 auto; max-width: 2000px; }
#top_topics .ph > div ul { display: flex; display: -webkit-flex; }
#top_topics .ph > div ul li { padding: 0 2px; }

/*--------------------------------------------------------------------------
	イベント情報
--------------------------------------------------------------------------*/
#top_event { margin: 100px auto 140px; padding: 0 10px; max-width: 1020px; }
#top_event .event_area > a { margin: 40px auto 30px auto; display: block; width: 100%; }
#top_event .event_area > a:first-of-type { margin: 0 auto; }
#top_event .event_area .post { display: table; width: 100%; table-layout: fixed; }
#top_event .event_area .post .event_ph, #top_event .event_area .post .data { display: table-cell; vertical-align: top; }
#top_event .event_area .post .event_ph { width: 360px; }
#top_event .event_area .post .event_ph > div { position: relative; overflow: hidden; }
#top_event .event_area .post .event_ph > div img { position: absolute; }
#top_event .event_area .post .data { padding: 0 0 0 60px; font-size: 18px; }
#top_event .event_area .post .data ul li { margin: 0 20px 0 0; display: inline-block; vertical-align: middle; }
#top_event .event_area .post .data ul li.category { padding: 0 5px; border: 1px solid #222; width: 140px; font-size: 13px; text-align: center; border-radius: 5px; }
#top_event .event_area .post .data h3 { margin: 10px 0 20px 0; line-height: 1.4; font-size: 24px; font-weight: 500; }
#top_event .event_area .post .data dl { display: table; width: 100%; font-size: 14px; table-layout: fixed; }
#top_event .event_area .post .data dl + dl { margin: 10px 0 0 0; }
#top_event .event_area .post .data dl dt, #top_event .event_area .post .data dl dd { display: table-cell; vertical-align: top; }
#top_event .event_area .post .data dl dt { width: 90px; }
#top_event .event_area .post .data dl dt span { display: inline-block; width: 100%; background: #eee; text-align: center; border-radius: 5px; }
#top_event .event_area .post .data dl dd { padding: 0 0 0 20px; }

/*--------------------------------------------------------------------------
	私たちのこと
--------------------------------------------------------------------------*/
#top_company { margin: 100px auto 140px; padding: 0 10px; text-align: center; max-width: 1020px; }
#top_company .intro { margin: 0 0 70px 0; }
#top_company .intro > p { margin: 0 0 30px 0; font-size: 24px; }
#top_company .intro > p br.sp_no { display: block; }
#top_company .intro .msg { font-size: 17px; }
#top_company > .cat_box p { font-size: 60px; }
#top_company .company_area { margin: 0 auto; display: flex; display: -webkit-flex; width: 100%; flex-wrap: wrap; max-width: 1002px; }
#top_company .company_area .item { padding: 1px; display: flex; display: -webkit-flex; width: 50%; }
#top_company .company_area .item.line { width: 100%; }
#top_company .company_area .item.line.recruit a { background: url("../../img/img_com01_recruit.jpg") no-repeat center center; background-size: cover; border-radius: 0 0 20px 20px; }
#top_company .company_area .item a { padding: 15px 10px; display: flex; display: -webkit-flex; width: 100%; height: 280px; flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; justify-content: center; -webkit-box-pack: center; }
#top_company .company_area .item a:link, #top_company .company_area .item a:visited { color: #fff; }
#top_company .company_area .item a:active, #top_company .company_area .item a:hover { opacity: 0.7; }
#top_company .company_area .item a .cat_box .sbj { margin: 10px 0 0 0; font-size: 22px; }
#top_company .company_area .item.outline a { background: url("../../img/img_com01_outline.jpg") no-repeat center center; background-size: cover; border-radius: 20px 0 0 0; }
#top_company .company_area .item.company a { background: url("../../img/img_com01_message.jpg") no-repeat center center; background-size: cover; border-radius: 0 20px 0 0; }
#top_company .company_area .item.staff a { background: url("../../img/img_com01_staff.jpg") no-repeat center center; background-size: cover; border-radius: 0 0 0 20px; }
#top_company .company_area .item.recruit a { background: url("../../img/img_com01_recruit.jpg") no-repeat center center; background-size: cover; border-radius: 0 0 20px 0; }

/*--------------------------------------------------------------------------
	お知らせ・スタッフブログ
--------------------------------------------------------------------------*/
#top_blog { margin: 100px auto 140px; background: #eee; }
#top_blog .cat_box .sbj { margin: 15px 0 30px 0; font-size: 22px; }
#top_blog .frm { margin: 0 auto; padding: 60px 10px; display: table; width: 100%; max-width: 660px; }
#top_blog .frm .blog { padding: 20px 40px; border-left: 1px solid #222; display: table-cell; }
#top_blog .frm .blog:first-of-type { border-left: none; }
#top_blog .frm .blog .post { margin: 20px auto 0 auto; }
#top_blog .frm .blog .post:first-of-type { margin: 0 auto; }
#top_blog .frm .blog .post p span.mpl { font-size: 16px; font-weight: 400; }
#top_blog .frm .blog .post h3 { font-size: 17px; font-weight: 500; }

/*--------------------------------------------------------------------------
	施工実例、リフォーム施工実例
--------------------------------------------------------------------------*/
#top_works { margin: 100px auto 140px; }
#top_works ul.works_nav { margin: 0 auto; display: flex; display: -webkit-flex; max-width: 520px; text-align: center; }
#top_works ul.works_nav li { padding: 0 10px; display: flex; display: -webkit-flex; width: 50%; }
#top_works ul.works_nav li a { padding: 15px 10px; display: flex; display: -webkit-flex; width: 100%; font-size: 18px; border-radius: 5px; flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; justify-content: center; -webkit-box-pack: center; }
#top_works ul.works_nav li a:link, #top_works ul.works_nav li a:visited { border: 1px solid #222; color: #222; background: #fff; }
#top_works ul.works_nav li a:active, #top_works ul.works_nav li a:hover { border: 1px solid #101f5e; color: #fff; background: #101f5e; }

/*記事3件以下*/
.works_ph_few { margin: 0 auto 50px auto; background: #eee; }
.works_ph_few .frm { margin: 0 auto; display: flex; display: -webkit-flex; width: 100%; max-width: 1500px; }
.works_ph_few .frm a { margin: 0 auto; width: 100%; }
.works_ph_few .frm a .few_item div { overflow: hidden; position: relative; }
.works_ph_few .frm a .few_item div img { position: absolute; }
.works_ph_few .frm a:hover { opacity: 0.7; }
.works_ph_few .frm.single { max-width: 720px; }
.works_ph_few .frm.single a { width: 100%; }
.works_ph_few .frm.p02 { max-width: 1100px; }
.works_ph_few .frm.p02 a { width: 50%; }
.works_ph_few .frm.p03 a { width: 33.33%; }

/*記事4件以上---カルーセル*/
#top_works .photo_frame { margin: 0 auto 50px; width: 100%; max-width: 2000px; }
#top_works .photo_frame .photo { /*#carousel*/ }
#top_works .photo_frame .photo #carousel { /*カルーセルメイン写真　設定*/ /*.owl-carousel*/ /*owl.thumbs 設定*/ /*.owl-thumbs*/ }
#top_works .photo_frame .photo #carousel .owl-carousel { margin: 0 auto 50px; position: relative; width: 100%; /*アイコンナビ　設定*/ /*送りナビ（next/prev） 設定*/ }
#top_works .photo_frame .photo #carousel .owl-carousel .owl-stage-outer img { width: 100%; display: inline-block; vertical-align: top; }
#top_works .photo_frame .photo #carousel .owl-carousel .owl-stage-outer article { margin: 0 auto; position: relative; width: 100%; max-width: 1000px; text-align: center; }
#top_works .photo_frame .photo #carousel .owl-carousel .owl-stage-outer article a { display: block; width: 100%; }
#top_works .photo_frame .photo #carousel .owl-carousel .owl-stage-outer article .main_photo { background-color: #edf0f3; }
#top_works .photo_frame .photo #carousel .owl-carousel .owl-stage-outer article .main_photo.works_ph > div img { width: 100%; height: 400px; object-fit: cover; }
#top_works .photo_frame .photo #carousel .owl-carousel .owl-stage-outer article:hover { opacity: 0.7; }
#top_works .photo_frame .photo #carousel .owl-carousel .owl-stage-outer article p { padding: 15px 0 0; width: 100%; line-height: 1.6; background-color: #fff; }
#top_works .photo_frame .photo #carousel .owl-carousel .owl-dots { display: none; }
#top_works .photo_frame .photo #carousel .owl-carousel .owl-nav { padding: 0; position: absolute; width: 100%; top: 50%; /* IE8以下とAndroid4.3以下用フォールバック */ top: -webkit-calc(50% - 50px); top: calc(50% - 50px); color: #ff0000; }
#top_works .photo_frame .photo #carousel .owl-carousel .owl-nav [class*=owl-] { box-sizing: border-box; text-indent: 100%; white-space: nowrap; overflow: hidden; width: 40px; height: 100px; background-color: #999; background-size: 10px auto; background-position: center center; background-repeat: no-repeat; }
#top_works .photo_frame .photo #carousel .owl-carousel .owl-nav .owl-next { position: absolute; right: 20px; background-image: url("../img/arrow_02.png"); }
#top_works .photo_frame .photo #carousel .owl-carousel .owl-nav .owl-next:hover { opacity: 0.75; }
#top_works .photo_frame .photo #carousel .owl-carousel .owl-nav .owl-prev { position: absolute; left: 20px; background-image: url("../img/arrow_01.png"); }
#top_works .photo_frame .photo #carousel .owl-carousel .owl-nav .owl-prev:hover { opacity: 0.75; }
#top_works .photo_frame .photo #carousel .owl-carousel .owl-nav .disabled { opacity: 0.3; cursor: default; }
#top_works .photo_frame .photo #carousel .owl-thumbs { margin: 0 auto; width: 100%; overflow: hidden; max-width: 1000px; }
#top_works .photo_frame .photo #carousel .owl-thumbs .owl-thumb-item { border: 2px solid rgba(255, 255, 255, 0); padding: 8px; float: left; width: 10%; cursor: pointer; box-sizing: border-box; }
#top_works .photo_frame .photo #carousel .owl-thumbs .owl-thumb-item span { display: block; position: relative; width: 100%; overflow: hidden; }
#top_works .photo_frame .photo #carousel .owl-thumbs .owl-thumb-item span img { position: absolute; }
#top_works .photo_frame .photo #carousel .owl-thumbs .owl-thumb-item:hover, #top_works .photo_frame .photo #carousel .owl-thumbs .owl-thumb-item.active { background: #fff; border: 2px solid #4b8fc0; }

/*--------------------------------------------------------------------------
	実績紹介
--------------------------------------------------------------------------*/
#top_achievement { margin: 0 auto 160px auto; max-width: 2000px; }
#top_achievement .list { display: flex; display: -webkit-flex; flex-wrap: wrap; }
#top_achievement .list a { width: 25%; }
#top_achievement .list a:hover { opacity: 0.7; }
#top_achievement .list a .post .achievement_ph { position: relative; overflow: hidden; }
#top_achievement .list a .post .achievement_ph img { position: absolute; }
#top_achievement .list a .post .cap { padding: 15px 25px 0 25px; text-align: center; }
#top_achievement .list a .post .cap h3 { font-size: 14px; font-weight: 500; }
#top_achievement .back_btn { margin: 50px auto 0 auto; }
#top_achievement .back_btn a { font-size: 18px; }
#top_achievement .back_btn a:hover { border: 1px solid #101f5e; color: #fff; background: #101f5e; }

/*--------------------------------------------------------------------------
	実績紹介、お客様アンケート
--------------------------------------------------------------------------*/
#top_pickup { background: #eee; }
#top_pickup .line02 { margin: 0 auto; display: flex; display: -webkit-flex; width: 100%; max-width: 2000px; }
#top_pickup .line02 .pick_area { display: flex; display: -webkit-flex; width: 100%; }
#top_pickup .line02 .pick_area a { padding: 15px 10px; display: flex; display: -webkit-flex; width: 100%; height: 280px; flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; justify-content: center; -webkit-box-pack: center; }
#top_pickup .line02 .pick_area a:link, #top_pickup .line02 .pick_area a:visited { color: #fff; }
#top_pickup .line02 .pick_area a:active, #top_pickup .line02 .pick_area a:hover { opacity: 0.7; }
#top_pickup .line02 .pick_area a .cat_box .sbj { margin: 10px 0 0 0; }
#top_pickup .line02 .pick_area.view { width: 50%; }
#top_pickup .line02 .pick_area.achievement { padding: 0 1px 2px 0; }
#top_pickup .line02 .pick_area.achievement a { background: url("../../img/img_achievement01.jpg") no-repeat center center; background-size: cover; }
#top_pickup .line02 .pick_area.questionnaire { padding: 0 0 2px 1px; }
#top_pickup .line02 .pick_area.questionnaire a { background: url("../../img/img_questionnaire01.jpg") no-repeat center center; background-size: cover; }

/*--------------------------------------------------------------------------
	工事レポートold
--------------------------------------------------------------------------*/
#top_construction { background: #eee; }
#top_construction a { margin: 0 auto; padding: 10px; display: block; width: 100%; color: #fff; background: url("../../img/img_construction01.jpg") no-repeat center center; background-size: cover; max-width: 2000px; }
#top_construction a:link, #top_construction a:visited { color: #fff; }
#top_construction a:active, #top_construction a:hover { opacity: 0.7; }
#top_construction a .const_area { margin: 0 auto; display: table; width: 100%; table-layout: fixed; max-width: 1100px; min-height: 380px; }
#top_construction a .const_area .cat_box, #top_construction a .const_area .post { display: table-cell; vertical-align: middle; }
#top_construction a .const_area .cat_box { text-align: left; }
#top_construction a .const_area .cat_box .sbj { margin: 15px 0 0 0; }
#top_construction a .const_area .post .item { display: table; width: 100%; table-layout: fixed; }
#top_construction a .const_area .post .const_ph, #top_construction a .const_area .post .data { display: table-cell; vertical-align: middle; }
#top_construction a .const_area .post .const_ph { width: 160px; }
#top_construction a .const_area .post .const_ph div { position: relative; overflow: hidden; }
#top_construction a .const_area .post .const_ph div img { border: 1px solid #fff; position: absolute; }
#top_construction a .const_area .post .data { padding: 0 0 0 40px; }
#top_construction a .const_area .post .data h3 { font-size: 24px; font-weight: 500; }
#top_construction a .const_area .post .data h4 { margin: 15px 0 10px 0; font-size: 17px; font-weight: 500; }
#top_construction a .const_area .post .data p span.type { margin: 0 10px 0 0; padding: 0 8px; border: 1px solid #fff; color: #fff; font-size: 13px; background: none; border-radius: 5px; }

/*--------------------------------------------------------------------------
	工事レポートnew
--------------------------------------------------------------------------*/
#top_construction_list { margin: 100px auto 140px; max-width: 1000px; }
#top_construction_list .cat_box .sbj { margin: 15px 0 40px 0; }
#top_construction_list .list { display: flex; display: -webkit-flex; }
#top_construction_list .list section { display: flex; display: -webkit-flex; width: 33.33%; }
#top_construction_list .list section a { padding: 20px 20px 15px 20px; display: flex; display: -webkit-flex; width: 100%; flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; }
#top_construction_list .list section a:link, #top_construction_list .list section a:visited { background: #fff; }
#top_construction_list .list section a:active, #top_construction_list .list section a:hover { background: #eee; }
#top_construction_list .list section a:active .item, #top_construction_list .list section a:hover .item { width: 100%; flex-grow: 1; }
#top_construction_list .list section a:hover .item .const_ph { opacity: 0.7; }
#top_construction_list .list section a .item { width: 100%; }
#top_construction_list .list section a .item .const_ph div { position: relative; overflow: hidden; }
#top_construction_list .list section a .item .const_ph div img { position: absolute; }
#top_construction_list .list section a .item .data { margin: 20px 0 0 0; }
#top_construction_list .list section a .item .data p { font-size: 13px; }
#top_construction_list .list section a .item .data h3 { margin: 10px 0 5px 0; padding: 10px 0 0 0; border-top: 1px solid #222; line-height: 1.5; font-size: 14px; font-weight: 500; }
#top_construction_list .list section a .item .data h4 { font-size: 13px; font-weight: 400; }
#top_construction_list .back_btn { margin: 35px auto 0 auto; }
#top_construction_list .back_btn a { font-size: 18px; }
#top_construction_list .back_btn a:hover { border: 1px solid #101f5e; color: #fff; background: #101f5e; }

/*# sourceMappingURL=top.css.map */