@charset "UTF-8";

@media (min-width: 576px) {
  .container-sm, .container {
    max-width: 100%;
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: 100%;
  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
}
@media (min-width: 1500px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1440px;
  }
}

.sidenav-dark {
	background-color:#454B4B !important;
}

.sidenav-dark .sidenav-menu .nav-link {
    color: rgba(255, 255, 255, 0.8);
}

.header-simple {
	background-color:#000 !important;
}

.card:not([class*=bg-]) .card-header {
  color: #333;
  font-weight:bold;
}

/*フォーム*/
form select.form-control {
  font-size:16px;
  height: calc(1em + 1.75rem + 2px);
  padding: 0.2rem 1.125rem 0.2rem 0.7rem;
}

form input.form-control {
  font-size:16px;
}

#message {
  font-size:16px;
}

form textarea.form-control {
  font-size:16px;
}

form input.fileup {
  height: calc(1em + 1.75rem);
}

input[type="number"]::-webkit-outer-spin-button, 
input[type="number"]::-webkit-inner-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
} 

input[type="number"] { 
  -moz-appearance:textfield; 
} 

.confirm dl {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
.confirm dt {
  font-weight:bold;
  flex-basis: 25%;
  padding: 15px;
  margin:0;
  background-color: #f1f1f1;
  border-bottom: 1px solid #ccc;
}
.confirm dd {
  font-size:1em;
  flex-basis: 75%;
  padding: 15px;
  margin:0;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}
@media screen and (max-width: 768px) {
.confirm dl {
  flex-flow: column;
}
}

/*物件登録*/
.img_preview {
  display: flex;
  flex-flow: wrap;
}

.img_preview div {
  display: flex;
  flex-flow: column;
  width:100%;
  padding:10px;
}

@media (min-width: 768px) {
  .img_preview div {
	width:50%;
  }
}

@media (min-width: 1500px) {
  .img_preview div {
	width:25%;
  }
}

.img_preview div span {
  width:100%;
  padding:10px;
  font-size:13px;
  font-weight:bold;
  color: #7f5400;
  background-color:#fdeccc;
  text-align:center;
}

.img_preview div a{
  width:100%;
  padding:10px;
  border: solid 1px #fdeccc;
  height: 100%;
}

.img_preview div a img{
  width:100%;
}

/*物件一覧*/

.relist dl {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  font-size:0.85rem;
}
.relist dt {
  font-weight:bold;
  flex-basis: 20%;
  padding: 15px;
  margin:0;
  background-color: #f1f1f1;
  border-bottom: 1px solid #ccc;
}
.relist dd {
  font-size:1em;
  flex-basis: 80%;
  padding: 15px;
  margin:0;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}

@media screen and (max-width: 768px) {

.relist dt {
  flex-basis: 33%;
}

.relist dd {
  flex-basis: 67%;
}

}

/*==// スライダーのコンテナ //==*/
.slider{
  width:100%;/* スライダーの幅を指定*/
  aspect-ratio: 4 / 3;
  overflow:hidden;
  margin:0;
  padding:0;
}

.slider img {
  width:100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.slick-arrow{ z-index:100; }
.slick-next{ right:10px;}/*内側に右から10ピクセル移動*/
.slick-prev{ left:10px; }/*内側に左から10ピクセル移動*/

.slider_thumbnail {
  position: relative;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.slider_thumbnail .thumbnail-img{
  position: relative;
  cursor: pointer;
  overflow: hidden;
  width: 19.5%;
  height: 100%;
  margin-top: 0.5%;
  margin-right: 0.5%;
  padding: 0;
}
.slider_thumbnail .thumbnail-img img {
  width:100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

a.card_link {
  position: absolute;
  inset: 0;
  height:100%;
  z-index:90;
}

a.card_link {
  position: absolute;
  inset: 0;
  height:100%;
  z-index:90;
}

a.card_link:hover {
  background-color: #F08200;
  opacity: 0.02;
}

.a-price_number {
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.5em;
	color:#F00;
}

.a-price_unit {
    font-size: 1em;
	font-weight: bold;
	color:#F00;
}

.a-price_tax {
    font-size: 0.8em;
	color:#F00;
}

/*chat*/

#chat-container {
  height: 450px;
  border: 1px solid #ccc;
  overflow-y: scroll;
  padding: 20px 15px;
}

#chat-container::-webkit-scrollbar{
   width: 8px;
}
#chat-container::-webkit-scrollbar-track{
   background-color: #F7F7F7;
}
#chat-container::-webkit-scrollbar-thumb{
   background-color: #ccc;
}

.mes_area {
	width:100%;
	display: flex;
	justify-content: space-between;
}

.mes_time {
	width:100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom:10px;
	font-size:10px;
	line-height:10px;
}
.mes_time i {
	margin-right:5px;
	color:#999;
}

.mes_icon {
    width:10%;
	display: flex;
	flex-direction: column;
	align-items: center;
	
}

.mes_icon i {
	padding-bottom:5px;
}

.mes_icon div {
	font-size:9px;
}

.mes_box {
    width:88%;
    border: 1px solid transparent;
    border-radius: 10px;
    -webkit-box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
    box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
	padding: 15px;
	position: relative;
	margin-bottom:10px;
}

.mes_box p {
	font-size:14px;
	margin:0;
}

.m_user .mes_box {
  background-color:#F2F2F2;
}

.m_user .mes_box:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 5px;
  right: -20px;
  border: 8px solid transparent;
  border-left: 18px solid #F2F2F2;
  -webkit-transform: rotate(335deg);
  transform: rotate(335deg);
}

.m_user .mes_icon i {
	color:#F90;
	font-size:20px;
}

.m_user .mes_box p{
	color:#333;
}

.m_admin .mes_box {
  background-color:#FC6;
}

.m_admin .mes_box:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 5px; 
  left: -20px;
  border: 8px solid transparent;
  border-right: 18px solid #FC6;
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
}

.m_admin .mes_icon i {
	color:#999;
	font-size:18px;
}

.m_admin .mes_box p{
	color:#333;
}

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

.m_user .mes_icon i {
	color:#F90;
	font-size:38px;
}

.m_admin .mes_icon i {
	color:#999;
	font-size:36px;
}

}


/*テーブル*/
.table-responsive table th {
  white-space:nowrap;
  background:#F2F2F2;
}

.table-responsive table td {
  white-space:nowrap;
}

/*ローダー*/

#loader-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: rgba(255,255,255,0.8);
  z-index: 2000;
  display:none;

}

#loader {
  height:auto;
  text-align: center;
  color: #af9b65;
  margin-top:-50px;
  font-size: 18px;
  font-weight: 700;
}


/*汎用*/

.min100 {
  min-width:100%;
}

.small2 {
    font-size: 0.875em;
    font-weight: 800;
}

.bg_pink {
	background-color:#FCF;
}

.bg_orange {
	background-color:#FFF1EA;
}