@charset "UTF-8";
/*--------------------------------------------------------------------------
	共通
--------------------------------------------------------------------------*/
.contents_name { margin: 0 0 30px 0; padding: 0 0 30px 0; border-bottom: #524b49 1px solid; position: relative; display: flex; display: -webkit-flex; align-items: center; -webkit-box-align: center; }
.contents_name h2 { line-height: 1; font-size: 14px; font-weight: 500; }
.contents_name p { margin: 0 35px 0 0; padding: 0 35px 0 0; line-height: 1; background: url("../img/icon_01.png") right center no-repeat; background-size: auto 32px; font-size: 38px; font-weight: 400; letter-spacing: 0.1em; }
.contents_name p.more_txt { margin: 0; padding: 0; background: none; font-size: 15px; position: absolute; right: 0; }
.contents_name p.more_txt a { display: block; width: 90px; line-height: 32px; font-size: 15px; text-align: center; }

/*--------------------------------------------------------------------------
	TOPICS
--------------------------------------------------------------------------*/
.top_topics { padding: 70px 10px 0 10px; }
.top_topics .topics_area { margin: 0 auto; max-width: 1100px; }
.top_topics .topics_area a { display: block; width: 100%; }
.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: 15px 0; border-bottom: 1px solid #c3bcac; display: flex; }
.top_topics .topics_area dl dt { width: 330px; line-height: 0; font-size: 0; }
.top_topics .topics_area dl dt span { display: inline-block; vertical-align: middle; line-height: 1; }
.top_topics .topics_area dl dt span.ymd { font-size: 16px; }
.top_topics .topics_area dl dt span.category { margin: 0 0 0 17px; padding: 0 5px; width: 180px; line-height: 24px; color: #fff; background: #524b49; font-size: 12px; text-align: center; }
.top_topics .topics_area dl dd { line-height: 1.6; flex: 1; -webkit-flex: 1; font-size: 16px; }
.top_topics .topics_area dl dd span.type_main { margin: 2px 15px 0 0; display: inline-block; vertical-align: top; width: 150px; line-height: 20px; color: #fff; background: #70c0e8; font-size: 12px; text-align: center; border-radius: 3px; }

/*-----------------------------------------
	EVENT
-----------------------------------------*/
.top_event { margin: 120px auto 0 auto; padding: 0 10px; width: 100%; max-width: 1120px; }
.top_event .back_btn { margin: 50px auto 0 auto; }

.top_event_list .post { margin: 0 auto; width: 100%; display: flex; max-width: 1100px; flex-wrap: wrap; }
.top_event_list .post > div { width: calc(100%/2); padding: 0 20px; }
.top_event_list .post > div:nth-of-type(n+3) { margin: 40px 0 0 0; }
.top_event_list .post > div > a { display: block; background: #fff; height: 100%; }
.top_event_list .post > div > a:hover { box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.7); }
.top_event_list .post > div > a .item .event_ph > div.image-wrapper { aspect-ratio: 3/2; }
.top_event_list .post > div > a .item .info { padding: 20px; }
.top_event_list .post > div > a .item .info .type { margin: 0 0 15px 0; }
.top_event_list .post > div > a .item .info .type .of { display: inline-block; width: 70px; font-size: 13px; text-align: center; background: #000; color: #FFF; padding: 3px 0 4px; }
.top_event_list .post > div > a .item .info .type .cat { display: inline-block; width: 173px; line-height: 30px; color: #fff; background: #524b49; font-size: 13px; text-align: center; }
.top_event_list .post > div > a .item .info h3 { font-size: 16px; font-weight: 500; }
.top_event_list .post > div > a .item .info .data dl { margin: 10px 0 0 0; display: table; width: 100%; table-layout: fixed; }
.top_event_list .post > div > a .item .info .data dl:first-of-type { margin: 20px 0 0 0; }
.top_event_list .post > div > a .item .info .data dl dt, .top_event_list .post > div > a .item .info .data dl dd { display: table-cell; vertical-align: top; line-height: 1.5; }
.top_event_list .post > div > a .item .info .data dl dt { padding: 0 0 1px 0; border-right: 1px solid #c3bcac; width: 56px; }
.top_event_list .post > div > a .item .info .data dl dd { padding: 0 0 1px 10px; }
.top_event_list .post > div > a .item .info .data dl dd span.check { display: block; width: 100%; color: #c1272d; }
.top_event_list .post.post_one > div { width: 100%; }
.top_event_list .post.post_one > div > a { padding: 20px; }
.top_event_list .post.post_one > div > a .item { display: flex; width: 100%; }
.top_event_list .post.post_one > div > a .item .event_ph { width: 510px; }
.top_event_list .post.post_one > div > a .item .info { padding: 0 0 0 40px; flex: 1; -webkit-flex: 1; }
.top_event_list .post.ch_all { height: auto; }
> .top_event_list .post.ch_all:nth-child(n+5) { display: none; }
.top_event_list .post.ch_kitami { height: auto; }
.top_event_list .post.ch_kitami > div:not(.kitami) { display: none; }
.top_event_list .post.ch_sapporo { height: auto; }
.top_event_list .post.ch_sapporo > div:not(.sapporo) { display: none; }
.top_event_list .post.ch_asahikawa { height: auto; }
.top_event_list .post.ch_asahikawa > div:not(.asahikawa) { display: none; }
.top_event_list .no_model { text-align: center; }
.top_event_list .no_model.off { display: none; }
.top_event_list .no_model.on { display: block; }

/*-----------------------------------------
	WORKS
-----------------------------------------*/
.top_works { margin: 120px auto 0 auto; text-align: center; max-width: 2000px; }
.top_works > .sbj { margin: 0 auto; padding: 0 10px; max-width: 1120px; }
.top_works .works_ph { margin: 0 auto; display: flex; width: 100%; flex-wrap: wrap; }
.top_works .works_ph .item { display: flex; position: relative; width: calc(100%/3); }
.top_works .works_ph .item a { display: block; width: 100%; position: relative; overflow: hidden; }
.top_works .works_ph .item a:link, .top_works .works_ph .item a:visited { color: #fff; }
.top_works .works_ph .item a:active, .top_works .works_ph .item a:hover { color: #fff; }
.top_works .works_ph .item .mask_ph div.image-wrapper { aspect-ratio: 3/2; }
.top_works .works_ph .item .mask { display: flex; display: -webkit-flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: 1.4; opacity: 0; /* -webkit-transition:	all 0.2s ease;
transition:	all 0.2s ease; */ }
.top_works .works_ph .item .mask:hover { opacity: 1; }
.top_works .works_ph .item .mask > div { display: flex; width: 100%; height: 100%; }
.top_works .works_ph .item .mask .mask_sbj { padding: 20px; display: flex; width: 100%; height: 100%; color: #fff; background-color: rgba(0, 0, 0, 0.65); text-align: left; align-items: flex-start; justify-content: flex-start; flex-direction: column; }
.top_works .works_ph .item .mask .mask_sbj > span { font-size: 16px; font-weight: 500; }
.top_works .back_btn { margin: 50px auto 0 auto; }

/*-----------------------------------------
	美建ホームのこだわり
-----------------------------------------*/
.top_confidence { margin: 100px auto 0 auto; padding: 0 10px; display: flex; background: url("../../img/top_concept.jpg") no-repeat center center; background-size: cover; align-items: center; max-width: 2000px; min-height: 590px; }
.top_confidence .frm { margin: 0 auto; width: 100%; max-width: 1100px; }
.top_confidence .frm h2 { font-size: 35px; font-weight: 500; letter-spacing: 0.14em; }
.top_confidence .frm .msg { margin: 10px 0 40px 0; max-width: 550px; }
.top_confidence .frm .msg > p { line-height: 2; }

/*-----------------------------------------
	最新工事状況
-----------------------------------------*/
.top_const { margin: 120px auto 0 auto; padding: 0 10px; max-width: 1120px; }
.top_const .post { display: flex; text-align: left; }
.top_const .post a { padding: 0 20px; display: flex; width: calc(100%/4); color: #000; }
.top_const .post a:active, .top_const .post a:hover { opacity: 0.75; }
.top_const .post a .item { display: flex; width: 100%; flex-direction: column; }
.top_const .post a .item .const_ph div.image-wrapper { aspect-ratio: 3/2; }
.top_const .post a .item .data p { margin: 15px 0 0 0; font-size: 13px; }
.top_const .post a .item .data h3 { font-size: 16px; font-weight: 500; }
.top_const .post a .item .data h4 { margin: 6px 0 0 0; padding: 6px 0 0 0; border-top: 1px solid #c3bcac; font-size: 13px; font-weight: 500; }
.top_const .back_btn { margin: 50px auto 0 auto; }

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