@charset "utf-8";
/* CSS Document */

.chiryo_container1 {
max-width: 1100px;  
margin: 0 auto;
padding: 25px;
display: grid;
grid-template-columns: repeat(3, 1fr); /* ← ここを固定に */
gap: 24px;
background-color: #E6F3EC;
border-radius: 8px;
}

.chiryo_container2 {
max-width: 1100px;  
margin: 0 auto;
padding: 25px;
display: grid;
grid-template-columns: repeat(3, 1fr); /* ← ここを固定に */
gap: 24px;
background-color: #E9EDF5;
border-radius: 8px;
margin-top: 40px;
}

.chiryo_container3 {
max-width: 1100px;  
margin: 0 auto;
padding: 25px;
display: grid;
grid-template-columns: repeat(3, 1fr); /* ← ここを固定に */
gap: 24px;
background-color: #F2F2F2;
border-radius: 8px;
margin-top: 40px;
}
.chiryo_tag_top{
	font-size: 22px;
	padding-left: 12px;
	font-weight: bold;
	letter-spacing:1px;
	color: #1A1A1;
	grid-column: 1 / -1;  /* 回り込み解除 */
	margin: 20px 0 10px 0; 
}

.ed-kuwashiku{
	font-size: 14px;
	background-color: #30649B;
	padding: 0px 5px 0px 5px;
	border-radius: 5px;
	color: #FFFFFF;
	font-weight: normal;
}

.chiryo_tag_top a {
display: inline-flex; /* ← 矢印とテキストを横並びに */
align-items: center;
background-color: #30649B;
color: #ffffff !important;
padding: 5px 10px;
text-decoration: none;
border-radius: 6px;
font-size: 14px;
transition: background-color 0.3s;
position: relative;
margin: 0 auto;
margin-top: auto; /* ← これでボタンを下に押し下げる */
}

.chiryo_tag_top a::after {
content: '';
display: inline-block;
width: 6px;
height: 6px;
margin-left: 8px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
}



.chiryo_tag{
	font-size:22px;
	padding-left: 12px;
	font-weight: bold;
	letter-spacing:2px;
	color: #1A1A1;
	grid-column: 1 / -1;  /* 回り込み解除 */
	margin: 30px 0 10px 0; 
}




/*.card {
	background-color: #FFFFFF;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding: 16px;
      text-align: center;
}*/

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* これが重要！ */
  background-color: #FFFFFF;
	/*border: solid 1px #C8C8C8;*/
  border-radius: 8px;
 box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  padding: 16px;
  text-align: center;
  max-height: 360px;
position: relative; /* ← ラベルの位置基準 */
}

.card img {
width: 100%;
height: auto;
max-height: 150px;
object-fit: contain;
margin-bottom: 5px;
}

.label_mens {
	position: absolute;
	top: 8px;
	left: 10px;
	background-color: #DBFBFC; 
	background: #DBFBFC;
	/*border:solid 1px #6BCDE5;*/
	color: #20378F;
	font-size: 12px;
	padding: 0 5px 0;
	border-radius: 4px;
	font-weight: bold;
	z-index: 1;
}
.label_womans {
	position: absolute;
	top: 8px;
	left: 10px;
	background: #FFDDDF;
	/*border:solid 1px #D1A6A7;*/
	color: #862756;
	font-size: 12px;
	padding: 0 5px 0;
	border-radius: 4px;
	font-weight: bold;
	z-index: 1;
}

.label_mens-womans{
	position: absolute;
	top: 8px;
	left: 8px;
	background: #DCF4C1;
	/*border:solid 1px #619731;*/
	color: #036708;
	font-size: 12px;
	padding: 0 5px 0;
	border-radius: 4px;
	font-weight: bold;
	z-index: 1;
}

.card h3 {
font-size: 16px;
margin: 5px 0;
}

.card-content {
 /*flex-grow: 1;*/
display: flex;
flex-direction: column;
padding: 5px 0 10px 0;
}

.card-content p {
font-size: 14px;
color: #555;
/*flex-grow: 1;*/
margin-bottom: 16px;
text-align: left;
text-align: justify;
}

.card a {
display: inline-flex; /* ← 矢印とテキストを横並びに */
align-items: center;
background-color: #007A3E;
color: #ffffff !important;
padding: 8px 16px;
text-decoration: none;
border-radius: 6px;
font-size: 14px;
transition: background-color 0.3s;
position: relative;
margin: 0 auto;
margin-top: auto; /* ← これでボタンを下に押し下げる */
}

.card a::after {
content: '';
display: inline-block;
width: 6px;
height: 6px;
margin-left: 8px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
}

.card a:hover {
background-color: #005F2E;
color: #FFFFFF;
}

/*治療一覧　AGAとEDへのアンカーリンクボタン*/
    .button-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      margin: 20px;
    }
    .btn-green {
      display: inline-block;
		/*background-color: #118300;明るめのグリーン*/
      background-color: #007A3E; /* 深めのグリーン */
      color:#fff !important;
      text-align: center;
      padding: 12px 24px;
      text-decoration: none;
      border-radius: 8px;
      font-size: 20px;
      width: 80%;
      max-width: 300px;
      transition: background-color 0.3s;
		letter-spacing: 1px;
    }
    .btn-green:hover {
      background-color: #00924F; /* ホバー時に少し明るく */
		  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: background-color 0.2s ease;
		
    }

    .btn-blue {
      display: inline-block;
		/*background-color: #1F5DA0;*//*明るめブルー*/
		background-color: #294878;/*深めのブルー*/
		/*background-color: #274C84;*/
		/*background-color: #204E7F;*/
		/*background-color: #005287;*/
      color:#fff !important;
      text-align: center;
      padding: 12px 24px;
      text-decoration: none;
      border-radius: 8px;
      font-size: 20px;
      width: 80%;
      max-width: 300px;
      transition: background-color 0.3s;
		letter-spacing: 1px;
    }
    .btn-blue:hover {
      background-color: #3A5D9C; /* ホバー時に少し明るく */
		  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: background-color 0.2s ease;
    }

    .btn-gray {
      display: inline-block;
		background-color: #8C8C8C;
      color:#fff !important;
      text-align: center;
      padding: 12px 24px;
      text-decoration: none;
      border-radius: 8px;
      font-size: 20px;
      width: 80%;
      max-width: 300px;
      transition: background-color 0.3s;
		letter-spacing: 1px;
    }
    .btn-gray:hover {
      background-color: #A0A0A0; /* ホバー時に少し明るく */
		  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: background-color 0.2s ease;
    }



    @media (min-width: 600px) {
      .button-container {
        flex-direction: row;
        justify-content: center;
      }
}



@media (max-width: 768px) {
.chiryo_container1,.chiryo_container2,.chiryo_container3 {
grid-template-columns: repeat(2, 1fr);
padding: 10px;
gap: 15px;
}	
.card {
      padding: 8px;
}
.card-content p {
      margin-bottom: 10px;
	letter-spacing: -0.5px;
}
	
.card img {
max-height: 100px;
}
}