@charset "utf-8";
/* CSS Document */
/* 1. ページ全体をスムーズスクロールにする */
html {
  scroll-behavior: smooth;
}

[id] {
  scroll-margin-top: 100px;
}

.works_1{
  color:#aaa;
  font-size:35px;
  text-transform: uppercase; /* 強制的にすべて大文字にして表示する */
  letter-spacing:0.2em;
}


.works_2{
  width:100%;
  margin:0 auto;
  margin-bottom:30px;
  padding-top:1px;
  font-size:25px;

}

.works_3{
  width:90%;
  margin:0 auto;
  max-width:1280px;
  padding-top:100px;
}

.works_4{
  width:90%;
  margin:0 auto;
  margin-bottom:30px;
  max-width:1280px;
  text-decoration: none; /* 標準の下線を消す */
  border-bottom: 1px solid #000000; /* 太さ・線種・色を指定 */
  padding-bottom: 2px; /* 文字と下線の間に少し隙間を空けるときれいです */
}

.works_5{
  width:90%;
  margin:0 auto;
  margin-bottom:100px;
  max-width:1280px;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* スマホは横2つ */
  gap: 20px; /* 要素同士の間隔（お好みで調整してください） */
  align-items: stretch; /* 行ごとに高さを揃える */
}

.works_6{
  display: flex;
  flex-direction: column; /* 写真とテキストを上下（縦）に並べる */
  box-sizing: border-box;
}

.works_7{
  flex-shrink: 0; /* テキスト量によって写真が縮んでしまわないようにする */
  width: 100%;          /* カード全体の幅に対する割合で自動調整（お好みで 25%〜35% 程度に調整可能） */
  aspect-ratio: 4 / 3; /* 自動で4対3を維持する */
}

/* 7の中にある実際の画像（<img>タグなど）に対する設定 */
.works_7 img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 画像が歪まないようにトリミングして枠に合わせる */
  border-radius: 4px;  /* お好みで角丸にする場合 */
}

.works_8{
  flex-grow: 1; /* 残りの幅いっぱいにテキストエリアを広げる */
}

/* デスクトップ用スタイル（1024px以上） */
@media only screen and (min-width: 1024px) {

.works_5 {
    grid-template-columns: repeat(3, 1fr); /* 横3つに並べる */
}
  
}