@charset "UTF-8";

/*指定したタグの余白をなくす*/
body,header,h1,h2,h3,p,ul,footer{margin: 0;
	padding: 0;}
body{font-family:  Avenir, "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, メイリオ, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
	#wrapper{margin: 0 auto;
		width: 100%;
		/*padding: 0 0px 0px 0;*/
		background-color:#fff;
		/* border:1px solid #f0ebeb; */
		/*border-top: none;
		border-bottom: none;*/
        overflow: hidden;
       /*  background-image:url(../image/bg.gif);*/
}

#container{overflow:hidden;
    margin: 0 auto;
    width: 90%;
    padding-top:128px;
}

						

/*パンくずリスト*/
.breadcrumb {
  margin-left: 0;
  padding-left: 0;
    font-size: 12px;
    
}

.breadcrumb li{
  display:inline;/*横に並ぶように*/
  list-style: none;
  font-weight:normal;/*太字*/
}

.breadcrumb li:after{/* ▶を表示*/
  font-family: "Font Awesome 5 Free";
  content: '\f0da';
  padding: 0 3px;
  color: #e1e1e1;
    font-weight:600;/*太字*/
}

.breadcrumb li:last-child:after{
  content: '';
}

.breadcrumb li{/*パンくず最後の文字の色*/
    color: #c1c1c1;
}
.breadcrumb li a {/*カーソルのせる前の文字*/
    text-decoration: none;
    color: #c1c1c1;
}

.breadcrumb li a:hover {/*カーソルのせた時のライン*/
    text-decoration: underline;
}

.breadcrumb li:first-child a:before{/*ホームアイコン*/
  font-family: "Font Awesome 5 Free";
    padding-left: 2px;
  content: '\f3c5';
  color: #e1e1e1;
    display: inline-block;/*ホームアイコンアンダーライン消す*/
    font-weight:600;/*太字*/
}



/*パンくずリスト終わり*/

/* フェイスブックアイコン */
						.fa-facebook{float: right;
						margin: -15px 0px 5px 0;
						color:#c1c1c1;
						font-size: 1.2em;
                            display: block;
                            /*display: none;*/
					}
					/*インスタグラムアイコン  */
					.fa-instagram{float: right;
            margin: 10px -17px 5px 0;
            color:#c1c1c1;
            font-size: 1.2em;
            display: block;            
                       /* display: none;*/
					}




/*main*/

main{overflow:hidden; 
width:70%;
margin-left: 50px; /*サイド作って左寄りにするとき*/ 
background-color: #fff;   
       /* float:left;*//*サイド作って左寄りにするとき*/
      margin: 100px auto;
      /*  margin-top:100px;*/
        margin-bottom: 10px;
        padding-bottom: 10px;
        /*border:solid 1px #f0ebeb;
        border-top:none;
        border-bottom: none;*/
        }

/*賃貸物件をお探しの方へ*/

main h2{padding-bottom:25px;
    padding-left: 2%;
    padding-right: 2%;    
    margin-top: 100px;
    margin-bottom: 60px;
    text-align:center;/*テキスト中央寄せ*/
       font-size: 26px;
       font-weight: lighter;
        color:#616161;  
  letter-spacing:0.3em;
    }
.topimg img{/*margin: 50px 0 100px 165px;*/
         /*margin: 50px 0 165px 19%;*/
    display: block;
    margin: 0 auto;
        padding-top: 50px;
    padding-bottom: 165px;
         max-width:60%;
        height: auto;
        /*object-fit: cover;*/ /*画像の縦横比を維持したままボックスを埋めたい時*/
							}


section{overflow:hidden;
    
}


main p{margin: 0px 50px 40px 50px;
    padding-bottom: 100px;   
color:/*#414347;*/#616161;
font-size: 15px;
line-height:4em;
/*border-bottom:solid 1px #f0ebeb;*/
    text-align: justify;/*文章の両はし揃える*/
    text-justify:inter-ideograph;/*文章の両はし揃える*/
        }

#contents{margin: 0 0 0 0px;
    width:90%;
    padding-left: 7%;
        }
/*居住用物件仲介*/
					
#contents{margin: 0 0 0 0px;
    width:90%;
    padding-left: 7%;
        }
/*居住用物件仲介*/
					
#contents a.detail {/*文章の枠*/
    			margin: /*0px -30px 16px 80px;*/
                    0px -1% 2% 3%;
                float:left;    
    			width: 41%; 
    			background-color:#fff;
                border: #E6E6E6 solid 1px;
    			border-radius:3px;
    			padding:10px;
               display: block;
                position: relative;/*相対位置*/
    /* box-shadow: 3px 4px 4px 2px rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.24); */
    			text-decoration: none;
              transition: .3s;
					display: block;
                
}

