/* リセット */
*, *:before, *:after {
    box-sizing: border-box;
}

A { text-decoration: none; }

/* ヘッダー部分 */
.wrap0 {
  margin-left: 10%;
  display: flex;
}

.pi {
  margin-top: 20px;
  margin-bottom: 20px;
}

.pi img{
  width: 80%;
}

.pagetitle {
  font-size: 38px;
  color: rgb(234, 12, 160);
  font-weight: 1000;
  font-family: 'Kosugi Maru', sans-serif;
  margin-top: 80px;
  padding-left: -40px;
}

/* 本文ラッパー */
.wrap {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

/* 場所タイトル */
.basho {
  background-color: rgb(195, 155, 244);
  color: #fcfafa;
  font-size: 20px;
  margin-top: 40px;
  margin-bottom: 30px;
  text-align: left;
}

/* ▼▼ 写真グリッド（ここが本題） ▼▼ */

/* PC：2枚表示（写真を大きく） */
.col_3 {
    display: flex;
    flex-wrap: wrap;
    gap: 16px; /* ← PC では余白を広めにして写真を大きく見せる */
}

.col_3 > div {
    flex: 1 1 calc(50% - 16px); /* ← PC：2枚表示 */
}

.col_3 img {
    width: 100%;
    height: auto;
    display: block;
}

/* タブレット：2枚表示（PCより少し余白を狭く） */
@media screen and (max-width: 960px) {

    .wrap {
        max-width: 900px;
    }

    .basho {
      margin-left: 50px;
      margin-right: 50px;
    }

    .col_3 {
        gap: 12px; /* ← タブレットは余白を少し狭く */
    }

    .col_3 > div {
        flex: 1 1 calc(50% - 12px); /* ← 2枚表示 */
    }
}

/* スマホ：1枚表示 */
@media screen and (max-width: 580px) {
    /* ヘッダー部分 */
    .wrap0 {
      margin-left: 0%;
      display: flex;
    }

    .pi {
      margin-top: 20px;
      margin-bottom: 20px;
    }

    .pi img{
      width: 40%;
    }

    .pagetitle {
      font-size: 28px;
      color: rgb(234, 12, 160);
      font-weight: 1000;
      font-family: 'Kosugi Maru', sans-serif;
      margin-top: 50px;
      margin-left: -100px;
    }


    .wrap {
        max-width: 500px;
    }

    .basho {
      margin-left: 20px;
      margin-right: 20px;
    }

    .col_3 {
        gap: 12px;
    }

    .col_3 > div {
        flex: 1 1 100%; /* ← 1枚表示 */
    }


}