/* card-containerクラスを使用して、カードを4列並べて表示しています。また、カードの幅は25%で、margin-bottom: 16px;の設定により、カード間にスペースが空きます。
ただし、レスポンシブデザインを実装しているため、画面サイズによってカードの表示方法が変わります。768px以下の画面では、カードを2列に、480px以下の画面では、カードを1列に表示します。
by AI */

.card-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.card {
	width: calc(25% - 16px);
	background-color: #fff;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	padding: 16px;
	box-sizing: border-box;
	margin-bottom: 16px;
}

.card_nop {
	width: calc(25% - 16px);
	/* background-color: #fff; */
	/* border-radius: 4px; */
	/* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
	padding: 16px;
	box-sizing: border-box;
	margin-bottom: 16px;
}

.img-wrapper{
    /* 下記追加 2023/04/14 */
    text-align: center;
}


.img-wrapper img{
	/* width: 100%; */
	width: 50%;/* カードの中身の画像のサイズを変更 */
	vertical-align: bottom;

    /* 写真フレームの設定 */
	padding:7px;
	border:1px solid #ccc;
	background:#fff;
	box-shadow: 1px 1px 5px rgba(20,20,20,0.2);
}

.content-wrapper{
	padding: 8px 0;
}

.content-wrapper .heading{
	margin: 0 0 8px;
    /* 下記追加 2023/04/14 */
    text-align: center;
}

.content-wrapper .text{
	margin: 0;
	font-size: 14px;
} 


@media (max-width: 768px) {
	.card {
		width: calc(50% - 16px);
	}
}

@media (max-width: 480px) {
	.card {
		width: 100%;
	}
}




/* その他 */
/* .rdo_lab_week { */
	/* width: 80px; */
/* } */

.inp_confirm {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    border-spacing: 0;
    border: solid 1px #778ca3;
}
.inp_confirm tr {
    border-top: dashed 1px #778ca3;
}
.inp_confirm th {
    padding: 10px;
    background: #e9faf9;
    text-align: left;
}
.inp_confirm td {
    padding: 10px;
    text-align: left;
    white-space: pre-line;
}

.side_menu {
    text-align: center;
}

.side_price{
    font-size: medium;
}

.side_info{
    /* white-space: pre-line; */
    font-size: small;
    line-height: 2em;
    border-radius: 5px; border: 1px dashed #ffb6c1;font-size: 100%; padding: 20px;
}


.sys_ver {
    text-align: center;
    font-size: small;
}
.contact {
    text-align: center;
    font-size: small; 
}

.info {
    font-size: small;
    color: darkslateblue;
}

/* ワーニング表示 */
/* .warning {
	font-size: medium;
	color: blue;
} */

.warning {
  position: relative;
  display: inline-block;
  padding-left: 20px;
  /* color: #333; */
  color: blue;
  text-decoration: none;
}
.warning:before {
  content: '';
  width: 18px;
  height: 18px;
  /* background: #333; */
  background: red;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: -3px;
  margin-top: -9px;
}
.warning:after {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -4px;
  transform: rotate(45deg);
}