/*.icon i{width:360px;アイコンのサイズ
        height: 110px;
        text-align:center;中央にアイコンくる
    color:  #FFCA28;
		font-size: 6em;
    margin-top: 10px;
    display: table-cell;
    position: relative;
    vertical-align: middle;
                }*/
.image img { position: relative;
     width: 100%;
  height:240px;
  object-fit: cover;
    margin-bottom:-10px;
   /* opacity:0.7;*//*半透明*/
    }


/*画像上の文字と背景色*/
.image .post-title{position: absolute;
     z-index: 1;
    width: 100%;
                top: 86%;/*上から86％の位置*/
                left: 50%;/*左から半分の位置*/
     -ms-transform: translate(-50%,-50%);/*ずれの調整*/
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin:0 ;/*余計な隙間を除く*/
    padding-top:5%;
    padding-bottom: 12.9px;
    padding-right: 1px;
    color: white;/*文字色*/
    font-size:15px;/*サイズ*/
    letter-spacing:0.3em;/*文字幅*/
    opacity:0.9;/*半透明*/
    text-align:center;/*中央にアイコンくる*/
     display: table-cell;/*横に並べる*/
         width: calc(100% - 20px);
    background-color: #BABABA;/*背景色*/
  
}
.detail{opacity:0.8;/*半透明*/}
a.detail:hover{opacity:1;/*半透明取り消し*/}


/*写真と字が重ならないときの*/
/*.image img {
  width: 100%;
  height: 150px;
  object-fit: cover; 画像の縦横比を維持したままボックスを埋めたい時
     text-align:center;中央にアイコンくる
     display: table-cell;
    position: relative;
    vertical-align: middle;
    border-radius:3px;
    
}*/

/*
.detail section .post-title{カードの中の文字        color:#fff;文字の色
        font-size: 17px;
   
     text-align:center;中央にアイコンくる
    line-height: 1.6;文字幅
    width:360px;アイコンのサイズ

    background-color: #BABABA;
  
    display: table-cell;
    margin: 0;
    padding-left: 11px;
    height: 80px;
    vertical-align: middle;}

*/




/*ホバー時の影*/
#contents a.detail:hover{
	box-shadow: 5px 6px 6px 4px rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.24);/*影*/
	transition:.5s ease;
	text-decoration: none;
   
}
/*ホバーの時文字の色変わる*/
#contents a.detail .post-title:hover{color: #BABABA;
background-color:#fff;     
/*opacity:0.9;*/}

a.detail .image img:hover{opacity:1;/*半透明*/
     }
/*
#side{width: 25%;
			margin: 0 -20px 0 0px;
			float: right;
			}
#side .calendrier iframe{margin: 50px 0px 0 0px;}
*/




  #bas{width: 100%;}

.adress{margin: 20px ;
        margin-top: 50px;
        color:#545454;
        font-size: 17px;
        line-height:3em;
        font-weight: bold; 
        float: left;
        }
.adress li{list-style: none;}


#side{display: none;}
    /* 所在地 */
    .bureau{margin:30px auto;
  		padding: 0;
  		width: 91%;
  	     border:solid 1px #f0ebeb;
        border-top: none;
 	      border-left:none;
 	      border-right:none;
  		}

 		.bureau h3{color:#1a3f47;
 					 margin: 30px 0px 10px 0px;
 					 padding-top: 20px;
                    border-top:solid 1px #f0ebeb; 
                    border-left: none;
 					}

 /*  テーブル　地図左に*/
#bas .bureau table{float: left;
 			margin: 70px 0px 40px 10px;
 			color:#414347;
            border: none;
            text-align:left;
            width: 380px;
 	}
 	/* テーブル文字幅 */
 	.bureau tr,td{
 		padding: 5px;
        /*border: none;*/
        }
 

/* お問い合わせ ボタン*/
#fab {/*四角の部分*/
    display: block;
		margin: 30px auto;
    width: 140px;/*幅*/
    height: 56px;/*高さ*/
    background: #bababa;/*背景色*/
    text-align: center;/*中央寄せ*/
    border-radius: 2px;/*角丸く*/
    transition: .3s;/*滑らかな動きに*/
		box-shadow: 3px 4px 4px 2px rgba(0,0,0,.12),
		0 2px 2px 0 rgba(0,0,0,.24);
    /* box-shadow: 2px 5px 10px 5px rgba(0,0,0,.12), 0 3px px 0 rgba(0,0,0,.24);/*影*/ */
}

#fab:hover {/*ホバー時の影*/
  box-shadow: 4px 7px 13px 7px rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);
}

