/* =========================================================
   DEVELOPMENT CASE : FOR CREATOR スライダー / FOR COMPANY ロゴグリッド
   （style.css の .devcase / .dc-tabs / .dc-card を拡張）
   ========================================================= */ :root {
 --bg: #dfdfdf;
 --ink: #111111;
 --ink-2: #525252;
 --gray: #737373;
 --gray-2: #9CA3AF;
 --line: #E5E5E5;
 --line-gray: #E5E5E5;
 --line-soft: #D9D9D9;
 --white: #FFFFFF;
 --dark: #111111;
 --req: #EF4444;
 /* font sizes */
 --fs-10: 10px;
 --fs-11: 11px;
 --fs-12: 12px;
 --fs-13: 13px;
 --fs-14: 14px;
 --fs-15: 15px;
 --fs-16: 16px;
 --fs-17: 17px;
 --fs-18: 18px;
 --fs-19: 19px;
 --fs-20: 20px;
 --fs-22: 22px;
 --fs-24: 24px;
 --fs-26: 26px;
 --fs-29: 29px;
 --fs-30: 30px;
 --fs-34: 34px;
 --fs-36: 36px;
 --fs-40: 40px;
 --fs-48: 48px;
 --fs-52: 52px;
 --fs-54: 54px;
 --fs-60: 60px;
}
/* パネル切替 */
.dc-panel {
 display: none;
}
.dc-panel.is-active {
 display: block;
}
.dc-panel[hidden] {
 display: none;
}
.dc-panel.is-active[hidden] {
 display: block;
}
/* ---- FOR CREATOR : Swiper スライダー ---- */
.dc-panel--creator {
 padding: 48px 0 8px;
}
.dc-swiper {
 width: 100%;
 padding-inline: max(var(--pad), calc((100vw - var(--container)) / 2 + var(--pad)));
 overflow: hidden;
}
.dc-swiper .swiper-wrapper {
 /* Swiper未初期化（JS無効）時も横並びスクロールで見えるようにフォールバック */
 align-items: stretch;
}
.dc-swiper .dc-card {
 width: 250px;
 flex: 0 0 auto;
 margin: 0;
 height: auto;
}
.dc-swiper .dc-card img {
 width: 100%;
 height: auto;
 display: block;
}
/* JS無効時のフォールバック（Swiper未初期化なら素の横スクロール） */
.dc-swiper:not(.swiper-initialized) .swiper-wrapper {
 display: flex;
 gap: 32px;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: thin;
}
/* ---- FOR COMPANY : ロゴグリッド ---- */
.dc-panel--company {
 padding: 56px 0;
 background-color: var(--white);
}
.dc-logos {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 gap: 20px 24px;
}
.dc-logo {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 80px;
 padding: 8px 12px;
}
.dc-logo img {
 max-width: 100%;
 max-height: 100%;
 width: auto;
 height: auto;
 object-fit: contain;
}
/* ---- レスポンシブ ---- */
@media (max-width: 1100px) {
 .dc-logos {
  grid-template-columns: repeat(4, 1fr);
 }
}
@media (max-width: 768px) {
 .dc-panel--creator {
  padding-top: 36px;
 }
 .dc-swiper .dc-card {
  width: 226px;
 }
 .dc-swiper:not(.swiper-initialized) .swiper-wrapper {
  gap: 20px;
 }
 .dc-logos {
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 16px;
 }
 .dc-logo {
  height: 64px;
 }
}
@media (max-width: 550px) {
 .worksSlide2 .workS {}
}
@media (max-width: 380px) {
 .dc-logos {
  grid-template-columns: repeat(2, 1fr);
 }
}