/* ====== 整形外科クリニックリスト（grouplist1）====== */

.grouplist1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 10px;   /* 左右だけ10px */
  row-gap: 4px; 
  width: 900px;
  min-height: 335px; /* 必ずページ初期表示時に確保される高さ */
  margin: 0 auto;
  padding: 0;
}

/* タイトル行：必ず3カラムぶち抜きで表示 */
.grouplist1 h3.title1,
.grouplist1 h3.title2,
.grouplist1 h3.title3 {
  grid-column: 1 / -1;       /* ★これでズレ解消 */
  display: block;
  height: 22px;
  overflow: hidden;
  font-size: 15px;
  margin: 0 0 8px 0;
  padding: 0;
  text-indent: 5px;
}

.grouplist1 h3.title1,
.grouplist1 h3.title2,
.grouplist1 h3.title3 {
  grid-column: 1 / -1;
  display: block;
  height: 22px;
  overflow: hidden;
  font-size: 15px;
  margin: 0;              /* ★ここ point：margin-bottom をゼロに */
  padding: 0;
  text-indent: 5px;
}


.grouplist1 h3.title1 { color:#01b5bc; }
.grouplist1 h3.title2 { color:#f39939; }
.grouplist1 h3.title3 { color:#41AA3E; }

.grouplist1 img.title{
  display:block;
}

/* カード本体（block / block_e 共通） */
.grouplist1 .block,
.grouplist1 .block_e {
  display: block;
  width: 100%;
  min-height: 305px;           /* CLS対策：高さを確保 */
  border: #CCCCCC solid 1px;
  position: relative;
  overflow: hidden;
  margin: 0;
}

.grouplist1 a{
  display:block;
  margin:0;
  padding:0;
  text-decoration:none;
}

/* 施設写真（アスペクト比を固定） */
.grouplist1 .block img,
.grouplist1 .block_e img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:287 / 191;      /* 元画像 287x191 */
  margin:0;
  border:none;
}

/* MAPアイコン */
.grouplist1 .block img.map,
.grouplist1 .block_e img.map{
  position:absolute;
  right:3px;
  bottom:23px;
  width:26px;
  height:10px;
}

/* 見出し帯 */
.grouplist1 .block h4,
.grouplist1 .block_e h4{
  color:#FFFFFF;
  font-size:13px;
  font-weight:normal;
  text-align:center;
  margin:0;
  clear:both;
  padding:3px 0;
}
.grouplist1 .block h4.name,
.grouplist1 .block_e h4.name{
  background-color:#4dcbd0;
}
.grouplist1 .block h4.name2,
.grouplist1 .block_e h4.name2{
  background-color:#f39939;
}
.grouplist1 .block h4.name3,
.grouplist1 .block_e h4.name3{
  background-color:#41AA3E;
}
.grouplist1 .block h4 span,
.grouplist1 .block_e h4 span{
  font-size:9px;
  display:block;
  padding-bottom:2px;
}

/* テキスト部分 */
.grouplist1 .block p,
.grouplist1 .block_e p{
  text-align:center;
  margin:4px 8px;
  line-height:1.4em;
  color:#464646;
}
.grouplist1 .block p.tel,
.grouplist1 .block_e p.tel{
  font-size:13px;
  font-weight:bold;
}
.grouplist1 .block p.address,
.grouplist1 .block_e p.address{
  font-size:11px;
}
.grouplist1 .block p.address span,
.grouplist1 .block_e p.address span{
  letter-spacing:-0.1em;
}
.grouplist1 .block p.sev,
.grouplist1 .block_e p.sev{
  font-size:9px;
  margin-top:8px;
  margin-bottom:7px;
}

/* ===== レスポンシブ ===== */

/* 画面幅が899px以下のとき */
@media screen and (max-width: 899px) {
  .grouplist1 {
    width: 100%;        /* ★900px固定を解除 */
    min-height: 1020px;
    margin: 0 auto;
    grid-template-columns: repeat(2, 1fr);  /* 2列 */
    column-gap: 10px;
    row-gap: 6px;
    padding: 0 8px;      /* 端末左右に少し余裕 */
  }

  .grouplist1 .block {
    width: 100%;         /* ★内部カードの幅計算も自動 */
  }
}


@media screen and (max-width: 480px) {
  .grouplist1 {
    width:95%;
    grid-template-columns: repeat(1, 1fr);  /* 1列 */
    row-gap: 10px;
    padding: 0 6px;    /* 余白控えめ */
  }

  .grouplist1 .block {
    width: 100%;
    min-height: auto; /* 不要なら解除 */
  }
}