#fab i {/*中央のアイコン*/
  color: white;
  line-height: 56px;/*＝幅と高さ*/
  vertical-align: middle;
  font-size: 18px;/*サイズ*/
}

/*トップページへのボタン*/


#totop{
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 80%;
}

#totop a {
    display: block;
    
   /* background: #c7b897;
    opacity: 0.4;*/
    color: #e1e1e1;
    width: 80px;
    padding: 15px 0;
    text-align: center;
    text-decoration: none;
    border-radius: 10px;
}


	footer {width: 100%;
        height: 80px;
		margin: 25px 0 0 0px;
		padding: 10px 20px 10px 20px;
		text-align: center;
		
		border-top:1px solid #808080;
		background-color: #808080;
	}
footer p{font-size: 12px;
          color:#fff;
    margin: auto;
    margin-top: 20px;
}
  /* レスポンシブcss*/


/* 1264px以下の時 */
@media(max-width: 1264px) and (min-width: 961px) {

  body{
    margin: 0;
    padding: 0;
    background-color: grey; /* 作りやすい様に背景色 */
  }

  #wrapper{margin:0 auto;
		overflow: hidden;
    width: 100%; }

		
		 /*メイン  */
    main{width: 75%;
    margin: 100px 100px 30px 100px;
        
                }
    
    #contents{
    width:100%;
   /* padding-left: 7%;*/
        margin: 0 0px 0 -8%;/*小さな枠たちを少し左に寄せる*/
        }

					
#contents a.detail {/*文章の枠*/
    			margin: /*0px -30px 16px 80px;*/
                0px -1% 2% 2%;
                float:left;    
    width: 45.3%; }
    

			#bas iframe{width: 300px;
				height: 250px;
				margin:0;
			}
}

/* 960px以下の時 */
@media(max-width: 960px){

  body{
    margin: 0;
    padding: 0;
  }

  #wrapper{margin:0 auto;
    width: 100%; }

   
#container{overflow:hidden;
						margin: 0 auto;
						width: 100%;}


 
    
    
    
/*メイン  */
    main{width: 90%;
    padding-left: 5%;
    padding-right: 1%;
    /* border: none; */
    margin-left: 1%;
        margin-right: 1%;
}
    
   
    main p{width: 95%;
        margin: 0;     
    }
			
  #contents{
    width:100%;
    padding-right: 5%;
        margin: 50px 0px 0 -27%;/*小さな枠たちを少し左に寄せる*/
        }

					
#contents a.detail {/*文章の枠*/
    			margin: /*0px -30px 16px 80px;*/
                0px -16% 2% 19%;
    width: 43.5%; }
    
    

			#side{display: none;}


}
/*760px以下の時  */
  @media(max-width: 760px)and (min-width: 501px) {
      
        main p{width: 95%;
        margin: 0;
         }
			
  #contents{
    width:100%;
    padding-right: 5%;
        margin: 50px 0px 0 -27%;/*小さな枠たちを少し左に寄せる*/
        }

					
#contents a.detail {/*文章の枠*/
    			margin: /*0px -30px 16px 80px;*/
                0px -18% 2% 21%;
    width: 90%; }
    
 .image .post-title{position: absolute;
                top: 83.5%;/*上から86％の位置*/
                left: 50%;/*左から半分の位置*/
     -ms-transform: translate(-50%,-50%);/*ずれの調整*/
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin:0 ;/*余計な隙間を除く*/
    padding-bottom: 18px;  
}
      
}
/*500px以下の時  */
  @media(max-width: 500px){

body{
    margin: 0;
    padding: 0;
    background-color: grey; /* 作りやすい様に背景色 */
    	}

#wrapper{margin:0 auto;
        width: 100%; }

    		

#container{width:100%;}

		  .topimg{display: none;}





    main{width: 95%;
        margin: 20px 0px 15px 2%;
        padding: 0px;
        }
     
    main p{margin: 3%;
         padding:0px;
    }
		
      .image .post-title{position: absolute;
                top: 85%;/*上から86％の位置*/
                left: 50%;/*左から半分の位置*/
     -ms-transform: translate(-50%,-50%);/*ずれの調整*/
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin:0 ;/*余計な隙間を除く*/
    padding-bottom: 18px;  
}
 #contents{
    width:100%;
    padding-right: 5%;
        margin: 50px 0px 0 -27%;/*小さな枠たちを少し左に寄せる*/
        }

					
#contents a.detail {/*文章の枠*/
    			margin: /*0px -30px 16px 80px;*/
                0px -18% 2% 22%;
    width: 90%; }

.icon i{width: 400px;/* アイコン*/
    }


		#side{display: none;}
    table{max-width:100%}
   
		footer{width:100%;
			}
		}
  /* スマホ用500px終わりのカッコ*/