@charset "UTF-8";
/* 
-------------------------------------*/
header {width: 94%;max-width: 1920px; margin: 0 auto 30px;overflow: hidden;}

.sns-list-top li{
width: 130px;
}
.contents{
width: 390px;
height: 270px;
}

.top-g-nav-Box { width: 200px; margin-right: 20px; }
.top-g-nav-Box .g-nav-list { margin-bottom: 16px; line-height: 0; }
.top-g-nav-Box .g-nav-list li a { padding-top: 20px; padding-bottom: 20px; padding-left: 8px; background-image: url(../images/top/g-nav-line.jpg), url(../images/top/g-nav-icon.png); background-repeat: no-repeat,no-repeat; background-position: 0 bottom,right 8px center; display: block; }
.top-g-nav-Box .g-nav-list li a:hover { background-color: #eee; }

.top-kv-Box { width: 880px; }
.top-kv-Box .bg-Box { background-image: url(../images/top/kv-01.jpg); background-repeat: no-repeat; padding-top: 330px; position: relative; }
.top-kv-Box .bg-Box .abs-ttl { position: absolute; top: 112px; left: 153px; }
.top-kv-Box .bg-Box .Box { width: 780px; }
.top-kv-Box .mr-01 { margin-right: 40px; }
.top-kv-Box .Box-01 { background-color: #fff; }

.address-Box { color: #626262; font-size: 12px; font-weight: 400; line-height: 18px; }

@keyframes sliderAnimation {
  100% {
    transform: translateX(-30%);
  }
}
#fastview{width: 89%;max-width: 1920px;margin: 0 auto;}
#fastview figure{margin-bottom: 20px;}
#fastview figure img{width: 100%;height: auto;}
#fastview .slide{overflow: hidden;margin-bottom: 50px;}
#fastview .slide .slide-thumbnail{display: flex;min-width: 100%;width: min-content;animation: 20s linear infinite sliderAnimation;margin: 0 auto;}
#fastview .slide .slide-thumbnail li{width: 14.6vw;max-width: 320px; height: auto;margin-right: 25px;position: relative;}
#fastview .slide .slide-thumbnail li img{width: 100%;height: auto;}
#fastview .bnr{width: 850px;margin: 0 auto 70px;overflow: hidden;}
#fastview .bnr .showroom-bnr{width: 390px; float: left;}
#fastview .bnr .sns-bnr{width: 410px;float: right;display: -webkit-box;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;padding-top: 25px;}
#fastview .bnr .sns-bnr li{margin-right: 10px;}
#fastview .bnr .sns-bnr li:last-child{margin-right: 0;}

#works-Box { background-image: url(../images03/index/works-bg.png),url("../images03/index/works-bg2.png"); background-repeat: no-repeat,repeat-y; background-position: center 0,bottom center; padding-bottom: 100px;}
#works-Box .Box { padding-top: 67px; width: 1200px; margin-left: auto; margin-right: auto; }
#works-Box .Box .ttl { text-align: center; margin-bottom: 40px; }
#works-Box .Box .txt { color: #ffffff; font-size: 18px; font-weight: 700; line-height: 26px; text-align: center; line-height: 1.6; margin-bottom: 50px; }
#works-Box .Box .lineup{width: 1100px; margin: 0 auto;display: -webkit-box;display: -moz-flex;display: -ms-flex;display: -o-flex;display: -ms-flexbox;justify-content: center;display: flex;-webkit-box-lines: multiple;-moz-box-lines: multiple;-ms-flex-wrap: wrap;flex-wrap: wrap;}
#works-Box .Box .lineup li{width: 540px;margin-right: 20px;margin-bottom: 70px;}
#works-Box .Box .lineup li:nth-child(2n){margin-right: 0;}
#works-Box .Box .lineup li:last-child{margin-right: 0;}
#works-Box .Box .lineup li:nth-child(3){margin-bottom: 0;}
#works-Box .Box .lineup li:nth-child(4){margin-bottom: 0;}
#works-Box .Box .lineup li dt{margin-bottom: 30px;box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.35);}
#works-Box .Box .lineup li dd{font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;font-size: 16px;line-height: 26px;margin-bottom: 30px;padding: 0 15px;}
#works-Box .Box .lineup li .btn{width: 202px;margin: 0 auto;}

#main04_new{margin-bottom: 30px;}

#works-list{margin-bottom: 30px;}

#staff{}
#staff h2{margin-bottom: 20px;}
#staff ul.slider{}
#staff ul.slider li{}
#staff ul.slider li dt{margin-bottom: 10px;position: relative;width: 220px;height: 300px;}
#staff ul.slider li dt img{width: 220px;height: 300px;object-fit: cover;font-family: "object-fit: cover;";}
#staff ul.slider li dt .frame{position: absolute;top: 0;left: 0;}
#staff ul.slider li dd{font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;font-size: 18px;font-weight: bold;line-height: 22px;text-align: center;}
#staff .bx-wrapper .bx-next{right: -6px;background-image: url("../images03/index/staff-arrow02.png");background-position: 0 0;width: 34px;height: 34px;}
#staff .bx-wrapper .bx-prev{left: -6px;background-image: url("../images03/index/staff-arrow01.png");background-position: 0 0;width: 34px;height: 34px;}
#staff .bx-wrapper .bx-controls-direction a{top: 42%;}
#staff .btn{width: 254px;margin: 40px auto 0;}


.genre{
color: #fff;
background-color: #a29150;text-align: center;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
line-height: 1.6;
margin-bottom: 10px;
}
/* blackboard
-------------------------------------*/
#blackboard { background-image: url(../images/top/bg_blackboabg-02.jpg), url(../images/top/blackboard-deco-02.png), url(../images/top/bg_blackboabg-01.jpg); background-repeat: no-repeat,no-repeat,no-repeat; background-position: 0 bottom,right 11px top 9px,0 top; padding: 40px 32px 48px 32px; position: relative; margin-bottom: 32px; }
#blackboard .blackboard-ttl { text-align: center; margin-bottom: 35px; }
#blackboard .blackboard-ttl-02 { margin-bottom: 24px; }
#blackboard .deco-01 { position: absolute; top: -14px; left: 67px; }
#blackboard .deco-02 { position: absolute; bottom: 15px; right: 12px; }
#blackboard .txt { width: 430px; color: #afafaf; font-size: 14px; font-weight: 400; line-height: 22px; margin-bottom: 40px; }

/* 
-------------------------------------*/
#works-list { width: 700px; margin-left: auto; margin-right: auto; }
#works-list .works-ttl { margin-bottom: 24px; color: #675649; font-size: 16px; font-weight: 700; line-height: 18px; }
#works-list .works-ttl .en { margin-right: 20px; }
#works-list .ttl-Box-02 { background-image: url(../images/top/works-list-bg.jpg); padding-top: 12px; padding-bottom: 12px; padding-left: 16px; padding-right: 16px; margin-bottom: 8px; color: #ffffff; font-size: 18px; font-weight: 700; line-height: 18px; text-align: left; }

.works { overflow: hidden; font-size: 14px; margin-right: -10px; }

.works li { width: 230px; float: left; margin: 0px 17px 24px 0px; background: url(http://ababai.net/test/manken2017/css/../images/works/bg_list_top.jpg) no-repeat center top, url(http://ababai.net/test/manken2017/css/../images/works/bg_list_bottom.jpg) no-repeat center bottom, url(http://ababai.net/test/manken2017/css/../images/works/bg_list_middle.jpg) repeat-y center; padding: 45px 20px 70px 20px; position: relative; margin-left: -5px; }
.works li:nth-child(3n) { margin-right: 0; }

.works li a { color: #4c4948; }

.works li .thumb { width: 188px; margin: 0px auto 10px auto; text-align: center; border: 1px solid #dfd9d5; background: #fff; padding: 1px 0px; }

.works li .thumb.mb0 {margin-bottom: 0!important;width: 184px;height: 123px;}

.works li .thumb img { max-width: 184px; height: auto !important; margin: 0px auto; width: 184px;height: 123px!important;object-fit: cover;font-family: "object-fit: cover;";}

.works li .address { font-size: 16px; font-weight: bold; margin-bottom: 5px; }

.works li .btn { position: absolute; left: 20px; bottom: 20px; }

.works_box { position: relative; }

.works_box .more_btn { position: absolute; right: 100px; top: 65px; }

.message-Box-bg { background-image: url(../images/top/message-bg.jpg); background-repeat: no-repeat; background-position: center 0; }

.message-Box { width: 1000px; margin-left: auto; margin-right: auto; margin-bottom: 48px; }
.message-Box .Box-l { width: 500px; }
.message-Box .Box-r { padding-top: 45px; width: 460px; color: #ffffff; font-size: 14px; font-weight: 400; line-height: 1.75; font-size: 14px; }
.message-Box .message-ttl { margin-bottom: 25px; }
.message-Box .fb { padding-left: 20px; padding-right: 20px; background-color: #fff; }
.message-Box .mb-01 { margin-bottom: 24px; }


.side-company { color: #644e3b; font-size: 14px; }
.side-company .side-logo { margin-bottom: 24px; }
.side-company .side-ttl { color: #644e3b; font-size: 18px; font-weight: 700; line-height: 23px; margin-bottom: 16px; }
.side-company .mb-01 { margin-bottom: 16px; }
.side-company .g-company-list li { margin-right: 1em; }
.side-company .g-company-list li:before { content: "＞"; margin-right: .3em; font-size: 12px; }

/* 
<div class="side-company"> <p><img src="images/top/side-ttl.jpg" alt="REFORM & RENOVATION MANKEN"/></p> <p class="side-ttl">株式会社 万建</p>   <address class="mb30"> <p>〒476-0002</p> <p>愛知県東海市名和町寝覚130</p> <p>TEL:052-693-8718</p> </address>
<ul class="ten g-company-list">
	<li><a href="">会社概要</a></li>
	<li><a href="">アクセス</a></li>
</ul>
</div>
*/
/*----------------------------------------- main_img
------------------------------------------*/
#main_img .right_area { width: 252px; float: right; }

#main_img .fl_l { padding-top: 9px; }

.position_Box { position: absolute; width: 340px; height: 390px; background-color: #000; top: 0px; left: 625px; z-index: 2; }

.position { position: absolute; top: 250px; left: 735px; z-index: 3; }

/*----------------------------------------- #manken_works
------------------------------------------*/
#manken_works { width: 1100px; margin-right: auto; margin-left: auto; margin-bottom: 20px; }

#manken_works .position_01 { position: absolute; top: 48px; left: 188px; }

#manken_works .position_02 { position: absolute; top: 48px; left: 478px; }

#manken_works .position_03 { position: absolute; top: 48px; left: 768px; }

/*----------------------------------------- #staff
------------------------------------------*/
#staff .ttl { text-align: center; margin-bottom: 10px; }

div.slider { width: 650px; display: block; margin: 40px auto; }

ul.bxslider01 li { display: block; width: 650px; height: 285px; }

ul.bxslider01 li img { display: block; width: 650px; height: auto; }

ul.bxslider02 li a { display: block; width: 40px; height: 105px; }

ul.bxslider02 li a img { display: block; width: 40px; height: auto; }

div.controlWrap { width: 650px; display: block; position: relative; margin: 0 auto; }

div.controlWrap p#PrevIcon a { width: 21px; height: 40px; position: absolute; background-repeat: no-repeat; background-position: left center no-repeat; background-image: url(../images/top/arrow_01.png); color: #fff; top: 38px; left: 20px; text-indent: -9999px; }

div.controlWrap p#NextIcon a { display: block; width: 21px; height: 40px; position: absolute; background-image: url(../images/top/arrow_02.png); color: #fff; top: 38px; right: 20px; text-indent: -9999px; }

/*----------------------------------------- #address_Box
------------------------------------------*/
#address_Box { background-image: url(../images/top/bg_01.jpg); padding: 10px; background-repeat: no-repeat; margin-bottom: 40px; }

#address_Box .fb { width: 460px; float: left; }

#address_Box .address { width: 225px; float: left; padding-top: 20px; padding-left: 25px; color: #fff; }

#address_Box .address .btn { text-align: right; padding-top: 30px; }

/*----------------------------------------- main01：リフォームメニュー
------------------------------------------*/
#main01 { width: 710px; height: 541px; background: url(../images/top/bg_blackboad.jpg) no-repeat; position: relative; margin: 0px auto 20px auto; }

#main01 .ttl_photos { position: relative; height: 235px; width: 710px; }

#main01 .ttl { position: absolute; left: 30px; top: 20px; }

#main01 .photo01 { position: absolute; right: 15px; top: 60px; z-index: 2; }

#main01 .photo02 { position: absolute; right: 150px; top: 20px; z-index: 1; }

#main01 ul.menu01 { margin: 0px 0px 15px 75px; overflow: hidden; }

#main01 ul.menu01 li { float: left; margin: 0px 30px 0px 0px; }

#main01 ul.menu02 { margin: 0px 0px 15px 25px; overflow: hidden; }

#main01 ul.menu02 li { float: left; margin-right: 28px; }

/*---main02：バナー2つ---*/
#main02 { overflow: hidden; width: 710px; margin: 0px auto 15px auto; }

#main02 a { color: #d9452e; }

#main02 a:hover { color: rgba(217, 69, 46, 0.5); }

#main02 .ban { position: relative; margin-bottom: 5px; }

#main02 .ban .img_roung { position: absolute; right: 8px; bottom: -45px; }

/*---main03：works---*/
#main03 { width: 710px; margin: 0px auto; padding: 140px 0px 40px 0px; background: url(../images/top/bg_works_top.jpg) no-repeat center top, url(../images/top/bg_works_bottom.png) no-repeat center bottom, url(../images/top/bg_works_flower.png) no-repeat 20px 95%; position: relative; }

#main03 .ttl { position: absolute; left: 17px; top: 15px; }

#main03 ul.menu01 { float: left; padding-top: 90px; }

#main03 ul.menu02 { float: left; margin-left: 25px; }

#main03 ul.menu03 { float: left; margin-left: 25px; padding-top: 90px; }

#main03 li { text-align: center; margin-bottom: 15px; }

#main03 li a { color: #727171; }

#main03 li a:hover { color: rgba(0, 0, 0, 0.5); }

#main03 .btn { position: absolute; right: 0px; bottom: 75px; }

#main03 .lamp { position: absolute; left: 330px; bottom: -142px; z-index: 100; }

/*---top_lp---*/
#top_lp { background: url(../images/top/bg_works_bottom.png) no-repeat center bottom, url(../images/top/bg_works_flower.png) no-repeat 20px 95%; position: relative; padding: 0px 0px 70px 0px; }

#top_lp .lamp { position: absolute; left: 330px; bottom: -142px; z-index: 100; }

/*---main04：concept---*/
#main04 { width: 710px; height: 380px; background: url(../images/top/bg_concept.jpg) no-repeat center bottom; position: relative; margin-bottom: 30px; }

#main04 .ttl { margin: 0px 0px 120px 10px; }

#main04 .img01 { position: absolute; left: 7px; bottom: -7px; }

#main04 .about { position: relative; margin-right: 20px; }

#main04 .about .btn { position: absolute; right: 63px; top: 4px; }

#main04 .about .img02 { position: absolute; right: -14px; top: 42px; }

/*---main05：お客様の声---*/
#main05 { width: 710px; overflow: hidden; background: url(../images/top/voice_bg_top.jpg) no-repeat center top, url(../images/top/voice_bg_bottom.jpg) no-repeat center bottom, url(../images/top/voice_bg_middle.jpg) repeat-y center; margin: 0px auto 80px auto; padding: 20px 0px; }

#main05 a { color: #4c4948; }

#main05 a:hover { color: rgba(0, 0, 0, 0.5); }

#main05 ul { float: left; margin: 0px 0px 0px 20px; overflow: hidden; }

#main05 li { width: 246px; background: url(../images/top/voicebox_bg_top.jpg) no-repeat center top, url(../images/top/voicebox_bg_bottom.jpg) no-repeat center bottom, url(../images/top/voicebox_bg_middle.jpg) repeat-y; padding: 17px; overflow: hidden; float: left; margin-right: 10px; font-size: 12px; }

#main05 li .left_area { width: 174px; float: left; }

#main05 li .thumb { width: 174px; overflow: hidden; text-align: center; margin-bottom: 5px; }

#main05 li .thumb img { height: 100px; }

#main05 li .ttl { font-size: 14px; font-weight: bold; }

#main05 li a .ttl { color: #d9452e; }

#main05 li a:hover .ttl { text-decoration: underline; }

#main05 li .text { height: 55px; overflow: hidden; letter-spacing: 0.2px; }

#main05 .right_area { float: right; margin-right: 40px; }

/*---main06：message---*/
#main06 { width: 710px; overflow: hidden; line-height: 140%; }

#main06 #top_message .ttl_btn { overflow: hidden; padding: 0px 0px 10px 0px; background-repeat: repeat-x; background-position: center bottom; background-image: url(../images/top/border_message.jpg); margin-bottom: 10px; }

#main06 #top_company { width: 222px; float: right; background: url(../images/top/companybg_top.jpg) no-repeat center top, url(../images/top/companybg_bottom.jpg) no-repeat center bottom, url(../images/top/companybg_middle.jpg) repeat-y center; overflow: hidden; padding: 10px; color: #fff; }

#reform_list_bnr { text-align: center; margin: 0 0 30px; }

#reform_list_bnr li { width: 220px; float: left; margin: 0 25px 0 0; }

#reform_list_bnr li:nth-child(3n) { margin: 0; }