/* =========================================
   workslist
   ======================================= */
body {
 opacity: 1;
}
.works-list {
 padding-block: 60px 0;
 height: auto;
 overflow: hidden;
 text-align: left;
}
.works-list .container {
 max-width: unset;
 width: auto;
 margin: unset;
 padding: unset;
 margin-inline: 60px;
}
.works-list .important-tags {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 position: sticky;
 background: #fff;
 text-transform: uppercase;
}
.works-list .tag-pill {
 font-size: 15px;
 font-weight: 500;
 padding: 0.8em 1.2em;
 border-radius: 999px;
 background: #eee;
 color: #444;
 text-decoration: none;
 transition: background-color 0.2s;
 text-transform: uppercase;
}
.works-list .tag-pill.active {
 background: #e91e63; /* ピンク */
 color: #fff;
}
.works-list .recommended-tags {
 margin-top: 24px;
 text-transform: uppercase;
}
.works-list .recommended-tags .h6 {
 margin-bottom: 15px;
}
.works-list .recommended-tags .tags-list {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}
.works-list .rec-badge {
 font-size: 15px;
 font-weight: 500;
 padding: 0.8em 1.2em;
 border-radius: 999px;
 background: #eee;
 color: #444;
 text-decoration: none;
 transition: background-color 0.2s;
 text-transform: uppercase;
}
.works-list .rec-badge.active {
 background: #e91e63; /* ピンク */
 color: #fff;
}
.works-list .case-grid {
 display: flex;
 flex-wrap: wrap;
 gap: 24px;
 justify-content: left;
 margin-top: 60px;
}
.works-list .case-item {
 flex: 0 0 calc((100% - 24px * 3) / 4);
 max-width: calc((100% - 24px * 3) / 4);
 text-align: center;
 text-decoration: none;
 color: inherit;
 display: block;
}
.works-list .case-item .image {
 position: relative;
 width: 100%;
 display: flex;
 align-items: center;
 aspect-ratio: 16/9;
 border-radius: 8px;
 overflow: hidden;
}
.works-list .case-item img,
.works-list .case-item video {
 width: 100%;
 object-fit: cover;
 aspect-ratio: 16/9;
 transition: all 0.4s ease;
}

.works-list .case-title {
 margin-top: 8px;
 font-size: 1rem;
 font-weight: 600;
}

@media (min-width: 769px) {
 .works-list .tag-pill:hover:not(.active),
 .works-list .rec-badge:hover:not(.active) {
  background: #444;
  color: #fff;
 }
 .works-list .case-item:hover img,
 .works-list .case-item:hover video {
  transform: scale(1.1);
 }
}

/* レスポンシブ：768px 以下は 1 列 */
@media (max-width: 768px) {
 .works-list .container {
  margin-inline: 30px;
 }
 .works-list .case-item {
  flex: 0 0 calc((100% - 24px * 1) / 2);
  max-width: calc((100% - 24px * 1) / 2);
 }
}

@media (max-width: 600px) {
 .works-list {
  padding-block: 30px 0;
 }
 .works-list .container {
  margin-inline: 20px;
 }
 .works-list .tag-pill,
 .works-list .rec-badge {
  font-size: 13px;
 }
 .works-list .case-grid {
  margin-top: 40px;
 }
 .works-list .case-item {
  flex: 1 1 100%;
  max-width: 100%;
 }
}

/* =========================================
   Thank you
   ======================================= */
.thank-you {
 padding-block: 60px;
 height: auto;
 overflow: hidden;
 text-align: left;
}
.thank-you .container {
 max-width: 960px;
 width: auto;
 margin: unset;
 padding: unset;
 padding-inline: 60px;
 margin-inline: auto;
 text-align: center;
 min-height: calc(100svh - 384px);
}
.thank-you h1 {
 font-size: 52px;
 font-style: normal;
 line-height: normal;
 letter-spacing: 0.02em;
 color: #393939;
 font-weight: 600;
 margin-block: 40px;
}

@media (max-width: 768px) {
 .thank-you .container {
  padding-inline: 30px;
  min-height: calc(100svh - 378px);
 }
}

@media (max-width: 600px) {
 .thank-you .container {
  padding-inline: 20px;
  text-align: left;
 }
 .thank-you h1 {
  font-size: 40px;
  margin-block: 0 40px;
 }
}