/* ===============================
   Works 一覧
=============================== */
.works-bg {
  background-color: #FFFDE6;
  padding-top: 5rem;
  padding-bottom: 10rem;
}
.works-index-space {
  margin-bottom: 5rem;
}

.works-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.works-company {
  font-size: 14px;
  color: #666;
  margin-top: 8px;
}

.works-title {
  font-size: 16px;
  font-weight: bold;
  margin: 4px 0;
}

.works-tags {
  margin-top: 6px;
}

.works-tag {
  display: inline-block;
  font-size: 12px;
  background: #EEECEC;
  padding: 4px 10px;
  margin-right: 6px;
  margin-bottom: 4px;
  font-weight: 500;
}

/* ===============================
   フィルター
=============================== */

.works-filter {
  margin-bottom: 40px;
}

.works-filter-fixed,
.works-filter-auto {
  text-align: left;
  margin-bottom: 12px;
  padding-left: 0rem;
}

.works-filter button {
  padding: 8px 16px;
  margin: 4px;
  border-radius: 30px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}
/* さらに絞り込む（文字リンク風） */
.works-filter .filter-more {
  background: transparent;
  border: none;
  padding: 8px 16px;
  margin: 4px;
  color: #333;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* hover */
.works-filter .filter-more:hover {
  opacity: 0.7;
  color: #0F94D4;
}

.works-filter button.is-active {
  background: #0F94D4;
  color: #fff;
  border-color: #0F94D4;
}
.works-filter button:hover {
  background: #0F94D4;
  color: #fff;
  border-color: #0F94D4;
}
.works-filter-auto:hover {
  cursor: pointer;
  color: #0F94D4;
}

/* さらに絞り込むボタン */
.works-filter .filter-open {
  padding: 8px 16px;
  margin: 4px;
  border-radius: 30px;
  border: 1px dashed #0f94d4;
  background: #fff;
  color: #0f94d4;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.works-filter .filter-open:hover {
  color: #0f94d4;
}

/* ラジオフィルター全体 */
.filter-panel {
  display: none;
  margin-top: 12px;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 16px;
  background: #fff;
}

/* 開いた状態 */
.filter-panel.is-open {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* ===============================
チェックボックスフィルター（安定版）
=============================== */

.filter-checkbox {
  position: relative;
}

/* checkbox本体は非表示 */
.filter-checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.works-filter button:focus,
.works-filter button:focus-visible {
  outline: none;
  box-shadow: none;
}

/* 見た目 */
.filter-checkbox span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

/* □（固定サイズ） */
.filter-checkbox span::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid #333;
  border-radius: 3px;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* hover */
.filter-checkbox span:hover {
  color: #0f94d4;
}

/* チェック時（文字色） */
.filter-checkbox input:checked + span {
  color: #0f94d4;
}

/* ☑ 表現（サイズ変化なし） */
.filter-checkbox input:checked + span::before {
  background: #0f94d4;
  box-shadow: inset 0 0 0 3px #fff;
}/* ===============================
   詳細ページ 共通
=============================== */

.works-detail {
  max-width: 80%;
  margin: 0 auto;
  margin-top: 7rem;
}

.works-detail h1 {
  font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
  font-size: clamp(25px, 33.6px + 10px, 32px);
  margin-bottom: 2rem;
  font-weight: 700;
}

.works-detail .client {
  color: #666;
}

.works-detail .tags {
  margin-bottom: 24px;
}

.works-detail .tags .tag {
  display: inline-block;
  background: #EEECEC;
  font-size: 12px;
  padding: 4px 10px;
  margin-right: 6px;
  font-weight: 500;
}

/* ===============================
   Section 共通
=============================== */

.works-section {
  margin: 64px auto;
  max-width: 100%;
}

.section-text {
  margin-top: 15px;
  line-height: 1.8;
  color: #333;
}

.works-section-item{
  margin-bottom: 10rem;
}
.section-title {
  font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
  font-size: 2.5rem;
  margin-top: 3rem;
  font-weight: 600;
}

/* ===============================
   imageScroll：縦スクロール × 横並び
=============================== */

.works-section-scroll {
  margin: 80px auto;
  max-width: 1350px;
  padding: 0 16px;
}

.scroll-columns {
  display: flex;
  gap: 40px;
  justify-content: center;
}


/* 1枚目：PC幅 */
.scroll-column:nth-child(1) {
  width: 75%;
}

/* 2枚目：SP幅 */
.scroll-column:nth-child(2) {
  width: 20%;
}

/* 中の縦スクロール */
.scroll-column {
  max-height: 70vh;
  overflow-y: auto;
}
/* 中の画像 */
.scroll-column img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  margin-bottom: 24px;
  border-radius: 8px;
}



/* スマホは縦並び */
@media screen and (max-width: 768px) {
  .scroll-columns {
    flex-direction: column;
  }

  .scroll-column:nth-child(1),
  .scroll-column:nth-child(2) {
    width: 100%;
  }
}

/* ===============================
   imageText（左画像 / 右テキスト）
=============================== */

.section-image img {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;  /* 全体を表示 */
  display: block;
}

.works-section-image-text .section-image img {
  width: 100%;
  height: auto;
  display: block;
}

.works-section-image-text .section-text {
  line-height: 1.8;
}

/* ===============================
   1枚画像のみ
=============================== */

.single-image img {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  display: block;
  border-radius: 8px;
}

/* ===============================
   レスポンシブ
=============================== */

@media screen and (max-width: 768px) {
  .works-section-image-text {
    flex-direction: column;
  }
}

/* ===== imageScroll 安定版 ===== */
.works-section-scroll .scroll-images {
  max-height: 70vh;      /* 画面の70%まで */
  overflow-y: auto;
}

.works-section-scroll .scroll-images img {
  width: 100%;
  object-fit: contain;  /* 全体を表示 */
  margin-bottom: 24px;
  border-radius: 8px;
}

/* ===== imageText 画像暴走防止 ===== */
.works-section-image-text .section-image img {
  width: 100%;
  max-height: 500px;
  object-fit: contain;  /* 全体を見せる */
  border-radius: 8px;
  display: block;
}

/* ===== Hero・Figure画像 画面内収納 ===== */
.works-hero{
  aspect-ratio: 21 / 9;
}
.works-hero img {
  width: 100%;
  object-fit: cover;
}

/* 通常の figure の画像は画面内に収める（既存の挙動） */
figure img {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;  /* 全体を表示 */
  display: block;
  border-radius: 8px;
}

figure {
  max-width: 80%;
  margin: 0 auto;
  padding: 0 16px;
}

/* 小さい画面ではヒーローの高さを抑える */
@media screen and (max-width: 768px) {
  .works-hero img {
    height: 60vh;
  }
}


/* 制作表 */
.works-detail-bg {
  padding-bottom: 13rem;
  margin: 0 auto;
  max-width: 80%;
  margin-top: 5rem;
}
.works-item {
  display: flex;
  align-items: flex-start;
  border-bottom: 1.5px solid #c4c4c4;
  padding: 2.5rem 0;
  gap: 4rem;
}
.works-item:last-child {
  border-bottom: none;
}
.works-label {
  display: flex;
  gap: 0.6rem;
  min-width: 160px;
}
.works-label h2{
  font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
  color: #0f94d4;
  font-weight: 700;
}
.works-value {
  flex: 1;
  color: #333;
  text-align: justify;
}

.works-value p {
  margin: 0;
  padding: 0;
}

/* URL表示 */
.work-url {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 16px;
  font-size: 1.8rem;
}

.work-url i.fa-link {
  flex-shrink: 0;
  color: #0f94d4;
}

.work-url a {
  color: #333;
  text-decoration: none;
  word-break: break-all;
  font-weight: 600;
}

.work-url a:hover {
  text-decoration: underline;
  color: #0f94d4;
}

.related-works {
  margin-top: 80px;
}

.related-works-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.related-work-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.related-thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}

