@charset "UTF-8";

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

/* ============================================================
   セクション3:制作実績 (SP版 - 最終安定・座標リセット・JS連動版)
   ============================================================ */

/* --- 親要素 --- */
.sec-3 {
  position: relative;
  display: block;
  width: 100%;
  max-width: 375px;
  height: auto;
  padding-bottom: 60px;
  background: #FFFFFF;
  z-index: 10;
  overflow-x: hidden;
  overflow-y: visible;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 0;
}

.sec-3 .sec-3__inner {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  left: auto;
  right: auto;
  top: 0;
  transform: none;
  background: transparent;
}

/* --- 背景・タイトル (座標固定) --- */
.sec-3__bg {
  position: absolute;
  width: 100%;
  height: 172px;
  left: 0;
  top: 0;
  background: url("../images/sp/sec3/背景@2x 1.png") no-repeat center top / cover;
  z-index: 1;
}

.sec-3__title-1 {
  position: absolute;
  width: 335px;
  height: auto;
  aspect-ratio: 407 / 112;
  left: 20px;
  top: 25px;
  background: url("../images/sp/sec3/7897987.png") no-repeat center center / contain;
  transform: none;
  z-index: 2;
  margin: 0;
  /* 光のアニメーション用 */
  overflow: hidden;
}

/* スマホ版にも光が走るアニメーションを全復旧 */
.sec-3__title-1::after {
  content: "";
  position: absolute;
  width: 40%;
  height: 100%;
  top: 0;
  left: -40%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.15) 70%, transparent 100%);
  z-index: 3;
  pointer-events: none;
  animation: sweepLight 4s ease-in-out infinite;
}

.sec-3__note {
  position: absolute;
  width: 100%;
  left: 0;
  top: 112px;
  font-size: 10px;
  text-align: center;
  color: #333333;
  z-index: 2;
}

.sec-3__heading {
  position: absolute;
  width: 100%;
  left: 0;
  top: 147px;
  font-size: 20px;
  text-align: center;
  color: #333333;
  z-index: 2;
  font-weight: 500;
}

.sec-3__line {
  position: absolute;
  width: 55px;
  left: 160px;
  top: 182px;
  border-top: 1px solid #333333;
  z-index: 2;
}

/* --- タブ切り替えUI --- */
.sec-3__tab-bg {
  display: block;
  position: absolute;
  width: 335px;
  height: 30px;
  left: 20px;
  top: 212px;
  background: #D9D9D9;
  border-radius: 100px;
  z-index: 2;
}

.sec-3__tab-active {
  display: block;
  position: absolute;
  width: 168px;
  height: 30px;
  left: 20px;
  top: 212px;
  background: #1E333B;
  border-radius: 100px;
  z-index: 3;
  transition: transform 0.3s ease;
}

.sec-3__tab-active.is-right {
  transform: translateX(167px);
}

.sec-3__tab-text-left,
.sec-3__tab-text-right {
  display: block;
  position: absolute;
  width: 168px;
  height: 30px;
  top: 212px;
  z-index: 5;
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 30px;
}

.sec-3__tab-text-left {
  left: 20px;
}

.sec-3__tab-text-right {
  left: 187px;
}

.is-active-tab {
  color: #FFFFFF;
}

.is-inactive-tab {
  color: #6A7A80;
}

/* ============================================================
   制作実績グリッド：JS主導の枚数制限に対応
   ============================================================ */

.sec-3__dynamic-content {
  position: relative;
  display: block;
  width: 100%;
  top: 0; /* PC版の447pxを完全に殺す！これが巨大空白の元凶。 */
  padding-top: 282px; /* Figma絶対座標: グリッドTop 2635px - セクションTop 2353px = 282px */
  z-index: 3;
  left: 0;
  margin: 0;
}

.sec-3 .sec-3__works-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 160px);
  gap: 15px;
  justify-content: center;
  width: 100%;
  height: auto;
  left: 0;
  top: 0;
  margin: 0;
  transform: none;
  /* SP: デフォルトで4行(8枚)までに制限 */
  max-height: 685px; /* 4行×160px + 3gap×15px */
  overflow: hidden;
}

.sec-3 .sec-3__works-grid.is-expanded {
  max-height: none;
  overflow: visible;
}

/* アイテム基本設定 */
.sec-3__work-item {
  position: relative;
  /* Gridフローに完全準拠 */
  display: block;
  width: 160px;
  height: 160px;
  background: #D9D9D9;
  /* PC版からの干渉を徹底リセット */
  opacity: 1;
  visibility: visible;
  transform: none;
  scale: 1;
  left: 0;
  top: 0;
  margin: 0;
}

/* 
   非表示ルール：JSが付与するクラスによってのみ制御する 
   (CSSの nth-child 制限は論理矛盾を招くため廃止)
*/
.sec-3__work-item.is-hidden,
.sec-3__work-item.is-load-more-hidden {
  display: none !important;
}

.sec-3__work-img {
  position: absolute;
  width: 100%;
  height: 133.19px;
  left: 0;
  top: 13px;
  background-size: cover;
  background-position: center;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* タップ時のフィードバック（画像が少し浮き上がる） */
.sec-3__work-item:active .sec-3__work-img {
  transform: scale(1.05);
}

/* ============================================================
   「もっと見る」ボタン：JS制御を妨げない 
   ============================================================ */
.sec-3__more-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 13px;
  width: 305px;
  height: 30px;
  margin: 20px auto 0;
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: none;
  box-shadow: inset 0 0 0 1.5px #1E333B;
  border-radius: 100px;
  z-index: 4;
  text-decoration: none;
  /* スマホ特有の背景チラつき（Z-fighting）を防止する魔法の1行 */
  transform: translateZ(0);
}

.sec-3__more-text {
  position: relative;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  font-weight: 600;
  font-size: 14px;
  line-height: 150%;
  text-align: center;
  color: #1E333B;
}

.sec-3__more-chevron {
  position: relative;
  width: 8px;
  height: 8px;
  border-right: 2px solid #1E333B;
  border-bottom: 2px solid #1E333B;
  transform: rotate(45deg);
}

} /* end @media */