﻿@charset "utf-8";



.hr_seller {
	border-top: 2px dashed #3a94df;
	margin: 20px 0;
}
/***************メイントップ　左側　コウレプ宣伝用バナー　*****************/


/* 生体出品注意事項ここから */
.title_tyuui{
	text-align: center;
	font-size: 20px;
	font-weight: bold;
}

.text_tyuui{
	padding: 10px;
}

.dawnFlexbox{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto;
}


.dawn-box {
	width: 30%;
}

/* seller出品者様お問い合わせここから */

table.tb_rws {
	border-collapse: collapse;
	width: 100%;
  }
  table.tb_rws th, table.tb_rws td {
	border: solid 1px rgb(83, 83, 83);
	padding: 10px;
  }
  table.tb_rws th {
	background-color: #e7eef5;
  }

  /* seller出品者様お問い合わせここまで */
	#exh_box {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: space-between;
	  /* justify-content: start; */
	  margin-top: 30px;
	  margin-bottom: 10px;
	}

	/* #exh_box::after {
		display: block;
		content:"";
		width: 33.33%;
		} */


	.mini_box {
		width:  calc(33.33% - 10px); /* 3列で表示、間隔を10pxに設定 */
		background: #fff;
		border: solid #333 1px;
		font-weight: bold;
		text-align: center;
		box-sizing: border-box;
	
		margin-bottom: 10px; /* 間隔を10pxに設定 */


		display: flex;
		flex-direction: column; /* 子要素を縦に配置 */
		/* align-items: flex-end;  p要素を下揃え */
		align-items: center; /* 子要素を中央に配置 */
		justify-content: center; /* 子要素を中央に配置 */
		box-sizing:border-box;
		z-index: 1;
	}

	.mini_box-giji {
		width:  calc(33.33% - 10px); /* 3列で表示、間隔を10pxに設定 */
	}



	/* 最後の要素にマージンを適用しないためのスタイル */
/* .mini_box:last-child {
	margin-right: 0;
  } */

	.mini_box div {
		flex: 1; /* 子要素の高さを均等に分配 */
		display: flex;
		justify-content: center; /* 水平方向の中央寄せ */
		align-items: center; /* 垂直方向の中央寄せ */
		padding: 5px;
		height: 150px;
		width: 150px;
		/* background-color: #ff0000; */
		margin: auto;
		box-sizing:border-box;
	}

	.mini_box a {
	  display: block;
	}

	.mini_box img {
	  max-width: 100%;
	  max-height: 100%;
	  width: auto;
	  height: auto;

	}

	/* .mini_box div img {
	  margin: auto;

	} */


	.mini_box p a {
	  background: #333;
	  color: #fff;
	  display: block;
	  text-align: center;
	  padding: 5px;
	}

	.mini_box p {
	  background: #333;
	  color: #fff;
	  margin: 0;
	  padding: 5px;
	  font-size: 11px;
	  word-break: break-all;
		width: 100%;
		margin-top: auto; /* p要素を一番下に配置 */

 		height: 70px;
	}

	.mini_box p img{
		width: 25px;
		height: auto;
	}

#exh_box a img{
	opacity:1!important;}

.mini_box a:hover{
	opacity:0.7;
}
/*----------#exh_form----------*/



/*=========================================
450pxまでのスマホの設定
===========================================*/
@media (max-width: 450px) {
	.mini_box {
		width:  calc(33.2% - 5px); /* 3列で表示、間隔を10pxに設定 */
	}

	.mini_box-giji {
		width:  calc(33.2% - 5px); /* 3列で表示、間隔を10pxに設定 */
	}

	.mini_box img {
		width: 78%;
		height: auto;
  
	  } 

	  .mini_box p {
		   height: 78px;
	  }

  }


/*=========================================
タブレット・PCサイズの設定
===========================================*/

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


	/* #exh_box::after {
		display: block;
		content:"";
		width: 25%;
		} */


	.mini_box {
		width:  calc(25% - 10px); /* 3列で表示、間隔は10px */
	  }

	  .mini_box-giji {
		width:  calc(25% - 10px); /* 3列で表示、間隔を10pxに設定 */
	}
  
	  .mini_box p {
		font-size: 14px;
	  }

}


/*=========================================
PCサイズの設定
===========================================*/

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

	



	.mini_box {
		width:  calc(20% - 10px); /* 3列で表示、間隔は10px */
	  }
	  .mini_box-giji {
		width:  calc(20% - 10px); /* 3列で表示、間隔を10pxに設定 */
	}
	

  }
