@charset "utf-8";
/* CSS Document */
#breadcrumbs{ margin-bottom: 5px;}
.pageTtlWrap{ display: flex; flex-direction: row; align-items: flex-end; border: none; padding: 0; margin-bottom: 0;}
.pageTtlWrap .ttl{ font-size: 22px; padding:10px 0; border: none;}
.pageTtlWrap .ttl-area{ font-size: 12px; padding: 7px 5px 5px; background: #008342; color: #fff; font-weight: 300; border-radius: 4px 4px 0 0;}
.pageTtlWrap .ttl-area b{ font-size: 12px; color: #fff; display: inline-block; font-weight: bold; padding-right: 4px;}

.warp100{ width: 100%; display: flex; justify-content: center; background: #fff;}

/*----------------------
area-map
-----------------------*/
.warp100#area-map{ border-top: 2px solid #008342; padding: 20px 0; background: #fff;}
#area-map .contIn.row{ min-width: 980px; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start;}
#area-map .contIn > div{ display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;}
#area-map .contIn > div h3{ width: auto; display: flex; align-items: center; padding: 5px 15px; font-size: 18px; font-weight: bold; background: #008342; color: #fff; border-radius: 10px 10px 0 0; margin:0 15px;}
#area-map .contIn > div h3 img{ width: 24px; height: auto; margin-right: 10px;}
/**/
#area-map .contIn .left{ width: 500px;}
#area-map .contIn .left ul.area-list{ width: 500px; height: 400px; display: block; position: relative; border: solid 5px #008342; border-radius: 10px;}
.kansai-main #area-map .contIn .left ul.area-list{ background: url("../page/img_kai-5/kansai_map.jpg") 50% 50% no-repeat; background-size: 100% 100%;}
.syutoken-main #area-map .contIn .left ul.area-list{ background: url("../page/img_kai-5/syutoken_map.jpg") 50% 50% no-repeat; background-size: 100% 100%;}
.fukuoka-main #area-map .contIn .left ul.area-list{ background: url("../page/img_kai-5/fukuoka_map.jpg") 50% 50% no-repeat; background-size: 100% 100%;}


#area-map .contIn .left ul.area-list li{ display: block; position: absolute;}
#area-map .contIn .left ul.area-list li.osaka{ left: 200px; top: 150px; }
#area-map .contIn .left ul.area-list li.hyogo{ left: 50px; top: 150px; }
#area-map .contIn .left ul.area-list li.kyoto{ left: 200px; top: 40px; }
#area-map .contIn .left ul.area-list li.nara{ left: 350px; top: 220px; }
#area-map .contIn .left ul.area-list li.shiga{ left: 350px; top: 100px; }
#area-map .contIn .left ul.area-list li.wakayama{ left: 200px; top: 305px; }
#area-map .contIn .left ul.area-list li.okayama{ left: 25px; top: 70px; }
#area-map .contIn .left ul.area-list li.mie{ left: 350px; top: 305px; }
/**/
#area-map .contIn .left ul.area-list li.saitama{ left: 155px; top: 70px; }
#area-map .contIn .left ul.area-list li.tokyo{ left: 155px; top: 170px; }
#area-map .contIn .left ul.area-list li.kanagawa{ left: 155px; top: 270px; }
#area-map .contIn .left ul.area-list li.chiba{ left: 310px; top: 170px; }
/**/
#area-map .contIn .left ul.area-list li.fukuoka{ left: 250px; top: 110px; }
#area-map .contIn .left ul.area-list li.saga{ left: 80px; top: 110px; }



#area-map .contIn .left ul.area-list li a, 
#area-map .contIn .left ul.area-list li span{ width: 130px; height: 60px; display: flex; justify-content: center; align-items: center; border-radius: 4px; font-size: 20px; font-weight: 900; }
#area-map .contIn .left ul.area-list li a{ background: #fff; background: linear-gradient(to top, rgb(215,215,215) 0%, rgb(255,255,255) 30%); border: solid 3px #84CF4F; color:#324b3b;  box-shadow: 0 4px 8px rgba(0,0,0,.3); transition: 0.3s;}
#area-map .contIn .left ul.area-list li a:hover{ background: #84CF4F; ; border: solid 3px #fff; color:#fff; box-shadow: 0 0px 0px rgba(0,0,0,.3);}
#area-map .contIn .left ul.area-list li span{ background: #eee; border: solid 2px #ddd; color: #bbb;}
/**/
#area-map .contIn .right{ width: calc(100% - 550px); padding-top:38px; display: flex; flex-direction: column-reverse;}
#area-map .contIn .right .flex{ width: 100%; display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 20px;}
#area-map .contIn .right .flex ul { width: 100%; display: flex; flex-wrap: wrap; border: solid 4px #008342; border-radius: 10px; padding: 10px; }
#area-map .contIn .right .flex ul li{ display: block; width: 29%; margin: 6px 2%;}
#area-map .contIn .right .flex ul li a, 
#area-map .contIn .right .flex ul li span{ width: 100%; height: 42px; display: flex; justify-content: center; align-items: center; border-radius: 4px; font-size: 18px; font-weight: 900; }
#area-map .contIn .right .flex ul li a{ background: #fff; background: linear-gradient(to top, rgb(215,215,215) 0%, rgb(255,255,255) 30%); border: solid 3px #84CF4F; color:#324b3b; transition: 0.3s;}
#area-map .contIn .right .flex ul li a:hover{ background: #84CF4F; ; border: solid 3px #fff; color:#fff; box-shadow: 0 0px 0px rgba(0,0,0,.3);}
#area-map .contIn .right .flex ul li span{ background: #eee; border: solid 2px #ddd; color: #bbb;}
#area-map .contIn .right .txt{ width: 100%; display: flex; flex-direction: column; padding: 8px; background: #eee; border-radius: 4px;}
#area-map .contIn .right .txt h2{ font-size: 12px; padding-bottom: 6px;}
#area-map .contIn .right .txt p{ font-size: 11px; letter-spacing: 0; line-height: 1.4em;}
#area-map .contIn .right .txt dl{ width: 100%; display: flex; justify-content: flex-start; padding-top: 8px; margin-top: 8px; border-top: solid 1px #ccc;}
#area-map .contIn .right .txt dl dt{ font-size: 11px; letter-spacing: 0; line-height: 26px; font-weight: bold; white-space: nowrap; padding-right: 5px;}
#area-map .contIn .right .txt dl dd{ flex: 1; display: flex; flex-wrap: wrap; font-size: 11px;}
#area-map .contIn .right .txt dl dd a{ width: 32%; margin: 2px 0.5%; text-align: center; display: block; height: 20px; align-items: center; background: #fff; border-radius: 2px; border: solid 1px #ccc; font-size: 11px; letter-spacing: 0; color: #666;}
#area-map .contIn .right .txt dl dd a:hover{ border: solid 1px #2259D8; color:#2259D8; }


/*----------------------
area-section
-----------------------*/
#area-section{ display: flex; flex-direction: row; flex-wrap: wrap; margin: 20px auto;}
#area-section h2{ width: 100%; display: flex; align-items: baseline; margin-bottom: 10px;}
#area-section h2 b{ font-size: 20px; border-left: solid 6px #008342; padding: 2px 10px;}
#area-section h2 span{ font-size: 16px; color: #555;}
#area-section .area-wrap{ display: flex; width: 100%; margin-bottom: 30px; flex-direction: row; flex-wrap: wrap; border: solid 5px #ddd; padding: 10px; border-radius: 3px;}
#area-section .area-wrap h3{ display: flex; flex-direction: row; align-items: center;  color: #000; font-size: 16px; margin-bottom: 3px;}
#area-section .area-wrap h3 span{ margin-left: 5px; font-size: 12px; padding:0 2px; line-height: 16px; background: #008342; color: #fff;}

#area-section .area-wrap .area-box{ display: flex; width: 100%; margin: 7px 0; flex-direction: column;}
#area-section .area-wrap .area-box h4{ display: block; width: 100%; margin-bottom: 2px;}
#area-section .area-wrap .area-box h4 span{ font-size: 12px; background:#555; color: #fff; padding: 1px 4px;}

#area-section .area-wrap .area-box p{ width: 100%; display: flex; flex-direction: row;}
#area-section .area-wrap .area-box p a{ display: flex; flex-direction: column; justify-content: center; align-items: center; margin-right: 5px; font-size: 9.5px; letter-spacing: -0.5px;  border: solid 1px #ccc; border-radius: 2px; color: #000; background: #fff;}
#area-section .area-wrap .area-box p a:hover{ background:#008342; border: solid 1px #008342; color: #fff; }
#area-section .area-wrap .area-box p a span{ font-size: 12px; letter-spacing: 0; }
#area-section .area-wrap .area-box p.price a:last-child{ margin-right: 0;}
#area-section .area-wrap .area-box p.price a{ width: 10%; height:40px;}

#area-section .area-wrap .area-box p.commitment , 
#area-section .area-wrap .area-box p.features { flex-wrap: wrap;}
#area-section .area-wrap .area-box p.commitment a, 
#area-section .area-wrap .area-box p.features a{ padding: 2px 10px; margin: 3px 8px 3px 0; font-size: 12px;}

.column-main #area-section .area-wrap{ flex: 1; max-width: 33%;}
.kansai-main.column-main #area-section .area-wrap{ min-width: 19%;}
.syutoken-main.column-main #area-section .area-wrap{ min-width: 24%;}

.column-main #area-section .area-wrap{ padding: 0; margin: 0 0.5%; border: solid 3px #ddd; flex-direction: column; flex-wrap: nowrap; position: relative;}
.column-main #area-section .area-wrap h3{ flex-direction: column; position: sticky; top: 45px; left: 0; z-index: 100; background: #fff; padding: 10px 0; border-bottom: solid 1px #ccc;}

.column-main #area-section .area-wrap:hover{ border: solid 3px #008342; background: #eee;}
.column-main #area-section .area-wrap:hover h3{ background: #008342; color: #fff;}
.column-main #area-section .area-wrap:hover h3 span{ background: #fff; color: #008342;}


.column-main #area-section .area-wrap .area-box{ flex-direction: column; padding:5px 10px;}
.column-main #area-section .area-wrap .area-box h4{ text-align: center; background: #555;}
.column-main #area-section .area-wrap .area-box h4 span{ background:none; padding:0; color: #fff;}
.column-main #area-section .area-wrap .area-box p{ flex-direction: column;}
.column-main #area-section .area-wrap .area-box p a{ width: 100%; margin: 0 0 5px; padding: 2px 0;}
.column-main #area-section .area-wrap .area-box p a span{ line-height: 1.2em;}
.column-main #area-section .area-wrap .area-box p.price a{ width: 100%; height:auto; vertical-align: baseline; color: #555; flex-direction: row; padding: 7px 0 5px; }
.column-main #area-section .area-wrap .area-box p.price a span{ color: #000; padding-right: 3px; font-weight: bold;}
.column-main #area-section .area-wrap .area-box p.price a:hover, 
.column-main #area-section .area-wrap .area-box p.price a:hover span{ color: #fff; background:#008342; }
.column-main #area-section .area-wrap .area-box p{ flex-direction: column;}



/*----------------------
new-bukken
-----------------------*/
#new-bukken{ padding: 15px ; margin: 50px auto; border: solid 2px #008342; border-radius: 4px;}
#new-bukken h2{ font-size: 18px; margin-bottom: 10px; padding: 0 20px;}
#new-bukken .new-bukken-area{ width: 100%; display: flex; justify-content: flex-start; padding: 0 20px;}
#new-bukken .new-bukken-area li{ width: 100px; height:44px; display: flex; justify-content: center; align-items: center; border-radius: 6px; border: solid 1px #aaa; background: #fff; cursor: pointer; transition: 0.2s; font-weight: bold; margin:0 10px 5px 0;}
#new-bukken .new-bukken-area li:hover{ background: #eee; border: solid 1px #008342;}
#new-bukken .new-bukken-area li.active{ color: #fff; background: #008342; border: solid 1px #008342; pointer-events: none;}
/**/
#new-bukken .new-bukken-list{ display: none;}
#new-bukken .new-bukken-list.active{ display: block;}
#new-bukken .new-bukken-list h3{ display: flex; align-items: center; font-size: 14px; margin:20px 18px 10px;}
#new-bukken .new-bukken-list h3 a{ margin-left: 15px; font-size: 11px; color: #1a0dab; border: solid 1px #1a0dab; border-radius: 2px; padding: 1px 4px; background: none; font-weight: 500; transition: 0.2s;}
#new-bukken .new-bukken-list h3 a:hover{ background:#1a0dab; color: #fff; }
#new-bukken .new-bukken-list .infoTxt{ width: calc(100 - 36px); display: block; font-size: 12px; margin:15px 18px 0; padding: 5px; background: #f5f5f5; border-radius: 2px;}
#new-bukken .new-bukken-list p.nobukken{ display: flex; align-items: center; font-size: 12px; margin:10px 18px; padding: 10px; background: #ddd; border-radius: 4px;}
#new-bukken .new-bukken-list p.nobukken a{ display: inline; text-decoration: underline;}
#new-bukken .new-bukken-list p.nobukken a:hover{ text-decoration: none;}


#new-bukken .new-bukken-list .bx-wrapper{ padding:0 10px; max-width: 928px !important;}
#new-bukken .new-bukken-list .bx-wrapper .bx-controls-direction a{ background-color: #008342; border: none;}
#new-bukken .new-bukken-list .bx-wrapper .bx-controls-direction a.disabled{ background-color:transparent;}

#new-bukken .new-bukken-list .imagebox { width: 100%; height: 130px;  display: flex; justify-content: center; align-items: center;}

#new-bukken .new-bukken-list .imagebox img{ position: relative; top: auto; left: auto; width: auto; transform:none; max-width: 100%; max-height: 100%; height:auto;}
/*slider*/
#new-bukken .new-bukken-list .bx-viewport{ height: auto !important;}
#new-bukken .new-bukken-list .slideArea .slideBox{ float: left; list-style: none; position: relative; width: 175px !important; border: 1px solid #ddd; margin-right: 7px;}
#new-bukken .new-bukken-list .slideArea .slideBox .txtBox{ padding: 5px;}
#new-bukken .new-bukken-list .slideArea .slideBox .txtBox .name{ min-height: 44px; display: flex; align-items: center; font-size: 13px; font-weight: bold; text-decoration: none; padding: 5px 0; margin: 0;}

#new-bukken .new-bukken-list .slideArea .slideBox .txtBox p{ display: flex; justify-content: space-between; align-items: center; color: #444;}
#new-bukken .new-bukken-list .slideArea .slideBox .txtBox .info{}
#new-bukken .new-bukken-list .slideArea .slideBox .txtBox .info .price{ font-size: 12px; color: #d75a45; font-weight: bold;}
#new-bukken .new-bukken-list .slideArea .slideBox .txtBox .info .type{ font-size: 10px; padding: 2px 4px; border: solid 1px #ccc; color: #444;}

#new-bukken .new-bukken-list .slideArea .slideBox .txtBox .dtl{ font-size: 12px; padding-bottom: 5px;}

/*slider btn*/
#new-bukken .new-bukken-list .bx-controls-direction a { margin-top: -80px; outline: 0; width: 22px; height: 160px; position: absolute; top: 50%; z-index: 9;}
#new-bukken .new-bukken-list .bx-prev { left: -25px;}
#new-bukken .new-bukken-list .bx-next { right: -25px;}
#new-bukken .new-bukken-list .bx-wrapper .bx-pager{ display: none !important;}