.works-space {
  margin-bottom: 5rem;
  padding-top: 8rem;
}

/* =========================
  その他の制作実績
========================= */

.related-works {
  margin-top: 80px;
}

.related-works .yellow-title {
  margin-bottom: 32px;
  text-align: center;
}

/* 一覧：3列固定 */
#works-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
  margin-bottom: 7rem;
}

/* カード（背景なし） */
.works-box {
  overflow: hidden;
}

.works-box a {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* 画像ラッパー */
.works-box img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

/* hoverで画像だけ拡大 */
.works-box:hover img {
  transform: scale(1.05);
}

/* テキスト */
.works-box .works-client {
  margin: 12px 0 4px;
  font-size: 13px;
  color: #777;
}

.works-box .works-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

/* タグ */
.works-box .works-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}


/* =========================
  レスポンシブ
========================= */

/* タブレット */
@media (max-width: 991px) {
  #related-works-list {
    grid-template-columns: repeat(2, 1fr);
  }
  #works-list {
  grid-template-columns: repeat(2, 1fr);
  gap: 49px;
}
}

/* スマホ */
@media (max-width: 575px) {
  #related-works-list {
    grid-template-columns: 1fr;
  }
  #works-list {
  grid-template-columns: repeat(1, 1fr);
  gap: 60px;
}}