.mt100{
    margin-top: 100px;
}
.about .content_inner > div:first-of-type{
    margin-right: auto;
}
.main-cap{
    font-size: 1.8rem;
    letter-spacing: .15em;
    line-height: 1;
    font-family: "Josefin Sans", sans-serif;
    font-weight: 400;
    margin-bottom: 30px;
    display: inline-block;
}

.works-image-block {
  max-width: 1200px;
  margin: 0 auto;
}

.block {
  display: grid;
  gap: 20px;
  margin-bottom: 50px;
}

.block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* キャプション下にぶら下げ */
.caption-wrapper {
  display: flex;
  flex-direction: column;
}
.caption-wrapper .caption {
  text-align: right;
  font-size: 14px;
  margin-top: 5px;
  color: #333;
}

/* ===== ブロック1 ===== */
.block1 {
  grid-template-rows: auto auto;
}
.block1 .big {height: 500px;}
.block1 .smalls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.block1 .smalls img { height: 200px; }

/* ===== ブロック2 ===== */
.block2 {
  grid-template-rows: auto auto;
  gap: 20px;
}
.block2 .top {
  display: grid;
  grid-template-columns: 3fr 7fr;
  gap: 20px;
}
.block2 .top img {height: 400px;}
.block2 .bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.block2 .bottom img {height: 300px;}

/* ===== ブロック3 ===== */
.block3 {
  grid-template-rows: auto auto;
  gap: 20px;
}
.block3 .top {
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 20px;
}
.block3 .top img {height: 500px;}
.block3 .bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.block3 .bottom img {height: 300px;}
/* ===== ブロック4 ===== */
.block4 {
  display: grid;
  gap: 20px;
}

.block4 .top {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.block4 .bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.block4 .bottom img{
     width: 100%;
  height: 300px; /* お好みで調整 */
  object-fit: cover; 
}
.block4 .top img {
  width: 100%;
  height: 400px; /* お好みで調整 */
  object-fit: cover;
}

/* キャプション */
.block4 .caption-wrapper {
  display: flex;
  flex-direction: column;
}

.block4 .caption-wrapper .caption {
  text-align: right;
  font-size: 14px;
  margin-top: 5px;
  color: #333;
}


/* ===== レスポンシブ ===== */
@media (max-width: 768px) {
  .main-cap{
    font-size: 1.5rem;
  }
    .block1 .big{
        height: 100%;
    }
    .block2 .top img,
    .block2 .bottom img,
    .block3 .top img,
    .block3 .bottom img {
        height: auto;
    }
  .block1 .smalls,
  .block2 .top,
  .block2 .bottom,
  .block3 .top,
  .block3 .bottom {
    grid-template-columns: repeat(1, 1fr);
  }
    .block4 .top,
  .block4 .bottom {
    grid-template-columns: repeat(1, 1fr);
  }
}