@charset "utf-8";

/*---- 共通 
----------------------------------------------------------------------------*/

.conTtl { font-size: 24px; border-bottom: 1px solid #46af32; }

#contents { margin: 34px auto 100px; }

#pan { padding: 10px 0; }
#pan li { float: left; margin-left: 7px; font-size: 12px; }
#pan li:not(:last-child):after { content: ">"; padding-left: 7px; }
#pan li a { color: #46af32; }

.pagettl { height: 200px; background: url("../img/top/slide01.jpg") no-repeat top center / cover; position: relative; }
.pagettl .pageCon { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.pagettl .txt { line-height: 1; }
.pagettl .txt .en { margin-left: 13px; padding-bottom: 5px; font-size: 16px; color: #46af32; }
.pagettl .txt .jp { font-size: 34px; }

.conWrap { padding:60px 0 0; }
#main { float:right; width:750px; }
#side { float:left; width:200px; }
.side_ttl { margin:0 0 13px; padding:8px 0; text-align:center; background: #fff110; position: relative; }
.side_ttl:after { content: ""; position: absolute; left: 0; bottom: -8px; width: 0; height: 0; border-style: solid; border-width: 8px 0 0 8px;
border-color: #666 transparent transparent transparent; }
.side_ttl span { position:relative; display:inline-block; line-height:1; padding-left:25px; }
.side_ttl span:before { content:""; position:absolute; left:0; width:16px; height:16px; background:no-repeat 0 0 / 100%; }
.side_ttl.i_cat span:before { background-image:url(/img/icon_house2.svg); }
.side_ttl.i_type span:before { background-image:url(/img/icon_building.svg); }
.side_ttl.i_area span:before { background-image:url(/img/icon_marker.svg); }

.side_nav { margin-bottom:34px; margin-left: 10px; }
.side_nav li:not(.sub) { position:relative; margin-bottom:12px; border-bottom:1px solid #46af32; }
.side_nav li a { display:block; padding:5px 8px 5px 13px; }
.side_nav li:not(.sub):before { content:""; position:absolute; right:0; bottom: 0; width:0; height:0; border-style:solid;
 border-width:8px 0 0 8px; border-color:transparent transparent transparent #46af32; }
.side_nav .area_name { display:block; padding:9px 13px 6px; line-height:1; background:#fff110; }
.side_nav .sub ul { margin:5px 0 20px; }

.side_btn { margin-bottom:34px; }
.side_btn li { margin-bottom:5px; }
.side_btn li a { display:block; margin-bottom:5px; padding:8px 16px; color:#fff; background:#46af32; }
.side_btn li a:hover { background:#46af32; }
.side_btn li i { margin-right:.5em; }
.side_btn li i.i_search { display:inline-block; width:1em; height:1em; vertical-align:middle; background:url(../img/icon_search_wh.svg) no-repeat 0 0 / 100%; }

/*ボタン
.btn a{ position:relative; display:inline-block; padding:11px 80px 9px 50px; text-align:center; color:#46af32; border:1px solid #46af32; }
.btn a:hover { color:#fff; background-color:#46af32; }
.btn a:before , .btn a:after { display:block; content:""; position:absolute; }
.btn a:after { top:19px; right:23px; height:8px; border-right:1px solid #46af32; -webkit-transform: rotate(-45deg); transform:rotate(-45deg); }
.btn a:before { top:24px; right:20px; width:26px; height:1px; background-color:#46af32; }
.btn a:hover:before { background-color:#fff; }
.btn a:hover:after { border-color:#fff; }
*/

/*---- gnav ----------------------------------------------------------------------------*/
#gnav > ul > li { position: relative; }
#gnav > ul > li .sub { display: none; position: absolute; top: 49px; left: 0; width: 100%; z-index: 20; }
#gnav > ul > li .sub li:not(:last-child) { border-bottom: 1px solid #fff; }
#gnav > ul > li .sub li a { display: block; padding: 8px 13px 5px; text-align: left; color: #fff; background: rgba(70, 175, 50, 0.8); }
#gnav > ul > li .sub li a:hover { color: #46af32; background: rgba(255, 255, 255, 0.8); }

#gnav > ul > li.active .sub { display: block; }

/*---- 物件検索 ----------------------------------------------------------------------------*/
/*--- contects nav ---*/
.con_nav1 { margin-top:40px; margin-bottom:70px; }
.con_nav1 ul li { width:48%; }
.con_nav1 ul li:nth-child(2n+2) { margin-left:4%; }
.con_nav1 ul li:nth-child(n+3) { margin-top:10px; }
.con_nav1 ul li a { position:relative; display:block; width:100%; padding:10px 50px 10px 20px; text-align:center; color:#46af32; border:1px solid #46af32; }
.con_nav1 ul li a:hover, .con_nav1 ul li a.active { color:#fff; background:#46af32; }
.arrow span:before , .arrow span:after { display:block; content:""; position:absolute; background-color:#46af32; }
.arrow span:before { top:25px; right:20px; width:26px; height:1px; }
.arrow span:after { top:18px; right:23px; width:1px; height:8px; -webkit-transform: rotate(-45deg); transform:rotate(-45deg); }
.arrow a:hover span:before, .arrow a.active span:before,
.arrow a:hover span:after, .arrow a.active span:after { background-color:#fff; }

.select_con,
.cat_select { display:none; }
.bukken .con_nav1 ul li { width:24%; }
#buy .bukken .con_nav1 ul li { width: 32%; }
.bukken .con_nav1 ul li:nth-child(2n+2),
.bukken .con_nav1 ul li:nth-child(n+3) { margin:0; }

/*左上三角マークボックス*/
.triangle { position:relative; }
.triangle:before { position: absolute; top: 0; left: 0; content: ""; width: 0; height: 0; border-style: solid; border-width: 0 0 120px 120px; border-color: transparent transparent transparent #b5e8f5; }
.triangle img{ position:relative; z-index:1; }
.tbox { margin-bottom:40px; padding: 30px; border: 1px solid #d2d2d2; background: #fff; }
.tbox .number { position: relative; z-index: 1; float: left; margin-right: 20px; color: #02a4cc; font-size: 56px; }
.tbox .ttl { position: relative; z-index:1; padding: 20px 0 0; margin: 10px 0; color: #02a4cc; font-size: 20px; }
.tbox .txt_area { position: relative; z-index:1; }

/*--- title ---*/
/*.conttl1 { position:relative; text-align:center; margin: -63px auto 45px; padding-top: 103px;}
.conttl1 .en { display:inline-block; padding:0 10px 33px; border-bottom:1px solid #d71313; color:#737373; font-size:45px; letter-spacing:5px; line-height:1.2; }
.conttl1 .en:first-letter { color:#d71313; }
.conttl1 .jp { position:absolute; bottom:10px; right:0; left:0; display:block; margin-top:-8px; }

.conttl2 { position:relative; width:100%; padding:13px 10px 12px 70px; margin:60px 0 30px; color:#fff; font-size:22px; background:#005378; }
.conttl2.red{ background:#df333b; }
.conttl2.green{ background:#46af32; }
.conttl2.glay{ background:#3c4a51; }
.conttl2.lightblue{ background:#3a86e7; }
.conttl2.blue{ background:#0445a3; }
.conttl2.red{ background:#df333b; }

.conttl2:before { position: absolute; top: 27%; left: 35px; content:url(../img/icon_house.svg); width: 20px; }
.conttl2:after { position:absolute; top:0; left:0; content:""; width: 0; height: 0; border-style:solid; border-width:0 0 75px 83px; border-color:transparent transparent  transparent rgba(255,255,255,0.2); }
*/
.subttl { margin-bottom:1.2em; padding-bottom:.2em; padding-left:.2em; font-size:24px; text-align:left; border-bottom:1px solid #46af32; position: relative; }
.subttl .en { margin-left:0.5em; font-size:.7em; color: #46af32; }
.subttl:before { content: ""; position: absolute; bottom: -1px; left: 0; width: 30%; border-bottom: solid 1px #fff110; }
.detail .subttl { margin-bottom:.8em; }

.ttl_detaile { position:relative; margin-bottom:1em; padding-bottom:.5em; font-size:24px; border-bottom:1px solid #46af32; }
.ttl_detaile span {display:inline-block; margin-right:1em; padding:.4em .8em;  font-size:.6em; vertical-align:.2em; background: #fff110; }

.ttl_detaile span + span { margin-left:-.5em; }

/*--- table ---*/
.tbl { width:100%; border-collapse:collapse; background:#fff; }
.tbl tr > * { border-bottom:1px solid #d4d4d4; padding:15px 25px 12px; }
.tbl th { width:22%; text-align:left; font-weight:lighter; /*background:#eee;*/ border-bottom: 2px solid #444; }
.tbl .town td { background:#FFF; }
.tbl .submit { margin-top:30px; text-align:center; }
.tbl dt { float:left; width:120px; }
.tbl dd { padding-left:120px; }
.tbl .qualification dt { float:left; width:330px; }
.tbl .qualification dd { padding-left:330px; }

.tbl { width:100%; border-collapse:collapse; background:#fff; border: 1px solid #ccc; }
.tbl tr > * { border-bottom:1px solid #d4d4d4; padding:10px; }
.tbl th { width:22%; text-align:left; color: #fff; background: rgba(70, 175, 50, 0.8); border-bottom: 1px solid #fff; }

/*--- form ---*/
form .txt { margin: 21px auto; }
.submit { margin-top:30px; text-align: center; }
.submit input[type="submit"] { padding:10px 36px; color:#222; border:none; background: #fff110; border-radius: 0; cursor:pointer; -webkit-transition:all .3s; transition:all .3s; -webkit-appearance: none; appearance: none; }
.submit input[type="submit"]:hover { color: #fff; background:#46af32; }

.submit input[type="button"] { padding:10px 36px; color:#fff; border:none; background: #666; border-radius: 0; cursor:pointer; -webkit-transition:all .3s; transition:all .3s; -webkit-appearance: none; appearance: none; }
.submit input[type="button"]:hover { color: #fff; background:#ccc; }

#contact .thanks { margin: 34px auto 0; }
#contact .thanks .ttl { color: #46af32; margin-bottom: 21px; }

.btn_submit { padding:12px 33px; color:#fff; font-size:1.067em; border:none; background:#d71313;
 -webkit-transition:all .3s; transition:all .3s; }
.btn_submit:focus { outline:none; }
.btn_submit:hover { background:#ab1c1c; }
.btn_submit.back { background:#3c4a51; }
.btn_submit.back:hover { background:#20272b; }


/* ---- ページ送り -------------------- */
.pagination{ clear:both; margin:20px 0; text-align:center; }
.pagination a, .pagination span { display:inline-block; margin:3px; padding:2px 12px; }
.pagination a{ color:#333; text-decoration:none; background-color:#FFF; border:1px solid #666; transition: all .3s; -webkit-transition: all .3s; }
.pagination a:hover{ color:#666; background-color:#f2f2f2; }
.pagination span.current{ color:#FFF; background-color:#666; border:1px solid #666; }
.pagination span.disabled { border:1px solid #CCC; color:#CCC; }

/* ---- 詳細ページスライダー -------------------- */
.slider_area { margin-bottom:40px; padding:30px 70px; text-align:center; background:#f2f2f2; }
.slider-nav-container { margin-top:20px; position:relative; }
.slider-nav-container p { display:none;  }
.slider_area .caption { width:100%; padding:.5em 0 0; text-align:center; }

.slick-slide:focus,
.slick-slide a:focus,
.slick-arrow:focus { outline:none; }

.slider_area .slick-arrow { position:absolute; top:45%; z-index:1; width:30px; height:30px; margin-top:-10px; padding:0; font-size:0; color:transparent; background:none; border:none; cursor:pointer; }
.slider_area .slick-arrow:focus { outline:none; }
.slider_area .slick-arrow:before { content:""; position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:1px; margin:auto; background:#d71313 }
.slider_area .slick-arrow:after  { content:""; position:absolute; top:0; bottom:0; width:30%; height:1px; margin:auto; background:#d71313; }

.slider_area .slick-prev { left:-50px; }
.slider_area .slick-next { right:-50px; }

.slider_area .slick-prev:after { left:0; -webkit-transform:translateY(-3px) rotate(-45deg); transform:translateY(-3px) rotate(-45deg); }
.slider_area .slick-next:after { right:0; -webkit-transform:translateY(-3px) rotate(45deg); transform:translateY(-3px) rotate(45deg); }

.slider-container .slick-slide { width:100%; height:100%;
  display:-webkit-flex; display:flex;
  -webkit-flex-wrap:wrap; flex-wrap:wrap;
  -webkit-align-content:center; align-content:center;
  -webkit-align-items:center; align-items:center; }
.slider-container .slick-slide img { max-height:550px; margin:0 auto; -webkit-flex:none; flex:none; }
.slider-nav-container .slick-slide { max-height:90px; overflow:hidden;  }
/*----- 借りたい -------------------------*/
.detail #mapCanvas { height:320px; }

.bn_smilebox{ width:100%; text-align:center; }

/*スマイルボックス*/
#smilebox .what { flex-direction : -webkit-row-reverse; flex-direction : row-reverse; margin-bottom:60px; }
#smilebox .what figure { width:45%; }
#smilebox .what .txt_area { width:50%; }
#smilebox .what .txt ,
#smilebox .appli .txt { margin-bottom:30px; }
#smilebox .what .txt span ,
#smilebox .appli .txt span { font-size:25px; color:#d71313; }
#smilebox .what .use { margin-top:50px; }
#smilebox .what .use li { width:105px; height:105px; padding:24px 10px 0; text-align:center; color:#fff; border-radius:50%; background:#01abd5; line-height: 1.3; }
#smilebox .what .use li:nth-child(-n+2) { padding-top:35px; }
#smilebox .what .use li span{ font-size:18px; }
#smilebox .photo li { width:30%; margin-bottom:20px; text-align:center; }
#smilebox .appli_photo li { width:48%; margin-bottom:30px; text-align:center; }
#smilebox .appli_photo li .ttl { margin:10px 0; color:#01abd5; font-size:22px; }
#smilebox .appli_photo li .txt{ max-width:380px; margin:0 auto; }


.contact_area { position:relative; margin-top: 100px; padding:2px; border:2px solid #3c4a51; }
.contact_area .inside { padding:40px; border:1px solid #3c4a51; }
.contact_area .en { position:absolute; top:-58px; left:0; display: inline-block; color: #737373; font-size: 45px; letter-spacing: 5px; }
.contact_area .en:first-letter { color:#d71313; }
.contact_area .ttl { position:absolute; top:-32px; left:260px; font-size:17px; }
.contact_area .tel_area { clear:both; width:60%; }
.contact_area .con_ttl{ position:relative; float:left; width:110px; margin-right:30px; padding:15px; color:#fff; background:#d71313; }
.contact_area .con_ttl:before { position:absolute; top:0; right:-20px; width:0; height:0; content:""; border-style: solid; border-width: 45px 0 39px 20px; border-color: transparent transparent transparent #d71313; }
.contact_area .free { font-size:20px; color:#d71313; font-weight:bold; }
.contact_area .name { font-size:20px; }
.contact_area .tel{ font-size:50px; line-height: 0.9; }
.contact_area .mail { position:relative; width:40%; }
.contact_area .mail:before{ position:absolute; top: 34px; left: 10%; z-index:1; display:inline-block; content:""; width:24px; height:16px; background:url(../img/icon_mail.png) no-repeat; background-size:contain; }
.contact_area .mail a { display:block; width:100%; padding:26px 0 21px; font-size:20px; text-align:center; color:#fff; background:#d71313; }
.contact_area .mail a:hover { background:#666; }
.contact_area .mail a span:before { top:44px; right:20px; width:26px; height:1px; background-color:#fff; }
.contact_area .mail a span:after { top:37px; right:23px; height:8px; border-right:1px solid #fff; -webkit-transform: rotate(-45deg); transform:rotate(-45deg); }


/*----- 貸したい -------------------------*/
#lend #wrapper { overflow:visible; }
#lend header{ margin-top:-103px; }
.rental .lead { color:#d71313; font-size:20px; text-align:center; background:url(../lend/img/rental1.jpg) no-repeat 0 50%,url(../lend/img/rental2.jpg) no-repeat 100% 50%; }
.rental .txt { margin:40px 0 30px; }
.rental_list > li { position:relative; width:18%; padding:10px 20px 15px; color:#fff; background:#01abd5; }
.rental_list > li:after { position: absolute; top: 50%; right: -40px; content: ""; width: 40px; border-top: 3px solid #d71313; }
.rental_list > li:last-child:after { border:none; }
.rental_list li .number { position:relative; z-index:1; float:left; margin-right:20px; font-size:56px; }
.rental_list li .ttl { margin:10px 0; }
.rental_list > li > ul > li { clear:both; font-size:13px; }
.rental_list .triangle:before { border-color: transparent transparent transparent rgba(255,255,255,0.2); }

#cycle { margin-bottom: 100px; }
#cycle .lead { width:100%; max-width:630px; margin:90px auto 30px; padding:30px 30px; font-size: 20px; text-align:center; color:#3c4a51; border:1px solid #3c4a51; }
.cycle_img { margin-bottom: 60px; text-align:center; }
#cycle .flow_list li{ width:46%; margin-bottom:60px; }
#cycle .flow_list li:last-child { margin-bottom:0; }
#cycle .flow_list .ttl { margin-bottom:10px; color:#02a4cc; font-size:20px; border-bottom: 1px solid #ccc; }

.building .lead { padding: 28px 0; color:#d71313; font-size:20px; text-align:center; background:url(../lend/img/building1.jpg) no-repeat 0 50%,url(../lend/img/building2.jpg) no-repeat 100% 50%; }
.building .txt { margin:40px 0 30px; }

.building_con .tbox { width:48%; margin-bottom: 40px; padding: 20px 30px 30px; }
.building_con .tbox .txt{ margin:15px 0 10px; }
.building_con .tbox figure { margin-top:-5px; }
.building dt{ float:left; width:250px; }
.building dd{ margin-left:250px; }


/*土地･建物の賃貸仲介*/
.agency { margin-bottom:100px; }
.agency .lead { margin-bottom:40px; color: #d71313; font-size: 20px; text-align: center; }
.agency .tbox .txt_area { float:right; width:70%; }
.agency .tbox figure { float:left; width:27%; }
.agency .tbox .ttl { padding:0; margin-top: -2px; }



/*----- 買いたい -------------------------*/
.bn_sale { width:100%; text-align:center; }

/*----- 企業情報 -------------------------*/
#company .conBox { margin-bottom: 55px; }
#company .conBox .tbl { margin: 21px auto; }
#company .conBox .tbl tr > * { padding: 15px; }

/*----------------------------------------------------
タブレット
-----------------------------------------------------*/
@media screen and (max-width: 999px) {
  #gnav > ul > li .sub { position: static; }
  #gnav > ul > li .sub li a { padding: 10px; }

  #contents { margin: 34px auto 55px; }

  #main { width: 75%; }
  #side { width: 23%; }

	.pagettl { height: 100px; background-position: top 15% center; background-size: 999px auto; }
	.pagettl .pageCon { padding-top: 8px; }
	.pagettl .txt .jp { font-size: 26px; color: #fff; text-shadow: 1px 1px 0 #999; }
}

@media screen and (max-width: 768px) {
  #main, #side { float: none; width: 100%; }
  .bukken:not(.detail) { padding-top: 70px; position: relative; }
  .bukken:not(.detail) .side_btn { position: absolute; top: 0; left: 0; -webkit-display: flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; width: 100%; margin-bottom: 0; }
  .side_btn li { width: 32%; }
  .bukken.detail .side_btn { display: none; }
  .side_ttl { display: none; }

}


/*----------------------------------------------------
スマホ
-----------------------------------------------------*/
@media screen and (max-width: 599px) {
	#contents { margin: 21px auto 55px; }
	#pan { display: none; }
	.pagettl { background-size: 700px auto; }
	.pagettl .pageCon { padding-top: 5px; }

  .conTtl { font-size: 20px; }

  .tbl { border-bottom: none; }
  .tbl tr > * { display: block; }
  .tbl th { width:100%; }

  form .txt { text-align: left; }
  #contact .thanks .ttl { font-size: 1em; text-align: left; }

  .bukken:not(.detail) { padding-top: 170px; }
  .side_btn li { width: 100%; }
  .ttl_detaile { font-size: 22px; line-height: 1.4; }
  .ttl_detaile br.sp_only { margin-bottom: 13px; }
  .slider_area { padding: 30px; }
  
}

@media screen and (min-width: 600px) {
}

@media screen and (min-width: 1000px) {
  .narrow { padding: 0 30px; }

}