@charset "utf-8";



h2{
    font-family: "Noto Sans JP";
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 0.05em;
    text-align: left;
    color: #0099d9;
    padding: 0 0 15px 0;
}

h3{
    font-family: "Noto Sans JP";
    font-weight: bold;
    font-size: 38px;
    letter-spacing: 0.05em;
    text-align: left;
    color: #0099d9;
}



@media screen and (max-width: 767px){

h2{
    font-size: 50px;
    font-family: "Zen Kaku Gothic New";
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 0.05em;
    text-align: left;
    color: #0099d9;
}
}

.mainvisual{
    position: relative;
    margin: 0px auto 0;
    /* display: flex; */
    right: 0;
    width: 100%;
    /* max-width: 1195px; */
    border-radius: 30px;
    /* overflow: hidden; */
    box-sizing: border-box;
    /* overflow: hidden; */
}

.mainvisual .works {
  width: 100%;
}

.mainvisual .works .works_list {
  width: 100%;
}

.mainvisual .works .works_list ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* 最初のビュー（1〜16枚目） */
.mainvisual .works .works_list ul li:nth-child(-n+16) {
  flex: 0 0 25%;   /* 横4つ */
  height: 25vh;    /* 縦4段で100vhに収める */
}

/* 17枚目以降は通常の高さ（比率で表示） */
.mainvisual .works .works_list ul li:nth-child(n+17) {
  flex: 0 0 25%;   /* 横4つはキープ */
  height: auto;    /* 高さは中の画像に任せる */
}

.mainvisual .works .works_list ul li a {
  display: block;
  width: 100%;
  height: 100%;
}

.mainvisual .works .works_list ul li a .photo {
  width: 100%;
  height: 100%;
  overflow: hidden;  /* 枠からはみ出さない */
  position: relative;
}

.mainvisual .works .works_list ul li a .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 枠いっぱいに収める */
  display: block;
  transition: transform 0.6s ease; /* イージング付きアニメーション */
}

/* hover時に拡大 */
.mainvisual .works .works_list ul li a .photo:hover img {
  transform: scale(1.1); /* 1.0 → 1.1倍にズーム */
}

/* 17枚目以降は16:9の比率で並べたい場合 */
.mainvisual .works .works_list ul li:nth-child(n+17) a .photo {
  aspect-ratio: 16 / 9;
  height: auto;
}




.photo {
  position: relative;
  overflow: hidden;
}

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

/* 通常画像・hover画像両方にtransitionをしっかり指定 */
.photo .img-default,
.photo .img-hover {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 1s ease; /* ← ここがポイント */
}

/* 通常は通常画像だけ表示 */
.photo .img-default {
  opacity: 1;
  z-index: 1;
}
.photo .img-hover {
  opacity: 0;
  z-index: 2;
}

/* hover時にクロスフェード */
.works_list ul li:hover .photo .img-default {
  opacity: 0;
}
.works_list ul li:hover .photo .img-hover {
  opacity: 1;
}




/* ---------------- スマホ対応 ---------------- */
@media screen and (max-width: 768px) {
  .mainvisual .works .works_list ul {
    display: block;
    
}
.mainvisual .works .works_list ul {
    flex-direction: column; /* 縦並び */
  }

  .mainvisual .works .works_list ul li {
    flex: 0 0 100%;   /* 横幅100%で1列 */
    height: auto;     /* 高さリセット */
  }

  /* photo枠を16:9に統一 */
  .mainvisual .works .works_list ul li a .photo {
    width: 100%;
    aspect-ratio: 16 / 9;  /* 高さを比率で自動計算 */
    overflow: hidden;
    position: relative;
  }

  .mainvisual .works .works_list ul li a .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠いっぱいに表示 */
    display: block;
  }
  
}




::-webkit-scrollbar {
  width: 12px;               /* スクロールバーの太さ */
}

::-webkit-scrollbar-track {
  background: #f0f0f0;        /* バーの背景 */
}

::-webkit-scrollbar-thumb {
  background-color: #333;     /* つまみの色 */
  border-radius: 6px;         /* 角丸 */
  border: 2px solid #f0f0f0;  /* 余白っぽい見た目にする */
}

/* Firefox 対応 */
* {
  scrollbar-width: thin;         /* 細めに */
  scrollbar-color: #333 #f0f0f0; /* つまみ色 背景色 */
}

.photo {
  position: relative;
  overflow: hidden;
}

.photo-title {
  position: absolute;
  bottom: 8px;        /* 画像の下から少し上に */
  left: 8px;          /* 左に寄せる */
  margin: 0;
  padding: 2px 6px;
  font-size: 12px;    /* 小さめ */
  color: #fff;
  background: rgba(0,0,0,0.5); /* 半透明の黒背景 */
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 3;
  font-family: 'Share Tech Mono', monospace; /* ← シンプルなゲーム感 */
}

.works_list ul li:hover .photo-title {
  opacity: 1;
}